@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/components/button/Button.vue.d.ts

@@ -1,25 +1,33 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
-import { type PrimitiveProps } from 'reka-ui';
-import { type ButtonVariants } from './';
-import type { Surface } from '../_shared/useSurfaceAxis';
-interface Props extends PrimitiveProps {
-    variant?: ButtonVariants['variant'];
-    size?: ButtonVariants['size'];
-    tone?: ButtonVariants['tone'];
-    iconOnly?: ButtonVariants['iconOnly'];
-    class?: HTMLAttributes['class'];
-    surface?: Surface;
-    liquid?: boolean;
-    punch?: boolean;
-    type?: ButtonHTMLAttributes['type'];
-    disabled?: ButtonHTMLAttributes['disabled'];
+import { type ButtonHTMLAttributes, type HTMLAttributes } from "vue";
+import type { Size, Tone } from "../_shared/axes";
+import type { PrimitiveProps } from "../_shared/primitive";
+export type ButtonEmphasis = "primary" | "secondary" | "quiet" | "text";
+export type ButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+export interface ButtonProps extends PrimitiveProps {
+    /** Visual priority. It does not change the command's semantics. */
+    emphasis?: ButtonEmphasis;
+    /** Semantic intent, orthogonal to emphasis. */
+    tone?: Tone;
+    size?: ButtonSize;
+    /** Square geometry for an accessibly named icon command. */
+    iconOnly?: boolean;
+    /** Marks an in-flight command and suppresses activation until it settles. */
+    loading?: boolean;
+    type?: ButtonHTMLAttributes["type"];
+    disabled?: ButtonHTMLAttributes["disabled"];
+    class?: HTMLAttributes["class"];
 }
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    size: ButtonSize;
+    as: import("../_shared/primitive").AsTag | import("vue").Component;
+    tone: Tone;
+    loading: boolean;
+    emphasis: ButtonEmphasis;
+    iconOnly: boolean;
 }, {}, {}, {}, 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/button/index.d.ts

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

package/dist/components/button/styles.css

@@ -0,0 +1 @@
+@layer components { .button { --button-size: var(--control-h-md); display: inline-flex; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--button-size); align-items: center; justify-content: center; gap: calc(0.375rem * var(--ui-scale)); padding-inline: calc(1rem * var(--ui-scale)); border: 0; border-radius: var(--radius-pill); color: var(--foreground); font: inherit; font-size: var(--control-text); font-weight: 500; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; appearance: none; touch-action: manipulation; user-select: none; scale: 1; --scale-press: var(--scale-press-btn); --glass-specular-intensity-hover: var(--glass-specular-btn-hover); } .button > svg { flex: none; pointer-events: none; } .button > svg:not([class*="size-"]) { inline-size: var(--ui-glyph); block-size: var(--ui-glyph); } .button[data-emphasis="primary"] { --glass-bg-rung: var(--glass-bg-floating); --glass-capsule-fill: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-deep)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-deep)); font-weight: 650; } .button[data-emphasis="secondary"] { --glass-bg-rung: var(--glass-bg-quiet); --glass-capsule-fill: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-resting)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-resting)); } .button[data-emphasis="quiet"], .button[data-emphasis="text"] { background: transparent; box-shadow: none; color: var(--muted-foreground); } .button[data-emphasis="quiet"]:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--foreground); } .button[data-emphasis="text"] { padding-inline: calc(0.25rem * var(--ui-scale)); color: var(--primary); text-underline-offset: 0.25em; } .button[data-emphasis="text"]:hover:not(:disabled, [aria-disabled="true"]) { text-decoration: underline; } .button[data-tone="success"] { --button-tone: var(--success); --button-tone-ink: var(--success-foreground); } .button[data-tone="warning"] { --button-tone: var(--warning); --button-tone-ink: var(--warning-foreground); } .button[data-tone="info"] { --button-tone: var(--info); --button-tone-ink: var(--info-foreground); } .button[data-tone="destructive"] { --button-tone: var(--destructive); --button-tone-ink: var(--destructive-foreground); } .button:not([data-tone="neutral"]) { border: 1px solid color-mix(in oklab, var(--button-tone) 72%, var(--foreground)); background: var(--button-tone); box-shadow: var(--shadow-sm); color: var(--button-tone-ink); } .button[data-emphasis="quiet"]:not([data-tone="neutral"]), .button[data-emphasis="text"]:not([data-tone="neutral"]) { border-color: transparent; background: transparent; box-shadow: none; color: var(--button-tone); } .button[data-emphasis="quiet"]:not([data-tone="neutral"]):hover:not( :disabled, [aria-disabled="true"] ), .button[data-emphasis="text"]:not([data-tone="neutral"]):hover:not( :disabled, [aria-disabled="true"] ) { background: color-mix(in oklab, var(--button-tone) 10%, transparent); } .button[data-size="xs"] { --button-size: var(--control-h-xs); gap: calc(0.25rem * var(--ui-scale)); padding-inline: calc(0.5rem * var(--ui-scale)); font-size: var(--control-text-sm); } .button[data-size="sm"] { --button-size: var(--control-h-sm); padding-inline: calc(0.75rem * var(--ui-scale)); } .button[data-size="lg"] { --button-size: var(--control-h-lg); gap: calc(0.5rem * var(--ui-scale)); padding-inline: calc(1.25rem * var(--ui-scale)); } .button[data-icon-only] { inline-size: var(--button-size); block-size: var(--button-size); min-block-size: var(--button-size); padding: 0; } .button:disabled, .button[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; } .button:disabled { pointer-events: none; } .button[data-loading] { cursor: progress; } .button.glass-wash:active::before { --specular-intensity: calc( var(--glass-specular-intensity-hover) + ( var(--glass-specular-intensity-active) - var(--glass-specular-intensity-hover) ) * var(--glass-btn-press-t) ); } @media (prefers-reduced-motion: reduce) { .button { transition: none; } } }

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

@@ -1,173 +1,38 @@
-import { type HTMLAttributes } from "vue";
-import type { PrimitiveProps } from "reka-ui";
-import type { Surface as SurfaceKind } from "../_shared/useSurfaceAxis";
-import type { Motion } from "../_shared/axes";
-/**
- * The glass surface ladder — the 5-rung base tier (BI.W-SURFACE-EXTRACT collapsed
- * `opaque`/`deep` OUT of this union). Maps 1:1 to `.glass-{tier}` in glass.css and is
- * now value-identical to the `SurfaceTier` grammar vocabulary:
- *
- *   wash     — lightest (~0.30α)        : inline workspace chrome, scroll-pane host
- *   quiet    — light    (~0.50α)        : ambient panels, secondary surfaces
- *   resting  — canonical (~0.65α)       : the protagonist plate (default)
- *   floating — heavy   (~0.80α)         : popover-class, login surfaces
- *   overlay  — heaviest (~0.95α + blur) : modal-on-modal, dialog over content
- *
- * The solid-card escape is now `<Card surface="opaque">` (the `--glass-level:0`
- * decoration on the surface axis, not a tier), and the maximal iOS-27 deep-glass
- * register is `<Card deep>` (the boolean — `.glass-floating glass-deep`, BB.W-DEEP-GLASS).
- * Both are clean breaks: no `tier="opaque"` / `tier="deep"` alias (MIGRATION row).
- */
-export type CardTier = "wash" | "quiet" | "resting" | "floating" | "overlay";
-/**
- * Surface decoration register — the SHARED {glass·veil·opaque·clear} axis (the
- * `Surface` grammar) PLUS Card's local `cartoon` superset (BI.W-SURFACE-EXTRACT:
- * `CardSurface = Surface | "cartoon"`; `opaque`/`clear` joined the union as the
- * `tier="opaque"` collapse landing + the clear register). Orthogonal to
- * `tier`/`shadow`/`grain`.
- *
- *   glass    — the tier's plain glass rung (default)
- *   veil     — the text-legibility PLATE (R5-7). The wash/quiet glass fill + blur
- *              with the border AND rim/highlight STRIPPED. An optional radial
- *              feather axis (`--veil-feather`, default none). Routes the glass
- *              material through the `--glass-*` ladder, so `--glass-level` / the
- *              W55 bright-bucket retune it in lockstep with every glass surface.
- *   opaque   — the `--glass-level:0` solid-card escape (the prior `tier="opaque"`
- *              rung's clean-break successor): a solid `--card` plate through the ONE
- *              level knob, the tint axis zeroed.
- *   clear    — the scrim-coupled maximally-translucent Apple-Clear plate
- *              (BE.W-CLEAR-VARIANT).
- *   cartoon  — the Card-LOCAL Memphis-sticker decoration (NOT a `Surface` axis
- *              member — the grammar fence): 2px border, offset-stamp shadow,
- *              hover-lift. Composes onto ANY tier over the glass base.
- */
-export type CardSurface = SurfaceKind | "cartoon";
-/**
- * Specular catch-light register (AX.W09) — the pointer-anchored moving lens on a
- * glass card.
- *
- *   off    — NO catch-light (default). The clean resting panel: a data/content
- *            `surface="glass"` card over any backplate reads flat — no centred
- *            white bloom, no pointer wiring. The §24 three-consumer-confirmed
- *            default for the common content-card case.
- *   subtle — the token-ladder lens: the pointer-anchored catch-light wakes on
- *            hover/active at the SUBTLE `--glass-specular-intensity-*` magnitudes.
- *            The explicit opt-in for a hero/chrome surface.
- *   full   — the brighter pre-tune rung set, for the busy-backdrop case the recipe
- *            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`/`motion` (a `variant="selection" surface="glass"
- * tier="resting" as="button"` card is valid). The hue is a CONSUMER value
- * (`data-hue`/`data-hue-strength` per-instance); NO consumer hue enters a token.
- */
+import type { SurfaceTier } from "../_shared/axes";
+import { type SurfaceProps } from "../surface/Surface.vue";
+export type CardTier = SurfaceTier;
+export type CardSize = "sm" | "md";
 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;
-    /** Surface decoration register (the shared `Surface` axis + Card's `cartoon`
-     *  superset). `glass` (default) renders the tier's glass rung; `veil` overlays
-     *  the borderless/rimless text-legibility plate; `opaque` is the
-     *  `--glass-level:0` solid-card escape (the `tier="opaque"` collapse landing);
-     *  `clear` the scrim-coupled Apple-Clear plate; `cartoon` overlays the
-     *  Card-LOCAL Memphis-sticker decoration. Orthogonal to `tier`/`shadow`/`grain`. */
-    surface?: CardSurface;
-    /** BB.W-DEEP-GLASS — the maximal iOS-27 deep-glass opt-in (Apple
-     *  saturate-1.5/blur-16px): the `.glass-deep` decoration on the `floating` base
-     *  rung. Default `false` (the calm content default, byte-unchanged). The
-     *  clean-break successor of the retired `tier="deep"` rung. */
-    deep?: boolean;
-    /** Surface drop shadow via `--shadow-card`. Off for cards nested inside cards. */
-    shadow?: boolean;
-    /** `::after` paper-grain overlay. Off for scroll panes (the grain conflicts
-     *  with overflow:auto repaints). */
-    grain?: boolean;
-    /** BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC paper register: a `::after`
-     *  blueprint/graph-paper grid felt THROUGH the card interior (the math/grid
-     *  brand pillar, read through the plate rather than only in the page
-     *  margin). Default **OFF** — a bare card is byte-identical to HEAD; a
-     *  document-register card opts in. ORTHOGONAL to `grain` (organic) — a card
-     *  may carry BOTH the turbulence grain and the geometric grid. The register
-     *  doctrine (paper-register cards opt in, instrument-glass surfaces do NOT)
-     *  is a CONSUMER choice the default-OFF honors by construction. */
+/** A semantic content group. Material concerns are forwarded to Surface. */
+export interface CardProps extends SurfaceProps {
+    size?: CardSize;
+    /** Static Memphis edge treatment; it does not add command behavior. */
+    cartoon?: boolean;
+    /** Static engineering-grid texture. */
     grid?: boolean;
-    /** Specular catch-light register (AX.W09). `off` (default) keeps the card
-     *  CLEAN — no pointer-anchored lens, clean over any backplate (the §24
-     *  three-consumer-confirmed default for a data/content card). `subtle` wakes
-     *  the pointer-anchored moving catch-light at the token-ladder magnitudes (a
-     *  hero/chrome opt-in); `full` runs the brighter pre-tune rung set for a busy
-     *  backdrop. Only `glass` surfaces wire it; `cartoon` owns its own sticker lift. */
-    specular?: CardSpecular;
-    /** BH.W-MOTION-AXIS — the ONE motion-weight axis (the `pressable` boolean's
-     *  clean-break successor). `full` (default) — the FULL liquid register, gesture
-     *  enrichments armed (zero-delta at default). `reduced` — the JS press physics
-     *  degrade to the `.tap-squish` `:active` CSS floor (the SAME state PRM produces).
-     *  `off` — the press unbinds AND `--motion-weight: 0` zeroes the cartoon channels;
-     *  the click still selects. PRM forces `full → reduced` regardless (a11y absolute).
-     *
-     *  The press CAPABILITY derives from INTERACTIVITY, not this axis: a Card presses
-     *  IFF it renders interactive (`as="button"`/`as="a"`/`href`/`role="button"` on the
-     *  root) AND `motion !== "off"`. A bare static `<Card>` never presses because it has
-     *  no interaction to enrich — the "static plate never presses" fence holds by
-     *  DERIVATION, not by a default. The press is `useLiquidPress` (the interruptible
-     *  coupled spring-press — Card is the SECOND `useSpringPress` binary, Button first),
-     *  compositor-only (`scale` + `--card-press-t`); the `.glass-press` CSS `:active`
-     *  scale is the no-JS / SSR floor. */
-    motion?: Motion;
-    /** 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`/`motion`. */
     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: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    size: CardSize;
     shadow: boolean;
+    as: import("../_shared/primitive").AsTag | import("vue").Component;
+    surface: import("../surface").SurfaceDecoration;
     grid: boolean;
-    surface: CardSurface;
-    as: import("reka-ui").AsTag | import("vue").Component;
     deep: boolean;
-    tier: CardTier;
+    material: import("../surface").SurfaceMaterial;
     grain: boolean;
-    specular: CardSpecular;
+    specular: import("../surface").SurfaceSpecular;
+    cartoon: boolean;
+    selected: boolean;
     metal: CardMetal;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/card/CardAction.vue.d.ts

@@ -1,11 +1,4 @@
 import type { HTMLAttributes } from "vue";
-/**
- * <CardAction> — the shadcn-2025 top-right action slot of the Card family.
- * When present inside a <CardHeader>, the header reflows to a two-column grid
- * (title/description column + this action column) via the `@container/card-header`
- * `has-data-[slot=card-action]` query on CardHeader. Self-aligns to the start of
- * the header's first two rows, justified to the end.
- */
 type __VLS_Props = {
     class?: HTMLAttributes["class"];
 };

package/dist/components/card/CardContent.vue.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
-    class?: HTMLAttributes['class'];
+    class?: HTMLAttributes["class"];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/CardDescription.vue.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
-    class?: HTMLAttributes['class'];
+    class?: HTMLAttributes["class"];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/CardFooter.vue.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
-    class?: HTMLAttributes['class'];
+    class?: HTMLAttributes["class"];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/CardHeader.vue.d.ts

@@ -1,47 +1,8 @@
-import type { HTMLAttributes } from 'vue';
-/**
- * <CardHeader> — header lane of the Card family.
- *
- * AI.W1-α additive `shrink` modifier — when true, the header binds to the
- * `--card-scroll` named scroll-timeline (emitted by the canonical
- * `.card-scroll-host` utility on a scroll-overflow ancestor, owned by
- * `<ScrollCard>`) and runs the 4-lane compositor-safe shrink choreography as
- * the host scrolls: (1) header content compress (translateY), (2) title
- * shrink-in-place (the shared `title-collapse` SCALE keyframe), (3)
- * description retire (opacity + scaleY), (4) header background lift (a
- * `::before` backplate opacity). Every lane is COMPOSITOR-SAFE (scale /
- * transform / opacity only — BB.W-CARD-COMPOSITE) so ZERO reflow fires per
- * scroll frame (the A'-3 CLS 1.03 worst-cluster killed).
- *
- * BG.W-SCROLL-SHRINK-UNIFY — the choreography is EXTERNALIZED to the global,
- * un-hashed `src/styles/card-scroll.css` (this SFC carries NO `<style>` block).
- * A global stylesheet has no Vue `data-v-…` scope hash, so it reaches the
- * light-DOM slotted `<CardTitle>`/`<CardDescription>` via the PLAIN descendant
- * selector `.card-header--shrink > [data-slot=…]` (the correct global-file form
- * — no `:slotted()`/`:deep()` scope escape needed). The lane-2 title SCALE leg
- * is shared with the page/hero large-title collapse via ONE `@keyframes
- * title-collapse` (the DRY fold; card supplies `--title-collapse-scale: 0.695`,
- * page/hero supply `0.82`). The scrub ease is the NO-OVERSHOOT
- * `--card-shrink-ease` (off the retired cartoon-punch — a scroll scrub must be
- * monotonic). `proof:no-layout-animation` (W1-W4) makes the layout-property
- * class structurally impossible to re-ship AND asserts the externalized-global
- * shape.
- *
- * **Required ancestor**: when `shrink` is true, `.card-scroll-host` MUST sit on
- * the scroll-overflow ancestor (`<ScrollCard>` owns it). Without that host the
- * named timeline never emits and the choreography sits idle. Sticky positioning
- * stays consumer-side (the consumer adds `class="sticky top-0"` etc. via
- * `props.class`); the background TINT is scroll-driven by lane 4.
- */
+import { type HTMLAttributes } from "vue";
 type __VLS_Props = {
-    /**
-     * Bind the header to the `--card-scroll` named timeline and run the
-     * 3-lane shrink choreography. Requires `.card-scroll-host` on the
-     * scroll-overflow ancestor. Default `false` — the existing 5+
-     * consumers see no change.
-     */
+    /** Requires `.card-scroll-host` on the scrollable ancestor. */
     shrink?: boolean;
-    class?: HTMLAttributes['class'];
+    class?: HTMLAttributes["class"];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/card/CardTitle.vue.d.ts

@@ -1,12 +1,15 @@
 import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     class?: HTMLAttributes["class"];
 };
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}, {}, {}, {}, 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/card/card-scroll.css

@@ -0,0 +1 @@
+.card-header--shrink { --card-header-pad-condensed: calc(var(--card-pad-block) / 2); position: relative; isolation: isolate; transition: padding-block-start var(--duration-normal) var(--ease-standard); } .card-header--shrink::before { content: ""; position: absolute; inset: 0 0 calc(var(--card-pad-title-gap) * -1); z-index: -1; border-radius: inherit; background: var(--glass-bg-resting); -webkit-backdrop-filter: var(--glass-blur-resting); backdrop-filter: var(--glass-blur-resting); mask-image: linear-gradient( to bottom, black calc(100% - var(--card-pad-title-gap)), transparent ); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-standard); } .card-header--shrink > [data-slot="card-title"] { font-size: var(--type-display-2); transition: font-size var(--duration-normal) var(--ease-standard); } .card-header--shrink[data-condensed="true"] { padding-block-start: var(--card-header-pad-condensed); } .card-header--shrink[data-condensed="true"]::before { opacity: 1; } .card-header--shrink[data-condensed="true"] > [data-slot="card-title"] { font-size: var(--type-display-1); } .card-header--shrink[data-condensed="true"] > [data-slot="card-description"] { display: none; } @media (prefers-reduced-motion: reduce) { .card-header--shrink, .card-header--shrink::before, .card-header--shrink > [data-slot="card-title"] { transition: none; } }

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

@@ -1,7 +1,5 @@
-export { default as Card, type CardTier, type CardSurface, type CardSpecular, type CardVariant, type CardMetal, } from "./Card.vue";
+export { default as Card, type CardProps, type CardTier, type CardSize, 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";
 export { default as CardTitle } from "./CardTitle.vue";
 export { default as CardDescription } from "./CardDescription.vue";
 export { default as CardContent } from "./CardContent.vue";

package/dist/components/card/styles.css

@@ -0,0 +1 @@
+@layer components { .card { --card-pad-inline: calc(var(--spacing) * 6); --card-pad-block: calc(var(--card-pad-inline) * 1.272); --card-pad-section-gap: var(--card-pad-block); --card-pad-footer: calc(var(--card-pad-block) / 1.618); --card-pad-title-gap: calc(var(--card-pad-inline) / 2.618); } .card[data-size="sm"] { --card-pad-inline: calc(var(--spacing) * 4); } .card-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-pad-title-gap); padding: var(--card-pad-block) var(--card-pad-inline) 0; container-type: inline-size; container-name: card-header; } .card-header:has(> [data-slot="card-action"]) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .card-title { min-width: 0; font-size: var(--type-heading); font-weight: var(--font-weight-semibold); line-height: var(--type-leading-heading); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; } .card-description { min-width: 0; color: var(--muted-foreground-strong); font-size: var(--text-sm); line-height: var(--leading-normal); overflow-wrap: anywhere; } .card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; } .card-content { padding: var(--card-pad-section-gap) var(--card-pad-inline) var(--card-pad-block); } .card-content:has(+ .card-footer) { padding-bottom: 0; } .card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--card-pad-footer) / 1.618); padding: var(--card-pad-footer) var(--card-pad-inline) var(--card-pad-block); } .paper-grid { background-image: var(--paper-grid-texture); background-repeat: repeat; background-size: calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), calc(var(--paper-grid-texture-size) * 4) calc(var(--paper-grid-texture-size) * 4), var(--paper-grid-texture-size) var(--paper-grid-texture-size), var(--paper-grid-texture-size) var(--paper-grid-texture-size); background-blend-mode: multiply; } :where(.dark) .paper-grid { background-blend-mode: screen; } [data-variant="selection"] { --selection-accent-strength: 16%; --selection-accent-strength-selected: 28%; --glass-accent-strength: var(--selection-accent-strength); } [data-variant="selection"][data-selected="true"] { --glass-accent-strength: var(--selection-accent-strength-selected); } } @utility cartoon-surface { position: relative; border-width: 2px; box-shadow: var(--shadow-cartoon-md); } @media (prefers-reduced-transparency: reduce) { .paper-grid { background-image: none; } }

package/dist/components/carousel/Carousel.vue.d.ts

@@ -9,7 +9,7 @@ declare var __VLS_1: {
     canScrollPrev: boolean;
     carouselApi: import("embla-carousel").EmblaCarouselType | undefined;
     carouselRef: HTMLElement | undefined;
-    orientation: "horizontal" | "vertical" | undefined;
+    orientation: "vertical" | "horizontal" | undefined;
     scrollNext: () => void;
     scrollPrev: () => void;
 };
@@ -21,7 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     canScrollPrev: import("vue").Ref<boolean, boolean>;
     carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
     carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-    orientation: "horizontal" | "vertical" | undefined;
+    orientation: "vertical" | "horizontal" | undefined;
     scrollNext: () => void;
     scrollPrev: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,9 +1,6 @@
 export { default as Carousel } from './Carousel.vue';
 export { default as CarouselContent } from './CarouselContent.vue';
 export { default as CarouselItem } from './CarouselItem.vue';
-export { default as CarouselNext } from './CarouselNext.vue';
 export { default as CarouselPager } from './CarouselPager.vue';
-export { default as CarouselPrevious } from './CarouselPrevious.vue';
-export { default as GlassCarouselPager } from './GlassCarouselPager.vue';
 export type { UnwrapRefCarouselApi as CarouselApi, } from './interface';
 export { useCarousel } from './useCarousel';

package/dist/components/carousel/interface.d.ts

@@ -7,6 +7,8 @@ type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
 export interface CarouselProps {
+    /** Accessible name that opts the carousel into a named region landmark. */
+    ariaLabel?: string;
     opts?: CarouselOptions;
     plugins?: CarouselPlugin;
     orientation?: 'horizontal' | 'vertical';

package/dist/components/carousel/useCarousel.d.ts

@@ -7,7 +7,7 @@ declare const useProvideCarousel: (args_0: CarouselProps, emits: CarouselEmits)
     canScrollNext: import("vue").Ref<boolean, boolean>;
     scrollPrev: () => void;
     scrollNext: () => void;
-    orientation: "horizontal" | "vertical" | undefined;
+    orientation: "vertical" | "horizontal" | undefined;
 };
 declare function useCarousel(): {
     carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -16,6 +16,6 @@ declare function useCarousel(): {
     canScrollNext: import("vue").Ref<boolean, boolean>;
     scrollPrev: () => void;
     scrollNext: () => void;
-    orientation: "horizontal" | "vertical" | undefined;
+    orientation: "vertical" | "horizontal" | undefined;
 };
 export { useCarousel, useProvideCarousel, CAROUSEL_WEIGHTY_DURATION };

package/dist/components/checkbox/Checkbox.vue.d.ts

@@ -1,16 +1,24 @@
-import { type HTMLAttributes } from 'vue';
-import type { CheckboxRootProps } from 'reka-ui';
-type __VLS_Props = CheckboxRootProps & {
-    class?: HTMLAttributes['class'];
+import { type HTMLAttributes } from "vue";
+import type { FormFieldProps, PrimitiveProps } from "../_shared/primitive";
+import type { CheckedState, SelectionValue } from "../_shared/selection";
+export interface CheckboxProps extends PrimitiveProps, FormFieldProps {
+    modelValue?: CheckedState | null;
+    defaultValue?: CheckedState;
+    disabled?: boolean;
+    value?: SelectionValue;
+    id?: string;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_14: {
+    state: CheckedState;
 };
-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, {
-    "update:modelValue": (value: boolean | "indeterminate") => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CheckedState) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CheckedState) => 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;

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

@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue';
+export { default as Checkbox, type CheckboxProps } from "./Checkbox.vue";

package/dist/components/checkbox/styles.css

@@ -0,0 +1 @@
+@layer components { .checkbox { position: relative; display: inline-grid; flex: none; place-items: center; inline-size: 1rem; block-size: 1rem; padding: 0; border: 1px solid var(--control-ring); border-radius: var(--radius-control); color: var(--primary-foreground); cursor: pointer; appearance: none; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } .checkbox__seat { position: absolute; top: 50%; left: 50%; inline-size: var(--touch-target, 2.75rem); block-size: var(--touch-target, 2.75rem); border-radius: var(--radius-pill); translate: -50% -50%; } .checkbox__indicator { display: grid; place-items: center; inline-size: 100%; block-size: 100%; } .checkbox:is([data-state="checked"], [data-state="indeterminate"]) { border-color: var(--control-checked-bg); background: var(--control-checked-bg); } .checkbox[aria-invalid="true"] { border-color: var(--destructive); box-shadow: var(--invalid-ring); } .checkbox:is(:disabled, [data-disabled]) { opacity: var(--opacity-disabled); cursor: not-allowed; } @media (forced-colors: active) { .checkbox { border-color: ButtonText; } .checkbox:is([data-state="checked"], [data-state="indeterminate"]) { border-color: Highlight; background: Highlight; color: HighlightText; } } }

package/dist/components/chip/Chip.vue.d.ts

@@ -1,14 +1,19 @@
-import { type ToggleProps } from "reka-ui";
-import type { ChipProps } from "./types";
-type __VLS_Props = ToggleProps & ChipProps;
-declare var __VLS_8: {};
+declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<import("./types").StaticChipProps | import("./types").SelectableChipProps | import("./types").ActionChipProps | import("./types").RemovableChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    remove: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("./types").StaticChipProps | import("./types").SelectableChipProps | import("./types").ActionChipProps | import("./types").RemovableChipProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onRemove?: ((event: MouseEvent) => 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;

package/dist/components/chip/chipVariants.d.ts

@@ -1,43 +1,20 @@
-import { type VariantProps } from "class-variance-authority";
-/**
- * chipVariants — the ONE congruent chip recipe (BI.W-CHIP-FOLD; BD.W-CHIP-CONGRUENT-GLASS).
- *
- * The chip family (the retired ToggleChip + SelectableChip + the toggle-group
- * children) is FOLDED onto ONE `<Chip shape × tone>`: a stadium-pill warm-glass
- * LENS that PUNCHES when you pick it. The Kronecker factorization (BI.W-CHIP-FOLD)
- * observed that ToggleChip's `variant` (`chip`/`cell`) was a pure NAME-SYNONYM of
- * SelectableChip's `shape` (`pill`/`cell`) over the SAME CVA — so the two surfaces
- * merge compile-time onto this ONE recipe (clean break, no alias — the no-legacy
- * law; the `selectableChipVariants`/`SelectableChipVariants` shim was SWEPT at
- * BG.W-DEAD-SWEEP). The tonal-accent register (`tone`) is a per-instance style
- * layered ON this recipe by `Chip.vue`, not a CVA axis.
- *
- * The recipe is STRUCTURE + the shared-register hooks: it COMPOSES the read-only
- * shared registers, never re-forks a parallel glass/cartoon/motion system —
- *   · `.glass-chip`         — the chip-family material/motion layer (the warm idle
- *                             floor + the `--glass-fill-tint` plate tint + the ONE
- *                             scale write + the `::after` colour-flood punch).
- *   · `.glass-capsule`      — the warm-transmissive lozenge BODY (fill + rim +
- *                             shadow + blur, on `--radius-pill` → the stadium
- *                             end-cap at every rung). Radius is INVARIANT — the
- *                             capsule re-rounds itself at every height; no
- *                             `rounded-*` rung (retires the 4/6/10px grab-bag).
- *   · `.glass-capsule-hover`— the SHARED specular-lift + press-snap on hover.
- *   · `.accent-tone`        — the contrast-floored tonal channels (idle fill /
- *                             active band / active edge / contrast-safe ink).
- *
- * The geometry: radius invariant (the capsule's `--radius-pill`); only padding/
- * text vary, on a √φ ladder (φ≈1.618). The `cell` is the ONE documented exception
- * (`.glass-chip--cell` → `--radius-card`): a 72px icon+label tile is a CARD, not a
- * pill — a DELIBERATE 2-silhouette family, composing the SAME material + motion.
- *
- * NO scale CVA — the ONE `scale` write lives on `.glass-chip` (hover/press/punch
- * folded into a single source of truth; a CVA `hover:scale-*` would collide).
- * The CVA carries no `color-mix(…--primary…)` literal — the tonal COLOUR is the
- * `.accent-tone` register's (driven by the `tone` prop's per-instance style).
- */
-export declare const chipVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    shape?: "cell" | "pill" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type ChipVariants = VariantProps<typeof chipVariants>;
+import { type ClassValue } from "../_shared/class-names";
+declare const SIZE: {
+    readonly sm: "gap-1 px-2.5 py-1 text-caption";
+    readonly md: "gap-1.5 px-3.5 py-1.5 text-small";
+    readonly lg: "gap-2 px-5 py-2 text-base";
+};
+declare const SHAPE: {
+    readonly pill: "";
+    readonly cell: "glass-chip--cell flex-col gap-1.5 px-2 py-2.5 text-micro";
+    readonly icon: "glass-chip--icon aspect-square p-0";
+};
+export interface ChipVariants {
+    interactive?: boolean | null;
+    size?: keyof typeof SIZE | null;
+    shape?: keyof typeof SHAPE | null;
+    class?: ClassValue;
+    className?: ClassValue;
+}
+export declare function chipVariants(options?: ChipVariants): string;
+export {};

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

@@ -1,3 +1,3 @@
 export { default as Chip } from "./Chip.vue";
 export { chipVariants, type ChipVariants } from "./chipVariants";
-export type { ChipProps } from "./types";
+export type { ChipMode, ChipProps } from "./types";