@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/styles/tokens/shadow.css

@@ -6,12 +6,17 @@
     /* ═══════════════════════════════════════════════
        §7  SHADOWS — cartoon offset is the signature
        ═══════════════════════════════════════════════ */
-    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
-    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
+    /* BD.W-CARTOON-CEL-INK — the `--shadow-cartoon`/`-hover` aliases + the
+       `--shadow-modal` cartoon plane re-point onto the warm `--cartoon-ink-lead`
+       (0-blur down-LEFT, the cel family coherence — no neutral `--foreground` gray
+       smudge). `--cartoon-ink-lead` is defined below in this same :root block (custom
+       properties resolve order-independently). */
+    --shadow-cartoon:       -3px 3px 0px 0px var(--cartoon-ink-lead);
+    --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead);
     --shadow-soft:          0 4px 12px rgba(0, 0, 0, 0.1);
     --shadow-elevated:      0 8px 24px rgba(0, 0, 0, 0.12);
     --shadow-modal:
-        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent),
+        -4px 4px 0px 0px var(--cartoon-ink-lead),
         0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
 
     --cartoon-shadow:       var(--shadow-cartoon);
@@ -88,16 +93,42 @@
     --shadow-cartoon-color:             rgb(0 0 0 / 0.12);
     --shadow-cartoon-color-soft:        rgb(0 0 0 / 0.06);
 
-    /* Tiered cartoon shadows */
-    --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
-    --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    /* ── BD.W-CARTOON-CEL-INK — the cartoon register's OWN warm cel ink ──────────────
+       Decoupled from `--shadow-color` so a consumer retunes the cast without
+       disturbing every elevation box-shadow. Built by EXTRACTING the warm
+       `--foreground` hue (`oklch from`) and FLOORING chroma (`max(c, 0.11)` —
+       TECHNICOLOR, not merely-non-gray, the BA.W-NO-GRAY discipline applied to the
+       cast) + DEEPENING L (`clamp(0.14, l, 0.18)`) so at stamp opacity it reads as a
+       COLORED cel line, never a neutral gray. A cel cast is INK — it stays a warm DARK
+       ink (the dark arm pins its own warm dark ink, dark-arm.css). The three planes
+       step DOWN in opacity (lead 32% / mid 26% / contact 18%) — `in oklab` NOT
+       `in srgb` (srgb muddies a warm dark ink toward gray as it dilutes; oklab holds
+       the warm hue stable across the alpha ramp — the landed gray-dilution defect). */
+    --cartoon-ink: oklch(from var(--foreground) clamp(0.14, l, 0.18) max(c, 0.11) h);
+    --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 32%, transparent);
+    --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 26%, transparent);
+    --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent);
+    /* `@supports not (oklch from …)` floors the ink to a named warm sRGB literal
+       (a legacy engine gets a WARM — not gray — stamp; NO dead inline literal). */
+    --cartoon-ink-fallback: #4a3320;
+
+    /* BD.W-CARTOON-CEL-INK — the tiered cel-ink STAMP, re-pointed to the warm
+       `--cartoon-ink` rungs at HARD 0-BLUR (lead + mid + contact all 0px — the cel
+       edge; the landed 1–2px soft blur is the gray-smudge defect), keeping the LANDED
+       down-LEFT geometry (REFINE-not-flip — the direction is coherent with the
+       upper-right `--glass-key`; cast lands lower-LEFT). φ-cadenced offsets. */
+    --shadow-cartoon-sm:
+        -2px 2px 0 var(--cartoon-ink-lead),
+        -3px 3px 0 var(--cartoon-ink-mid),
+        -4px 4px 0 var(--cartoon-ink-contact);
+    --shadow-cartoon-md:
+        -3px 3px 0 var(--cartoon-ink-lead),
+        -5px 5px 0 var(--cartoon-ink-mid),
+        -7px 7px 0 var(--cartoon-ink-contact);
+    --shadow-cartoon-lg:
+        -4px 4px 0 var(--cartoon-ink-lead),
+        -7px 7px 0 var(--cartoon-ink-mid),
+       -11px 11px 0 var(--cartoon-ink-contact);
     --cartoon-shadow-sm: var(--shadow-cartoon-sm);
     --cartoon-shadow-md: var(--shadow-cartoon-md);
     --cartoon-shadow-lg: var(--shadow-cartoon-lg);
@@ -164,3 +195,32 @@
         color-mix(in srgb, var(--blob-shadow-color) 44%, transparent);
 
 }
+
+/* BD.W-CARTOON-CEL-INK — the relative-color-syntax fallback. On a legacy engine that
+   lacks `oklch(from …)`, `--cartoon-ink` would be invalid (the whole cast drops). Floor
+   it to the named warm sRGB literal `--cartoon-ink-fallback` (NOT a dead inline literal)
+   so the cel stamp degrades to a WARM — never gray, never empty — ink. The three
+   strength rungs re-derive off the floored ink for free (they `color-mix` it). */
+@supports not (color: oklch(from white l c h)) {
+    :root {
+        --cartoon-ink: var(--cartoon-ink-fallback);
+    }
+}
+
+/* BD.W-CARTOON-CEL-INK — prefers-contrast / reduced-transparency floor the inked edge
+   UP (the cel cast is a legibility ASSET, not decoration; PRT is NOT a no-op — the cast
+   is translucent ink). */
+@media (prefers-contrast: more) {
+    :root {
+        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
+        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
+        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
+    }
+}
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
+        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
+        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
+    }
+}

package/dist/styles/tokens.css

@@ -21,10 +21,17 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The ten partials @import in
+/* CSS @import rules must precede every other rule. The partials @import in
    cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
-   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
+   BB.W-CARVE3, and scheme-motion's §2 EASING block into scheme-spring.css at
+   BD.W-CUT — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
+/* BD.W-CUT (no-god-module carve) — scheme-motion's §2 EASING block (spring
+   linear() curves + per-spring duration clocks + goo-flow curves + bezier
+   cores/aliases) carved into scheme-spring.css to hold the 500-line bound,
+   @import-ed IMMEDIATELY AFTER scheme-motion.css (adjacent same-selector :root
+   blocks at the same cascade slot — the spring/easing tokens resolve in order). */
+@import "./tokens/scheme-spring.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";

package/dist/styles/utilities/btn.css

@@ -109,6 +109,76 @@
    (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
    STAY — they were never disco. */
 
+/* ── BD.W-BUTTON-GLASS-CONSUME — `.btn-punch`, the ONE new opt-in cartoon tier ──
+   The LOUD hero interaction decoration that sits ON TOP of the shared `.glass-capsule`
+   (it is NOT a material — buttons own no material). Composed via Button.vue's
+   `punchDecoration` (default-ON for `primary-audacious`/`gold-audacious`, opt-in via the
+   `punch` prop). It re-targets the EXISTING press primitives — ZERO second spring/rAF,
+   ZERO re-forked caster:
+
+     • the LOUD register — `--motion-weight: 1` (the same loud-register coupling
+       `.cartoon-surface` carries) so the cast travel + the glyph pop are never muted to
+       the rest 0.618 (the BD.W-CARTOON-PUNCH loud-register guard). The `:root` PRM carve
+       still zeroes it under reduce (handled below).
+     • the ANTICIPATION + OVERSHOOT — the host `scale` transition leg re-points off the
+       calm `--spring-smooth` (the `.btn-pill` base) onto `--ease-cartoon-punch` (DEPEND,
+       the booked raw `linear()` with the real pre-dip-below-origin + overshoot arm). The
+       JS `useLiquidFlex` writes the reciprocal `scale` inline DURING the press (single
+       source, it wins); on RELEASE the inline scale is removed and THIS transition curve
+       carries the scale back to rest with the cartoon follow-through. ONE scalar drive,
+       no double-drive on the same property.
+     • the louder squish amplitude is the JS side (Button.vue `maxStretch` 1.04→1.09,
+       fenced ≤1.14 composed area) — the css only owns the curve + the weight.
+     • the moving inked cast is the BD.W-CARTOON-CASTER inert `.cartoon-cast` child
+       (emitted by Button.vue, driven by `--cartoon-press-t × --motion-weight`); its
+       travel/spread/lag recipe lives ONCE in cards.css — composed here, not re-forked.
+
+   The GLYPH overlapping-pop (the label settles a beat AFTER the capsule — child trails
+   parent) REFERENCES the BD.W-TABS-LIQUID glyph scale-pop register: the pop reads the
+   SAME `--motion-weight` scalar via a button-scoped `--btn-glyph-pop` magnitude (the
+   literal lives ONCE here, not re-pasted from the tabs `0.06`), delayed `--duration-fast`
+   so it lags the capsule. Exactly 1 under PRM (`--motion-weight: 0`). */
+.btn-punch {
+    /* anchor the absolute inert `.cartoon-cast` child to THIS host (the glass variants
+       already get `position: relative` from `.glass-wash`; this guarantees it for an
+       opt-in `punch` on a non-glass variant too). */
+    position: relative;
+    --motion-weight: 1;
+    /* the press ramp the inert cast reads at REST (0); Button.vue overrides it live off
+       the spring during the press. */
+    --cartoon-press-t: 0;
+    /* re-point the scale leg onto the cartoon-punch curve (anticipation + overshoot on
+       the release leg); the surface legs stay on the bezier (the §6 doctrine). */
+    transition:
+        scale var(--spring-smooth-duration) var(--ease-cartoon-punch);
+}
+
+/* the glyph overlapping-action pop — the label/icon settles a beat AFTER the capsule
+   (child trails parent). DEPENDS `--motion-weight` (CONSUMED, the tabs glyph-pop idiom);
+   the magnitude literal lives once as `--btn-glyph-pop`. Delayed so it lags. */
+.btn-punch > :not(.cartoon-cast) {
+    --btn-glyph-pop: 0.05;
+    transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast);
+}
+.btn-punch:active > :not(.cartoon-cast) {
+    scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight));
+}
+
+/* PRM carve — under reduced-motion the LOUD register zeroes in ONE assignment (every
+   `calc(… * --motion-weight)` — the cast travel/spread + the glyph pop — collapses to
+   rest) and `--ease-cartoon-punch` degrades to the calm `--ease-standard`; the press
+   still FUNCTIONS (the spring snaps, the squish physics off), the warm capsule fill +
+   rim + lift are STATIC (present for everyone). */
+@media (prefers-reduced-motion: reduce) {
+    .btn-punch {
+        --motion-weight: 0;
+        transition: scale var(--spring-smooth-duration) var(--ease-standard);
+    }
+    .btn-punch > :not(.cartoon-cast) {
+        transition: none;
+    }
+}
+
 /* ── Table density utilities — AN.R0 ─────────────────────────────────────
    `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
    literals in TableCell.vue / TableHead.vue. Both read `--table-density`

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-B8RscmRu.js";
+import { t as e } from "./Switch-uf-UKPA2.js";
 export { e as Switch };