cv-operation-queue

Aggregate shell for long-running operation batches such as upload, download, export, sync, or background maintenance queues.

Use it when the user needs one scannable control surface for batch status, batch-level actions, task detail, and aggregate progress. Use cv-task-list alone when there is no batch summary or batch-level action.

The queue shell owns layout, accessibility shell semantics, busy/tone styling, empty state placement, and optional region visibility. Consumers still own task data, progress math, retry/cancel behavior, formatting, auto-hide behavior, and any operation model.

Usage

View source

<div class="operation-queue-demo-shell" data-demo="operation-queue" data-live-demo-height="820">
  <section class="operation-queue-demo-hero" aria-labelledby="operation-queue-demo-title">
    <div class="operation-queue-demo-copy">
      <span class="operation-queue-demo-kicker">Batch operation surface</span>
      <h3 id="operation-queue-demo-title">
        Show the queue, the batch decision, and the next safe action together.
      </h3>
      <p>
        Use <code>cv-operation-queue</code> when several long-running tasks need one operational frame: an
        aggregate state, batch actions, task rows, empty placement, and footer progress.
      </p>
    </div>

    <dl class="operation-queue-demo-metrics" aria-label="Operation queue contract summary">
      <div>
        <dt>Shell</dt>
        <dd>section + aria-busy</dd>
      </div>
      <div>
        <dt>Slots</dt>
        <dd>summary / actions / footer</dd>
      </div>
      <div>
        <dt>State</dt>
        <dd>busy / tone / empty</dd>
      </div>
    </dl>
  </section>

  <section class="operation-queue-demo-workbench" aria-labelledby="operation-queue-demo-workbench-title">
    <div class="operation-queue-demo-board">
      <div class="operation-queue-demo-section-header">
        <span class="operation-queue-demo-kicker">Encrypted export queue</span>
        <h4 id="operation-queue-demo-workbench-title">
          The shell owns the batch frame; task data stays with the workflow.
        </h4>
      </div>

      <cv-operation-queue
        class="operation-queue-demo-primary"
        label="Encrypted export operation queue"
        busy
        tone="info"
      >
        <cv-status-indicator slot="icon" tone="info" pulse decorative></cv-status-indicator>
        <span slot="summary" class="operation-queue-demo-summary">
          <strong>media-archive.cvault</strong>
          <span>2 active / 1 queued / retry window open</span>
        </span>
        <cv-button slot="actions" size="small" variant="ghost">Pause</cv-button>
        <cv-button slot="actions" size="small" variant="danger" outline>Cancel batch</cv-button>

        <cv-task-list label="Encrypted export tasks" density="compact">
          <div role="listitem" class="operation-queue-demo-task operation-queue-demo-task--active">
            <div class="operation-queue-demo-task-copy">
              <span>Step 1</span>
              <strong>Encrypt media archive</strong>
              <small>Chunk 18 of 25 sealed locally</small>
              <cv-progress
                tone="upload"
                value="72"
                value-text="72%"
                aria-label="Encrypt media archive progress"
              >
                72%
              </cv-progress>
            </div>
            <cv-badge variant="primary" pulse>Running</cv-badge>
          </div>

          <div role="listitem" class="operation-queue-demo-task operation-queue-demo-task--done">
            <div class="operation-queue-demo-task-copy">
              <span>Step 2</span>
              <strong>Verify metadata manifest</strong>
              <small>Checksums match before upload</small>
            </div>
            <cv-badge variant="success">Done</cv-badge>
          </div>

          <div role="listitem" class="operation-queue-demo-task operation-queue-demo-task--queued">
            <div class="operation-queue-demo-task-copy">
              <span>Step 3</span>
              <strong>Upload sealed backup</strong>
              <small>Waiting for the next transfer slot</small>
            </div>
            <cv-button size="small" variant="ghost">Cancel</cv-button>
          </div>
        </cv-task-list>

        <div slot="footer" class="operation-queue-demo-footer">
          <span>1.8 GB of 2.4 GB transferred</span>
          <cv-progress
            tone="upload"
            value="74"
            value-text="74%"
            aria-label="Encrypted export transfer progress"
          >
            74%
          </cv-progress>
        </div>
      </cv-operation-queue>
    </div>

    <aside class="operation-queue-demo-side" aria-label="Operation queue tone and density examples">
      <div class="operation-queue-demo-section-header">
        <span class="operation-queue-demo-kicker">Secondary states</span>
        <h4>Tone marks aggregate state; density controls how much queue detail stays visible.</h4>
      </div>

      <cv-operation-queue label="Remote manifest paused" tone="warning" density="compact">
        <cv-status-indicator slot="icon" tone="warning" decorative></cv-status-indicator>
        <span slot="summary" class="operation-queue-demo-summary">
          <strong>Manifest verification paused</strong>
          <span>Waiting for remote lease renewal</span>
        </span>
        <span slot="footer">1 active / resumes after connectivity check</span>
      </cv-operation-queue>

      <cv-operation-queue label="Export complete" tone="success" density="compact">
        <cv-status-indicator slot="icon" tone="success" decorative></cv-status-indicator>
        <span slot="summary" class="operation-queue-demo-summary">
          <strong>Export package complete</strong>
          <span>4 operations completed</span>
        </span>
        <span slot="footer">Remote manifest verified now</span>
      </cv-operation-queue>

      <cv-operation-queue label="No background operations" empty>
        <cv-empty-state
          slot="empty"
          icon="check"
          headline="Queue is clear"
          description="New uploads, exports, and sync jobs will appear here."
        ></cv-empty-state>
      </cv-operation-queue>
    </aside>
  </section>
</div>

Anatomy

<cv-operation-queue> (host)
└── <section part="base" aria-label="Operations">
    ├── <header part="header">
    │   ├── <span part="icon"> optional
    │   ├── <div part="title">
    │   │   └── <span part="summary">
    │   └── <div part="actions"> optional
    ├── <div part="body">
    │   └── <slot>
    ├── <div part="empty"> optional
    └── <footer part="footer"> optional

Attributes

Attribute	Type	Default	Description
label	String	"Operations"	Accessible label and fallback summary
busy	Boolean	false	Sets aria-busy and shows the busy accent line
empty	Boolean	false	Renders empty slot instead of body
density	String	"comfortable"	"comfortable" or "compact"
tone	String	"neutral"	Semantic queue tone for the aggregate batch status

Slots

Slot	Description
icon	Leading aggregate status icon or indicator
summary	Header title/summary content; falls back to label
actions	Batch-level actions such as pause, cancel all, or retry
(default)	Queue body content, commonly a flattened cv-task-list
empty	Empty-state content rendered when empty is set
footer	Aggregate progress, counts, bytes, timestamps, or limits

CSS Parts

Part	Description
base	Root section
header	Header layout
icon	Leading status slot wrapper
title	Summary slot wrapper
summary	Summary text area
actions	Actions slot wrapper
body	Default body wrapper
empty	Empty slot wrapper
footer	Footer slot wrapper

CSS Custom Properties

Property	Default	Description
--cv-operation-queue-inline-size	100%	Host inline size
--cv-operation-queue-gap	var(--cv-space-3, 12px)	Gap between shell regions
--cv-operation-queue-padding	var(--cv-space-4, 16px)	Root section padding
--cv-operation-queue-radius	var(--cv-radius-md, 10px)	Root section radius
--cv-operation-queue-border	1px solid var(--cv-color-border)	Root section border
--cv-operation-queue-background	var(--cv-color-surface-2)	Root section background
--cv-operation-queue-shadow	var(--cv-shadow-sm)	Root section shadow
--cv-operation-queue-body-gap	var(--cv-space-2, 8px)	Gap inside the default body region
--cv-operation-queue-row-background	derived from queue background	Flattened cv-task-list row fill
--cv-operation-queue-empty-min-block-size	96px	Minimum empty-state block size
--cv-operation-queue-busy-line-opacity	0.86	Busy accent line opacity

• Directly slotted cv-task-list is visually flattened by default so cv-operation-queue can own the outer panel while cv-task-list owns row semantics.

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 body
:host([density="compact"])	Reduces shell and body spacing
:host([tone="info"])	Uses the primary/info accent for active batches
:host([tone="success"])	Uses success accent for completed batches
:host([tone="warning"])	Uses warning accent for paused or waiting batches
:host([tone="danger"])	Uses danger accent for failed batches

Events

None.