@mkbabb/glass-ui 7.0.0 → 8.0.0

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;

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

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

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

@@ -1,57 +1,57 @@
 /**
- * Timeline primitive types — segmented + continuous variants.
+ * Timeline — ONE normalized reporting axis.
  *
- * The default `scrubber` variant
- * (single-track YouTube-style scrubber) keeps its original numeric model;
- * `segmented` renders adjacent gradient bands with hover/click dots;
- * `continuous` renders one pill rail with N absolute-positioned
- * region children. Both array-variants consume the same `TimelineSegment[]`
- * data shape — only the rendering geometry differs.
+ * N ordered spans on the unit interval, each with a lifecycle state, a fill
+ * fraction and an ordinal jewel hue, whose end boundaries are addressable
+ * marks. The whole is one number published three ways (`defineExpose`, the
+ * `#detail` scope, `--timeline-value`).
+ *
+ * `role="progressbar"`, never `role="slider"` — a timeline REPORTS. The
+ * commanding surface is `<Slider :marks>` (the playhead-with-ticks case).
  */
-/** Per-segment lifecycle. Drives fill + dot states. */
+/** Per-span lifecycle. Drives fill extent + mark glyph — never a hue swap. */
 export type TimelineSegmentState = "pending" | "active" | "completed";
-/**
- * Gradient endpoints. Either a raw CSS expression (linear-gradient(...))
- * or a `{ from, to }` token pair the primitive expands into a 90deg
- * left-to-right linear-gradient. Accepts CSS color, color-mix(...), or
- * `var(--token)` references.
- */
-export interface TimelineSegmentGradient {
-    from: string;
-    to: string;
-}
 export interface TimelineSegment {
-    /** Stable identifier emitted on hover/click. Must be unique per timeline. */
+    /** Stable identity. Emitted on `select` / `hover`; unique per timeline. */
     key: string;
-    /** Display name. Surfaces in the boundary-dot tooltip. */
+    /** Display name. Read in the mark's accessible name and the `#detail` scope. */
     label: string;
-    /** Lifecycle state — drives fill percentage + dot affordance. */
-    state: TimelineSegmentState;
+    /** Lifecycle. Default `"pending"`. */
+    state?: TimelineSegmentState;
     /**
-     * Optional progress within the segment (0..1). When omitted, falls
-     * back to: 1 for `completed`, 0 for `pending`, 0.5 for `active`.
-     * Reduced-motion consumers may pin this to `1`/`0` to suppress mid-
-     * segment animation while retaining final-state visibility.
+     * The span's END boundary on the unit axis, 0..1, CUMULATIVE. Clamped
+     * monotone non-decreasing — never sorted (a typo must stay visible, not
+     * silently reorder the narrative). Omitted spans take an equal share of the
+     * axis remaining between their pinned neighbours; all-omitted is the equal
+     * split.
      */
-    progress?: number;
+    at?: number;
     /**
-     * Per-segment gradient. Either a `{from, to}` pair (default 90deg
-     * left-to-right) or a raw CSS gradient string the primitive consumes
-     * verbatim. Falls back to a section-tone via the
-     * `--timeline-segment-default-gradient` token when omitted.
-     */
-    gradient?: TimelineSegmentGradient | string;
-    /**
-     * Optional payload surfaced via the `hover` / `click` events. Common
-     * shapes: formatted value strings ("145.3 Mbps"), per-phase metric
-     * objects, or `null` for pending segments.
+     * Progress WITHIN the span, 0..1. Defaults: `pending` 0, `completed` 1.
+     *
+     * `active` with `progress` OMITTED is the INDETERMINATE state — a phase
+     * underway with unknown progress. It paints no fill and no cap; the
+     * specular flow is its SOLE carrier.
      */
+    progress?: number;
+    /** Overrides the ordinal hue for this span. Any CSS `<color>`. */
+    accent?: string;
+    /** Opaque payload. Returned via `select` / `hover` and the `#detail` scope. */
     value?: unknown;
+}
+export interface TimelineProps {
+    segments?: TimelineSegment[];
+    /** The key of the span the consumer considers current. `aria-current="step"`. */
+    current?: string;
     /**
-     * Optional relative weight for the `continuous` variant region width
-     * (default `1` — equal share). Per-segment widths are computed as
-     * `weight / sum(weights)`. Ignored by the `segmented` variant (which
-     * uses CSS flex distribution via `--timeline-segment-flex`).
+     * The accessible name of the reporting axis — `aria-label` on the
+     * `role="progressbar"` track.
+     *
+     * It has to be a PROP: the track owns no text content, and a fallthrough
+     * `aria-label` lands on the root, which is `role="group"`. Without it the
+     * bar announces a number with nothing attached to it (axe
+     * `aria-progressbar-name`). No name is invented when it is omitted — an
+     * invented one would be a lie.
      */
-    weight?: number;
+    label?: string;
 }

package/dist/components/toast/Toast.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { Surface, Tone } from "../_shared/axes";
+import type { Surface, Tone } from "../_shared/axes.js";
 export type ToastSwipeEvent = CustomEvent<{
     originalEvent: PointerEvent;
     delta: {
@@ -34,18 +34,18 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pause: () => any;
     "update:open": (value: boolean) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
-    pause: () => any;
     resume: () => any;
     swipeStart: (event: ToastSwipeEvent) => any;
     swipeMove: (event: ToastSwipeEvent) => any;
     swipeCancel: (event: ToastSwipeEvent) => any;
     swipeEnd: (event: ToastSwipeEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
+    onPause?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPause?: (() => any) | undefined;
     onResume?: (() => any) | undefined;
     onSwipeStart?: ((event: ToastSwipeEvent) => any) | undefined;
     onSwipeMove?: ((event: ToastSwipeEvent) => any) | undefined;

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

@@ -1,8 +1,8 @@
-export { default as Toast, type ToastEmits, type ToastProps, type ToastSwipeEvent, } from "./Toast.vue";
-export { default as ToastAction, type ToastActionProps } from "./ToastAction.vue";
-export { default as ToastClose, type ToastCloseProps } from "./ToastClose.vue";
-export { default as ToastDescription, type ToastDescriptionProps, } from "./ToastDescription.vue";
-export { default as ToastTitle, type ToastTitleProps } from "./ToastTitle.vue";
-export { default as Toaster } from "./Toaster.vue";
-export { toast, useToast, type ToastHandle, type ToastOptions } from "./use-toast";
-export type { ToasterPosition } from "./Toaster.vue";
+export { default as Toast, type ToastEmits, type ToastProps, type ToastSwipeEvent, } from "./Toast.vue.js";
+export { default as ToastAction, type ToastActionProps } from "./ToastAction.vue.js";
+export { default as ToastClose, type ToastCloseProps } from "./ToastClose.vue.js";
+export { default as ToastDescription, type ToastDescriptionProps, } from "./ToastDescription.vue.js";
+export { default as ToastTitle, type ToastTitleProps } from "./ToastTitle.vue.js";
+export { default as Toaster } from "./Toaster.vue.js";
+export { toast, useToast, type ToastHandle, type ToastOptions } from "./use-toast.js";
+export type { ToasterPosition } from "./Toaster.vue.js";

package/dist/components/toast/use-toast.d.ts

@@ -1,5 +1,5 @@
 import type { Component, ComputedRef, VNode } from "vue";
-import type { Surface, Tone } from "../_shared/axes";
+import type { Surface, Tone } from "../_shared/axes.js";
 export interface ToastOptions {
     title?: string;
     description?: string;
@@ -36,4 +36,11 @@ interface UseToastReturn {
 declare function useToast(): UseToastReturn;
 /** Renderer-only queue access; intentionally absent from the public barrel. */
 declare function useToastQueue(): ComputedRef<readonly QueuedToast[]>;
-export { toast, useToast, useToastQueue };
+/**
+ * Release a dismissed toast's queue slot. Called by `Toaster.vue` when the
+ * `.glass-vaporize` exit animation completes (the `animationend` presence
+ * resolution) — the frame the surface stops painting is the frame the slot frees.
+ * Renderer-only; intentionally absent from the public barrel.
+ */
+declare function removeToast(toastId: string): void;
+export { toast, useToast, useToastQueue, removeToast };

package/dist/components/toggle-group/ToggleGroup.vue.d.ts

@@ -1,47 +1,36 @@
 import { type HTMLAttributes } from "vue";
-import { type ToggleGroupSize, type ToggleGroupVariant } from "./toggleGroupContext";
-import type { Orientation } from "../_shared/axes";
-import { type Direction, type FormFieldProps } from "../_shared/primitive";
-import { type SelectionMode, type SelectionValue } from "../_shared/selection";
-export type ToggleGroupValue<TMode extends SelectionMode = SelectionMode> = TMode extends "single" ? SelectionValue | undefined : SelectionValue[];
-export interface ToggleGroupProps<TMode extends SelectionMode = SelectionMode> extends FormFieldProps {
-    type: TMode;
-    modelValue?: TMode extends "single" ? SelectionValue : SelectionValue[];
-    defaultValue?: TMode extends "single" ? SelectionValue : SelectionValue[];
-    rovingFocus?: boolean;
-    disabled?: boolean;
+import type { Orientation } from "../_shared/axes.js";
+import { type ControlProps, type ControlSize } from "../_shared/control.js";
+import type { SelectionMode, SelectionValue } from "../_shared/selection.js";
+export interface ToggleGroupProps extends ControlProps {
+    /** `single` — a one-of-N chooser. `multiple` — N independent toggles. */
+    type: SelectionMode;
     orientation?: Orientation;
-    dir?: Direction;
-    loop?: boolean;
+    size?: ControlSize;
     class?: HTMLAttributes["class"];
-    variant?: ToggleGroupVariant;
-    size?: ToggleGroupSize;
 }
-export interface ToggleGroupEmits<TMode extends SelectionMode = SelectionMode> {
-    "update:modelValue": [value: ToggleGroupValue<TMode>];
-}
-export interface ToggleGroupSlotProps<TMode extends SelectionMode = SelectionMode> {
-    modelValue: ToggleGroupValue<TMode>;
-}
-declare const __VLS_export: <TMode extends SelectionMode>(__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<ToggleGroupProps<TMode> & {
-        "onUpdate:modelValue"?: ((value: ToggleGroupValue<TMode>) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        default?: (props: ToggleGroupSlotProps<TMode>) => unknown;
-    };
-    emit: (evt: "update:modelValue", value: ToggleGroupValue<TMode>) => void;
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+type __VLS_Props = ToggleGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: SelectionValue | SelectionValue[];
 };
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectionValue | SelectionValue[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectionValue | SelectionValue[] | undefined) => any) | undefined;
+}>, {
+    size: ControlSize;
+    orientation: Orientation;
+}, {}, {}, {}, 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/toggle-group/ToggleGroupItem.vue.d.ts

@@ -1,16 +1,16 @@
 import { type HTMLAttributes } from "vue";
-import { type ToggleGroupSize, type ToggleGroupVariant } from "./toggleGroupContext";
-import type { SelectionValue } from "../_shared/selection";
+import type { SelectionValue } from "../_shared/selection.js";
 export interface ToggleGroupItemProps {
+    /** Stable identity within the group. The library's ONE scalar. */
     value: SelectionValue;
     disabled?: boolean;
     class?: HTMLAttributes["class"];
-    variant?: ToggleGroupVariant;
-    size?: ToggleGroupSize;
 }
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+type __VLS_Slots = {
+    default?: () => unknown;
+    indicator?: (props: {
+        selected: boolean;
+    }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToggleGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggleGroupItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/toggle-group/context.d.ts

@@ -0,0 +1,28 @@
+import type { ComputedRef } from "vue";
+import type { SelectionValue } from "../_shared/selection.js";
+/** What an item publishes to its group. The element is the roving/recenter target. */
+export interface ToggleItemEntry {
+    /** The item's stable identity — the library's ONE scalar (never narrowed here). */
+    readonly value: SelectionValue;
+    /** Read live: an item may become disabled after it registers. */
+    readonly disabled: () => boolean;
+    /** The item's host button, or `null` before mount / after unmount. */
+    el: HTMLElement | null;
+}
+/** What the group publishes back — every per-item answer, none of it re-derived. */
+export interface ToggleGroupContext {
+    register: (entry: ToggleItemEntry) => void;
+    unregister: (entry: ToggleItemEntry) => void;
+    /** `true` when the item's value is in the model (one for `single`, N for `multiple`). */
+    isSelected: (value: SelectionValue) => boolean;
+    /** Role-per-mode ARIA from the engine — `radio`/`aria-checked` or `aria-pressed`. */
+    itemAttrs: (value: SelectionValue) => Record<string, string>;
+    /** The roving tabindex: exactly one `0` in the group, `-1` everywhere else. */
+    tabindex: (entry: ToggleItemEntry) => number;
+    /** Commit — the engine's ONE selection path (model write + recenter). */
+    select: (entry: ToggleItemEntry) => void;
+    /** The group's disabled axis, so an item need not read two sources. */
+    disabled: ComputedRef<boolean>;
+}
+export declare function provideToggleGroupContext(context: ToggleGroupContext): void;
+export declare const useOptionalToggleGroupContext: () => ToggleGroupContext | null;

package/dist/components/toggle-group/index.d.ts

@@ -1,3 +1,2 @@
-export { default as ToggleGroup, type ToggleGroupEmits, type ToggleGroupProps, type ToggleGroupSlotProps, type ToggleGroupValue, } from "./ToggleGroup.vue";
-export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./ToggleGroupItem.vue";
-export type { ToggleGroupSize, ToggleGroupVariant } from "./toggleGroupContext";
+export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup.vue.js";
+export { default as ToggleGroupItem, type ToggleGroupItemProps, } from "./ToggleGroupItem.vue.js";