@agent-ui-kit/components 0.0.3

package/dist/controls/segmented-control/segmented-control.css

@@ -0,0 +1,189 @@
+/* segmented-control.css — ui-segmented-control, the joined-button single-select control stylesheet.
+ *
+ * ADR-0095 (authored from ADR-0092 §Alternatives-1; supersedes ADR-0086's `ui-radio-group[variant=
+ * 'segmented']` — a hard cutover, no alias). Every computed value ADR-0086's Acceptance enumerated carries
+ * over UNCHANGED, re-keyed onto the new tag/tokens: equal 1fr cells, `100%/count` indicator sizing,
+ * `transform`-only placement, `--md-sys-motion-duration-fast` + reduced-motion jump, the Control-height ramp with `h/2`
+ * inline pad and `line-height:1`, hover/active washes, `Highlight`/`HighlightText` forced-colors inversion.
+ * Since "segmented" IS this control's whole identity (not a variant gate), every selector below is
+ * UNCONDITIONAL — no `[variant='segmented']` qualifier anywhere (the ADR-0086 architecture's one CSS
+ * simplification: the tag itself is now the gate).
+ *
+ * Two sectioned blocks (ADR-0003):
+ *   [1] TOKEN BLOCK  — `:where(ui-segmented-control)` declares `--ui-segmented-control-*` (sole declarer,
+ *       the family-coherence naming law) from the Pattern-class Control-height ramp + colour roles.
+ *   [2] STYLES BLOCK — plain (non-`:where`) compound selectors — `ui-segmented-control` /
+ *       `ui-segmented-control ui-segment` — deliberately OUTSIDE `@scope`, so their specificity
+ *       ((0,1,0) / (0,1,1) / (0,1,2) for the `::before` pseudo-element forms) cleanly clears `ui-segment`'s
+ *       own `@scope (ui-segment) { :scope … }` rules ((0,1,0) / (0,1,1)) without `!important` (the ADR-0086
+ *       clause 2 mechanism, ported verbatim).
+ *
+ * Standalone stylesheet — linked via the component-styles barrel; NEVER injected from segmented-control.ts
+ * (behaviour-only `.ts`, no runtime style injection — plan §2). The `--ui-segmented-control-index`/`-count`
+ * custom properties consumed below are the ONE exception: reactive STATE written by segmented-control.ts
+ * (the `--value-pct` seam, range-element.ts:111), not injected style RULES.
+ */
+
+/* ════════════ [1] TOKEN BLOCK — :where(ui-segmented-control) (specificity 0,0,0) ════════════ */
+
+:where(ui-segmented-control) {
+  /* Geometry — the Pattern-class CONTROL-height ramp (geometry.md's `segmented-control` example,
+     geometry.md:133), NOT the Indicator's compact/widget ramp (ADR-0041, unused here). v1 ships the single
+     `md` register; an ancestor [scale] re-tables the row for free (ADR-0038). */
+  --ui-segmented-control-segment-height: var(--md-sys-height-md);
+  --ui-segmented-control-segment-font: var(--md-sys-font-md);
+
+  /* The outer rounded track (segments carry NO divider borders — Kim's ruling, see the styles block). */
+  --ui-segmented-control-track: var(--md-sys-color-neutral-outline);
+  --ui-segmented-control-radius: var(--md-sys-shape-corner-base);
+
+  /* The shared moving indicator's fill — the AA-safe accent role minted for the calendar (ADR-0048/0058),
+     reused here as the strongest fill-presence non-color signal (ADR-0057). */
+  --ui-segmented-control-fill: var(--md-sys-color-primary-selected);
+
+  /* Ink — selected (on the moving fill) vs unselected (text-channel neutral). */
+  --ui-segmented-control-ink-selected: var(--md-sys-color-primary-on-primary);
+  --ui-segmented-control-ink: var(--md-sys-color-neutral-on-surface-variant);
+
+  /* Unselected interaction washes — the text-channel hover/active ladder; the selected segment never reads
+     these (its fill is the stable moving indicator, not a hover affordance). */
+  --ui-segmented-control-bg-hover: var(--md-sys-color-primary-container-low);
+  --ui-segmented-control-bg-active: var(--md-sys-color-primary-container);
+
+  /* user-invalid (ADR-0051, inherited unchanged from UIRadioGroupElement — see segmented-control.ts's
+     header) — the danger track-border repoint. Appears only AFTER the first interaction (the
+     trackUserInvalid controller owns that timing; radio-group.ts's connected() toggles
+     :state(user-invalid) on this control's own internals). */
+  --ui-segmented-control-border-invalid: var(--md-sys-color-danger);
+}
+
+/* ═══════════ [2] STYLES — plain compound selectors (deliberately NOT :where/@scope) ═══════════ */
+
+/* The track — display:grid, equal cells, orientation-driven main axis. `position:relative` hosts the
+   shared `::before` indicator; NO `overflow:hidden` (would clip the focus ring). */
+ui-segmented-control {
+  display: grid;
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid var(--ui-segmented-control-track);
+  border-radius: var(--ui-segmented-control-radius);
+}
+
+/* user-invalid (ADR-0051) — the danger border, appearing only AFTER the first interaction. Unlike
+   ui-radio-group (no visual surface of its own), this control owns its own track border directly. */
+ui-segmented-control:state(user-invalid) {
+  border-color: var(--ui-segmented-control-border-invalid);
+}
+
+/* Orientation-driven main axis. `repeat(var(--count), 1fr)` is NOT usable — repeat()'s count must be a
+   literal integer — so the count-agnostic auto-flow / auto-track mechanism is the grounded path. */
+ui-segmented-control[orientation='horizontal'] {
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+ui-segmented-control[orientation='vertical'] {
+  grid-auto-rows: 1fr;
+}
+
+/* The shared moving indicator — ONE artifact (the host's own `::before`), never a per-segment background.
+   Sized to one cell via `--ui-segmented-control-count`; POSITIONED via `transform` (never grid-track
+   placement — grid-column/row snap, transform animates). Hidden until a selection exists. */
+ui-segmented-control::before {
+  content: '';
+  position: absolute;
+  z-index: 0; /* behind the segment text + focus ring (z-index:1 below) */
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  background: var(--ui-segmented-control-fill);
+  border-radius: calc(var(--ui-segmented-control-radius) - 1px); /* the inner radius; ends align to the track */
+  transition: transform var(--md-sys-motion-duration-fast) var(--md-sys-motion-easing-standard); /* consumed, not hardcoded */
+}
+@media (prefers-reduced-motion: reduce) {
+  ui-segmented-control::before {
+    transition: none; /* the indicator jumps instead of sliding */
+  }
+}
+ui-segmented-control[orientation='horizontal']::before {
+  inline-size: calc(100% / var(--ui-segmented-control-count, 1));
+  block-size: 100%;
+  transform: translateX(calc(var(--ui-segmented-control-index, 0) * 100%));
+}
+ui-segmented-control[orientation='vertical']::before {
+  inline-size: 100%;
+  block-size: calc(100% / var(--ui-segmented-control-count, 1));
+  transform: translateY(calc(var(--ui-segmented-control-index, 0) * 100%));
+}
+/* No segment checked → hide the indicator entirely (it appears instantly on the first selection and only
+   slides between subsequent ones). */
+ui-segmented-control:not(:has(ui-segment[checked]))::before {
+  opacity: 0;
+}
+
+/* Each `ui-segment` becomes a centered, full-cell segment button (its own base layout — display:inline-flex/
+   centering/cursor — lives in segment.css; this compound selector adds the GROUP-owned sizing). `z-index:1`
+   (+ the host's own `position:relative` stacking context) keeps the label + focus ring painting ABOVE the
+   moving indicator. */
+ui-segmented-control ui-segment {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+
+  block-size: var(--ui-segmented-control-segment-height); /* Control-height ramp */
+  padding-block: 0; /* block-size is the vertical lever */
+  padding-inline: calc(var(--ui-segmented-control-segment-height) / 2); /* slotless-edge pad, geometry.md */
+  font-size: var(--ui-segmented-control-segment-font);
+  line-height: var(--md-sys-control-line-height); /* single-line control standard, ADR-0036 */
+  color: var(--ui-segmented-control-ink);
+}
+
+/* NO inter-segment dividers — Kim's ruling (2026-07-09): the outer track + the moving fill + the hover
+   washes already carry the segmentation; vertical divider lines between segments are visual noise. The
+   original collapsed-divider rules (a shared 1px border-inline/block-start per non-first segment) were
+   removed here; segments carry NO borders of their own, and a regression guard in
+   segmented-control.browser.test.ts pins the zero-divider rendering in both orientations. */
+
+/* Selected ink — the checked segment's label sits on the moving fill. The plain `[checked]` attribute
+   selector alone is sufficient (no paired `:state(checked)`, unlike radio.css's own dot rule): `checked`
+   reflects via its own reflected prop (indicator-element.ts:24, `reflect:true`) in lockstep with the
+   `:state(checked)` custom state a sibling reactive effect publishes off the same `checked` write
+   (indicator-element.ts:125–135) — both track one source, so `[checked]` is always current, AND (unlike
+   `:state()`) it also works under jsdom, where CustomStateSet is absent. */
+ui-segmented-control ui-segment:is([checked]) {
+  color: var(--ui-segmented-control-ink-selected);
+}
+
+/* Interaction states — the TEXT-channel wash on UNSELECTED segments only; a checked segment cannot toggle
+   off, so the selected segment's fill holds (it never reads the hover/active tokens). */
+ui-segmented-control ui-segment:not([checked]):hover {
+  background: var(--ui-segmented-control-bg-hover);
+}
+ui-segmented-control ui-segment:not([checked]):active {
+  background: var(--ui-segmented-control-bg-active);
+}
+
+/* Disabled — holds at idle (matches segment.css's own disabled pointer-inertness + the group's disabled
+   change-swallow, radio-group.ts): the hover/active washes are suppressed entirely. */
+ui-segmented-control[disabled] ui-segment:hover,
+ui-segmented-control[disabled] ui-segment:active {
+  background: transparent;
+}
+
+/* Forced colors (WHCM) — the indicator inverts to Highlight/HighlightText; the frame, dividers, and
+   unselected ink hold at ButtonText. `transform` still applies under forced-colors (the indicator still
+   POSITIONS on the right segment; only its fill/ink invert). */
+@media (forced-colors: active) {
+  ui-segmented-control {
+    border-color: ButtonText;
+  }
+  ui-segmented-control::before {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+  ui-segmented-control ui-segment {
+    forced-color-adjust: none;
+    color: ButtonText;
+  }
+  ui-segmented-control ui-segment:is([checked]) {
+    color: HighlightText;
+  }
+}

package/dist/controls/segmented-control/segmented-control.d.ts

@@ -0,0 +1,20 @@
+import { UIRadioGroupElement } from '../radio/radio-group.js';
+import { UIRadioElement } from '../radio/radio.js';
+import type { RovingOrientation } from '../../traits/roving-focus.js';
+import '../segment/segment.js';
+export declare class UISegmentedControlElement extends UIRadioGroupElement {
+    /**
+     * ADR-0095 clause 1 — the class-derived default: a segmented control defaults to a HORIZONTAL row (the
+     * ADR-0086 "variant=segmented ⇒ horizontal" default, now class-derived instead of variant-derived). An
+     * author-set `orientation` attribute still wins (resolved by the PARENT's `connected()`).
+     */
+    protected defaultOrientation(): RovingOrientation;
+    /**
+     * ADR-0095 clause 2 — the moving-indicator state seam. Writes the selected index + segment count as host
+     * CUSTOM PROPERTIES (the `--value-pct` precedent, range-element.ts:111 / slider-multi.ts:196–197 —
+     * reactive STATE, never a stylesheet injection), read by `segmented-control.css`'s `::before` to size +
+     * translate the shared moving fill. `index < 0` (nothing selected) writes `0` — the indicator itself is
+     * hidden by CSS whenever no segment is `[checked]`, so the fallback position is irrelevant while hidden.
+     */
+    protected selectionChanged(radios: UIRadioElement[], index: number): void;
+}

package/dist/controls/segmented-control/segmented-control.js

@@ -0,0 +1,64 @@
+// segmented-control.ts — UISegmentedControlElement, the standalone joined-button single-select control
+// (ADR-0095, authored from ADR-0092 §Alternatives-1; supersedes ADR-0086's
+// `ui-radio-group[variant='segmented']` — a hard cutover, no alias).
+//
+// Extends UIRadioGroupElement DIRECTLY (~30 lines, per the ADR's own estimate): 100% of the single-select
+// BEHAVIOR — exclusivity, roving focus, selection-follows-focus, the group form value + required→
+// valueMissing validity, reset-coherence — lives once in the parent (radio-group.ts). This subclass buys
+// only the tag IDENTITY (the T3 ruling's entire point) plus the two things ADR-0095 names as genuinely
+// class-derived, both riding PROTECTED hooks the parent exposes for exactly this reuse:
+//
+//   · `defaultOrientation()` (ADR-0095 clause 1) — this control defaults to a HORIZONTAL row (the parent
+//     base class defaults to 'vertical'). Resolved once at connect by the PARENT's `connected()`: an
+//     author-set `orientation` attribute still wins.
+//   · `selectionChanged(radios, index)` (ADR-0095 clause 2) — the moving-indicator state seam, renamed
+//     from ADR-0086's retired `--ui-radio-group-index`/`-count` to `--ui-segmented-control-index`/`-count`
+//     (the naming law: `--ui-{name}-*` is owned by the tag it's keyed to). Fired by the PARENT from all
+//     three sites its own doc comment names — connect (seed), every selection-apply (`#commit` AND the
+//     public `value` setter), and `formReset()` — so the seam tracks commit AND reset (the ADR-0086
+//     amendment this class inherits by construction: the call sites did not move).
+//
+// `#radios()` on the parent walks `instanceof UIRadioElement`, which `UISegmentElement` (below) satisfies
+// by construction — no override needed for the group to find its own children. `role='radiogroup'` /
+// `role='radio'`, roving-tabindex, `data-radio-group` group-detection: all INHERITED unchanged.
+//
+// `ui-segment extends UIRadioElement` (ADR-0095 clause 3, `controls/segment/segment.ts`): the naming win T3
+// is about — a `ui-radio` child inside `<ui-segmented-control>` would leak "radio" into every consumer's
+// markup. `radio.css`'s `@scope (ui-radio)` rules simply don't match the new tag (a feature — `ui-segment`
+// needs no dot to suppress); it authors its own small CSS. `ui-segment` lives in its OWN sibling folder,
+// NOT this one — the family-coherence naming trip-wire (`name === folder || name.startsWith(folder + '-')`,
+// family-coherence.test.ts A4) accepts `radio-group` inside `radio/` (a real prefix match) but rejects
+// `segment` inside `segmented-control/` (no prefix relationship: "segment" is not a prefix of "segmented-
+// control", nor is "segmented-control-" a prefix of "segment") — a real constraint the radio/radio-group
+// precedent's two-descriptors-one-folder shape cannot generalize to. `segmented-control.ts` imports
+// `segment.ts` as a side effect below (the `ui-card`/`ui-tabs` compound precedent: a parent that REQUIRES
+// its own sub-tag self-defines it too), so importing this ONE public entry self-defines both tags.
+//
+// Layer: controls/ — imports dom + controls/radio + controls/segment (inward-only ✓).
+import { UIRadioGroupElement } from "../radio/radio-group.js";
+import { UIRadioElement } from "../radio/radio.js";
+import "../segment/segment.js"; // self-defines ui-segment — a segmented control is meaningless without it
+export class UISegmentedControlElement extends UIRadioGroupElement {
+    /**
+     * ADR-0095 clause 1 — the class-derived default: a segmented control defaults to a HORIZONTAL row (the
+     * ADR-0086 "variant=segmented ⇒ horizontal" default, now class-derived instead of variant-derived). An
+     * author-set `orientation` attribute still wins (resolved by the PARENT's `connected()`).
+     */
+    defaultOrientation() {
+        return 'horizontal';
+    }
+    /**
+     * ADR-0095 clause 2 — the moving-indicator state seam. Writes the selected index + segment count as host
+     * CUSTOM PROPERTIES (the `--value-pct` precedent, range-element.ts:111 / slider-multi.ts:196–197 —
+     * reactive STATE, never a stylesheet injection), read by `segmented-control.css`'s `::before` to size +
+     * translate the shared moving fill. `index < 0` (nothing selected) writes `0` — the indicator itself is
+     * hidden by CSS whenever no segment is `[checked]`, so the fallback position is irrelevant while hidden.
+     */
+    selectionChanged(radios, index) {
+        this.style.setProperty('--ui-segmented-control-index', String(Math.max(0, index)));
+        this.style.setProperty('--ui-segmented-control-count', String(radios.length));
+    }
+}
+if (!customElements.get('ui-segmented-control')) {
+    customElements.define('ui-segmented-control', UISegmentedControlElement);
+}