@adia-ai/web-components 0.8.30 → 0.8.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.30",
+  "version": "0.8.32",
   "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/api/sizing-fallback.css

@@ -0,0 +1,32 @@
+/* adia:attribute-api/sizing-fallback — the [size] TYPOGRAPHIC FALLBACK.
+   Split out of api/sizing.css (gh#790 / ADR-0038).
+
+   This is the one declaration from the [size] system that behaves like a
+   native-element default, not a utility override: it gives a plain element
+   (a bare <div size="sm">, a <p size="lg"> used as running text) a
+   font-size when [size] is set directly on it and nothing else claims the
+   property. It must LOSE to any size-aware component's own font-size
+   (button-ui, kbd-ui, tag-ui, badge-ui, input-ui, nav-item-ui, …) — the
+   same relationship type/elements.css's :where(h1) etc. have to component
+   / [variant] rules — so it lives in `elements`, one layer BELOW
+   `components`, not alongside the rest of sizing.css's rules in
+   `utilities` (ADR-0038: reset, tokens, elements, components, utilities,
+   context, overrides — a later layer beats an earlier one regardless of
+   specificity).
+
+   gh#790: bundled into sizing.css's `layer(utilities)` import, this rule
+   out-competed every size-aware component's own font-size by LAYER ORDER
+   (utilities > components), not specificity — so no :where()/:not() wrap
+   *inside* sizing.css could have fixed it (a layer beats specificity
+   entirely; see ADR-0038's `resets.css` `ul/ol[role="list"]` lesson —
+   "unlayered/later-layer beats layered/earlier-layer regardless of
+   specificity"). Only a layer move fixes a layer-order defect.
+
+   The size-TIER rules ([size="sm"/"lg"] setting --a-*-size etc. tokens)
+   stay in api/sizing.css / `utilities`: they set custom properties, which
+   resolve through each consumer's OWN font-size declaration by ordinary
+   inheritance and are not part of this contest. */
+
+[size] {
+  font-size: var(--a-body-size);
+}

package/styles/api/sizing.css

@@ -55,11 +55,15 @@
      <button-ui size="sm">            — compact button
      <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
      <div size="sm">...</div>        — everything inside scales down
+
+   The bare-[size] font-size FALLBACK (for elements with no font-size
+   opinion of their own, e.g. a plain <div size="sm">) lives in
+   ./sizing-fallback.css / `layer(elements)`, not here — it must lose to
+   every size-aware component's own font-size by layer order, which a
+   `utilities`-layer rule can never do regardless of specificity or
+   :where()/:not() wrapping (gh#790 / ADR-0038).
    ═══════════════════════════════════════════════════════════════ */
 /* ── sm — dense data UIs, sidebars, inspectors ── */
-[size] {
-  font-size: var(--a-body-size);
-}
 [size="sm"] {
   /* Component */
   --a-size: calc(var(--a-density) * 1.5rem);

package/styles/components.css

@@ -18,6 +18,7 @@
 @import "../components/textarea/textarea.css";
 @import "../components/check/check.css";
 @import "../components/radio/radio.css";
+@import "../components/radio-group/radio-group.css";
 @import "../components/option-card/option-card.css";
 @import "../components/switch/switch.css";
 @import "../components/slider/slider.css";

package/styles/tokens.css

@@ -19,4 +19,5 @@
 @import "./typography.css";
 @import "./foundation/index.css" layer(tokens);
 @import "./api/sizing.css" layer(utilities);
+@import "./api/sizing-fallback.css" layer(elements);   /* gh#790 — the [size] font-size FALLBACK; must lose to `components`, so it is NOT bundled into sizing.css's `utilities` import */
 @import "./api/parametric-scope.css" layer(utilities);