cv-status-indicator

Inline status marker with optional label and suffix content.

Usage

View source

<div class="status-indicator-demo-shell" data-demo="status-indicator" data-live-demo-height="700">
  <section class="status-indicator-demo-hero" aria-labelledby="status-indicator-demo-title">
    <div class="status-indicator-demo-copy">
      <span class="status-indicator-demo-kicker">Inline state signal</span>
      <h3 id="status-indicator-demo-title">
        Mark live connection, vault, and policy state without adding a control.
      </h3>
      <p>
        Use <code>cv-status-indicator</code> when the surrounding row already owns the action. The indicator
        contributes semantic status text, optional pulse, and compact suffix context.
      </p>
    </div>

    <dl class="status-indicator-demo-metrics" aria-label="Status indicator contract summary">
      <div>
        <dt>Semantics</dt>
        <dd>role="status"</dd>
      </div>
      <div>
        <dt>Motion</dt>
        <dd>pulse is opt-in</dd>
      </div>
      <div>
        <dt>Marker-only</dt>
        <dd>decorative mode</dd>
      </div>
    </dl>
  </section>

  <section class="status-indicator-demo-board" aria-label="Status indicator workflow examples">
    <div class="status-indicator-demo-panel">
      <header class="status-indicator-demo-panel-head">
        <div>
          <span class="status-indicator-demo-kicker">Session rail</span>
          <h4>Visible route state</h4>
        </div>
        <cv-status-indicator tone="success" pulse>
          Paired
          <span class="status-indicator-demo-token" slot="suffix">local</span>
        </cv-status-indicator>
      </header>

      <div class="status-indicator-demo-row">
        <div>
          <span>Transport</span>
          <strong>Hardware channel negotiated</strong>
        </div>
        <cv-status-indicator tone="primary">
          <span class="status-indicator-demo-icon" slot="icon">TX</span>
          Secure channel
          <span class="status-indicator-demo-token" slot="suffix">usb</span>
        </cv-status-indicator>
      </div>

      <div class="status-indicator-demo-row status-indicator-demo-row--info">
        <div>
          <span>Catalog sync</span>
          <strong>Remote manifest is being reconciled</strong>
        </div>
        <cv-status-indicator tone="info" pulse>
          Reconciling
          <span class="status-indicator-demo-token" slot="suffix">12 files</span>
        </cv-status-indicator>
      </div>

      <div class="status-indicator-demo-row status-indicator-demo-row--success">
        <div>
          <span>Visible vault</span>
          <strong>Decoy profile is mounted for the current route</strong>
        </div>
        <cv-status-indicator tone="success">Verified</cv-status-indicator>
      </div>

      <div class="status-indicator-demo-row status-indicator-demo-row--warning">
        <div>
          <span>Policy review</span>
          <strong>Operator handoff expires soon</strong>
        </div>
        <cv-status-indicator tone="warning" pulse>Pending review</cv-status-indicator>
      </div>

      <div class="status-indicator-demo-row status-indicator-demo-row--danger">
        <div>
          <span>Remote writes</span>
          <strong>Blocked by local coercion profile</strong>
        </div>
        <cv-status-indicator tone="danger">
          Blocked
          <span class="status-indicator-demo-token" slot="suffix">local only</span>
        </cv-status-indicator>
      </div>
    </div>

    <aside class="status-indicator-demo-side" aria-labelledby="status-indicator-demo-decorative-title">
      <div class="status-indicator-demo-section-header">
        <span class="status-indicator-demo-kicker">Marker-only</span>
        <h4 id="status-indicator-demo-decorative-title">
          Use decorative dots when adjacent text carries the label.
        </h4>
      </div>

      <div class="status-indicator-demo-dot-list">
        <div>
          <cv-status-indicator tone="success" decorative></cv-status-indicator>
          <span>Verified local index</span>
        </div>
        <div>
          <cv-status-indicator tone="primary" pulse decorative></cv-status-indicator>
          <span>Live events streaming</span>
        </div>
        <div>
          <cv-status-indicator tone="warning" decorative></cv-status-indicator>
          <span>Policy review queued</span>
        </div>
        <div>
          <cv-status-indicator tone="danger" pulse decorative></cv-status-indicator>
          <span>Write boundary closed</span>
        </div>
      </div>
    </aside>
  </section>

  <section class="status-indicator-demo-tones" aria-labelledby="status-indicator-demo-tones-title">
    <div class="status-indicator-demo-section-header">
      <span class="status-indicator-demo-kicker">Tone and size matrix</span>
      <h4 id="status-indicator-demo-tones-title">
        Keep color semantic; use size for density, not importance.
      </h4>
    </div>

    <div class="status-indicator-demo-tone-grid" aria-label="Status indicator tone and size examples">
      <div>
        <span>Neutral</span>
        <cv-status-indicator tone="neutral" size="small">Idle</cv-status-indicator>
        <cv-status-indicator tone="neutral">Queued</cv-status-indicator>
      </div>
      <div>
        <span>Primary</span>
        <cv-status-indicator tone="primary">Active</cv-status-indicator>
        <cv-status-indicator tone="primary" pulse>Streaming</cv-status-indicator>
      </div>
      <div>
        <span>Info</span>
        <cv-status-indicator tone="info">Scanning</cv-status-indicator>
        <cv-status-indicator tone="info" size="large">Observed</cv-status-indicator>
      </div>
      <div>
        <span>Success</span>
        <cv-status-indicator tone="success">Synced</cv-status-indicator>
        <cv-status-indicator tone="success" pulse>Paired</cv-status-indicator>
      </div>
      <div>
        <span>Warning</span>
        <cv-status-indicator tone="warning">Pending</cv-status-indicator>
        <cv-status-indicator tone="warning" size="small">Review</cv-status-indicator>
      </div>
      <div>
        <span>Danger</span>
        <cv-status-indicator tone="danger">Blocked</cv-status-indicator>
        <cv-status-indicator tone="danger" size="large">Critical</cv-status-indicator>
      </div>
    </div>
  </section>
</div>

Anatomy

<cv-status-indicator> (host)
└── <span part="base" role="status">
    ├── <span part="marker">
    ├── <span part="icon">
    │   └── <slot name="icon">
    ├── <span part="label">
    │   └── <slot>
    └── <span part="suffix">
        └── <slot name="suffix">

Attributes

Attribute	Type	Default	Description
tone	String	"neutral"	"neutral", "primary", "info", "success", "warning", or "danger"
size	String	"medium"	"small", "medium", or "large"
pulse	Boolean	false	Enables marker pulse animation
decorative	Boolean	false	Uses aria-hidden="true" instead of status semantics

Slots

Slot	Description
(default)	Optional text label
icon	Optional leading icon
suffix	Optional trailing decoration

CSS Parts

Part	Description
base	Root status wrapper
marker	Colored status dot
icon	Icon slot wrapper
label	Default slot wrapper
suffix	Suffix slot wrapper

CSS Custom Properties

Property	Default	Description
--cv-status-marker-size	0.625rem	Diameter of the colored status marker
--cv-status-gap	var(--cv-space-1, 4px)	Gap between marker, label, icon, and suffix
--cv-status-color	var(--cv-color-border-strong, #4c5870)	Marker color before tone overrides
--cv-status-font-size	var(--cv-font-size-xs, 12px)	Label font size and base line box size
--cv-status-line-height	1.2	Label line height
--cv-status-min-block-size	1.2em	Minimum base height used to align marker-only status items
--cv-status-label-color	var(--cv-color-text, #e8ecf6)	Label text color

Events

None. The component is display-only.