@mkbabb/glass-ui 3.7.0 → 3.9.0

package/src/styles/index.css

@@ -60,10 +60,15 @@
  *                              over the glass tiers.
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — dock shell / density / grain / layer-crossfade
- *                              contract + the shared cross-control four-state
- *                              comma-groups. Component utility layer; consumes
- *                              (1) + (3).
+ *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
+ *                              registration, the shared cross-control four-state
+ *                              comma-groups, and the `@import`s of the cohesive
+ *                              `dock/*.css` partials (shell · morph · density ·
+ *                              layers · layer-group · overflow — AX.W06 carved
+ *                              the 1762-line god-module into single-axis partials,
+ *                              each < 500 lines, all in the SAME @layer components
+ *                              so the cascade is isomorphic). Component utility
+ *                              layer; consumes (1) + (3).
  *  6b. dock-controls.css     — the five dock CONTROL families carved out of
  *                              dock.css (AU.W8b.3): .dock-icon-button,
  *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
@@ -99,13 +104,11 @@
  *                              binding + bezel hairlines + sibling divider
  *                              rule). Composes alongside instrument-chassis;
  *                              shares the bezel-line twin-pixel idiom.
- *  14. glyph-face.css        — P-tranche component CSS (cap + backplate).
- *  15. disco-glyph.css       — P-tranche component CSS (layered fills).
- *  16. hover-popover.css     — V.W3 popover-animation grammar.
- *  17. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  14. hover-popover.css     — V.W3 popover-animation grammar.
+ *  15. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
  *
- * Per-package component CSS lives at (12)-(17) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(15) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -127,8 +130,6 @@
 @import "./utilities.css";
 @import "./instrument-chassis.css";
 @import "./instrument-rail.css";
-@import "./glyph-face.css";
-@import "./disco-glyph.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
 

package/src/styles/theme.css

@@ -62,6 +62,50 @@
        The density-scaled --dock-card-radius (dock.css) resolves through this. */
     --radius-dock-card: var(--radius-3xl);
     --radius-tooltip: var(--radius-lg);
+
+    /* ── AX.W56 — the corner-SHAPE axis (parallel to the corner-RADIUS ladder above).
+       `corner-shape` only changes the CURVE within the `border-radius` box; the
+       region is still the `--radius-*` token. These are plain @theme (the radius
+       siblings' rationale applies — each alias is its own override point, and the
+       semantic shapes are value-identical keywords that must not collapse under
+       inline). Chrome 139+ only (~65% global May 2026); the un-gated `border-radius`
+       round stays the cross-engine CONTRACT and the `@supports (corner-shape:
+       superellipse(2))` gate (glass.css/dock.css) is the PE tier. NEVER make
+       corner-shape the contract — Safari/Firefox have no positive signal through 2026.
+
+       Superellipse exponent (MDN authoritative): `superellipse(K)` paints
+       |x|^(2K) + |y|^(2K) = 1, so the curve exponent n = 2K. The CSS `squircle`
+       keyword == `superellipse(2)` == n=4 — the iOS-idiomatic web squircle. The
+       k-PRIMITIVE band (a consumer dials 1.7–2.4 to taste; W42's dock-morph calc()s
+       its animated k against this ONE vocabulary — do not re-define a second k). */
+    --corner-k-squircle: 2;   /* the squircle — superellipse(2), n=4               */
+    --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
+    --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
+
+    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY.
+       Cards, pills/buttons, small docks, and panels stay ROUND (the superellipse is
+       imperceptible at a 16px card radius or a stadium pill — dropping it there is
+       visually free). The big-dock card shell (the large --radius-dock-card / 24px
+       surface) is the one site where the squircle READS — the iOS-26 idiom the dock
+       wants. A consumer opts an additional large-radius surface in by re-pointing its
+       `--corner-shape-<surface>` at `superellipse(var(--corner-k-squircle))`. */
+    --corner-shape-card:    round;
+    --corner-shape-pill:    round;
+    --corner-shape-panel:   round;
+    --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
+    /* AX.W56(R1) — the overlay-band glass surfaces W54 makes glass-default
+       (Dialog + Sheet content) ride the squircle alongside the big-dock. They
+       sit at the large `--radius-dialog` (16px) modal radius where the
+       superellipse READS — the same iOS-26 idiom. @supports-gated in glass.css
+       over the `border-radius` round CONTRACT; a consumer dials either back to
+       round by re-pointing the alias. */
+    --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
+    --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
+    /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
+       (the iOS color-picker idiom). It rides the same --corner-k-squircle
+       vocabulary; @supports-gated in Slider.vue over a --radius-* round
+       fallback. A consumer dials it to round (a circular knob) or to soft. */
+    --corner-shape-thumb:   superellipse(var(--corner-k-squircle));
 }
 
 @theme inline {
@@ -77,6 +121,13 @@
     --text-subheading:  var(--type-subheading);
     --text-heading:     var(--type-heading);
     --text-title:       var(--type-title);
+    /* AX.W50 D17 — the picker-family type-scale → `text-dropdown` /
+       `text-dropdown-secondary` utilities, bridging the `--dropdown-text` token pair
+       (tokens.css §10, a specialization of W51's `--control-text` comfort register)
+       so a Tailwind `text-dropdown` utility resolves the family scale. Mirrors the
+       `--text-small: var(--type-small)` ladder-bridge idiom above. */
+    --text-dropdown:           var(--dropdown-text);
+    --text-dropdown-secondary: var(--dropdown-text-secondary);
     --text-display:     var(--type-display-1);
     --text-display-1:   var(--type-display-1);
     --text-display-2:   var(--type-display-2);
@@ -103,9 +154,17 @@
 
     /* ═══════════════════════════════════════════════
        Font families → font-* utilities
+
+       ONE brand register, bridged from tokens.css §0's --font-stack-* source.
+       --font-text is the body/heading/prose/display register (Plus Jakarta
+       Sans). --font-serif is a bridge alias for the demo configurator's "serif"
+       control slot — it resolves to the SAME text register (the library carries
+       no display-serif voice). A consumer rebrands the whole text register by
+       overriding --font-text once.
        ═══════════════════════════════════════════════ */
+    --font-text:    var(--font-stack-text);
     --font-display: var(--font-stack-display);
-    --font-serif:   var(--font-stack-serif);
+    --font-serif:   var(--font-stack-text);
     --font-sans:    var(--font-stack-sans);
     --font-mono:    var(--font-stack-mono);
 
@@ -358,7 +417,6 @@
     --ease-in: var(--motion-ease-in);
     --ease-out-expo: var(--motion-ease-out-expo);
     --ease-apple: var(--motion-ease-apple);
-    --ease-apple-spring: var(--motion-ease-apple-spring);
     --ease-spring: var(--spring-snappy);
     --ease-decelerate: var(--motion-ease-out);
     --ease-accelerate: var(--motion-ease-in);