@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/components/tabs/SegmentedTabs.vue.d.ts

@@ -1,19 +1,27 @@
 import { type HTMLAttributes } from "vue";
-import type { Motion } from "../_shared/axes";
+import type { TabActivation } from "./composables/useTabRovingFocus.js";
+import type { Motion } from "../_shared/axes.js";
 /** The canonical tab/option shape — one descriptor across both materials. */
 export interface SegmentedTabOption {
     label: string;
     value: string;
     icon?: string;
     disabled?: boolean;
-    tooltip?: string;
+    /**
+     * The `id` of the tabpanel this option reveals. When set and semantics resolve to
+     * `tabs`, it is emitted as the tab's `aria-controls`, completing the APG
+     * tablist↔tabpanel linkage for consumers that own a panel. Ignored in `toggle`
+     * semantics (a toggle group mutates a shared surface, not a distinct panel).
+     */
+    controls?: string;
 }
-/** The two materials. `pill` (DEFAULT) = the glass-track slider (absorbs the
- *  retired `segmented`); `underline` = the paper ink-hairline rule. */
+/** The two materials: `pill` is the default glass eyeglass; `underline` is the paper ink hairline. */
 export type SegmentedTabsVariant = "pill" | "underline";
 /** The interaction semantic, independent of material. `toggle` exposes a
  *  group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
 export type SegmentedTabsSemantics = "toggle" | "tabs";
+/** Whether focus movement also selects. Manual activation waits for Enter/Space. */
+export type SegmentedTabsActivation = TabActivation;
 /** The orientation axis — `horizontal` (default) lays children in a row + tracks
  *  the indicator on the inline axis; `vertical` stacks a column + tracks the
  *  block axis (the vertical underline is the leading-edge ink rail). */
@@ -40,8 +48,10 @@ export interface SegmentedTabsProps {
     /** Accessible name shared by the desktop strip and responsive Select. */
     ariaLabel?: string;
     /**
-     * The material — `pill` (DEFAULT, the glass-track slider) or `underline`
-     * (the paper ink-hairline rule).
+     * The material — `pill` (DEFAULT, the glass eyeglass) or `underline` (the paper
+     * ink-hairline rule). TWO, and the eyeglass is not a third: it is what `pill`
+     * IS. A "million variants that are essentially the same thing" is the failure
+     * mode this axis exists to refuse.
      */
     variant?: SegmentedTabsVariant;
     /**
@@ -49,6 +59,8 @@ export interface SegmentedTabsProps {
      * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
      */
     semantics?: SegmentedTabsSemantics;
+    /** Selection follows focus by default; manual mode activates with Enter/Space. */
+    activation?: SegmentedTabsActivation;
     /**
      * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
      * one indicator engine.
@@ -56,21 +68,17 @@ export interface SegmentedTabsProps {
     orientation?: SegmentedTabsOrientation;
     /**
      * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
-     * `true` uses defaults; an object tunes the breakpoint / desktop subset /
+     * `true` uses defaults; an object tunes the breakpoint, desktop subset, and
      * accessible name.
      */
     responsive?: boolean | SegmentedTabsResponsive;
     /**
-     * BH.W-MOTION-AXIS — the ONE motion-weight axis (the `draggable` boolean's
-     * clean-break successor). `full` (default) arms the LIQUID TAB: the `pill` indicator
-     * is a physical lozenge you can GRAB and PULL — it follows the finger ~1:1, squishes
-     * on drag velocity, and flings to the nearest tab on release (`useDragMorph`),
-     * ADDITIVE OVER the click/keyboard path (which stays byte-identical + fully operable
-     * — the drag is a pointer ENHANCEMENT, never the sole selection mechanism, WCAG
-     * 2.1.1). `reduced`/`off` opt DOWN to the click-only strip (the drag unbinds; the
-     * roving-tabindex keyboard contract stays — motion off, meaning never off). No-op on
-     * `underline` (the ink hairline has no indicator element to deform). PRM forces
-     * `full → reduced` regardless (a11y absolute).
+     * Motion weight. `full` (default) lets the pill indicator follow a pointer,
+     * squash with drag velocity, and settle to the nearest tab. Drag supplements the
+     * fully operable click and keyboard path; it is never the sole selection method.
+     * `reduced` and `off` use the click-only strip while preserving roving focus.
+     * Underline has no deformable indicator. Reduced-motion preference forces
+     * `full → reduced`.
      */
     motion?: Motion;
     class?: HTMLAttributes["class"];
@@ -80,17 +88,12 @@ type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_50: {
-    option: SegmentedTabOption;
-    active: boolean;
-}, __VLS_58: {
+declare var __VLS_32: {
     option: SegmentedTabOption;
     active: boolean;
 };
 type __VLS_Slots = {} & {
-    option?: (props: typeof __VLS_50) => any;
-} & {
-    option?: (props: typeof __VLS_58) => any;
+    option?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -100,6 +103,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     orientation: SegmentedTabsOrientation;
     variant: SegmentedTabsVariant;
     responsive: boolean | SegmentedTabsResponsive;
+    activation: SegmentedTabsActivation;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tabs/composables/useTabDragMorph.d.ts

@@ -1,11 +1,11 @@
 import type { ComputedRef, Ref } from "vue";
-import { type UseDragMorphReturn } from "../../../composables/motion/useDragMorph";
-import type { SegmentedTabOption } from "../SegmentedTabs.vue";
+import { type UseDragMorphReturn } from "../../../composables/motion/morph/useDragMorph.js";
+import type { SegmentedTabOption } from "../SegmentedTabs.vue.js";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BB.W-DRAG-MORPH, the LIQUID
- * TAB (the `:draggable` axis). Carved out of the SFC at BB.W-CARVE4 to hold the
- * no-god-module bound, mirroring the `useTabIndicator` colocation sibling; the SFC
- * IMPORTS it and binds `drag.dragStyle`/`drag.dragging` in its template.
+ * Package-private composable for `SegmentedTabs.vue` — the LIQUID
+ * TAB (the `:draggable` axis). A composable held under the
+ * no-god-module bound, beside the `useTabIndicator` colocation sibling; the SFC
+ * IMPORTS it and binds only its state; the shared morph owner writes geometry.
  *
  * When `:draggable`, the `pill` indicator is wired to `useDragMorph` with the snap
  * targets resolved off the CENTER-ANCHORED button geometry (the SAME measure
@@ -36,7 +36,7 @@ export interface UseTabDragMorphParams {
 export interface UseTabDragMorphReturn {
     /** True when the drag is live (the `pill` material + the `:draggable` prop). */
     dragEnabled: ComputedRef<boolean>;
-    /** The `useDragMorph` handle (the SFC binds `dragStyle`/`dragging`). */
+    /** The `useDragMorph` handle (the SFC binds its gesture state). */
     drag: UseDragMorphReturn;
 }
 export declare function useTabDragMorph(params: UseTabDragMorphParams): UseTabDragMorphReturn;

package/dist/components/tabs/composables/useTabResponsive.d.ts

@@ -1,18 +1,17 @@
 import type { ComputedRef, Ref } from "vue";
-import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue";
+import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue.js";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BG.W-COLOCATE (the WS4
- * roving-focus/responsive carve; ratchet-drain #13). The responsive-collapse concern
- * (the `<Select>`-below-the-breakpoint fold) lives here, carved out of the SFC to hold
+ * Package-private composable for `SegmentedTabs.vue` (the
+ * roving-focus/responsive carve). The responsive-collapse concern
+ * (the `<Select>`-below-the-breakpoint fold) lives here, held under
  * the no-god-module bound — the `useTabIndicator`/`useTabDragMorph` colocation-sibling
  * pattern. The SFC IMPORTS it and binds `stripValue`/`stripOptions`/`showMobileSelect`
  * in its template + feeds `stripValue`/`stripOptions` to the indicator/roving concerns.
  *
  * Owns the `matchMedia((min-width: <breakpoint>))` lifecycle END-TO-END (the
  * `onMounted`/`onBeforeUnmount` wiring lives HERE — a composable is a legitimate
- * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. Byte-behaviour
- * identical to the prior inline block (the SSR/desktop-first default, the mobile-only
- * model fall-back, the accessible name resolution).
+ * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. It owns the SSR/desktop-first
+ * default, the mobile-only model fall-back, and the accessible name resolution.
  */
 export interface UseTabResponsiveParams {
     /** The `:responsive` prop — `false` | `true` | a tuning object. */

package/dist/components/tabs/composables/useTabRovingFocus.d.ts

@@ -1,51 +1,59 @@
 import type { ComputedRef, Ref } from "vue";
+import type { SelectionValue } from "../../_shared/selection.js";
 /**
- * The minimal roving option shape — the machine reads ONLY `value` + `disabled`
- * (BI.W-DOCK-CONTROLS decoupled it from `SegmentedTabOption` so the shared
+ * The minimal roving option shape reads only `value` + `disabled`, decoupling it
+ * from `SegmentedTabOption` so the shared
  * headless `useSelectionGroup` can compose it VERBATIM over its generic option
  * type). Any richer option (the tabs' `SegmentedTabOption`) is structurally
  * assignable.
+ *
+ * Generic in the value scalar, defaulting to `string` (BK #84 C-1). The machine
+ * only compares values with `===` and interpolates them into a reset key, so it is
+ * indifferent to which scalar it carries — but a callback parameter is
+ * contravariant, so `select` could not simply be widened in place without breaking
+ * every narrower caller. The type variable is what lets `<ToggleGroup>` pass
+ * `SelectionValue` and `<SegmentedTabs>` keep `string`, from one machine.
  */
-export interface RovingSelectionOption {
-    value: string;
+export interface RovingSelectionOption<V extends SelectionValue = string> {
+    value: V;
     disabled?: boolean;
 }
+export type TabActivation = "automatic" | "manual";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BG.W-COLOCATE (the WS4
- * roving-focus/responsive carve; ratchet-drain #13). The WAI-ARIA tablist/toolbar
- * roving-tabindex keyboard machine lives here, carved out of the SFC to hold the
- * no-god-module bound. BI.W-DOCK-CONTROLS composes it VERBATIM inside the shared
+ * Package-private composable for `SegmentedTabs.vue` (the
+ * roving-focus/responsive carve). The WAI-ARIA tablist/toolbar
+ * roving-tabindex keyboard machine lives here, held under the
+ * no-god-module bound. It is composed VERBATIM inside the shared
  * headless `useSelectionGroup` (the dock IS SegmentedTabs/ToggleGroup wearing
  * chrome — ONE roving machine, never re-forked). The SFC IMPORTS it and binds
  * `:tabindex="rovingTabindex(idx)"` + `@keydown="onStripKeydown"` in its template.
  *
- * EXACTLY ONE tab in the focus order (the active tab `tabindex="0"`, the rest `-1`);
- * the arrow keys move focus + activate (selection-follows-focus). The arrow AXIS is
- * derived off `isVertical` (ArrowRight/Left horizontal, ArrowDown/Up vertical),
- * Home/End jump, wrapping at the ends, skipping disabled. This is the keyboard contract
- * EVERY strip owes — NOT gated on `:draggable` (a draggable tab that is keyboard-broken
- * is the worse failure). The keyboard activation IS a selection → the SFC's `select(...)`
- * path (with its `squishOnTravel`), passed in as a callback (byte-behaviour identical to
- * the prior inline block).
+ * EXACTLY ONE tab remains in the focus order. Automatic activation keeps that tabstop
+ * on the selection; manual activation moves it independently and commits only on
+ * Enter/Space. The arrow axis derives from `isVertical`, Home/End jump, navigation
+ * wraps, and disabled options are skipped. This keyboard contract is never gated by
+ * pointer motion.
  */
-export interface UseTabRovingFocusParams {
+export interface UseTabRovingFocusParams<V extends SelectionValue = string> {
     /** The options the strip renders (index-aligned to `buttonRefs`). */
-    stripOptions: ComputedRef<readonly RovingSelectionOption[]>;
+    stripOptions: ComputedRef<readonly RovingSelectionOption<V>[]>;
     /** The value the strip renders (the ONE tabstop anchor). */
-    stripValue: ComputedRef<string | undefined>;
+    stripValue: ComputedRef<V | undefined>;
     /** True for the vertical (block-axis) orientation — flips the arrow axis. */
     isVertical: ComputedRef<boolean>;
+    /** Automatic selection-follows-focus or manual Enter/Space activation. */
+    activation: ComputedRef<TabActivation>;
     /** Per-option button refs, index-aligned to `stripOptions`. */
     buttonRefs: Ref<HTMLElement[]>;
     /** The SFC's selection handler (focus-follows activation → model write + squish). */
-    select: (value: string, idx: number) => void;
+    select: (value: V, idx: number) => void;
 }
 export interface UseTabRovingFocusReturn {
-    /** The active index in the rendered strip — the ONE tabstop. */
+    /** The selected index in the rendered strip. */
     activeIndex: ComputedRef<number>;
-    /** The roving tabindex for option `idx`: `0` for the active tab, `-1` otherwise. */
+    /** The roving tabindex for option `idx`: exactly one `0`, all others `-1`. */
     rovingTabindex: (idx: number) => number;
     /** The strip-root keydown handler (axis-derived arrows + Home/End). */
     onStripKeydown: (e: KeyboardEvent) => void;
 }
-export declare function useTabRovingFocus(params: UseTabRovingFocusParams): UseTabRovingFocusReturn;
+export declare function useTabRovingFocus<V extends SelectionValue = string>(params: UseTabRovingFocusParams<V>): UseTabRovingFocusReturn;

package/dist/components/tabs/index.d.ts

@@ -1,2 +1,2 @@
-export { default as SegmentedTabs } from "./SegmentedTabs.vue";
-export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./SegmentedTabs.vue";
+export { default as SegmentedTabs } from "./SegmentedTabs.vue.js";
+export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsActivation, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./SegmentedTabs.vue.js";

package/dist/components/tabs/styles/drag.css

@@ -1 +1 @@
-.glass-drag-grabbable { cursor: grab; touch-action: none; } .glass-drag-lift { cursor: grabbing; will-change: transform; } .segmented-tabs:not(.segmented-tabs--underline):has( .segmented-indicator.glass-drag-grabbable ) .segmented-tab[aria-pressed="true"] { pointer-events: none; } .segmented-indicator.glass-drag-lift { z-index: 30; } .segmented-tabs[data-eyeglass] { --eyeglass-settled: 0.84; --eyeglass-proud: 1.12; --eyeglass-track-blur: var(--glass-blur-floating); -webkit-backdrop-filter: var(--eyeglass-track-blur); backdrop-filter: var(--eyeglass-track-blur); -webkit-backdrop-filter: var(--eyeglass-track-blur); } .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: calc( var(--eyeglass-settled) + var(--eyeglass-live-t) * (var(--eyeglass-proud) - var(--eyeglass-settled)) ); } @media (prefers-reduced-motion: reduce) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: 1; } } @supports (backdrop-filter: url("#glass-refract")) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate.glass-lens { -webkit-backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); } } .segmented-tabs[data-eyeglass] .segmented-tab[aria-pressed="true"] svg { color: var(--tab-selected-ink, var(--foreground)); }
+.glass-drag-grabbable{cursor: grab;touch-action: none;}.glass-drag-lift{cursor: grabbing;will-change: transform;}.segmented-tabs:has(.segmented-indicator.glass-drag-grabbable) .segmented-tab[data-active]{pointer-events: none;}.segmented-indicator.glass-drag-lift{z-index: 30;}

package/dist/components/tabs/styles/segmented.css

@@ -1 +1 @@
-.segmented-tabs { --bouncy-track-trim: 0.1875rem; --bouncy-slider-radius: var(--radius-tab); --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim)); --stretch: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--bouncy-track-trim); border-radius: var(--bouncy-track-radius); } .segmented-tabs--vertical { display: inline-flex; flex-direction: column; grid-auto-flow: unset; grid-auto-columns: unset; align-items: stretch; --bouncy-slider-radius: var(--radius-strip); --radius-ctx: var(--bouncy-track-radius); --radius-inset: var(--bouncy-track-trim); } .segmented-tabs--vertical .segmented-indicator { border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } @media (min-width: 640px) { .segmented-tabs { --bouncy-track-trim: 0.25rem; } } .segmented-indicator { position: absolute; z-index: 0; inset-block: var(--bouncy-track-trim); border-radius: var(--bouncy-slider-radius); transform-origin: center; scale: calc(var(--tab-blob, 1) * var(--stretch)) calc(var(--tab-blob, 1) / var(--stretch)); } .segmented-indicator__plate { position: absolute; inset: 0; border-radius: inherit; transform-origin: center; transform: scaleY(var(--eyeglass-y, 1)); } .segmented-indicator { isolation: isolate; } @supports (mix-blend-mode: plus-lighter) { .segmented-indicator::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in srgb, var(--glass-accent, transparent) 55%, transparent), transparent 70% ); mix-blend-mode: plus-lighter; opacity: var(--tab-flood-t, 0); } } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: var(--bouncy-track-trim); scale: calc(var(--tab-blob, 1) / var(--stretch)) calc(var(--tab-blob, 1) * var(--stretch)); } @media (prefers-reduced-motion: no-preference) { .segmented-indicator { transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch); } } .segmented-indicator--js { transition: transform var(--tab-indicator-duration) var(--spring-eyeglass), width var(--tab-indicator-duration) var(--spring-eyeglass), height var(--tab-indicator-duration) var(--spring-eyeglass), scale var(--tab-indicator-duration) var(--spring-eyeglass), opacity var(--duration-fast) ease; } @media (min-width: 640px) { .segmented-indicator { inset-block: 0.25rem; } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: 0.25rem; } } .segmented-tab { position: relative; z-index: 10; border: none; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease, scale var(--spring-snappy-duration) var(--spring-snappy) 60ms; scale: 1; translate: 0; } @media (min-width: 640px) { .segmented-tab { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } } .segmented-tab[aria-pressed="true"], .segmented-tab[aria-selected="true"] { color: var(--foreground); } .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] { scale: calc(1 + 0.06 * var(--motion-weight)); } .segmented-tab.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: blur(0.5px); } .segmented-tabs--underline { display: flex; grid-auto-flow: unset; grid-auto-columns: unset; gap: 0.25rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical { flex-direction: column; align-items: stretch; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { anchor-name: --gl-tab-active; } .segmented-tabs--underline::before { content: ""; position: absolute; position-anchor: --gl-tab-active; inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px)); inset-inline-start: anchor(left); inset-inline-end: anchor(right); block-size: var(--paper-ink-mark-weight, 2px); background: var(--paper-ink-mark-color, var(--foreground)); border-radius: var(--radius-sm); transform-origin: center; scale: var(--stretch) 1; } .segmented-tabs--underline.segmented-tabs--vertical::before { inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px)); inset-inline-end: auto; block-size: auto; inline-size: var(--paper-ink-mark-weight, 2px); scale: 1 var(--stretch); } @media (prefers-reduced-motion: no-preference) { .segmented-tabs--underline::before { transition: inset var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy); } } @supports not (position-anchor: --x) { .segmented-tabs--underline::before { display: none; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] { border-bottom: none; border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } } .segmented-tabs--underline .segmented-tab { padding: 0.375rem 0.75rem; font-size: var(--type-subheading); letter-spacing: var(--type-tracking-display); border-radius: 0.25rem; transition: color var(--duration-fast) ease; } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab { text-align: start; } .segmented-tabs--underline .segmented-tab:hover { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
+.segmented-tabs{--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));--stretch: 1;position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);overflow: visible;}.segmented-tabs--vertical{display: inline-flex;flex-direction: column;grid-auto-flow: unset;grid-auto-columns: unset;align-items: stretch;--bouncy-slider-radius: var(--radius-strip);--radius-ctx: var(--bouncy-track-radius);--radius-inset: var(--bouncy-track-trim);}.segmented-tabs--vertical .segmented-indicator{border-radius: max( var(--radius-floor),calc(var(--radius-ctx) - var(--radius-inset)) );}@media (min-width: 640px){.segmented-tabs{--bouncy-track-trim: 0.25rem;}}.segmented-indicator{position: absolute;z-index: 0;border-radius: var(--bouncy-slider-radius);transform-origin: var(--eyeglass-origin,50%) center;scale: var(--eyeglass-span,var(--stretch)) var(--eyeglass-swell,1);}.segmented-tabs--vertical .segmented-indicator{transform-origin: center var(--eyeglass-origin,50%);scale: var(--eyeglass-swell,1) var(--eyeglass-span,var(--stretch));}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: var(--stretch) 1;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-indicator{border-block-end: none;border-inline-start: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: 1 var(--stretch);}.segmented-tabs:not(.segmented-tabs--underline){--eyeglass-span-max: 1.6;--eyeglass-cascade-annotation: 100ms;--eyeglass-light-clock: var(--engage-control-engage-release);transition: background var(--eyeglass-light-clock) var(--ease-standard);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),inset 0 1px 2px var(--tab-track-recess-ink);}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline){--eyeglass-light-clock: var(--engage-control-engage-attack);background: color-mix( in oklab,var(--glass-plate-quiet),var(--glass-capsule-warm) var(--glass-capsule-warm-floor) );}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--glass-shadow-capsule);}.segmented-indicator[data-eyeglass-clamped]{--eyeglass-swell: 1.22;}@media (prefers-reduced-motion: no-preference){.segmented-indicator--js{transition: translate var(--tab-indicator-duration) var(--spring-dock),width var(--tab-indicator-duration) var(--spring-dock),height var(--tab-indicator-duration) var(--spring-dock),scale var(--tab-indicator-duration) var(--ease-cartoon-punch),box-shadow var(--eyeglass-light-clock,var(--duration-fast)) var(--ease-standard),opacity var(--duration-fast) ease;}}.segmented-tab{position: relative;z-index: 10;border: none;background: none;font-weight: 500;cursor: pointer;white-space: nowrap;padding: 0.25rem 0.625rem;border-radius: var(--bouncy-slider-radius);font: inherit;font-size: var(--type-caption);color: color-mix(in oklab,var(--muted-foreground),var(--glass-capsule-warm) 12%);transition: color var(--duration-fast) ease;scale: 1;translate: 0;}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);transition-delay: var(--eyeglass-cascade-annotation,0s);}.segmented-tab.is-disabled{opacity: 0.4;cursor: not-allowed;pointer-events: none;filter: blur(0.5px);}.segmented-tabs--underline{display: flex;grid-auto-flow: unset;grid-auto-columns: unset;gap: 0.25rem;padding: 0;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;box-shadow: none;border-radius: 0;border-block-end: 1px solid var(--border);}.segmented-tabs--underline.segmented-tabs--vertical{flex-direction: column;align-items: stretch;border-block-end: none;border-inline-start: 1px solid var(--border);}.segmented-tabs--underline .segmented-tab{padding: 0.375rem 0.75rem;font-size: var(--type-subheading);letter-spacing: var(--type-tracking-display);border-radius: var(--bouncy-slider-radius);transition: color var(--duration-fast) ease;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab{text-align: start;}.segmented-tabs--underline .segmented-tab:hover{color: color-mix(in oklab,var(--foreground) 70%,transparent);}

package/dist/components/textarea/Textarea.vue.d.ts

@@ -1,57 +1,17 @@
-import type { HTMLAttributes, TextareaHTMLAttributes } from 'vue';
-import { type ControlSize } from '../_shared/useControlSize';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    class?: HTMLAttributes["class"];
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    size?: ControlSize;
-    placeholder?: TextareaHTMLAttributes["placeholder"];
-    disabled?: TextareaHTMLAttributes["disabled"];
-    /**
-     * AQ.W4 §W4.3 — opt into `field-sizing: content` auto-grow. When `true`,
-     * the textarea grows vertically with its content between a 3-line floor
-     * and a `--textarea-autosize-max` ceiling (default `12lh`), then scrolls;
-     * the manual resize handle stays. Default `false` keeps the fixed
-     * `min-h-20` height (the unchanged no-op fallback).
-     *
-     * `field-sizing` is Baseline Newly (Chromium 2024) — on a non-supporting
-     * engine the element degrades to the fixed `min-block-size: 3lh` floor
-     * with standard scroll (no JS, no polyfill).
-     *
-     * Caveat: a grid/flex parent stretches children, defeating `field-sizing`.
-     * Inside a flex column, add `align-self: start` on the `<Textarea>` so it
-     * sizes to content rather than the track.
-     */
-    autosize?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (payload: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    class?: HTMLAttributes["class"];
-    defaultValue?: string | number;
+import type { TextareaProps } from "./types.js";
+type __VLS_Props = TextareaProps;
+type __VLS_ModelProps = {
     modelValue?: string | number;
-    size?: ControlSize;
-    placeholder?: TextareaHTMLAttributes["placeholder"];
-    disabled?: TextareaHTMLAttributes["disabled"];
-    /**
-     * AQ.W4 §W4.3 — opt into `field-sizing: content` auto-grow. When `true`,
-     * the textarea grows vertically with its content between a 3-line floor
-     * and a `--textarea-autosize-max` ceiling (default `12lh`), then scrolls;
-     * the manual resize handle stays. Default `false` keeps the fixed
-     * `min-h-20` height (the unchanged no-op fallback).
-     *
-     * `field-sizing` is Baseline Newly (Chromium 2024) — on a non-supporting
-     * engine the element degrades to the fixed `min-block-size: 3lh` floor
-     * with standard scroll (no JS, no polyfill).
-     *
-     * Caveat: a grid/flex parent stretches children, defeating `field-sizing`.
-     * Inside a flex column, add `align-self: start` on the `<Textarea>` so it
-     * sizes to content rather than the track.
-     */
-    autosize?: boolean;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    autosize: boolean;
+    size: import("..").ControlSize;
+    resize: import("./types.js").TextareaResize;
+    invalid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/textarea/index.d.ts

@@ -1 +1,2 @@
-export { default as Textarea } from './Textarea.vue';
+export { default as Textarea } from "./Textarea.vue.js";
+export type { TextareaProps, TextareaResize } from "./types.js";

package/dist/components/textarea/types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, TextareaHTMLAttributes } from "vue";
+import type { ControlSize } from "../_shared/control.js";
+/**
+ * The DRAG HANDLE, and only the drag handle.
+ *
+ * `"content"` left the union: it was a non-CSS enum member conflating the handle
+ * with the sizing axis, and while it was the only way to ask for content sizing,
+ * `rows` was dead on every other member (the register floored every textarea at
+ * 5lh regardless). Growth is now the register's unconditional default — floored at
+ * `rows` line boxes via the `--field-rows` stamp `Textarea.vue` writes (the
+ * attribute itself is ignored under `field-sizing: content`), capped by
+ * `--textarea-content-max` — so the handle is free to mean what its name says.
+ */
+export type TextareaResize = "vertical" | "horizontal" | "both" | "none";
+/** Typed for the caller, invisible to `defineProps` — see `input/types.ts` for the
+ *  `/* @vue-ignore *\/` mechanism and why the full `TextareaHTMLAttributes` is not
+ *  the base. `rows` is the load-bearing member: it is the growth FLOOR now that the
+ *  register sizes to content by default. It rides `$attrs` to the element AND is
+ *  stamped into `--field-rows` by `Textarea.vue`, because `field-sizing: content`
+ *  ignores the attribute outright — the stamp is the half the floor is built on. */
+interface TextareaNativeAttrs {
+    cols?: TextareaHTMLAttributes["cols"];
+    form?: string;
+    maxlength?: TextareaHTMLAttributes["maxlength"];
+    minlength?: TextareaHTMLAttributes["minlength"];
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    rows?: TextareaHTMLAttributes["rows"];
+    wrap?: TextareaHTMLAttributes["wrap"];
+}
+export interface TextareaProps extends /* @vue-ignore */ TextareaNativeAttrs {
+    class?: HTMLAttributes["class"];
+    /** Feeds the one state machine (`data-state`), so it is a prop, not an attr. */
+    disabled?: boolean;
+    /** App-driven validity. Native constraint validation and a bare
+     *  `aria-invalid` reach the same one grammar without it. */
+    invalid?: boolean;
+    modelValue?: string | number;
+    /** Feeds the one state machine (`data-state`), so it is a prop, not an attr. */
+    readonly?: boolean;
+    resize?: TextareaResize;
+    size?: ControlSize;
+}
+export {};

package/dist/components/timeline/Timeline.vue.d.ts

@@ -0,0 +1,41 @@
+import type { TimelineProps, TimelineSegment } from "./types.js";
+declare var __VLS_1: {
+    segment: TimelineSegment | null;
+    source: "idle" | "current" | "hovered";
+    current: string | null;
+    hovered: string | null;
+    value: number;
+    progress: string;
+};
+type __VLS_Slots = {} & {
+    detail?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TimelineProps, {
+    value: import("vue").ComputedRef<number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    hover: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    } | null) => any;
+}, string, import("vue").PublicProps, Readonly<TimelineProps> & Readonly<{
+    onSelect?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onHover?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    } | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/timeline/geometry.d.ts

@@ -1,92 +1,66 @@
 /**
- * Timeline shared geometry — pure math + payload helpers used by ≥ 2 of
- * the variant SFCs (ScrubberTimeline / SegmentedTimeline / ContinuousTimeline).
+ * Timeline geometry — the partition, the ordinal hue law and the aggregate.
  *
- * Split out of the prior monolithic `GlassTimeline.vue` per O.W3 Lane A —
- * the geometry was identical across the segmented + continuous variants,
- * and the popover-payload helper is consumed only by the continuous variant
- * today but its shape (the AA-canonical `{ label, value, description, state }`
- * envelope) is documented as the shared per-segment hover-payload contract.
- *
- * All exports are pure functions or type aliases — no Vue runtime imports,
- * no side effects. The factory `createContinuousGeometry(segmentsRef)`
- * returns the `totalWeight` + region/boundary helpers bound to a live
- * `Ref<TimelineSegment[]>`, so the continuous SFC can drop them straight
- * into its `<script setup>`.
- */
-import { type ComputedRef, type Ref } from "vue";
-import type { TimelineSegment } from "./types";
-/**
- * Fill percentage per state. Explicit `progress` wins; otherwise the
- * canonical mapping (pending=0, active=0.5, completed=1). Clamped to
- * [0, 1] so consumers can't paint past the segment box.
- */
-export declare function fillFor(seg: TimelineSegment): number;
-/** Resolve a segment's positive weight; defaults to 1. */
-export declare function segmentWeight(seg: TimelineSegment): number;
-/**
- * Bind continuous-variant geometry helpers to a live `Ref<TimelineSegment[]>`.
- * Returns the `totalWeight` ComputedRef + per-index region geometry
- * (regionLeft, regionWidth, boundaryX) + the rail's aggregate aria-valuenow
- * computation. The continuous SFC pulls these into its `<script setup>`.
+ * Pure functions only: no Vue runtime, no element, no side effect beyond the
+ * DEV monotone warning. The file exists so the suite can assert the rules
+ * without a mount (happy-dom is not needed to check arithmetic).
  */
-export declare function createContinuousGeometry(segments: Ref<TimelineSegment[]>): {
-    totalWeight: ComputedRef<number>;
-    regionLeft: (i: number) => number;
-    regionWidth: (i: number) => number;
-    boundaryX: (i: number) => number;
-    continuousAriaValueNow: ComputedRef<number>;
-};
+import type { TimelineSegment } from "./types.js";
 /**
- * Build the ONE rail-spanning stitched gradient for the continuous
- * variant. Each phase's colour is anchored as a stop at the CENTRE of
- * its weight-share so the pure hue sits mid-phase and the hues cross-
- * fade smoothly through every boundary. The first and last stops are
- * pinned to 0% / 100% so the bar's ends saturate fully (no washed
- * leading/trailing edge). Returns a `linear-gradient(90deg, …)` string
- * sized to the FULL rail width.
+ * THE ORDINAL HUE LAW — span `i` without an `accent` takes
+ * `--section-color-((HUE_OFFSET + HUE_STRIDE·i) mod HUE_STOPS)` over the
+ * 13-stop jewel ramp (`tokens/color-radius.css` §sections).
+ *
+ * `gcd(HUE_STRIDE, HUE_STOPS) = gcd(4, 13) = 1`, so all thirteen stops are
+ * visited before the sequence repeats — adjacent spans land far apart on the
+ * ramp by construction. The two integers live HERE, as constants, and never as
+ * tokens: BK #68's L-4 refused both the low-chroma retune and the ordinal
+ * rename, and ruled these `geometry.ts` constants their home.
  */
-export declare function stitchedRailGradient(segments: TimelineSegment[]): string;
+export declare const HUE_OFFSET = 2;
+export declare const HUE_STRIDE = 4;
+export declare const HUE_STOPS = 13;
+/** One resolved span on the unit axis. `at` is the span's END boundary. */
+export interface TimelineSpan {
+    left: number;
+    width: number;
+    at: number;
+}
 /**
- * Per-region windowing parameters for the stitched rail gradient. The
- * region paints the FULL-rail gradient (`stitchedRailGradient`) but only
- * its own slice is visible inside the region box. To window correctly
- * the region's `background-size-x` is scaled to `1 / regionWidth` of the
- * region box (so the full gradient spans `regionWidth` of the rail) and
- * the `background-position-x` is offset so the region's left edge aligns
- * with the rail-fraction `regionLeft`.
- *
- * `sizeX`     — CSS `background-size` x value, e.g. `"333.333%"`.
- * `positionX` — CSS `background-position` x value, e.g. `"50%"`.
+ * THE PARTITION.
  *
- * background-position interpolates the image's `(size - box)` overflow,
- * so the position fraction is `regionLeft / (1 - regionWidth)` (guarded
- * for the degenerate single-region `regionWidth == 1` case).
+ * 1. Authored `at` values are clamped monotone non-decreasing in [0, 1]:
+ *    `at_i = max(at_{i−1}, clamp01(at_i))`. They are NEVER sorted — keys,
+ *    labels and states travel with `at`, so a sort turns one typo into a
+ *    silently reordered narrative. The clamp preserves author order and
+ *    renders the violation VISIBLE (a zero-width span with its mark stacked on
+ *    its neighbour's).
+ * 2. Omitted `at` runs take equal shares of the axis remaining between their
+ *    pinned neighbours; a trailing run runs to 1. All-omitted is therefore the
+ *    plain equal split.
+ * 3. A trailing remainder (`Σwidth < 1`, e.g. a dataset ending at 0.94) is an
+ *    OPEN AXIS: the groove paints it, no span owns it, no mark sits on it.
+ * 4. Zero-width and coincident spans are legal — no fill, mark at the shared
+ *    point, the later `key` stacking above.
  */
-export declare function stitchedRegionWindow(regionLeft: number, regionWidth: number): {
-    sizeX: string;
-    positionX: string;
-};
+export declare function layout(segments: readonly TimelineSegment[]): TimelineSpan[];
 /**
- * Continuous-variant active-region fill width (0..1, applied as a clip
- * mask on the region's right edge for partial-fill animation). For
- * `completed` returns 1; for `pending` returns 0; for `active` returns
- * `fillFor(seg)` (which honours explicit `progress` overrides).
+ * The span's EFFECTIVE fill fraction, or `null` for INDETERMINATE.
+ *
+ * Explicit `progress` wins (clamped). Otherwise `completed` is 1 and `pending`
+ * is 0. `active` with `progress` omitted returns `null`: it is a phase underway
+ * with unknown progress, and fabricating either 0.5 or 0 for it paints a
+ * running phase as something it is not.
  */
-export declare function continuousFillWidth(seg: TimelineSegment): number;
+export declare function fillFor(seg: TimelineSegment): number | null;
 /**
- * AB.W2.T2 — default popover content payload shape.
+ * The span-weighted aggregate over the OWNED axis: `Σ(width·eff) / Σwidth`.
  *
- * Reads `value` shape if the consumer supplied the AA-canonical
- * `{ label, value, description, state }` payload (the speedtest
- * PhaseDetail), otherwise falls back to the segment's own label/state.
- * The slot scope exposes the full segment so consumers can override
- * entirely.
+ * The denominator is `Σwidth`, not 1 — a process scoped to 94% of the axis
+ * reports 1.0 when all of ITS phases complete, rather than stalling at 0.94
+ * forever. Indeterminate spans contribute 0 (they report nothing measurable);
+ * they surface in `aria-valuetext` instead.
  */
-export interface DefaultPopoverPayload {
-    label?: string;
-    value?: unknown;
-    description?: string;
-    state?: string;
-}
-export declare function popoverPayloadFor(seg: TimelineSegment): DefaultPopoverPayload;
+export declare function aggregate(segments: readonly TimelineSegment[]): number;
+/** The ordinal hue for span `i` — see {@link HUE_OFFSET}. */
+export declare function accentFor(i: number): string;

package/dist/components/timeline/index.d.ts

@@ -1,2 +1,2 @@
-export { default as GlassTimeline } from "./GlassTimeline.vue";
-export type { TimelineSegment, TimelineSegmentGradient, TimelineSegmentState, } from "./types";
+export { default as Timeline } from "./Timeline.vue.js";
+export type { TimelineProps, TimelineSegment, TimelineSegmentState, } from "./types.js";