@mkbabb/glass-ui 4.0.1 → 4.1.0

package/dist/components/custom/split-chars/index.d.ts

@@ -0,0 +1 @@
+export { default as SplitChars } from "./SplitChars.vue";

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

@@ -50,12 +50,14 @@ export interface SegmentedTabsProps {
      */
     responsive?: boolean | SegmentedTabsResponsive;
     /**
-     * BB.W-DRAG-MORPH — the LIQUID TAB. When `true` (ADDITIVE, default `false`),
-     * the `pill` indicator becomes 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`). The click-selection path is byte-identical;
-     * the drag is opt-in. No-op on `underline` (the ink hairline has no indicator
-     * element to deform).
+     * BC.W-LIQUID-TAB — 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`). DEFAULT `true` — the
+     * pull is the iOS-27 primary affordance, 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). A consumer who
+     * wants click-only opts out with `:draggable="false"`. No-op on `underline` (the
+     * ink hairline has no indicator element to deform — `dragEnabled` gates it).
      */
     draggable?: boolean;
     class?: HTMLAttributes["class"];

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

@@ -1,10 +1,18 @@
 /**
  * Fallback for `--tab-indicator-max-stretch` when the cascade leaves it unset — the
- * default ≈+8% travel-squish cap (AX.W53). `--stretch = 1 + frac · (cap − 1)`, so a
+ * default ≈+15% travel-squish cap. `--stretch = 1 + frac · (cap − 1)`, so a
  * full-width jump reaches the cap and a tiny hop stays near 1. The token is the
  * authority; this is the no-token floor.
+ *
+ * BC.W-LIQUID-TAB — lifted 1.08 → 1.15 so a FAST liquid-tab pull visibly swells the
+ * pill (the gel-squish READS as liquid, glass-dock-codebase.md §3.4) — still capped
+ * LOW (≤1.2, the anti-taffy-pull bar). The cap is shared by the click travel-squish
+ * AND the drag pull-morph (the SOLE cap source — the constant + the token in
+ * lockstep, never a fork); the volume-preserving reciprocal pairing
+ * (`scale: var(--stretch) calc(1/var(--stretch))`) is unchanged — only the magnitude
+ * lifts.
  */
-export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.08;
+export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.15;
 /**
  * The travel-progress fraction at which the squish RELEASES — the Material
  * "grow then shrink" close, keyed to ARRIVAL (BA.W-TABS). The squish opens with
@@ -14,5 +22,15 @@ export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.08;
  * release schedules off the calibrated clock (`--spring-snappy-duration`) scaled
  * by this fraction, so the stretch peaks during travel and shrinks to fit AT
  * arrival, never before.
+ *
+ * BC.W-UNDERLINE-TUNE — VERIFIED against the eased `snappy` (response 0.42 / ζ 0.78,
+ * the BC.W-SPRING-EASE re-derive). On that curve the position arrives (≥99% travel)
+ * at ~74% of the `--spring-snappy-duration` clock and the 90%-travel point lands at
+ * ~57% (mid-clock — the front-load gone). 0.82 releases the squish at ~279ms (= 0.82
+ * × 340ms), i.e. AT arrival (just past the ~74% arrival), so the stretch peaks DURING
+ * travel and shrinks to fit AT arrival — never before (0.82 ≥ the 0.74 arrival point).
+ * The position + squish now read ONE matched window: the desync (HEAD position-at-16%
+ * vs squish-at-82%) collapsed because the eased curve actually travels across the clock.
+ * KEPT at 0.82 — the eased arrival sits inside the release fraction; no nudge needed.
  */
 export declare const INDICATOR_RELEASE_AT_ARRIVAL = 0.82;

package/dist/components/custom/watercolor-dot/WatercolorDot.vue.d.ts

@@ -1,32 +1,45 @@
 /**
- * WatercolorDot — an organic pastel blob swatch (AU.W7 lift). A CSS/SVG primitive
- * (no WebGL): the blob shape is a deterministic per-vertex `border-radius` morph
- * (seeded by `color + seed`), and the wet, bleeding edge is an SVG turbulence +
- * displacement filter that is INTERNALISED — the component mounts its own
- * namespaced `<filter>` so there is zero consumer plumbing. Mount the dot and the
- * filter just works.
+ * WatercolorDot — an organic pastel blob swatch. A CSS/SVG primitive (NO drawing
+ * context — no WebGL/WebGPU/Canvas2D; the deliberate suite counterexample, the mark
+ * that documents WHY it is not a GPU context): the blob shape is a deterministic
+ * per-vertex `border-radius` morph (seeded by `color + seed`), and the wet, bleeding
+ * edge is an SVG turbulence + displacement filter that is INTERNALISED — the component
+ * mounts its own namespaced `<filter>` so there is zero consumer plumbing. Mount the
+ * dot and the filter just works.
+ *
+ * Safari-safe by construction (USER-DEFECTS §H): the SVG `<filter>` rasterizes ONCE
+ * + caches (the HandMark `texture.ts` idiom) and NEVER re-rasterizes per frame; the
+ * `animate` liveness rides a seeded COMPOSITOR `transform` wobble the compositor
+ * accelerates without touching the filter graph (a per-frame `border-radius` paint
+ * under the filter is the §H Safari flash, retired here). The filter `seed` is
+ * per-instance off `hashString(color + seed)` so each dot's wet edge is uniquely
+ * displaced (no twelve-clones).
  *
  * Color arrives as a CSS string painted straight onto the swatch background — the
  * dot needs no resolver because it does not feed a shader; the injected-color seam
- * shape is "pass the CSS color in".
+ * shape is "pass the CSS color in". Warm-cream identity by default (the dot bakes no
+ * hue; the demo palette is presets-in-consumers).
  */
 type __VLS_Props = {
     /** CSS color painted as the swatch background (any CSS color form). */
     color: string;
     /**
-     * Render mode (BA.W-EMISSION / BA-VJS-C2):
+     * Render mode:
      *   `solid` (default) — the filled organic blob (the swatch background IS the
      *                       color; the existing register, unchanged).
-     *   `ghost`  — the SAME seeded blob SILHOUETTE rendered as a STROKE: a
-     *              `color` border over a low-alpha `color` fill, the irregular-blob
-     *              outline (NOT a CSS dashed rectangle). A `ghost` of a given
-     *              `color + seed` matches the SAME silhouette the `solid` dot of
-     *              that seed renders — both read the same `useWatercolorBlob`
-     *              border-radius morph; the stroke is the only delta. The
+     *   `ghost`  — the SAME seeded blob SILHOUETTE traced as a DASHED outline: an
+     *              SVG <ellipse> `stroke-dasharray` carrying the SAME wet
+     *              `feDisplacementMap` filter, so the displacement wobbles the
+     *              dashed ellipse INTO the seeded organic outline (a dashed
+     *              OUTLINE following the silhouette — NOT a solid ring, NOT a CSS
+     *              dashed rectangle). A low-alpha `color` fill is kept behind the
+     *              stroke. A `ghost` of a given `color + seed` carries the SAME
+     *              seeded `border-radius` silhouette the `solid` dot of that seed
+     *              renders (both read the same `useWatercolorBlob` morph). The
      *              empty-palette-slot / placeholder affordance.
      */
     variant?: "solid" | "ghost";
-    /** Run the rAF-driven shape morph (default false → static, hover-morph only). */
+    /** Run the rAF-driven compositor transform wobble (default false → static). */
     animate?: boolean;
     /** Host tag — `div` (decorative) or `button` (interactive). */
     tag?: "div" | "button";
@@ -34,7 +47,7 @@ type __VLS_Props = {
     cycleDuration?: number;
     /** Border-radius range [lo, hi] as percentages (default [20, 80]). */
     range?: [number, number];
-    /** Extra seed string mixed into the shape PRNG for reproducible uniqueness. */
+    /** Extra seed string mixed into the shape + wet-edge PRNG for uniqueness. */
     seed?: string;
 };
 declare var __VLS_11: {};

package/dist/components/custom/watercolor-dot/useWatercolorBlob.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from "vue";
 export interface UseWatercolorBlobOptions {
-    /** Enable the rAF animation loop. */
+    /** Enable the rAF animation loop (drives a COMPOSITOR transform wobble). */
     animate?: boolean;
     /** Base cycle duration in ms (default 4000). */
     cycleDuration?: number;
@@ -11,14 +11,19 @@ export interface UseWatercolorBlobOptions {
 }
 /**
  * Drives a watercolor dot's organic blob shape. Deterministic given `color + seed`
- * (seeds the PRNG), so the same color reproduces the same shape across mounts. In
- * static mode it emits a base + hover `border-radius`; in `animate` mode it runs an
- * rAF loop morphing each of the 8 radii independently. `nudge()` retargets all
- * vertices for a quick jiggle.
+ * (seeds the PRNG), so the same color reproduces the same shape across mounts. The
+ * seeded `border-radius` silhouette is set ONCE (the dot's identity) and is STATIC —
+ * the box never re-paints its radius per frame (the §H Safari fix: a per-frame
+ * `border-radius` write under the SVG filter forces the filter graph to RE-RASTERIZE
+ * every frame, which flashes Safari). In `animate` mode the liveness rides a seeded
+ * COMPOSITOR `transform` wobble (scale/skew/rotate) the compositor handles WITHOUT
+ * touching the cached filter — the HandMark static-filter idiom. `nudge()` retargets
+ * the wobble for a quick jiggle on hover.
  */
 export declare function useWatercolorBlob(color: Ref<string> | (() => string), options?: UseWatercolorBlobOptions): {
     borderRadius: Ref<string, string>;
     hoverBorderRadius: Ref<string, string>;
+    transform: Ref<string, string>;
     nudge: () => void;
 };
 export type WatercolorBlob = ReturnType<typeof useWatercolorBlob>;

package/dist/components/ui/_shared/index.d.ts

@@ -2,3 +2,5 @@ export { menuItemVariants } from "./menuItemVariants";
 export type { MenuItemVariants } from "./menuItemVariants";
 export { surfaceClass } from "./useSurfaceAxis";
 export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+export { controlSizeClass, switchSizeClass } from "./useControlSize";
+export type { ControlSize } from "./useControlSize";

package/dist/components/ui/_shared/useControlSize.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The shared control-size axis — three rungs, ONE grammar. The meaningful
+ * control-size hierarchy rungs the input register needs (Button's `xs`/icon rungs
+ * are Button-specific — an input has no icon-only register, so they are NOT here).
+ *
+ *   sm      — the quieter/secondary control: the `--control-h-sm` height +
+ *             `--control-text-sm` font (shorter + quieter).
+ *   default — the canonical golden pill: the `--control-h-md` height +
+ *             `--control-text` font (byte-identical to HEAD).
+ *   lg      — the primary/emphatic control: the `--control-h-lg` height with the
+ *             base `--control-text` font (taller, same workhorse weight — matching
+ *             Button's `lg`, where only the height grows).
+ */
+export type ControlSize = "sm" | "default" | "lg";
+/**
+ * Resolve a `ControlSize` to the element-level token-override class string the
+ * `.input-pill` recipe reads. The `default` rung emits NO override (so the recipe
+ * falls back to the cohort `--control-h-md` / `--control-text` — byte-identical to
+ * HEAD); `sm`/`lg` re-point `--control-pill-h` / `--control-pill-text` to the
+ * chosen cohort rung.
+ *
+ *   controlSizeClass()        → ""                                              (golden default)
+ *   controlSizeClass("sm")    → "[--control-pill-h:var(--control-h-sm)] [--control-pill-text:var(--control-text-sm)]"
+ *   controlSizeClass("lg")    → "[--control-pill-h:var(--control-h-lg)]"
+ *
+ * @param size the control-size rung (`default` · `sm` · `lg`)
+ */
+export declare function controlSizeClass(size?: ControlSize): string;
+/**
+ * The Switch geometry rung. A Switch is a control-height-DERIVED geometry (the
+ * track/thumb/throw are NOT the bare cohort height — a switch track is shorter
+ * than an input), so it derives its `--switch-track-h` from the chosen
+ * `--control-h-*` rung (×0.6, the iOS proportion) and the rest of the
+ * `--switch-*` quad follows in Switch.vue:
+ *
+ *   --switch-thumb   = --switch-track-h − 0.25rem   (the 2px×2 track border)
+ *   --switch-track-w = --switch-track-h × 11/6      (the iOS track aspect)
+ *   --switch-throw   = --switch-track-w − --switch-thumb − 0.25rem
+ *
+ * The `default` rung (`--control-h-md`) resolves the HEAD `h-6 w-11` track +
+ * `h-5 w-5` thumb + `translate-x-5` throw EXACTLY (byte-identical). `sm`/`lg`
+ * re-point the anchor `--switch-track-h` so the whole quad scales in lockstep.
+ *
+ * @param size the control-size rung (`default` · `sm` · `lg`)
+ */
+export declare function switchSizeClass(size?: ControlSize): string;

package/dist/components/ui/button/index.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "glass" | "outline" | "solid" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null | undefined;
+    variant?: "link" | "default" | "glass" | "outline" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null | undefined;
     size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/components/ui/card/Card.vue.d.ts

@@ -51,6 +51,23 @@ export type CardSurface = "glass" | "cartoon" | "veil";
  *            was originally authored over (a local intensity-token override).
  */
 export type CardSpecular = "off" | "subtle" | "full";
+/**
+ * Decoration variant — the ONE new Atlas component (BC.W-SELECTION-CARD, the I5
+ * selection card). Default UNSET: a bare `<Card>` is byte-identical to HEAD; the
+ * variant is additive default-OFF (the no-op floor). `selection` binds
+ * `:data-variant="selection"` on the root and ROUTES the chromatic-rim (A-2,
+ * `--glass-accent`) + selected metal-shimmer (A-3, `.metal-*-border`) decoration
+ * through the SHARED BUILT seams — it mints NO new sub-system. The shape mirrors
+ * the `surface` axis exactly: a data-attr the CSS seam reads, ORTHOGONAL to
+ * `tier`/`surface`/`pressable` (a `variant="selection" surface="glass"
+ * tier="resting" pressable` card is valid). The hue is a CONSUMER value
+ * (`data-hue`/`data-hue-strength` per-instance); NO consumer hue enters a token.
+ */
+export type CardVariant = "selection";
+/** The earned metal for a SELECTED selection-card (gold default — BA.W-PHASE-PALETTE
+ *  "gold is earned" for the chosen item). Composes the BUILT `.metal-{name}-border`
+ *  utility; NO forked keyframe, NO baked metal color. */
+export type CardMetal = "gold" | "silver" | "bronze";
 interface Props extends PrimitiveProps {
     /** Surface tier; selects one rung of the glass ladder. Default `resting`. */
     tier?: CardTier;
@@ -97,6 +114,33 @@ interface Props extends PrimitiveProps {
      *  compositor-only (`scale` + a custom property); the `.glass-press` CSS `:active`
      *  scale is the no-JS / SSR floor. */
     pressable?: boolean;
+    /** BC.W-SELECTION-CARD — the selection decoration axis (the ONE new Atlas
+     *  component). `selection` ROUTES the per-instance data-hue rim (A-2) +
+     *  the selected metal-shimmer border (A-3) through the BUILT seams; default
+     *  UNSET (a bare Card is byte-identical to HEAD). ORTHOGONAL to
+     *  `tier`/`surface`/`pressable`. */
+    variant?: CardVariant;
+    /** BC.W-SELECTION-CARD — the chosen state of a `variant="selection"` card.
+     *  When `true` the card composes the earned `.metal-${metal}-border` swept
+     *  rim + lifts the accent-strength toward `--selection-accent-strength-selected`
+     *  (rim-not-fill — the plate stays warm-cream translucent). The consumer wires
+     *  the matching `aria-selected`/`aria-checked` role contract on the card. */
+    selected?: boolean;
+    /** BC.W-SELECTION-CARD — the metal of the SELECTED-state swept rim. `gold`
+     *  (default) is earned for the chosen item; `silver`/`bronze` are the other
+     *  two BUILT `.metal-*-border` quads. Only read when `variant="selection"` +
+     *  `selected`. */
+    metal?: CardMetal;
+    /** BC.W-SELECTION-CARD — the per-instance data hue (a complete `<color>`) a
+     *  `variant="selection"` card tints its RIM + catch-light glint toward (the
+     *  A-2 `--glass-accent` consumer). The hue NEVER tints the plate background
+     *  (the distinct-axis fence); unset → the neutral `transparent` no-op floor. */
+    dataHue?: string;
+    /** BC.W-SELECTION-CARD — the bounded accent strength override (a `<percentage>`,
+     *  e.g. `"20%"`). Unset → the calm `--selection-accent-strength` default
+     *  (≤ the W-GLASS-ACCENT rim ceiling). Bounded — a whisper at the rim, never a
+     *  flooded plate. */
+    dataHueStrength?: string;
     class?: HTMLAttributes["class"];
 }
 declare var __VLS_13: {};
@@ -112,6 +156,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     grain: boolean;
     specular: CardSpecular;
     pressable: boolean;
+    metal: CardMetal;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/ui/card/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Card, type CardTier, type CardSurface, type CardSpecular, } from "./Card.vue";
+export { default as Card, type CardTier, type CardSurface, type CardSpecular, type CardVariant, type CardMetal, } from "./Card.vue";
 export { default as CardHeader } from "./CardHeader.vue";
 export { default as ScrollCard, type ScrollCardProps } from "./ScrollCard.vue";
 export { default as ScrollCardHeader, type ScrollCardHeaderProps, } from "./ScrollCardHeader.vue";

package/dist/components/ui/carousel/CarouselNext.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "default" | "icon" | "xs" | "sm" | "lg" | "icon-sm" | null;
-    variant: "link" | "default" | "glass" | "outline" | "solid" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null;
+    variant: "link" | "default" | "glass" | "outline" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/ui/carousel/CarouselPrevious.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "default" | "icon" | "xs" | "sm" | "lg" | "icon-sm" | null;
-    variant: "link" | "default" | "glass" | "outline" | "solid" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null;
+    variant: "link" | "default" | "glass" | "outline" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/ui/command/CommandDialog.vue.d.ts

@@ -1,13 +1,19 @@
 import type { DialogRootProps } from 'reka-ui';
+import type { Surface } from '../_shared/useSurfaceAxis';
+type __VLS_Props = DialogRootProps & {
+    surface?: Surface;
+};
 declare var __VLS_20: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_20) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DialogRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<DialogRootProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    surface: Surface;
+}, {}, {}, {}, 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;

package/dist/components/ui/command/CommandList.vue.d.ts

@@ -1,7 +1,9 @@
 import { type HTMLAttributes } from 'vue';
 import type { ComboboxContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
 type __VLS_Props = ComboboxContentProps & {
     class?: HTMLAttributes['class'];
+    surface?: Surface;
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -18,6 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
 }>, {
+    surface: Surface;
     disableOutsidePointerEvents: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/ui/context-menu/ContextMenuContent.vue.d.ts

@@ -1,7 +1,9 @@
 import { type HTMLAttributes } from 'vue';
 import { type ContextMenuContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
 type __VLS_Props = ContextMenuContentProps & {
     class?: HTMLAttributes['class'];
+    surface?: Surface;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {
@@ -19,7 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    surface: Surface;
+}, {}, {}, {}, 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;

package/dist/components/ui/dropdown-menu/DropdownMenuContent.vue.d.ts

@@ -1,7 +1,9 @@
 import { type HTMLAttributes } from 'vue';
 import { type DropdownMenuContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
 type __VLS_Props = DropdownMenuContentProps & {
     class?: HTMLAttributes['class'];
+    surface?: Surface;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {
@@ -20,6 +22,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
+    align: "start" | "center" | "end";
+    surface: Surface;
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/ui/hover-card/HoverCardContent.vue.d.ts

@@ -1,13 +1,16 @@
 import { type HTMLAttributes } from 'vue';
 import { type HoverCardContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
 type __VLS_Props = HoverCardContentProps & {
     class?: HTMLAttributes['class'];
+    surface?: Surface;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    surface: Surface;
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/ui/input/Input.vue.d.ts

@@ -1,10 +1,12 @@
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { type ControlSize } from '../_shared/useControlSize';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     defaultValue?: string | number;
     modelValue?: string | number;
     class?: HTMLAttributes["class"];
+    size?: ControlSize;
     type?: InputHTMLAttributes["type"];
     placeholder?: InputHTMLAttributes["placeholder"];
     disabled?: InputHTMLAttributes["disabled"];
@@ -20,6 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     defaultValue?: string | number;
     modelValue?: string | number;
     class?: HTMLAttributes["class"];
+    size?: ControlSize;
     type?: InputHTMLAttributes["type"];
     placeholder?: InputHTMLAttributes["placeholder"];
     disabled?: InputHTMLAttributes["disabled"];

package/dist/components/ui/number-field/NumberFieldInput.vue.d.ts

@@ -1,3 +1,8 @@
+import { type ControlSize } from '../_shared/useControlSize';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{
+    size?: ControlSize;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    size?: ControlSize;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,7 +1,9 @@
 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;
 };
 declare var __VLS_25: {};
 type __VLS_Slots = {} & {
@@ -18,6 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     position: "item-aligned" | "popper";
     align: "start" | "center" | "end";
+    surface: Surface;
     collisionPadding: number | Partial<Record<"bottom" | "left" | "right" | "top", number>>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,7 +1,9 @@
 import { type HTMLAttributes } from 'vue';
 import { type SwitchRootProps } from 'reka-ui';
+import { type ControlSize } from '../_shared/useControlSize';
 type __VLS_Props = SwitchRootProps & {
     class?: HTMLAttributes['class'];
+    size?: ControlSize;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (payload: boolean) => any;

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

@@ -1,10 +1,12 @@
 import type { HTMLAttributes, TextareaHTMLAttributes } from 'vue';
+import { type ControlSize } from '../_shared/useControlSize';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     class?: HTMLAttributes["class"];
     defaultValue?: string | number;
     modelValue?: string | number;
+    size?: ControlSize;
     placeholder?: TextareaHTMLAttributes["placeholder"];
     disabled?: TextareaHTMLAttributes["disabled"];
     /**
@@ -29,6 +31,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     class?: HTMLAttributes["class"];
     defaultValue?: string | number;
     modelValue?: string | number;
+    size?: ControlSize;
     placeholder?: TextareaHTMLAttributes["placeholder"];
     disabled?: TextareaHTMLAttributes["disabled"];
     /**

package/dist/components/ui/tooltip/TooltipContent.vue.d.ts

@@ -1,7 +1,9 @@
 import { type HTMLAttributes } from 'vue';
 import { type TooltipContentProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
 type __VLS_Props = TooltipContentProps & {
     class?: HTMLAttributes['class'];
+    surface?: Surface;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {
@@ -14,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: Event) => any) | undefined;
 }>, {
+    surface: Surface;
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/composables/color/index.d.ts

@@ -133,3 +133,5 @@ export interface DeriveBlobPaletteOptions {
  * @param options stop count, harmony, spreads.
  */
 export declare function deriveBlobPalette(seed: string | OklchStop, options?: DeriveBlobPaletteOptions): OklchStop[];
+export { useAccentTone } from "./useAccentTone";
+export type { UseAccentToneOptions, UseAccentToneReturn } from "./useAccentTone";

package/dist/composables/color/useAccentTone.d.ts

@@ -0,0 +1,34 @@
+import { type ComputedRef, type MaybeRefOrGetter } from "vue";
+export interface UseAccentToneOptions {
+    /** Idle fill strength (0..1). Default 0.08. The CSS `--accent-fill-strength`
+     *  twin — passed here so the JS ink-solve composites the matching band. */
+    fillStrength?: number;
+    /** Active band strength (0..1). Default 0.18 (the CSS `--accent-band-strength`). */
+    bandStrength?: number;
+    /** Target ink-over-band contrast. Default 4.5 (AA). */
+    inkContrast?: number;
+    /** The surface the accent paints ON (a CSS `<color>`). Default the warm-cream
+     *  `--card`. A consumer on a dark/other plate passes its concrete surface so
+     *  the ink solves against the right band lightness. */
+    surface?: string;
+}
+export interface UseAccentToneReturn {
+    /** The element-level custom-property style object — bind via `:style`. Carries
+     *  `--tone` (so the CSS channels resolve) + `--accent-ink-resolved` (the
+     *  contrast-safe label colour over the active band). */
+    toneStyle: ComputedRef<Record<string, string>>;
+    /** The resolved contrast-safe ink as a CSS `oklch(...)` string (for a non-CSS
+     *  reader — a canvas label, a test). */
+    ink: ComputedRef<string>;
+}
+/**
+ * `useAccentTone(tone, opts)` — resolve the contrast-safe label ink for the tonal
+ * register. The ink RESOLVES `safeAccentColor(toneColor, bandLightness, …)`:
+ * value.js shifts the tone's OKLCh lightness AWAY from the active-band fill until
+ * it clears the AA bar, so the label reads ON the fill in either mode (a dark band
+ * gets a light ink, a light band a dark ink). The darken/lighten-until-it-passes
+ * math is value.js's — glass-ui re-implements none of it.
+ *
+ * PRM-irrelevant (a colour, not an animation). DOM-free + deterministic.
+ */
+export declare function useAccentTone(tone: MaybeRefOrGetter<string>, opts?: UseAccentToneOptions): UseAccentToneReturn;