@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/components/handmark/geometry.d.ts

@@ -15,8 +15,8 @@
  * The circle arm rides pencil-boil's `ellipsePoints` (the hand-circle
  * overshoot ring — the sole upstream geometry delta this component required).
  *
- * THE SEED RECONCILE (BA.W-HANDMARK [S2]): the wobble centerlines are seeded from
- * the HOUSE prng leaf (`src/composables/glass/procedural/prng.ts` mulberry32 + hashString — the AV.W14
+ * THE SEED RECONCILE ( [S2]): the wobble centerlines are seeded from
+ * the HOUSE prng leaf (`src/composables/glass/procedural/prng.ts` mulberry32 + hashString — the
  * single-source). The family FEEDS pencil-boil a house-derived integer seed; glass-
  * ui code imports ZERO `mulberry32` from pencil-boil (its internal mulberry32 stays
  * inside its OWN perturb math). ONE seed leaf, the house identity.
@@ -37,24 +37,24 @@ export interface ShapeGeom {
  * The text-mode underline anchors to a MEASURED baseline: `baselineFrac` is the
  * slotted word's alphabetic baseline as a fraction of the `.hm` box height (the SFC
  * measures it via ResizeObserver + `document.fonts.ready`). The underline y is then
- * `H × (baselineFrac + UNDERLINE_GAP)` — never the old hardcoded `32` (80% of the
- * box), which struck through tight-leading headings. `null` ⇒ not yet measured: fall
- * back to the legacy `H − 8` constant so first paint (and jsdom/SSR) still renders a
+ * `H × (baselineFrac + UNDERLINE_GAP)` — not a hardcoded fraction (a fixed `32`,
+ * 80% of the box, strikes through tight-leading headings). `null` ⇒ not yet measured: fall
+ * back to a fixed `H − 8` constant so first paint (and jsdom/SSR) still renders a
  * line, replaced the instant the measure lands.
  *
  * `natural` routes the underline through the φ-incommensurate value-noise
  * `naturalUnderlinePoints` morphology instead of pencil-boil's `wobbleLinePoints`
  * (the masthead `boil` voice); the default underline keeps the pencil-boil line.
  *
- * BG.W-HANDMARK-PERFECT (a) THE ASPECT-CORRECT viewBox — `vbH` is the SFC-measured
- * marking-space HEIGHT (`VB_W / boxAspect`) for the TEXT-MODE underline/strikethrough/
+ * The aspect-correct viewBox: `vbH` is the SFC-measured
+ * marking-space HEIGHT (`VB_W, boxAspect`) for the TEXT-MODE underline/strikethrough/
  * highlight, so `preserveAspectRatio="none"` scales the wobble SHAPE uniformly (the x
  * and y scales EQUAL → the humps stop being x-stretched flat). It defaults to `VB_H`,
  * and is used ONLY for the measured text-mode y — the positioned/box/circle/bracket
  * path keeps `VB_H` byte-for-byte (it DEPENDS on the none-stretch to fill the datum
  * rect; the text-mode fix must not touch it).
  *
- * BG.W-HANDMARK-PERFECT (c) THE AMPLITUDE KNOB — `ampScale` multiplies the natural-
+ * The amplitude knob: `ampScale` multiplies the natural-
  * underline excursion (default 1 ⇒ byte-identical; the SFC derives it from the brush
  * `wobble` scalar, decoupling excursion from stroke `weight`).
  */

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

@@ -1,19 +1,18 @@
 /**
- * handmark — the ./handmark barrel (SPEC §11).
+ * HandMark public barrel.
  * ─────────────────────────────────────────────────────────────────────────────
  * `HandMark` is the sole public component name. The pure L1–L3 functions ship
  * too — they are framework-free, directly usable in slides decks, D3 charts
  * (call `shapeGeom`/`ellipsePoints` to ink a path), even canvas.
  *
  * The DEFAULT is `pen` (clean ink, grain:0 ⇒ no filter, zero extra dep). The
- * `@mkbabb/pencil-boil` geometry + `perfect-freehand` body are OPTIONAL PEERS;
- * only `ribbon:'hull'` (the highlighter) touches the vendored pf core (treeshaken
- * otherwise).
+ * `@mkbabb/pencil-boil` geometry is an OPTIONAL PEER. The perfect-freehand body
+ * is vendored; only `ribbon:'hull'` (the highlighter) touches that core
+ * (treeshaken otherwise).
  *
- * BA.W-HANDMARK: `GlassUnderline`/the `/underline` subpath RETIRED onto
- * `HandMark shape="underline"` (DEC-8 outcome 1; clean break, no alias). The
- * editorial draw-on underline is `<HandMark shape="underline" animation="draw-on">`;
- * the natural pencil-boil morphology is the `boil` brush.
+ * The editorial draw-on underline is
+ * `<HandMark shape="underline" animation="draw-on">`; the natural pencil-boil
+ * morphology is the `boil` brush.
  */
 export { default as HandMark } from "./HandMark.vue";
 export { BRUSHES, resolveBrush, lerpBrush, type Brush, type BrushName, type BlendMode, type TaperSpec, type StampFn, type InkPath, } from "./brush";

package/dist/components/handmark/noise.d.ts

@@ -10,14 +10,14 @@ export declare function smootherstep(t: number): number;
  *     φₖ = seeded per-octave phase (house mulberry32)
  *     vnoiseₖ = seeded lattice value-noise, smootherstep-faired
  *
- * The four atlas axes:
+ * The four brush axes:
  *   - amplitude SCALES with the rendered span (`(x2−x1) × NOISE_AMP_FRAC × ampScale`),
  *     not a viewBox-stretched constant (a long word and a short word wobble in
- *     proportion); `ampScale` is the BG.W-HANDMARK-PERFECT excursion knob (default 1
+ *     proportion); `ampScale` is the excursion knob (default 1
  *     ⇒ byte-identical; the SFC derives it from the brush `wobble` scalar, decoupling
  *     excursion from stroke `weight`);
  *   - the hump-to-hump spacing is IRREGULAR (the φ-incommensurate octave sum — the
- *     honest non-periodicity teeth, spacing-CV ~0.41 at the paint count vs the prior
+ *     honest non-periodicity teeth, spacing-CV ~0.41 at the paint count vs a
  *     sinusoid's ~0.14, over 400 seeds);
  *   - the non-uniform body gives the pf hull a pressure-taper-friendly point stream;
  *   - the seed is the HOUSE mulberry32.

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

@@ -45,7 +45,7 @@ export interface HandMarkProps {
     /** angular kinks vs smooth bezier. default false. */
     jagged?: boolean;
     /**
-     * NATURAL-underline excursion knob (BG.W-HANDMARK-PERFECT (c)). Multiplies the
+     * NATURAL-underline excursion knob ( (c)). Multiplies the
      * scale-relative wobble amplitude (`span × NOISE_AMP_FRAC × amplitude`). Default is
      * unset ⇒ the amplitude is derived from the brush `wobble` scalar (byte-identical at
      * the shipped default); an explicit value WINS (e.g. `1.4` for a bolder hand line,
@@ -53,7 +53,7 @@ export interface HandMarkProps {
      */
     amplitude?: number;
     /**
-     * NATURAL underline morphology (BA.W-HANDMARK C-2). When true (the masthead
+     * NATURAL underline morphology ( C-2). When true (the masthead
      * `boil` voice), the underline geometry goes PROCEDURAL — scale-relative
      * amplitude, an IRREGULAR seeded period count, off the house prng leaf feeding
      * pencil-boil — instead of pencil-boil's single `wobbleLinePoints` line. The

package/dist/components/header-ribbon/HeaderRibbon.vue.d.ts

@@ -1,26 +1,8 @@
 import type { HeaderRibbonProps } from "./types";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
-    pinned: boolean;
-    toggled: boolean;
-}, __VLS_7: {};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_1) => any;
-} & {
-    items?: (props: typeof __VLS_3) => any;
-} & {
-    anchor?: (props: typeof __VLS_5) => any;
-} & {
-    items?: (props: typeof __VLS_7) => any;
+type __VLS_Slots = {
+    items?(): unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<HeaderRibbonProps, {
-    isPinned: import("vue").Ref<boolean, boolean>;
-    isExpanded: import("vue").Ref<boolean, boolean>;
-    isVisible: import("vue").ComputedRef<boolean>;
-    isToggled: import("vue").Ref<boolean, boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderRibbonProps> & Readonly<{}>, {
-    placement: import("./types").HeaderRibbonPlacement;
-    hideTimeoutMs: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<HeaderRibbonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderRibbonProps> & Readonly<{}>, {}, {}, {}, {}, 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/header-ribbon/styles.css

@@ -0,0 +1 @@
+@layer components { .header-ribbon { position: fixed; inset-block-start: 0; z-index: var(--z-header); display: flex; width: max-content; max-width: 100%; padding: 1rem; pointer-events: none; } .header-ribbon[data-placement="left"] { left: 0; } .header-ribbon[data-placement="right"] { right: 0; } .header-ribbon__band { display: flex; align-items: center; min-block-size: var(--size-icon-btn); max-inline-size: min(32rem, calc(100vw - 2rem)); padding: var(--panel-padding); border-radius: var(--radius-pill); pointer-events: auto; direction: ltr; } .header-ribbon[data-placement="right"] .header-ribbon__band { flex-direction: row-reverse; } .header-ribbon__actions { display: flex; align-items: center; gap: 0.5rem; } .header-ribbon:dir(rtl) .header-ribbon__actions { direction: rtl; } } @media (pointer: coarse) { .header-ribbon { padding: 0.75rem; } .header-ribbon__band { max-inline-size: calc(100vw - 1.5rem); } } @media (forced-colors: active) { .header-ribbon__band { border: 1px solid CanvasText; } }

package/dist/components/header-ribbon/types.d.ts

@@ -1,7 +1,10 @@
+import type { HTMLAttributes } from "vue";
 export type HeaderRibbonPlacement = "left" | "right";
 export interface HeaderRibbonProps {
     /** Side of the viewport the ribbon anchors against. Defaults to `"left"`. */
     placement?: HeaderRibbonPlacement;
-    /** Milliseconds after the pointer leaves the ribbon before items collapse. Defaults to `2000`. */
-    hideTimeoutMs?: number;
+    /** Accessible name for the persistent action toolbar. */
+    ariaLabel?: string;
+    /** Additional class names. */
+    class?: HTMLAttributes["class"];
 }

package/dist/components/index.d.ts

@@ -13,10 +13,8 @@ export * from "./data-table";
 export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown-menu";
-export * from "./focus-scope";
 export * from "./input";
 export * from "./label";
-export * from "./notification";
 export * from "./number-field";
 export * from "./popover";
 export * from "./progress";
@@ -30,6 +28,5 @@ export * from "./table";
 export * from "./tags-input";
 export * from "./textarea";
 export * from "./toast";
-export * from "./toggle";
 export * from "./toggle-group";
 export * from "./tooltip";

package/dist/components/infinite-scroll/composables/types.d.ts

@@ -14,7 +14,7 @@ export interface InfiniteScrollOptions {
 export interface InfiniteScrollReturn {
     /** Ref to bind to the sentinel element */
     sentinelRef: Ref<HTMLElement | null>;
-    /** Manually trigger a check (e.g., after DOM updates) */
+    /** Reconnect observation after a caller-owned DOM update. */
     check: () => void;
     /** Stop observing */
     stop: () => void;

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

@@ -1,37 +1,12 @@
-import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
-import { type ControlSize } from '../_shared/useControlSize';
+import type { InputProps } from "./types";
+declare const __VLS_export: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    size: import("../_shared").ControlSize;
+    invalid: boolean;
+    type: "email" | "password" | "search" | "tel" | "text" | "url";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 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"];
-    required?: InputHTMLAttributes["required"];
-    inputmode?: InputHTMLAttributes["inputmode"];
-    autocomplete?: string;
-    pattern?: InputHTMLAttributes["pattern"];
-    name?: InputHTMLAttributes["name"];
-    readonly?: InputHTMLAttributes["readonly"];
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (payload: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    class?: HTMLAttributes["class"];
-    size?: ControlSize;
-    type?: InputHTMLAttributes["type"];
-    placeholder?: InputHTMLAttributes["placeholder"];
-    disabled?: InputHTMLAttributes["disabled"];
-    required?: InputHTMLAttributes["required"];
-    inputmode?: InputHTMLAttributes["inputmode"];
-    autocomplete?: string;
-    pattern?: InputHTMLAttributes["pattern"];
-    name?: InputHTMLAttributes["name"];
-    readonly?: InputHTMLAttributes["readonly"];
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1,2 @@
-export { default as Input } from './Input.vue';
+export { default as Input } from "./Input.vue";
+export type { InputProps } from "./types";

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { ControlSize } from "../_shared/control-size";
+export interface InputProps {
+    autocomplete?: string;
+    class?: HTMLAttributes["class"];
+    defaultValue?: string | number;
+    disabled?: boolean;
+    enterkeyhint?: InputHTMLAttributes["enterkeyhint"];
+    form?: string;
+    inputmode?: InputHTMLAttributes["inputmode"];
+    invalid?: boolean;
+    maxlength?: InputHTMLAttributes["maxlength"];
+    minlength?: InputHTMLAttributes["minlength"];
+    modelValue?: string | number;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    size?: ControlSize;
+    type?: "email" | "password" | "search" | "tel" | "text" | "url";
+}

package/dist/components/instrument-chassis/InstrumentChassis.vue.d.ts

@@ -1,91 +1,17 @@
-import type { HTMLAttributes } from "vue";
-export type InstrumentChassisPhase = "ready" | "ping" | "download" | "upload" | "jitter" | "complete";
-/**
- * The chassis register discriminator.
- *
- * - `"glass"` (default) — the canonical chassis surface. Reads the resting
- *   glass tier plus the `--glass-curvature-overlay`, the engraved-bezel
- *   inner stroke, and the phase-color tint cascade. Every speedtest /
- *   survey / thank-you consumer at HEAD lands here.
- *
- * - `"spine"` (AL-W1-α augmented; per AL-X5 §4.1) — the HOUSING register.
- *   Polished SLEEVE, not glass: NO `backdrop-filter`, NO plate opacity,
- *   hairline outer stroke at `--glass-spine-border`, interior radial
- *   vignette that subtly carries the phase-color cascade. Inset from the
- *   viewport by `clamp(0.5rem, 2vw, 1.25rem)` so the chassis edge sits
- *   beyond an inner card's outer edge. Closes the AK W2 chassis-spine
- *   architectural underclaim. Consumed at quiet-content App-level
- *   mounts (the inner card paints its own glass tier — the spine is
- *   the housing that frames it).
- *
- * - `"structure"` (BA.W-ATLAS-RECONCILE C-3) — the SILVER structure-metal
- *   register. A cool polished-steel milled-panel read: the engraved bezel +
- *   the structural grooves re-point to the `--silver` quad (the gold quad's
- *   cool mirror) instead of the warm-cream `--surface-tint-*` default, so the
- *   chassis reads as an INDUSTRIAL precision-instrument housing — the cool-metal
- *   twin of the warm-gold "complete"-phase affirmation the chassis ships by
- *   DEFAULT (the `--phase-complete-color` consumer token defaults to gold;
- *   BB.W-PHASE-PALETTE — a consumer may re-ink completion). The phase cascade stays
- *   orthogonal (a `structure` chassis still retints on `data-phase`); only the
- *   structure-metal recipe forks. The silver is the W-NO-GRAY named cool-neutral
- *   exception. Consumer #2 of the silver quad (the atlas's structure surface is
- *   consumer #1).
- */
-export type InstrumentChassisVariant = "glass" | "spine" | "structure";
-/**
- * <InstrumentChassis> — single glass surface composing strip / dial / control
- * regions, glued together by twin-line hairline grooves.
- *
- * The default `dial` slot always renders (the chassis's primary content).
- * The optional `strip` (header) and `control` (footer) slots — together with
- * the `<ChassisDivider>` adjacent to each — emit markup only when bound.
- * I gate `<header>`, `<footer>`, and the two dividers on `$slots.strip` /
- * `$slots.control` presence, so empty-slot consumers don't have to suppress
- * the markup with `display: none` overrides — the `v-if="$slots.status"`
- * slot-gating idiom.
- *
- * The chassis owns the `--phase-color` cascade via `data-phase`; phase label,
- * hero number, and phase progress fill all read it through one CSS custom
- * property, no per-element listener wiring.
- *
- * The chassis carries the engraved-bezel `::before` stroke and the
- * radial-gradient curvature overlay — both are chassis character, persistent
- * at all phases. Disco accents (specular swap, sparkle, phase-glow,
- * disco-grain) are reserved for interactive moments; see `instrument-chassis.css`
- * for the reservation rules.
- *
- * The `variant` prop discriminates the surface register (see
- * `InstrumentChassisVariant` above). The phase cascade (`data-phase`) is
- * orthogonal to the variant — both registers retint identically; only the
- * surface recipe forks.
- *
- * Consumers slot their own region content. Speedtest, survey, and thank-you
- * all consume this same component; the slots vary per route.
- */
-type __VLS_Props = {
-    /** Active phase. Drives the `--phase-color` cascade across the chassis. */
-    phase?: InstrumentChassisPhase;
-    /**
-     * Surface register. Defaults to `"glass"` (the canonical chassis
-     * plate). Pass `"spine"` at App-level mount paths to get the
-     * housing register (polished sleeve, no backdrop-filter, interior
-     * vignette + hairline outer stroke). Pass `"structure"` for the
-     * silver milled-panel register (cool polished-steel bezel + grooves;
-     * BA.W-ATLAS-RECONCILE C-3).
-     */
-    variant?: InstrumentChassisVariant;
-    class?: HTMLAttributes["class"];
-};
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {};
+import type { InstrumentChassisBoundary, InstrumentChassisProps } from "./types";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
-    strip?: (props: typeof __VLS_1) => any;
+    stage?: (props: typeof __VLS_1) => any;
 } & {
-    dial?: (props: typeof __VLS_8) => any;
+    inspector?: (props: typeof __VLS_3) => any;
 } & {
-    control?: (props: typeof __VLS_15) => any;
+    action?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: InstrumentChassisVariant;
+declare const __VLS_base: import("vue").DefineComponent<InstrumentChassisProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InstrumentChassisProps> & Readonly<{}>, {
+    state: import("./types").InstrumentChassisState;
+    reserve: import("./types").InstrumentChassisReserve;
+    proportion: import("./types").InstrumentChassisProportion;
+    boundaries: readonly InstrumentChassisBoundary[];
 }, {}, {}, {}, 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/instrument-chassis/index.d.ts

@@ -1,3 +1,2 @@
 export { default as InstrumentChassis } from "./InstrumentChassis.vue";
-export { default as ChassisDivider } from "./ChassisDivider.vue";
-export type { InstrumentChassisPhase, InstrumentChassisVariant, } from "./InstrumentChassis.vue";
+export type { InstrumentChassisBoundary, InstrumentChassisProportion, InstrumentChassisProps, InstrumentChassisReserve, InstrumentChassisState, } from "./types";

package/dist/components/instrument-chassis/styles.css

@@ -1 +1 @@
-@layer components { .instrument-chassis { position: relative; display: flex; flex-direction: column; background: var(--glass-curvature-overlay, none), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); transition: --phase-tint-amount var(--motion-duration-phase-handoff, 600ms) var(--motion-ease-standard); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); border: 1px solid var(--glass-border-wash); border-radius: var(--radius-card); box-shadow: var(--glass-shadow-quiet), inset 0 -0.5px 0 0 rgb(0 0 0 / 0.06); overflow: hidden; --phase-color: var(--muted-foreground); --phase-color-label: var(--muted-foreground); --phase-complete-color: var(--color-gold); --phase-complete-color-label: var(--color-gold-dark, var(--color-gold)); container: chassis / inline-size; } .dark .instrument-chassis { background: var(--glass-curvature-overlay-dark, var(--glass-curvature-overlay, none)), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); } .instrument-chassis::before { content: ""; position: absolute; inset: 0.5px; border-radius: calc(var(--radius-card) - 0.5px); border: 1px solid var(--surface-tint-4); pointer-events: none; z-index: 1; } .dark .instrument-chassis::before { border-color: var(--surface-tint-6); } .instrument-chassis[data-variant="spine"] { background: var(--glass-spine-vignette); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--glass-spine-border); box-shadow: var(--glass-under-shadow-spine); margin: clamp(0.5rem, 2vw, 1.25rem); } .instrument-chassis[data-variant="spine"]::before { display: none; } .instrument-chassis[data-variant="structure"] { border-color: color-mix(in oklab, var(--color-silver-dark) 55%, transparent); } .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver-light) 60%, transparent); } .dark .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver) 40%, transparent); } .instrument-chassis[data-variant="structure"] { --twin-line-catch: color-mix( in oklab, var(--color-silver-light) 50%, transparent ); --twin-line-shadow: color-mix( in oklab, var(--color-silver-dark) 40%, transparent ); } .instrument-chassis[data-phase="ping"] { --phase-color: var(--chart-ping, var(--viz-chebyshev)); --phase-color-label: var( --chart-ping-label, var(--chart-ping, var(--viz-chebyshev)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="download"] { --phase-color: var(--chart-download, var(--viz-fourier)); --phase-color-label: var( --chart-download-label, var(--chart-download, var(--viz-fourier)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="upload"] { --phase-color: var(--chart-upload, var(--viz-amber)); --phase-color-label: var( --chart-upload-label, var(--chart-upload, var(--viz-amber)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="jitter"] { --phase-color: var(--chart-jitter, var(--viz-legendre)); --phase-color-label: var( --chart-jitter-label, var(--chart-jitter, var(--viz-legendre)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="complete"] { --phase-color: var(--phase-complete-color); --phase-color-label: var(--phase-complete-color-label); --phase-tint-amount: var(--phase-tint-peak); } @media (prefers-reduced-motion: reduce) { .instrument-chassis { transition: none; } } .instrument-strip { position: relative; display: flex; align-items: center; gap: var(--instrument-strip-gap, 0.75rem); padding: var(--instrument-strip-padding-block, 0.875rem) var(--instrument-strip-padding-inline, 1.25rem); z-index: 2; } .instrument-dial { position: relative; display: grid; grid-template-columns: var( --instrument-dial-columns, minmax(0, 1.2fr) 1px minmax(0, 1fr) ); align-items: center; gap: var(--instrument-dial-gap, 1.5rem); padding: var(--instrument-dial-padding-block, 1.5rem) var(--instrument-dial-padding-inline, 1.5rem); z-index: 2; } .instrument-control { position: relative; display: flex; align-items: center; gap: var(--instrument-control-gap, 0.5rem); padding: var(--instrument-control-padding-block, 0.875rem) var(--instrument-control-padding-inline, 1.25rem); z-index: 2; } .chassis-divider { @apply twin-line-divider; flex-shrink: 0; position: relative; background: transparent; z-index: 2; pointer-events: none; } .chassis-divider--horizontal { display: flex; flex-direction: column; height: 2px; width: 100%; } .chassis-divider--vertical { display: flex; flex-direction: row; width: 2px; height: var(--chassis-divider-vertical-height, 70%); align-self: center; justify-self: center; } .bezel-line { display: block; flex-shrink: 0; } .chassis-divider--horizontal .bezel-line { height: 1px; width: 100%; } .chassis-divider--vertical .bezel-line { width: 1px; height: 100%; } .bezel-line.top { background: var(--twin-line-catch); } .bezel-line.bottom { background: var(--twin-line-shadow); } .instrument-chassis .dial-divider { align-self: stretch; } @container chassis (max-width: 44.9375rem) { .instrument-chassis .instrument-dial { grid-template-columns: 1fr; grid-template-rows: var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr)) auto auto; min-height: var(--instrument-dial-min-height-mobile, 24rem); gap: var(--instrument-dial-gap-mobile, 1.5rem); } .instrument-chassis .instrument-dial .dial-divider, .instrument-chassis .instrument-dial .chassis-divider--vertical { flex-direction: column; width: 70%; height: 2px; margin-inline: auto; } .instrument-chassis .instrument-dial .dial-divider .bezel-line, .instrument-chassis .instrument-dial .chassis-divider--vertical .bezel-line { width: 100%; height: 1px; } } @container chassis (min-width: 45rem) { .instrument-chassis .instrument-dial { min-block-size: var( --instrument-dial-min-block-size-desktop, var(--chassis-max-block-size) ); } } }
+@layer components { .instrument-chassis { --instrument-tone: var(--muted-foreground); --instrument-state-tint: 0%; --instrument-dial-padding-inline: clamp(1rem, 3cqi, 1.5rem); --instrument-dial-padding-block: clamp(1rem, 3cqi, 1.5rem); --instrument-dial-gap: clamp(1rem, 3cqi, 1.5rem); --instrument-control-padding-inline: clamp(1rem, 3cqi, 1.5rem); --instrument-control-padding-block: clamp(0.75rem, 2cqi, 0.875rem); --instrument-control-gap: calc(var(--spacing) * 2); --instrument-title-gap: calc( var(--instrument-dial-padding-inline, 1.5rem) / 2.618 ); --instrument-boundary-catch: rgb(255 255 255 / 0.1); --instrument-boundary-shadow: rgb(0 0 0 / 0.12); container-type: inline-size; position: relative; overflow: clip; border: 1px solid var(--glass-border-wash); border-radius: var(--radius-card); background: var(--glass-curvature-overlay, none), color-mix( in oklab, var(--glass-bg-chassis), var(--instrument-tone) var(--instrument-state-tint) ); box-shadow: var(--glass-shadow-quiet), inset 0 1px 0 var(--surface-tint-6), inset 0 -0.5px 0 rgb(0 0 0 / 0.06); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); transition: border-color var(--duration-normal) var(--ease-standard); } .instrument-chassis[data-state="active"] { --instrument-state-tint: 6%; border-color: color-mix( in oklab, var(--instrument-tone) 24%, var(--glass-border-wash) ); } .instrument-chassis[data-state="complete"] { --instrument-state-tint: 9%; border-color: color-mix( in oklab, var(--instrument-tone) 32%, var(--glass-border-wash) ); } .instrument-chassis[data-state="loading"] { --instrument-state-tint: 3%; } .dark .instrument-chassis { --instrument-boundary-catch: rgb(255 255 255 / 0.06); --instrument-boundary-shadow: rgb(0 0 0 / 0.18); } .instrument-composition { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--instrument-dial-gap); padding: var(--instrument-dial-padding-block) var(--instrument-dial-padding-inline); } .instrument-chassis[data-proportion="golden"] .instrument-composition[data-has-inspector] { grid-template-columns: minmax(0, 61.8033989fr) minmax(0, 38.1966011fr); } .instrument-chassis[data-proportion="preview-dominant"] .instrument-composition[data-has-inspector] { grid-template-columns: minmax(0, 66.6666667fr) minmax(0, 33.3333333fr); } .instrument-stage, .instrument-inspector { min-inline-size: 0; } .instrument-composition[data-boundary] .instrument-inspector { box-shadow: inset 1px 0 0 var(--instrument-boundary-catch), inset 2px 0 0 var(--instrument-boundary-shadow); } .instrument-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--instrument-control-gap); padding: var(--instrument-control-padding-block) var(--instrument-control-padding-inline); } .instrument-action[data-boundary] { box-shadow: inset 0 1px 0 var(--instrument-boundary-catch), inset 0 2px 0 var(--instrument-boundary-shadow); } .instrument-chassis:is([data-reserve="stage"], [data-reserve="both"]) .instrument-stage { min-block-size: var(--instrument-stage-reserve, 0px); } .instrument-chassis:is([data-reserve="inspector"], [data-reserve="both"]) .instrument-inspector { min-block-size: var(--instrument-inspector-reserve, 0px); } @container (max-width: 44.9375rem) { .instrument-chassis[data-proportion] .instrument-composition[data-has-inspector] { grid-template-columns: minmax(0, 1fr); } .instrument-composition[data-boundary] .instrument-inspector { box-shadow: inset 0 1px 0 var(--instrument-boundary-catch), inset 0 2px 0 var(--instrument-boundary-shadow); } } @media (prefers-reduced-motion: reduce) { .instrument-chassis { transition: none; } } }

package/dist/components/instrument-chassis/types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "vue";
+export type InstrumentChassisState = "ready" | "active" | "complete" | "loading";
+export type InstrumentChassisProportion = "golden" | "preview-dominant";
+export type InstrumentChassisBoundary = "stage-inspector" | "inspector-action";
+export type InstrumentChassisReserve = "none" | "stage" | "inspector" | "both";
+export interface InstrumentChassisProps {
+    state?: InstrumentChassisState;
+    tone?: string;
+    proportion?: InstrumentChassisProportion;
+    boundaries?: readonly InstrumentChassisBoundary[];
+    reserve?: InstrumentChassisReserve;
+    class?: HTMLAttributes["class"];
+}

package/dist/components/label/Label.vue.d.ts

@@ -1,21 +1,16 @@
-import { type HTMLAttributes } from 'vue';
-import { type LabelProps } from 'reka-ui';
-type __VLS_Props = LabelProps & {
-    class?: HTMLAttributes['class'];
-    /**
-     * AQ.W4 §W4.5 — render a required-field asterisk after the label text.
-     * The asterisk is decorative-to-AT (the `required` attribute on the input
-     * is the semantic carrier), so it is marked `aria-hidden`. Indicate
-     * required fields visually BEFORE interaction (required-field-feedback
-     * guide).
-     */
-    required?: boolean;
-};
+import { type HTMLAttributes } from "vue";
+export type LabelRequirement = "required" | "optional";
+export interface LabelProps {
+    for?: string;
+    class?: HTMLAttributes["class"];
+    requirement?: LabelRequirement;
+    disabled?: boolean;
+}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<LabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LabelProps> & Readonly<{}>, {}, {}, {}, {}, 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/label/index.d.ts

@@ -1 +1 @@
-export { default as Label } from './Label.vue';
+export { default as Label, type LabelProps, type LabelRequirement, } from "./Label.vue";

package/dist/components/labeled-field/LabeledField.vue.d.ts

@@ -1,112 +1,14 @@
-import { type HTMLAttributes } from "vue";
-/**
- * LabeledField — parent SFC for the labeled-field family (V.W3.T5 / A5 §5.5).
- *
- * Owns the IconTooltip + label layer that the four sibling primitives
- * (LabeledInput, LabeledSelect, LabeledSlider, LabeledSwitch) used to repeat
- * across their templates. The form control composes via `<slot />`.
- *
- * The four wrappers stay intact for API ergonomics (per the B5 §5.5 keep-wrappers
- * path) but now compose `<LabeledField>` internally — the canonical recipe
- * lives in one place. Consumers may also import `<LabeledField>` directly
- * if they want full control of the slot.
- *
- * The `.labeled-field-label` utility class lives at `utilities.css` and
- * paints the canonical typography (font-display + body-size + muted-fg +
- * cursor-help). The previous mixed `text-base` / `text-lg` literals
- * harmonise on a single body-size token.
- *
- * AZ.W-BLOB-REDRESS — `hideLabel` VISUALLY hides the field's own label (it
- * renders `sr-only` instead of `.labeled-field-label`) while KEEPING it in the
- * DOM, so the `for`/`id`/`aria-labelledby` control↔label association — the
- * Slider thumb's `aria-labelledby`, the Select trigger's `for` — stays intact
- * and the control is still accessibly named. The visible human label is then
- * supplied by an enclosing chrome row (a `<ConfiguratorRow label>`). This is
- * the canonical fix for the double-label leak: a `<ConfiguratorRow label="X">`
- * wrapping a `<LabeledSlider label="x">` rendered BOTH labels (the human one +
- * the raw config key); the inner control passes `hide-label` so ONE visible
- * human label remains, the raw key demotes to the row's mono `name` token, and
- * a11y is preserved. The tooltip is suppressed when hidden (the row owns the
- * affordance). NO effect on `LabeledField` used standalone (default `false`).
- *
- * AQ.W4 §W4.5 — `required` threads a `aria-hidden` asterisk onto the label
- * (the `required` attr on the slotted control is the semantic carrier). The
- * `error` slot renders an error-message region that the W3.1c
- * `:has(:user-invalid)` group rule reveals; it carries `aria-live="polite"`
- * so the message is announced when shown. The region's id is exposed as the
- * default slot's `errorId` slot-prop so the slotted control can bind
- * `aria-errormessage="errorId"` (the four wrappers auto-wire it; a raw
- * `<LabeledField>` slot binds it manually). It is polite by default; a form
- * with one summary live region can set `errorLive="off"` to avoid duplicate
- * submit announcements.
- *
- * # LabeledField vs ConfiguratorRow — recorded divergence (AZ.W-METRIC-UNIFY §B)
- *
- * Both are "label (+ meta) above/beside a slotted control", but they are NOT
- * interchangeable — they emphasize DIFFERENT features:
- *  - LabeledField (this) — for FORM fields. Carries the `for`/`id` label↔control
- *    a11y wiring (`controlId`/`labelId`/`errorId`), the `tooltip`, the `required`
- *    asterisk, and the `aria-live` `error` region.
- *  - ConfiguratorRow — for TOKEN / PRESET controls. Carries the token-`name`
- *    reference, the opt-in `reset` affordance (`canReset`), and the four-rung
- *    `density` axis. No a11y for/id wiring.
- *
- * Reach for LabeledField for accessible form inputs; reach for ConfiguratorRow
- * inside a `<Configurator>` for token sliders/selects. The divergence is recorded
- * (NOT a forced merge — no ≥2-consumer shared-chassis need surfaced) in
- * `docs/precepts/design-idioms.md §9`, alongside the `cn`/`focus-ring` keeps.
- */
-type __VLS_Props = {
-    label: string;
-    tooltip?: string;
-    labelClass?: HTMLAttributes["class"];
-    required?: boolean;
-    /**
-     * Controls whether this field's error announces itself. A form-level
-     * summary can set this to `off` so one submit does not create competing
-     * live-region announcements.
-     */
-    errorLive?: "off" | "polite" | "assertive";
-    /**
-     * AZ.W-BLOB-REDRESS — render the field's own label `sr-only` (kept in the
-     * DOM for the control↔label a11y association) instead of visibly. Use when
-     * an enclosing chrome row already supplies the visible human label (a
-     * `<ConfiguratorRow label>`), so the inner control does not leak a second
-     * (often raw-config-key) label. Default `false` (standalone behavior).
-     */
-    hideLabel?: boolean;
-    /**
-     * BC.W-CONTROL-SMOOTH move C (kf-G3) — lay the field on the HORIZONTAL axis
-     * (label beside control, not above) for dense inline forms. ADDITIVE +
-     * default `false`: a bare `<LabeledField>` is byte-identical to HEAD (the
-     * stacked label-over-control layout). Pairs with the `#action` slot — a
-     * horizontal labeled control carrying a trailing action affordance is the
-     * REQ-sec20 horizontal-action case the kf-G3 row booked.
-     */
-    horizontal?: boolean;
+import type { LabeledFieldProps, LabeledFieldSlotProps } from "./types";
+type __VLS_Slots = {
+    default(props: LabeledFieldSlotProps): unknown;
+    error?(): unknown;
 };
-declare var __VLS_7: {
-    errorId: string;
-    controlId: string;
-    labelledBy: string;
-}, __VLS_9: {
-    controlId: string;
-}, __VLS_11: {
-    errorId: string;
-    controlId: string;
-    labelledBy: string;
-}, __VLS_13: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-} & {
-    action?: (props: typeof __VLS_9) => any;
-} & {
-    default?: (props: typeof __VLS_11) => any;
-} & {
-    error?: (props: typeof __VLS_13) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    errorLive: "off" | "polite" | "assertive";
+declare const __VLS_base: import("vue").DefineComponent<LabeledFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LabeledFieldProps> & Readonly<{}>, {
+    invalid: boolean;
+    disabled: boolean;
+    layout: import("./types").LabeledFieldLayout;
+    controlLabelable: boolean;
+    errorLive: import("./types").LabeledFieldErrorLive;
 }, {}, {}, {}, 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/labeled-field/LabeledInput.vue.d.ts

@@ -1,31 +1,11 @@
-import { type InputHTMLAttributes } from "vue";
-type __VLS_Props = {
-    modelValue: string | number;
-    label: string;
-    tooltip?: string;
-    labelClass?: string;
-    inputClass?: string;
-    type?: string;
-    autocomplete?: InputHTMLAttributes["autocomplete"];
-    inputmode?: InputHTMLAttributes["inputmode"];
-    enterkeyhint?: InputHTMLAttributes["enterkeyhint"];
-    pattern?: InputHTMLAttributes["pattern"];
-    placeholder?: InputHTMLAttributes["placeholder"];
-    /**
-     * AQ.W4 §W4.5 — mark the field required. Threads the `aria-hidden`
-     * asterisk onto the label AND sets the native `required` attribute on the
-     * inner `<Input>` (the semantic carrier that drives `:user-invalid`).
-     */
-    required?: boolean;
-    errorLive?: "off" | "polite" | "assertive";
-};
+import type { LabeledInputProps } from "./types";
 declare var __VLS_17: {};
 type __VLS_Slots = {} & {
     error?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<LabeledInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LabeledInputProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;