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

html

<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.

cv-operation-queue ​

Usage ​

Anatomy ​

Attributes ​

Slots ​

CSS Parts ​

CSS Custom Properties ​

Visual States ​

Events ​