Kanban Board Widget

<div
  class="ws-task-widget rounded-2xl border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-4"
>
  <div class="mb-4 flex items-center justify-between px-1">
    <h2 class="text-base font-semibold text-[var(--ws-task-widget-text)]">Board</h2>
    <span class="text-xs text-[var(--ws-task-widget-text-muted)]">7 tasks</span>
  </div>

  <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">

    <!-- To Do Column -->
    <div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
      <div class="mb-3 flex items-center justify-between">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">To Do</h3>
        <span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-bg)] text-[0.625rem] font-medium text-[var(--ws-task-widget-text-muted)]">3</span>
      </div>
      <div class="flex flex-col gap-2">
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Design system tokens</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-[var(--ws-task-widget-accent)]/15 px-2 py-0.5 text-[0.625rem] font-medium text-[var(--ws-task-widget-accent)]">Design</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-purple-100 text-[0.625rem] font-semibold text-purple-700" aria-label="Assigned to A">A</span>
          </div>
        </article>
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">API error handling</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-red-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-red-600">Bug</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-blue-100 text-[0.625rem] font-semibold text-blue-700" aria-label="Assigned to M">M</span>
          </div>
        </article>
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Onboarding flow</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-amber-100 text-[0.625rem] font-semibold text-amber-700" aria-label="Assigned to S">S</span>
          </div>
        </article>
      </div>
    </div>

    <!-- In Progress Column -->
    <div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
      <div class="mb-3 flex items-center justify-between">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">In Progress</h3>
        <span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-bg)] text-[0.625rem] font-medium text-[var(--ws-task-widget-text-muted)]">2</span>
      </div>
      <div class="flex flex-col gap-2">
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Dashboard layout</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-[var(--ws-task-widget-accent)]/15 px-2 py-0.5 text-[0.625rem] font-medium text-[var(--ws-task-widget-accent)]">Design</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-emerald-100 text-[0.625rem] font-semibold text-emerald-700" aria-label="Assigned to J">J</span>
          </div>
        </article>
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text)]">Auth integration</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-purple-100 text-[0.625rem] font-semibold text-purple-700" aria-label="Assigned to A">A</span>
          </div>
        </article>
      </div>
    </div>

    <!-- Done Column -->
    <div class="rounded-xl bg-[var(--ws-task-widget-muted-bg)] p-3">
      <div class="mb-3 flex items-center justify-between">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-task-widget-text-soft)]">Done</h3>
        <span class="inline-flex size-5 items-center justify-center rounded-full bg-[var(--ws-task-widget-success)]/15 text-[0.625rem] font-medium text-[var(--ws-task-widget-success)]">2</span>
      </div>
      <div class="flex flex-col gap-2">
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text-muted)] line-through">Project setup</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-green-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-green-600">Feature</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-blue-100 text-[0.625rem] font-semibold text-blue-700" aria-label="Assigned to M">M</span>
          </div>
        </article>
        <article class="rounded-lg border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] p-3">
          <h4 class="text-sm font-medium text-[var(--ws-task-widget-text-muted)] line-through">CI/CD pipeline</h4>
          <div class="mt-2 flex items-center justify-between">
            <span class="rounded-full bg-amber-500/15 px-2 py-0.5 text-[0.625rem] font-medium text-amber-600">DevOps</span>
            <span class="flex size-6 items-center justify-center rounded-full bg-emerald-100 text-[0.625rem] font-semibold text-emerald-700" aria-label="Assigned to J">J</span>
          </div>
        </article>
      </div>
    </div>

  </div>
</div>