@mkbabb/glass-ui 7.0.0 → 9.0.0

package/dist/components/sortable-list/{composables/useSortable.d.ts → useSortable.d.ts}

@@ -1,5 +1,3 @@
-import { isNonZeroRadius } from "./ghostRenderer";
-import type { SortableOptions, UseSortableReturn } from "./types";
+import type { SortableOptions, UseSortableReturn } from "./types.js";
 export declare function useSortable<T>(options: SortableOptions<T>): UseSortableReturn;
-export { isNonZeroRadius };
-export type { SortableId, SortableContainerBinding, UseSortableReturn } from "./types";
+export type { SortableId, SortableContainerBinding, UseSortableReturn } from "./types.js";

package/dist/components/status-dot/StatusDot.vue.d.ts

@@ -1,14 +1,21 @@
 import type { HTMLAttributes } from "vue";
-import type { FeedbackSize, StatusDotState } from "../_shared/feedback";
+import type { StatusDotSize, StatusDotState } from "./states.js";
 type __VLS_Props = {
     state?: StatusDotState;
-    size?: FeedbackSize;
+    size?: StatusDotSize;
+    /**
+     * Liveness axis. `"full"` runs the breathing pulse ring on the live
+     * `active` state (liquid-weight universal — the default); `"off"` opts
+     * down to a static mark. Reduced-motion always wins regardless.
+     */
+    motion?: "full" | "off";
     /** Accessible identity. Omit when adjacent text already names the state. */
     label?: string;
     class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: FeedbackSize;
+    size: StatusDotSize;
+    motion: "full" | "off";
     state: StatusDotState;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/status-dot/index.d.ts

@@ -1,2 +1,3 @@
-export { default as StatusDot } from "./StatusDot.vue";
-export type { FeedbackSize as StatusDotSize, StatusDotState, } from "../_shared/feedback";
+export { default as StatusDot } from "./StatusDot.vue.js";
+export { STATUS_DOT_STATES } from "./states.js";
+export type { StatusDotSize, StatusDotState } from "./states.js";

package/dist/components/status-dot/states.d.ts

@@ -0,0 +1,4 @@
+import type { Size } from "../_shared/axes.js";
+export declare const STATUS_DOT_STATES: readonly ["active", "idle", "online", "success", "warning", "error", "unknown"];
+export type StatusDotState = (typeof STATUS_DOT_STATES)[number];
+export type StatusDotSize = Extract<Size, "sm" | "md" | "lg">;

package/dist/components/surface/Surface.vue.d.ts

@@ -1,17 +1,37 @@
 import { type HTMLAttributes } from "vue";
-import type { Surface as SurfaceAxis, SurfaceTier } from "../_shared/axes";
-import type { PrimitiveProps } from "../_shared/primitive";
+import type { Surface as SurfaceAxis, SurfaceTier } from "../_shared/axes.js";
+import type { PrimitiveProps } from "../_shared/primitive.js";
 export type SurfaceDecoration = SurfaceAxis;
-export type SurfaceMaterial = "content" | "elevated" | "functional" | "overlay";
-export type SurfaceSpecular = "off" | "subtle" | "full";
+/**
+ * The plate primitive. ONE prominence axis, three knobs, four emitted
+ * attributes.
+ *
+ * `material` / `SurfaceMaterial` / `MATERIAL_TIERS` are DELETED, not aliased: a
+ * four-member bijection onto four of the five tiers is `tier` under a second
+ * name, `wash` was unreachable through it, and `tier` silently beat it anyway.
+ * Zero external consumers passed it — censused across six sibling repos.
+ *
+ * `shadow` / `grain` / `specular` are deleted with the three silent JS gates
+ * that armed them. On an opaque plate the element-level `backdrop-filter: none`
+ * already wins by cascade; a hidden gate that no-ops a prop on a fourth prop's
+ * value is a rule the cascade was already keeping. `shadow` survives where it
+ * has a real grammar — as CARD's own prop, stamping card's own `data-shadow`.
+ *
+ * The FOURTH such gate went with them: `deep` used to be armed only when
+ * `surface === "glass"`, which is the same rule the cascade was already keeping
+ * from the other side. `[data-surface="opaque"]` sets `--glass-level: 0` (so the
+ * deep composition resolves `blur(0)`) AND `backdrop-filter: none` at the
+ * element; `[data-surface="veil"]` paints its own `--veil-clarity`, derived from
+ * the quiet radius, which never reads the bridged rung tokens. Both withhold the
+ * depth in PAINT, so `deep` is forwarded honestly and nothing arms it in script.
+ */
 export interface SurfaceProps extends Omit<PrimitiveProps, "asChild"> {
-    material?: SurfaceMaterial;
+    /** The ONE prominence axis: wash | quiet | resting | floating | overlay. */
     tier?: SurfaceTier;
+    /** Decoration, orthogonal to prominence: glass | veil | opaque. */
     surface?: SurfaceDecoration;
+    /** Thickness ON the resolved tier — never a tier jump. */
     deep?: boolean;
-    shadow?: boolean;
-    grain?: boolean;
-    specular?: SurfaceSpecular;
     class?: HTMLAttributes["class"];
 }
 declare var __VLS_8: {};
@@ -19,13 +39,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SurfaceProps> & Readonly<{}>, {
-    shadow: boolean;
-    as: import("../_shared/primitive").AsTag | import("vue").Component;
-    surface: SurfaceDecoration;
+    as: import("../_shared/primitive.js").AsTag | import("vue").Component;
     deep: boolean;
-    material: SurfaceMaterial;
-    grain: boolean;
-    specular: SurfaceSpecular;
+    tier: SurfaceTier;
+    surface: SurfaceDecoration;
 }, {}, {}, {}, 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/surface/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Surface, type SurfaceProps, type SurfaceDecoration, type SurfaceMaterial, type SurfaceSpecular, } from "./Surface.vue";
-export type { SurfaceTier } from "../_shared/axes";
+export { default as Surface, type SurfaceProps, type SurfaceDecoration, } from "./Surface.vue.js";
+export type { SurfaceTier } from "../_shared/axes.js";

package/dist/components/switch/Switch.vue.d.ts

@@ -1,23 +1,18 @@
 import { type HTMLAttributes } from "vue";
-import type { ControlSize } from "../_shared/control-size";
-import type { FormFieldProps } from "../_shared/primitive";
-export interface SwitchProps extends FormFieldProps {
-    modelValue?: boolean | null;
+import { type ControlProps } from "../_shared/control.js";
+import type { FormFieldProps, PrimitiveProps } from "../_shared/primitive.js";
+import type { SelectionValue } from "../_shared/selection.js";
+export interface SwitchProps extends PrimitiveProps, FormFieldProps, ControlProps {
+    modelValue?: boolean;
     defaultValue?: boolean;
-    disabled?: boolean;
     id?: string;
-    value?: string;
+    value?: SelectionValue;
     class?: HTMLAttributes["class"];
-    size?: ControlSize;
-    invalid?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    size: ControlSize;
-    invalid: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,2 +1,2 @@
-export { default as Switch } from "./Switch.vue";
-export type { SwitchProps } from "./Switch.vue";
+export { default as Switch } from "./Switch.vue.js";
+export type { SwitchProps } from "./Switch.vue.js";

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

@@ -1,8 +1,8 @@
-export { default as Table } from "./Table.vue";
-export { default as TableBody } from "./TableBody.vue";
-export { default as TableCell } from "./TableCell.vue";
-export { default as TableHead } from "./TableHead.vue";
-export { default as TableHeader } from "./TableHeader.vue";
-export { default as TableRow } from "./TableRow.vue";
-export { default as TableCaption } from "./TableCaption.vue";
-export { default as TableEmpty } from "./TableEmpty.vue";
+export { default as Table } from "./Table.vue.js";
+export { default as TableBody } from "./TableBody.vue.js";
+export { default as TableCell } from "./TableCell.vue.js";
+export { default as TableHead } from "./TableHead.vue.js";
+export { default as TableHeader } from "./TableHeader.vue.js";
+export { default as TableRow } from "./TableRow.vue.js";
+export { default as TableCaption } from "./TableCaption.vue.js";
+export { default as TableEmpty } from "./TableEmpty.vue.js";

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

@@ -1,13 +1,12 @@
 import { type HTMLAttributes } from "vue";
-import { type TabActivation } from "./composables/useTabRovingFocus";
-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
@@ -16,7 +15,7 @@ export interface SegmentedTabOption {
      */
     controls?: string;
 }
-/** The two materials: `pill` is the default glass-track slider; `underline` is the paper ink hairline. */
+/** 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. */
@@ -49,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;
     /**
@@ -87,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;

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

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from "vue";
-import { type UseDragMorphReturn } from "../../../composables/motion/morph/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` — the LIQUID
  * TAB (the `:draggable` axis). A composable held under the

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

@@ -1,5 +1,5 @@
 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` (the
  * roving-focus/responsive carve). The responsive-collapse concern

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

@@ -1,13 +1,21 @@
 import type { ComputedRef, Ref } from "vue";
+import type { SelectionValue } from "../../_shared/selection.js";
 /**
  * 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";
@@ -26,11 +34,11 @@ export type TabActivation = "automatic" | "manual";
  * 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. */
@@ -38,7 +46,7 @@ export interface UseTabRovingFocusParams {
     /** 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 selected index in the rendered strip. */
@@ -48,4 +56,4 @@ export interface UseTabRovingFocusReturn {
     /** 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, SegmentedTabsActivation, 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; }
+.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; 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-tabs--vertical .segmented-indicator { 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: translate var(--tab-indicator-duration) var(--spring-snappy), width var(--tab-indicator-duration) var(--spring-snappy), height var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy), 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: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease; 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-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,12 +1,17 @@
-import type { TextareaProps } from "./types";
-declare const __VLS_export: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { TextareaProps } from "./types.js";
+type __VLS_Props = TextareaProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+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<TextareaProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    size: import("../_shared").ControlSize;
+    size: import("..").ControlSize;
+    resize: import("./types.js").TextareaResize;
     invalid: boolean;
-    resize: import("./types").TextareaResize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

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

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

@@ -1,22 +1,45 @@
 import type { HTMLAttributes, TextareaHTMLAttributes } from "vue";
-import type { ControlSize } from "../_shared/control-size";
-export type TextareaResize = "vertical" | "horizontal" | "both" | "none" | "content";
-export interface TextareaProps {
-    class?: HTMLAttributes["class"];
+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"];
-    defaultValue?: string | number;
-    disabled?: boolean;
     form?: string;
-    invalid?: boolean;
     maxlength?: TextareaHTMLAttributes["maxlength"];
     minlength?: TextareaHTMLAttributes["minlength"];
-    modelValue?: string | number;
     name?: string;
     placeholder?: string;
-    readonly?: boolean;
     required?: boolean;
-    resize?: TextareaResize;
     rows?: TextareaHTMLAttributes["rows"];
-    size?: ControlSize;
     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,91 +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.
  *
- * The geometry is shared 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;
 /**
- * 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 (a consumer
- * 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;