when it only explains. |
| `strand-map-legend__dot` | child | The sector swatch. aria-hidden: the label beside it already names the category, so an exposed swatch is a second announcement of the same fact. |
| `strand-map-legend__dot--tech` | child | Technology sector encoding. |
| `strand-map-legend__dot--health` | child | Health sector encoding. |
| `strand-map-legend__dot--trades` | child | Trades sector encoding. |
| `strand-map-legend__dot--finance` | child | Finance sector encoding. |
**Usage:**
```html
Sectors
```
---
### MapLoading
The screen that covers an instrument viewport while it boots. Fades out rather than unmounting, so the map beneath is never revealed mid-paint: keep it mounted and toggle the modifier. Default state is VISIBLE, because it covers a booting instrument and a consumer that forgets to drive it should show a loading screen rather than a half-painted map. Caption uses instrument voice (11.7): "Processing", never "Loading...".
| Class | Type | Description |
|---|---|---|
| `strand-map-loading` | base | Full-bleed cover over the viewport. Give it role="status" with aria-live="polite" and aria-busy, so the caption is announced and the state change is not silent for a screen reader. |
| `strand-map-loading--hidden` | modifier | Faded out. The element stays mounted; removing it would cut the opacity transition and reveal the map mid-paint. |
| `strand-map-loading__spinner` | child | Rotating indicator. Decorative, aria-hidden. |
| `strand-map-loading__text` | child | Caption, instrument voice. |
| `strand-map-loading__bar` | child | Sweeping progress bar. Decorative, aria-hidden. |
**Usage:**
```html
...
```
---
### Nav
Site/app navigation with an optional mobile menu and a glass variant. The bar spans its parent and insets by its own padding; place it inside a Container if you want it held to a reading measure. The hamburger and its panel are opt-out via the mobileMenu prop, which an application shell already carrying its destinations in a persistent region should pass as false (DL 19.1.1). For a CSS-only consumer the equivalent is omitting the hamburger and mobile-menu markup.
| Class | Type | Description |
|---|---|---|
| `strand-nav` | base | Base nav element. |
| `strand-nav__inner` | child | Inner flex layout container. Spans the parent and insets by its own padding (32px, 16px below 480). It carries no max-width and does not centre: 1280 is a content measure and belongs to Container. |
| `strand-nav__logo` | child | Logo/brand area (mono uppercase tracked). |
| `strand-nav__logo--pulse` | child | Animated pulse underline on logo. |
| `strand-nav__items` | child | Navigation links container. |
| `strand-nav__link` | child | Desktop navigation link. |
| `strand-nav__link--active` | child | Active desktop link state. |
| `strand-nav__slot` | child | Right-edge content slot (account, utility). |
| `strand-nav__slot--reserve` | child | Slot with a pinned inline size, so swapping its contents cannot shift the nav. |
| `strand-nav__actions` | child | Actions area. Sizes to its contents rather than shrinking, so a child cannot hang outside it (DL 10.4). Buttons here take the compact nav-chrome density on a fine pointer; outside a Nav, reach the same density with strand-btn--compact. |
| `strand-nav__hamburger` | child | Mobile menu toggle button. Not rendered when the mobileMenu prop is false; omit the markup entirely in a CSS-only consumer. |
| `strand-nav__hamburger-icon` | child | Hamburger icon lines. |
| `strand-nav__mobile-menu` | child | Mobile navigation panel. |
| `strand-nav__mobile-menu--open` | child | Open state for mobile menu. |
| `strand-nav__mobile-link` | child | Mobile navigation link. |
| `strand-nav__mobile-link--active` | child | Active mobile link state. |
| `strand-nav__title` | child | Nav title text. |
| `strand-nav__title-tag` | child | Nav title tag element. |
| `strand-nav--glass` | modifier | Fixed glassmorphic nav with frosted backdrop. |
| `strand-nav--scrolled` | modifier | Scrolled state with subtle shadow. |
| `strand-nav--instrument` | modifier | Instrument viewport nav variant. |
| `strand-glass-nav-active` | base | |
| `strand-banner-active` | base | |
**Usage:**
```html
```
---
### PersonChip
An initials avatar beside a name, in a pill. Shipped as ONE primitive rather than Avatar + Tag composed by hand, because the pill has to align the circle's optical centre with the name's baseline box and a consumer composing two primitives gets that right only by accident. The initials are DECORATIVE and the circle is aria-hidden: the name beside them is the accessible name, and announcing "MK, Maria Klein" reads the same person twice. A button only when it does something; a strip of thirty non-interactive chips would otherwise be thirty tab stops promising an action that does not exist.
| Class | Type | Description |
|---|---|---|
| `strand-person-chip` | base | The pill. A
when it only names someone, a when it opens a profile. |
| `strand-person-chip--action` | modifier | Interactive form: hover and focus affordances. |
| `strand-person-chip__avatar` | child | Initials circle. aria-hidden. blue-deep on blue-wash, not blue-primary: these are letters, so 14.2b makes them text at 4.5:1 rather than a graphical object at 3:1. |
| `strand-person-chip__name` | child | The name, and the accessible name. Truncates on one line: a two-line pill breaks a wrapping strip's rhythm. |
| `strand-person-chip__secondary` | child | |
**Usage:**
```html
MK
Maria Klein
```
---
### Progress
Completion indicator (bar or ring).
| Class | Type | Description |
|---|---|---|
| `strand-progress` | base | Base progress element. |
| `strand-progress--bar` | modifier | Bar variant. |
| `strand-progress--ring` | modifier | Ring (circular) variant. |
| `strand-progress__fill` | child | Fill track element. |
| `strand-progress__ring` | child | SVG ring element. |
| `strand-progress__track` | child | Ring background track. |
| `strand-progress--indeterminate` | modifier | Indeterminate animation state. |
| `strand-progress--sm` | modifier | Small size (bar: 4px, ring: 24px). |
| `strand-progress--md` | modifier | Medium size (bar: 8px, ring: 40px). |
| `strand-progress--lg` | modifier | Large size (bar: 12px, ring: 56px). |
**Usage:**
```html
```
---
### Radio
Single selection within a group. The native input carries checked and disabled; the sheet reads them.
| Class | Type | Description |
|---|---|---|
| `strand-radio` | base | Label wrapper element. |
| `strand-radio__native` | child | The native input, which carries the state; add strand-sr-only to hide it visually. |
| `strand-radio__control` | child | Custom visual control. |
| `strand-radio__dot` | child | Inner dot indicator. |
| `strand-radio__label` | child | Text label. |
| `strand-radio--compact` | modifier | |
**Usage:**
```html
Option A
```
---
### Reserve
A region that holds its box while data loads, then cross-fades the placeholder to the content. Implements design-language.md 6.6.1 (the space contract) and 6.6.2 (placeholder to content). Flip data-strand-reserve to "ready" when the data lands, or to "empty" when the answer arrived and there is nothing to show; that attribute is the whole runtime, and there is no JavaScript in this primitive.
| Class | Type | Description |
|---|---|---|
| `strand-reserve` | base | Region root. Places both layers in one grid cell, so the region self-sizes to the taller and the swap cannot move layout. |
| `strand-reserve__placeholder` | child | The waiting layer, usually skeletons. Mark it aria-hidden so assistive tech does not read filler. |
| `strand-reserve__content` | child | The real content. Present and sized from first paint, hidden by opacity rather than absent from the DOM. |
**Usage:**
```html
```
---
### ResultCard
One result in an instrument's results panel. Renders as a when it is selectable and an when it is not: a card that pans a map when clicked is a control and owes the keyboard the same affordance as the mouse, while a card that only displays is not, and a button role would promise otherwise. Pair the active state with aria-current so the highlighted result is announced rather than only tinted.
| Class | Type | Description |
|---|---|---|
| `strand-result-card` | base | Card root, on the dark cabinet. |
| `strand-result-card--active` | modifier | The highlighted result, e.g. the one under the cursor on the map. Pair with aria-current="true". |
| `strand-result-card__title` | child | Primary line. |
| `strand-result-card__company` | child | Secondary line. |
| `strand-result-card__meta` | child | Metadata row. Omit the element entirely when there is no metadata: an empty styled row takes vertical space and draws a border for nothing, in a panel where every row competes for height. |
| `strand-result-card__location` | child | Where the result is. |
| `strand-result-card__salary` | child | A second metadata value. |
| `strand-result-card__badge` | child | Small chip. A badge with no variant keeps the base class alone, never a --undefined modifier that matches no rule. |
| `strand-result-card__badge--remote` | child | Remote tint. |
| `strand-result-card__badge--source` | child | Source tint. |
**Usage:**
```html
Systems Engineer
Acme
Oakland
Remote
Systems Engineer
```
---
### ResultsPanel
The list an instrument returns for a query. THREE states, not two, deliberately: a failed request and an empty result are different answers and the user is owed the difference. "0 matches detected" means the instrument ran and found nothing; an error means it did not run. The retry affordance therefore belongs to the error state only, because an empty result is not a failure and there is nothing to retry.
| Class | Type | Description |
|---|---|---|
| `strand-results-panel` | base | Panel root: a labelled on the dark cabinet, fixed left on desktop and a bottom sheet below 768px. Hide it with the hidden attribute so it leaves the accessibility tree rather than sitting invisible. |
| `strand-results-panel__count` | child | The count line, instrument voice. Mark it aria-live="polite" so a screen reader hears the count change when a query re-runs. Polite, never assertive: a count re-announcing on every keystroke of a live search interrupts more than it informs. |
| `strand-results-panel__items` | child | Scrollable list region. Rendered only in the results state. |
| `strand-results-panel__state` | child | The empty or error block, rendered instead of the items. |
| `strand-results-panel__state-title` | child | Heading for the empty or error state. |
| `strand-results-panel__state-hint` | child | Supporting line, e.g. "Adjust parameters and retry". |
| `strand-results-panel__error-link` | child | Retry control. Error state only. |
**Usage:**
```html
0 matches detected
Adjust parameters and retry
Process interrupted
Retry sequence
```
---
### ScrollReveal
Scroll-triggered entrance animation.
| Class | Type | Description |
|---|---|---|
| `strand-reveal` | base | Element with scroll-triggered fade-up. |
| `strand-reveal--visible` | modifier | Visible state after scroll trigger. |
| `strand-reveal-group` | base | Group container for staggered reveals. |
| `strand-reveal-group--manual` | modifier | |
**Usage:**
```html
Fades up on scroll
Staggers 0ms
Staggers 80ms
```
---
### SearchField
A search input for page chrome: a fixed-width field on a wide viewport, a full-width bar on a narrow one. Renders its full geometry from first paint with no JavaScript, so it can be server-rendered into a header without moving the page when it hydrates (design-language.md 6.6.1, the space contract). NOT to be confused with strand-search-bar, which is the overlay that floats ON an instrument viewport; that one is absolutely positioned against a map beneath it. Put both presentations in the markup and choose between them with strand-hide-below-md / strand-hide-from-md rather than measuring the viewport in JavaScript, which renders the control a frame late. Width is --strand-search-field-inline-size, defaulting to min(300px, 100%): set a flat width where an intrinsically sized parent must be able to measure the field, or 100% to fill a row.
| Class | Type | Description |
|---|---|---|
| `strand-search-field` | base | Field root. A role="search" landmark laid out as a flex row: icon, input, optional clear control. Fixed at min(300px, 100%) so it cannot breach a narrower parent's padding (10.4). Height is 36px, raised to 44px under a coarse pointer for 14.7. |
| `strand-search-field--full` | modifier | Spans the container instead of holding 300px. The narrow-viewport presentation; differs from the base in exactly one property. |
| `strand-search-field__icon` | child | Leading magnifier, 16px, decorative (aria-hidden). Uses gray-500 rather than the gray-400 a mockup usually specifies: 14.2b puts gray-400 in the fill tier at 2.52:1, below the 3:1 SC 1.4.11 asks of a graphical object. |
| `strand-search-field__input` | child | The control. Transparent and borderless because the wrapper draws the box; min-inline-size 0 so it shrinks inside the flex row rather than pushing the field past its declared width. Give it an accessible name: a placeholder is a hint, not a label. |
| `strand-search-field__clear` | child | Optional clear control. Hidden with the hidden attribute while the field is empty, so it is absent from the accessibility tree and the tab order rather than merely invisible. 24px drawn, 44px hit area under a coarse pointer. |
**Usage:**
```html
```
---
### SearchTrigger
A control that LOOKS like a search field and behaves like a button: it opens a search overlay rather than accepting text. Composed on top of strand-search-field, which owns the box, so the two controls cannot drift apart visually. Use this wherever search is palette-driven; use SearchField only where the input itself is the search and the keystrokes have nowhere else to go. Three reasons it is a separate primitive rather than a variant: an input that opens a modal on focus is WCAG 3.2.1 (On Focus); a field the user can type into whose text is handled elsewhere gives one query two homes; and role="search" around a text input promises assistive technology that typing works, which is a false promise if the keystrokes go to an overlay.
| Class | Type | Description |
|---|---|---|
| `strand-search-trigger` | base | Trigger root, a button. Applied ALONGSIDE strand-search-field, which supplies the box; this class adds only the button resets a field's box does not expect. Carries aria-haspopup="dialog". |
| `strand-search-trigger--icon` | modifier | Square icon presentation at --strand-touch-target, for the band of widths where a header has stopped having room for a field but has not yet handed over to a phone layout. The label stays IN the accessibility tree, clipped rather than display:none, because it is the control's accessible name and WCAG 2.5.3 requires it to survive. Reach for this rather than a strand-btn--icon-only, which is not a SearchTrigger and so drops aria-haspopup="dialog" and the shared field identity. |
| `strand-search-trigger__label` | child | Visible standing text, styled as a placeholder and taking the same token as the field's real placeholder. This is ALSO the accessible name: no aria-label override, because WCAG 2.5.3 (Label in Name) requires the accessible name to contain the visible text so a speech-input user saying what they see activates the control. Truncates on one line, since a wrapping label would change the control's height. |
| `strand-search-field__icon` | child | |
**Usage:**
```html
...
Search trail runs, pottery, chess
...
Search events
```
---
### Section
Page section with padding, background, and scroll-target variants.
| Class | Type | Description |
|---|---|---|
| `strand-section` | base | Base section element. |
| `strand-section--standard` | modifier | Standard section padding. |
| `strand-section--hero-compact` | modifier | Tighter hero padding for secondary CTA visibility. |
| `strand-section--hero` | modifier | Hero section padding. |
| `strand-section--hero-xl` | modifier | Extra-generous hero padding for marketing pages. |
| `strand-section--compact` | modifier | Compact section padding (space-12). |
| `strand-section--bg-primary` | modifier | Primary surface background. |
| `strand-section--bg-elevated` | modifier | Elevated surface background. |
| `strand-section--bg-recessed` | modifier | Recessed surface background. |
| `strand-section--border-top` | modifier | 1px top border for visual separation. |
| `strand-section--scroll-target` | modifier | Adds scroll-margin-top for anchor offset. |
**Usage:**
```html
```
---
### Select
Option selection dropdown with custom arrow.
| Class | Type | Description |
|---|---|---|
| `strand-select` | base | Wrapper element for the select. |
| `strand-select__field` | child | The native select element. |
| `strand-select__arrow` | child | Custom dropdown caret indicator. |
| `strand-select--error` | modifier | Error state. |
| `strand-select--disabled` | modifier | Disabled state. |
**Usage:**
```html
Option A
```
---
### Settle
Fades a region's new state in when the model changes, instead of cutting to it. Implements design-language.md 6.9 (state change) and 6.9.1 (identity is what triggers it). The sibling of Reserve: Reserve holds the BOX while a wait resolves, Settle acknowledges the MOMENT the user's action took effect. It cannot affect layout, deliberately, so a region whose two states differ in size needs Reserve as well. There is no JavaScript in this primitive: a keyframe animation runs when an element enters the DOM.
| Class | Type | Description |
|---|---|---|
| `strand-settle` | base | Fades the element in over --strand-duration-fast when it is inserted. Opacity only, and it declares no size of any kind. Under prefers-reduced-motion the animation is removed and the change is immediate. |
**Usage:**
```html
a comment that just arrived
```
---
### Skeleton
Content placeholder with shimmer animation.
| Class | Type | Description |
|---|---|---|
| `strand-skeleton` | base | Base skeleton element. |
| `strand-skeleton--text` | modifier | Text placeholder (small radius). |
| `strand-skeleton--rectangle` | modifier | Rectangle placeholder (medium radius). |
| `strand-skeleton--circle` | modifier | Circle placeholder (full radius). |
| `strand-skeleton--shimmer` | modifier | Shimmer animation effect. |
**Usage:**
```html
```
---
### Slider
Range value selection.
| Class | Type | Description |
|---|---|---|
| `strand-slider` | base | Wrapper element. |
| `strand-slider__field` | child | Native range input. |
| `strand-slider--disabled` | modifier | Disabled state. |
**Usage:**
```html
```
---
### Spinner
Loading indicator with accessible text.
| Class | Type | Description |
|---|---|---|
| `strand-spinner` | base | Base spinner element. |
| `strand-spinner__ring` | child | Spinning ring visual. |
| `strand-spinner--sm` | modifier | Small size (16px). |
| `strand-spinner--md` | modifier | Medium size (20px). |
| `strand-spinner--lg` | modifier | Large size (32px). |
**Usage:**
```html
Loading
```
---
### Stack
Flex layout primitive with direction, gap, and alignment.
| Class | Type | Description |
|---|---|---|
| `strand-stack` | base | Base flex container. |
| `strand-stack--vertical` | modifier | Column direction. |
| `strand-stack--horizontal` | modifier | Row direction. |
| `strand-stack--align-start` | modifier | Align items to start. |
| `strand-stack--align-center` | modifier | Align items to center. |
| `strand-stack--align-end` | modifier | Align items to end. |
| `strand-stack--justify-start` | modifier | Justify content to start. |
| `strand-stack--justify-center` | modifier | Justify content to center. |
| `strand-stack--justify-end` | modifier | Justify content to end. |
| `strand-stack--justify-between` | modifier | Justify content with space-between. |
| `strand-stack--justify-around` | modifier | Justify content with space-around. |
| `strand-stack--wrap` | modifier | Enable flex wrap. |
| `strand-stack--responsive` | modifier | Collapse horizontal to vertical at 768px. |
| `strand-stack__item--full-mobile` | child | Full-width child on mobile in responsive mode. |
| `strand-stack--gap-0` | modifier | Gap: none. Collapse the stack's spacing where an adjacent element already owns it. |
| `strand-stack--gap-1` | modifier | Gap: space-1 (4px). |
| `strand-stack--gap-2` | modifier | Gap: space-2 (8px). |
| `strand-stack--gap-3` | modifier | Gap: space-3 (12px). |
| `strand-stack--gap-4` | modifier | Gap: space-4 (16px). |
| `strand-stack--gap-5` | modifier | Gap: space-5 (20px). |
| `strand-stack--gap-6` | modifier | Gap: space-6 (24px). |
| `strand-stack--gap-8` | modifier | Gap: space-8 (32px). |
| `strand-stack--gap-10` | modifier | |
| `strand-stack--gap-12` | modifier | |
| `strand-stack--gap-16` | modifier | |
| `strand-stack--gap-20` | modifier | |
| `strand-stack--gap-24` | modifier | |
| `strand-stack--gap-32` | modifier | |
| `strand-stack--gap-40` | modifier | |
| `strand-stack--gap-48` | modifier | |
**Usage:**
```html
Section title
Cancel Save
```
---
### StatStrip
A row of labelled value cells, compared across rather than read singly. Not DataReadout, which renders ONE label-and-value pair as a unit with sizes tuned for a single dominant figure; here the cells are peers, so they are equal-width and their values share a baseline. Renders as a description list because that is what it is: a row of divs would give a screen reader six unrelated strings instead of three pairs.
| Class | Type | Description |
|---|---|---|
| `strand-stat-strip` | base | The row, as a . Equal fractions via minmax(0, 1fr) so a long value cannot widen its own column and break the comparison by position. |
| `strand-stat-strip--bordered` | modifier | Denser panel form: cells gain padding and a hairline rule between them, for a strip that is its own panel rather than a row inside a card. |
| `strand-stat-strip__cell` | child | One cell, wrapping a dt and its dd. The wrapper is what pairs them when several sit side by side; without it the association is only visual. |
| `strand-stat-strip__label` | child | The dt, in the overline pattern. gray-500 rather than the gray-400 a mockup specifies: a label is a word, so 14.2b makes it text at 4.5:1. |
| `strand-stat-strip__value` | child | The dd. Mono with tabular figures; wraps rather than widening its column. |
**Usage:**
```html
Group
East Bay
```
---
### Swatch
Color swatch specimen for design-token documentation. The swatch grid auto-fills with 160px tiles; each tile sets its own background/color inline (tone-dependent).
| Class | Type | Description |
|---|---|---|
| `strand-swatch-grid` | base | Swatch grid (auto-fill, 160px minimum tiles). |
| `strand-swatch` | base | Single color tile with border + min-height; background/color set inline. |
| `strand-swatch__name` | child | Token name (mono 10px uppercase). |
| `strand-swatch__hex` | child | Hex value (mono 11px, opacity 0.75). |
**Usage:**
```html
```
---
### Switch
Binary toggle. aria-checked on the track carries the state; disabled on the track dims the row.
| Class | Type | Description |
|---|---|---|
| `strand-switch` | base | Label wrapper element. |
| `strand-switch__track` | child | Track button element with role="switch". |
| `strand-switch__thumb` | child | Sliding thumb indicator. |
| `strand-switch__label` | child | Text label. |
| `strand-switch--compact` | modifier | |
**Usage:**
```html
Dark mode
```
---
### TabBar
The persistent viewport-anchored navigation an application shell takes on a touch viewport. Implements design-language.md 19.1.1, which is the CONDITION selecting between this and the hamburger in 19.1: a content surface collapses to a hamburger, an application shell with three to five top-level destinations anchors them in 14.8's easy band. Read 19.1.1 before using this, because the commonest misuse is a tab bar on a content surface, where it costs 76px of every screen forever. Not Tabs, which switches content panels inside one view (19.3). Not ActionDock, which carries the one ACTION a view produces rather than destinations. 19.1.1 does not forbid the two coexisting; it forbids stacking them into a wall at the bottom of the viewport and requires a surface wanting both to DECIDE which belongs nearer the thumb. Mutually exclusive by state is a legal answer: destinations at rest, the dock taking the band only while a commitment is live, then yielding it back. Paints an OPAQUE ground by default: its labels are small text owing 4.5:1, and behind a translucent bar the effective background is whatever is scrolled underneath, so the ratio would change with scroll position. Geometry is tunable without overriding classes via --strand-tabbar-justify, --strand-tabbar-pad-block-start, --strand-tabbar-pad-inline, --strand-tabbar-item-size, --strand-tabbar-item-gap, --strand-tabbar-label-size and --strand-tabbar-label-tracking; the label token does not add a rung to the type scale, it lets one consumer size one bar.
| Class | Type | Description |
|---|---|---|
| `strand-tabbar` | base | Bar root, a nav landmark. Fixed to the viewport's bottom edge so its position is a function of the viewport and no scroll can move it out of reach, with the safe-area inset so it clears the home indicator on a notched phone. Give it an aria-label; an unnamed nav is one a screen reader user tells apart by guessing. |
| `strand-tabbar__item` | child | One destination. A link when it has a href, so middle-click and open-in-new-tab keep working; a button only when there is genuinely no URL. Minimum 44x44 per 14.7, measured on the item rather than inferred from the bar's height. |
| `strand-tabbar__icon` | child | Decorative glyph, 20px. aria-hidden: the label already names the destination. |
| `strand-tabbar__label` | child | Destination name. text-xs with wider tracking, uppercase mono. Wraps rather than truncating, because a destination the user cannot read is not a destination; if a label does not fit, the surface has too many destinations and 19.1.1's count test already refuses it. |
**Usage:**
```html
... Discover
Calendar
...
```
---
### Table
Tabular data display with sortable headers.
| Class | Type | Description |
|---|---|---|
| `strand-table-wrapper` | base | Responsive scroll wrapper. |
| `strand-table` | base | Base table element. |
| `strand-table__head` | child | Table header group (thead). |
| `strand-table__body` | child | Table body group (tbody). |
| `strand-table__row` | child | Table row with hover highlight. |
| `strand-table__th` | child | Table header cell (monospaced, uppercase, tracked). |
| `strand-table__td` | child | Table data cell. |
| `strand-table__sort-btn` | child | Sortable column header button. |
| `strand-table__sort-indicator` | child | Sort direction indicator. |
| `strand-table__caption` | child | |
| `strand-table__row--empty` | child | |
**Usage:**
```html
```
---
### Tabs
Content switching with accessible tab pattern.
| Class | Type | Description |
|---|---|---|
| `strand-tabs` | base | Tab container. |
| `strand-tabs__tab` | child | Individual tab button; aria-selected="true" paints the active one. |
| `strand-tabs__panel--reveal` | child | Panel entrance animation. |
| `strand-tabs--instrument` | modifier | Instrument viewport variant for tabs. |
**Usage:**
```html
```
---
### Tag
Categorization label with optional remove button.
| Class | Type | Description |
|---|---|---|
| `strand-tag` | base | Base tag element. |
| `strand-tag__text` | child | Tag text content. |
| `strand-tag__remove` | child | Remove button. |
| `strand-tag--solid` | modifier | Solid filled variant. |
| `strand-tag--outlined` | modifier | Outlined variant. |
| `strand-tag--default` | modifier | Default color. |
| `strand-tag--teal` | modifier | Teal color. |
| `strand-tag--blue` | modifier | Blue color. |
| `strand-tag--amber` | modifier | Amber color. |
| `strand-tag--red` | modifier | Red color. |
**Usage:**
```html
Design
```
---
### Textarea
Multi-line text entry with optional character count.
| Class | Type | Description |
|---|---|---|
| `strand-textarea` | base | Wrapper element for the textarea. |
| `strand-textarea__field` | child | The native textarea element. |
| `strand-textarea__count` | child | Character count display. |
| `strand-textarea--error` | modifier | Error state. |
| `strand-textarea--disabled` | modifier | Disabled state. |
| `strand-textarea--auto-resize` | modifier | Auto-resize modifier. |
**Usage:**
```html
```
---
### Toast
Transient notification with status variants.
| Class | Type | Description |
|---|---|---|
| `strand-toast` | base | Base toast element. |
| `strand-toast__container` | child | Fixed stacking container (bottom-right). |
| `strand-toast__status` | child | Status prefix label. |
| `strand-toast__message` | child | Message text. |
| `strand-toast__dismiss` | child | Dismiss button. |
| `strand-toast--info` | modifier | Info status. |
| `strand-toast--success` | modifier | Success status. |
| `strand-toast--warning` | modifier | Warning status. |
| `strand-toast--error` | modifier | Error status. |
**Usage:**
```html
INFO
Changes saved.
×
```
---
### TokenSpecimen
Spacing/radius/shadow token specimen tiles. Each tile pairs a visual (spacer bar, rounded box, or shadow tile) with mono labels. Visual dimensions are set inline per token.
| Class | Type | Description |
|---|---|---|
| `strand-token-specimen-grid` | base | Specimen grid (auto-fill, 132px minimum tiles). |
| `strand-token-specimen` | base | Single token specimen (vertical stack + mono labels). |
| `strand-token-specimen__spacer` | child | Horizontal spacer bar (blue-primary); width set inline. |
| `strand-token-specimen__box` | child | 64x64 box; radius and box-shadow set inline per specimen. |
**Usage:**
```html
```
---
### Tooltip
Contextual hint with position variants.
| Class | Type | Description |
|---|---|---|
| `strand-tooltip__wrapper` | child | Wrapper for the trigger element. |
| `strand-tooltip` | base | Tooltip content element. |
| `strand-tooltip--top` | modifier | Position above trigger. |
| `strand-tooltip--right` | modifier | Position to the right. |
| `strand-tooltip--bottom` | modifier | Position below trigger. |
| `strand-tooltip--left` | modifier | Position to the left. |
| `strand-tooltip--visible` | modifier | Show the tooltip. |
**Usage:**
```html
Hover me
Helpful tip
```
---
### TypeSpecimen
Typography specimen. Stacks a display line on top of a mono meta row; siblings are separated by dashed dividers.
| Class | Type | Description |
|---|---|---|
| `strand-type-specimen` | base | Specimen container (vertical stack with dashed top border). |
| `strand-type-specimen__meta` | child | Mono meta row; inline children highlight in blue-primary. |
**Usage:**
```html
The quick brown fox
Inter 48px weight-300 tracking-tight
```
---
### Global (Utilities, Molecules, Typography)
Utilities, molecules, typography, and empty states from static.css.
| Class | Description |
|---|---|
| `strand-static` | Presentation mode: full opacity, no transitions. |
| `strand-viewport` | Recessed viewport for component previews. |
| `strand-viewport--flex` | Flex layout viewport (center-aligned, gap-4, wrap). |
| `strand-viewport--flex-col` | Flex column layout viewport. |
| `strand-viewport--frosted` | Frosted glass viewport variant. |
| `strand-glass-surface` | Frosted-glass treatment for any surface. |
| `strand-overline` | Monospace uppercase tracked label (specimen label pattern). |
| `strand-overline--accent` | Accent (blue) overline variant. |
| `strand-overline--pulse` | Overline with animated pulse dot prefix. |
| `strand-headline` | Display heading (mono uppercase, light weight). |
| `strand-headline--xl` | Hero-size headline (fluid 2.5-5rem). |
| `strand-headline--lg` | Section-size headline (fluid 1.5-2.5rem). |
| `strand-headline--md` | Medium headline size. |
| `strand-headline--mono` | Mono-family headline with sentence case. |
| `strand-headline--gradient` | Gradient text fill for hero headlines. |
| `strand-title` | Human voice display heading (sans-serif, light). |
| `strand-lead` | Intro paragraph (text-lg, gray-500, max 50ch). |
| `strand-text-secondary` | Caption/description text (text-sm, gray-500). |
| `strand-text-secondary--xs` | Extra-small secondary text for metadata. |
| `strand-font-mono` | Monospace font-family utility for inline meta rows and cadence lines. |
| `strand-text-sm` | Font-size utility: small step (text-sm). Pure size lever with no color change, for shrinking a value such as a URL, code, or id to fit a constrained space. Use instead of strand-text-secondary when the text must keep its primary color. |
| `strand-text-xs` | Font-size utility: extra-small step (text-xs). Pure size lever with no color change. |
| `strand-break-anywhere` | Text-flow utility: overflow-wrap: anywhere. Wraps a long unbreakable string (URL, hash, id, token) inside a constrained box instead of overflowing. |
| `strand-nowrap` | Text-flow utility: white-space: nowrap. Keeps a short data atom (date, amount, id) on one line so a squeezed table or flex row wraps its prose neighbors instead. The inverse of strand-break-anywhere. |
| `strand-pt-1` | Padding-top: space-1. |
| `strand-pt-2` | Padding-top: space-2. |
| `strand-pt-3` | Padding-top: space-3. |
| `strand-pt-4` | Padding-top: space-4. |
| `strand-pt-5` | Padding-top: space-5. |
| `strand-pt-6` | Padding-top: space-6. |
| `strand-pt-8` | Padding-top: space-8. |
| `strand-pb-1` | Padding-bottom: space-1. |
| `strand-pb-2` | Padding-bottom: space-2. |
| `strand-pb-3` | Padding-bottom: space-3. |
| `strand-pb-4` | Padding-bottom: space-4. |
| `strand-pb-5` | Padding-bottom: space-5. |
| `strand-pb-6` | Padding-bottom: space-6. |
| `strand-pb-8` | Padding-bottom: space-8. |
| `strand-py-1` | Padding block (top+bottom): space-1. |
| `strand-py-2` | Padding block (top+bottom): space-2. |
| `strand-py-3` | Padding block (top+bottom): space-3. |
| `strand-py-4` | Padding block (top+bottom): space-4. |
| `strand-py-5` | Padding block (top+bottom): space-5. |
| `strand-py-6` | Padding block (top+bottom): space-6. |
| `strand-py-8` | Padding block (top+bottom): space-8. |
| `strand-inline-flex` | Inline flex row for a small content-sized cluster (icon + label, nav slot); centers items with a space-2 gap. Unlike strand-stack it shrink-wraps rather than filling. |
| `strand-italic` | font-style: italic utility for a single emphasized run (e.g. an edited marker). |
| `strand-list-reset` | Strips default list chrome (list-style/margin/padding) so a semantic ul/ol can carry strand-stack layout without browser bullets or indent. |
| `strand-is-disabled` | Non-interactive visual state (opacity + pointer-events:none) for a control whose action is unavailable; pair with aria-disabled/disabled. |
| `strand-link--inherit` | Link modifier: inherit the surrounding text color and drop the underline gradient, for a link that should read as body/heading text (e.g. a whole card title wrapped in an anchor). |
| `strand-embed-16x9` | Responsive 16:9 media box; the child iframe fills it absolutely so no intrinsic-size inline styles are needed for a video or map embed. |
| `strand-page--centered` | Full-viewport single-card layout (min-height:100vh, flex-centered) for token/confirmation pages (rate-via-email, unsubscribe) with no bespoke page CSS. |
| `strand-value` | Value tone base: tabular numerals for aligned figures. Compose with a tone modifier onto any text node holding a money or signed figure (table cell, data-readout value, kv value). |
| `strand-value--positive` | Value tone: money in (credit, surplus, money kept) in green-positive-deep. The tone color wins over the host component's own color wherever it is composed. |
| `strand-value--negative` | Value tone: money out (debit, overage, shortfall) in red-alert-deep. The tone color wins over the host component's own color wherever it is composed. |
| `strand-code-name` | Mono identifier heading (component names, API ids). |
| `strand-heading--sm` | Section heading inside cards (text-lg, medium). |
| `strand-sr-only` | Visually hidden, accessible to screen readers. |
| `strand-skip-link` | Bypass-blocks link: visually hidden until focused, then a visible control at the top of the viewport. Give it an href to your main landmark. |
| `strand-text-center` | Center text alignment. |
| `strand-section-header` | Section heading group with bottom margin. |
| `strand-step-indicator` | Numbered position indicator (32px circle). |
| `strand-steps-connected` | Visual connectors between step cards. |
| `strand-card-section` | Card sub-section with border and space-between. |
| `strand-kv` | Key-value row (label + value, space-between). |
| `strand-kv__label` | Key-value label (mono uppercase). |
| `strand-kv__value` | Key-value data (mono, tabular-nums). |
| `strand-kv__value--status` | Status-colored key-value data. |
| `strand-kv--editorial` | Editorial modifier: card-metadata rendering with sans Blue-midnight values and dashed divider. Default strand-kv stays mono-tabular for instrument readouts. |
| `strand-log` | Diagnostic log entry row. |
| `strand-log__time` | Log timestamp. |
| `strand-log__status` | Log status label. |
| `strand-log__status--complete` | Complete log status (teal). |
| `strand-log__status--process` | In-process log status (blue). |
| `strand-log__status--warning` | Warning log status (amber). |
| `strand-log__status--error` | Error log status (red). |
| `strand-metric-row` | Centered metric group with responsive gap. |
| `strand-bar-chart` | Bar chart container. |
| `strand-bar-chart__col` | Bar chart column. |
| `strand-bar-chart__bar` | Bar chart bar element. |
| `strand-bar-chart__amount` | Bar chart amount label. |
| `strand-bar-chart__label` | Bar chart axis label. |
| `strand-footer` | Page footer with border-top. |
| `strand-footer__nav` | Footer navigation links. |
| `strand-footer__link` | Footer link (mono, xs, tracked). |
| `strand-footer__copy` | Footer copyright text. |
| `strand-form-grid` | Form layout grid with consistent gap. |
| `strand-form-row` | Side-by-side form fields (responsive). |
| `strand-honeypot` | Hidden honeypot field for bot prevention. |
| `strand-hero-bg` | Full-bleed hero background container. |
| `strand-pulse` | Pulsing alive indicator dot. |
| `strand-auth-indicator` | Signed-in text indicator for nav. |
| `strand-auth-avatar` | Small avatar circle for nav. |
| `strand-status-chip` | Inline status classification pill. A flex container, so an icon placed before the label can never break onto its own line and is spaced from it automatically; put the glyph first and the text after, with no wrapper and no utility classes. The label itself still wraps when the chip is narrow. |
| `strand-status-chip--live` | Live status chip (teal tint). |
| `strand-status-chip--neutral` | Neutral status chip (gray tint). |
| `strand-status-chip--accent` | Accent status chip (blue tint). |
| `strand-status-chip--caution` | Caution status chip (amber tint). |
| `strand-status-chip--committed` | Committed status chip (teal-vital, translucent fill + border). Signals a post-RSVP commitment. |
| `strand-idle-readout` | Empty-state data readout showing placeholder. |
| `strand-empty-collection` | Empty list/grid state with centered message. |
| `strand-empty-collection__message` | Empty collection message text. |
| `strand-empty-collection__action` | Empty collection call-to-action link. |
| `strand-empty-search` | Empty search results state. |
| `strand-empty-search__count` | Empty search count (e.g. '0 matches'). |
| `strand-empty-search__suggestion` | Empty search suggestion text. |
| `strand-block` | display: block utility. |
| `strand-flex-1` | flex: 1 utility. |
| `strand-min-w-0` | min-width: 0 utility. |
| `strand-full-width` | width: 100% utility. |
| `strand-mt-1` | Margin-top: space-1. |
| `strand-mt-2` | Margin-top: space-2. |
| `strand-mt-3` | Margin-top: space-3. |
| `strand-mt-4` | Margin-top: space-4. |
| `strand-mt-5` | Margin-top: space-5. |
| `strand-mt-6` | Margin-top: space-6. |
| `strand-mt-8` | Margin-top: space-8. |
| `strand-mb-1` | Margin-bottom: space-1. |
| `strand-mb-2` | Margin-bottom: space-2. |
| `strand-mb-3` | Margin-bottom: space-3. |
| `strand-mb-4` | Margin-bottom: space-4. |
| `strand-mb-5` | Margin-bottom: space-5. |
| `strand-mb-6` | Margin-bottom: space-6. |
| `strand-mb-8` | Margin-bottom: space-8. |
| `strand-mx-auto` | Horizontal auto margins for centering. |
| `strand-m-0` | Margin: 0. Strips a browser default margin (e.g. a paragraph inside a stack that already owns the gap) so the element sits flush without an inline style. |
| `strand-hide-below-sm` | Hidden below 640px. Pairs exactly with strand-hide-from-sm: the two are complements, so a pair covers every viewport once with no overlap and no gap. Hide-only by design; an element is shown by not hiding it, because a matching show utility would have to guess the element's natural display and would flatten a flex or grid container. |
| `strand-hide-from-sm` | Hidden at 640px and above. |
| `strand-hide-below-md` | Hidden below 768px. The desktop half of a two-presentation control: put both in the markup and let CSS choose, rather than measuring the viewport in JavaScript, which renders the control a frame late and shifts whatever region it lands in. |
| `strand-hide-from-md` | Hidden at 768px and above. The mobile half of the same pair. |
| `strand-hide-below-lg` | Hidden below 1024px. |
| `strand-hide-from-lg` | Hidden at 1024px and above. |
| `strand-hide-below-xl` | Hidden below 1280px. |
| `strand-hide-from-xl` | Hidden at 1280px and above. |
| `strand-truncate` | Single-line ellipsis. Pair with strand-min-w-0 on a flex child, or the line never shrinks enough to truncate. |
| `strand-flex-none` | The shrink-proof pair of strand-flex-1, for an item that must keep its content width (a count, a timestamp). Note strand-truncate alone does NOT protect a flex item: its overflow: hidden resets min-width: auto to 0, which is exactly what re-enables shrinking. |
| `strand-nav-offset` | Top padding clearing a fixed glass nav, for the first content section on a page that uses strand-nav--glass. Without it the nav overlaps that section's first line. |
| `strand-hero-grid` | Hero layout grid. |
| `strand-bar-chart--sm` | Compact bar chart, 96px. For dense contexts; the default height is 160px because at 96 the usable bar range collapses to about 10px and a 2.5:1 data ratio becomes a 6px difference. |
| `strand-bar-chart--lg` | Large bar chart, 192px. For primary readouts and large displays. |
| `strand-tabbar-offset` | Reserves the space a fixed bottom tab bar occupies, so the last item of a list is not permanently underneath the navigation. Applied to the SCROLLING CONTENT, not to the bar, which is why it is a utility rather than part of the component. Shares one token with the bar so a taller bar cannot outgrow its reservation. |
| `strand-sticky` | A region that scrolls with the document until it reaches its offset, then holds: a filter rail beside a result list, a day rail beside a schedule, a commitment rail beside a long detail page. Offset is --strand-sticky-top (default space-6), a custom property rather than a set of utilities because the value a consumer needs is whatever their fixed chrome occupies. CAUTION: a sticky element is positioned against its nearest scrollport, and ANY ancestor with overflow: hidden becomes one, so the element sticks to a box that never scrolls and looks exactly like sticky being ignored. strand-grid uses overflow: clip for this reason; clip clips identically and creates no scrollport. |
| `strand-scroll-row` | A single row that scrolls sideways instead of wrapping: a mobile filter strip, a chip rail, any horizontal set that must stay one line at 390px. strand-stack--horizontal plus strand-stack--wrap is the obvious composition and the wrong one, because wrapping is precisely what this must not do. It SCROLLS rather than clipping, which is a deliberate divergence from any mockup specifying overflow: hidden with nowrap: a filter the reader cannot reach is not a filter. Children get flex-shrink: 0 and scroll-snap-align automatically, so they keep their label width and the row scrolls instead of squeezing. Scrollbar hidden; content stays reachable by drag, wheel and keyboard focus. |
| `strand-clip` | Clips children to the container's own rounded corners: the mechanical consequence of sanctioning rounded surfaces, since a square-cornered child flush against a rounded parent overhangs it exactly at the corners. Uses overflow: clip rather than hidden, because hidden also makes the element a SCROLL CONTAINER and would silently break every position:sticky element inside it. A genuinely scrolling region is overflow: auto and a deliberate decision, not this. |