@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/components/select/SelectContent.vue.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes } from 'vue';
+import { type SelectContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
+type __VLS_Props = SelectContentProps & {
+    class?: HTMLAttributes['class'];
+    surface?: Surface;
+    /**
+     * BD.W-SELECT-WELL — the route's warm-field HUE re-emitted onto the portalled
+     * menu so it transmits its route identity even though it escapes to <body>
+     * (the page field stops at the route root; the portal does not). The menu-local
+     * `.glass-field-portal` spine reads this `--field-h`. A forms route resolves 48
+     * (terracotta); a feedback route a different warm hue — so each dropdown reads as
+     * different warm glass, none gray. Unset → the select.css `--field-h: 48` floor.
+     */
+    fieldHue?: number;
+};
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
+    closeAutoFocus: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {
+    position: "item-aligned" | "popper";
+    align: "center" | "start" | "end";
+    surface: Surface;
+    collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+}, {}, {}, {}, 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/slider/Slider.vue.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes } from 'vue';
+import type { SliderRootProps } from 'reka-ui';
+import { type SliderVariants } from './index';
+import type { Motion } from '../_shared/axes';
+type __VLS_Props = SliderRootProps & {
+    class?: HTMLAttributes['class'];
+    /** Substrate recipe — see `sliderVariants` for axis docs. */
+    variant?: SliderVariants['variant'];
+    /** Track + thumb geometry — sm | md (default) | lg. */
+    size?: SliderVariants['size'];
+    /**
+     * Acquire a `dockKeepOpen` token while the user drags the slider, so
+     * an enclosing dock doesn't auto-collapse mid-gesture. The slider also
+     * subscribes to the dock's `dockHeld` flag and reflects it via
+     * `data-held` on its root, intensifying the thumb halo. Default: true.
+     */
+    keepDockOpen?: boolean;
+    /**
+     * BH.W-MOTION-AXIS — the ONE motion-weight axis (the `liquidDrag` boolean's
+     * clean-break successor). `full` (default) arms the BD.W-GLASS-ATOM-REGISTER liquid
+     * weight-train on the fill: anticipation dip on grab → BOUNDED saturating smear while
+     * pulling (the cel cast lagging by `--motion-weight × velocity`) → follow-through
+     * overshoot on release (the `useDragVelocity` bridge writes `--atom-drag-v`). `reduced`
+     * degrades to the plain non-uniform squish floor (the SAME state PRM produces). `off`
+     * unbinds the velocity bridge AND writes `--motion-weight: 0`; the drag still sets the
+     * value. PRM forces `full → reduced` regardless (a11y absolute).
+     */
+    motion?: Motion;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: number[] | undefined) => any;
+    valueCommit: (payload: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: number[] | undefined) => any) | undefined;
+    onValueCommit?: ((payload: number[]) => any) | undefined;
+}>, {
+    keepDockOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'class-variance-authority';
+export { default as Slider } from './Slider.vue';
+/**
+ * Slider variant + size axes.
+ *
+ * The CVA emits Tailwind arbitrary CSS-variable classes on the SliderRoot.
+ * The SFC's scoped CSS keys off `[data-variant]` for substrate-recipe
+ * selectors — variant determines how `.slider-track`, `.slider-range`, and
+ * `.slider-thumb` paint. The size axis lifts pure geometry via CSS vars
+ * (`--slider-track-height`, `--slider-thumb-size`) the SFC defaults read.
+ *
+ * Exactly two canonical recipes ship:
+ *   standard — the CONTINUOUS GLASS CYLINDER with NO VISIBLE THUMB AT ALL (the
+ *              user's binding bar, USER-AUDIT-2026-06-10 §B3): you pull the TRACK
+ *              itself. A THICK glass capsule track; the filled `.slider-range`
+ *              glass cylinder (the W52 liquid-glass material — backdrop + edge rim,
+ *              tinted to `--primary`) is pulled along it, and its leading EDGE IS
+ *              the handle — the only affordance is the fill edge + the cursor/touch
+ *              response. The reka `<SliderThumb>` STAYS MOUNTED (a11y/keyboard/drag/
+ *              value-follow native on it) but paints INVISIBLE: width 0, opacity 0,
+ *              transparent — no distinct disc/cap/ring over the continuous
+ *              cylinder. Keyboard focus rings the TRACK (the W-PRIM-POLISH focus
+ *              register), not the invisible thumb; hover/held lift the track FILL's
+ *              edge rim; the iOS press spring gives the whole fill a felt squish.
+ *              This is the general-purpose glass scrubber and the default.
+ *   spectrum — the value.js gradient-track color slider: a tall capsule whose
+ *              background is a consumer-supplied `--slider-track-bg`
+ *              linear-gradient (the LCH/hue ramp), a transparent range, and a
+ *              THIN VISIBLE squircle thumb the HEIGHT of the track (the iOS/value.js
+ *              color-picker idiom — a slim vertical bar, `w-3`-thin per the value.js
+ *              reference; `corner-shape: superellipse()` via `--corner-shape-thumb`,
+ *              @supports-gated over a generous proportional round fallback that
+ *              reads squircle-adjacent cross-engine). This is the aurora/blob
+ *              color-picking surface — its thumb IS visible (it is the handle).
+ *
+ * Sizes — the standard cylinder is the thick glass capsule (the invisible thumb's
+ * value-follow inset still rides the size token for the 44px coarse hit-halo):
+ *   sm — 12px track
+ *   md — 20px track (default)
+ *   lg — 28px track
+ */
+export declare const sliderVariants: (props?: ({
+    variant?: "standard" | "spectrum" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SliderVariants = VariantProps<typeof sliderVariants>;

package/dist/components/sortable-list/SortableHandle.vue.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes } from "vue";
+type __VLS_Props = {
+    type?: ButtonHTMLAttributes["type"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "button" | "reset" | "submit";
+}, {}, {}, {}, 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/sortable-list/SortableItem.vue.d.ts

@@ -0,0 +1,22 @@
+import type { SortableId } from "./composables/types";
+type __VLS_Props = {
+    id: SortableId;
+    disabled?: boolean;
+};
+declare var __VLS_1: {
+    isBeingDragged: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: 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/sortable-list/SortableList.vue.d.ts

@@ -0,0 +1,39 @@
+import { type SortableId } from "./composables/useSortable";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** The reactive list being reordered. */
+        items: readonly T[];
+        getId: (item: T) => SortableId;
+        getLabel?: (item: T) => string;
+        label?: string;
+        group?: string;
+        handleSelector?: string | null;
+        axis?: "x" | "y";
+    } & {
+        onInsert?: ((index: number, item: unknown) => any) | undefined;
+        onReorder?: ((next: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        isDragging: import("vue").ComputedRef<boolean>;
+        dragId: import("vue").ComputedRef<SortableId | null>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            isDragging: boolean;
+            dragId: SortableId | null;
+        }) => any;
+    };
+    emit: ((evt: "insert", index: number, item: unknown) => void) & ((evt: "reorder", next: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/sortable-list/composables/dragController.d.ts

@@ -0,0 +1,29 @@
+import { type ShallowRef } from "vue";
+import type { GhostRenderer } from "./ghostRenderer";
+import type { InstanceHandle, SortableId } from "./types";
+export interface DragControllerDeps {
+    getItems: () => readonly unknown[];
+    getId: (item: unknown) => SortableId;
+    getLabel: (item: unknown) => string;
+    elements: Map<SortableId, Element | null>;
+    handle: InstanceHandle;
+    onReorder: (next: unknown[]) => void;
+    horizontal: boolean;
+    ghost: GhostRenderer;
+    announce: (message: string) => void;
+    focusItem: (id: SortableId) => void;
+}
+export interface DragController {
+    dragId: ShallowRef<SortableId | null>;
+    pos: ShallowRef<{
+        x: number;
+        y: number;
+    } | null>;
+    dropIndex: ShallowRef<number | null>;
+    pointerCaptureActive: ShallowRef<boolean>;
+    beginPointer: (id: SortableId, event: PointerEvent) => void;
+    onKeydown: (id: SortableId, event: KeyboardEvent) => void;
+    cancel: () => void;
+    dispose: () => void;
+}
+export declare function createDragController(deps: DragControllerDeps): DragController;

package/dist/components/sortable-list/composables/types.d.ts

@@ -0,0 +1,50 @@
+import type { ComputedRef, Ref } from "vue";
+export type SortableId = string | number;
+export interface SortableOptions<T> {
+    items: Ref<readonly T[]> | ComputedRef<readonly T[]>;
+    getId: (item: T) => SortableId;
+    getLabel?: (item: T) => string;
+    label?: string;
+    onReorder: (next: T[]) => void;
+    onInsert?: (index: number, item: unknown) => void;
+    group?: string;
+    handleSelector?: string | null;
+    axis?: "x" | "y";
+}
+export interface SortableRowBinding {
+    ref: (el: unknown) => void;
+    dataAttrs: Record<string, string>;
+    class: ComputedRef<Record<string, boolean>>;
+    disabled: ComputedRef<boolean>;
+    onPointerdown: (event: PointerEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+}
+export interface SortableContainerBinding {
+    ref: (el: unknown) => void;
+    dataAttrs: Record<string, string>;
+}
+export interface UseSortableReturn {
+    registerItem: (id: SortableId, disabled?: () => boolean) => SortableRowBinding;
+    container: SortableContainerBinding;
+    isDragging: ComputedRef<boolean>;
+    dragId: ComputedRef<SortableId | null>;
+    dragPosition: ComputedRef<{
+        x: number;
+        y: number;
+    } | null>;
+    dropIndex: ComputedRef<number | null>;
+    pointerCaptureActive: ComputedRef<boolean>;
+    announcement: ComputedRef<string>;
+    getItemLabel: (id: SortableId) => string;
+}
+export interface InstanceHandle {
+    group?: string;
+    label: string;
+    getContainer: () => Element | null;
+    getItems: () => readonly unknown[];
+    getId: (item: unknown) => SortableId;
+    getElements: () => Map<SortableId, Element | null>;
+    setExternalDropIndex: (index: number | null) => void;
+    acceptExternal: (index: number, item: unknown) => void;
+    focusItem: (id: SortableId) => void;
+}

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

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

package/dist/components/sortable-list/context.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef } from "vue";
+import type { SortableId, SortableRowBinding, UseSortableReturn } from "./composables/types";
+export declare const provideSortableContext: (ctx: UseSortableReturn) => void;
+export declare const useSortableContext: () => UseSortableReturn;
+export interface SortableItemContext {
+    id: SortableId;
+    label: ComputedRef<string>;
+    binding: SortableRowBinding;
+}
+export declare const provideSortableItemContext: (ctx: SortableItemContext) => void;
+export declare const useSortableItemContext: () => SortableItemContext;

package/dist/components/sortable-list/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SortableList } from "./SortableList.vue";
+export { default as SortableItem } from "./SortableItem.vue";
+export { default as SortableHandle } from "./SortableHandle.vue";
+export type { SortableId } from "./composables/types";

package/dist/components/split-chars/SplitChars.vue.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SplitChars — the component face of the per-glyph split. It renders the `text`
+ * prop into per-glyph `.char` spans (each carrying `--char-index`), wraps them in
+ * the shipped `.char-stagger` host (so the library CSS staggers them into a
+ * kinetic entrance on the per-spring `--spring-smooth` clock), and — by
+ * construction — keeps the word as ONE accessible name: the wrapper carries
+ * `aria-label="{text}"`, every glyph span is `aria-hidden`. AT hears "Fourier",
+ * never the spell-out.
+ *
+ * Usage:
+ *   <SplitChars text="Fourier" />
+ *   <SplitChars text="Hello World" by="word" as="h1" />
+ *
+ * The `text` PROP is the single source for BOTH the split AND the label — there
+ * is NO default slot (a slot would split arbitrary markup, so the accessible name
+ * would be ambiguous). The split re-runs on a `text` change (the watcher →
+ * `split()`). Engine-free: it composes `useCharStagger` (vue-only) + the shipped
+ * CSS; it adds NO animation engine and NO PRM logic (it inherits the recipe's
+ * carve — the split is structural, only the CSS `fade-in` is PRM-gated).
+ */
+import { type Component, type HTMLAttributes } from "vue";
+import { type UseCharStaggerOptions } from "../../composables/motion/useCharStagger";
+type __VLS_Props = {
+    /** The word to split — REQUIRED. It is the single source for both the
+     *  per-glyph split AND the accessible label (the load-bearing a11y fact). */
+    text: string;
+    /** The split unit. Default `"char"`. */
+    by?: UseCharStaggerOptions["by"];
+    /** Host tag/component (reka-ui Primitive `as`; default `"span"`) — set
+     *  `as="h1"` to render the kinetic word as a heading. */
+    as?: string | Component;
+    /**
+     * Whether to compose the shipped `.char-stagger` host recipe (default
+     * `true` → byte-identical to the historical behaviour). Set `false` to
+     * DROP `.char-stagger` so the recipe's mount-bound `fade-in` never fires
+     * — the load-bearing reason is "no mount-fire-before-reveal": when a
+     * caller owns the entrance itself (an IntersectionObserver-gated reveal,
+     * a replay harness), the `.char-stagger` `animation: fade-in … backwards`
+     * that binds on MOUNT would flash the glyphs in before the caller's
+     * reveal claims them. `:stagger=false` yields the bare `.char` spans
+     * (still carrying `--char-index`/`--char-total`) so the caller's own CSS
+     * owns the per-glyph entrance. The word stays ONE accessible name either
+     * way (the a11y contract is on the wrapper, not the recipe class). */
+    stagger?: boolean;
+    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<{}>, {
+    as: string | Component;
+    by: "char" | "word" | "grapheme";
+    stagger: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/stacked-icons/types.d.ts

@@ -0,0 +1,19 @@
+export interface StackedIconGroupProps<TItem> {
+    /** Items to display */
+    items: TItem[];
+    /** Max visible icons before showing +N overflow */
+    maxVisible?: number;
+    /** Stack orientation (BI.W-SYNONYM-RENAMES — the `direction` synonym renamed to
+     *  the shared `orientation` axis vocabulary; horizontal|vertical, zero value change). */
+    orientation?: "horizontal" | "vertical";
+    /** Reverse the visual order */
+    reversed?: boolean;
+    /** Icon size */
+    size?: "sm" | "md" | "lg";
+    /** Expand icons on group hover */
+    expandOnHover?: boolean;
+    /** Root element tag */
+    as?: string;
+    /** Key extraction function for v-for */
+    keyFn?: (item: TItem, index: number) => string | number;
+}

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

@@ -0,0 +1,45 @@
+import { type HTMLAttributes } from "vue";
+import { type PrimitiveProps } from "reka-ui";
+import { type Surface as SurfaceKind, type SurfaceTier } from "../_shared/useSurfaceAxis";
+export interface SurfaceProps extends PrimitiveProps {
+    /** The base glass-ladder rung the plate paints over. Default `resting`. */
+    tier?: SurfaceTier;
+    /** The surface-decoration rung (the ONE shared axis): `glass` (default, the
+     *  plain tier rung) · `veil` (borderless/rimless text-legibility plate) ·
+     *  `opaque` (the `--glass-level:0` solid-card escape) · `clear` (the
+     *  scrim-coupled maximally-translucent Apple-Clear plate). Resolved through
+     *  `decorationClass()` — the ONE decoration source. */
+    surface?: SurfaceKind;
+    /** The BB.W-DEEP-GLASS opt-in maximal iOS-27 tier (Apple saturate-1.5/blur-16px):
+     *  a `.glass-deep` decoration ON the `floating` base rung. Default `false` — a
+     *  bare plate rides the calm content default. */
+    deep?: boolean;
+    /** Surface drop shadow via `--shadow-card`. `veil` strips it by design (the
+     *  rimless plate is shadowless). Default `false` (the minimal bare plate). */
+    shadow?: boolean;
+    /** The `::after` paper-grain overlay. Default `false`. When off, the grain
+     *  pseudo is hidden (`[&::after]:hidden`) — a scroll pane / cartoon plate opts
+     *  out (the grain conflicts with overflow:auto repaints / the cast). */
+    grain?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_8: {};
+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;
+    surface: SurfaceKind;
+    as: import("reka-ui").AsTag | import("vue").Component;
+    deep: boolean;
+    tier: SurfaceTier;
+    grain: 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/surface/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Surface, type SurfaceProps } from "./Surface.vue";
+export { decorationClass, surfaceClass } from "../_shared/useSurfaceAxis";

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

@@ -0,0 +1,101 @@
+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 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[];
+    /**
+     * The material — `pill` (DEFAULT, the glass-track slider) or `underline`
+     * (the paper ink-hairline rule).
+     */
+    variant?: SegmentedTabsVariant;
+    /**
+     * 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;