Team List

<div
  class="ws-profile-widget rounded-2xl border p-6 max-w-sm mx-auto"
  style="
    --ws-profile-widget-bg: oklch(0.98 0.005 75);
    --ws-profile-widget-text: oklch(0.2 0.02 75);
    --ws-profile-widget-text-soft: oklch(0.35 0.015 75);
    --ws-profile-widget-text-muted: oklch(0.55 0.01 75);
    --ws-profile-widget-border: oklch(0.88 0.015 75);
    --ws-profile-widget-accent: oklch(0.55 0.12 75);
    --ws-profile-widget-accent-soft: oklch(0.92 0.04 75);
    --ws-profile-widget-success: oklch(0.65 0.18 145);
    background: var(--ws-profile-widget-bg);
    color: var(--ws-profile-widget-text);
    border-color: var(--ws-profile-widget-border);
  "
>
  <!-- Header -->
  <div class="flex items-center justify-between mb-5">
    <h3 class="text-base font-semibold" style="color: var(--ws-profile-widget-text);">Team</h3>
    <span
      class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium"
      style="background: var(--ws-profile-widget-accent-soft); color: var(--ws-profile-widget-accent);"
    >
      8
    </span>
  </div>

  <!-- Member List -->
  <ul class="space-y-1" role="list">
    <li class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-black/[0.03]">
      <div
        class="flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
        style="background: oklch(0.6 0.15 250);"
        aria-hidden="true"
      >
        S
      </div>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" style="color: var(--ws-profile-widget-text);">Sarah Chen</p>
        <p class="truncate text-xs" style="color: var(--ws-profile-widget-text-muted);">Product Designer</p>
      </div>
      <span class="size-2 shrink-0 rounded-full" style="background: var(--ws-profile-widget-success);" aria-label="Online"></span>
    </li>

    <li class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-black/[0.03]">
      <div
        class="flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
        style="background: oklch(0.55 0.14 30);"
        aria-hidden="true"
      >
        M
      </div>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" style="color: var(--ws-profile-widget-text);">Marcus Rivera</p>
        <p class="truncate text-xs" style="color: var(--ws-profile-widget-text-muted);">Frontend Engineer</p>
      </div>
      <span class="size-2 shrink-0 rounded-full" style="background: var(--ws-profile-widget-success);" aria-label="Online"></span>
    </li>

    <li class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-black/[0.03]">
      <div
        class="flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
        style="background: oklch(0.6 0.15 160);"
        aria-hidden="true"
      >
        A
      </div>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" style="color: var(--ws-profile-widget-text);">Aisha Patel</p>
        <p class="truncate text-xs" style="color: var(--ws-profile-widget-text-muted);">UX Researcher</p>
      </div>
      <span class="size-2 shrink-0 rounded-full bg-neutral-300" aria-label="Offline"></span>
    </li>

    <li class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-black/[0.03]">
      <div
        class="flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
        style="background: oklch(0.55 0.12 300);"
        aria-hidden="true"
      >
        J
      </div>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" style="color: var(--ws-profile-widget-text);">Jonas Kim</p>
        <p class="truncate text-xs" style="color: var(--ws-profile-widget-text-muted);">Backend Engineer</p>
      </div>
      <span class="size-2 shrink-0 rounded-full" style="background: var(--ws-profile-widget-success);" aria-label="Online"></span>
    </li>

    <li class="flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-black/[0.03]">
      <div
        class="flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
        style="background: oklch(0.6 0.13 75);"
        aria-hidden="true"
      >
        L
      </div>
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" style="color: var(--ws-profile-widget-text);">Lena Hoffmann</p>
        <p class="truncate text-xs" style="color: var(--ws-profile-widget-text-muted);">Project Manager</p>
      </div>
      <span class="size-2 shrink-0 rounded-full bg-neutral-300" aria-label="Offline"></span>
    </li>
  </ul>
</div>