# Actian Design System — Full Knowledge Dump

Generated at build time. Single-file ingestion target for AI agents.

## Foundations

### Borders

Border tokens from the Actian foundations.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import radius from "../../../../vendor/foundations/dist/tokens/borders/radius.json";
import width from "../../../../vendor/foundations/dist/tokens/borders/width.json";
import styleComposite from "../../../../vendor/foundations/dist/tokens/borders/style-composite.json";

<PageMetadata
  slug="foundations.borders"
  source="foundations/dist/tokens/borders/"
  schema={1}
/>

Border tokens for the Actian DS — radius, width, and composite border styles.

## Radius

{(radius.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

## Width

{(width.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

## Border styles

Semantic border tokens combining width + color into named roles for surfaces, fields, and states.

{(styleComposite.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}
### Breakpoints

Responsive breakpoint tokens from the Actian foundations.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import source from "../../../../vendor/foundations/dist/tokens/breakpoints.json";

<PageMetadata
  slug="foundations.breakpoints"
  source="foundations/dist/tokens/breakpoints.json"
  schema={1}
/>

Responsive breakpoint tokens for the Actian DS.

{(source.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Resources

- [Open in Figma](https://www.figma.com/design/l8biHxfarNi1I2RMvVxVOK/Actian-Design-System-v2.0.0?node-id=12217-457)
### Color

Color tokens from the Actian foundations.

import TokenScale from "../../../components/TokenScale.astro";
import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import backgrounds from "../../../../vendor/foundations/dist/tokens/backgrounds.json";
import textColors from "../../../../vendor/foundations/dist/tokens/typography/text-color-tokens.json";
import iconColors from "../../../../vendor/foundations/dist/tokens/icons/icon-colors.json";
import dtcg from "../../../../vendor/tokens/tokens.json";

<PageMetadata
  slug="foundations.color"
  source="foundations/dist/tokens/global-color.json"
  schema={1}
/>

The Actian DS color tokens — three theme rails (Actian, FM, DS Kit).

## Brand & status scales

Full primary / neutral / error / success / warning color ramps. Each row is a CSS variable consumable directly.

### Primary

<TokenScale data={dtcg.color.primary} prefix="color-primary" />

### Neutral

<TokenScale data={dtcg.color.neutral} prefix="color-neutral" />

### Error

<TokenScale data={dtcg.color.error} prefix="color-error" />

### Success

<TokenScale data={dtcg.color.success} prefix="color-success" />

### Warning

<TokenScale data={dtcg.color.warning} prefix="color-warning" />

## Semantic surfaces

Per-surface tokens for backgrounds, text, icons, and annotation.

### Backgrounds

{(backgrounds.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Text

{(textColors.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Icons

{(iconColors.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Annotation

<TokenScale data={dtcg.color.annotation} prefix="color-annotation" />
### Design Guidelines

How to apply foundations — usage rules, contrast pairings, spacing rhythm, elevation, and grid behavior. Section 3 of the Foundations master spec.

import PageMetadata from "../../../components/PageMetadata.astro";

<PageMetadata
  slug="foundations.design-guidelines"
  source="foundations/dist/design-guidelines/"
  schema={1}
/>

Section 3 of the Foundations master spec — applied rules for color, typography, spacing, elevation, interactive states, breakpoints, focus rings, borders, and placeholder text. Generated from `foundations/src/foundations.md` § Design Guidelines.
## Color Usage Rules

Semantic over primitive. Always use a semantic token (e.g. --zen-color-text-default) rather than a raw palette token (e.g. --zen-color-grey-900) unless you&#39;re building a new token. This ensures theming works correctly.

Contrast. Text on backgrounds must meet WCAG AA minimum (4.5:1 for body text, 3:1 for large text). Use the following pairings as reference:

Semantic color intent. Color conveys meaning — don&#39;t use success-* colors for non-success contexts, even if the green looks right.

- text-default on bg-default ✅
- text-secondary on bg-subtle ✅
- text-disabled should never be used on interactive elements that require action

## Typography Rules

### Typeface

Use --zen-font-family-text (Roboto) as the default for all UI text. Use --zen-font-family-mono (Roboto Mono) for code snippets, data tables with identifiers, and technical strings. Roobert is the brand typeface only for marketing and communication materials like website, PPTs, and flyers.

### Language Support

Provide Noto as a font when your product is being consumed by users who read languages with tall or dense scripts.

### Minimum Size

Must not use type sizes smaller than 11px. You may use 11px text in labels, tags, data visualizations, and supporting text with icon.

### Line Length

- Text line length is 544px at max with 16px text
- Text line length is 480px at max with 14px text
- Text line length is 424px at max with 12px text

### Paragraph Spacing

At default, the paragraph spacing is 8px.

### Accessibility

Don&#39;t create one-off font sizes. If your design needs a size between tokens, first check whether a token can be used, then raise it as a proposed token addition.

- Default body text size is 14px
- Minimum body text size is 12px
- 11px is only acceptable for non-essential UI
- Use defined type styles (avoid light weight)
- Maintain readable line height and spacing
- Text line length is 544px at max with 16px text
- Text line length is 480px at max with 14px text
- Text line length is 424px at max with 12px text
- Avoid placeholder-only labels
- Avoid long blocks of dense text

## Spacing Rules

Use spacing tokens for all margin, padding, and gap values. The scale is:

Never use arbitrary pixel values for spacing. If a layout needs something outside the scale, it&#39;s a signal to propose a new token.

- 2xs–xs for internal element spacing (icon-to-label, checkbox-to-text)
- sm–md for internal component padding
- lg–xl for spacing between sections and groups
- 2xl–3xl for page-level layout breathing room

## Elevation Rules

Elevation communicates depth and layer hierarchy — not decoration. Only use drop shadows to convey that an element is above another. Never stack multiple shadows, and don&#39;t apply elevation to elements sitting on the same visual plane.

Common layer levels: xs → sm → md → lg → xl (each level suggests greater visual separation from the base surface).

## Brightness Filter Convention — Interactive States

### Types of States

Interaction States

*Hover states should be suppressed on touch devices to avoid &quot;sticky&quot; visual effects. Conversely, Focus and Pressed states must be supported across all input types to ensure accessibility and tactile feedback.

Feedback &amp; System States

- Default: The neutral state of an element before any user interaction.
- Hover*: Triggered when a cursor is placed over an interactive element.
- Focus*: Triggered when an element is highlighted via keyboard, voice, or other input methods.
- Pressed*: The momentary state during a physical click or tap.
- Dragged: Active when a user presses and moves an element from its original position.
- Selected: A persistent state indicating an element has been chosen (e.g. via checkbox, tab, or radio button).
- Disabled: An inoperable state where the element cannot be interacted with or focused.

- Loading: Indicates a component is processing an action or fetching data.
- Error: Indicates invalid input or a failed system action, usually via color or icons.
- Success: Indicates valid input or a successfully completed action.
- Warning: Indicates a non-blocking issue or a state requiring user caution.
- Read-Only: Content is legible and focusable for copying, but cannot be edited.
- Indeterminate: A &quot;partial&quot; state, typically for parent checkboxes with mixed child selections.

### Implementation

Interactive color states (hover, pressed/active, disabled) are not handled with tokens. Engineering implements these using CSS brightness filters at the component level.

The only tokenized interactive state is focus — see --zen-focus-ring-primary and --zen-focus-ring-error in Section 2.5.

| State | Filter | Notes |
|---|---|---|
| Hover | filter: brightness(0.92) | Subtle darkening |
| Pressed / Active | filter: brightness(0.85) | More pronounced |
| Disabled | opacity: 0.4 | Combined with `cursor: not-allowed` |

## Breakpoints

The majority of Actian users are on desktop. Desktop (lg) is the primary design target. However, pages should be responsive and tested across the full breakpoint range — from xl (large screens) down to sm (phone landscape) — to ensure usability across contexts.

### Columns, Gutters, and Margins

Layouts are built on a column grid with three key measurements:

- Columns — guide what the content aligns to
- Gutters — fixed spacing between columns
- Margins — negative space beyond the content area

### Grid Settings

Target XL and until S. XS is not considered at this moment.

| Grid type | Breakpoint | Token | Total columns | Column | Margin | Gutter | Body |
|---|---|---|---|---|---|---|---|
| XS | Under 600px | — | 4 | Fluid | 16px | 16px | Fluid |
| S | 600px | --zen-breakpoint-sm | 8 | Fluid | 16px | 16px | Fluid |
| M | 840px | --zen-breakpoint-md | 16 | Fluid | 24px | 16px | Fluid |
| L | 1200px | --zen-breakpoint-lg | 16 | Fluid | 24px | 16px | Fluid |
| XL | 1920px | --zen-breakpoint-xl | 16 | 85px | 40px | 16px | 1600px |

## Focus Ring Rules

Applies to: Buttons, links, checkboxes, radios, avatars, breadcrumbs, tags, toggles, tabs

Use --zen-focus-ring-primary with --zen-focus-ring-offset (2px) as an outline-offset.

Applies to: Inputs, textareas

Use --zen-focus-ring-primary as outline with no offset. The border of the input itself acts as the boundary.

Applies to: Destructive actions and error-state interactive elements

Use --zen-focus-ring-error instead of primary.

Do not use box-shadow to simulate focus rings — it won&#39;t work correctly in high-contrast mode.

## Border Usage

Use --zen-border-default for standard container borders (cards, panels, inputs at rest). Use --zen-border-subtle for dividers and separators between rows or sections. Use --zen-border-disabled for any input, button, or form element in a disabled state.

## Placeholder Text

Two tiers of placeholder exist for inputs: --zen-color-text-placeholder is the standard placeholder (grey-600). --zen-color-text-placeholder-subtle (grey-400) is used in search fields where less visual weight is appropriate.
### Elevation

Elevation tokens from the Actian foundations.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import elevation from "../../../../vendor/foundations/dist/tokens/elevation.json";

<PageMetadata
  slug="foundations.elevation"
  source="foundations/dist/tokens/elevation.json"
  schema={1}
/>

{elevation.description && <p>{elevation.description}</p>}

Elevation tokens (shadow scale) for surfaces in the Actian DS. Authored in foundations source — not yet present in the DTCG token export, so the table renders from the foundations block.

{elevation.blocks.filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}
### Icons

Icon tokens (sizes + colors) plus the full DS-Kit icon catalog grouped by semantic purpose.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import IconGrid from "../../../components/IconGrid.astro";
import iconColors from "../../../../vendor/foundations/dist/tokens/icons/icon-colors.json";
import iconSizes from "../../../../vendor/foundations/dist/tokens/icons/icon-sizes.json";
import dskit from "../../../../vendor/components/dist/registries/dskit.json";

<PageMetadata
  slug="foundations.icons"
  source="foundations/dist/tokens/icons/"
  schema={1}
/>

Icon tokens for the Actian DS — sizes and colors — followed by the full icon catalog grouped by semantic purpose.

## Sizes

{(iconSizes.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Colors

Icon color tokens are exposed under `color.icon` and rendered on the [Color](/foundations/color/) page; the source block below preserves the foundations-authored grouping.

{(iconColors.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

## Catalog

The DS-Kit ships **234 icons** organized into **11 semantic groups** derived from the Figma Actual-icons layout. Eight icons (`add`, `book-bookmark`, `dataset`, `directory`, `download`, `export`, `minimize`, `process`) belong to multiple groups and appear in each section below.

Group order is specific-first: context-specific groups (Connector, Status, Cursor) come before universal ones (Common). Same ordering as the knowledge-side priority resolver in [`components/src/icon-groups.json`](https://github.com/volivarii/actian-ds-knowledge/blob/main/components/src/icon-groups.json).

<IconGrid
  icons={Object.entries(dskit.components)
    .filter(([_, e]) => e.category === "Icons")
    .map(([slug, e]) => ({
      slug,
      name: e.name,
      group: e.group,
      secondaryGroups: e.secondaryGroups,
    }))}
/>
### Motion

Motion tokens and named patterns from the Actian foundations.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import motion from "../../../../vendor/foundations/dist/tokens/motion.json";

<PageMetadata
  slug="foundations.motion"
  source="foundations/dist/tokens/motion.json"
  schema={1}
/>

{motion.description && <p>{motion.description}</p>}

## Tokens

{Object.entries(motion.tokens || {}).map(([key, group]) => {
  const rows = group.rows || [];
  const headers = Object.keys(rows[0] || {}).filter((k) => !k.startsWith("status"));
  return (
    <section>
      <h3>{key}</h3>
      {group.description && <p>{group.description}</p>}
      <TokenTable headers={headers} rows={rows} />
    </section>
  );
})}

## Patterns

{Object.entries(motion.patterns || {}).map(([key, p]) => {
  const phases = p.phases || [];
  const phaseHeaders = Object.keys(phases[0] || {}).filter((k) => !k.startsWith("status"));
  return (
    <section>
      <h3 id={p.slug}>{p.name}</h3>
      <p><strong>Slug:</strong> <code>{p.slug}</code></p>
      <TokenTable headers={phaseHeaders} rows={phases} />
    </section>
  );
})}
### Spacing

Spacing scale tokens from the Actian foundations.

import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import source from "../../../../vendor/foundations/dist/tokens/spacing.json";

<PageMetadata
  slug="foundations.spacing"
  source="foundations/dist/tokens/spacing.json"
  schema={1}
/>

{source.description && <p>{source.description}</p>}

## Scale

{(source.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}
### Typography

Typography tokens from the Actian foundations.

import TokenScale from "../../../components/TokenScale.astro";
import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import fontFamily from "../../../../vendor/foundations/dist/tokens/typography/font-family.json";
import fontSize from "../../../../vendor/foundations/dist/tokens/typography/font-size.json";
import lineHeight from "../../../../vendor/foundations/dist/tokens/typography/line-height.json";
import letterSpacing from "../../../../vendor/foundations/dist/tokens/typography/letter-spacing.json";
import textStyleComposite from "../../../../vendor/foundations/dist/tokens/typography/text-style-tokens-composite.json";
import dtcg from "../../../../vendor/tokens/tokens.json";

<PageMetadata
  slug="foundations.typography"
  source="foundations/dist/tokens/typography/"
  schema={1}
/>

Typography tokens for the Actian DS — family, weight, size, line-height, letter-spacing, plus composite text styles.

## Font family

{(fontFamily.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Font weight

<TokenScale data={dtcg.font.weight} prefix="font-weight" visualKind="none" />

## Font size

{(fontSize.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Line height

{(lineHeight.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Letter spacing

{(letterSpacing.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Composite text styles

Composite text-style tokens combine family / weight / size / line-height into named roles (e.g. `body`, `heading`, `caption`). Rendered from the foundations source.

{(textStyleComposite.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}
## Categories

### Action



import ComponentCard from "../../../components/ComponentCard.astro";

3 components

<div class="category-grid">
  <ComponentCard slug="button" name="Button" category="Action" categorySlug="action" />
  <ComponentCard slug="link" name="Link" category="Action" categorySlug="action" />
  <ComponentCard slug="sticky-footer" name="Sticky footer" category="Action" categorySlug="action" />
</div>
### Breakpoint, grid & structure



import ComponentCard from "../../../components/ComponentCard.astro";

5 components

<div class="category-grid">
  <ComponentCard slug="l-grid" name="L grid" category="Breakpoint, grid & structure" categorySlug="breakpoint-grid-structure" />
  <ComponentCard slug="m-grid" name="M grid" category="Breakpoint, grid & structure" categorySlug="breakpoint-grid-structure" />
  <ComponentCard slug="s-grid" name="S grid" category="Breakpoint, grid & structure" categorySlug="breakpoint-grid-structure" />
  <ComponentCard slug="xl-grid" name="XL grid" category="Breakpoint, grid & structure" categorySlug="breakpoint-grid-structure" />
  <ComponentCard slug="xs-grid" name="XS grid" category="Breakpoint, grid & structure" categorySlug="breakpoint-grid-structure" />
</div>
### Data Display



import ComponentCard from "../../../components/ComponentCard.astro";

31 components

<div class="category-grid">
  <ComponentCard slug="bar-graph" name="⛔️ Bar graph" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="line-graph" name="⛔️ Line graph" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="badge" name="✍️ Badge" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="collapse-accordion" name="✍️ Collapse-accordion" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="table" name="✍️ Table" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-catalog" name="✍️ Tag, Catalog" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-catalog-item-type" name="✍️ Tag, Catalog item type" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-default" name="✍️ Tag, Default" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-glossary-item-type" name="✍️ Tag, Glossary item type" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-interactive" name="✍️ Tag, Interactive" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-shared" name="✍️ Tag, Shared" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-stage" name="✍️ Tag, Stage" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="tag-status" name="✍️ Tag, Status" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="avatar" name="Avatar" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="card-for-grouped-content" name="Card for grouped content" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="card-for-items" name="Card for items" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="card-for-perimeter" name="Card for perimeter" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="digram-item-types" name="Digram, Item types" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="digram-topic" name="Digram, Topic" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="glossary-item-hierarchy-diagram" name="Glossary item hierarchy diagram" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="identification-key" name="Identification key" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="lineage-connecting-line" name="Lineage connecting line" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="lineage-grouped-node" name="Lineage grouped node" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="lineage-individual-node" name="Lineage individual node" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="metamodel-widget" name="Metamodel widget" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="page-header" name="Page header" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="progress-bar-small" name="Progress bar small" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="scroll-bar" name="Scroll bar" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="search-result-card" name="Search result card" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="segmented-control" name="Segmented control" category="Data Display" categorySlug="data-display" />
  <ComponentCard slug="toolbar" name="Toolbar" category="Data Display" categorySlug="data-display" />
</div>
### Feedback



import ComponentCard from "../../../components/ComponentCard.astro";

10 components

<div class="category-grid">
  <ComponentCard slug="alert-banner" name="✍️ Alert-banner" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="confirmation" name="Confirmation" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="empty-state" name="Empty state" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="error-state" name="Error state" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="loader" name="Loader" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="loader-with-logo" name="Loader with logo" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="loading-skeleton" name="Loading skeleton" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="maintenance-state" name="Maintenance state" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="notification" name="Notification" category="Feedback" categorySlug="feedback" />
  <ComponentCard slug="spinner" name="Spinner" category="Feedback" categorySlug="feedback" />
</div>
### Form (input & selection)



import ComponentCard from "../../../components/ComponentCard.astro";

11 components

<div class="category-grid">
  <ComponentCard slug="calendar" name="Calendar" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="checkbox-with-label" name="Checkbox with label" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="dropdown-select-default" name="Dropdown, Select, default" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="input" name="Input" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="input-date" name="Input, date" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="radio-button" name="Radio button" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="rich-text" name="Rich text" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="search" name="Search" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="search-dropdown-menu" name="Search dropdown menu" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="search-filters" name="Search filters" category="Form (input & selection)" categorySlug="form-input-selection" />
  <ComponentCard slug="toglge" name="Toglge" category="Form (input & selection)" categorySlug="form-input-selection" />
</div>
### Icons



import ComponentCard from "../../../components/ComponentCard.astro";

234 components

<div class="category-grid">
  <ComponentCard slug="add" name="add" category="Icons" categorySlug="icons" />
  <ComponentCard slug="add-circle" name="add-circle" category="Icons" categorySlug="icons" />
  <ComponentCard slug="adlsgen1" name="adlsgen1" category="Icons" categorySlug="icons" />
  <ComponentCard slug="adobe-analytics" name="adobe-analytics" category="Icons" categorySlug="icons" />
  <ComponentCard slug="alert" name="alert" category="Icons" categorySlug="icons" />
  <ComponentCard slug="alert-circle" name="alert-circle" category="Icons" categorySlug="icons" />
  <ComponentCard slug="alteryx" name="alteryx" category="Icons" categorySlug="icons" />
  <ComponentCard slug="amazons3" name="amazons3" category="Icons" categorySlug="icons" />
  <ComponentCard slug="analytics" name="analytics" category="Icons" categorySlug="icons" />
  <ComponentCard slug="api" name="api" category="Icons" categorySlug="icons" />
  <ComponentCard slug="api-key" name="api-key" category="Icons" categorySlug="icons" />
  <ComponentCard slug="applications" name="applications" category="Icons" categorySlug="icons" />
  <ComponentCard slug="arrow" name="arrow" category="Icons" categorySlug="icons" />
  <ComponentCard slug="arrow-alt" name="arrow-alt" category="Icons" categorySlug="icons" />
  <ComponentCard slug="arrow-down" name="arrow-down" category="Icons" categorySlug="icons" />
  <ComponentCard slug="asleep" name="asleep" category="Icons" categorySlug="icons" />
  <ComponentCard slug="atlas" name="atlas" category="Icons" categorySlug="icons" />
  <ComponentCard slug="avro" name="avro" category="Icons" categorySlug="icons" />
  <ComponentCard slug="award-04" name="award-04" category="Icons" categorySlug="icons" />
  <ComponentCard slug="aws-glue-etl" name="Aws-glue-etl" category="Icons" categorySlug="icons" />
  <ComponentCard slug="awsredshift" name="awsredshift" category="Icons" categorySlug="icons" />
  <ComponentCard slug="azure" name="Azure" category="Icons" categorySlug="icons" />
  <ComponentCard slug="azure-cosmosdb" name="azure-cosmosdb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="azure-datafactory" name="azure-datafactory" category="Icons" categorySlug="icons" />
  <ComponentCard slug="azure-purview" name="azure-purview" category="Icons" categorySlug="icons" />
  <ComponentCard slug="azure-synapse" name="azure-synapse" category="Icons" categorySlug="icons" />
  <ComponentCard slug="back" name="back" category="Icons" categorySlug="icons" />
  <ComponentCard slug="bigquery" name="bigquery" category="Icons" categorySlug="icons" />
  <ComponentCard slug="bin-type" name="bin-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="book-bookmark" name="book-bookmark" category="Icons" categorySlug="icons" />
  <ComponentCard slug="book-edit" name="book-edit" category="Icons" categorySlug="icons" />
  <ComponentCard slug="boolean-type" name="boolean-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="brightness-contrast" name="brightness-contrast" category="Icons" categorySlug="icons" />
  <ComponentCard slug="calendar-2" name="calendar 2" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cassandra" name="cassandra" category="Icons" categorySlug="icons" />
  <ComponentCard slug="catalog-design" name="catalog-design" category="Icons" categorySlug="icons" />
  <ComponentCard slug="catalogs" name="catalogs" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chart-bar" name="chart--bar" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chart-pie" name="chart--pie" category="Icons" categorySlug="icons" />
  <ComponentCard slug="checkmark-outline" name="checkmark--outline" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chevron-left" name="chevron--left" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chevron-sort" name="chevron--sort" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chevron-sort-down" name="chevron--sort--down" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chevron-sort-up" name="chevron--sort--up" category="Icons" categorySlug="icons" />
  <ComponentCard slug="chevron-up" name="chevron--up" category="Icons" categorySlug="icons" />
  <ComponentCard slug="circle-dash" name="circle-dash" category="Icons" categorySlug="icons" />
  <ComponentCard slug="ckan" name="ckan" category="Icons" categorySlug="icons" />
  <ComponentCard slug="close" name="close" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cloud-upload" name="cloud--upload" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cognos" name="cognos" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cognos-bi" name="cognos-bi" category="Icons" categorySlug="icons" />
  <ComponentCard slug="connected" name="connected" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cosmosdb" name="cosmosdb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="couchbase" name="couchbase" category="Icons" categorySlug="icons" />
  <ComponentCard slug="csv" name="csv" category="Icons" categorySlug="icons" />
  <ComponentCard slug="csv-custom-item" name="csv-custom-item" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cursor-arrow" name="cursor-arrow" category="Icons" categorySlug="icons" />
  <ComponentCard slug="cursor-hand" name="cursor-hand" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dashboard" name="dashboard" category="Icons" categorySlug="icons" />
  <ComponentCard slug="data-structured" name="data--structured" category="Icons" categorySlug="icons" />
  <ComponentCard slug="data-access-request" name="data-access-request" category="Icons" categorySlug="icons" />
  <ComponentCard slug="data-file-question" name="data-file-question" category="Icons" categorySlug="icons" />
  <ComponentCard slug="data-model" name="data-model" category="Icons" categorySlug="icons" />
  <ComponentCard slug="data-product-output-port" name="data-product-output-port" category="Icons" categorySlug="icons" />
  <ComponentCard slug="database" name="database" category="Icons" categorySlug="icons" />
  <ComponentCard slug="database-check" name="database-check" category="Icons" categorySlug="icons" />
  <ComponentCard slug="databricks" name="databricks" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dataiku" name="dataiku" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dataset" name="dataset" category="Icons" categorySlug="icons" />
  <ComponentCard slug="db2" name="db2" category="Icons" categorySlug="icons" />
  <ComponentCard slug="db2-database-1" name="db2--database 1" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dbt" name="dbt" category="Icons" categorySlug="icons" />
  <ComponentCard slug="denodo" name="denodo" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dictionnary" name="dictionnary" category="Icons" categorySlug="icons" />
  <ComponentCard slug="directory" name="directory" category="Icons" categorySlug="icons" />
  <ComponentCard slug="disconnected" name="disconnected" category="Icons" categorySlug="icons" />
  <ComponentCard slug="discussion" name="discussion" category="Icons" categorySlug="icons" />
  <ComponentCard slug="dots" name="dots" category="Icons" categorySlug="icons" />
  <ComponentCard slug="download" name="download" category="Icons" categorySlug="icons" />
  <ComponentCard slug="drag" name="drag" category="Icons" categorySlug="icons" />
  <ComponentCard slug="edit" name="edit" category="Icons" categorySlug="icons" />
  <ComponentCard slug="elasticsearch" name="elasticsearch" category="Icons" categorySlug="icons" />
  <ComponentCard slug="error-filled" name="error-filled" category="Icons" categorySlug="icons" />
  <ComponentCard slug="erwin-data-modeler" name="erwin-data-modeler" category="Icons" categorySlug="icons" />
  <ComponentCard slug="event-time-type" name="event--time-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="exit" name="exit" category="Icons" categorySlug="icons" />
  <ComponentCard slug="expand" name="expand" category="Icons" categorySlug="icons" />
  <ComponentCard slug="exploration" name="exploration" category="Icons" categorySlug="icons" />
  <ComponentCard slug="export" name="export" category="Icons" categorySlug="icons" />
  <ComponentCard slug="favorite" name="favorite" category="Icons" categorySlug="icons" />
  <ComponentCard slug="favorite-filled" name="favorite-filled" category="Icons" categorySlug="icons" />
  <ComponentCard slug="filter" name="filter" category="Icons" categorySlug="icons" />
  <ComponentCard slug="filter-text" name="filter-text" category="Icons" categorySlug="icons" />
  <ComponentCard slug="float-type" name="float-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="gcp" name="GCP" category="Icons" categorySlug="icons" />
  <ComponentCard slug="gcpcloudstorage" name="gcpcloudstorage" category="Icons" categorySlug="icons" />
  <ComponentCard slug="generic-jdbc" name="generic-jdbc" category="Icons" categorySlug="icons" />
  <ComponentCard slug="geo-point-type" name="geo-point-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="glossary" name="glossary" category="Icons" categorySlug="icons" />
  <ComponentCard slug="google-cloud" name="google-cloud" category="Icons" categorySlug="icons" />
  <ComponentCard slug="graph-merge" name="graph-merge" category="Icons" categorySlug="icons" />
  <ComponentCard slug="greenplum" name="greenplum" category="Icons" categorySlug="icons" />
  <ComponentCard slug="hbase" name="hbase" category="Icons" categorySlug="icons" />
  <ComponentCard slug="hdfs" name="hdfs" category="Icons" categorySlug="icons" />
  <ComponentCard slug="help-bubble" name="help-bubble" category="Icons" categorySlug="icons" />
  <ComponentCard slug="help-circle" name="help-circle" category="Icons" categorySlug="icons" />
  <ComponentCard slug="help-laptop" name="help-laptop" category="Icons" categorySlug="icons" />
  <ComponentCard slug="history" name="history" category="Icons" categorySlug="icons" />
  <ComponentCard slug="hive" name="hive" category="Icons" categorySlug="icons" />
  <ComponentCard slug="home" name="home" category="Icons" categorySlug="icons" />
  <ComponentCard slug="icon-query-queue" name="Icon/query-queue" category="Icons" categorySlug="icons" />
  <ComponentCard slug="image" name="image" category="Icons" categorySlug="icons" />
  <ComponentCard slug="impala" name="impala" category="Icons" categorySlug="icons" />
  <ComponentCard slug="influxdb" name="influxdb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="info" name="info" category="Icons" categorySlug="icons" />
  <ComponentCard slug="info-filled" name="info-filled" category="Icons" categorySlug="icons" />
  <ComponentCard slug="informatica" name="informatica" category="Icons" categorySlug="icons" />
  <ComponentCard slug="integer-type" name="integer-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="jdbc" name="jdbc" category="Icons" categorySlug="icons" />
  <ComponentCard slug="json" name="json" category="Icons" categorySlug="icons" />
  <ComponentCard slug="kafka" name="kafka" category="Icons" categorySlug="icons" />
  <ComponentCard slug="layers-front" name="layers-front" category="Icons" categorySlug="icons" />
  <ComponentCard slug="layers-front-curator-indicator" name="layers-front (Curator indicator)" category="Icons" categorySlug="icons" />
  <ComponentCard slug="lifecycle-policy" name="lifecycle-policy" category="Icons" categorySlug="icons" />
  <ComponentCard slug="lineage" name="lineage" category="Icons" categorySlug="icons" />
  <ComponentCard slug="link-type" name="link-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="list-bullets" name="list-bullets" category="Icons" categorySlug="icons" />
  <ComponentCard slug="list-numbers" name="list-numbers" category="Icons" categorySlug="icons" />
  <ComponentCard slug="local-filesystem" name="local-filesystem" category="Icons" categorySlug="icons" />
  <ComponentCard slug="looker" name="looker" category="Icons" categorySlug="icons" />
  <ComponentCard slug="mail" name="mail" category="Icons" categorySlug="icons" />
  <ComponentCard slug="maintenance" name="maintenance" category="Icons" categorySlug="icons" />
  <ComponentCard slug="map" name="map" category="Icons" categorySlug="icons" />
  <ComponentCard slug="mapr" name="mapr" category="Icons" categorySlug="icons" />
  <ComponentCard slug="mariadb" name="mariadb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="matillion" name="matillion" category="Icons" categorySlug="icons" />
  <ComponentCard slug="maximize" name="maximize" category="Icons" categorySlug="icons" />
  <ComponentCard slug="menu" name="menu" category="Icons" categorySlug="icons" />
  <ComponentCard slug="microstrategy" name="microstrategy" category="Icons" categorySlug="icons" />
  <ComponentCard slug="minimize" name="minimize" category="Icons" categorySlug="icons" />
  <ComponentCard slug="misuse-outline" name="misuse--outline" category="Icons" categorySlug="icons" />
  <ComponentCard slug="mongodb" name="mongodb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="more" name="more" category="Icons" categorySlug="icons" />
  <ComponentCard slug="move" name="move" category="Icons" categorySlug="icons" />
  <ComponentCard slug="ms-teams" name="ms-teams" category="Icons" categorySlug="icons" />
  <ComponentCard slug="mysql" name="mysql" category="Icons" categorySlug="icons" />
  <ComponentCard slug="netezza" name="netezza" category="Icons" categorySlug="icons" />
  <ComponentCard slug="null-sign" name="null-sign" category="Icons" categorySlug="icons" />
  <ComponentCard slug="open" name="open" category="Icons" categorySlug="icons" />
  <ComponentCard slug="openapi" name="openapi" category="Icons" categorySlug="icons" />
  <ComponentCard slug="opendatagouv" name="opendatagouv" category="Icons" categorySlug="icons" />
  <ComponentCard slug="oracle" name="oracle" category="Icons" categorySlug="icons" />
  <ComponentCard slug="orc" name="orc" category="Icons" categorySlug="icons" />
  <ComponentCard slug="output" name="output" category="Icons" categorySlug="icons" />
  <ComponentCard slug="palantir" name="palantir" category="Icons" categorySlug="icons" />
  <ComponentCard slug="paragraph-justify" name="paragraph-justify" category="Icons" categorySlug="icons" />
  <ComponentCard slug="parquet" name="parquet" category="Icons" categorySlug="icons" />
  <ComponentCard slug="pending" name="pending" category="Icons" categorySlug="icons" />
  <ComponentCard slug="pii" name="pii" category="Icons" categorySlug="icons" />
  <ComponentCard slug="pin" name="pin" category="Icons" categorySlug="icons" />
  <ComponentCard slug="postgresql" name="PostgreSQL" category="Icons" categorySlug="icons" />
  <ComponentCard slug="powerbi" name="Powerbi" category="Icons" categorySlug="icons" />
  <ComponentCard slug="powerbireportserver" name="powerbireportserver" category="Icons" categorySlug="icons" />
  <ComponentCard slug="process" name="process" category="Icons" categorySlug="icons" />
  <ComponentCard slug="process-csv" name="process csv" category="Icons" categorySlug="icons" />
  <ComponentCard slug="qlik-sense" name="qlik-sense" category="Icons" categorySlug="icons" />
  <ComponentCard slug="relation" name="relation" category="Icons" categorySlug="icons" />
  <ComponentCard slug="relation-incoming" name="relation_incoming" category="Icons" categorySlug="icons" />
  <ComponentCard slug="relation-outgoing" name="relation_outgoing" category="Icons" categorySlug="icons" />
  <ComponentCard slug="rocket-1" name="rocket 1" category="Icons" categorySlug="icons" />
  <ComponentCard slug="rotate-back" name="rotate-back" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-dynamics365" name="safyr-dynamics365" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-dynamicsax" name="safyr-dynamicsax" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-ebs" name="safyr-ebs" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-jdedwards" name="safyr-jdedwards" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-peoplesoft" name="safyr-peoplesoft" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-salesforce" name="safyr-salesforce" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-sap-bw" name="safyr-sap-bw" category="Icons" categorySlug="icons" />
  <ComponentCard slug="safyr-siebel" name="safyr-siebel" category="Icons" categorySlug="icons" />
  <ComponentCard slug="sas-database" name="sas-database" category="Icons" categorySlug="icons" />
  <ComponentCard slug="scanner" name="scanner" category="Icons" categorySlug="icons" />
  <ComponentCard slug="schema" name="schema" category="Icons" categorySlug="icons" />
  <ComponentCard slug="security-services" name="security-services" category="Icons" categorySlug="icons" />
  <ComponentCard slug="server-search" name="server-search" category="Icons" categorySlug="icons" />
  <ComponentCard slug="settings" name="settings" category="Icons" categorySlug="icons" />
  <ComponentCard slug="shield-lock" name="shield-lock" category="Icons" categorySlug="icons" />
  <ComponentCard slug="simple-check" name="simple-check" category="Icons" categorySlug="icons" />
  <ComponentCard slug="snowflake" name="Snowflake" category="Icons" categorySlug="icons" />
  <ComponentCard slug="soda" name="soda" category="Icons" categorySlug="icons" />
  <ComponentCard slug="sparkdb" name="sparkdb" category="Icons" categorySlug="icons" />
  <ComponentCard slug="spline" name="spline" category="Icons" categorySlug="icons" />
  <ComponentCard slug="splunk" name="splunk" category="Icons" categorySlug="icons" />
  <ComponentCard slug="sqlserver" name="sqlserver" category="Icons" categorySlug="icons" />
  <ComponentCard slug="stars" name="stars" category="Icons" categorySlug="icons" />
  <ComponentCard slug="stop-outline" name="stop--outline" category="Icons" categorySlug="icons" />
  <ComponentCard slug="success-filled" name="success-filled" category="Icons" categorySlug="icons" />
  <ComponentCard slug="suggestion" name="suggestion" category="Icons" categorySlug="icons" />
  <ComponentCard slug="sybaseiq" name="sybaseiq" category="Icons" categorySlug="icons" />
  <ComponentCard slug="tableau" name="Tableau" category="Icons" categorySlug="icons" />
  <ComponentCard slug="tags-add" name="tags-add" category="Icons" categorySlug="icons" />
  <ComponentCard slug="talend" name="talend" category="Icons" categorySlug="icons" />
  <ComponentCard slug="target-type" name="target-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="task-list" name="task-list" category="Icons" categorySlug="icons" />
  <ComponentCard slug="task-list-multiple" name="task-list-multiple" category="Icons" categorySlug="icons" />
  <ComponentCard slug="task-list-settings" name="task-list-settings" category="Icons" categorySlug="icons" />
  <ComponentCard slug="teradata" name="teradata" category="Icons" categorySlug="icons" />
  <ComponentCard slug="text-file" name="text-file" category="Icons" categorySlug="icons" />
  <ComponentCard slug="text-type" name="text-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="thoughtspot" name="thoughtspot" category="Icons" categorySlug="icons" />
  <ComponentCard slug="thumbs-down" name="thumbs-down" category="Icons" categorySlug="icons" />
  <ComponentCard slug="thumbs-up" name="thumbs-up" category="Icons" categorySlug="icons" />
  <ComponentCard slug="tibco-datavirtualization" name="tibco-datavirtualization" category="Icons" categorySlug="icons" />
  <ComponentCard slug="tools" name="tools" category="Icons" categorySlug="icons" />
  <ComponentCard slug="trash" name="trash" category="Icons" categorySlug="icons" />
  <ComponentCard slug="undo" name="undo" category="Icons" categorySlug="icons" />
  <ComponentCard slug="unknown-type" name="unknown-type" category="Icons" categorySlug="icons" />
  <ComponentCard slug="upload-file" name="upload-file" category="Icons" categorySlug="icons" />
  <ComponentCard slug="use-with-care" name="use-with-care" category="Icons" categorySlug="icons" />
  <ComponentCard slug="user-add" name="user-add" category="Icons" categorySlug="icons" />
  <ComponentCard slug="user-group" name="user-group" category="Icons" categorySlug="icons" />
  <ComponentCard slug="user-info" name="user-info" category="Icons" categorySlug="icons" />
  <ComponentCard slug="user-lock" name="user-lock" category="Icons" categorySlug="icons" />
  <ComponentCard slug="user-single" name="user-single" category="Icons" categorySlug="icons" />
  <ComponentCard slug="view" name="view" category="Icons" categorySlug="icons" />
  <ComponentCard slug="view-card" name="view-card" category="Icons" categorySlug="icons" />
  <ComponentCard slug="view-details" name="view-details" category="Icons" categorySlug="icons" />
  <ComponentCard slug="view-table" name="view-table" category="Icons" categorySlug="icons" />
  <ComponentCard slug="warning-alt" name="warning--alt" category="Icons" categorySlug="icons" />
  <ComponentCard slug="warning-filled" name="warning-filled" category="Icons" categorySlug="icons" />
  <ComponentCard slug="xml" name="xml" category="Icons" categorySlug="icons" />
  <ComponentCard slug="zoom-in" name="zoom-in" category="Icons" categorySlug="icons" />
  <ComponentCard slug="zoom-out" name="zoom-out" category="Icons" categorySlug="icons" />
  <ComponentCard slug="zoom-reset" name="zoom-reset" category="Icons" categorySlug="icons" />
  <ComponentCard slug="zoom-to-fit" name="zoom-to-fit" category="Icons" categorySlug="icons" />
</div>
### Illustrations & graphics



import ComponentCard from "../../../components/ComponentCard.astro";

2 components

<div class="category-grid">
  <ComponentCard slug="background-explore" name="background-explore" category="Illustrations & graphics" categorySlug="illustrations-graphics" />
  <ComponentCard slug="illustration" name="Illustration" category="Illustrations & graphics" categorySlug="illustrations-graphics" />
</div>
### Local components



import ComponentCard from "../../../components/ComponentCard.astro";

1 component

<div class="category-grid">
  <ComponentCard slug="notes-feedback" name="Notes/Feedback" category="Local components" categorySlug="local-components" />
</div>
### Navigation



import ComponentCard from "../../../components/ComponentCard.astro";

9 components

<div class="category-grid">
  <ComponentCard slug="side-nav" name="✍️ Side nav" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="account-dropdown" name="Account dropdown" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="app-switcher-dropdown" name="App switcher dropdown" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="breadcrumbs" name="Breadcrumbs" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="global-header" name="Global header" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="notification-dropdown" name="Notification dropdown" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="stepper" name="Stepper" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="tabs" name="Tabs" category="Navigation" categorySlug="navigation" />
  <ComponentCard slug="whats-new-dropdown" name="Whats new dropdown" category="Navigation" categorySlug="navigation" />
</div>
### Overlays



import ComponentCard from "../../../components/ComponentCard.astro";

5 components

<div class="category-grid">
  <ComponentCard slug="tooltip" name="⚠️ Tooltip" category="Overlays" categorySlug="overlays" />
  <ComponentCard slug="popover" name="⛔️ Popover" category="Overlays" categorySlug="overlays" />
  <ComponentCard slug="chat-with-ai-steward" name="Chat with AI Steward" category="Overlays" categorySlug="overlays" />
  <ComponentCard slug="drawer-side-panel" name="Drawer, side panel" category="Overlays" categorySlug="overlays" />
  <ComponentCard slug="modal" name="Modal" category="Overlays" categorySlug="overlays" />
</div>
### Product logos



import ComponentCard from "../../../components/ComponentCard.astro";

6 components

<div class="category-grid">
  <ComponentCard slug="actian-data-intelligence" name="Actian Data Intelligence" category="Product logos" categorySlug="product-logos" />
  <ComponentCard slug="actian-data-observability" name="Actian Data Observability" category="Product logos" categorySlug="product-logos" />
  <ComponentCard slug="actian-pyramid" name="Actian pyramid" category="Product logos" categorySlug="product-logos" />
  <ComponentCard slug="component-1" name="Component 1" category="Product logos" categorySlug="product-logos" />
  <ComponentCard slug="data-intelligence-dev-logo" name="Data Intelligence Dev Logo" category="Product logos" categorySlug="product-logos" />
  <ComponentCard slug="zeenea-logo" name="Zeenea logo" category="Product logos" categorySlug="product-logos" />
</div>
### White-label services



import ComponentCard from "../../../components/ComponentCard.astro";

1 component

<div class="category-grid">
  <ComponentCard slug="white-label-merck-favicon" name="White-label-merck-favicon" category="White-label services" categorySlug="white-label-services" />
</div>
## Components (categorized DS Kit)

### Button

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.button.overview"
  source="components/dist/registries/dskit.json#button"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"button"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/button/preview.png" alt="" />

## Overview

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the interactive surface — receives focus, hover, press states"},{"name":"Label","description":"action verb in title case; the primary affordance signal"},{"name":"Leading icon (optional)","description":"reinforces the label; decorative when paired with text"},{"name":"Trailing icon (optional)","description":"chevron or external-link glyph for navigation hints"},{"name":"Loading indicator (optional)","description":"replaces label when action is in-flight"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Primary","Secondary","Tertiary","Icon","Critical primary","Critical secondary"]},{"axis":"Size","values":["Default","Small"]},{"axis":"State","values":["Default","Hovered","Focused","Pressed","Selected","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus/active transitions stay within the 100-200ms band"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7206-2643)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/button)
### Button

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.button.accessibility"
  source="components/dist/registries/dskit.json#button"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"button"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"must be operable with Enter and Space (button) or Enter (link)"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"feedback-errors","note":"loading + disabled states must be announced; do not rely on color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Button

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.button.code"
  source="components/dist/registries/dskit.json#button"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"button"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Button`.
### Button

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.button.content"
  source="components/dist/registries/dskit.json#button"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"button"} activeTab={"content"} />

## Content guidelines

Buttons trigger actions. They are the primary mechanism for users to submit forms, confirm choices, navigate, and initiate processes within the platform.

### When to use

- Use buttons for actions, not navigation. For navigation, use [links](/components/action/link/).
- Use a primary button for the main action on a page or modal.
- Use secondary buttons for alternative or less critical actions.
- Use ghost or tertiary buttons for low-priority or destructive actions that should not draw immediate attention.

### Style

- Use sentence case for all button labels.
- Use the verb + object formula whenever possible (for example, **Create report**, **Delete dataset**).
- Keep labels concise - ideally two to four words.
- Do not end button labels with punctuation.
- Do not use articles (a, an, the) in button labels unless necessary for clarity.

### Behavior

- Disable the primary button until all required fields are complete.
- Show a loading indicator on the button when an action is in progress.
- Return focus to the triggering element after a modal or dialog closes.

### Do / Don't

<DoDont pairs={[{ do: "Create report", dont: "Report" }, { do: "Delete dataset", dont: "Delete" }, { do: "Add connection", dont: "Add a connection" }, { do: "Save changes", dont: "Save Changes" }]} />

### Terminology for button labeling

Use the following term pairs consistently across the platform. Choosing the wrong term creates confusion when the same action appears under different labels in different contexts.

<TermList items={[{ term: "Cancel vs Close", definition: "Use **Cancel** when the user is backing out of a page or modal where information has been entered or a confirmation is required. Cancel returns the user to the previous state without saving. Use **Close** for read-only messages or screens." }, { term: "Create vs Add vs Insert", definition: "Use **Create** when the user is making something brand new. Use **Add** when bringing in similar information that already exists elsewhere. Use **Insert** when bringing in similar information and the ordering is important. The plus (+) icon is only needed when creating a new object to add to something else. When adding an existing object to a list, the icon is not needed." }, { term: "OK", definition: "Use **OK** for read-only pages that are not legally required to be accepted." }, { term: "Accept vs Decline", definition: "Use **Accept** when legal terms of service need to be acknowledged before the user can proceed. **Accept** can also be paired with **Decline** when the user must choose whether to implement proposed changes from someone else or from AI." }, { term: "Got it!", definition: "Use **Got it!** when providing information confirmation modals where the user does not have to take any action." }, { term: "Select vs Choose", definition: "Use **Select** when the user is picking from a list with limited options. Use **Choose** when the user is picking from a large number of options or making an open-ended decision." }, { term: "Submit vs Send vs Save", definition: "Use **Submit** for a form. Use **Send** only for email. Use **Save** when the user is adding or changing selections on a modal." }, { term: "View vs See", definition: "Use **View** as a noun (for example, **Table view**). Use **See** as a verb, but only with a modifier (for example, **See more**)." }, { term: "Stepper buttons", definition: "Use verb + object for the creation button. With few exceptions, the verb should be **Create**. Use only the verb (without the object) when finishing a stepper (for example, **Create** not **Create integration**). In modals and steppers, the initial button and the final button should use the same term in most cases. Exceptions include using **Save** on the final step of a wizard." }]} />
### Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.overview"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/link/preview.png" alt="" />

## Overview

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the interactive surface — receives focus, hover, press states"},{"name":"Label","description":"action verb in title case; the primary affordance signal"},{"name":"Leading icon (optional)","description":"reinforces the label; decorative when paired with text"},{"name":"Trailing icon (optional)","description":"chevron or external-link glyph for navigation hints"},{"name":"Loading indicator (optional)","description":"replaces label when action is in-flight"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Disabled","Pressed","Focused","Hovered","Enabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus/active transitions stay within the 100-200ms band"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8346-6897)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/link)
### Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.accessibility"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"must be operable with Enter and Space (button) or Enter (link)"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"feedback-errors","note":"loading + disabled states must be announced; do not rely on color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.code"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Link`.
### Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.content"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"content"} />

## Content guidelines

A link visually represents clickable text or elements that navigate users to other pages, sections, or resources. Links appear colored to indicate interactivity and follow accessibility and design standards for clarity and usability.

### When to use

- For navigation to internal or external destinations. Use external link icon in the latter case.
- For inline standalone contextual actions (for example, **Learn more**).
- Avoid using links for actions; use [ghost buttons](/components/action/button/) instead.

### Should I use a button or a link?

A link should be used when navigating between pages, while a button should be used for actions like submitting a form, downloading a file, or triggering a task.

- Use a link for **View more articles**.
- Use a button for **Submit form**.

### Style

- Use meaningful, descriptive link text.

<DoDont pairs={[{ do: "View pipeline details", dont: "Click here" }]} />

- Avoid standalone icons as links unless accompanied by an accessible label.
- Use sentence case and no terminal punctuation.
- Keep links clear, concise, accessible, and consistent.

### Behavior

- Links open in the same tab unless explicitly labeled as external.
- Underline on hover for clarity.
- Visited state should be visually distinct whether inline or standalone.

### Clear and descriptive link text

Link text should clearly describe the destination or action. Avoid vague text that does not convey enough information to the user or to assistive technologies.

<DoDont pairs={[{ do: "View your order details", dont: "Click here" }, { do: "Visit our home page", dont: "http://example.com" }, { do: "Download report", dont: "Get report" }, { do: "Explore features", dont: "Click to learn more" }, { do: "View our services", dont: "Click here to view our list of services" }]} />

### Action-oriented language

Use action verbs for links that load tasks. Action-oriented language guides the user on what to expect. This is especially helpful for calls to action. Avoid passive or generic terms and phrases. Always provide clarity on what will happen or what the user will achieve by clicking.

### Consistency in link text

Use consistent link phrases for similar actions. Similar actions should use the same link text to help users develop familiarity and expectations. For example, if you use **Learn more** for accessing detailed content in one area, avoid switching to **Read details** elsewhere. Keep link text brief but meaningful.

### Avoid linking full sentences or paragraphs

Link only the specific, relevant portion of text. Avoid linking entire sentences or paragraphs, as this can overwhelm the user and reduce readability.

<DoDont pairs={[{ do: "Read our [user experience design blog]().", dont: "[Click here to read our blog about user experience design]()." }]} />
### Sticky footer

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.sticky-footer.overview"
  source="components/dist/registries/dskit.json#sticky-footer"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"sticky-footer"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/sticky-footer/preview.png" alt="" />

## Overview

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the interactive surface — receives focus, hover, press states"},{"name":"Label","description":"action verb in title case; the primary affordance signal"},{"name":"Leading icon (optional)","description":"reinforces the label; decorative when paired with text"},{"name":"Trailing icon (optional)","description":"chevron or external-link glyph for navigation hints"},{"name":"Loading indicator (optional)","description":"replaces label when action is in-flight"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus/active transitions stay within the 100-200ms band"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-9839)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/sticky-footer)
### Sticky footer

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.sticky-footer.accessibility"
  source="components/dist/registries/dskit.json#sticky-footer"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"sticky-footer"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"must be operable with Enter and Space (button) or Enter (link)"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"feedback-errors","note":"loading + disabled states must be announced; do not rely on color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Sticky footer

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.sticky-footer.code"
  source="components/dist/registries/dskit.json#sticky-footer"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"sticky-footer"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Sticky footer`.
### Sticky footer

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.sticky-footer.content"
  source="components/dist/registries/dskit.json#sticky-footer"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"sticky-footer"} activeTab={"content"} />

## Content guidelines

The sticky footer is a persistent action bar that remains visible at the bottom of a page or drawer as the user scrolls. It ensures that primary actions are always accessible without requiring the user to scroll to the bottom.

### When to use

- When a page or drawer contains primary actions that must remain available during scrolling.
- When users complete steppers or multi-field forms that extend beyond the current view.
- When the action affects the entire page, drawer, or form state.

### Button hierarchy

- The sticky footer must contain exactly one primary action. The only exception is an additional destructive button such as Delete.
- An optional secondary action can be included.
- Limit to a maximum of three buttons. More actions increase cognitive load.

### Button labels

Use clear verbs that describe the outcome. Labels should describe what will happen, not what the button is.

<DoDont pairs={[{ do: "Save", dont: "Done" }, { do: "Update", dont: "OK" }, { do: "Create", dont: "Submit (except on forms)" }, { do: "Confirm", dont: "Yes" }, { do: "Delete", dont: "Remove (for destructive permanent actions)" }, { do: "Continue (as part of a defined stepper)", dont: "Next (in sticky footers outside steppers)" }]} />

### Steppers

When used as part of a stepper, use the following label terminology consistently:

- **Back** for the previous step.
- **Next** for intermediate steps.
- **Submit** for the final step.

Do not mix **Continue** and **Next**, or **Finish** and **Submit** within the same flow.
### Avatar

Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.avatar.overview"
  source="components/dist/registries/dskit.json#avatar"
  schema={1}
/>

<ComponentTabs component={"avatar"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/avatar/preview.png" alt="" />

## Overview

Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Default","Hovered","Focused","Pressed","Disabled","Selected"]},{"axis":"Type","values":["One group","Two groups","Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7384-14212)
### Avatar

Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.avatar.accessibility"
  source="components/dist/registries/dskit.json#avatar"
  schema={1}
/>

<ComponentTabs component={"avatar"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Avatar

Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.avatar.code"
  source="components/dist/registries/dskit.json#avatar"
  schema={1}
/>

<ComponentTabs component={"avatar"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Avatar`.
### Avatar

Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.avatar.content"
  source="components/dist/registries/dskit.json#avatar"
  schema={1}
/>

<ComponentTabs component={"avatar"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Badge

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.badge.overview"
  source="components/dist/registries/dskit.json#badge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"badge"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/badge/preview.png" alt="" />

## Overview

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Number","Dot"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=12159-16447)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/badge)
### ✍️ Badge

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.badge.accessibility"
  source="components/dist/registries/dskit.json#badge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"badge"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Badge

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.badge.code"
  source="components/dist/registries/dskit.json#badge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"badge"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Badge`.
### ✍️ Badge

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.badge.content"
  source="components/dist/registries/dskit.json#badge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"badge"} activeTab={"content"} />

## Content guidelines

Badges indicate a count or a status qualifier on an item — for example, unread notifications or a new-item label.

### When to use

- To show a numeric count on an item (for example, unread notifications).
- To apply a status qualifier that does not fit inline as a tag.

### Style

- Badge labels are single words or short abbreviations.
- Use standard status vocabulary: New, Updated, Draft, Published, Deprecated.
### Card for grouped content

Component documentation for Card for grouped content — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-grouped-content.overview"
  source="components/dist/registries/dskit.json#card-for-grouped-content"
  schema={1}
/>

<ComponentTabs component={"card-for-grouped-content"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14782-29281)
### Card for grouped content

Component documentation for Card for grouped content — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-grouped-content.accessibility"
  source="components/dist/registries/dskit.json#card-for-grouped-content"
  schema={1}
/>

<ComponentTabs component={"card-for-grouped-content"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Card for grouped content

Component documentation for Card for grouped content — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-grouped-content.code"
  source="components/dist/registries/dskit.json#card-for-grouped-content"
  schema={1}
/>

<ComponentTabs component={"card-for-grouped-content"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Card for grouped content`.
### Card for grouped content

Component documentation for Card for grouped content — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-grouped-content.content"
  source="components/dist/registries/dskit.json#card-for-grouped-content"
  schema={1}
/>

<ComponentTabs component={"card-for-grouped-content"} activeTab={"content"} />

<StubFooter category="data-display" />
### Card for items

A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-items.overview"
  source="components/dist/registries/dskit.json#card-for-items"
  schema={1}
/>

<ComponentTabs component={"card-for-items"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Catalog","Item","item type","Glossary type","Topic"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Selected"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7613-7853)
### Card for items

A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-items.accessibility"
  source="components/dist/registries/dskit.json#card-for-items"
  schema={1}
/>

<ComponentTabs component={"card-for-items"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Card for items

A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-items.code"
  source="components/dist/registries/dskit.json#card-for-items"
  schema={1}
/>

<ComponentTabs component={"card-for-items"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Card for items`.
### Card for items

A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-items.content"
  source="components/dist/registries/dskit.json#card-for-items"
  schema={1}
/>

<ComponentTabs component={"card-for-items"} activeTab={"content"} />

<StubFooter category="data-display" />
### Card for perimeter

Component documentation for Card for perimeter — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-perimeter.overview"
  source="components/dist/registries/dskit.json#card-for-perimeter"
  schema={1}
/>

<ComponentTabs component={"card-for-perimeter"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14783-7565)
### Card for perimeter

Component documentation for Card for perimeter — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-perimeter.accessibility"
  source="components/dist/registries/dskit.json#card-for-perimeter"
  schema={1}
/>

<ComponentTabs component={"card-for-perimeter"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Card for perimeter

Component documentation for Card for perimeter — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-perimeter.code"
  source="components/dist/registries/dskit.json#card-for-perimeter"
  schema={1}
/>

<ComponentTabs component={"card-for-perimeter"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Card for perimeter`.
### Card for perimeter

Component documentation for Card for perimeter — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.card-for-perimeter.content"
  source="components/dist/registries/dskit.json#card-for-perimeter"
  schema={1}
/>

<ComponentTabs component={"card-for-perimeter"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Collapse-accordion

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.collapse-accordion.overview"
  source="components/dist/registries/dskit.json#collapse-accordion"
  schema={1}
/>

<ComponentTabs component={"collapse-accordion"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/collapse-accordion/preview.png" alt="" />

## Overview

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Collapsed","Expanede"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8292-80)
### ✍️ Collapse-accordion

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.collapse-accordion.accessibility"
  source="components/dist/registries/dskit.json#collapse-accordion"
  schema={1}
/>

<ComponentTabs component={"collapse-accordion"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Collapse-accordion

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.collapse-accordion.code"
  source="components/dist/registries/dskit.json#collapse-accordion"
  schema={1}
/>

<ComponentTabs component={"collapse-accordion"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Collapse-accordion`.
### ✍️ Collapse-accordion

Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.collapse-accordion.content"
  source="components/dist/registries/dskit.json#collapse-accordion"
  schema={1}
/>

<ComponentTabs component={"collapse-accordion"} activeTab={"content"} />

<StubFooter category="data-display" />
### Digram, Item types

Works like tags but contains only 2 letters (initials of category name)

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-item-types.overview"
  source="components/dist/registries/dskit.json#digram-item-types"
  schema={1}
/>

<ComponentTabs component={"digram-item-types"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/digram-item-types/preview.png" alt="" />

## Overview

Works like tags but contains only 2 letters (initials of category name)

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Item type","values":["Dataset","Data process","Data product","Field","Output port","Use case","Visualization","Category","Custom 1","Custom 2","Custom 3","Custom 4","Custom 5","Custom 6","Custom 7","Custom 8","Custom 9","Custom 10","Custom 11","Custom 12","Custom 13","Custom 14","Custom 16","Glossary 1","Glossary 2","Glossary 3","Glossary 4","Glossary 5"]},{"axis":"Size","values":["Default","Large"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14007-23209)
### Digram, Item types

Works like tags but contains only 2 letters (initials of category name)

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-item-types.accessibility"
  source="components/dist/registries/dskit.json#digram-item-types"
  schema={1}
/>

<ComponentTabs component={"digram-item-types"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Digram, Item types

Works like tags but contains only 2 letters (initials of category name)

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-item-types.code"
  source="components/dist/registries/dskit.json#digram-item-types"
  schema={1}
/>

<ComponentTabs component={"digram-item-types"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Digram, Item types`.
### Digram, Item types

Works like tags but contains only 2 letters (initials of category name)

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-item-types.content"
  source="components/dist/registries/dskit.json#digram-item-types"
  schema={1}
/>

<ComponentTabs component={"digram-item-types"} activeTab={"content"} />

<StubFooter category="data-display" />
### Digram, Topic

Component documentation for Digram, Topic — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-topic.overview"
  source="components/dist/registries/dskit.json#digram-topic"
  schema={1}
/>

<ComponentTabs component={"digram-topic"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/digram-topic/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Light purple","Dark purple","Light blue","Dark blue","Light green","Dark green","Yellow","Orange","Red","Dark orange"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14128-3800)
### Digram, Topic

Component documentation for Digram, Topic — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-topic.accessibility"
  source="components/dist/registries/dskit.json#digram-topic"
  schema={1}
/>

<ComponentTabs component={"digram-topic"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Digram, Topic

Component documentation for Digram, Topic — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-topic.code"
  source="components/dist/registries/dskit.json#digram-topic"
  schema={1}
/>

<ComponentTabs component={"digram-topic"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Digram, Topic`.
### Digram, Topic

Component documentation for Digram, Topic — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.digram-topic.content"
  source="components/dist/registries/dskit.json#digram-topic"
  schema={1}
/>

<ComponentTabs component={"digram-topic"} activeTab={"content"} />

<StubFooter category="data-display" />
### Glossary item hierarchy diagram

Component documentation for Glossary item hierarchy diagram — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.glossary-item-hierarchy-diagram.overview"
  source="components/dist/registries/dskit.json#glossary-item-hierarchy-diagram"
  schema={1}
/>

<ComponentTabs component={"glossary-item-hierarchy-diagram"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-30242)
### Glossary item hierarchy diagram

Component documentation for Glossary item hierarchy diagram — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.glossary-item-hierarchy-diagram.accessibility"
  source="components/dist/registries/dskit.json#glossary-item-hierarchy-diagram"
  schema={1}
/>

<ComponentTabs component={"glossary-item-hierarchy-diagram"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Glossary item hierarchy diagram

Component documentation for Glossary item hierarchy diagram — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.glossary-item-hierarchy-diagram.code"
  source="components/dist/registries/dskit.json#glossary-item-hierarchy-diagram"
  schema={1}
/>

<ComponentTabs component={"glossary-item-hierarchy-diagram"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Glossary item hierarchy diagram`.
### Glossary item hierarchy diagram

Component documentation for Glossary item hierarchy diagram — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.glossary-item-hierarchy-diagram.content"
  source="components/dist/registries/dskit.json#glossary-item-hierarchy-diagram"
  schema={1}
/>

<ComponentTabs component={"glossary-item-hierarchy-diagram"} activeTab={"content"} />

<StubFooter category="data-display" />
### Lineage connecting line

Component documentation for Lineage connecting line — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-connecting-line.overview"
  source="components/dist/registries/dskit.json#lineage-connecting-line"
  schema={1}
/>

<ComponentTabs component={"lineage-connecting-line"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Direction","values":["Down","Straight","up","Up"]},{"axis":"State","values":["Default","Selected","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-20085)
### Lineage connecting line

Component documentation for Lineage connecting line — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-connecting-line.accessibility"
  source="components/dist/registries/dskit.json#lineage-connecting-line"
  schema={1}
/>

<ComponentTabs component={"lineage-connecting-line"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Lineage connecting line

Component documentation for Lineage connecting line — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-connecting-line.code"
  source="components/dist/registries/dskit.json#lineage-connecting-line"
  schema={1}
/>

<ComponentTabs component={"lineage-connecting-line"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Lineage connecting line`.
### Lineage connecting line

Component documentation for Lineage connecting line — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-connecting-line.content"
  source="components/dist/registries/dskit.json#lineage-connecting-line"
  schema={1}
/>

<ComponentTabs component={"lineage-connecting-line"} activeTab={"content"} />

<StubFooter category="data-display" />
### Lineage grouped node

Component documentation for Lineage grouped node — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-grouped-node.overview"
  source="components/dist/registries/dskit.json#lineage-grouped-node"
  schema={1}
/>

<ComponentTabs component={"lineage-grouped-node"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Default","Expanded"]},{"axis":"Type","values":["Main item","Sub item"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15634-17895)
### Lineage grouped node

Component documentation for Lineage grouped node — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-grouped-node.accessibility"
  source="components/dist/registries/dskit.json#lineage-grouped-node"
  schema={1}
/>

<ComponentTabs component={"lineage-grouped-node"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Lineage grouped node

Component documentation for Lineage grouped node — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-grouped-node.code"
  source="components/dist/registries/dskit.json#lineage-grouped-node"
  schema={1}
/>

<ComponentTabs component={"lineage-grouped-node"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Lineage grouped node`.
### Lineage grouped node

Component documentation for Lineage grouped node — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-grouped-node.content"
  source="components/dist/registries/dskit.json#lineage-grouped-node"
  schema={1}
/>

<ComponentTabs component={"lineage-grouped-node"} activeTab={"content"} />

<StubFooter category="data-display" />
### Lineage individual node

Component documentation for Lineage individual node — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-individual-node.overview"
  source="components/dist/registries/dskit.json#lineage-individual-node"
  schema={1}
/>

<ComponentTabs component={"lineage-individual-node"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Main item","Sub item"]},{"axis":"State","values":["Default","Selected","Disabled"]},{"axis":"Fields","values":["Collapsed","Expanded"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-19902)
### Lineage individual node

Component documentation for Lineage individual node — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-individual-node.accessibility"
  source="components/dist/registries/dskit.json#lineage-individual-node"
  schema={1}
/>

<ComponentTabs component={"lineage-individual-node"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Lineage individual node

Component documentation for Lineage individual node — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-individual-node.code"
  source="components/dist/registries/dskit.json#lineage-individual-node"
  schema={1}
/>

<ComponentTabs component={"lineage-individual-node"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Lineage individual node`.
### Lineage individual node

Component documentation for Lineage individual node — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.lineage-individual-node.content"
  source="components/dist/registries/dskit.json#lineage-individual-node"
  schema={1}
/>

<ComponentTabs component={"lineage-individual-node"} activeTab={"content"} />

<StubFooter category="data-display" />
### Metamodel widget

Component documentation for Metamodel widget — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.metamodel-widget.overview"
  source="components/dist/registries/dskit.json#metamodel-widget"
  schema={1}
/>

<ComponentTabs component={"metamodel-widget"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Dataset","Business Term","Data Process","Field","Visualisation"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-23588)
### Metamodel widget

Component documentation for Metamodel widget — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.metamodel-widget.accessibility"
  source="components/dist/registries/dskit.json#metamodel-widget"
  schema={1}
/>

<ComponentTabs component={"metamodel-widget"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Metamodel widget

Component documentation for Metamodel widget — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.metamodel-widget.code"
  source="components/dist/registries/dskit.json#metamodel-widget"
  schema={1}
/>

<ComponentTabs component={"metamodel-widget"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Metamodel widget`.
### Metamodel widget

Component documentation for Metamodel widget — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.metamodel-widget.content"
  source="components/dist/registries/dskit.json#metamodel-widget"
  schema={1}
/>

<ComponentTabs component={"metamodel-widget"} activeTab={"content"} />

<StubFooter category="data-display" />
### Page header

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.page-header.overview"
  source="components/dist/registries/dskit.json#page-header"
  schema={1}
/>

<ComponentTabs component={"page-header"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/page-header/preview.png" alt="" />

## Overview

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default","Details page","Explorer home","Explorer detail"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=12923-2794)
### Page header

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.page-header.accessibility"
  source="components/dist/registries/dskit.json#page-header"
  schema={1}
/>

<ComponentTabs component={"page-header"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Page header

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.page-header.code"
  source="components/dist/registries/dskit.json#page-header"
  schema={1}
/>

<ComponentTabs component={"page-header"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Page header`.
### Page header

The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.page-header.content"
  source="components/dist/registries/dskit.json#page-header"
  schema={1}
/>

<ComponentTabs component={"page-header"} activeTab={"content"} />

<StubFooter category="data-display" />
### Progress bar small

Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.progress-bar-small.overview"
  source="components/dist/registries/dskit.json#progress-bar-small"
  schema={1}
/>

<ComponentTabs component={"progress-bar-small"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size","values":["Default","Large"]},{"axis":"Completeness","values":["0%","100%","50%"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14136-1615)
### Progress bar small

Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.progress-bar-small.accessibility"
  source="components/dist/registries/dskit.json#progress-bar-small"
  schema={1}
/>

<ComponentTabs component={"progress-bar-small"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Progress bar small

Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.progress-bar-small.code"
  source="components/dist/registries/dskit.json#progress-bar-small"
  schema={1}
/>

<ComponentTabs component={"progress-bar-small"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Progress bar small`.
### Progress bar small

Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.progress-bar-small.content"
  source="components/dist/registries/dskit.json#progress-bar-small"
  schema={1}
/>

<ComponentTabs component={"progress-bar-small"} activeTab={"content"} />

<StubFooter category="data-display" />
### Scroll bar

Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.scroll-bar.overview"
  source="components/dist/registries/dskit.json#scroll-bar"
  schema={1}
/>

<ComponentTabs component={"scroll-bar"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/scroll-bar/preview.png" alt="" />

## Overview

Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-17639)
### Scroll bar

Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.scroll-bar.accessibility"
  source="components/dist/registries/dskit.json#scroll-bar"
  schema={1}
/>

<ComponentTabs component={"scroll-bar"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Scroll bar

Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.scroll-bar.code"
  source="components/dist/registries/dskit.json#scroll-bar"
  schema={1}
/>

<ComponentTabs component={"scroll-bar"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Scroll bar`.
### Scroll bar

Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.scroll-bar.content"
  source="components/dist/registries/dskit.json#scroll-bar"
  schema={1}
/>

<ComponentTabs component={"scroll-bar"} activeTab={"content"} />

<StubFooter category="data-display" />
### Search result card

A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-result-card.overview"
  source="components/dist/registries/dskit.json#search-result-card"
  schema={1}
/>

<ComponentTabs component={"search-result-card"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/search-result-card/preview.png" alt="" />

## Overview

A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App","values":["Explorer","Studio"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Selected"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=12932-3259)
### Search result card

A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-result-card.accessibility"
  source="components/dist/registries/dskit.json#search-result-card"
  schema={1}
/>

<ComponentTabs component={"search-result-card"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Search result card

A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-result-card.code"
  source="components/dist/registries/dskit.json#search-result-card"
  schema={1}
/>

<ComponentTabs component={"search-result-card"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Search result card`.
### Search result card

A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-result-card.content"
  source="components/dist/registries/dskit.json#search-result-card"
  schema={1}
/>

<ComponentTabs component={"search-result-card"} activeTab={"content"} />

<StubFooter category="data-display" />
### Segmented control

Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.segmented-control.overview"
  source="components/dist/registries/dskit.json#segmented-control"
  schema={1}
/>

<ComponentTabs component={"segmented-control"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/segmented-control/preview.png" alt="" />

## Overview

Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7618-5187)
### Segmented control

Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.segmented-control.accessibility"
  source="components/dist/registries/dskit.json#segmented-control"
  schema={1}
/>

<ComponentTabs component={"segmented-control"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Segmented control

Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.segmented-control.code"
  source="components/dist/registries/dskit.json#segmented-control"
  schema={1}
/>

<ComponentTabs component={"segmented-control"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Segmented control`.
### Segmented control

Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.segmented-control.content"
  source="components/dist/registries/dskit.json#segmented-control"
  schema={1}
/>

<ComponentTabs component={"segmented-control"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Table

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.table.overview"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"table"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

## Overview

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Built type","values":["By columns","By rows"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15295-14902)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/table)
### ✍️ Table

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.table.accessibility"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"table"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Table

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.table.code"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"table"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Table`.
### ✍️ Table

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.table.content"
  source="components/dist/registries/dskit.json#table"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"table"} activeTab={"content"} />

## Content guidelines

The table component displays structured information in rows and columns. It is the primary way users view, compare, and act on datasets, connections, catalog entries, and other list-based content in the platform.

### When to use

- To display multiple items with shared attributes that benefit from comparison.
- When users need to sort, filter, or act on rows individually or in bulk.
- Do not use a table for fewer than three columns or when a simple list or prose suffices.

### Column headers

- Use short, descriptive noun phrases. Two to three words maximum.
- Use sentence case.
- Do not use abbreviations unless they are universally understood (for example, "ID," "URL").
- Do not end column headers with punctuation.
- Align header labels with the data they describe — left-align text columns, right-align numeric columns.

#### Column header examples

<DoDont pairs={[{ do: "Last modified", dont: "Last Modification Date" }, { do: "Owner", dont: "Assigned to / Owned by" }, { do: "Status", dont: "Current status" }, { do: "Row count", dont: "No. of rows" }]} />

### Cell content

- Keep cell values concise. Truncate long values with an ellipsis and show the full value on hover via tooltip.
- Use consistent formatting within each column — do not mix date formats or number formats across rows.
- Dates: use ISO 8601 (YYYY-MM-DD) unless the product context requires a locale-specific format.
- Use "None" or "–" (em dash) for empty values — not blank, "N/A," or "null."
- Status values use standard vocabulary: Active, Inactive, Draft, Published, Deprecated, Error.

### Bulk actions

- Label bulk action buttons with a verb that applies to all selected items. For example, **Delete selected** or **Export**.
- Show the count of selected items near the action. For example, `3 items selected`.

### Pagination

- Label page controls plainly. Use **Previous** and **Next**.
- Show total result count when relevant. For example, `Showing 1–25 of 340 results`.
### Identification key

Use for identification keys. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.identification-key.overview"
  source="components/dist/registries/dskit.json#identification-key"
  schema={1}
/>

<ComponentTabs component={"identification-key"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for identification keys. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14349-15323)
### Identification key

Use for identification keys. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.identification-key.accessibility"
  source="components/dist/registries/dskit.json#identification-key"
  schema={1}
/>

<ComponentTabs component={"identification-key"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Identification key

Use for identification keys. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.identification-key.code"
  source="components/dist/registries/dskit.json#identification-key"
  schema={1}
/>

<ComponentTabs component={"identification-key"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Identification key`.
### Identification key

Use for identification keys. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.identification-key.content"
  source="components/dist/registries/dskit.json#identification-key"
  schema={1}
/>

<ComponentTabs component={"identification-key"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Catalog

Use for catalog types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog.overview"
  source="components/dist/registries/dskit.json#tag-catalog"
  schema={1}
/>

<ComponentTabs component={"tag-catalog"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for catalog types. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13812-22309)
### ✍️ Tag, Catalog item type

Use for physical metamodel item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog-item-type.overview"
  source="components/dist/registries/dskit.json#tag-catalog-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-catalog-item-type"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for physical metamodel item types. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Category","Dataset","Data process","Data product","Field","Output port","Use case","Visualization"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=11300-8312)
### ✍️ Tag, Catalog item type

Use for physical metamodel item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog-item-type.accessibility"
  source="components/dist/registries/dskit.json#tag-catalog-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-catalog-item-type"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Catalog item type

Use for physical metamodel item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog-item-type.code"
  source="components/dist/registries/dskit.json#tag-catalog-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-catalog-item-type"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Catalog item type`.
### ✍️ Tag, Catalog item type

Use for physical metamodel item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog-item-type.content"
  source="components/dist/registries/dskit.json#tag-catalog-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-catalog-item-type"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Catalog

Use for catalog types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog.accessibility"
  source="components/dist/registries/dskit.json#tag-catalog"
  schema={1}
/>

<ComponentTabs component={"tag-catalog"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Catalog

Use for catalog types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog.code"
  source="components/dist/registries/dskit.json#tag-catalog"
  schema={1}
/>

<ComponentTabs component={"tag-catalog"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Catalog`.
### ✍️ Tag, Catalog

Use for catalog types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-catalog.content"
  source="components/dist/registries/dskit.json#tag-catalog"
  schema={1}
/>

<ComponentTabs component={"tag-catalog"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Default

Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-default.overview"
  source="components/dist/registries/dskit.json#tag-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tag-default"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

## Overview

Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Color","values":["Pink","Purple","Indigo","Yellow","Lime","Teal","Orange","Gray","Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7257-3037)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/tag-default)
### ✍️ Tag, Default

Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-default.accessibility"
  source="components/dist/registries/dskit.json#tag-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tag-default"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Default

Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-default.code"
  source="components/dist/registries/dskit.json#tag-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tag-default"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Default`.
### ✍️ Tag, Default

Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-default.content"
  source="components/dist/registries/dskit.json#tag-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tag-default"} activeTab={"content"} />

## Content guidelines

Tags categorize or label items with metadata values such as topics, types, or user-defined attributes. The tag component has several variants: default, status, stage, catalog, interactive, and updated.

### When to use

- To categorize or label items with metadata values such as topics, types, or user-defined attributes.
- Do not use tags as action triggers — they are labels, not buttons. Use an [interactive tag](/components/data-display/tag-identification-key/tag-interactive/) for clickable tag behavior.

### Style

- Use sentence case.
- Keep tag text to one to three words.
- Status tags use standard vocabulary: Active, Inactive, Draft, Published, Deprecated, Error.
### ✍️ Tag, Glossary item type

Use for glossary item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-glossary-item-type.overview"
  source="components/dist/registries/dskit.json#tag-glossary-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-glossary-item-type"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for glossary item types. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13812-22308)
### ✍️ Tag, Glossary item type

Use for glossary item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-glossary-item-type.accessibility"
  source="components/dist/registries/dskit.json#tag-glossary-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-glossary-item-type"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Glossary item type

Use for glossary item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-glossary-item-type.code"
  source="components/dist/registries/dskit.json#tag-glossary-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-glossary-item-type"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Glossary item type`.
### ✍️ Tag, Glossary item type

Use for glossary item types. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-glossary-item-type.content"
  source="components/dist/registries/dskit.json#tag-glossary-item-type"
  schema={1}
/>

<ComponentTabs component={"tag-glossary-item-type"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Interactive

Component documentation for ✍️ Tag, Interactive — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-interactive.overview"
  source="components/dist/registries/dskit.json#tag-interactive"
  schema={1}
/>

<ComponentTabs component={"tag-interactive"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Hovered","Pressed","Selected","Disabled","Focused","Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13845-33759)
### ✍️ Tag, Interactive

Component documentation for ✍️ Tag, Interactive — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-interactive.accessibility"
  source="components/dist/registries/dskit.json#tag-interactive"
  schema={1}
/>

<ComponentTabs component={"tag-interactive"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Interactive

Component documentation for ✍️ Tag, Interactive — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-interactive.code"
  source="components/dist/registries/dskit.json#tag-interactive"
  schema={1}
/>

<ComponentTabs component={"tag-interactive"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Interactive`.
### ✍️ Tag, Interactive

Component documentation for ✍️ Tag, Interactive — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-interactive.content"
  source="components/dist/registries/dskit.json#tag-interactive"
  schema={1}
/>

<ComponentTabs component={"tag-interactive"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Shared

Use for indicating something is recently updated. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-shared.overview"
  source="components/dist/registries/dskit.json#tag-shared"
  schema={1}
/>

<ComponentTabs component={"tag-shared"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for indicating something is recently updated. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13812-22307)
### ✍️ Tag, Shared

Use for indicating something is recently updated. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-shared.accessibility"
  source="components/dist/registries/dskit.json#tag-shared"
  schema={1}
/>

<ComponentTabs component={"tag-shared"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Shared

Use for indicating something is recently updated. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-shared.code"
  source="components/dist/registries/dskit.json#tag-shared"
  schema={1}
/>

<ComponentTabs component={"tag-shared"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Shared`.
### ✍️ Tag, Shared

Use for indicating something is recently updated. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-shared.content"
  source="components/dist/registries/dskit.json#tag-shared"
  schema={1}
/>

<ComponentTabs component={"tag-shared"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Stage

Use for data lifecycle stages. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-stage.overview"
  source="components/dist/registries/dskit.json#tag-stage"
  schema={1}
/>

<ComponentTabs component={"tag-stage"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for data lifecycle stages. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Color","values":["Orange","Indigo","Purple","Lime","Teal","Yellow","Pink","Gray"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8655-10279)
### ✍️ Tag, Stage

Use for data lifecycle stages. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-stage.accessibility"
  source="components/dist/registries/dskit.json#tag-stage"
  schema={1}
/>

<ComponentTabs component={"tag-stage"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Stage

Use for data lifecycle stages. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-stage.code"
  source="components/dist/registries/dskit.json#tag-stage"
  schema={1}
/>

<ComponentTabs component={"tag-stage"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Stage`.
### ✍️ Tag, Stage

Use for data lifecycle stages. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-stage.content"
  source="components/dist/registries/dskit.json#tag-stage"
  schema={1}
/>

<ComponentTabs component={"tag-stage"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Tag, Status

Use for status. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-status.overview"
  source="components/dist/registries/dskit.json#tag-status"
  schema={1}
/>

<ComponentTabs component={"tag-status"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

Use for status. Can be interactive (removable) or static metadata.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Status","values":["Fail","Warning","Loading","Maintenance","Scheduled","Queued","Stopped","Sleeping","Offline","Pending","Success"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7257-3705)
### ✍️ Tag, Status

Use for status. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-status.accessibility"
  source="components/dist/registries/dskit.json#tag-status"
  schema={1}
/>

<ComponentTabs component={"tag-status"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Tag, Status

Use for status. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-status.code"
  source="components/dist/registries/dskit.json#tag-status"
  schema={1}
/>

<ComponentTabs component={"tag-status"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Tag, Status`.
### ✍️ Tag, Status

Use for status. Can be interactive (removable) or static metadata.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tag-status.content"
  source="components/dist/registries/dskit.json#tag-status"
  schema={1}
/>

<ComponentTabs component={"tag-status"} activeTab={"content"} />

<StubFooter category="data-display" />
### Toolbar

Component documentation for Toolbar — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toolbar.overview"
  source="components/dist/registries/dskit.json#toolbar"
  schema={1}
/>

<ComponentTabs component={"toolbar"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Single","Combined","Group"]},{"axis":"Orientation","values":["Horizontal","Vertical"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14335-16907)
### Toolbar

Component documentation for Toolbar — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toolbar.accessibility"
  source="components/dist/registries/dskit.json#toolbar"
  schema={1}
/>

<ComponentTabs component={"toolbar"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Toolbar

Component documentation for Toolbar — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toolbar.code"
  source="components/dist/registries/dskit.json#toolbar"
  schema={1}
/>

<ComponentTabs component={"toolbar"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Toolbar`.
### Toolbar

Component documentation for Toolbar — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toolbar.content"
  source="components/dist/registries/dskit.json#toolbar"
  schema={1}
/>

<ComponentTabs component={"toolbar"} activeTab={"content"} />

<StubFooter category="data-display" />
### ⛔️ Bar graph

Component documentation for ⛔️ Bar graph — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.bar-graph.overview"
  source="components/dist/registries/dskit.json#bar-graph"
  schema={1}
/>

<ComponentTabs component={"bar-graph"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15473-49489)
### ⛔️ Bar graph

Component documentation for ⛔️ Bar graph — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.bar-graph.accessibility"
  source="components/dist/registries/dskit.json#bar-graph"
  schema={1}
/>

<ComponentTabs component={"bar-graph"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ⛔️ Bar graph

Component documentation for ⛔️ Bar graph — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.bar-graph.code"
  source="components/dist/registries/dskit.json#bar-graph"
  schema={1}
/>

<ComponentTabs component={"bar-graph"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#⛔️ Bar graph`.
### ⛔️ Bar graph

Component documentation for ⛔️ Bar graph — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.bar-graph.content"
  source="components/dist/registries/dskit.json#bar-graph"
  schema={1}
/>

<ComponentTabs component={"bar-graph"} activeTab={"content"} />

<StubFooter category="data-display" />
### ⛔️ Line graph

Component documentation for ⛔️ Line graph — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.line-graph.overview"
  source="components/dist/registries/dskit.json#line-graph"
  schema={1}
/>

<ComponentTabs component={"line-graph"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="low" field="anatomy" value="low" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="medium" field="motion" value="medium" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — frames the data presentation"},{"name":"Title or heading (optional)","description":"identifies what the data represents"},{"name":"Primary content","description":"the data itself — text, value, chart, table cells, badge label"},{"name":"Supporting metadata (optional)","description":"timestamps, units, counts, attribution"},{"name":"Visual indicator (optional)","description":"color dot, icon, badge, or status pill"},{"name":"Action affordance (optional)","description":"expand, drill-in, dismiss, or copy"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"skeleton-loading","note":"rows/cards reveal with skeleton placeholders during load"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"staggered-entrance","note":"lists, tables, search-result-cards enter with staggered fades"},"pattern":{"slug":"staggered-entrance","name":"Staggered Entrance — Lists, Table Rows, Search Cards","phases":[{"Per-item duration":"duration-fast","Easing":"ease-entrance","Delay per item":"`delay-stagger` × item index (item 1: 0ms, item 2: 20ms, item 3: 40ms…)"}],"notes":["The cascading effect guides the eye naturally downward and prevents the screen feeling \"flashed\" with too much at once."]}},{"ref":{"ref":"accordion-expand-collapse","note":"collapsible cards/sections expand at the accordion pace"},"pattern":{"slug":"accordion-expand-collapse","name":"Accordion (expand/collapse)","phases":[{"Phase":"Expand","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates open; content fades in (0→100% opacity) during final 150ms"},{"Phase":"Collapse","Duration":"duration-base","Easing":"ease-standard","Behavior":"Height animates closed; content fades out (100→0% opacity) during initial 100ms"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15473-49490)
### ⛔️ Line graph

Component documentation for ⛔️ Line graph — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.line-graph.accessibility"
  source="components/dist/registries/dskit.json#line-graph"
  schema={1}
/>

<ComponentTabs component={"line-graph"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ⛔️ Line graph

Component documentation for ⛔️ Line graph — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.line-graph.code"
  source="components/dist/registries/dskit.json#line-graph"
  schema={1}
/>

<ComponentTabs component={"line-graph"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#⛔️ Line graph`.
### ⛔️ Line graph

Component documentation for ⛔️ Line graph — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.line-graph.content"
  source="components/dist/registries/dskit.json#line-graph"
  schema={1}
/>

<ComponentTabs component={"line-graph"} activeTab={"content"} />

<StubFooter category="data-display" />
### ✍️ Alert-banner

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.alert-banner.overview"
  source="components/dist/registries/dskit.json#alert-banner"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"alert-banner"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/alert-banner/preview.png" alt="" />

## Overview

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Primary","Success","Warning","Danger"]},{"axis":"Orientation'","values":["Horizontal","Vertical"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13732-3056)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/alert-banner)
### ✍️ Alert-banner

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.alert-banner.accessibility"
  source="components/dist/registries/dskit.json#alert-banner"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"alert-banner"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Alert-banner

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.alert-banner.code"
  source="components/dist/registries/dskit.json#alert-banner"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"alert-banner"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Alert-banner`.
### ✍️ Alert-banner

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.alert-banner.content"
  source="components/dist/registries/dskit.json#alert-banner"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"alert-banner"} activeTab={"content"} />

## Content guidelines

Alerts communicate important information that requires the user's attention. They can be informational, confirmatory, cautionary, or indicate an error. Unlike toasts, alerts are persistent and remain visible until dismissed or resolved.

### When to use

- To warn the user of a condition that may affect their work or data - before an action is taken.
- To confirm that a significant action was completed and the user should be aware of the result.
- To surface a system-level error that requires action to resolve.
- Do not use alerts for routine confirmations - use [toast notifications](/components/feedback/notification/) instead.
- Do not stack multiple alerts. Consolidate if possible.

### Style

- Keep alert text to one to two sentences.
- Lead with the most important information.
- Use the appropriate severity: informational, success, warning, or error.
- Include a clear action link or button when the user needs to do something.
- Do not use `Alert:` or `Warning:` as a prefix in the message body - the icon and color convey severity.

### Behavior

- Informational and success alerts can be dismissible.
- Warning and error alerts should persist until the underlying issue is resolved or the user explicitly dismisses them.
- Alerts should appear at the top of the affected area, not in the center of the page.

### Do / Don't

<DoDont pairs={[{ do: "Your connection expired. Log in again to continue.", dont: "Alert: There has been an authentication error. Please log in." }, { do: "Some datasets are read-only. Contact your administrator to request edit access.", dont: "Warning: Permission issue detected." }, { do: "Import failed. Check the file format and try again.", dont: "Error." }]} />

### Inline banner

An inline banner displays a persistent warning, error, or informational message within a page or form. Unlike a global alert, it is scoped to the immediate context.

#### When to use

- To display persistent warnings, errors, or informational messages within a page or form.

#### Style

- State the issue and what the user should do. Keep to one to two sentences.
- Include a link or action if applicable.

### Notification

Notifications inform users of updates, background task completions, or events that require their attention. They appear in the notification panel or dropdown.

#### When to use

- To inform users of updates, background task completions, or events that require their attention.

#### Style

- Use direct, concise language. One to two sentences.
- Include a timestamp.
- Include a link or action if the user must do something in response.
- Do not use generic text like `You have a new notification`.

### Notification toast

Toasts confirm that a background action completed, or surface non-critical errors and warnings that do not block the user.

#### When to use

- To confirm that a background action completed.
- To surface non-critical errors or warnings that do not block the user.
- Do not use toasts for actions that require user input.
- For routine confirmations that need persistence, use an [alert / banner](/components/feedback/alert-banner/) instead.

#### Style

- Keep to one short sentence.
- Include an undo action where relevant.

#### Examples

| Scenario | Toast text |
|---|---|
| Dataset deleted | Dataset deleted. Undo |
| Export complete | Export ready. Download |
| Connection failed | Connection failed. Try again |

### Tooltip

Tooltips provide short contextual help on hover or focus. They are best for icon-only controls that need a label, or for brief supplementary information that does not need to be persistently visible.

#### When to use

- To provide short contextual help on hover or focus.
- For icon-only controls that require a label.
- Do not use tooltips for critical information — users should not be required to hover to understand the UI.

#### Style

- Limit to a few words or one concise sentence.
- Do not repeat the label of the element being described.
- For multi-sentence explanations, use a [popover](/components/overlays/popover/) or inline help text instead.
### Confirmation

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.confirmation.overview"
  source="components/dist/registries/dskit.json#confirmation"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"confirmation"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/confirmation/preview.png" alt="" />

## Overview

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size","values":["Large"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13871-32310)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/confirmation)
### Confirmation

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.confirmation.accessibility"
  source="components/dist/registries/dskit.json#confirmation"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"confirmation"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Confirmation

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.confirmation.code"
  source="components/dist/registries/dskit.json#confirmation"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"confirmation"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Confirmation`.
### Confirmation

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.confirmation.content"
  source="components/dist/registries/dskit.json#confirmation"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"confirmation"} activeTab={"content"} />

## Content guidelines

Confirmation dialogs interrupt the user before an irreversible or destructive action to verify intent. Use them only for actions that cannot be undone.

### When to use

Before irreversible or destructive actions (delete, remove, reset).

### Style

- Title: name the action, not the outcome.

<DoDont pairs={[{ do: "Delete connection", dont: "This is permanent" }]} />

- Body: one sentence stating what will happen and whether it can be undone.
- Primary CTA: matches the title verb. For example, **Delete**.
- Secondary CTA: **Cancel**.

### Do / Don't

<DoDont pairs={[{ do: "Delete connection / This will remove the connection and cannot be undone. / Delete | Cancel", dont: "Warning! Are you sure? This action is permanent. / Yes | No" }]} />
### Empty state

A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.empty-state.overview"
  source="components/dist/registries/dskit.json#empty-state"
  schema={1}
/>

<ComponentTabs component={"empty-state"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/empty-state/preview.png" alt="" />

## Overview

A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size","values":["Large","Medium","Small"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9230-22073)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/empty-state)
### Empty state

A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.empty-state.accessibility"
  source="components/dist/registries/dskit.json#empty-state"
  schema={1}
/>

<ComponentTabs component={"empty-state"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Empty state

A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.empty-state.code"
  source="components/dist/registries/dskit.json#empty-state"
  schema={1}
/>

<ComponentTabs component={"empty-state"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Empty state`.
### Empty state

A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.empty-state.content"
  source="components/dist/registries/dskit.json#empty-state"
  schema={1}
/>

<ComponentTabs component={"empty-state"} activeTab={"content"} />

## Content guidelines

System states communicate the current condition of the platform or a specific view. Clear, direct copy helps users understand what happened and what to do next.

### Empty state

Empty states appear when users have not yet created items, or when filters return no results. Clear copy and a direct CTA reduce friction and encourage engagement.

#### When to use

- When users have not yet created or uploaded items.
- When [filters](/components/form-input-selection/search-filters/) result in no visible results.
- To encourage engagement with a clear next action.

#### Style

- Use a short, instructive headline (noun phrase or imperative verb).
- Follow with one concise sentence that explains what the user can do.
- Provide one primary action (for example, **Create dataset**).
- Do not use `No results found` as a standalone message without guidance.

#### Do / Don't

<DoDont pairs={[{ do: "No items found / Add your first dataset to start exploring.", dont: "No results." }, { do: "Nothing here yet / Create a connection to get started.", dont: "There are no items to display at this time." }]} />

#### Example

| Element | Example text |
|---|---|
| Title | No items found |
| Body | Add your first dataset to start exploring. |
| CTA | Create dataset |

### Error state

Error states communicate that something failed or a resource could not be loaded. Copy must be specific, non-blaming, and actionable.

#### When to use

- When something fails or a resource cannot be loaded.
- When a user action fails to complete.

#### Style

- Be specific about what went wrong where possible.
- Offer a resolution step or next action.
- Do not use technical error codes as the primary message.
- Do not blame the user.

#### Example

| Element | Example text |
|---|---|
| Title | Something went wrong |
| Body | There was an error creating your item. Try again or contact support if the problem continues. |
| Primary CTA | Try again |

### Maintenance state

Maintenance states inform users that part of the platform is temporarily unavailable due to planned or unplanned work.

#### Style

- Explain what is affected and for how long.
- Provide an estimated time to resolution when available.
- Include a single action if there is something the user can do (for example, **Refresh**).

#### Example

| Element | Example text |
|---|---|
| Title | Scheduled maintenance in progress |
| Body | Reports may be unavailable until 12:00 PM EST. |
| CTA | Refresh |

### Success state

Success states confirm that a user action completed. They often follow an action that previously triggered an empty state.

#### Style

- Confirm what was completed, not just that it succeeded.
- Keep copy brief. One line is usually sufficient.
- Offer a logical next action.

#### Example

| Element | Example text |
|---|---|
| Title | Items imported |
| Body | Your datasets are ready to explore. |
| Primary CTA | Open catalog |
### Error state

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.error-state.overview"
  source="components/dist/registries/dskit.json#error-state"
  schema={1}
/>

<ComponentTabs component={"error-state"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/error-state/preview.png" alt="" />

## Overview

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size","values":["Large","Medium"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13087-34544)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/error-state)
### Error state

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.error-state.accessibility"
  source="components/dist/registries/dskit.json#error-state"
  schema={1}
/>

<ComponentTabs component={"error-state"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Error state

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.error-state.code"
  source="components/dist/registries/dskit.json#error-state"
  schema={1}
/>

<ComponentTabs component={"error-state"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Error state`.
### Error state

A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.error-state.content"
  source="components/dist/registries/dskit.json#error-state"
  schema={1}
/>

<ComponentTabs component={"error-state"} activeTab={"content"} />

## Content guidelines

System states communicate the current condition of the platform or a specific view. Clear, direct copy helps users understand what happened and what to do next.

### Empty state

Empty states appear when users have not yet created items, or when filters return no results. Clear copy and a direct CTA reduce friction and encourage engagement.

#### When to use

- When users have not yet created or uploaded items.
- When [filters](/components/form-input-selection/search-filters/) result in no visible results.
- To encourage engagement with a clear next action.

#### Style

- Use a short, instructive headline (noun phrase or imperative verb).
- Follow with one concise sentence that explains what the user can do.
- Provide one primary action (for example, **Create dataset**).
- Do not use `No results found` as a standalone message without guidance.

#### Do / Don't

<DoDont pairs={[{ do: "No items found / Add your first dataset to start exploring.", dont: "No results." }, { do: "Nothing here yet / Create a connection to get started.", dont: "There are no items to display at this time." }]} />

#### Example

| Element | Example text |
|---|---|
| Title | No items found |
| Body | Add your first dataset to start exploring. |
| CTA | Create dataset |

### Error state

Error states communicate that something failed or a resource could not be loaded. Copy must be specific, non-blaming, and actionable.

#### When to use

- When something fails or a resource cannot be loaded.
- When a user action fails to complete.

#### Style

- Be specific about what went wrong where possible.
- Offer a resolution step or next action.
- Do not use technical error codes as the primary message.
- Do not blame the user.

#### Example

| Element | Example text |
|---|---|
| Title | Something went wrong |
| Body | There was an error creating your item. Try again or contact support if the problem continues. |
| Primary CTA | Try again |

### Maintenance state

Maintenance states inform users that part of the platform is temporarily unavailable due to planned or unplanned work.

#### Style

- Explain what is affected and for how long.
- Provide an estimated time to resolution when available.
- Include a single action if there is something the user can do (for example, **Refresh**).

#### Example

| Element | Example text |
|---|---|
| Title | Scheduled maintenance in progress |
| Body | Reports may be unavailable until 12:00 PM EST. |
| CTA | Refresh |

### Success state

Success states confirm that a user action completed. They often follow an action that previously triggered an empty state.

#### Style

- Confirm what was completed, not just that it succeeded.
- Keep copy brief. One line is usually sufficient.
- Offer a logical next action.

#### Example

| Element | Example text |
|---|---|
| Title | Items imported |
| Body | Your datasets are ready to explore. |
| Primary CTA | Open catalog |
### Maintenance state

A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.maintenance-state.overview"
  source="components/dist/registries/dskit.json#maintenance-state"
  schema={1}
/>

<ComponentTabs component={"maintenance-state"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/maintenance-state/preview.png" alt="" />

## Overview

A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size","values":["Large"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13871-32311)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/maintenance-state)
### Maintenance state

A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.maintenance-state.accessibility"
  source="components/dist/registries/dskit.json#maintenance-state"
  schema={1}
/>

<ComponentTabs component={"maintenance-state"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Maintenance state

A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.maintenance-state.code"
  source="components/dist/registries/dskit.json#maintenance-state"
  schema={1}
/>

<ComponentTabs component={"maintenance-state"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Maintenance state`.
### Maintenance state

A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.maintenance-state.content"
  source="components/dist/registries/dskit.json#maintenance-state"
  schema={1}
/>

<ComponentTabs component={"maintenance-state"} activeTab={"content"} />

## Content guidelines

System states communicate the current condition of the platform or a specific view. Clear, direct copy helps users understand what happened and what to do next.

### Empty state

Empty states appear when users have not yet created items, or when filters return no results. Clear copy and a direct CTA reduce friction and encourage engagement.

#### When to use

- When users have not yet created or uploaded items.
- When [filters](/components/form-input-selection/search-filters/) result in no visible results.
- To encourage engagement with a clear next action.

#### Style

- Use a short, instructive headline (noun phrase or imperative verb).
- Follow with one concise sentence that explains what the user can do.
- Provide one primary action (for example, **Create dataset**).
- Do not use `No results found` as a standalone message without guidance.

#### Do / Don't

<DoDont pairs={[{ do: "No items found / Add your first dataset to start exploring.", dont: "No results." }, { do: "Nothing here yet / Create a connection to get started.", dont: "There are no items to display at this time." }]} />

#### Example

| Element | Example text |
|---|---|
| Title | No items found |
| Body | Add your first dataset to start exploring. |
| CTA | Create dataset |

### Error state

Error states communicate that something failed or a resource could not be loaded. Copy must be specific, non-blaming, and actionable.

#### When to use

- When something fails or a resource cannot be loaded.
- When a user action fails to complete.

#### Style

- Be specific about what went wrong where possible.
- Offer a resolution step or next action.
- Do not use technical error codes as the primary message.
- Do not blame the user.

#### Example

| Element | Example text |
|---|---|
| Title | Something went wrong |
| Body | There was an error creating your item. Try again or contact support if the problem continues. |
| Primary CTA | Try again |

### Maintenance state

Maintenance states inform users that part of the platform is temporarily unavailable due to planned or unplanned work.

#### Style

- Explain what is affected and for how long.
- Provide an estimated time to resolution when available.
- Include a single action if there is something the user can do (for example, **Refresh**).

#### Example

| Element | Example text |
|---|---|
| Title | Scheduled maintenance in progress |
| Body | Reports may be unavailable until 12:00 PM EST. |
| CTA | Refresh |

### Success state

Success states confirm that a user action completed. They often follow an action that previously triggered an empty state.

#### Style

- Confirm what was completed, not just that it succeeded.
- Keep copy brief. One line is usually sufficient.
- Offer a logical next action.

#### Example

| Element | Example text |
|---|---|
| Title | Items imported |
| Body | Your datasets are ready to explore. |
| Primary CTA | Open catalog |
### Loader

Indicates a background process is active. Use loader for large components or large section within a page

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader.overview"
  source="components/dist/registries/dskit.json#loader"
  schema={1}
/>

<ComponentTabs component={"loader"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/loader/preview.png" alt="" />

## Overview

Indicates a background process is active. Use loader for large components or large section within a page

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Percent","values":["99%","10%","Percent3"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7372-2195)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/loader)
### Loader with logo

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader-with-logo.overview"
  source="components/dist/registries/dskit.json#loader-with-logo"
  schema={1}
/>

<ComponentTabs component={"loader-with-logo"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/loader-with-logo/preview.png" alt="" />

## Overview

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App","values":["Actian Data Intelligence","Studio","Explorer","Admin"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14294-7650)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/loader-with-logo)
### Loader with logo

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader-with-logo.accessibility"
  source="components/dist/registries/dskit.json#loader-with-logo"
  schema={1}
/>

<ComponentTabs component={"loader-with-logo"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Loader with logo

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader-with-logo.code"
  source="components/dist/registries/dskit.json#loader-with-logo"
  schema={1}
/>

<ComponentTabs component={"loader-with-logo"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Loader with logo`.
### Loader with logo

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader-with-logo.content"
  source="components/dist/registries/dskit.json#loader-with-logo"
  schema={1}
/>

<ComponentTabs component={"loader-with-logo"} activeTab={"content"} />

## Content guidelines

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.
### Loader

Indicates a background process is active. Use loader for large components or large section within a page

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader.accessibility"
  source="components/dist/registries/dskit.json#loader"
  schema={1}
/>

<ComponentTabs component={"loader"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Loader

Indicates a background process is active. Use loader for large components or large section within a page

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader.code"
  source="components/dist/registries/dskit.json#loader"
  schema={1}
/>

<ComponentTabs component={"loader"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Loader`.
### Loader

Indicates a background process is active. Use loader for large components or large section within a page

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader.content"
  source="components/dist/registries/dskit.json#loader"
  schema={1}
/>

<ComponentTabs component={"loader"} activeTab={"content"} />

## Content guidelines

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.
### Loading skeleton

Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loading-skeleton.overview"
  source="components/dist/registries/dskit.json#loading-skeleton"
  schema={1}
/>

<ComponentTabs component={"loading-skeleton"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/loading-skeleton/preview.png" alt="" />

## Overview

Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Transition","values":["1","2"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14294-8086)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/loading-skeleton)
### Loading skeleton

Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loading-skeleton.accessibility"
  source="components/dist/registries/dskit.json#loading-skeleton"
  schema={1}
/>

<ComponentTabs component={"loading-skeleton"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Loading skeleton

Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loading-skeleton.code"
  source="components/dist/registries/dskit.json#loading-skeleton"
  schema={1}
/>

<ComponentTabs component={"loading-skeleton"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Loading skeleton`.
### Loading skeleton

Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loading-skeleton.content"
  source="components/dist/registries/dskit.json#loading-skeleton"
  schema={1}
/>

<ComponentTabs component={"loading-skeleton"} activeTab={"content"} />

## Content guidelines

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.
### Spinner

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.spinner.overview"
  source="components/dist/registries/dskit.json#spinner"
  schema={1}
/>

<ComponentTabs component={"spinner"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/spinner/preview.png" alt="" />

## Overview

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Complete","values":["50%","75%","100%","25%"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7372-2170)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/spinner)
### Spinner

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.spinner.accessibility"
  source="components/dist/registries/dskit.json#spinner"
  schema={1}
/>

<ComponentTabs component={"spinner"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Spinner

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.spinner.code"
  source="components/dist/registries/dskit.json#spinner"
  schema={1}
/>

<ComponentTabs component={"spinner"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Spinner`.
### Spinner

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.spinner.content"
  source="components/dist/registries/dskit.json#spinner"
  schema={1}
/>

<ComponentTabs component={"spinner"} activeTab={"content"} />

## Content guidelines

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.
### Notification

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification.overview"
  source="components/dist/registries/dskit.json#notification"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"notification"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/notification/preview.png" alt="" />

## Overview

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default","Critical"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13868-11595)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/notification)
### Notification

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification.accessibility"
  source="components/dist/registries/dskit.json#notification"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"notification"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"feedback-errors","note":"error severity must be conveyed by text + icon, not color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance","note":"transient messages use role=status (polite) or role=alert (assertive) per severity"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable entrance pulse + slide"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"keyboard-focus","note":"focus must not be stolen by toasts; persistent alerts may receive focus when actionable"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Notification

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification.code"
  source="components/dist/registries/dskit.json#notification"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"notification"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Notification`.
### Notification

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification.content"
  source="components/dist/registries/dskit.json#notification"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"notification"} activeTab={"content"} />

## Content guidelines

An inline toast is a brief, non-blocking message displayed within a specific area of the page rather than at a global level. It provides feedback directly adjacent to the action or element it refers to.

### When to use

- To confirm a localized action, such as copying a value or saving a field inline.
- To surface a validation warning directly below or beside a specific form field.
- Do not use an inline toast for global events - use the global toast or snackbar instead.

### Style

- One short sentence maximum. Ideally fewer than ten words.
- Use present or past tense to confirm what happened. For example, `Copied` or `Saved`.
- Do not use inline toasts for error messages that require user action - use inline validation instead.

### Examples

| Scenario | Inline toast text |
|---|---|
| Value copied to clipboard | Copied |
| Field saved inline | Saved |
| Tag added to asset | Tag added |
| Link generated | Link created |

### Notification

Notifications inform users of updates, background task completions, or events that require their attention. They appear in the notification panel or dropdown.

#### When to use

- To inform users of updates, background task completions, or events that require their attention.

#### Style

- Use direct, concise language. One to two sentences.
- Include a timestamp.
- Include a link or action if the user must do something in response.
- Do not use generic text like `You have a new notification`.

### Notification toast

Toasts confirm that a background action completed, or surface non-critical errors and warnings that do not block the user.

#### When to use

- To confirm that a background action completed.
- To surface non-critical errors or warnings that do not block the user.
- Do not use toasts for actions that require user input.
- For routine confirmations that need persistence, use an [alert / banner](/components/feedback/alert-banner/) instead.

#### Style

- Keep to one short sentence.
- Include an undo action where relevant.

#### Examples

| Scenario | Toast text |
|---|---|
| Dataset deleted | Dataset deleted. Undo |
| Export complete | Export ready. Download |
| Connection failed | Connection failed. Try again |

### Tooltip

Tooltips provide short contextual help on hover or focus. They are best for icon-only controls that need a label, or for brief supplementary information that does not need to be persistently visible.

#### When to use

- To provide short contextual help on hover or focus.
- For icon-only controls that require a label.
- Do not use tooltips for critical information — users should not be required to hover to understand the UI.

#### Style

- Limit to a few words or one concise sentence.
- Do not repeat the label of the element being described.
- For multi-sentence explanations, use a [popover](/components/overlays/popover/) or inline help text instead.
### Calendar

Component documentation for Calendar — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.calendar.overview"
  source="components/dist/registries/dskit.json#calendar"
  schema={1}
/>

<ComponentTabs component={"calendar"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/calendar/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Single date select","Date","Month","Single"]},{"axis":"Selection","values":["Single","Range","Year"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8211-6664)
### Calendar

Component documentation for Calendar — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.calendar.accessibility"
  source="components/dist/registries/dskit.json#calendar"
  schema={1}
/>

<ComponentTabs component={"calendar"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Calendar

Component documentation for Calendar — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.calendar.code"
  source="components/dist/registries/dskit.json#calendar"
  schema={1}
/>

<ComponentTabs component={"calendar"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Calendar`.
### Calendar

Component documentation for Calendar — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.calendar.content"
  source="components/dist/registries/dskit.json#calendar"
  schema={1}
/>

<ComponentTabs component={"calendar"} activeTab={"content"} />

<StubFooter category="form-input-selection" />
### Input, date

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input-date.overview"
  source="components/dist/registries/dskit.json#input-date"
  schema={1}
/>

<ComponentTabs component={"input-date"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/input-date/preview.png" alt="" />

## Overview

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Single date","Date range"]},{"axis":"States","values":["Enabled","Hovered","Focused","Error","Disabled","Fille","Activ"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8194-7305)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/input-date)
### Input, date

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input-date.accessibility"
  source="components/dist/registries/dskit.json#input-date"
  schema={1}
/>

<ComponentTabs component={"input-date"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Input, date

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input-date.code"
  source="components/dist/registries/dskit.json#input-date"
  schema={1}
/>

<ComponentTabs component={"input-date"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Input, date`.
### Input, date

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input-date.content"
  source="components/dist/registries/dskit.json#input-date"
  schema={1}
/>

<ComponentTabs component={"input-date"} activeTab={"content"} />

## Content guidelines

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Validation messages appear inline with form fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

<DoDont pairs={[{ do: "Enter a valid email address.", dont: "Invalid email." }, { do: "Connection name is required.", dont: "Please fill out this field." }, { do: "Password must be 8–32 characters.", dont: "Password does not meet requirements." }, { do: "This name is already in use. Choose a different name.", dont: "Duplicate entry error." }, { do: "Select at least one data domain.", dont: "You must make a selection." }]} />
### Checkbox with label

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.checkbox-with-label.overview"
  source="components/dist/registries/dskit.json#checkbox-with-label"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"checkbox-with-label"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/checkbox-with-label/preview.png" alt="" />

## Overview

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Selected","values":["Yes","Indeterminate","No"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9478-17216)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/checkbox-with-label)
### Checkbox with label

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.checkbox-with-label.accessibility"
  source="components/dist/registries/dskit.json#checkbox-with-label"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"checkbox-with-label"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Checkbox with label

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.checkbox-with-label.code"
  source="components/dist/registries/dskit.json#checkbox-with-label"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"checkbox-with-label"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Checkbox with label`.
### Checkbox with label

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.checkbox-with-label.content"
  source="components/dist/registries/dskit.json#checkbox-with-label"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"checkbox-with-label"} activeTab={"content"} />

## Content guidelines

Checkboxes let users select one or more options from a list. They are used for choices that are not mutually exclusive, such as selecting multiple preferences or agreeing to terms.

### Default format

#### When to use

- To allow users to select multiple options in a group.
- For binary settings that are independent of other choices. For example, **Enable notifications**.
- When a task involves filtering or refining data. For example, applying multiple filters to a search.

#### Style

- Use clear, direct labels that describe what happens if the box is checked.
- Write labels in positive form.

<DoDont pairs={[{ do: "Show archived items", dont: "Don't hide archived items" }]} />

- Group related checkboxes under a group label when possible for context.
- Keep labels parallel in style and length for readability.
- Avoid jargon and abbreviations.

#### Behavior

Allow users to select by clicking either the box or the label.

#### Do / Don't

<DoDont pairs={[{ do: "Enable notifications", dont: "Notifications enabled (noun-first label)" }, { do: "Show archived items", dont: "Don't hide archived items" }, { do: "Agree to terms and conditions", dont: "Agreement with terms and conditions" }]} />

### Card format

Use card-format checkboxes instead of traditional checkboxes or radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Validation messages appear inline with form fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

<DoDont pairs={[{ do: "Enter a valid email address.", dont: "Invalid email." }, { do: "Connection name is required.", dont: "Please fill out this field." }, { do: "Password must be 8–32 characters.", dont: "Password does not meet requirements." }, { do: "This name is already in use. Choose a different name.", dont: "Duplicate entry error." }, { do: "Select at least one data domain.", dont: "You must make a selection." }]} />
### Dropdown, Select, default

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.dropdown-select-default.overview"
  source="components/dist/registries/dskit.json#dropdown-select-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"dropdown-select-default"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

## Overview

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default","Search/Multiple","With avatar","Compact/Custom"]},{"axis":"State","values":["Default","Hover","Focus","Active","Filled","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13972-708)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/dropdown-select-default)
### Dropdown, Select, default

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.dropdown-select-default.accessibility"
  source="components/dist/registries/dskit.json#dropdown-select-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"dropdown-select-default"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Dropdown, Select, default

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.dropdown-select-default.code"
  source="components/dist/registries/dskit.json#dropdown-select-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"dropdown-select-default"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Dropdown, Select, default`.
### Dropdown, Select, default

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.dropdown-select-default.content"
  source="components/dist/registries/dskit.json#dropdown-select-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"dropdown-select-default"} activeTab={"content"} />

## Content guidelines

Dropdowns and select menus allow users to choose one option from a list. They are used for actions menus, filter selections, and single-choice inputs where the full list does not need to be visible at all times.

### Behavior

- Menu opens on click, not on hover.
- Close the menu on Escape key press or on outside click.

### Style

- Label the button with a clear action or noun. For example, **Actions** or **More**.
- Menu items should follow the verb + noun formula. For example, **Download PDF**, **Add tag**, **Delete record**.
- Use sentence case for all menu items.
- Multi-selection dropdowns: include checkboxes, and selections should persist until the user closes the menu.

### Do / Don't

<DoDont pairs={[{ do: "Actions", dont: "Click here" }, { do: "Download PDF", dont: "PDF download" }, { do: "Add tag", dont: "Tag adding" }]} />
### Input

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input.overview"
  source="components/dist/registries/dskit.json#input"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"input"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/input/preview.png" alt="" />

## Overview

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"States","values":["Default","Hovered","Focused","Active","Filled","Error","Disabled","Read-only"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7238-2487)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/input)
### Input

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input.accessibility"
  source="components/dist/registries/dskit.json#input"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"input"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Input

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input.code"
  source="components/dist/registries/dskit.json#input"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"input"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Input`.
### Input

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.input.content"
  source="components/dist/registries/dskit.json#input"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"input"} activeTab={"content"} />

## Content guidelines

Text inputs allow users to enter freeform text. They are used for naming, descriptions, search, and any field where the expected value cannot be constrained to a fixed list.

### Behavior

Error validation should happen at the latest when the user clicks out of the text entry field (on blur).

### Placeholder text

- Placeholder text provides a brief example of the expected input content.
- Use placeholder text only to model good input - not to convey instructions or restrictions for the field.
- Placeholder text should never simply repeat the field label or description.

#### When to use placeholder text

- When an example would model the correct input.
- When naming conventions or restrictions should be reinforced.
- When the field label could be interpreted in different ways and an example would reduce that ambiguity.
- Never use placeholder text if the label text is sufficient on its own.

### Do / Don't

<DoDont pairs={[{ do: "Label: Dataset name / Placeholder: e.g. Q4_sales_report", dont: "Placeholder: Enter dataset name" }, { do: "Placeholder: e.g. john.doe@company.com", dont: "Placeholder: Enter your email address" }]} />

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Validation messages appear inline with form fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

<DoDont pairs={[{ do: "Enter a valid email address.", dont: "Invalid email." }, { do: "Connection name is required.", dont: "Please fill out this field." }, { do: "Password must be 8–32 characters.", dont: "Password does not meet requirements." }, { do: "This name is already in use. Choose a different name.", dont: "Duplicate entry error." }, { do: "Select at least one data domain.", dont: "You must make a selection." }]} />
### Radio button

Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.radio-button.overview"
  source="components/dist/registries/dskit.json#radio-button"
  schema={1}
/>

<ComponentTabs component={"radio-button"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/radio-button/preview.png" alt="" />

## Overview

Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Format","values":["Default","Card format"]},{"axis":"Selected","values":["No","Yes"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9474-16884)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/radio-button)
### Radio button

Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.radio-button.accessibility"
  source="components/dist/registries/dskit.json#radio-button"
  schema={1}
/>

<ComponentTabs component={"radio-button"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Radio button

Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.radio-button.code"
  source="components/dist/registries/dskit.json#radio-button"
  schema={1}
/>

<ComponentTabs component={"radio-button"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Radio button`.
### Radio button

Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.radio-button.content"
  source="components/dist/registries/dskit.json#radio-button"
  schema={1}
/>

<ComponentTabs component={"radio-button"} activeTab={"content"} />

## Content guidelines

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Validation messages appear inline with form fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

<DoDont pairs={[{ do: "Enter a valid email address.", dont: "Invalid email." }, { do: "Connection name is required.", dont: "Please fill out this field." }, { do: "Password must be 8–32 characters.", dont: "Password does not meet requirements." }, { do: "This name is already in use. Choose a different name.", dont: "Duplicate entry error." }, { do: "Select at least one data domain.", dont: "You must make a selection." }]} />
### Rich text

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.rich-text.overview"
  source="components/dist/registries/dskit.json#rich-text"
  schema={1}
/>

<ComponentTabs component={"rich-text"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

## Overview

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Expanded","Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9480-17723)
### Rich text

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.rich-text.accessibility"
  source="components/dist/registries/dskit.json#rich-text"
  schema={1}
/>

<ComponentTabs component={"rich-text"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Rich text

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.rich-text.code"
  source="components/dist/registries/dskit.json#rich-text"
  schema={1}
/>

<ComponentTabs component={"rich-text"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Rich text`.
### Rich text

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.rich-text.content"
  source="components/dist/registries/dskit.json#rich-text"
  schema={1}
/>

<ComponentTabs component={"rich-text"} activeTab={"content"} />

<StubFooter category="form-input-selection" />
### Search filters

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-filters.overview"
  source="components/dist/registries/dskit.json#search-filters"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search-filters"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/search-filters/preview.png" alt="" />

## Overview

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Explorer","Studio"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9660-49637)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/search-filters)
### Search filters

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-filters.accessibility"
  source="components/dist/registries/dskit.json#search-filters"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search-filters"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Search filters

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-filters.code"
  source="components/dist/registries/dskit.json#search-filters"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search-filters"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Search filters`.
### Search filters

A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-filters.content"
  source="components/dist/registries/dskit.json#search-filters"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search-filters"} activeTab={"content"} />

## Content guidelines

Filters allow users to refine visible data by applying structured criteria. They reduce results without modifying underlying data. Filters must be consistent in terminology, placement, and behavior across all products.

### When to use

- When a dataset or list is large enough that users need to narrow results to find what they need.
- When multiple filter criteria can be applied simultaneously.
- Do not use filters for permanent data modifications - filters only affect the current view.

### Style

- Filter labels use short noun phrases that match the attribute being filtered. For example, `Owner`, `Status`, `Data domain`.
- Use sentence case for all filter labels and option values.
- Show the active filter count when filters are collapsed. For example, `Filters (3)`.
- Use consistent terminology across all filter controls in the same view.

### Behavior

- Apply filters immediately on selection, or provide an explicit **Apply** button for complex filter sets.
- Provide a **Clear all** or **Reset filters** action when filters are active.
- Persist filter state when users navigate away and return to the same view.

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.
### Search

A specialized text input designed to query a database or filter a page's content in real-time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search.overview"
  source="components/dist/registries/dskit.json#search"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/search/preview.png" alt="" />

## Overview

A specialized text input designed to query a database or filter a page's content in real-time.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Explorer home","Global header","Inline"]},{"axis":"State","values":["Hovered","Focused","Filled","Active","Dsiabled","Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8589-11055)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/search)
### Search dropdown menu

Component documentation for Search dropdown menu — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-dropdown-menu.overview"
  source="components/dist/registries/dskit.json#search-dropdown-menu"
  schema={1}
/>

<ComponentTabs component={"search-dropdown-menu"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/search-dropdown-menu/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["No result","Before typed","After typed","Explorer home"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8756-9994)
### Search dropdown menu

Component documentation for Search dropdown menu — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-dropdown-menu.accessibility"
  source="components/dist/registries/dskit.json#search-dropdown-menu"
  schema={1}
/>

<ComponentTabs component={"search-dropdown-menu"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Search dropdown menu

Component documentation for Search dropdown menu — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-dropdown-menu.code"
  source="components/dist/registries/dskit.json#search-dropdown-menu"
  schema={1}
/>

<ComponentTabs component={"search-dropdown-menu"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Search dropdown menu`.
### Search dropdown menu

Component documentation for Search dropdown menu — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search-dropdown-menu.content"
  source="components/dist/registries/dskit.json#search-dropdown-menu"
  schema={1}
/>

<ComponentTabs component={"search-dropdown-menu"} activeTab={"content"} />

<StubFooter category="form-input-selection" />
### Search

A specialized text input designed to query a database or filter a page's content in real-time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search.accessibility"
  source="components/dist/registries/dskit.json#search"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Search

A specialized text input designed to query a database or filter a page's content in real-time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search.code"
  source="components/dist/registries/dskit.json#search"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Search`.
### Search

A specialized text input designed to query a database or filter a page's content in real-time.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.search.content"
  source="components/dist/registries/dskit.json#search"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"search"} activeTab={"content"} />

## Content guidelines

Search allows users to find assets quickly. Placeholder text should provide a hint as to what is being searched and help the user understand the scope of the search.

### When to use

- As a global entry point for finding any data asset.
- As a scoped filter within a specific view or catalog section.

### Placeholder text

- Placeholder text should provide a hint as to what is being searched.
- Do not include a period at the end of placeholder text.
- When search is meant to retrieve assets based on keywords found in metadata, use `Search in [asset names]` (plural).
- When in doubt, `Search [asset names]` (also plural) is always a safe default.

### Placeholder text examples

| Context | Placeholder text |
|---|---|
| Global search | Search items |
| Topic search | Search topics |
| User search | Search users |
| Contact search | Search contacts |
| Property search | Search properties |
| Glossary search | Search glossary types |

### Behavior

- Execute search on Enter or on suggestion click.
- Maintain the last query when the user returns to the search view.
- Support keyboard navigation through results.
### Toglge

Component documentation for Toglge — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toglge.overview"
  source="components/dist/registries/dskit.json#toglge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"toglge"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Toggle location","values":["Left","Right"]},{"axis":"Selected","values":["No","Yes"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14000-4395)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/toglge)
### Toglge

Component documentation for Toglge — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toglge.accessibility"
  source="components/dist/registries/dskit.json#toglge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"toglge"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"forms-data-entry","note":"every control needs a programmatically-associated label + accessible error message"},"section":{"slug":"forms-data-entry","title":"Forms & Data Entry","wcag":[],"body_excerpt":"- Labels are always visible (no placeholder-only labels) - Required vs optional is clearly indicated (asterisk for required) - Errors appear near the field with explanation - Inline validation is help"}},{"ref":{"ref":"required-states"},"section":{"slug":"required-states","title":"Required States","wcag":[],"body_excerpt":"Every interactive component must have these states designed: State Requirement -------------------- Default Base visual appearance Hover Visual change on mouse hover Focus Visible focus indicator (key"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Toglge

Component documentation for Toglge — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toglge.code"
  source="components/dist/registries/dskit.json#toglge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"toglge"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Toglge`.
### Toglge

Component documentation for Toglge — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.toglge.content"
  source="components/dist/registries/dskit.json#toglge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"toglge"} activeTab={"content"} />

## Content guidelines

Toggle control is a binary control that turns a setting on or off. Use it for settings that take effect immediately — without requiring a save action. When a save action is needed, use a checkbox instead.

### When to use

- For enabling or disabling a feature, setting, or permission that takes effect immediately.
- Do not use a toggle control when the change requires a save action to apply — use a checkbox or radio button within a form instead.

### Style

- Label the toggle control for the feature or setting being controlled, not the on/off state. For example, **Email notifications** — not **Enable email notifications** or **Email notifications on**.
- If the on and off states have meaningfully different consequences, add a short description below the toggle label.
- Use sentence case.

### Do / Don't

<DoDont pairs={[{ do: "Email notifications", dont: "Enable email notifications" }, { do: "Public access", dont: "Turn on public access" }, { do: "Auto-refresh", dont: "Auto-refresh: ON" }]} />

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

<DoDont pairs={[{ do: "Group name", dont: "Group Name" }]} />

- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

<DoDont pairs={[{ do: "Enter a valid date", dont: "Invalid input" }]} />

- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See validation messages for error text guidelines.

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

<DoDont pairs={[{ do: "Label: Connection name / Helper: Use a unique name to identify this connection.", dont: "Placeholder: Enter connection name (no visible label)" }, { do: "Helper: Must be 8–32 characters.", dont: "Helper: Please enter a valid password." }]} />

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**

- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**

- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

Validation messages appear inline with form fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

<DoDont pairs={[{ do: "Enter a valid email address.", dont: "Invalid email." }, { do: "Connection name is required.", dont: "Please fill out this field." }, { do: "Password must be 8–32 characters.", dont: "Password does not meet requirements." }, { do: "This name is already in use. Choose a different name.", dont: "Duplicate entry error." }, { do: "Select at least one data domain.", dont: "You must make a selection." }]} />
### Breadcrumbs

Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.breadcrumbs.overview"
  source="components/dist/registries/dskit.json#breadcrumbs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"breadcrumbs"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/breadcrumbs/preview.png" alt="" />

## Overview

Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13792-15247)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/breadcrumbs)
### Breadcrumbs

Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.breadcrumbs.accessibility"
  source="components/dist/registries/dskit.json#breadcrumbs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"breadcrumbs"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Breadcrumbs

Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.breadcrumbs.code"
  source="components/dist/registries/dskit.json#breadcrumbs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"breadcrumbs"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Breadcrumbs`.
### Breadcrumbs

Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.breadcrumbs.content"
  source="components/dist/registries/dskit.json#breadcrumbs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"breadcrumbs"} activeTab={"content"} />

## Content guidelines

Breadcrumbs show the user's location within the product hierarchy and allow navigation back up the tree.

### Usage

Follow the pattern: Main component / Sub component / Specific item or page name.

### Style

- Use the exact page or item name at each level.
- Do not truncate unless space is severely limited.
- The current page is not a link — it is plain text at the end of the breadcrumb trail.
### Account dropdown

Component documentation for Account dropdown — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.account-dropdown.overview"
  source="components/dist/registries/dskit.json#account-dropdown"
  schema={1}
/>

<ComponentTabs component={"account-dropdown"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/account-dropdown/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Orientation","values":["horizontal","vertical"]},{"axis":"Density","values":["compact","comfortable"]},{"axis":"State","values":["default","hover","focus","current","disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9118-17382)
### Account dropdown

Component documentation for Account dropdown — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.account-dropdown.accessibility"
  source="components/dist/registries/dskit.json#account-dropdown"
  schema={1}
/>

<ComponentTabs component={"account-dropdown"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Account dropdown

Component documentation for Account dropdown — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.account-dropdown.code"
  source="components/dist/registries/dskit.json#account-dropdown"
  schema={1}
/>

<ComponentTabs component={"account-dropdown"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.
### Account dropdown

Component documentation for Account dropdown — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.account-dropdown.content"
  source="components/dist/registries/dskit.json#account-dropdown"
  schema={1}
/>

<ComponentTabs component={"account-dropdown"} activeTab={"content"} />

<StubFooter category="navigation" />
### App switcher dropdown

Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.app-switcher-dropdown.overview"
  source="components/dist/registries/dskit.json#app-switcher-dropdown"
  schema={1}
/>

<ComponentTabs component={"app-switcher-dropdown"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/app-switcher-dropdown/preview.png" alt="" />

## Overview

Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Orientation","values":["horizontal","vertical"]},{"axis":"Density","values":["compact","comfortable"]},{"axis":"State","values":["default","hover","focus","current","disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9118-17666)
### App switcher dropdown

Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.app-switcher-dropdown.accessibility"
  source="components/dist/registries/dskit.json#app-switcher-dropdown"
  schema={1}
/>

<ComponentTabs component={"app-switcher-dropdown"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### App switcher dropdown

Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.app-switcher-dropdown.code"
  source="components/dist/registries/dskit.json#app-switcher-dropdown"
  schema={1}
/>

<ComponentTabs component={"app-switcher-dropdown"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.
### App switcher dropdown

Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.app-switcher-dropdown.content"
  source="components/dist/registries/dskit.json#app-switcher-dropdown"
  schema={1}
/>

<ComponentTabs component={"app-switcher-dropdown"} activeTab={"content"} />

<StubFooter category="navigation" />
### Global header

The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.global-header.overview"
  source="components/dist/registries/dskit.json#global-header"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"global-header"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/global-header/preview.png" alt="" />

## Overview

The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App type","values":["Explorer","Admin","Studio"]},{"axis":"Breakpoints","values":["XL","L","M","S","XS"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7384-22554)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/global-header)
### Global header

The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.global-header.accessibility"
  source="components/dist/registries/dskit.json#global-header"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"global-header"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Global header

The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.global-header.code"
  source="components/dist/registries/dskit.json#global-header"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"global-header"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Global header`.
### Global header

The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.global-header.content"
  source="components/dist/registries/dskit.json#global-header"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"global-header"} activeTab={"content"} />

## Content guidelines

Permanently anchored to the top of the screen across all pages and apps, for access when users need to switch context, use global tools, or access account options.

### When to use

- To switch between product areas or catalogs.
- To access global tools such as [search](/components/form-input-selection/search/search/) or notifications.
- To view account and profile options.

### Style

- Only the branded title and navigation context change between applications.
- Utility icons (notifications, help, profile) should be unlabeled but include tooltips.

### Behavior

Nav elements should be adapted to reflect the current app (Studio, Explorer, Admin, and so on).
### Notification dropdown

Component documentation for Notification dropdown — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification-dropdown.overview"
  source="components/dist/registries/dskit.json#notification-dropdown"
  schema={1}
/>

<ComponentTabs component={"notification-dropdown"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<MediaAsset src="/media/notification-dropdown/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Empty","List"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9114-15379)
### Notification dropdown

Component documentation for Notification dropdown — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification-dropdown.accessibility"
  source="components/dist/registries/dskit.json#notification-dropdown"
  schema={1}
/>

<ComponentTabs component={"notification-dropdown"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Notification dropdown

Component documentation for Notification dropdown — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification-dropdown.code"
  source="components/dist/registries/dskit.json#notification-dropdown"
  schema={1}
/>

<ComponentTabs component={"notification-dropdown"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Notification dropdown`.
### Notification dropdown

Component documentation for Notification dropdown — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.notification-dropdown.content"
  source="components/dist/registries/dskit.json#notification-dropdown"
  schema={1}
/>

<ComponentTabs component={"notification-dropdown"} activeTab={"content"} />

<StubFooter category="navigation" />
### Whats new dropdown

Component documentation for Whats new dropdown — Overview.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.whats-new-dropdown.overview"
  source="components/dist/registries/dskit.json#whats-new-dropdown"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"whats-new-dropdown"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/whats-new-dropdown/preview.png" alt="" />

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Drilldown1","Drilldown2","Empty","List"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9114-16794)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/whats-new-dropdown)
### Whats new dropdown

Component documentation for Whats new dropdown — Accessibility.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.whats-new-dropdown.accessibility"
  source="components/dist/registries/dskit.json#whats-new-dropdown"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"whats-new-dropdown"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Whats new dropdown

Component documentation for Whats new dropdown — Code.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.whats-new-dropdown.code"
  source="components/dist/registries/dskit.json#whats-new-dropdown"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"whats-new-dropdown"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Whats new dropdown`.
### Whats new dropdown

Component documentation for Whats new dropdown — Content.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.whats-new-dropdown.content"
  source="components/dist/registries/dskit.json#whats-new-dropdown"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"whats-new-dropdown"} activeTab={"content"} />

## Content guidelines

The What's New section summarizes recent product changes. It is product communication, not marketing. The tone should be factual and helpful.

### Style

- Group updates by category (for example, **Data catalog**, **Connections**, **Performance**).
- Use past tense to describe what changed. For example, "Added support for..." or "Fixed an issue where..."
- Do not use marketing adjectives like "powerful," "seamless," or "game-changing."
- Keep each item to one to two sentences.

### Do / Don't

<DoDont pairs={[{ do: "Added support for bulk dataset import.", dont: "We've supercharged the import experience with powerful new bulk capabilities!" }, { do: "Fixed an issue where filters were not preserved on page reload.", dont: "Bug fixes and performance improvements." }]} />
### ✍️ Side nav

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.side-nav.overview"
  source="components/dist/registries/dskit.json#side-nav"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"side-nav"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/side-nav/preview.png" alt="" />

## Overview

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App","values":["Admin","Studio"]},{"axis":"View","values":["Collapsed","Expanded"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=13599-20120)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/side-nav)
### ✍️ Side nav

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.side-nav.accessibility"
  source="components/dist/registries/dskit.json#side-nav"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"side-nav"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ✍️ Side nav

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.side-nav.code"
  source="components/dist/registries/dskit.json#side-nav"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"side-nav"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#✍️ Side nav`.
### ✍️ Side nav

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.side-nav.content"
  source="components/dist/registries/dskit.json#side-nav"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"side-nav"} activeTab={"content"} />

## Content guidelines

Permanently anchored (though collapsible) to the left side of all apps in which it is available, for persistent access to primary sections of the product.

### When to use

- For persistent access to primary sections of the product.

### Style

- Clarity: use short, descriptive labels that match the text used in page headers.
- Consistency: keep naming and order consistent across the platform.
- Use plain language and common industry terms.

### Behavior

- Highlight the current section (and its parent if applicable) in the hierarchy.
- The side nav collapses and expands in response to different screen sizes.
### Stepper

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.stepper.overview"
  source="components/dist/registries/dskit.json#stepper"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"stepper"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/stepper/preview.png" alt="" />

## Overview

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Complete","Active","Default","State5"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7676-4492)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/stepper)
### Stepper

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.stepper.accessibility"
  source="components/dist/registries/dskit.json#stepper"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"stepper"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Stepper

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.stepper.code"
  source="components/dist/registries/dskit.json#stepper"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"stepper"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Stepper`.
### Stepper

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.stepper.content"
  source="components/dist/registries/dskit.json#stepper"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"stepper"} activeTab={"content"} />

## Content guidelines

A stepper guides users through a multi-step process in a defined sequence. Each step represents a discrete task that must be completed before moving to the next. Steppers are used in onboarding flows, connection setup, and wizards.

### When to use

- When a process has three or more distinct steps that must be completed in order.
- When it is important for users to understand their progress through a workflow.
- Do not use a stepper for simple two-step confirmations - use a [modal](/components/overlays/modal/) instead.

### Step titles

- Use short imperative verb phrases. For example, `Choose a data source`, `Configure settings`, `Review and create`.
- Do not include the step number in the title text - the stepper component displays that.
- Keep titles parallel in structure across all steps.

### Navigation buttons

- Use **Back** for the previous step button. Do not use **Previous**.
- Use **Next** for all intermediate steps.
- Use **Create** (or the appropriate object-specific verb) for the final step - not **Finish**, **Done**, or **Submit**.
- See the [Buttons](/components/action/button/) section for full stepper button terminology.

### Do / Don't

<DoDont pairs={[{ do: "Choose a data source", dont: "Step 1: Data source selection" }, { do: "Create (final step)", dont: "Finish / Done / Submit" }, { do: "Back", dont: "Previous" }]} />

Wizards are guided multi-step flows that walk users through complex setup or configuration tasks. They combine steppers, forms, and confirmation screens into a linear sequence with clear progression.

### When to use

- For complex setup tasks that cannot be completed on a single form - for example, creating a connection, configuring a pipeline, or onboarding a new dataset.
- When the steps have a natural sequence and later steps depend on earlier choices.
- Do not use a wizard for simple tasks that can be completed in a single form or modal.

### Step titles

- Short imperative verb phrases. For example, `Choose a connector`, `Set connection details`, `Test and save`.
- Parallel structure across all steps.
- Do not repeat the wizard title in each step title.

### In-step content

- Use a short paragraph at the top of each step to explain what the user is about to do and why.
- Keep explanatory text to two sentences maximum.
- Use inline help (popovers or helper text) for field-level guidance rather than long step-level explanations.

### Confirmation and summary step

- The final step before submission should present a summary of the user's choices.
- Label the summary step `Review` or `Review and create`.
- Use the same attribute labels as the preceding form fields - do not rephrase.
- Show an edit link next to each section so the user can go back and change specific settings.

### Navigation buttons

Follow the [stepper button terminology guidelines](/components/navigation/stepper/). Use **Back**, **Next**, and the appropriate object-specific verb for the final step (for example, **Create connection**).

### Do / Don't

<DoDont pairs={[{ do: "Choose a connector", dont: "Connector selection step" }, { do: "Review and create", dont: "Confirmation" }, { do: "Create connection", dont: "Finish / Submit / Done" }, { do: "Connect to your data source. This will allow the platform to read and write data on your behalf.", dont: "Please complete all required fields in this step before proceeding." }]} />
### Tabs

Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tabs.overview"
  source="components/dist/registries/dskit.json#tabs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tabs"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/tabs/preview.png" alt="" />

## Overview

Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the navigation region — typically a landmark role (nav/banner)"},{"name":"Items","description":"individual navigable entries; one is marked \"current\" when applicable"},{"name":"Item label","description":"short, scannable text; never sentence case"},{"name":"Item icon (optional)","description":"reinforces meaning at a glance; not a substitute for label"},{"name":"Active indicator","description":"visual treatment for the current item — underline, bar, fill, or background"},{"name":"Trigger (optional)","description":"opens a dropdown/menu for grouped or contextual items"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Property 1","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus transitions on items stay subtle — no large translation"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}},{"ref":{"ref":"anchor-motion","note":"dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14747-14818)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/tabs)
### Tabs

Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tabs.accessibility"
  source="components/dist/registries/dskit.json#tabs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tabs"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"arrow-key traversal between items; Tab moves to/from the navigation region"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"aria-guidance","note":"use aria-current=page on the active item; nav landmark on the container"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"feedback-errors"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Tabs

Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tabs.code"
  source="components/dist/registries/dskit.json#tabs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tabs"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Tabs`.
### Tabs

Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tabs.content"
  source="components/dist/registries/dskit.json#tabs"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"tabs"} activeTab={"content"} />

## Content guidelines

Tabs switch between related views on the same page without full navigation.

### When to use

- To switch between related views on the same page without full navigation.

### Style

- Tab labels are short nouns or noun phrases. For example, **Overview**, **Lineage**, **Settings**.
- Use sentence case.
- Avoid verbs in tab labels.
### Chat with AI Steward

Component documentation for Chat with AI Steward — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.chat-with-ai-steward.overview"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"size","values":["Default","Drawer"]},{"axis":"history","values":["Closed","Open"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15464-24509)
### Chat with AI Steward

Component documentation for Chat with AI Steward — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.chat-with-ai-steward.accessibility"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Chat with AI Steward

Component documentation for Chat with AI Steward — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.chat-with-ai-steward.code"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Chat with AI Steward`.
### Chat with AI Steward

Component documentation for Chat with AI Steward — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.chat-with-ai-steward.content"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"content"} />

<StubFooter category="overlays" />
### Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.overview"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/drawer-side-panel/preview.png" alt="" />

## Overview

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App","values":["Studio","Explorer"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14294-5758)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/drawer-side-panel)
### Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.accessibility"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.code"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Drawer, side panel`.
### Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.content"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"content"} />

## Content guidelines

Object preview panels display a summary of an asset's key attributes without requiring full navigation to the detail page. They appear as side panels or overlays and are used to support quick inspection workflows.

### When to use

- When a user hovers over or clicks an item in a list or search result and wants a quick view of its properties.
- To reduce context switching during browsing or review tasks.

### Style

- Panel title is the asset name. Use the exact name - do not rephrase.
- Use short attribute labels (one to two words) followed by their values.
- Group related attributes under a subheading where the panel is long.
- Include a **View full details** link at the bottom to navigate to the full detail page.

### Attribute label examples

<DoDont pairs={[{ do: "Owner", dont: "Assigned owner" }, { do: "Last modified", dont: "Date of last modification" }, { do: "Type", dont: "Object type" }, { do: "Description", dont: "Asset description" }]} />

Related content panels surface assets or resources connected to the currently viewed item. They help users discover relevant datasets, reports, lineage connections, or documentation without leaving their current context.

### When to use

- On asset detail pages to surface downstream or upstream dependencies.
- To show related documentation, reports, or catalog entries.
- Do not use related content panels for primary navigation - they are supplementary.

### Style

- Panel heading describes the relationship type. For example, `Related datasets`, `Used in reports`.
- Each item in the panel shows the asset name as a link, plus one or two metadata attributes (type, owner, or last modified).
- If the panel is empty, show a brief empty state message. For example, `No related datasets found`.

### Do / Don't

<DoDont pairs={[{ do: "Related datasets", dont: "Other items" }, { do: "No related datasets found.", dont: "(empty panel with no message)" }, { do: "Used in 3 reports", dont: "Reports: 3" }]} />
### Modal

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.modal.overview"
  source="components/dist/registries/dskit.json#modal"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"modal"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/modal/preview.png" alt="" />

## Overview

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size & Type","values":["700px setting","1200px","900px create","900px edit","700px create","450px warning","450px confirm"]},{"axis":"Dev status","values":["🟢 Ready"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14175-14426)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/modal)
### Modal

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.modal.accessibility"
  source="components/dist/registries/dskit.json#modal"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"modal"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### Modal

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.modal.code"
  source="components/dist/registries/dskit.json#modal"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"modal"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Modal`.
### Modal

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.modal.content"
  source="components/dist/registries/dskit.json#modal"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"modal"} activeTab={"content"} />

## Content guidelines

Modals interrupt the current flow to require the user's attention for a confirmation, input, or critical action. Use them sparingly - overuse degrades their impact.

### When to use

- To confirm destructive or irreversible actions. For full confirmation dialog patterns, see [confirmation](/components/feedback/empty-state/confirmation/).
- To collect a small amount of input before completing an action.
- Do not use modals for purely informational content - use inline messages or tooltips instead.

### Style

- Modal title should match the label of the button or link that triggered it.
- Keep body copy short and actionable. One to two sentences.
- Use a primary and secondary button pair. Align with the [button terminology guidelines](/components/action/button/).
- Do not nest modals.

### Do / Don't

<DoDont pairs={[{ do: "Title: Delete dataset", dont: "Title: OK" }, { do: "This will permanently delete the dataset and cannot be undone.", dont: "Are you sure you want to do this?" }, { do: "Primary CTA: Delete / Secondary CTA: Cancel", dont: "Primary CTA: Yes / Secondary CTA: No" }]} />
### ⛔️ Popover

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.popover.overview"
  source="components/dist/registries/dskit.json#popover"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"popover"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/popover/preview.png" alt="" />

## Overview

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Interaction guide","Advanced search"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14294-7345)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/popover)
### ⛔️ Popover

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.popover.accessibility"
  source="components/dist/registries/dskit.json#popover"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"popover"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ⛔️ Popover

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.popover.code"
  source="components/dist/registries/dskit.json#popover"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"popover"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#⛔️ Popover`.
### ⛔️ Popover

A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.popover.content"
  source="components/dist/registries/dskit.json#popover"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"popover"} activeTab={"content"} />

## Content guidelines

Popovers display richer contextual content than a tooltip. They appear on click and can contain formatted text, links, and actions. Use them when the information is too long or interactive for a tooltip.

### When to use

- To explain a concept or term inline, without leaving the current page.
- To show a small set of related actions in a compact overlay (also called an action popover).
- To provide definitions or help text for complex fields.
- Do not use popovers for critical error messages - use inline alerts or validation messages.

### Style

- Popover title: short noun phrase in sentence case. Optional but recommended for longer content.
- Body: plain prose, two to four sentences maximum.
- Avoid bullet lists inside popovers - keep content scannable through short sentences.
- Link text within a popover follows the same descriptive link text guidelines as inline links.

### Behavior

- Opens on click, closes on click outside or Escape.
- Do not open popovers on hover - use tooltips for hover-triggered content.
- Trap focus inside the popover while it is open for accessibility.

Object preview panels display a summary of an asset's key attributes without requiring full navigation to the detail page. They appear as side panels or overlays and are used to support quick inspection workflows.

### When to use

- When a user hovers over or clicks an item in a list or search result and wants a quick view of its properties.
- To reduce context switching during browsing or review tasks.

### Style

- Panel title is the asset name. Use the exact name - do not rephrase.
- Use short attribute labels (one to two words) followed by their values.
- Group related attributes under a subheading where the panel is long.
- Include a **View full details** link at the bottom to navigate to the full detail page.

### Attribute label examples

<DoDont pairs={[{ do: "Owner", dont: "Assigned owner" }, { do: "Last modified", dont: "Date of last modification" }, { do: "Type", dont: "Object type" }, { do: "Description", dont: "Asset description" }]} />
### ⚠️ Tooltip

Component documentation for ⚠️ Tooltip — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tooltip.overview"
  source="components/dist/registries/dskit.json#tooltip"
  schema={1}
/>

<ComponentTabs component={"tooltip"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Type","values":["Default"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7038-351)
### ⚠️ Tooltip

Component documentation for ⚠️ Tooltip — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tooltip.accessibility"
  source="components/dist/registries/dskit.json#tooltip"
  schema={1}
/>

<ComponentTabs component={"tooltip"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"aria-guidance","note":"dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"interactions","note":"Escape closes dismissible overlays; outside-click closes popovers but not modals"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"motion-media","note":"respect prefers-reduced-motion — disable scale + slide, keep fade"},"section":{"slug":"motion-media","title":"Motion & Media","wcag":[],"body_excerpt":"- Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.
### ⚠️ Tooltip

Component documentation for ⚠️ Tooltip — Code.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tooltip.code"
  source="components/dist/registries/dskit.json#tooltip"
  schema={1}
/>

<ComponentTabs component={"tooltip"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#⚠️ Tooltip`.
### ⚠️ Tooltip

Component documentation for ⚠️ Tooltip — Content.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.tooltip.content"
  source="components/dist/registries/dskit.json#tooltip"
  schema={1}
/>

<ComponentTabs component={"tooltip"} activeTab={"content"} />

<StubFooter category="overlays" />
## Accessibility

# Accessibility Guidelines — Actian Design System 2026

<!-- Source-of-truth doc. Hand-edited; not auto-generated. -->
<!-- The plugin vendors this file via vendor-snapshot.yml. -->
<!-- Edit here in volivarii/actian-ds-knowledge — never in the plugin's vendor/ tree. -->

Source: [Accessibility page](https://www.figma.com/design/l8biHxfarNi1I2RMvVxVOK?node-id=12685:19373)
Generated: 2026-03-26

---

> Accessibility ensures our products are usable by everyone. We aim to meet WCAG 2.2 AA standards across all experiences.
>
> **Resources:**
> - [WCAG 2.2 guidelines](https://www.w3.org/TR/WCAG22/)
> - [WebAIM Accessibility Guidelines](https://webaim.org/)
> - [Deque University Free Accessibility Courses](https://dequeuniversity.com/)
>
> **Focus on section:**
> - Text Alternatives (1.1) — Alt text for images, icons, and media.
> - Time-based Media (1.2) — Captions, transcripts, audio descriptions.
> - Adaptable / Distinguishable Content (1.3 & 1.4) — Color contrast, readable text, resizing, focus indicators.
> - Keyboard & Navigation (2.1, 2.4) — Keyboard operability, focus order, skip links.
> - Input & Interaction (2.2, 2.3) — Dragging alternatives, timing, animations.
> - Error Prevention & Feedback (3.3) — Forms, validation, error messages.

---

## WCAG Principles {#wcag-principles}

### WCAG 2.2 AA Principles

| Principle | Requirement |
|-----------|-------------|
| **Perceivable** | Users must be able to see or hear content (text, images, video) clearly |
| **Operable** | Users must be able to interact with all UI elements (keyboard, gestures) |
| **Understandable** | Content and interface must be predictable and readable |
| **Robust** | Content must work across browsers, assistive technologies, and future devices |

---

## Color & Contrast {#color-contrast}

| Check | Ratio |
|-------|-------|
| Body text (< 18pt) | **4.5:1** minimum |
| Large text (≥ 18pt or 14pt bold) | **3:1** minimum |
| UI components, icons, focus indicators | **3:1** minimum |

Rules:
- Use accessible color palettes and tokens — never hardcode
- Do not rely on color alone to convey meaning
- Provide secondary indicators (icons, text, patterns)

---

## Typography & Readability {#typography-readability}

- Default body text size is **14px**
- Minimum body text size is **12px**
- **11px** is only acceptable for non-essential UI
- Use defined type styles (avoid light weight)
- Maintain readable line height and spacing
- Text line length is **544px** at max with 16px text
- Text line length is **480px** at max with 14px text
- Text line length is **424px** at max with 12px text
- Avoid placeholder-only labels
- Avoid long blocks of dense text
- Text must be resizable up to 200% without loss of content
- Paragraph width: 60–75 characters max for readability

---

## Layout & Responsiveness {#layout-responsiveness}

- Content reflows at **400% zoom**
- No horizontal scrolling for text content
- Logical reading and focus order preserved
- Touch targets: **44px ideal / 24px minimum** with sufficient spacing (WCAG 2.5.8)
- No content clipped or hidden at 200% zoom

---

## Keyboard & Focus {#keyboard-focus}

### Keyboard

- All interactive elements are keyboard accessible
- No keyboard traps
- Logical focus order

### Key Rules

- Use `Tab` for forward and `Shift+Tab` for backward
- Only focusable items that are visually visible should be in the tab order
- Use `Enter` or `Space` to trigger links and expand/collapse buttons
- Support `Enter` or `Space` to activate links and toggles
- `Esc` should close open sub-menus or an expanded sidebar

### Focus

- Focus styles must be visible
- Focus must not be obscured by sticky UI
- Never remove focus outlines without replacement
- Focus indicator: **2px solid `--zen-color-interactive-focused-stroke-default`** (#000000), never suppressed
- `:focus-visible` must always be styled — never use `outline: none` without a replacement

---

## Interactions {#interactions}

- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging).
- Avoid time limits. Provide extensions if needed.
- Tooltips must be accessible also by keyboard.

---

## Required States {#required-states}

Every interactive component must have these states designed:

| State | Requirement |
|-------|-------------|
| **Default** | Base visual appearance |
| **Hover** | Visual change on mouse hover |
| **Focus** | Visible focus indicator (keyboard) — never remove |
| **Active/Pressed** | Visual feedback during click/tap |
| **Disabled** | Visually distinct, `aria-disabled="true"` preferred over HTML `disabled` |
| **Error / Success** | For form elements — error message + visual indicator |

---

## Feedback & Errors {#feedback-errors}

- **Explain what happened** and **how to fix it**
- Error messages appear **near the field** they relate to
- Use `aria-live="polite"` for non-critical status updates
- Use `aria-live="assertive"` only for critical, time-sensitive errors
- Status changes must not rely on color alone — include icon + text
- Toasts/alerts auto-dismiss: minimum **5 seconds** display time

---

## Forms & Data Entry {#forms-data-entry}

- Labels are **always visible** (no placeholder-only labels)
- Required vs optional is **clearly indicated** (asterisk `*` for required)
- Errors appear **near the field** with explanation
- Inline validation is helpful, not disruptive
- Timeouts include **warnings and recovery options**
- Group related fields with `fieldset`/`legend`
- Logical tab order follows visual layout

---

## Motion & Media {#motion-media}

- Motion is never the only feedback
- Reduce motion or provide toggle for sensitive users
- Avoid auto-play without controls
- Keep animations subtle and purposeful

---

## Component-Specific Checklists {#component-specific-checklists}

### P0 Critical: Function & Infrastructure

> Critical items are the structural essentials. If Navigation, Forms, or Buttons fail, the user is physically blocked. These are the paths and entry points required to actually use the product.
>
> - **Navigation:** Defines the entire site structure and landmarks.
> - **Forms (Patterns & Inputs):** The primary way users provide data.
> - **Modals:** High risk for focus traps and keyboard locking.
> - **Buttons:** The primary triggers for all actions.

---

#### Button

> Buttons translate user intent into system action. If buttons fail (are unclear or broken), the workflow hits a dead end, leaving users physically unable to complete tasks.

**Accessibility checklist**

Button semantics
- [ ] Uses a native button element or proper button role
- [ ] Name clearly describes the action (verb-based)

Keyboard interaction
- [ ] Focusable via Tab
- [ ] Activated with Enter and Space
- [ ] Disabled buttons are not focusable

Target size
- [ ] Recommended: 44x44 px minimum
- [ ] Absolute minimum: 24x24 px with sufficient spacing
- [ ] Hit area is not reduced by visual styling

States
- [ ] Default, hover, focus, active, disabled states are defined
- [ ] Loading state prevents duplicate activation
- [ ] Disabled state is visually and programmatically disabled

Icon-only buttons
- [ ] Has an accessible name (e.g. aria-label)
- [ ] Purpose is understandable without visual context

Toggle buttons
- [ ] Toggle state is programmatically exposed
- [ ] State change is perceivable without color alone

Screen reader expectations
- [ ] Announced as "button" with a clear name
- [ ] Loading or state changes are announced when relevant
- [ ] Toggle buttons announce current state (pressed / not pressed)

Do not
- [ ] Do not use links for actions
- [ ] Do not rely on hover only
- [ ] Do not remove focus styles

**WCAG criteria:** 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 3.3.2 Labels or Instructions, 4.1.2 Name Role Value, 1.4.1 Use of Color, 2.5.5 Target Size (2.2)

---

#### Navigation (header, sidebar, breadcrumbs)

> Navigation patterns define the structural map of your product. If navigation fails, users feel disoriented and abandon the application because they literally cannot find the features they need to do their job.

**Accessibility checklist**

General Navigation
- [ ] Landmark roles are used correctly (`<nav>`, `<header>`, `<main>`, `<footer>`)
- [ ] Multiple navigation blocks on a page have unique labels (e.g., `aria-label="Main"` vs `aria-label="Breadcrumb"`)
- [ ] "Skip to main content" link is available and becomes visible on focus
- [ ] The current page is visually and programmatically identified (e.g., `aria-current="page"`)

Header & Main Menu
- [ ] Navigation links have a minimum target size of 44x44px (or 24px with spacing)
- [ ] Dropdown menus are operable via keyboard (Space/Enter to open, Arrow keys to navigate)
- [ ] Menu triggers clearly indicate their state (e.g., `aria-expanded="true/false"`)
- [ ] Sub-menus can be dismissed with the Esc key

Sidebar
- [ ] Sidebar can be collapsed/expanded, and the state is programmatically exposed
- [ ] When collapsed to an icon-only view, tooltips or accessible names are provided
- [ ] On mobile/narrow viewports, the sidebar behaves like a Modal (Focus trap/Esc to close)
- [ ] Active parent categories are clearly distinguished from active child items

Breadcrumbs
- [ ] Breadcrumbs are wrapped in a `<nav>` element with a label (e.g., `aria-label="Breadcrumb"`)
- [ ] Breadcrumbs are structured as an ordered list (`<ol>`)
- [ ] The last item (current page) is not a clickable link and uses `aria-current="page"`
- [ ] Separators (like `/` or `>`) are hidden from screen readers using `aria-hidden="true"` or CSS

Do not
- [ ] Do not rely on hover alone to reveal sub-navigation (must work on click/focus)
- [ ] Do not use "hamburger" menus on desktop if space allows for visible links
- [ ] Do not lose the user's focus when a navigation item disappears (e.g., when closing a drawer)

**WCAG criteria:** 1.3.1 Info and Relationships, 2.1.1 Keyboard, 2.4.1 Bypass Blocks, 2.4.3 Focus Order, 2.4.4 Link Purpose (In Context), 3.2.3 Consistent Navigation, 4.1.2 Name Role Value

---

#### Forms

> Forms serve as the primary bridge for data collection. If forms fail (poor validation or labels), users experience high friction and error rates, resulting in abandoned processes and lost data.

**Accessibility checklist**

Structure and Flow
- [ ] Logical tab order follows the visual layout
- [ ] Related fields are grouped together (using fieldsets/legends)
- [ ] Form does not have a strict time limit (or provides an extension)
- [ ] Multi-step forms have a progress indicator

Labels and Instructions
- [ ] Every input has a permanent, visible label (not just placeholder text)
- [ ] Instructions or formatting hints are programmatically linked to inputs
- [ ] Required fields are clearly identified via text and `aria-required`
- [ ] Form level instructions are provided at the start, not the end

Touch and Interaction
- [ ] Proximity between label and input is close enough for low-vision users
- [ ] Inputs have a minimum height/width (standard: 44px) for easy tapping
- [ ] Clicking a label places focus into the corresponding input field

Error Handling
- [ ] Errors are identified in text, not just by color changes
- [ ] Error messages are programmatically linked to the input (using `aria-describedby`)
- [ ] Error messages provide specific suggestions on how to fix the issue
- [ ] Focus is moved to the error summary or the first invalid field upon submission

Submission and Feedback
- [ ] Submit button is clearly labeled and easy to find
- [ ] Success messages are announced by screen readers (using `aria-live`)
- [ ] Confirmations are provided before irreversible "destructive" actions

Do not
- [ ] Do not use placeholder text as a replacement for labels
- [ ] Do not automatically move focus (auto-tab) once a field is completed
- [ ] Do not use "Reset" or "Clear Form" buttons (they are high-risk for accidental deletion)

**WCAG criteria:** 1.3.1 Info and Relationships, 1.3.5 Identify Input Purpose, 2.1.1 Keyboard, 2.4.3 Focus Order, 3.3.1 Error Identification, 3.3.2 Labels or Instructions, 3.3.3 Error Suggestion, 4.1.2 Name Role Value

---

#### Modal

> Modals demand immediate attention by interrupting the workflow. If modals fail (e.g., keyboard traps), users become physically stuck in the layer and cannot return to the main content to finish their work.

**Accessibility checklist**

Structure and Flow
- [ ] Logical tab order follows the visual layout
- [ ] Related fields are grouped together (using fieldsets/legends)
- [ ] Form does not have a strict time limit (or provides an extension)
- [ ] Multi-step forms have a progress indicator

Labels and Instructions
- [ ] Every input has a permanent, visible label
- [ ] Instructions or formatting hints are programmatically linked to inputs
- [ ] Required fields are identified via text and `aria-required`
- [ ] Form-level instructions are provided at the start of the flow

Touch and Interaction
- [ ] Touch targets are at least 44x44px (or 24px with sufficient spacing)
- [ ] Proximity between label and input is close for low-vision users
- [ ] Clicking a label places focus into the corresponding input field

Error Handling
- [ ] Errors are identified in text, not just by color changes
- [ ] Error messages are programmatically linked to the input via `aria-describedby`
- [ ] Error messages provide specific suggestions on how to fix the issue
- [ ] Focus is moved to the error summary or first invalid field upon submission

Do not
- [ ] Do not use placeholder text as a replacement for labels
- [ ] Do not automatically move focus (auto-tab) once a field is completed
- [ ] Do not use "Reset" or "Clear Form" buttons

**WCAG criteria:** 1.3.1 Info and Relationships, 1.3.5 Identify Input Purpose, 2.1.1 Keyboard, 2.4.3 Focus Order, 2.5.8 Target Size (Minimum), 3.3.1 Error Identification, 3.3.2 Labels or Instructions, 3.3.3 Error Suggestion, 4.1.2 Name Role Value

---

### P1 High Impact: Communication

> High Impact items act as the system's voice. They provide necessary feedback and organization so the user knows what is happening. Without them, the user feels lost, ignored, or confused.
>
> - **Alerts, Banners & Toasts:** Essential for error recovery and status updates.
> - **Dropdowns, Menus & Popovers:** Complex interaction layers.
> - **Data Tables:** Critical for information-heavy applications.
> - **Loading & Empty States:** Provides necessary system feedback.

---

#### Alerts, Toasts, Banners

> Feedback mechanisms communicate the outcome of interactions. If feedback fails, users are left guessing if their action worked, leading to repeated clicks, anxiety, and mistrust in the system.

**Accessibility checklist**

General Messaging
- [ ] Messages use appropriate color contrast for text and icons
- [ ] Icons used to indicate status (Error, Success, Warning) have text alternatives
- [ ] Importance of the message is conveyed through text, not just color
- [ ] Critical alerts are placed where they are visually and programmatically easy to find

Global Banners (In-page)
- [ ] Banners are placed at the top of the page or section they relate to
- [ ] Banners are programmatically identified using `role="region"` or `role="status"`
- [ ] If the banner is a "System Alert" (e.g., "Site maintenance in 10 mins"), it uses `role="alert"`
- [ ] Persistent banners include a clear "Dismiss" button if they can be closed

Toasts
- [ ] Toasts use `role="status"` (polite) for non-critical feedback (e.g., "Settings saved")
- [ ] Toasts do not contain critical actions (links/buttons) as they disappear too fast
- [ ] Display time is sufficient for users to read (minimum 5-10 seconds)
- [ ] Users can disable or extend the duration of auto-expiring messages
- [ ] Toasts do not block interaction with the rest of the page

Inline Alerts
- [ ] Alerts are placed in close proximity to the related content (e.g., near the Submit button)
- [ ] Dynamic alerts (appearing after an action) use `aria-live` to be announced immediately
- [ ] Alert remains visible until the user resolves the issue or dismisses it

Do not
- [ ] Do not use auto-dismissing toasts for critical errors or information
- [ ] Do not use "Assertive" live regions for non-urgent updates (it interrupts the screen reader mid-sentence)
- [ ] Do not put focusable elements (like links) inside a toast that auto-dismisses

**WCAG criteria:** 1.3.1 Info and Relationships, 1.4.1 Use of Color, 2.2.1 Timing Adjustable, 3.3.1 Error Identification, 4.1.2 Name Role Value, 4.1.3 Status Messages

---

#### Dropdowns, Menus, and Popovers

> Dropdowns manage screen real estate by collapsing options. If dropdowns fail, essential features remain hidden or become impossible to reach for users relying on keyboards.

**Accessibility checklist**

Triggers & States
- [ ] Trigger clearly indicates its state via `aria-expanded="true/false"`
- [ ] The relationship between the trigger and the container is linked via `aria-controls` or `aria-owns`
- [ ] Focus is visible on the trigger when active
- [ ] If the menu contains a list of choices, the trigger has `aria-haspopup="menu"` (or `"listbox"` for selects)

Keyboard interaction
- [ ] Open: Space or Enter opens the menu
- [ ] Close: Esc key closes the menu and returns focus to the trigger
- [ ] Navigation: Arrow keys move focus between items within the menu
- [ ] Dismissal: Clicking outside the container or moving focus away closes the popover

Popovers & Tooltips
- [ ] Popovers do not open on hover alone (must be triggerable by click or focus)
- [ ] Content remains visible and "hoverable" so users can move their mouse over the popover without it disappearing
- [ ] Tooltips that appear on focus are dismissible via Esc without moving focus

Screen reader expectations
- [ ] Menu items are identified as a list or group
- [ ] Current selection is programmatically identified (e.g., `aria-selected="true"`)
- [ ] Disabled items are announced as disabled and are not focusable

Do not
- [ ] Do not use "Auto-tab" or move focus automatically when a selection is made
- [ ] Do not hide important information inside a hover-only tooltip
- [ ] Do not allow the popover to be cut off by the browser edge (ensuring visibility for zoomed-in users)

**WCAG criteria:** 1.3.1 Info and Relationships, 1.4.13 Content on Hover or Focus, 2.1.1 Keyboard, 2.4.3 Focus Order, 3.2.1 On Focus, 4.1.2 Name Role Value

---

#### Data Tables

> Data tables organize high-density information for scanning. If tables fail, complex data becomes an unreadable wall of text, preventing users from comparing values or making informed decisions.

**Accessibility checklist**

Structure & Semantics
- [ ] Proper table markup is used (`<table>`, `<thead>`, `<tbody>`, `<tr>`)
- [ ] Header cells are defined using `<th>` and data cells using `<td>`
- [ ] Header cells use the `scope` attribute (`col` or `row`) to define their direction
- [ ] Complex tables with multiple levels of headers use `id` and `headers` attributes
- [ ] A `<caption>` is provided to describe the table's content and purpose

Keyboard Interaction
- [ ] Sortable Headers: Sorting triggers are keyboard-focusable and clearly labeled
- [ ] Interactive Elements: Buttons or links within cells are reachable via Tab
- [ ] Scrollable Containers: If the table overflows horizontally, the container is keyboard-focusable so it can be scrolled

Screen Reader Expectations
- [ ] Sorting state is announced (e.g., `aria-sort="ascending"`)
- [ ] Row and column counts are accurate and announced
- [ ] Hidden or decorative elements within cells are hidden from assistive technology
- [ ] If the table is empty, a clear message is provided within a table row or as a replacement state

Visual Design
- [ ] Text within cells meets contrast requirements (4.5:1)
- [ ] Row highlights (on hover or focus) assist with horizontal tracking
- [ ] Alignment is consistent (e.g., numeric data is right-aligned) to aid readability

Do not
- [ ] Do not use tables for layout purposes; only use them for tabular data
- [ ] Do not use images of tables; use real text and markup
- [ ] Do not nest tables within tables whenever possible

**WCAG criteria:** 1.3.1 Info and Relationships, 1.3.2 Meaningful Sequence, 2.1.1 Keyboard, 2.4.3 Focus Order, 4.1.2 Name Role Value

---

#### Loading Patterns (Table)

> Table loading patterns dictate how users navigate large datasets. If these fail, users lose their context or become trapped in scroll loops, physically preventing them from reaching the data.

**Accessibility checklist**

Pagination
- [ ] Provides a clear "Page X of Y" text indicator
- [ ] "Previous" and "Next" buttons have clear labels and are disabled when at the start/end
- [ ] The current page is programmatically identified using `aria-current="page"`
- [ ] Focus is moved to the top of the table (or the table caption) after a page change
- [ ] Navigation links are wrapped in a `<nav>` element with an `aria-label="Pagination"`

Load More
- [ ] The "Load More" button is located immediately after the table
- [ ] New rows are appended to the existing table structure, not replacing it
- [ ] Focus remains on the "Load More" button after clicking to allow for consecutive loading
- [ ] A status message announces the result of the load (e.g., "10 more rows added, 50 total")
- [ ] A loading indicator appears within or near the button while the request is in progress

Infinite Scroll (Table)
- [ ] Keyboard Fallback: A manual "Load More" button or pagination is provided for keyboard users
- [ ] Screen readers are notified when new content is added via an `aria-live` region
- [ ] Users can still access the page footer via keyboard without being "trapped" by infinite loading
- [ ] A "Back to Top" link is provided if the table becomes exceptionally long

Do not
- [ ] Do not use infinite scroll as the only way to access data for keyboard users
- [ ] Do not lose the user's focus or scroll position when new data is injected
- [ ] Do not use pagination for very small datasets (usually under 25 items)

**WCAG criteria:** 1.3.1 Info and Relationships, 2.1.1 Keyboard, 2.4.3 Focus Order, 3.2.3 Consistent Navigation, 4.1.2 Name Role Value, 4.1.3 Status Messages

---

#### Loading Patterns (Feedback/content)

> Loading patterns communicate system status and manage perceived wait times. If these indicators fail, users assume the application is frozen, leading to frustration, "rage clicks," or abandonment.

**Accessibility checklist**

Visual & Interaction
- [ ] Loading indicators are visible and not obscured by other UI elements
- [ ] Content does not "jump" unexpectedly when loading is complete (use skeleton screens for layout stability)
- [ ] Interactive elements (buttons, inputs) are disabled during critical loading to prevent duplicate actions
- [ ] For long waits (over 10 seconds), a progress bar with a percentage is provided instead of an infinite spinner
- [ ] Focus is maintained and not lost if a loading state replaces the current content

Screen Reader Expectations
- [ ] Live Regions: Use `aria-busy="true"` on the container currently loading
- [ ] Status updates use `aria-live="polite"` to announce "Loading..." or "Processing..."
- [ ] When loading is finished, `aria-busy` is set to false and the new content is announced
- [ ] Spinners or loaders have an accessible label (e.g., `aria-label="Fetching data"`)

Motion
- [ ] Animation respects the `prefers-reduced-motion` media query (slow down or stop rotation)
- [ ] Loading animations do not flash more than three times per second

Do not
- [ ] Do not use `aria-live="assertive"` for standard loading as it interrupts current screen reader speech
- [ ] Do not leave the user in an "infinite" loading state without a timeout or error message
- [ ] Do not use color alone to indicate that a process is complete

**WCAG criteria:** 1.3.1 Info and Relationships, 2.2.1 Timing Adjustable, 2.2.2 Pause Stop Hide, 2.3.1 Three Flashes or Below Threshold, 4.1.2 Name Role Value, 4.1.3 Status Messages

---

#### Empty States

> Empty states turn a "zero-data" moment into an onboarding opportunity. If empty states fail (showing just a blank page), users face a dead end with no clue how to initiate the first step.

**Accessibility checklist**

Content & Context
- [ ] Clear heading describes why the area is empty (e.g., "No results found")
- [ ] Helpful body text provides a next step or explanation
- [ ] Primary action button is clearly labeled and follows Button guidelines
- [ ] Informational images or illustrations are hidden from screen readers (`alt=""` or `aria-hidden="true"`)

Focus & Navigation
- [ ] Focus is managed logically if the empty state appears dynamically (e.g., after a search)
- [ ] Empty state is contained within the appropriate landmark (e.g., inside the `<main>` or a specific `<section>`)
- [ ] Non-interactive "placeholder" graphics are not focusable

Screen reader expectations
- [ ] The change from "loading" or "populated" to "empty" is announced if it happens dynamically
- [ ] Heading levels follow the page hierarchy (usually an `<h3>` or `<h4>`)
- [ ] If the empty state is a result of a filter, the status is announced (e.g., "0 items match your filters")

Do not
- [ ] Do not use "cute" or vague copy that fails to explain the state (e.g., "Oops, nothing here!")
- [ ] Do not use images to convey the only "Empty" message without a text fallback
- [ ] Do not leave the user with no "path back" (always provide a reset or "Go home" action)

**WCAG criteria:** 1.1.1 Non-text Content, 1.3.1 Info and Relationships, 2.4.3 Focus Order, 2.4.6 Headings and Labels, 4.1.3 Status Messages

---

### P2 Medium Impact: Refinement

> Medium Impact items are the "quality of life" features. They manage space and provide extra utility to make the UI feel intuitive. They don't stop the work, but they make it feel significantly faster and more efficient.
>
> - **Tabs:** Organizes content within a page.
> - **Icons:** Visual support for meaning.
> - **Tooltips, Truncation & Overflow:** Handles space constraints.
> - **Drag & Drop:** Usually has a simpler alternative interaction.
> - **AI Output:** Highly specific to modern generative features.

---

#### Tabs

> Tabs organize content into logical, parallel views. If tabs fail, users miss critical content hidden in other panels or lose context of where they are in the hierarchy.

**Accessibility checklist**

Structure & Relationships
- [ ] The tab container is identified with `role="tablist"`
- [ ] Each tab trigger has `role="tab"` and is contained within the tablist
- [ ] Each content panel has `role="tabpanel"`
- [ ] Tabs are programmatically linked to their panels via `aria-controls`
- [ ] The active tab is identified using `aria-selected="true"`

Keyboard Interaction
- [ ] Tab key: Moves focus into the tablist (to the active tab) and then out to the active panel
- [ ] Arrow keys: Left/Right (or Up/Down) moves focus between the tabs in the list
- [ ] Home/End: Moves focus to the first and last tab respectively
- [ ] Space/Enter: Activates the focused tab (if not using automatic activation)

Visual Design
- [ ] The active tab has a clear visual distinction (not just color)
- [ ] The focus indicator is highly visible on the tab triggers
- [ ] Layout remains functional and readable when text is resized or zoomed

Do not
- [ ] Do not nest tab sets inside other tab sets
- [ ] Do not use tabs for primary page navigation (use a Navigation pattern instead)
- [ ] Do not force the user to "Tab" through every single tab in the list to reach the content panel (use Arrow keys for list navigation)

**WCAG criteria:** 1.3.1 Info and Relationships, 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 4.1.2 Name Role Value

---

#### Icons

> Icons provide a universal visual shorthand. If icons fail (are ambiguous or lack labels), users are forced to guess the function, increasing cognitive load and error rates.

**Accessibility checklist**

Decorative Icons
- [ ] Icons that repeat a visible text label are hidden using `aria-hidden="true"`
- [ ] SVGs used for decoration include `focusable="false"` to prevent IE/Edge focus bugs
- [ ] Purely aesthetic icons (like background flourishes) are ignored by screen readers

Functional & Informational Icons
- [ ] Icon-only buttons (e.g., a "trash can" icon) have a clear `aria-label` or title
- [ ] Icons that convey status (e.g., an "Error" exclamation mark) have a text alternative
- [ ] Interactive icons meet the minimum touch target of 44x44px (or 24px with spacing)
- [ ] Standalone icons have a `<title>` element inside the SVG linked via `aria-labelledby`

Visual Design
- [ ] Icons meet color contrast requirements (3:1 for graphical objects)
- [ ] Icons remain sharp and legible when the interface is zoomed to 400%
- [ ] Meaning is not conveyed by color alone (e.g., a "Success" checkmark is distinct from an "Error" X by shape)

Do not
- [ ] Do not use alt text for icons that are already described by adjacent text
- [ ] Do not use complex icons that lose meaning when scaled down
- [ ] Do not leave SVGs "naked" without roles or labels if they are interactive

**WCAG criteria:** 1.1.1 Non-text Content, 1.4.1 Use of Color, 1.4.11 Non-text Contrast, 2.1.1 Keyboard, 4.1.2 Name Role Value

---

#### Tooltips

> Tooltips deliver contextual assistance on demand. If tooltips fail (don't trigger or won't dismiss), they either obscure content or leave users confused about complex terminology.

**Accessibility checklist**

Trigger & Display
- [ ] Tooltips appear on both hover and focus.
- [ ] Tooltips are dismissible: The user can close the tooltip (e.g., via Esc key) without moving focus or hover.
- [ ] Tooltips are hoverable: The user can move the mouse pointer over the tooltip content without it disappearing.
- [ ] Tooltips are persistent: The content remains visible until the hover/focus is removed or the user dismisses it.
- [ ] No critical information is hidden exclusively inside a tooltip.

Screen Reader Expectations
- [ ] The tooltip text is programmatically linked to the trigger using `aria-describedby`.
- [ ] For icon-only buttons, the tooltip provides the `aria-label` or name (using `aria-labelledby`).

Do not
- [ ] Do not use tooltips for interactive content (links, buttons) as they are hard to access for some users.
- [ ] Do not add a delay before the tooltip appears for keyboard users.

**WCAG criteria:** 1.3.1 Info and Relationships, 1.4.4 Resize Text, 1.4.10 Reflow, 1.4.13 Content on Hover or Focus, 2.1.1 Keyboard, 4.1.2 Name Role Value

---

#### Text Truncation & Overflow

> Truncation manages variable content length within fixed layouts. If truncation fails (without a "show more" option), vital information is cut off and permanently lost to the user.

**Accessibility checklist**

Visual & Interaction
- [ ] Truncated text (using ellipses `...`) provides a way to see the full content (e.g., via a tooltip or expanding the container).
- [ ] If truncation occurs on a link or button, the accessible name still contains the full, un-truncated text.
- [ ] Text is not cut off in a way that changes its meaning (e.g., "$1,000" becoming "$1...").

Responsive Behavior
- [ ] Layout containers allow for text reflow without loss of content or functionality at up to 400% zoom.
- [ ] Containers do not have a fixed height that causes text to overflow and overlap other elements.

Horizontal Overflow
- [ ] If a region (like a code block or table) must scroll horizontally, the scrollable area is keyboard focusable (`tabindex="0"`).
- [ ] Focusable scroll areas have a descriptive label (e.g., `aria-label="Code snippet scrollable region"`).

Do not
- [ ] Do not use `text-overflow: ellipsis` on critical instructional text or headings without a "view more" option.
- [ ] Do not rely on "Title" attributes as the only way to see truncated text (they are not accessible to mobile or keyboard-only users).

**WCAG criteria:** 1.3.1 Info and Relationships, 1.4.4 Resize Text, 1.4.10 Reflow, 1.4.13 Content on Hover or Focus, 2.1.1 Keyboard, 4.1.2 Name Role Value

---

#### Drag & Drop

> Drag and drop mimics physical object manipulation. If this interaction fails (lacking a click-based alternative), users with motor impairments are completely blocked from organizing or moving items.

**Accessibility checklist**

Keyboard Interaction
- [ ] Alternative Input: A keyboard-equivalent (e.g., an "Action" menu or "Move up/down" buttons) is provided
- [ ] Initiation: Focusable handles or items can be "picked up" using Space or Enter
- [ ] Navigation: Arrow keys move the item between valid drop targets
- [ ] Confirmation: Space or Enter drops the item in the new location
- [ ] Cancellation: Esc cancels the move and returns the item to its original position

Screen Reader Expectations
- [ ] State is announced when an item is "Grabbed," "Moved," "Dropped," or "Canceled"
- [ ] Live Regions: An `aria-live` region announces the current position and available drop targets
- [ ] Help Text: Clear instructions are provided before the interaction (e.g., "Use arrow keys to reorder")
- [ ] Grabbed state is programmatically exposed using `aria-grabbed` or `aria-current="true"`

Visual Affordance
- [ ] Drag handles have a minimum touch target of 44x44px
- [ ] Clear visual feedback indicates which item is currently being moved
- [ ] Valid drop zones are visually highlighted during the "drag" state
- [ ] The cursor changes to a "grabbing" hand or appropriate directional icon

Do not
- [ ] Do not rely solely on mouse movements to reorder or move items
- [ ] Do not hide the "Move" actions inside a hover-only state
- [ ] Do not trigger the move automatically without a confirmation keypress

**WCAG criteria:** 1.3.1 Info and Relationships, 2.1.1 Keyboard, 2.1.3 Keyboard (No Exception), 2.5.2 Pointer Cancellation, 2.5.7 Dragging Movements (WCAG 2.2), 4.1.2 Name Role Value, 4.1.3 Status Messages

---

#### AI Output & Suggestions

**Accessibility checklist**

Transparency & Identification
- [ ] AI-generated content is visually and programmatically identified (e.g., using a "Sparkle" icon with an `aria-label="Generated by AI"`)
- [ ] Suggestions are clearly distinguished from primary page content
- [ ] Confidence scores or "Source" links are provided to allow users to verify information
- [ ] A disclaimer regarding AI accuracy is provided and easily discoverable

Interaction & Controls
- [ ] AI suggestions (like autocomplete or smart replies) are reachable and dismissible via keyboard
- [ ] Users can easily "Accept," "Regenerate," or "Discard" AI outputs
- [ ] Feedback mechanisms (Thumbs up/down) have clear accessible names
- [ ] Stop/Cancel buttons are available for long-running generative tasks

Screen Reader Expectations
- [ ] New AI output is announced via `aria-live="polite"` so users know when generation is complete
- [ ] Typing/streaming animations (like "AI is thinking...") use `aria-busy="true"` and are announced to screen readers
- [ ] Suggested text in inputs (ghost text) is not announced as part of the current value until accepted
- [ ] Large blocks of AI text use proper heading structures to allow for easy skimming

Motion & Loading
- [ ] Streaming text (typewriter effect) respects `prefers-reduced-motion` and can be disabled
- [ ] "Thinking" animations do not use high-frequency flashes

Do not
- [ ] Do not automatically inject AI content into the user's focus path without warning
- [ ] Do not rely on color-only gradients (like "AI purple") to signal that content is generated
- [ ] Do not make AI suggestions mandatory; users must be able to bypass them to complete a task

**WCAG criteria:** 1.3.1 Info and Relationships, 1.4.1 Use of Color, 2.1.1 Keyboard, 2.2.2 Pause Stop Hide, 4.1.2 Name Role Value, 4.1.3 Status Messages

---

## ARIA Guidance {#aria-guidance}

### Accessible Names (Labeling)

- [ ] Visible Labels: Every interactive element has a visible text label.
- [ ] Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels).
- [ ] The 1:1 Rule: The `aria-label` or accessible name must contain the visible text of the element.
- [ ] Contextual Clarity: Labels like "Click here" or "View" are replaced with descriptive text (e.g., "View order history").

### ARIA Usage

- [ ] First Rule of ARIA: If you can use a native HTML element (like `<button>` or `<nav>`), use it instead of ARIA roles.
- [ ] Role Accuracy: Elements have the correct role for their behavior (e.g., `role="dialog"` for modals).
- [ ] State Indicators: Dynamic states use properties like `aria-expanded`, `aria-selected`, or `aria-checked`.
- [ ] Relation Linking: Use `aria-labelledby` for names and `aria-describedby` for supplementary info or error messages.

### Live Regions

- [ ] Dynamic Updates: Use `aria-live` for content that updates without a page refresh.
- [ ] Polite vs. Assertive: Use `polite` by default; use `assertive` only for critical, time-sensitive errors.

### Landmark Roles

- Use `<nav>`, `<header>`, `<main>`, `<footer>` for page landmarks
- Multiple navigation blocks have **unique labels** (`aria-label="Main navigation"`)

---

## General Checklist {#general-checklist}

> Use this before design handoff or review.

### Color & Contrast
- [ ] Meets contrast requirements (4.5:1 for body text, 3:1 for UI components)
- [ ] Color is not the only indicator

### Typography & Readability
- [ ] Minimum body text size is 12px
- [ ] Avoid a too long paragraph width (60-75 characters)

### Layout & Responsiveness
- [ ] Works at 200-400% zoom
- [ ] No horizontal scrolling for text
- [ ] Touch targets are large enough

### Keyboard & Focus
- [ ] All interactions work via keyboard
- [ ] Focus order is logical
- [ ] Focus is visible and not removed

### Screen Reader
- [ ] Clear accessible name (label, aria-label, or text)
- [ ] State changes are announced (loading, error, success)
- [ ] Relationship to trigger/content is clear

### States & Feedback
- [ ] All states are designed (hover, focus, error, disabled)
- [ ] Loading, empty, error states are accessible
- [ ] Disabled state is distinguishable from enabled
- [ ] Status changes aren't color-only

### Forms & Errors
- [ ] All fields have visible labels
- [ ] Errors explain what happened and how to fix
- [ ] Required vs optional is clear

### Motion
- [ ] Motion isn't required to understand content
- [ ] Reduced motion is respected

---

## Additional Rules (hand-authored) {#additional-rules}

The following items were present in the hand-authored guidelines and supplement the JSON source.

### Key Bindings by Component (quick reference)

| Component | Keys |
|-----------|------|
| Button | `Tab` to focus, `Enter` or `Space` to activate |
| Link | `Tab` to focus, `Enter` to activate |
| Dropdown/Select | `Tab` to focus, `Space`/`Enter` to open, `Arrow` to navigate, `Escape` to close |
| Modal | `Tab` cycles within modal (focus trap), `Escape` to close |
| Tabs | `Tab` to tab list, `Arrow Left/Right` to switch tabs |
| Menu | `Enter`/`Space` to open, `Arrow` to navigate, `Escape` to close |
| Data table | `Tab` between interactive cells, `Arrow` for cell navigation |

### Token References for Typography

- Default body text size: **14px** (`--zen-font-body-standard`)
- Minimum body text size: **12px** (`--zen-font-body-subtle`)
- **11px** only acceptable for non-essential UI (`--zen-font-body-micro`)

### Disabled State Guidance

- `aria-disabled="true"` preferred over HTML `disabled` attribute
- Disabled elements are exempt from contrast requirements but must be visually distinguishable

### Focus Indicator Token

- Focus indicator: **2px solid `--zen-color-interactive-focused-stroke-default`** (#000000)

## Content guidelines

# Content guidelines — global topics

> **Auto-generated** by `scripts/content/derive-content.js`. Do not edit this file directly — edit the per-section source files.
>
> **Scope:** cross-cutting writing guidance (voice, tone, capitalization, words to avoid) and UX-pattern topics. Component-scoped content guidance lives per-component in `components/dist/guidelines/{slug}.json` instead.
> **Sources** (24 sections): `content/src/{bucket}/{slug}.md` where bucket is one of writing, patterns, product (plus `global-guidelines.md` at the root).
> **Authoring guide:** `content/src/AUTHORING.md`

---

## Global guidelines

Actian Data Intelligence speaks to data professionals: engineers, analysts, and catalog administrators. The voice is direct, precise, and professional without being formal or stiff.

These guidelines define the writing principles, style, and word choices that apply to all product copy. See the sections below for specific guidance.

---

## Voice and tone

Actian Data Intelligence speaks to data professionals: engineers, analysts, and catalog administrators. The voice is direct, precise, and professional without being formal or stiff.

Apply these guidelines to all UI copy, including labels, tooltips, empty states, error messages, and notifications.

---

### Style

- Use active voice. "Export the dataset" not "The dataset can be exported."
- Use present tense. "Saves automatically" not "Will save automatically."
- Use sentence case for all UI text, including headings and button labels.
- Do not use exclamation points except in genuine success states.
- Do not use "please" or "sorry" — they add length without value.

### Do / Don't

| Do | Don't |
|---|---|
| Export the dataset | The dataset will be exported |
| Something went wrong | We're sorry, something went wrong |
| Log in | Sign in / Signin |

---

## Writing style

Use present, active tense in all possible cases. In some cases, you can use passive voice if the focus needs to be on a system instead of a person.

---

### Tense and voice

| Voice | When and how to use | Example |
|---|---|---|
| Active | All cases except where passive is needed | Only an administrator can create a warehouse. |
| Passive | Use only when focus is not on a person | The database needs to be shut down. |

### Tone

- Be direct, active, and consistent.
- Be friendly and helpful.
- Use the simplest terms. Don't try to "beautify" with alternatives.
- Do not personify the product as the subject of the text.
- Avoid humor; it rarely translates.
- Avoid idioms, sarcasm, metaphors, slang, colloquialisms, and jargon.
- Do not use racial, gender, or cultural-biased language.
- Use gender-neutral pronouns to help make text inclusive.
- Use the second person: "you." Don't use "I," "we," or "us" to refer to the user.

| Do | Don't |
|---|---|
| Submit form | Click here to submit the form |
### Personification

Do not personify the product as the subject of the text. Keep the user in focus, rather than the product.

| Do — User focus | Don't — Product focus |
|---|---|
| In the Delivery Information window, specify the name of the sender. | The Delivery Information window allows you to specify the name of the sender. |
| Use this menu to create diagrams. | This menu enables you to create diagrams. |

---

## Capitalization

Don't overuse capitalization — it makes copy harder to read and de-emphasizes the important content.

---

### When to use each case

| Title case | Sentence case | All caps |
|---|---|---|
| Top-level navigation | In-line and standalone links | Functional text |
| Main page headers only | Section headers, checkboxes, radios, badges, sliders, toggles, tooltips, tags, pills, toasts, loading indicators | Acronyms (API, not Api) |
| Menu titles | Placeholder text inside form fields | |
| Menu items | Labels | |
| Proper nouns | Buttons | |
| Names of people or products | Column headers | |

### Do / Don't

| Do | Don't |
|---|---|
| Add a row to the catalog. List it on the page. | Add a row to the Catalog. List it on the Page. |
| Add a row to the MyCatalog page. | Add a row to the MyCatalog Page. |
| Selects an item type. | Select an Item Type. |

---

## Words to avoid

Guidance on what content works best, including text, imagery, and messaging.

---

| Example | Do | Don't |
|---|---|---|
| Never say "Please" or "Sorry" — they are unnecessary. | Contact Support | Please Contact Support |
| Don't refer to Actian as "we" or "us." | Actian recommends | We recommend |
| Don't use "Execute" or "Abort." | The process was cancelled/stopped | The process was aborted. |
| Don't use "Master" or "Slave." | Primary and Secondary servers | Master and Slave servers |
| Don't use "Blacklist" or "Whitelist." | Add a row to the Allow/Deny List | Add a row to the Black/Whitelist |
| Don't use "Press" or "Type" as verbs. | Click "OK", Enter/Provide a name | Press "OK", Type a name |
| Never use developer-speak. | Click the **OK** button. | Click the OK CTA. |
| Don't use "Caution" or "Danger." | Remember: Restart the server first. | Danger: Stop the server first. |
| Don't use "Ensure." | Verify that the value is provided. | Ensure you provided the correct value. |
| Don't use "Disabled." | This setting is blocked/off | This setting is disabled |
| Don't use "Agnostic." | This feature is platform independent | This feature is platform agnostic |
| Don't use "Sign in" or "Signin." | Log in to begin | Signin to begin |

---

## Punctuation

To help readers scan text at a glance, avoid using punctuation in places where it isn't necessary.

---

### Ampersands ("&")

Avoid using ampersands in place of "and" except for common abbreviations (e.g. Q&A) or when the ampersand is part of an organization's formal name (e.g. H&R Block, AT&T). In those cases, follow the organization's formal spacing style.

| Do | Don't |
|---|---|
| Common abbreviations: Q&A. Organization formal names: H&R Block, AT&T | Using & in place of "and" in general copy |
### Periods (".")

Avoid using periods on solitary sentences within these UI elements:

| Use periods | Don't use periods |
|---|---|
| Multiple sentences | Labels |
| A sentence followed by a link | Hover text |
| Description text | Tooltips |
| | Placeholder text |
| | Radios |
| | Loading indicators |

### Commas (",")

Use a comma after the second-to-last item in a series, before the conjunction (serial/Oxford comma).

### Exclamation points ("!")

Use exclamation marks only positively, not negatively. Use no more than one exclamation mark per page or window.

---

## Numerical formatting

---

### Currency and phone numbers

- Currency: `$1,000,000.00`
- Phone numbers: `+1 (212) 123 4567`

### Dates and times

| Type | When and how to use | Example |
|---|---|---|
| Time | Within the current day, use uppercase AM or PM without periods | 2:00 PM |
| 24-hour clock | Display the time without AM/PM | 14:00 |
| Date | Show the date with the year. If it's within the current calendar year, don't show the year. | January 14 / Jan 3, 2012 / 10/23/2022 |
| Timestamp | Display an exact time | 2:36:17 PM PST |
| Approximate time | Round down to the largest and most recent date or time | In 5 minutes / 3 days ago |

---

## Prepositions

Prepositions indicate relationships between different elements, actions, or concepts. Proper use maintains clarity and precision; misuse leads to confusion.

---

### Conciseness — avoid overuse

Minimize unnecessary prepositions. Omit them when they don't add meaning.

| Do | Don't |
|---|---|
| Manage notification settings. | The settings for managing notifications on your profile. |
| Contact Support | Contact to Support |
### Accuracy and clarity

Use prepositions that clearly express the relationship between actions, objects, or concepts.

| Do | Don't |
|---|---|
| Upload to the server | Upload on the server |
| Details on how to configure settings | Information about settings |
### Keep prepositional phrases short

Avoid long prepositional chains — break them up for clarity.

| Do | Don't |
|---|---|
| Click the link in your email to view your order details. | Click on the link in the email for information about your order. |
### Consistency

Standardize common prepositional phrases and use them consistently throughout the product.

| Do | Don't |
|---|---|
| Save the changes to your profile. | Save the changes on your profile. |
| Drag the file into the folder | Drag the file to the folder |
| Tap the icon | Tap on the icon |

---

## Acronyms

Spell out an acronym the first time it's mentioned. On subsequent references, use the abbreviation. If the abbreviation isn't clearly related to the full version, specify it in parentheses after the spelled-out version in the first instance.

---

Fully capitalize all letters in abbreviations:

- PDF
- AM/PM
- FAQ
- HTML
- OK (not Ok or Okay)
- HCL

If there's a chance that an abbreviation might not be known to the target audience, spell it out in full the first time you use it. However, don't spell out commonly known abbreviations. If the abbreviation or acronym is well-known to the average client (for example, CIC or CDE), use it on the first reference without spelling it out.

---

## Plurals

Make sure items are correctly used as plural or singular nouns as appropriate.

Do not use "(s)" or "/s" after a noun to make it plural. If you must indicate both forms, use "one or more."

---

## Abbreviations and articles

---

### Abbreviations

Do not use "i.e." or "e.g." in UI copy. Avoid using a slash between two words to mean "and/or" — use the word "or" instead.

| Do | Don't |
|---|---|
| You can select green, blue, or both. | You can select green/blue. |
### Articles

Don't speak like a robot — use "a," "an," and "the" articles.

| Do | Don't |
|---|---|
| Use the default JRE to run a shell instance. | Use default JRE to run shell instance. |

---

## Empty and system states

System states communicate the current condition of the platform or a specific view. Clear, direct copy helps users understand what happened and what to do next.

---

### Empty state

Empty states appear when users have not yet created items, or when filters return no results. Clear copy and a direct CTA reduce friction and encourage engagement.

#### When to use

- When users have not yet created or uploaded items.
- When [filters](/components/form-input-selection/search-filters/) result in no visible results.
- To encourage engagement with a clear next action.

#### Style

- Use a short, instructive headline (noun phrase or imperative verb).
- Follow with one concise sentence that explains what the user can do.
- Provide one primary action (for example, **Create dataset**).
- Do not use `No results found` as a standalone message without guidance.

#### Do / Don't

| Do | Don't |
|---|---|
| No items found / Add your first dataset to start exploring. | No results. |
| Nothing here yet / Create a connection to get started. | There are no items to display at this time. |
#### Example

| Element | Example text |
|---|---|
| Title | No items found |
| Body | Add your first dataset to start exploring. |
| CTA | Create dataset |

---

### Error state

Error states communicate that something failed or a resource could not be loaded. Copy must be specific, non-blaming, and actionable.

#### When to use

- When something fails or a resource cannot be loaded.
- When a user action fails to complete.

#### Style

- Be specific about what went wrong where possible.
- Offer a resolution step or next action.
- Do not use technical error codes as the primary message.
- Do not blame the user.

#### Example

| Element | Example text |
|---|---|
| Title | Something went wrong |
| Body | There was an error creating your item. Try again or contact support if the problem continues. |
| Primary CTA | Try again |

---

### Maintenance state

Maintenance states inform users that part of the platform is temporarily unavailable due to planned or unplanned work.

#### Style

- Explain what is affected and for how long.
- Provide an estimated time to resolution when available.
- Include a single action if there is something the user can do (for example, **Refresh**).

#### Example

| Element | Example text |
|---|---|
| Title | Scheduled maintenance in progress |
| Body | Reports may be unavailable until 12:00 PM EST. |
| CTA | Refresh |

---

### Success state

Success states confirm that a user action completed. They often follow an action that previously triggered an empty state.

#### Style

- Confirm what was completed, not just that it succeeded.
- Keep copy brief. One line is usually sufficient.
- Offer a logical next action.

#### Example

| Element | Example text |
|---|---|
| Title | Items imported |
| Body | Your datasets are ready to explore. |
| Primary CTA | Open catalog |

---

## Forms

Forms collect or update user data. Consistent structure, clear labels, and helpful guidance reduce friction and prevent errors.

---

### When to use

- To collect user input that affects data, configuration, or permissions.
- To edit or update existing records or entities.
- To guide users through multi-step flows where input drives behavior.
- To allow users to provide comments and suggestions, or to confirm, approve, or reject requests that require context.

### Types of forms

| Type | Usage | Examples |
|---|---|---|
| Single page or simple form | Data entry for simple workflows | Editing a dataset name or description |
| Stepper or multi-page form | Task-based workflows | Creating a data connection or access request |
| Modal form | Short, focused tasks that require user confirmation | Adding a note or setting permissions |

---

### General form guidelines

#### How to use

- Be concise and directive: each label or helper text should clearly describe the required action.
- Use sentence case for labels and titles.

| Do | Don't |
|---|---|
| Group name | Group Name |
- Clarify optional vs. required fields: mark required fields consistently using the asterisk (*) symbol or text label.
- Avoid redundancy: if a section title already establishes context, field labels can be shorter.
- Provide context when needed: helper text should explain the "why," never just restate the label.
- Error text should guide correction.

| Do | Don't |
|---|---|
| Enter a valid date | Invalid input |
- Success or confirmation text should be brief, reassuring, and specific. For example, `The policy was successfully created`.
- Use progressive disclosure for field entry assistance: Label → Tooltip → Descriptive text → Link to docs.

#### Structure

- Group related fields together under sections.
- Always place the primary CTA at the bottom right for consistency.
- Avoid multi-column layouts when possible - single column is easier to read. Exceptions such as separate fields for first and last names are acceptable.

#### Behavior

- Labels should be visible even when the field is in focus.
- Include placeholder text only when it provides value - never to just repeat the label.
- The primary CTA should be disabled until all required fields are filled.
- Validate fields inline and provide red error text below the field. See [validation messages](validation-messages) for error text guidelines.

---

### Input labels and helper text

#### Style

- Labels describe the purpose of the field. They are always visible.
- Helper text provides brief instruction or clarification below the field. Use it sparingly.
- Placeholder text is a hint only - never a substitute for a label. It disappears when the user starts typing.

#### Do / Don't

| Do | Don't |
|---|---|
| Label: Connection name / Helper: Use a unique name to identify this connection. | Placeholder: Enter connection name (no visible label) |
| Helper: Must be 8–32 characters. | Helper: Please enter a valid password. |
---

### Dropdown

#### When to use

- For lists of 5 to 20 options.
- When the full list does not need to be visible at all times.

#### Style

- Label the dropdown clearly. The label should describe the category of options, not the action.
- Close after selection.
- Keep option phrasing consistent within the same dropdown.
- Use sentence case for all options.

---

### Calendar

The calendar component is used for any interaction involving date ranges, filtering, or scheduling.

#### When to use

For any interaction involving date ranges, filtering, or scheduling.

#### Style

- Use labels like `From` and `To`, or `Start date` and `End date` for range fields. Do not leave any fields unlabeled.
- Display date formats clearly (MM/DD/YYYY or regional format) with placeholders or hints where appropriate.
- Do not pre-fill dates for users.

#### Behavior

- Support both typing and calendar picking.
- Auto-close the calendar when the selection is complete.
- Highlight today, weekends, and blocked dates visually when appropriate.
- Visually display any selected range in the calendar.

---

### Toggle

#### Style

- Label the toggle next to or above the control. For example, **Enable alerts**.
- Show the label for the state that is currently active. For example, show `Off` when off, `On` when on - but not both at the same time.

#### Behavior

- The action should happen on toggle with no confirmation step.
- Left = off, right = on.
- Should update instantly unless a delay is unavoidable - show a loading indicator if delayed.
- Do not use toggles for destructive or irreversible actions.

#### Toggle vs Checkbox vs Radio button

**Use a toggle when:**
- The action takes effect immediately.
- It represents a system state (for example, ON/OFF, enabled/disabled).
- It is a binary setting that persists (for example, dark mode, notifications).

**Use a [checkbox](/components/form-input-selection/checkbox-with-label/) when:**
- The user is selecting one or more items.
- The action does not take effect immediately (typically part of a form or group submission).
- It is a yes/no decision that is reviewed later. For example, **Agree to terms and conditions** or **Subscribe to newsletter**.

---

### Radio button

#### When to use

- When the user must select exactly one option from a short visible list (typically two to six options).
- When all choices should be visible up front rather than hidden in a dropdown.

#### Style

- Use short, descriptive labels that clearly state each option.
- Write labels as direct answers to the group's prompt or question. For example, **Yes / No** instead of `Select yes if you agree`.
- Ensure the group label or question is always visible next to the options.
- Avoid jargon or abbreviations.
- Keep labels parallel in structure - all nouns, or all verb phrases.

---

### Radio button card format

Use card-format radio buttons instead of traditional radio buttons when each option needs rich context such as a title, description, image, metadata, or tags, and the selection should feel like a visual choice rather than a text label.

#### When to use

- Primary decision point: when the consequences of the choice are important, or they drive a main workflow or journey.
- Examples: pricing tiers, template selections (for example, use cases), or layout choices.

#### Behavior

- Indicate selected state visually (`Selected` highlight border, and so on).
- Click anywhere on the tile to toggle selection.
- For multi-select: use checkbox behavior. For single-select: use radio group behavior.
- Maintain selection across steps if part of a multi-step process.
- Title: short, descriptive, and consistent across tiles.
- Supporting text: use only in the large variant.

---

## Grid and spacing

Grid and spacing guidelines govern the visual rhythm of the interface. Consistent spatial decisions make the UI easier to scan and reduce cognitive load.

---

### Content implications

- Short labels and values work best in tight grid contexts. Avoid wrapping text in narrow columns.
- When content must appear in a constrained space, abbreviate predictably or truncate with a tooltip.
- Do not force content into a fixed width by using non-breaking spaces or artificial line breaks.

### Density considerations

- Default density is appropriate for most catalog views.
- Compact density is appropriate for power users working with large datasets where row count matters.
- Do not vary density within the same table or list view.

---

## Icons

Icons support communication by providing visual cues alongside or instead of text. They should reinforce meaning, not replace it, unless paired with a tooltip or accessible label.

---

### When to use

- To supplement a text label and help users scan faster.
- For icon-only controls (such as toolbar buttons) that have a visible tooltip or aria-label.
- Do not use an icon as the only affordance for a critical action - always pair with a text label or tooltip.

### Style

- Use icons from the approved Actian icon set only.
- Do not add decorative icons that have no functional meaning.
- Icon labels (tooltips or aria-labels) use sentence case and follow the same verb/noun conventions as button labels.

### Accessibility

- Every icon-only control must have an accessible name via aria-label or a visually hidden text label.
- Decorative icons must be marked `aria-hidden="true"` so screen readers skip them.
- Do not rely on color alone to convey the meaning of an icon.

---

## Lineage-specific UI

Lineage views display the origin, transformation history, and downstream dependencies of data assets. The UI uses graph-based visualizations with nodes and edges. Copy in this context must be precise and unambiguous to support data governance workflows.

---

### When to use

- On dataset and column detail pages where traceability is relevant.
- In audit and governance workflows where users need to trace data origin or impact.

### Node labels

- Use the exact asset name as the node label - do not paraphrase or abbreviate.
- Include the asset type as a secondary label below the name. For example, `Orders` with `Table` below it.
- Use sentence case for all labels.

### Edge and relationship labels

- Describe the relationship with a short verb phrase. For example, `Reads from`, `Writes to`, `Transforms`.
- Avoid technical jargon that non-engineer users will not understand.

### Terminology

| Term | Definition |
|---|---|
| Upstream | Assets that provide data to the selected asset |
| Downstream | Assets that consume data from the selected asset |
| Source | The originating system or dataset |
| Transformation | A processing step that modifies or aggregates data |
| Impact | The downstream effect of a change to this asset |

---

## Loading

---

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

---

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.

---

## Notifications and messaging

---

### Notification

Notifications inform users of updates, background task completions, or events that require their attention. They appear in the notification panel or dropdown.

#### When to use

- To inform users of updates, background task completions, or events that require their attention.

#### Style

- Use direct, concise language. One to two sentences.
- Include a timestamp.
- Include a link or action if the user must do something in response.
- Do not use generic text like `You have a new notification`.

---

### Notification toast

Toasts confirm that a background action completed, or surface non-critical errors and warnings that do not block the user.

#### When to use

- To confirm that a background action completed.
- To surface non-critical errors or warnings that do not block the user.
- Do not use toasts for actions that require user input.
- For routine confirmations that need persistence, use an [alert / banner](/components/feedback/alert-banner/) instead.

#### Style

- Keep to one short sentence.
- Include an undo action where relevant.

#### Examples

| Scenario | Toast text |
|---|---|
| Dataset deleted | Dataset deleted. Undo |
| Export complete | Export ready. Download |
| Connection failed | Connection failed. Try again |

---

### Tooltip

Tooltips provide short contextual help on hover or focus. They are best for icon-only controls that need a label, or for brief supplementary information that does not need to be persistently visible.

#### When to use

- To provide short contextual help on hover or focus.
- For icon-only controls that require a label.
- Do not use tooltips for critical information — users should not be required to hover to understand the UI.

#### Style

- Limit to a few words or one concise sentence.
- Do not repeat the label of the element being described.
- For multi-sentence explanations, use a [popover](/components/overlays/popover/) or inline help text instead.

---

## Object preview panels

Object preview panels display a summary of an asset's key attributes without requiring full navigation to the detail page. They appear as side panels or overlays and are used to support quick inspection workflows.

---

### When to use

- When a user hovers over or clicks an item in a list or search result and wants a quick view of its properties.
- To reduce context switching during browsing or review tasks.

### Style

- Panel title is the asset name. Use the exact name - do not rephrase.
- Use short attribute labels (one to two words) followed by their values.
- Group related attributes under a subheading where the panel is long.
- Include a **View full details** link at the bottom to navigate to the full detail page.

### Attribute label examples

| Use | Avoid |
|---|---|
| Owner | Assigned owner |
| Last modified | Date of last modification |
| Type | Object type |
| Description | Asset description |

---

## Onboarding

Onboarding helps users understand the platform and reach their first success quickly. Copy should be encouraging without being patronizing.

---

### When to use

- On first login or when a user accesses a new product area for the first time.
- As part of [wizard](wizards) flows for complex setup tasks.

### Style

- Lead with what the user can do, not what the product does.
- Keep each step focused on one task.
- Use action-oriented **CTAs**. For example, **Set up your first connection**.
- Do not use marketing language in onboarding flows.

### Wizard step titles

- Step titles are short imperative phrases. For example, `Choose a data source`, `Configure access`.
- Do not number the step in the title text - the stepper component handles that.

---

## Related content panels

Related content panels surface assets or resources connected to the currently viewed item. They help users discover relevant datasets, reports, lineage connections, or documentation without leaving their current context.

---

### When to use

- On asset detail pages to surface downstream or upstream dependencies.
- To show related documentation, reports, or catalog entries.
- Do not use related content panels for primary navigation - they are supplementary.

### Style

- Panel heading describes the relationship type. For example, `Related datasets`, `Used in reports`.
- Each item in the panel shows the asset name as a link, plus one or two metadata attributes (type, owner, or last modified).
- If the panel is empty, show a brief empty state message. For example, `No related datasets found`.

### Do / Don't

| Do | Don't |
|---|---|
| Related datasets | Other items |
| No related datasets found. | (empty panel with no message) |
| Used in 3 reports | Reports: 3 |

---

## Uploads

Upload components allow users to add files to the platform. They appear in dataset import flows, connection setup, and file attachment contexts.

---

### When to use

When users need to import data files, certificates, configuration files, or attachments.

### Style

- Drop zone label: use an action phrase plus the accepted file types. For example, "Drag and drop a CSV file, or browse."
- Browse link text: **Browse** or **Choose file** - not **Click here**.
- File type restrictions: list the accepted formats explicitly. For example, "Accepts `.csv`, `.json`, and `.xlsx` files."
- File size limit: state the limit in plain language. For example, "Maximum file size: `50 MB`".

### Progress and status

- During upload: show filename, progress bar, and percentage.
- On success: show filename with a success indicator. For example, "`data_export.csv` - Uploaded."
- On error: show filename with a specific error. For example, "`data_export.csv` - File exceeds the 50 MB size limit."

### Do / Don't

| Do | Don't |
|---|---|
| Drag and drop a CSV file, or browse. | Click here to upload your file. |
| Accepts .csv, .json, and .xlsx files. | Only certain file types are supported. |
| data.csv - File exceeds the 50 MB size limit. | Upload failed. |

---

## Validation messages

Validation messages appear inline with [form](forms) fields to help users correct input errors. They are the primary mechanism for communicating what went wrong and how to fix it.

---

### When to use

- On field blur (when the user leaves a field), not on every keystroke.
- On form submission when required fields are empty or invalid.
- Do not show validation errors before the user has interacted with a field.

### Style

- Be specific: say what is wrong and how to fix it.
- Use plain language - do not expose technical error codes or internal validation rule names.
- Keep messages to one sentence.
- Do not use "Invalid" as a standalone message - explain why it is invalid.
- Do not blame the user. Use neutral, factual language.
- Do not use "Please" - omit it.

### Do / Don't

| Do | Don't |
|---|---|
| Enter a valid email address. | Invalid email. |
| Connection name is required. | Please fill out this field. |
| Password must be 8–32 characters. | Password does not meet requirements. |
| This name is already in use. Choose a different name. | Duplicate entry error. |
| Select at least one data domain. | You must make a selection. |

---

## Wizards

Wizards are guided multi-step flows that walk users through complex setup or configuration tasks. They combine steppers, forms, and confirmation screens into a linear sequence with clear progression.

---

### When to use

- For complex setup tasks that cannot be completed on a single form - for example, creating a connection, configuring a pipeline, or onboarding a new dataset.
- When the steps have a natural sequence and later steps depend on earlier choices.
- Do not use a wizard for simple tasks that can be completed in a single form or modal.

### Step titles

- Short imperative verb phrases. For example, `Choose a connector`, `Set connection details`, `Test and save`.
- Parallel structure across all steps.
- Do not repeat the wizard title in each step title.

### In-step content

- Use a short paragraph at the top of each step to explain what the user is about to do and why.
- Keep explanatory text to two sentences maximum.
- Use inline help (popovers or helper text) for field-level guidance rather than long step-level explanations.

### Confirmation and summary step

- The final step before submission should present a summary of the user's choices.
- Label the summary step `Review` or `Review and create`.
- Use the same attribute labels as the preceding form fields - do not rephrase.
- Show an edit link next to each section so the user can go back and change specific settings.

### Navigation buttons

Follow the [stepper button terminology guidelines](/components/navigation/stepper/). Use **Back**, **Next**, and the appropriate object-specific verb for the final step (for example, **Create connection**).

### Do / Don't

| Do | Don't |
|---|---|
| Choose a connector | Connector selection step |
| Review and create | Confirmation |
| Create connection | Finish / Submit / Done |
| Connect to your data source. This will allow the platform to read and write data on your behalf. | Please complete all required fields in this step before proceeding. |