cv-task-list

Slotted shell for task rows with panel, busy, empty, header, footer, and density styling.

The component provides task-list structure, accessible busy/empty semantics, and baseline styling for direct slotted role="listitem" rows. Consumers still own task data, progress math, formatting, retry, cancel, and custom row behavior.

Usage

View source

<div class="task-list-demo-shell" data-demo="task-list" data-live-demo-height="760">
  <section class="task-list-demo-hero" aria-labelledby="task-list-demo-title">
    <div class="task-list-demo-copy">
      <span class="task-list-demo-kicker">Transfer surface</span>
      <h3 id="task-list-demo-title">
        Keep every queued operation scannable while the batch is still moving.
      </h3>
      <p>
        <code>cv-task-list</code> owns the accessible list shell, busy state, empty state placement, and row
        density. Product code keeps ownership of task data, retry/cancel actions, and progress math.
      </p>
    </div>

    <dl class="task-list-demo-metrics" aria-label="Queue summary">
      <div>
        <dt>Active</dt>
        <dd>2 encrypted tasks</dd>
      </div>
      <div>
        <dt>Payload</dt>
        <dd>1.8 GB / 2.4 GB</dd>
      </div>
      <div>
        <dt>Window</dt>
        <dd>Retry open</dd>
      </div>
    </dl>
  </section>

  <section class="task-list-demo-board" aria-label="Task list presentation">
    <cv-task-list class="task-list-demo-main-list" label="Deniable export transfer tasks" busy>
      <span slot="header" class="task-list-demo-title">Deniable export transfer</span>
      <cv-badge slot="header" variant="primary" pulse>Running</cv-badge>

      <div class="task-list-demo-row task-list-demo-row--active" role="listitem">
        <div class="task-list-demo-row-main">
          <strong>Encrypt vault-export.zip</strong>
          <span>Chunk 18 of 25 - ChaCha20 stream sealed</span>
          <cv-progress value="72" value-text="72%" aria-label="Encrypt vault export progress"></cv-progress>
        </div>
        <cv-badge variant="primary" pulse>72%</cv-badge>
      </div>

      <div class="task-list-demo-row task-list-demo-row--success" role="listitem">
        <div class="task-list-demo-row-main">
          <strong>Verify metadata manifest</strong>
          <span>Checksums match the local catalog snapshot</span>
          <cv-progress
            tone="success"
            value="100"
            value-text="Complete"
            aria-label="Metadata manifest verification progress"
          ></cv-progress>
        </div>
        <cv-badge variant="success">Done</cv-badge>
      </div>

      <div class="task-list-demo-row task-list-demo-row--queued" role="listitem">
        <div class="task-list-demo-row-main">
          <strong>Upload encrypted backup</strong>
          <span>Waiting for a network slot before retrying</span>
          <cv-progress
            tone="queued"
            value="0"
            value-text="Queued"
            aria-label="Encrypted backup upload queue progress"
          ></cv-progress>
        </div>
        <cv-button size="small" variant="ghost">Cancel</cv-button>
      </div>

      <span slot="footer" class="task-list-demo-footer">2 active / 1 queued / updated now</span>
    </cv-task-list>

    <div class="task-list-demo-side">
      <cv-task-list class="task-list-demo-compact-list" label="Verification lane" density="compact">
        <span slot="header" class="task-list-demo-title">Verification lane</span>

        <div class="task-list-demo-compact-row" role="listitem">
          <span>Rotate local key shard</span>
          <cv-badge variant="warning">Queued</cv-badge>
        </div>
        <div class="task-list-demo-compact-row" role="listitem">
          <span>Publish audit marker</span>
          <cv-badge variant="success">Done</cv-badge>
        </div>
      </cv-task-list>

      <cv-task-list class="task-list-demo-empty-list" label="Empty task queue" empty>
        <div slot="empty" class="task-list-demo-empty-content">
          <strong>Queue is clear</strong>
          <span>New imports, exports, and sync jobs will appear here.</span>
        </div>
      </cv-task-list>
    </div>
  </section>
</div>

Anatomy

<cv-task-list> (host)
└── <section part="base" aria-label="Tasks">
    ├── <div part="header"> optional
    ├── <div part="list" role="list">
    │   └── <slot>
    ├── <div part="empty"> optional
    └── <div part="footer"> optional

Attributes

Attribute	Type	Default	Description
label	String	"Tasks"	Accessible label for the task list shell
busy	Boolean	false	Sets aria-busy
empty	Boolean	false	Renders empty slot instead of default rows
density	String	"comfortable"	"comfortable" or "compact"

Slots

Slot	Description
header	Header content
(default)	Task rows
empty	Empty state content
footer	Footer content

CSS Parts

Part	Description
base	Root section
header	Header slot wrapper
list	Default row list wrapper
empty	Empty slot wrapper
footer	Footer slot wrapper

CSS Custom Properties

Property	Default	Description
--cv-task-list-gap	var(--cv-space-3, 12px)	Gap between shell regions
--cv-task-list-padding	var(--cv-space-4, 16px)	Root section padding
--cv-task-list-radius	var(--cv-radius-md, 10px)	Root section radius
--cv-task-list-background	var(--cv-color-surface-2, #181f2b)	Root section background
--cv-task-list-border	1px solid var(--cv-color-border, ...)	Root section border
--cv-task-list-row-gap	var(--cv-space-2, 8px)	Gap between rows
--cv-task-list-row-padding-block	var(--cv-space-3, 12px)	Row block padding
--cv-task-list-row-padding-inline	var(--cv-space-3, 12px)	Row inline padding
--cv-task-list-row-radius	var(--cv-radius-sm, 6px)	Row radius
--cv-task-list-row-background	var(--cv-color-surface-glass-subtle)	Direct role="listitem" rows
--cv-task-list-row-background-hover	var(--cv-color-surface-glass)	Row hover background
--cv-task-list-row-color	var(--cv-color-text)	Row foreground color
--cv-task-list-row-border-color	var(--cv-color-border-muted)	Row border color
--cv-task-list-row-border-color-hover	var(--cv-color-border-strong)	Row hover border color
--cv-task-list-shadow	var(--cv-shadow-sm)	Root panel shadow
--cv-task-list-empty-min-block-size	96px	Minimum empty-state block size

Visual States

Selector	Description
:host([busy])	Sets aria-busy="true" and shows a restrained scan line
:host([empty])	Renders slot="empty" instead of the default list
:host([density="compact"])	Reduces shell and row spacing
[role="listitem"]:hover	Emphasizes direct slotted task rows

Events

None.