@agent-ui-kit/components 0.0.3

package/dist/controls/radio/radio.js

@@ -0,0 +1,75 @@
+// radio.ts — UIRadioElement, the radio-button leaf of the Indicator family (Wave 1, S3).
+//
+// Extends UIIndicatorElement for the boolean form value, the checked-state machine + ARIA (ariaChecked,
+// :state(checked)), the toggle via pressActivation + click, and the widget-box geometry seam (LLD-C1..C4).
+// The leaf provides: `static role = 'radio'`; the dot glyph in a circular --md-sys-compact box (radio.css);
+// an optional label slot (the default slot); and group coordination via the `grouped()` hook (LLD-C5).
+//
+// When inside a `ui-radio-group`, the radio:
+//   · Prevents clicking an already-checked radio from unchecking it (radio-button semantics: only selecting
+//     another radio deselects the current one; the group manages exclusivity).
+//   · Emits `change` from the base toggle (unchecked → checked) so the group's delegated listener commits
+//     the selection, clears siblings, and updates the group's form value.
+// Without a group parent, the radio behaves like a standalone boolean indicator (useful for single-item
+// "accept" patterns, though lacking a group value owner; the decomp rules the group as canonical).
+//
+// Layer: controls/ — imports controls/_base + dom + traits (inward-only ✓).
+import { UIIndicatorElement } from "../_base/indicator-element.js";
+export class UIRadioElement extends UIIndicatorElement {
+    /**
+     * LLD-C2: ARIA role for this leaf — `internals.role` is set by the UIIndicatorElement base
+     * from this declaration in `connected()`.
+     */
+    static role = 'radio';
+    /**
+     * LLD-C5: group wiring hook — called from `connected()` after all base wiring is in place.
+     * When this radio is nested inside a `ui-radio-group`, registers a capture-phase click guard:
+     * if the radio is already checked, the click is stopped (via stopImmediatePropagation) before it
+     * reaches the base's bubble-phase toggle handler. This enforces the radio-button invariant that a
+     * selected radio cannot be deselected by clicking — only by selecting another radio in the group.
+     *
+     * Without a group parent, this is a no-op and the base toggle runs normally (full checkbox semantics:
+     * click toggles unchecked ↔ checked).
+     */
+    grouped() {
+        // Detect any UIRadioGroupElement (or subclass) in the ancestor chain via the well-known
+        // data attribute marker that UIRadioGroupElement.connected() sets on itself. Using a CSS
+        // attribute selector avoids a circular import (radio-group.ts ← radio.ts circular dep) and
+        // works with any subclass of UIRadioGroupElement, including probe subclasses in tests.
+        const group = this.closest('[data-radio-group]');
+        if (!group)
+            return;
+        // Capture-phase listener: runs BEFORE the base's bubble-phase click → toggle. If the radio is
+        // already checked, stopImmediatePropagation cancels all subsequent listeners for this click event
+        // (base toggle, group delegation) — the radio stays checked. For unchecked radios, this is a no-op:
+        // the base toggle runs normally (sets checked=true, emits input + change), then the change event
+        // bubbles to the group for exclusivity + form-value commit.
+        this.listen(this, 'click', (event) => {
+            if (this.effectiveDisabled())
+                return;
+            if (this.checked)
+                event.stopImmediatePropagation();
+        }, { capture: true });
+        // Tabindex correction — load-bearing for the LATE-APPENDED radio (TKT-0068 item 3, measured).
+        // For a same-subtree connect the ADR-0121 `data-roving` deferral already covers this: rovingFocus's
+        // applyTabindexes stamps every item it manages, and tabbable defers its tabIndex=0 write on stamped
+        // hosts. But a radio appended to an ALREADY-connected group was never stamped (applyTabindexes ran
+        // before it existed), so tabbable sets 0 and the group would grow a second tab stop. We correct
+        // non-roving radios back to -1 here, AFTER tabbable has run (grouped() is called at the END of
+        // connected()). Pinned by radio-group.test.ts's `group-tabindex-late-append` (mutation-verified).
+        //
+        // Which radio deserves tabIndex=0? The checked one (matches rovingFocus initialIndex), or the
+        // first sibling when nothing is checked. `this === firstOrChecked` → leave at 0; else → -1.
+        const siblings = [...group.children].filter(
+        // Use the concrete class reference (UIRadioElement is in scope; this is a method body, not a
+        // class decorator — no circular-reference issue at call time).
+        (el) => el instanceof UIRadioElement);
+        const checkedSibling = siblings.find((r) => r.checked);
+        const roving = checkedSibling ?? siblings[0];
+        if (roving && this !== roving) {
+            this.tabIndex = -1;
+        }
+    }
+}
+if (!customElements.get('ui-radio'))
+    customElements.define('ui-radio', UIRadioElement);

package/dist/controls/ramp/ramp.css

@@ -0,0 +1,75 @@
+/* ramp.css — ui-ramp, the Display-class ordered-color-series leaf (LLD-C5, token-surfaces.lld.md §3.2;
+ * SPEC-R6/R13/R14/R15/R16). Two clearly-SECTIONED blocks:
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-ramp)` (specificity 0,0,0) declares the `--ui-ramp-*` chain: the
+ *       whole-shape floor (SPEC-R13 AC1 — an `8em` `min-inline-size` so a bare strip never collapses), the
+ *       per-cell box size (the swatch-cell precedent), the hairline border, and the density-RESPONSIVE gap.
+ *   [2] STYLES BLOCK — `@scope (ui-ramp)` consumes ONLY `--ui-ramp-*` (∪ the shared `--md-sys-color-*`/
+ *       `--md-sys-typescale-*` namespaces). Display-class (SPEC-R16): no `[size]`/`[scale]` row.
+ *
+ * The strip WRAPS rather than overflowing its container (SPEC-R6 AC2, `flex-wrap: wrap`).
+ *
+ * RTL (SPEC-R15): the strip keeps PHYSICAL `flex-direction: row` — a tonal ramp reads light→dark
+ * left-to-right regardless of locale (the `ui-sparkline` series-direction precedent); labels/values inside
+ * each cell stay logical text (documented in ramp.md).
+ *
+ * WHCM (SPEC-R14): same border-degradation honesty as swatch — a color box cannot paint under
+ * `forced-colors: active`; it degrades to a `CanvasText` hairline, never a fake system color.
+ *
+ * Standalone stylesheet — linked via the component-styles barrel; NEVER injected from ramp.ts
+ * (behaviour-only `.ts`, no runtime style injection — plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-ramp) declares --ui-ramp-* ════════════════ */
+
+:where(ui-ramp) {
+  --ui-ramp-cell-size: 2rem; /* the swatch-cell box (whole-shape) */
+  --ui-ramp-border: 1px solid var(--md-sys-color-neutral-outline-variant);
+  --ui-ramp-radius: var(--md-sys-shape-corner-base);
+  --ui-ramp-gap: var(--md-sys-space-xs); /* rides [density] for free (ADR-0103) */
+  --ui-ramp-min-inline-size: 8em; /* the whole-shape floor (SPEC-R13 AC1) — a strip never collapses */
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-ramp) consumes ONLY --ui-ramp-* ════════════════ */
+
+@scope (ui-ramp) {
+  :scope {
+    display: flex;
+    /* `flex-direction: row` alone is NOT physical — CSS Flexbox's "row" is the INLINE axis, which itself
+     * mirrors under `dir="rtl"`. `direction: ltr` is what actually pins the main axis to the physical
+     * left-to-right series order regardless of locale (SPEC-R15 AC1) — a tonal ramp reads light→dark
+     * left-to-right in both locales, the `ui-sparkline` SVG-coordinate precedent, generalized to flex. */
+    direction: ltr;
+    flex-wrap: wrap; /* a strip WRAPS, never overflows (SPEC-R6 AC2) */
+    gap: var(--ui-ramp-gap);
+    min-inline-size: var(--ui-ramp-min-inline-size);
+  }
+
+  :scope [data-part='cell'] {
+    display: grid;
+    justify-items: center;
+    gap: 2px;
+  }
+
+  :scope [data-part='box'] {
+    inline-size: var(--ui-ramp-cell-size);
+    block-size: var(--ui-ramp-cell-size);
+    border: var(--ui-ramp-border);
+    border-radius: var(--ui-ramp-radius);
+    box-sizing: border-box;
+  }
+
+  :scope [data-part='step-label'],
+  :scope [data-part='value'] {
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    text-align: center;
+  }
+
+  @media (forced-colors: active) {
+    :scope [data-part='box'] {
+      background: transparent !important;
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/controls/ramp/ramp.d.ts

@@ -0,0 +1,29 @@
+import { UIElement, type ReactiveProps } from '../../dom/index.js';
+import { type TokenEntry } from '../_token-surface/token-surface.js';
+declare const props: {
+    steps: import("../../index.js").PropConfig<TokenEntry[]>;
+    label: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    scheme: import("../../index.js").PropConfig<"auto" | "light" | "dark">;
+};
+export interface UIRampElement extends ReactiveProps<typeof props> {
+}
+export declare class UIRampElement extends UIElement {
+    #private;
+    static props: {
+        steps: import("../../index.js").PropConfig<TokenEntry[]>;
+        label: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        scheme: import("../../index.js").PropConfig<"auto" | "light" | "dark">;
+    };
+    protected connected(): void;
+}
+export {};

package/dist/controls/ramp/ramp.js

@@ -0,0 +1,72 @@
+// ramp.ts — UIRampElement, the Display-class ordered-color-series leaf (LLD-C4, token-surfaces.lld.md §3.2;
+// SPEC-R5…R8; ADR-0118 cl.1/2/4). BEHAVIOUR + props + list-semantics ARIA + the component-built cell strip +
+// self-define ONLY — the value-lane/hardening logic lives in the shared `_token-surface/token-surface.ts`
+// (LLD-C1), the strip/cell geometry in ramp.css.
+//
+// A ramp is data, not decoration (ADR-0118 cl.4): the host carries `role=list` via `ElementInternals` (the
+// `ui-bar-chart`/`ui-list` precedent) — never a host attribute — named by `label` when non-empty (SPEC-R8). Each
+// rendered cell is a real `role=listitem` element whose text content is its label plus the printed value; the
+// color box (`[data-part='box']`) is `aria-hidden` — color cannot be announced, the printed label/value IS the
+// accessible datum (CVD-safe by construction — no step is color-encoded only).
+//
+// Content model — component-built cells, NOT host-as-grid (the chart family's whole-array precedent): `steps` is
+// display-only derived state (no positional reconcile — inert cells with no focus/selection worth reconciling),
+// so `render()` stays the inherited no-op and the steps effect rebuilds the full light-DOM cell list on every
+// `steps`/`scheme` change via `replaceChildren` (a whole-array swap, no incremental API — SPEC-R6).
+//
+// Imports inward only (controls → dom + the sibling shared helper).
+import { UIElement, prop } from "../../dom/index.js";
+import { cleanEntries, cssValue, tokenEntriesProp } from "../_token-surface/token-surface.js";
+const props = {
+    steps: tokenEntriesProp(), // { label: string; value: string }[] · safe JSON codec (LLD-C1) · default []
+    label: { ...prop.string(''), reflect: true }, // the strip's accessible name — SPEC-R8: unlabeled is legal, never a silent state
+    scheme: prop.enum(['auto', 'light', 'dark'], 'auto'), // pins the WHOLE strip's color-scheme resolution
+};
+export class UIRampElement extends UIElement {
+    static props = props;
+    connected() {
+        // List semantics (SPEC-R8, the `ui-bar-chart` precedent) — a constant semantic role, set directly (not
+        // inside an effect); re-set on each connect (idempotent).
+        this.internals.role = 'list';
+        // The label effect — `label` names the list when non-empty; an unlabeled list is legal (SPEC-R8 AC2 —
+        // the host stays role=list regardless, never aria-hidden, never a silent state).
+        this.effect(() => {
+            this.internals.ariaLabel = this.label || null;
+        });
+        // The steps effect (SPEC-R6/R7): whole-array derived state — every `steps`/`scheme` change rebuilds the
+        // full light-DOM cell list via one `replaceChildren`. `cleanEntries` runs again here (not just inside the
+        // codec), so a PROPERTY write of garbage never reaches the render path either (the SPEC-R7 property-write
+        // guard the codec alone cannot cover — the codec only guards the ATTRIBUTE path).
+        this.effect(() => {
+            const scheme = this.scheme;
+            const entries = cleanEntries(this.steps);
+            this.replaceChildren(...entries.map((step) => this.#cellNode(step, scheme)));
+        });
+    }
+    /**
+     * Build one component-owned strip cell: `box(aria-hidden) · step-label · value` (LLD-C4's markup). The
+     * listitem's combined text content is `{label}{value}` (the two real text spans — the accessible datum,
+     * SPEC-R8 AC1, the `ui-bar-chart` listitem-text precedent); the box is `aria-hidden` and carries the
+     * strip-shared `scheme` pin (colorScheme) exactly like swatch's own box.
+     */
+    #cellNode(step, scheme) {
+        const item = document.createElement('div');
+        item.setAttribute('role', 'listitem');
+        item.setAttribute('data-part', 'cell');
+        const box = document.createElement('span');
+        box.setAttribute('data-part', 'box');
+        box.setAttribute('aria-hidden', 'true');
+        box.style.background = cssValue(step.value);
+        box.style.colorScheme = scheme === 'auto' ? '' : scheme;
+        const stepLabel = document.createElement('span');
+        stepLabel.setAttribute('data-part', 'step-label');
+        stepLabel.textContent = step.label;
+        const value = document.createElement('span');
+        value.setAttribute('data-part', 'value');
+        value.textContent = step.value;
+        item.append(box, stepLabel, value);
+        return item;
+    }
+}
+if (!customElements.get('ui-ramp'))
+    customElements.define('ui-ramp', UIRampElement); // idempotent self-define

package/dist/controls/row/row.css

@@ -0,0 +1,152 @@
+/* row.css — ui-row, the single-file component stylesheet (ADR-0003) and the CANONICAL layout-primitive
+ * template (ui-column copies it with the axis flipped; ui-list/ui-grid follow the same shape). Two clearly-
+ * SECTIONED blocks, the button.css pattern applied to a layout container:
+ *
+ *   [1] TOKEN BLOCK  — `:where(ui-row)` (specificity 0,0,0) DECLARES the `--ui-row-*` chain: the flex grammar
+ *       (`align`/`justify`/`gap`/`wrap`) mapped to CSS keywords, plus the shared `--md-sys-shape-corner-base`. The
+ *       `[align]`/`[justify]`/`[gap]`/`[wrap]` attribute selectors (which reflect from the flexProps, s2)
+ *       REPOINT those tokens — `between` → `space-between`, `gap='md'` → `var(--md-sys-space-md)`, etc. This is
+ *       the ONE place a literal-union keyword crosses to its CSS value; it is a role-pure repoint, never an
+ *       inline style.
+ *   [2] STYLES BLOCK — `@scope (ui-row)` CONSUMES only the `--ui-row-*` chain (so the cross-family surface in
+ *       controls/_surface/container.css cleanly overrides nothing here, and a planted raw `--md-sys-color-*` would fail
+ *       css-hygiene). `display: flex; flex-direction: row` is the row IDENTITY (ADR-0016 cl.2 — direction is
+ *       the tag, not a prop). A `@container (inline-size …)` rule, GATED on `:scope:not([reflow='locked'])`
+ *       (ADR-0096), reflows the row to a COLUMN under a narrow ANCESTOR container width (ADR-0016 cl.4 —
+ *       intrinsic responsiveness, no breakpoint props; `reflow` defaults to `auto` so this stays the unchanged
+ *       default behavior — `reflow="locked"` pins the row horizontal), and a forced-colors block keeps the
+ *       layout neutral. The row does NOT establish that container itself (ADR-0100 — a row is intrinsically
+ *       sized, so it can never safely be a query container; see the shared container.css banner) — the
+ *       `@container` rule resolves against the nearest EXTERNALLY-SIZED ancestor boundary instead.
+ *
+ * The SURFACE (elevation/brightness plane) is NOT here — it lives once in the shared
+ * controls/_surface/container.css (the UIContainerElement base sheet, `@import`-ed FIRST by
+ * component-styles.css at s12), which also does NOT establish `container-type` on this element (ADR-0100)
+ * — that responsibility belongs to an externally-sized ancestor boundary, never the row itself. row.css adds
+ * ONLY the flex layout + the corner radius; it reads no `--md-sys-color-*` colour role at all (colour is
+ * delegated entirely to the shared surface seam).
+ *
+ * NO control height (geometry.md's `Container/layout` size-class): a layout primitive has no frame — spacing
+ * is the `--md-sys-space` ladder × `[density]` (the gap), never `--md-sys-height-*`. Standalone sheet — linked via
+ * the component-styles barrel (s12); NEVER injected from row.ts (behaviour-only `.ts`, plan §2).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-row) declares --ui-row-* ════════════════ */
+
+:where(ui-row) {
+  /* The flex grammar → CSS values; each default is the flexProps `values[0]` default (s2). The
+     literal-union → CSS-keyword crossing happens via the attribute repoints below. */
+  --ui-row-align: start; /* align (cross-axis) → align-items */
+  --ui-row-justify: start; /* justify (main-axis distribution) → justify-content */
+  --ui-row-gap: var(--md-sys-space-none); /* gap → the --md-sys-space density-responsive ladder (ADR-0015 cl.4) */
+  --ui-row-wrap: nowrap; /* wrap → flex-wrap (boolean presence) */
+
+  /* The corner radius — the shared fleet constant (ADR-0015 cl.5). Rounds the surface when a row sits on an
+     elevation/brightness plane; a transparent (unset-surface) row shows nothing, so it is harmless there. */
+  --ui-row-radius: var(--md-sys-shape-corner-base);
+}
+
+/* align → align-items. start/center/end/stretch/baseline are valid align-items keywords (the box-alignment
+   logical values), so the mapping is 1:1 — only the non-default members need a repoint. */
+:where(ui-row[align='center']) {
+  --ui-row-align: center;
+}
+:where(ui-row[align='end']) {
+  --ui-row-align: end;
+}
+:where(ui-row[align='stretch']) {
+  --ui-row-align: stretch;
+}
+:where(ui-row[align='baseline']) {
+  --ui-row-align: baseline;
+}
+
+/* justify → justify-content. start/center/end map 1:1; between/around/evenly cross to the `space-*` forms
+   (the one keyword translation in the grammar). */
+:where(ui-row[justify='center']) {
+  --ui-row-justify: center;
+}
+:where(ui-row[justify='end']) {
+  --ui-row-justify: end;
+}
+:where(ui-row[justify='between']) {
+  --ui-row-justify: space-between;
+}
+:where(ui-row[justify='around']) {
+  --ui-row-justify: space-around;
+}
+:where(ui-row[justify='evenly']) {
+  --ui-row-justify: space-evenly;
+}
+
+/* gap → a step on the --md-sys-space ladder (calc(<base px> * var(--md-sys-density)) — so a subtree [density]
+   re-multiplies the gutter; [scale] does NOT touch it, ADR-0015 cl.4). `none` is the default 0. */
+:where(ui-row[gap='xs']) {
+  --ui-row-gap: var(--md-sys-space-xs);
+}
+:where(ui-row[gap='sm']) {
+  --ui-row-gap: var(--md-sys-space-sm);
+}
+:where(ui-row[gap='md']) {
+  --ui-row-gap: var(--md-sys-space-md);
+}
+:where(ui-row[gap='lg']) {
+  --ui-row-gap: var(--md-sys-space-lg);
+}
+:where(ui-row[gap='xl']) {
+  --ui-row-gap: var(--md-sys-space-xl);
+}
+:where(ui-row[gap='2xl']) {
+  --ui-row-gap: var(--md-sys-space-2xl);
+}
+
+/* wrap → flex-wrap (boolean presence: the `wrap` attribute present ⇒ multi-line). */
+:where(ui-row[wrap]) {
+  --ui-row-wrap: wrap;
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-row) consumes ONLY --ui-row-* ════════════════ */
+
+@scope (ui-row) {
+  :scope {
+    display: flex;
+    flex-direction: row; /* the ROW identity — direction is the tag, not a prop (ADR-0016 cl.2) */
+    align-items: var(--ui-row-align);
+    justify-content: var(--ui-row-justify);
+    gap: var(--ui-row-gap);
+    flex-wrap: var(--ui-row-wrap);
+    box-sizing: border-box;
+    border-radius: var(--ui-row-radius);
+    /* NO block-size / padding-block — a layout primitive has no control frame (geometry.md Container/layout).
+       Height is content-driven; the gap is the only spacing lever. */
+  }
+
+  /* Container-query reflow (ADR-0016 cl.4) — intrinsic responsiveness with NO breakpoint props, PROP-GATED by
+     `reflow` (ADR-0096). The row establishes NO query container of its own (ADR-0100 — an intrinsically-sized
+     primitive can never safely be one; see container.css's banner), so this `@container` rule resolves against
+     the row's nearest EXTERNALLY-SIZED ancestor boundary (the composition it is dropped into — a mount
+     surface, app-shell, or any author frame that establishes `container-type: inline-size`): under a narrow
+     boundary the row WRAPS to a column, the ADR's named example.
+     The selector is `:scope:not([reflow='locked'])`, NOT bare `:scope`: absent/default `reflow` (ui-row
+     defaults `auto`, row.ts) KEEPS the existing narrow→stack behavior unchanged, while an explicit
+     `reflow="locked"` attribute PINS `flex-direction: row` even in a cramped container (ADR-0096 cl.2/3 — the
+     row leg is protective and stays default-on, unlike ui-column's default-off flip). The cross-engine smoke
+     proves this changes the computed flex-direction + the child layout px by resizing the WRAPPER (not the
+     viewport) — the context-free responsiveness proof. */
+  @container (inline-size < 24rem) {
+    :scope:not([reflow='locked']) {
+      flex-direction: column;
+    }
+  }
+
+  /* forced-colors (WHCM) — belt-and-braces with the shared container.css surface block: if the row carries
+     an elevation/brightness plane, keep it a system colour (`Canvas`) and drop the tonal wash, so a surfaced
+     row survives high-contrast mode and the wash never paints over system text. (The colour roles already
+     carry the WHCM mapping in the token layer, so this mostly guarantees the family's uniform discipline.) */
+  @media (forced-colors: active) {
+    :scope {
+      background-color: Canvas;
+      background-image: none;
+    }
+  }
+}

package/dist/controls/row/row.d.ts

@@ -0,0 +1,95 @@
+import { UIContainerElement } from '../../dom/container.js';
+import type { ReactiveProps } from '../../dom/index.js';
+declare const props: {
+    reflow: {
+        reflect: true;
+        type: import("../../index.js").PropType<"auto" | "locked">;
+        default: "auto" | "locked";
+        attribute?: string | false;
+    };
+    align: {
+        reflect: true;
+        type: import("../../index.js").PropType<"end" | "start" | "center" | "stretch" | "baseline">;
+        default: "end" | "start" | "center" | "stretch" | "baseline";
+        attribute?: string | false;
+    };
+    justify: {
+        reflect: true;
+        type: import("../../index.js").PropType<"end" | "start" | "center" | "between" | "around" | "evenly">;
+        default: "end" | "start" | "center" | "between" | "around" | "evenly";
+        attribute?: string | false;
+    };
+    gap: {
+        reflect: true;
+        type: import("../../index.js").PropType<"none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl">;
+        default: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
+        attribute?: string | false;
+    };
+    wrap: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+    elevation: {
+        reflect: true;
+        type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+        default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+        attribute?: string | false;
+    };
+    brightness: {
+        reflect: true;
+        type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+        default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+        attribute?: string | false;
+    };
+};
+export interface UIRowElement extends ReactiveProps<typeof props> {
+}
+export declare class UIRowElement extends UIContainerElement {
+    static props: {
+        reflow: {
+            reflect: true;
+            type: import("../../index.js").PropType<"auto" | "locked">;
+            default: "auto" | "locked";
+            attribute?: string | false;
+        };
+        align: {
+            reflect: true;
+            type: import("../../index.js").PropType<"end" | "start" | "center" | "stretch" | "baseline">;
+            default: "end" | "start" | "center" | "stretch" | "baseline";
+            attribute?: string | false;
+        };
+        justify: {
+            reflect: true;
+            type: import("../../index.js").PropType<"end" | "start" | "center" | "between" | "around" | "evenly">;
+            default: "end" | "start" | "center" | "between" | "around" | "evenly";
+            attribute?: string | false;
+        };
+        gap: {
+            reflect: true;
+            type: import("../../index.js").PropType<"none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl">;
+            default: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
+            attribute?: string | false;
+        };
+        wrap: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+        elevation: {
+            reflect: true;
+            type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+            default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+            attribute?: string | false;
+        };
+        brightness: {
+            reflect: true;
+            type: import("../../index.js").PropType<"0" | "1" | "2" | "3" | "-3" | "-2" | "-1">;
+            default: "0" | "1" | "2" | "3" | "-3" | "-2" | "-1";
+            attribute?: string | false;
+        };
+    };
+}
+export {};

package/dist/controls/row/row.js

@@ -0,0 +1,45 @@
+// row.ts — UIRowElement, the CANONICAL layout primitive (ADR-0016; decomp g9-containers slice s3). The
+// reference template the other flex primitives copy (ui-column flips the axis; ui-list adds list semantics).
+// BEHAVIOUR is deliberately MINIMAL — the whole component is `static props` + a self-define. Every visual
+// decision lives in row.css (the flex mapping) and the shared controls/_surface/container.css (the surface
+// plane + the container-query seam); the `.ts` holds zero layout/colour/runtime-style opinion (plan §2).
+//
+// Content model — host-as-flex (the ADR-0006 host-as-grid pattern, flex flavour): the user's light-DOM
+// children ARE the flex items, laid out directly by row.css's `@scope` block. ui-row does NOT `render()` a
+// wrapper over them, so `render()` stays the inherited no-op (returns nothing → the host render effect
+// commits nothing → the children are never clobbered).
+//
+// Props — the two SPREADABLE prop sets the container family shares (ADR-0013 no-prototype-merge precedent):
+// `UIContainerElement.surfaceProps` (elevation/brightness, ADR-0015) + `UIContainerElement.flexProps`
+// (align/justify/gap/wrap, ADR-0016). All six reflect, so the `[elevation]`/`[align]`/… attribute selectors
+// in the CSS apply to JS-set values too. Plus one element-local prop, `reflow` (ADR-0096, the ADR-0075
+// `stretch` precedent) — gates whether the ADR-0016 cl.4 container-query direction switch may fire; ui-row
+// defaults `auto` (unchanged behavior — its narrow→stack leg is protective).
+//
+// ARIA — NONE. ui-row is a pure layout container (a generic wrapper, like a `<div>`): it carries NO role
+// and no host aria-* attribute. Semantics ride the children; the row contributes none. (Contrast ui-list,
+// which sets `internals.role='list'`; row/column are non-semantic — direction is layout, not meaning.)
+//
+// Imports — `UIContainerElement` from the same dom layer (`controls → dom`, the allowed inward direction).
+// It is imported from `../../dom/container.ts` directly: the `dom/index.ts` barrel re-export of the
+// container base is the integration slice's job (decomp s12), so this slice does not depend on it.
+import { UIContainerElement } from "../../dom/container.js";
+import { prop } from "../../dom/index.js";
+// The layout primitive IS the shared grammar — surface axes + flex grammar, nothing more. Spread (not
+// inherited): props.ts has no static-props prototype merge, so the base hands these down as spreadable
+// schemas the subclass folds into its OWN `static props` (the order is surfaceProps then flexProps).
+const props = {
+    ...UIContainerElement.surfaceProps,
+    ...UIContainerElement.flexProps,
+    // reflow → gates the ADR-0016 cl.4 container-query direction switch (ADR-0096). Element-local, deliberately
+    // NOT folded into the shared `flexProps` (the ADR-0075 `stretch` precedent — `ui-list` has no `@container`
+    // rule and `ui-grid`'s auto-fit IS its own responsiveness, so both stay untouched). `auto` LEADS the array so
+    // it is both ui-row's default AND the invalid-value snap target — UNCHANGED behavior (the narrow→stack leg
+    // is protective, ADR-0096 cl.2). `locked` pins `flex-direction: row` regardless of a narrow container.
+    reflow: { ...prop.enum(['auto', 'locked'], 'auto'), reflect: true },
+};
+export class UIRowElement extends UIContainerElement {
+    static props = props;
+}
+if (!customElements.get('ui-row'))
+    customElements.define('ui-row', UIRowElement);

package/dist/controls/segment/segment.css

@@ -0,0 +1,66 @@
+/* segment.css — ui-segment, the child leaf of ui-segmented-control (ADR-0095 clause 3).
+ *
+ * `ui-segment` extends `UIRadioElement`, but `radio.css`'s `@scope (ui-radio)` rules do NOT match this new
+ * tag — a feature, not a gap: a segment shows no dot glyph to suppress at all. This stylesheet is
+ * deliberately SMALL: only the layout primitives + interaction affordance a segment owns REGARDLESS of
+ * which control hosts it (a centered full-cell flex box, cursor/selection hygiene, its own ADR-0009
+ * `:focus-visible` fleet ring). The Control-height SIZING (block-size/padding/font/line-height), the ink
+ * colours, the dividers, the hover/active washes, the moving selected-fill indicator, and the forced-colors
+ * inversion are all GROUP-owned concerns — they live in `segmented-control.css`'s compound selectors
+ * (`ui-segmented-control ui-segment`), the same "group restyles its children via a descendant compound
+ * selector, the child stays ignorant" split ADR-0086 established for the (now-retired) radio-group variant.
+ *
+ * Two sectioned blocks (ADR-0003):
+ *   [1] TOKEN BLOCK  — `:where(ui-segment)` — a genuine RESERVE (no design tokens needed yet: the segment's
+ *       own layout primitives below are geometry-agnostic; every SIZED value is the group's token chain).
+ *   [2] STYLES BLOCK — `@scope (ui-segment)` consumes only `--ui-segment-*` (empty today) ∪ the shared
+ *       focus-ring allowlist (`--md-sys-state-focus-ring-*`, `--md-sys-color-focus-ring` — ADR-0009).
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-segment) ════════════════ */
+
+:where(ui-segment) {
+  /* No design tokens: every sized value a segment renders (height/padding/font/ink/dividers/fill) is the
+     HOST segmented-control's own token chain, consumed via a descendant compound selector
+     (segmented-control.css). Reserved here for fleet discipline (the ADR-0003 two-block convention) and any
+     future segment-owned-only token. */
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-segment) ════════════════ */
+
+@scope (ui-segment) {
+  /* Host: a centered, full-cell flex box — the segment's OWN base layout, independent of which control
+     hosts it. `position:relative` is the containing block a future segment-owned pseudo-element could use
+     (none today — the moving indicator is the HOST's own `::before`, painted behind via z-index in
+     segmented-control.css). */
+  :scope {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    cursor: pointer;
+    -webkit-user-select: none; /* WebKit/Safari: prefix needed */
+    user-select: none;
+  }
+
+  /* The dot glyph a plain `ui-radio` would paint (`::before`, radio.css) never renders here — `ui-segment`
+     is a different tag; `@scope (ui-radio)` does not match it. Nothing to suppress. */
+
+  /* Focus ring (ADR-0009): the fleet-wide shared `:focus-visible` outline, reused as-is — the SAME tokens
+     `ui-radio`'s own ring reads (radio.css), so a segment and a plain radio look identically focused. Not
+     clipped: `ui-segmented-control` sets no `overflow:hidden` (would clip the ring). */
+  :scope:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--md-sys-color-focus-ring);
+    outline-offset: var(--md-sys-state-focus-ring-offset);
+  }
+
+  /* Forced colors (WHCM) — nothing segment-owned to invert here; the GROUP's compound selectors
+     (segmented-control.css) own the ink/fill inversion. Present for fleet discipline (every FACE control's
+     scope includes a forced-colors rule). */
+  @media (forced-colors: active) {
+    :scope {
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/controls/segment/segment.d.ts

@@ -0,0 +1,3 @@
+import { UIRadioElement } from '../radio/radio.js';
+export declare class UISegmentElement extends UIRadioElement {
+}

package/dist/controls/segment/segment.js

@@ -0,0 +1,26 @@
+// segment.ts — UISegmentElement, the child leaf of ui-segmented-control (ADR-0095 clause 3).
+//
+// Extends UIRadioElement DIRECTLY — adds NO new props, NO new behavior. Everything a segment needs (the
+// boolean form value + checked-state machine, pressActivation toggle, the `grouped()` click-guard +
+// tabindex-correction hook that finds ITS ancestor via the well-known `[data-radio-group]` marker any
+// `UIRadioGroupElement` subclass sets, `static role = 'radio'`) is inherited unchanged; `ui-segmented-
+// control`'s parent class (`UIRadioGroupElement`) finds its children via `instanceof UIRadioElement`
+// (radio-group.ts's `#radios()`), which this subclass satisfies by construction.
+//
+// The ENTIRE point of this class existing (T3's naming win) is the TAG, not new behavior: `<ui-segment>`
+// inside `<ui-segmented-control>` reads as a segmented control's own vocabulary, never leaking "radio" into
+// consumer markup. `radio.css`'s `@scope (ui-radio)` rules do not match `ui-segment` — a feature, not a
+// gap: the dot glyph radio.css suppresses in the old segmented variant simply never renders here (there is
+// no dot rule to suppress), so `ui-segment` authors its OWN small `segment.css` in THIS folder: a centered
+// full-cell flex layout + its own ADR-0009 `:focus-visible` fleet ring. `role='radio'` semantics are
+// inherited from the class. (This lives in its own `controls/segment/` folder, not inside
+// `controls/segmented-control/` — the family-coherence naming trip-wire's `name === folder ||
+// name.startsWith(folder + '-')` rule accepts `radio-group` inside `radio/` but has no prefix relationship
+// for `segment` inside `segmented-control/`; see segmented-control.ts's own note.)
+//
+// Layer: controls/ — imports controls/radio (inward-only ✓).
+import { UIRadioElement } from "../radio/radio.js";
+export class UISegmentElement extends UIRadioElement {
+}
+if (!customElements.get('ui-segment'))
+    customElements.define('ui-segment', UISegmentElement);