@adia-ai/web-components 0.7.8 → 0.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/colors/parameters.css

@@ -39,14 +39,21 @@
 /* ── Success ── */
 @property --a-success-hue              { syntax: "<number>"; inherits: true; initial-value: 145; }
 @property --a-success-c-min            { syntax: "<number>"; inherits: true; initial-value: 0.02; }
-@property --a-success-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+@property --a-success-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.14; }
 
-/* ── Warning ── */
-@property --a-warning-hue              { syntax: "<number>"; inherits: true; initial-value: 65; }
+/* ── Warning ── (yellow) ── */
+/* Hue rotated 65→88 toward true yellow/gold, enabled by the lightness lift below:
+   at L0.56 hue-88 reads olive, but once -50 rides up to yellow's cusp it reads gold. */
+@property --a-warning-hue              { syntax: "<number>"; inherits: true; initial-value: 70; }
 @property --a-warning-c-min            { syntax: "<number>"; inherits: true; initial-value: 0.02; }
-@property --a-warning-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+@property --a-warning-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.18; }
+/* Per-hue lightness lift. Yellow's OKLCH gamut cusp is ~L0.86, not the ramp's mid
+   L0.56, so the most-saturated step (-50) is a muddy amber. primitives-warning.css
+   adds `+ _sf·_cf·l-lift` to L, tenting lightness up where chroma peaks (mid steps)
+   while leaving the light tints + dark shades anchored. Warning-only; 0 = off. */
+@property --a-warning-l-lift           { syntax: "<number>"; inherits: true; initial-value: 0.6; }
 
 /* ── Danger ── */
-@property --a-danger-hue               { syntax: "<number>"; inherits: true; initial-value: 25; }
+@property --a-danger-hue               { syntax: "<number>"; inherits: true; initial-value: 26; }
 @property --a-danger-c-min             { syntax: "<number>"; inherits: true; initial-value: 0.02; }
-@property --a-danger-c-max             { syntax: "<number>"; inherits: true; initial-value: 0.20; }
+@property --a-danger-c-max             { syntax: "<number>"; inherits: true; initial-value: 0.16; }

package/styles/colors/primitives-warning.css

@@ -7,46 +7,46 @@
 
 :root, theme-ui, [data-theme] {
   /* ── Warning tints (05 lightest → 95 darkest) ── */
-  --a-warning-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-15-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-15) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-20-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-20) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-25-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-25) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-30-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-30) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-35-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-35) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-40-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-40) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-45-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-45) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-50-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-50) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-55-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-55) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-60-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-60) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-65-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-65) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-70-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-70) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-75-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-75) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-80-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-80) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-85-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-85) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-90-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-90) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-95-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-95) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-05) * var(--_cf-05) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-10) * var(--_cf-10) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-15-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-15) * var(--_cf-15) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-15) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-20-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-20) * var(--_cf-20) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-20) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-25-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-25) * var(--_cf-25) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-25) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-30-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-30) * var(--_cf-30) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-30) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-35-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-35) * var(--_cf-35) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-35) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-40-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-40) * var(--_cf-40) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-40) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-45-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-45) * var(--_cf-45) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-45) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-50-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-50) * var(--_cf-50) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-50) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-55-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-55) * var(--_cf-55) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-55) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-60-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-60) * var(--_cf-60) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-60) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-65-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-65) * var(--_cf-65) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-65) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-70-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-70) * var(--_cf-70) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-70) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-75-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-75) * var(--_cf-75) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-75) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-80-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-80) * var(--_cf-80) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-80) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-85-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-85) * var(--_cf-85) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-85) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-90-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-90) * var(--_cf-90) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-90) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-95-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-95) * var(--_cf-95) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-95) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
 
   /* ── Warning shades (05 darkest → 95 lightest) ── */
-  --a-warning-05-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-10-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-15-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-15) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-20-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-20) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-25-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-25) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-30-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-30) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-35-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-35) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-40-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-40) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-45-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-45) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-50-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-50) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-55-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-55) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-60-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-60) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-65-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-65) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-70-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-70) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-75-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-75) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-80-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-80) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-85-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-85) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-90-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-90) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
-  --a-warning-95-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-warning-c-min) + var(--_cf-95) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-05-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-05)) * var(--_cf-05) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-10-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-10)) * var(--_cf-10) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-15-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-15)) * var(--_cf-15) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-15) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-20-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-20)) * var(--_cf-20) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-20) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-25-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-25)) * var(--_cf-25) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-25) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-30-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-30)) * var(--_cf-30) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-30) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-35-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-35)) * var(--_cf-35) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-35) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-40-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-40)) * var(--_cf-40) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-40) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-45-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-45)) * var(--_cf-45) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-45) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-50-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-50)) * var(--_cf-50) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-50) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-55-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-55)) * var(--_cf-55) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-55) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-60-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-60)) * var(--_cf-60) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-60) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-65-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-65)) * var(--_cf-65) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-65) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-70-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-70)) * var(--_cf-70) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-70) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-75-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-75)) * var(--_cf-75) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-75) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-80-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-80)) * var(--_cf-80) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-80) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-85-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-85)) * var(--_cf-85) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-85) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-90-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-90)) * var(--_cf-90) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-90) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
+  --a-warning-95-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min)) + (1 - var(--_sf-95)) * var(--_cf-95) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-95) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
 
   /* ── Coarse surface scale (0-6, linear increment) ── */
   --a-warning-0-tint: oklch(calc(var(--a-color-l-max) - 0 * var(--a-color-surface-increment)) var(--a-warning-c-min) var(--a-warning-hue));

package/styles/colors/semantics/aliases.css

@@ -1,8 +1,10 @@
-/* adia:semantic/color — scrim role aliases + legacy status compat.
-   --a-scrim-* role names, and the STATUS COMPAT block that overrides
-   --a-danger / --a-success to -strong. Imported LAST by the semantics.css
-   barrel — this ordering is load-bearing: these re-declarations must win
-   over the core.css defaults (v0.6.48 reorg, ADR-0035). */
+/* adia:semantic/color — scrim role aliases.
+   --a-scrim-* role names mapping onto the adaptive scrim-0..6 scale in
+   scrims.css. Imported by the semantics.css barrel.
+   (0.7.9: the legacy STATUS COMPAT block that overrode --a-danger /
+   --a-success to -strong was removed — status families now resolve to their
+   base tier deliberately. The base tokens are defined upstream in core.css,
+   so removing the override is non-breaking.) */
 
 :root, theme-ui, [data-theme] {
   /* ══════════════════════════════════════════════════════════════
@@ -16,17 +18,4 @@
   --a-scrim-default: var(--a-neutral-3-shade-scrim);  /* 40% — generic overlay */
   --a-scrim-dialog:  var(--a-neutral-4-shade-scrim);  /* 50% — modal backdrop */
   --a-scrim-strong:  var(--a-neutral-6-shade-scrim);  /* 70% — heaviest veil */
-
-  /* ══════════════════════════════════════════════════════════════
-     STATUS COMPAT — Legacy status shortcuts used by existing
-     components (button, chart, pipeline-status, timeline). Override
-     the L2 "default" shade to match -strong so the pre-reorg visual
-     behavior is preserved. Components should migrate to the L3
-     matrix (--a-danger-bg, --a-success-fg, etc) over time.
-     ══════════════════════════════════════════════════════════════ */
-
-  --a-danger:     var(--a-danger-strong);
-  --a-danger-fg:  var(--a-danger-text-strong);
-  --a-success:    var(--a-success-strong);
-  --a-success-fg: var(--a-success-text-strong);
 }

package/styles/colors/semantics/core.css

@@ -82,7 +82,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-accent-strong:   var(--a-accent-50);
+  --a-accent-strong:   var(--a-accent-60);
   --a-accent:          var(--a-accent-50);
   --a-accent-subtle:   var(--a-accent-20);
   --a-accent-muted:    var(--a-accent-10);
@@ -115,7 +115,7 @@
   --a-accent-border-strong: var(--a-accent-60);
 
   /* L3 — Primary (accent-filled — CTA buttons, checked controls) */
-  --a-primary-bg:           var(--a-accent-strong);
+  --a-primary-bg:           var(--a-accent);
   --a-primary-bg-hover:     var(--a-accent-hover);
   --a-primary-bg-active:    var(--a-accent-active);
 
@@ -147,7 +147,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-brand-strong:   var(--a-brand-70);
+  --a-brand-strong:   var(--a-brand-60);
   --a-brand:          var(--a-brand-50);
   --a-brand-subtle:   var(--a-brand-40);
   --a-brand-muted:    var(--a-brand-30);
@@ -165,7 +165,7 @@
   --a-brand-border-strong: var(--a-brand-60);
 
   /* L3 — Brand surface role matrix */
-  --a-brand-bg:           var(--a-brand-strong);
+  --a-brand-bg:           var(--a-brand);
   --a-brand-bg-hover:     var(--a-brand-hover);
 
   --a-brand-fg:           var(--a-brand-text-strong);
@@ -179,7 +179,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-info-strong:   var(--a-info-50);
+  --a-info-strong:   var(--a-info-60);
   --a-info:          var(--a-info-50);
   --a-info-subtle:   var(--a-info-20);
   --a-info-muted:    var(--a-info-10);
@@ -197,7 +197,7 @@
   --a-info-border-strong: var(--a-info-60);
 
   /* L3 — Info surface role matrix */
-  --a-info-bg:           var(--a-info-strong);
+  --a-info-bg:           var(--a-info);
   --a-info-bg-hover:     var(--a-info-hover);
 
   --a-info-fg:           var(--a-info-text-strong);
@@ -211,7 +211,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-success-strong:   var(--a-success-50);
+  --a-success-strong:   var(--a-success-60);
   --a-success:          var(--a-success-50);
   --a-success-subtle:   var(--a-success-20);
   --a-success-muted:    var(--a-success-10);
@@ -229,7 +229,7 @@
   --a-success-border-strong: var(--a-success-60);
 
   /* L3 — Success surface role matrix */
-  --a-success-bg:           var(--a-success-strong);
+  --a-success-bg:           var(--a-success);
   --a-success-bg-hover:     var(--a-success-hover);
 
   --a-success-fg:           var(--a-success-text-strong);
@@ -243,7 +243,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-warning-strong:   var(--a-warning-50);
+  --a-warning-strong:   var(--a-warning-60);
   --a-warning:          var(--a-warning-50);
   --a-warning-subtle:   var(--a-warning-20);
   --a-warning-muted:    var(--a-warning-10);
@@ -271,7 +271,7 @@
      `--a-warning-20-tint` is bright in both schemes (lightness math
      is scheme-independent) so warning surfaces keep the same
      caution-tape look in light + dark mode. */
-  --a-warning-bg:           var(--a-warning-20-tint);
+  --a-warning-bg:           var(--a-warning);
   --a-warning-bg-hover:     var(--a-warning-hover);
 
   --a-warning-fg:           var(--a-warning-text-strong);
@@ -285,7 +285,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* L2 — family tokens */
-  --a-danger-strong:   var(--a-danger-50);
+  --a-danger-strong:   var(--a-danger-60);
   --a-danger:          var(--a-danger-50);
   --a-danger-subtle:   var(--a-danger-20);
   --a-danger-muted:    var(--a-danger-10);
@@ -305,7 +305,7 @@
   --a-danger-border-strong: var(--a-danger-60);
 
   /* L3 — Danger surface role matrix */
-  --a-danger-bg:           var(--a-danger-strong);
+  --a-danger-bg:           var(--a-danger);
   --a-danger-bg-hover:     var(--a-danger-hover);
 
   --a-danger-fg:           var(--a-danger-text-strong);

package/styles/components.css

@@ -47,6 +47,7 @@
 @import "../components/timeline/timeline.css";
 @import "../components/upload/upload.css";
 @import "../components/card/card.css";
+@import "../components/frame/frame.css";
 @import "../components/avatar/avatar.css";
 @import "../components/progress/progress.css";
 @import "../components/skeleton/skeleton.css";

package/styles/verse.css

@@ -27,7 +27,7 @@
    --a-size-*.
 
    NOTE: type sizes below the spacing anchors (body 11/12/13, control
-   18/20/24) are DEDUCED — proposed compact scale, tune to taste.
+   20/24/28) are DEDUCED — proposed compact scale, tune to taste.
    ═══════════════════════════════════════════════════════════════ */
 
 /* `context` layer (ADR-0038 step 7) — sits above utilities+components. */
@@ -50,7 +50,7 @@
     /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
        clamps so they resolve verse's min/max (base clamps compute at :root). ── */
     --a-radius-min: 0.25rem; /* 4px */
-    --a-radius-max: 1rem;    /* 16px */
+    --a-radius-max: 0.75rem;    /* 16px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
@@ -58,28 +58,29 @@
     --a-radius: var(--a-radius-md);
 
     /* ── Control sizing — smaller (explicit tier rules below) ── */
-    --a-size-sm: calc(var(--a-density) * 1.125rem); /* 18px */
-    --a-size-md: calc(var(--a-density) * 1.25rem);  /* 20px */
-    --a-size-lg: calc(var(--a-density) * 1.5rem);   /* 24px */
+    --a-size-sm: calc(var(--a-density) * 1.250rem); /* 20px */
+    --a-size-md: calc(var(--a-density) * 1.500rem); /* 24px */
+    --a-size-lg: calc(var(--a-density) * 1.750rem); /* 28px */
     --a-size: var(--a-size-md);
 
     /* ── Icon / caret — shifted down one tier so chrome tracks verse's
        smaller type + controls. The select/combobox caret is an <icon-ui>
        reading --a-icon-size; CSS-drawn carets (calendar / nav-group / pane)
-       read --a-caret-size — both shrink here. md = regular-sm (14/12),
-       lg = regular-md (16/14), sm one below (12/10). Like --a-size, these
+       read --a-caret-size — both shrink here. Bumped +1 tier (0.7.9 control
+       bump) to track the larger 20/24/28 controls: md = 16/14, lg = 18/16,
+       sm = 14/12. Like --a-size, these
        need explicit [size] tier rules below: the global [size] icon/caret
        rules live in the utilities layer, which `context` shadows. ── */
-    --a-icon-size: 14px;
-    --a-caret-size: 12px;
+    --a-icon-size: 16px;
+    --a-caret-size: 14px;
 
     /* ── Toggle (check / radio / switch) chrome — one tier down like inset +
-       --a-size, on clean space rungs. Regular toggle is 16/20/24 (size.css:28
-       + sizing.css:66/96); verse md = regular-sm = 16. The explicit [size]
+       --a-size, on clean space rungs. Bumped +1 tier with the 0.7.9 control
+       bump → verse toggle 16/20/24 (= --a-space-4/5/6). The explicit [size]
        tier rules below are REQUIRED for the same reason --a-size needs them:
        this context-layer base value pins the token, so the lower-layer global
        [size] --a-toggle-size rules can't reach a verse subtree on their own. ── */
-    --a-toggle-size: var(--a-space-4); /* 16px @d=1 — regular-sm tier */
+    --a-toggle-size: var(--a-space-5); /* 20px @d=1 — md (bumped +1 tier, 0.7.9) */
 
     /* ── Typography — compact register (deduced; static, no fluid clamps;
        floored at 10px). VALUES only — pointers live under :not([size]). ── */
@@ -108,10 +109,10 @@
      roles → -sm, text/data roles → -md. The global [size] rules override these
      on [size]-bearing elements (resolving verse's sm/lg token values). */
   [verse]:not([size]) {
-    --a-display-size: var(--a-display-sm);
-    --a-title-size: var(--a-title-sm);
-    --a-heading-size: var(--a-heading-sm);
-    --a-section-size: var(--a-section-sm);
+    --a-display-size: var(--a-display-md);
+    --a-title-size: var(--a-title-md);
+    --a-heading-size: var(--a-heading-md);
+    --a-section-size: var(--a-section-md);
     --a-subsection-size: var(--a-subsection-md);
     --a-body-size: var(--a-body-md);
     --a-deck-size: var(--a-deck-md);
@@ -130,17 +131,17 @@
     --a-inset: var(--a-inset-lg);
     --a-gap: var(--a-gap-lg);
     --a-size: var(--a-size-lg);
-    --a-icon-size: 16px;
-    --a-caret-size: 14px;
-    --a-toggle-size: var(--a-space-5); /* 20px @d=1 — regular-md tier */
+    --a-icon-size: 18px;
+    --a-caret-size: 16px;
+    --a-toggle-size: var(--a-space-6); /* 24px @d=1 — lg (bumped +1 tier) */
   }
   [verse][size="sm"],
   [verse] [size="sm"] {
     --a-inset: var(--a-inset-sm);
     --a-gap: var(--a-gap-sm);
     --a-size: var(--a-size-sm);
-    --a-icon-size: 12px;
-    --a-caret-size: 10px;
-    --a-toggle-size: var(--a-space-3); /* 12px @d=1 — one below regular-sm */
+    --a-icon-size: 14px;
+    --a-caret-size: 12px;
+    --a-toggle-size: var(--a-space-4); /* 16px @d=1 — sm (bumped +1 tier) */
   }
 }