@adia-ai/web-components 0.8.16 → 0.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "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/material-static.css

@@ -81,6 +81,11 @@
   --md-sys-color-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-600), var(--md-sys-color-neutral-500-600));
   --md-sys-color-neutral-on-neutral: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
   --md-sys-color-neutral-on-neutral-variant: light-dark(var(--md-sys-color-neutral-200), var(--md-sys-color-neutral-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-neutral-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-neutral-on-neutral-container: light-dark(var(--md-sys-color-neutral-950), var(--md-sys-color-neutral-200));
   --md-sys-color-neutral-on-neutral-hover: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
   --md-sys-color-neutral-on-neutral-active: light-dark(var(--md-sys-color-neutral-050), var(--md-sys-color-neutral-050));
   --md-sys-color-neutral-on-neutral-disabled: light-dark(var(--md-sys-color-neutral-500-400), var(--md-sys-color-neutral-500-400));
@@ -173,6 +178,11 @@
   --md-sys-color-primary-disabled: light-dark(var(--md-sys-color-primary-500-600), var(--md-sys-color-primary-500-600));
   --md-sys-color-primary-on-primary: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
   --md-sys-color-primary-on-primary-variant: light-dark(var(--md-sys-color-primary-200), var(--md-sys-color-primary-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-primary-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-primary-on-primary-container: light-dark(var(--md-sys-color-primary-950), var(--md-sys-color-primary-200));
   --md-sys-color-primary-on-primary-hover: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
   --md-sys-color-primary-on-primary-active: light-dark(var(--md-sys-color-primary-050), var(--md-sys-color-primary-050));
   --md-sys-color-primary-on-primary-disabled: light-dark(var(--md-sys-color-primary-500-400), var(--md-sys-color-primary-500-400));
@@ -265,6 +275,11 @@
   --md-sys-color-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-600), var(--md-sys-color-secondary-500-600));
   --md-sys-color-secondary-on-secondary: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
   --md-sys-color-secondary-on-secondary-variant: light-dark(var(--md-sys-color-secondary-200), var(--md-sys-color-secondary-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-secondary-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-secondary-on-secondary-container: light-dark(var(--md-sys-color-secondary-950), var(--md-sys-color-secondary-200));
   --md-sys-color-secondary-on-secondary-hover: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
   --md-sys-color-secondary-on-secondary-active: light-dark(var(--md-sys-color-secondary-050), var(--md-sys-color-secondary-050));
   --md-sys-color-secondary-on-secondary-disabled: light-dark(var(--md-sys-color-secondary-500-400), var(--md-sys-color-secondary-500-400));
@@ -357,6 +372,11 @@
   --md-sys-color-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-600), var(--md-sys-color-tertiary-500-600));
   --md-sys-color-tertiary-on-tertiary: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
   --md-sys-color-tertiary-on-tertiary-variant: light-dark(var(--md-sys-color-tertiary-200), var(--md-sys-color-tertiary-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-tertiary-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-tertiary-on-tertiary-container: light-dark(var(--md-sys-color-tertiary-950), var(--md-sys-color-tertiary-200));
   --md-sys-color-tertiary-on-tertiary-hover: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
   --md-sys-color-tertiary-on-tertiary-active: light-dark(var(--md-sys-color-tertiary-050), var(--md-sys-color-tertiary-050));
   --md-sys-color-tertiary-on-tertiary-disabled: light-dark(var(--md-sys-color-tertiary-500-400), var(--md-sys-color-tertiary-500-400));
@@ -449,6 +469,11 @@
   --md-sys-color-info-disabled: light-dark(var(--md-sys-color-info-500-600), var(--md-sys-color-info-500-600));
   --md-sys-color-info-on-info: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
   --md-sys-color-info-on-info-variant: light-dark(var(--md-sys-color-info-200), var(--md-sys-color-info-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-info-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-info-on-info-container: light-dark(var(--md-sys-color-info-950), var(--md-sys-color-info-200));
   --md-sys-color-info-on-info-hover: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
   --md-sys-color-info-on-info-active: light-dark(var(--md-sys-color-info-050), var(--md-sys-color-info-050));
   --md-sys-color-info-on-info-disabled: light-dark(var(--md-sys-color-info-500-400), var(--md-sys-color-info-500-400));
@@ -541,6 +566,11 @@
   --md-sys-color-success-disabled: light-dark(var(--md-sys-color-success-500-600), var(--md-sys-color-success-500-600));
   --md-sys-color-success-on-success: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
   --md-sys-color-success-on-success-variant: light-dark(var(--md-sys-color-success-200), var(--md-sys-color-success-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-success-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-success-on-success-container: light-dark(var(--md-sys-color-success-950), var(--md-sys-color-success-200));
   --md-sys-color-success-on-success-hover: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
   --md-sys-color-success-on-success-active: light-dark(var(--md-sys-color-success-050), var(--md-sys-color-success-050));
   --md-sys-color-success-on-success-disabled: light-dark(var(--md-sys-color-success-500-400), var(--md-sys-color-success-500-400));
@@ -633,6 +663,11 @@
   --md-sys-color-warning-disabled: light-dark(var(--md-sys-color-warning-500-600), var(--md-sys-color-warning-500-600));
   --md-sys-color-warning-on-warning: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
   --md-sys-color-warning-on-warning-variant: light-dark(var(--md-sys-color-warning-200), var(--md-sys-color-warning-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-warning-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-warning-on-warning-container: light-dark(var(--md-sys-color-warning-950), var(--md-sys-color-warning-200));
   --md-sys-color-warning-on-warning-hover: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
   --md-sys-color-warning-on-warning-active: light-dark(var(--md-sys-color-warning-050), var(--md-sys-color-warning-050));
   --md-sys-color-warning-on-warning-disabled: light-dark(var(--md-sys-color-warning-500-400), var(--md-sys-color-warning-500-400));
@@ -725,6 +760,11 @@
   --md-sys-color-danger-disabled: light-dark(var(--md-sys-color-danger-500-600), var(--md-sys-color-danger-500-600));
   --md-sys-color-danger-on-danger: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
   --md-sys-color-danger-on-danger-variant: light-dark(var(--md-sys-color-danger-200), var(--md-sys-color-danger-200));
+  /* tonal text (gh#434): dark in-family text on the translucent container fill.
+     light leg = the 950 stop (measured 10.2-15.2:1 over container/-hover/-active
+     composited on the page bg); dark leg = the 200 stop, on-danger-variant's own
+     dark leg (measured 5.6-9.2:1). Gate: verify:contrast §on-container pairs. */
+  --md-sys-color-danger-on-danger-container: light-dark(var(--md-sys-color-danger-950), var(--md-sys-color-danger-200));
   --md-sys-color-danger-on-danger-hover: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
   --md-sys-color-danger-on-danger-active: light-dark(var(--md-sys-color-danger-050), var(--md-sys-color-danger-050));
   --md-sys-color-danger-on-danger-disabled: light-dark(var(--md-sys-color-danger-500-400), var(--md-sys-color-danger-500-400));

package/styles/colors/semantics/core.css

@@ -53,7 +53,7 @@
   --a-canvas-muted:    var(--md-sys-color-neutral-surface-dimmer);
   --a-canvas-hover:    var(--md-sys-color-neutral-hover);
   --a-canvas-active:   var(--md-sys-color-neutral-active);
-  --a-canvas-selected: var(--md-sys-color-neutral-container-active);
+  --a-canvas-selected: var(--md-sys-color-neutral-container); /* same tier as --a-bg-selected — see its note */
 
   /* Text on neutral surfaces — Material's on-surface family has 3 tiers
      (on-surface / on-surface-variant / on-surface-disabled), compressing
@@ -95,7 +95,13 @@
   --a-bg-strong:       var(--md-sys-color-neutral-surface-high);
   --a-bg-hover:        var(--md-sys-color-neutral-hover);
   --a-bg-active:       var(--md-sys-color-neutral-active);
-  --a-bg-selected:     var(--md-sys-color-neutral-container-active);
+  /* selected rides the plain -container stop (20%) — the SAME tier as
+     button variant="tonal"'s rest fill (operator ruling 2026-07-27), so
+     "selected" and "tonal" read as one surface language. The ladder
+     around it: hover = container-low (10%), selected/tonal rest =
+     container (20%), tonal hover = container-hover (30%). Was
+     container-active (40%), which overshot the rest tier. */
+  --a-bg-selected:     var(--md-sys-color-neutral-container);
   --a-bg-disabled:     var(--md-sys-color-neutral-container-disabled);
   --a-bg-invalid:      var(--a-danger-muted);
 

package/styles/type/roles.css

@@ -305,7 +305,17 @@
   text-transform: var(--a-heading-case);
   color: var(--a-heading-color);
 }
-[variant="section"] {
+/* :not(nav-*): the nav family's [variant="section"] is STRUCTURAL (the
+   flat subnav-rail tier — nav.yaml, nav-item.yaml, nav-group.yaml), not a
+   typographic role, but this attribute selector matches any element. The
+   exclusion must live HERE: this rule is in @layer utilities, component
+   sheets load in the earlier @layer components (styles/index.css), so a
+   later-layer match beats anything a component declares about itself —
+   nav cannot defend its own text. Seen live: nav rails rendering the
+   theme's display face (e.g. velour's Playfair) at heading weight.
+   text-ui is deliberately NOT excluded — its variant enum aligns with
+   this grammar on purpose. */
+[variant="section"]:not(nav-ui, nav-item-ui, nav-group-ui) {
   font-family: var(--a-section-family);
   font-weight: var(--a-section-weight);
   font-size: var(--a-section-size);