@mkbabb/glass-ui 4.2.0 → 6.0.0

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

@@ -0,0 +1,111 @@
+import { type HTMLAttributes } from "vue";
+import type { Motion } from "../_shared/axes";
+/** The canonical tab/option shape — one descriptor across both materials. */
+export interface SegmentedTabOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+    tooltip?: string;
+}
+/** The two materials. `pill` (DEFAULT) = the glass-track slider (absorbs the
+ *  retired `segmented`); `underline` = the paper ink-hairline rule. */
+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";
+/** 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). */
+export type SegmentedTabsOrientation = "horizontal" | "vertical";
+export interface SegmentedTabsResponsive {
+    /**
+     * CSS length consumed inside `(min-width: <breakpoint>)`. BELOW it the
+     * strip collapses to a `<Select>`; at/above it renders the tab strip.
+     * Defaults to `"640px"` (Tailwind `sm:`).
+     */
+    breakpoint?: string;
+    /**
+     * Optional subset shown in the desktop strip (the mobile Select keeps the
+     * full option list). Falls back to `options`.
+     */
+    desktopOptions?: SegmentedTabOption[] | null;
+    /** Accessible name for the mobile `<SelectTrigger>`. */
+    ariaLabel?: string;
+    /** Class merged onto the mobile `<SelectTrigger>` only. */
+    triggerClass?: HTMLAttributes["class"];
+}
+export interface SegmentedTabsProps {
+    options: SegmentedTabOption[];
+    /** 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).
+     */
+    variant?: SegmentedTabsVariant;
+    /**
+     * Interaction semantics, independent of `variant`. When omitted, preserves the
+     * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
+     */
+    semantics?: SegmentedTabsSemantics;
+    /**
+     * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
+     * one indicator engine.
+     */
+    orientation?: SegmentedTabsOrientation;
+    /**
+     * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
+     * `true` uses defaults; an object tunes the breakpoint / desktop subset /
+     * 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?: Motion;
+    class?: HTMLAttributes["class"];
+}
+type __VLS_Props = SegmentedTabsProps;
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_50: {
+    option: SegmentedTabOption;
+    active: boolean;
+}, __VLS_58: {
+    option: SegmentedTabOption;
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    option?: (props: typeof __VLS_50) => any;
+} & {
+    option?: (props: typeof __VLS_58) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    orientation: SegmentedTabsOrientation;
+    variant: SegmentedTabsVariant;
+    responsive: boolean | SegmentedTabsResponsive;
+}, {}, {}, {}, 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/tabs/composables/useEyeglassLive.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef, type Ref } from "vue";
+export interface UseEyeglassLiveParams {
+    /** The active indicator element (the `--eyeglass-live-t` write target; the nested
+     *  `.segmented-indicator__plate` reads the inherited scalar). */
+    indicatorRef: Ref<HTMLElement | null>;
+    /** True when the eyeglass loupe register is engaged (pill material, non-underline).
+     *  When false the composable seats settled and never energizes. */
+    enabled: ComputedRef<boolean>;
+}
+export interface UseEyeglassLive {
+    /** Energize to LIVE (proud), hold the dwell, then decay to SETTLED. Fired on
+     *  pointer-down (the §1 pre-motion bloom) AND on select (the keyboard path). */
+    energize(): void;
+    /** Force the scalar to SETTLED instantly (mount / disable). */
+    settle(): void;
+}
+export declare function useEyeglassLive(params: UseEyeglassLiveParams): UseEyeglassLive;

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

@@ -0,0 +1,42 @@
+import type { ComputedRef, Ref } from "vue";
+import { type UseDragMorphReturn } from "../../../composables/motion/useDragMorph";
+import type { SegmentedTabOption } from "../SegmentedTabs.vue";
+/**
+ * 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.
+ *
+ * When `:draggable`, the `pill` indicator is wired to `useDragMorph` with the snap
+ * targets resolved off the CENTER-ANCHORED button geometry (the SAME measure
+ * `useTabIndicator` runs — reused, never re-measured). Dragging the indicator follows
+ * the finger, squishes on velocity, and flings to the nearest tab center on release →
+ * `onSnap` writes the `model`. The drag is the `pill` material ONLY (the `underline`
+ * ink hairline has no `indicatorRef` element to deform). The squish reads the SAME
+ * `--tab-indicator-max-stretch` live cap the click squish does (the SOLE cap source);
+ * the drag's `--stretch` write composes the existing reciprocal CSS pairing — no
+ * second squish recipe.
+ */
+export interface UseTabDragMorphParams {
+    /** The active indicator element (the drag follow + squish target). */
+    indicatorRef: Ref<HTMLElement | null>;
+    /** True for the vertical (block-axis) orientation. */
+    isVertical: ComputedRef<boolean>;
+    /** True for the underline material (drag is a no-op there). */
+    isUnderline: ComputedRef<boolean>;
+    /** The `:draggable` prop (ADDITIVE, default false). */
+    draggable: () => boolean;
+    /** The strip's rendered options (the snap targets + the refresh trigger). */
+    stripOptions: ComputedRef<SegmentedTabOption[]>;
+    /** Per-option button refs, index-aligned to `stripOptions`. */
+    buttonRefs: Ref<HTMLElement[]>;
+    /** The single-select model — the fling-to-nearest commits the selection. */
+    model: Ref<string | undefined>;
+}
+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`). */
+    drag: UseDragMorphReturn;
+}
+export declare function useTabDragMorph(params: UseTabDragMorphParams): UseTabDragMorphReturn;

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

@@ -0,0 +1,43 @@
+import type { ComputedRef, Ref } from "vue";
+import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue";
+/**
+ * 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
+ * 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).
+ */
+export interface UseTabResponsiveParams {
+    /** The `:responsive` prop — `false` | `true` | a tuning object. */
+    responsive: () => boolean | SegmentedTabsResponsive;
+    /** The full option list (the mobile `<Select>` keeps ALL options). */
+    options: ComputedRef<SegmentedTabOption[]>;
+    /** The single-select model (the strip value the collapse falls back off). */
+    model: Ref<string | undefined>;
+}
+export interface UseTabResponsiveReturn {
+    /** The resolved responsive config, or `null` when `:responsive` is off. */
+    responsiveCfg: ComputedRef<SegmentedTabsResponsive | null>;
+    /** The collapse breakpoint CSS length (default `"640px"`). */
+    breakpoint: ComputedRef<string>;
+    /** The desktop-strip option subset (falls back to the full list). */
+    desktopOptions: ComputedRef<SegmentedTabOption[]>;
+    /** `true` at/above the breakpoint (the matchMedia state; SSR-default `true`). */
+    isDesktop: Ref<boolean>;
+    /** The value the STRIP renders (falls back off a mobile-only model). */
+    stripValue: ComputedRef<string | undefined>;
+    /** The options the STRIP renders (desktop subset when responsive, else full). */
+    stripOptions: ComputedRef<SegmentedTabOption[]>;
+    /** The accessible name for the mobile `<SelectTrigger>`. */
+    mobileAriaLabel: ComputedRef<string>;
+    /** `true` when the mobile `<Select>` should render (responsive + below breakpoint). */
+    showMobileSelect: ComputedRef<boolean>;
+}
+export declare function useTabResponsive(params: UseTabResponsiveParams): UseTabResponsiveReturn;

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

@@ -0,0 +1,51 @@
+import type { ComputedRef, Ref } from "vue";
+/**
+ * The minimal roving option shape — the machine reads ONLY `value` + `disabled`
+ * (BI.W-DOCK-CONTROLS decoupled 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.
+ */
+export interface RovingSelectionOption {
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * 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
+ * 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).
+ */
+export interface UseTabRovingFocusParams {
+    /** The options the strip renders (index-aligned to `buttonRefs`). */
+    stripOptions: ComputedRef<readonly RovingSelectionOption[]>;
+    /** The value the strip renders (the ONE tabstop anchor). */
+    stripValue: ComputedRef<string | undefined>;
+    /** True for the vertical (block-axis) orientation — flips the arrow axis. */
+    isVertical: ComputedRef<boolean>;
+    /** 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;
+}
+export interface UseTabRovingFocusReturn {
+    /** The active index in the rendered strip — the ONE tabstop. */
+    activeIndex: ComputedRef<number>;
+    /** The roving tabindex for option `idx`: `0` for the active tab, `-1` otherwise. */
+    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;

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

@@ -0,0 +1 @@
+export { DEFAULT_INDICATOR_MAX_STRETCH, DEFAULT_INDICATOR_BLOB_MAX, INDICATOR_RELEASE_AT_ARRIVAL, } from "../../composables/motion/useSelectionIndicator";

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

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

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

@@ -0,0 +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)); }

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

@@ -0,0 +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); }

package/dist/components/tags-input/TagsInput.vue.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from 'vue';
+import { type TagsInputRootProps } from 'reka-ui';
+type __VLS_Props = TagsInputRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: import("reka-ui").AcceptableInputValue[]) => any;
+    invalid: (payload: import("reka-ui").AcceptableInputValue) => any;
+    addTag: (payload: import("reka-ui").AcceptableInputValue) => any;
+    removeTag: (payload: import("reka-ui").AcceptableInputValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableInputValue[]) => any) | undefined;
+    onInvalid?: ((payload: import("reka-ui").AcceptableInputValue) => any) | undefined;
+    onAddTag?: ((payload: import("reka-ui").AcceptableInputValue) => any) | undefined;
+    onRemoveTag?: ((payload: import("reka-ui").AcceptableInputValue) => 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/ContinuousMarkers.vue.d.ts

@@ -0,0 +1,49 @@
+import type { TimelineSegment } from "./types";
+/**
+ * <ContinuousMarkers> — the interactive marker overlay of the
+ * continuous-variant timeline. DECK-PRIVATE child of <ContinuousTimeline>
+ * (not a public export). Renders the sibling `<ul role="list">` overlay
+ * carrying one focusable button per segment boundary, each (by default)
+ * wrapped in <HoverPopover>. Lives OUTSIDE the rail's `overflow: hidden`
+ * clip and is a SIBLING of the progressbar rail (Option C structural
+ * split, AB.W2.T4).
+ *
+ * The split is a pure transposition out of the prior monolithic
+ * ContinuousTimeline.vue: same DOM, same class names, same data
+ * attributes, same scoped CSS rules. The orchestrator owns the hovered-key
+ * state + the `#detail` resolution; this child emits the raw
+ * hover/hoverEnd/click signals (popover-open-change drives hover/hoverEnd
+ * on the default path; raw mouseenter/leave on the bare-fallback path) and
+ * forwards the consumer's `#popoverContent` slot through the
+ * `popoverContent` slot.
+ */
+type __VLS_Props = {
+    segments: TimelineSegment[];
+    markersAriaLabel: string;
+    currentSegmentKey?: string;
+    disablePopover?: boolean;
+    boundaryX: (i: number) => number;
+};
+declare var __VLS_21: {
+    segment: TimelineSegment;
+};
+type __VLS_Slots = {} & {
+    popoverContent?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (seg: TimelineSegment) => any;
+    hover: (seg: TimelineSegment) => any;
+    hoverEnd: (seg: TimelineSegment) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((seg: TimelineSegment) => any) | undefined;
+    onHover?: ((seg: TimelineSegment) => any) | undefined;
+    onHoverEnd?: ((seg: TimelineSegment) => 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/ContinuousTimeline.vue.d.ts

@@ -0,0 +1,118 @@
+import type { TimelineSegment } from "./types";
+/**
+ * <ContinuousTimeline> — ONE rounded-pill rail substrate with N
+ * absolute-positioned region children spanning prev-boundary →
+ * current-boundary. Internal variant SFC dispatched from
+ * <GlassTimeline variant="continuous">.
+ *
+ * AA.W1 / A4 §S-17 + AB.W2.T1+T4. Used by multi-phase progress UIs where
+ * the phases are conceptually one progression bar (speedtest ping →
+ * download → upload).
+ *
+ * AB.W2.T4 (A4 §nested-interactive — Option C): the progressbar rail and
+ * the interactive marker buttons are rendered as SIBLINGS, not as
+ * parent/child. `.continuous-track[role="progressbar"]` is a
+ * non-interactive aggregate-progress surface; `.continuous-markers
+ * ul[role="list"]` is the focusable marker overlay.
+ *
+ * AB.W2.T2 (A4 §B2.c): each marker button is wrapped in <HoverPopover>
+ * so hover surfaces a color-coded popover with the segment's
+ * `{ label, value, description, state }`. Consumers override the
+ * popover body via the scoped `#popoverContent` slot.
+ *
+ * AB.W2.T3 (A2 §B2.b): the `currentSegmentKey` prop stamps
+ * `data-current="true"` on the matching marker so consumers (panel /
+ * W3 raised-rivet styling) can distinguish the active phase from the
+ * transient hovered phase. Hover affects the popover only; the
+ * underlying current marker survives hover-leave.
+ *
+ * NON-SCOPED <style> CONTRACT (O.W3 Lane A — Rβ §3.1): the
+ * `.timeline-popover` rules live in a non-scoped <style> block at the
+ * bottom of THIS SFC because HoverCardPortal escapes scoped CSS. The
+ * rules must live in a component that participates in the continuous
+ * render path; this is that component.
+ *
+ * AI.W1-δ `#detail` slot (post-RD-3 §4): the continuous variant emits an
+ * optional `#detail` scoped slot rendered as a sibling of the rail wrap,
+ * payload-rich with `{ segment, source, currentKey, hoveredKey }`. The
+ * primitive owns the effective-segment resolution (hovered ?? current);
+ * consumers own the choreography (e.g., a `<Transition mode="out-in">`
+ * fade-swap keyed on the segment's stable key). The slot mount carries
+ * a `min-height` reservation via `--timeline-detail-min-height` so
+ * idle ↔ active transitions do not reflow the surrounding layout.
+ * Speedtest's `PhaseTimelineDetailPanel` is the canonical consumer
+ * (absorbed in AI.W1-δ).
+ */
+type __VLS_Props = {
+    segments?: TimelineSegment[];
+    /**
+     * Optional aria-label for the rail (role=progressbar). Falls back
+     * to a comma-joined list of segment labels when omitted.
+     */
+    ariaLabel?: string;
+    /**
+     * AB.W2.T3 — current segment key. Stamps `data-current="true"`
+     * on the matching marker (and `data-completed="true"` on prior
+     * markers, derived from each segment's `state`). Hover affects
+     * the popover only; the current marker survives hover-leave so
+     * the panel's current-phase binding does not flicker.
+     */
+    currentSegmentKey?: string;
+    /**
+     * AB.W2.T2 — disable the default per-marker HoverPopover.
+     * Useful when a consumer wants to fully own the hover affordance
+     * (e.g. anchor a single popover externally). The dot still emits
+     * `hover` / `click` events.
+     */
+    disablePopover?: boolean;
+};
+declare var __VLS_17: {
+    segment: TimelineSegment;
+}, __VLS_19: {
+    segment: TimelineSegment | null;
+    source: "current" | "idle" | "hovered";
+    currentKey: string | null;
+    hoveredKey: string | null;
+};
+type __VLS_Slots = {} & {
+    popoverContent?: (props: typeof __VLS_17) => any;
+} & {
+    detail?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    hover: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    hoverEnd: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onHover?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onHoverEnd?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+}>, {
+    disablePopover: boolean;
+}, {}, {}, {}, 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/GlassTimeline.vue.d.ts

@@ -0,0 +1,114 @@
+import type { TimelineSegment } from "./types";
+/**
+ * <GlassTimeline> — dispatcher SFC for three structurally-distinct
+ * timeline variants. Public surface UNCHANGED from the pre-O.W3 god-module.
+ *
+ * - `variant="scrubber"` (default): single-track normalized 0..1 scrubber
+ *   with full keyboard a11y (role=slider + arrow-key step + shift-step).
+ *   Delegates to `<ScrubberTimeline>`.
+ *
+ * - `variant="segmented"` (Z.W2.T1 / A2 §B5): adjacent gradient bands,
+ *   one per phase, with boundary dots that emit `hover` + `click` events
+ *   carrying the segment key + payload. Delegates to `<SegmentedTimeline>`.
+ *
+ * - `variant="continuous"` (AA.W1 / A4 §S-17): ONE rounded-pill rail
+ *   substrate with N absolute-positioned region children. Delegates to
+ *   `<ContinuousTimeline>`. The continuous variant owns the popover
+ *   portal CSS contract (non-scoped <style> block; see ContinuousTimeline).
+ *
+ * Per-segment gradient: either `{from, to}` (expanded as 90deg L→R linear
+ * gradient) or a raw CSS gradient string consumed verbatim. Falls back
+ * to `--timeline-segment-default-gradient` when omitted.
+ *
+ * O.W3 Lane A — this dispatcher replaces the prior 1049-line monolith.
+ * The three variant SFCs + `geometry.ts` shared math live alongside in
+ * the same package. Consumer imports through
+ * `@mkbabb/glass-ui/timeline` are unchanged.
+ */
+type __VLS_Props = {
+    /** Variant — default `scrubber`. */
+    variant?: "scrubber" | "segmented" | "continuous";
+    /** 0..1 scrubber position. Required for scrubber variant. */
+    modelValue?: number;
+    /** Tooltip caret text (scrubber variant only). */
+    label?: string;
+    /** Phase descriptors (segmented + continuous variants). */
+    segments?: TimelineSegment[];
+    /**
+     * Optional aria-label for the continuous variant's rail
+     * (role=progressbar). Falls back to a comma-joined list of segment
+     * labels when omitted.
+     */
+    ariaLabel?: string;
+    /**
+     * AB.W2.T3 (A2 §B2.b) — current segment key (continuous variant).
+     * Stamps `data-current="true"` on the matching marker so consumers
+     * (panel / W3 raised-rivet styling) can distinguish the active
+     * phase from the transient hovered phase.
+     */
+    currentSegmentKey?: string;
+    /**
+     * AB.W2.T2 (A4 §B2.c) — disable the default per-marker
+     * HoverPopover (continuous variant). The dot still emits
+     * `hover` / `click` events.
+     */
+    disablePopover?: boolean;
+};
+declare var __VLS_13: {
+    segment: TimelineSegment;
+}, __VLS_16: {
+    segment: TimelineSegment | null;
+    source: "current" | "idle" | "hovered";
+    currentKey: string | null;
+    hoveredKey: string | null;
+};
+type __VLS_Slots = {} & {
+    popoverContent?: (props: typeof __VLS_13) => any;
+} & {
+    detail?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: number) => any;
+    click: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    hover: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    hoverEnd: (payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any;
+    scrubStart: () => any;
+    scrubEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((v: number) => any) | undefined;
+    onClick?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onHover?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onHoverEnd?: ((payload: {
+        key: string;
+        segment: TimelineSegment;
+    }) => any) | undefined;
+    onScrubStart?: (() => any) | undefined;
+    onScrubEnd?: (() => any) | undefined;
+}>, {
+    modelValue: number;
+    variant: "scrubber" | "segmented" | "continuous";
+    disablePopover: boolean;
+}, {}, {}, {}, 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;
+    };
+};