@adia-ai/web-components 0.7.1 → 0.7.3

package/package.json

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

@@ -117,54 +117,90 @@
   --a-code-size: var(--a-code-lg);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   [gap] — the EXPLICIT per-element gap (a spatial Scale attr).
+
+   Sets --a-gap-self, a NON-inheriting token, so an explicit gap on a
+   parent does NOT leak into nested layout primitives. This is the
+   counterpart to --a-gap, the AMBIENT gap set by [size]/[prose]/:root
+   (which DOES inherit — `<div size="sm">` shifts the whole subtree).
+   Gap-reading components resolve `var(--a-gap-self, var(--a-gap))`:
+   explicit-if-present, else fall through to the inherited ambient.
+   Design: docs/specs/attribute-api-system.md §5.2 (ADR-0038 / D2).
+
+   syntax:"*" (NOT "<length>") is load-bearing: a universal-syntax
+   @property may omit initial-value, leaving the token genuinely
+   *unset-able* (guaranteed-invalid when not set) — so the fallback to
+   --a-gap fires for elements without [gap]. A typed @property carries a
+   mandatory initial-value that always-resolves and would mask the
+   ambient. inherits:false stops the leak (audit C3).
+   ═══════════════════════════════════════════════════════════════ */
+@property --a-gap-self {
+  syntax: "*";
+  inherits: false;
+}
+
 [gap="0"] {
-  --a-gap: 0;
+  --a-gap-self: 0;
 }
 [gap="1"] {
-  --a-gap: var(--a-space-1);
+  --a-gap-self: var(--a-space-1);
 }
 [gap="2"] {
-  --a-gap: var(--a-space-2);
+  --a-gap-self: var(--a-space-2);
 }
 [gap="3"] {
-  --a-gap: var(--a-space-3);
+  --a-gap-self: var(--a-space-3);
 }
 [gap="4"] {
-  --a-gap: var(--a-space-4);
+  --a-gap-self: var(--a-space-4);
 }
 [gap="5"] {
-  --a-gap: var(--a-space-5);
+  --a-gap-self: var(--a-space-5);
 }
 [gap="6"] {
-  --a-gap: var(--a-space-6);
+  --a-gap-self: var(--a-space-6);
 }
 [gap="7"] {
-  --a-gap: var(--a-space-7);
+  --a-gap-self: var(--a-space-7);
 }
 [gap="8"] {
-  --a-gap: var(--a-space-8);
+  --a-gap-self: var(--a-space-8);
 }
 [gap="9"] {
-  --a-gap: var(--a-space-9);
+  --a-gap-self: var(--a-space-9);
 }
 [gap="10"] {
-  --a-gap: var(--a-space-10);
+  --a-gap-self: var(--a-space-10);
 }
 [gap="12"] {
-  --a-gap: var(--a-space-12);
+  --a-gap-self: var(--a-space-12);
 }
 [gap="16"] {
-  --a-gap: var(--a-space-16);
+  --a-gap-self: var(--a-space-16);
 }
 
+/* Named scale — the semantic, parametric gap vocabulary (xs/sm/md/lg/xl).
+   References the --a-gap-* tokens (foundation/space.css) so explicit
+   [gap="md"] AGREES with the ambient ([size]) and responsive (JS _gapToCss)
+   paths — all resolve to --a-gap-md — and tracks the --a-gap-k knob. This is
+   distinct from the integer rules above, which are LITERAL space-rungs
+   (k-independent). At k=1 the two grammars coincide: xs=1, sm=2, md=3,
+   lg=4, xl=5. (C1/C2 resolution — two coherent grammars, not one deprecated.) */
+[gap="xs"] {
+  --a-gap-self: var(--a-gap-xs);
+}
 [gap="sm"] {
-  --a-gap: var(--a-space-4);
+  --a-gap-self: var(--a-gap-sm);
 }
 [gap="md"] {
-  --a-gap: var(--a-space-6);
+  --a-gap-self: var(--a-gap-md);
 }
 [gap="lg"] {
-  --a-gap: var(--a-space-8);
+  --a-gap-self: var(--a-gap-lg);
+}
+[gap="xl"] {
+  --a-gap-self: var(--a-gap-xl);
 }
 
 /* ── Universal [padding] / [margin] — same scale as [gap]. Layout

package/styles/foundation/space.css

@@ -11,6 +11,16 @@
   initial-value: 1;
 }
 
+/* Gap-scale knob — scales the k-driven half of every named gap
+   (--a-gap-{xs,sm,md,lg,xl}). k=1 (default) = baseline scale; <1 tightens
+   toward the floor, >1 loosens. Inherits, so set it at a provider boundary
+   (e.g. style="--a-gap-k:1.5") to retune all named gaps in a subtree. */
+@property --a-gap-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
 :root {
   /* ── Spacing ── */
   --a-space-0: 0;
@@ -39,9 +49,15 @@
   --a-inset-lg: var(--a-space-6);
   --a-inset: var(--a-inset-md);
 
-  /* ── Gaps ── */
-  --a-gap-sm: var(--a-space-2);
-  --a-gap-md: var(--a-space-3);
-  --a-gap-lg: var(--a-space-4);
+  /* ── Gaps — parametric named scale (half + half·k). Each token is a
+     fixed floor (half its k=1 value) plus a k-scaled half, so --a-gap-k
+     loosens/tightens the whole named scale while never collapsing below the
+     floor. At k=1: 4 / 8 / 12 / 16 / 20px. Composes on top of --a-density
+     (baked into --a-space-*). See styles/api/sizing.css + spec §5.2. ── */
+  --a-gap-xs: calc(var(--a-space-0-5) + var(--a-space-0-5) * var(--a-gap-k)); /*  4px @k=1 */
+  --a-gap-sm: calc(var(--a-space-1)   + var(--a-space-1)   * var(--a-gap-k)); /*  8px @k=1 */
+  --a-gap-md: calc(var(--a-space-1-5) + var(--a-space-1-5) * var(--a-gap-k)); /* 12px @k=1 */
+  --a-gap-lg: calc(var(--a-space-2)   + var(--a-space-2)   * var(--a-gap-k)); /* 16px @k=1 */
+  --a-gap-xl: calc(var(--a-space-2-5) + var(--a-space-2-5) * var(--a-gap-k)); /* 20px @k=1 */
   --a-gap: var(--a-gap-md);
 }

package/styles/prose.css

@@ -29,10 +29,13 @@
   --a-inset-lg:    var(--a-space-10);
   --a-inset:       var(--a-inset-md);
 
-  /* ── Gaps — shifted up the space scale ── */
-  --a-gap-sm:      var(--a-space-3);
-  --a-gap-md:      var(--a-space-4);
-  --a-gap-lg:      var(--a-space-5);
+  /* ── Gaps — prose register, one rung up; same parametric (half + half·k)
+     form as foundation, tracking --a-gap-k. At k=1: 8/12/16/20/24px. ── */
+  --a-gap-xs:      calc(var(--a-space-1)   + var(--a-space-1)   * var(--a-gap-k)); /*  8px @k=1 */
+  --a-gap-sm:      calc(var(--a-space-1-5) + var(--a-space-1-5) * var(--a-gap-k)); /* 12px @k=1 */
+  --a-gap-md:      calc(var(--a-space-2)   + var(--a-space-2)   * var(--a-gap-k)); /* 16px @k=1 */
+  --a-gap-lg:      calc(var(--a-space-2-5) + var(--a-space-2-5) * var(--a-gap-k)); /* 20px @k=1 */
+  --a-gap-xl:      calc(var(--a-space-3)   + var(--a-space-3)   * var(--a-gap-k)); /* 24px @k=1 */
   --a-gap:         var(--a-gap-md);
 
   /* ── Sizing — larger controls ── */

package/styles/type/roles.css

@@ -6,6 +6,10 @@
    type/elements.css) — safe because [variant] is (0,1,0) and native
    element defaults are :where() (0,0,0); specificity decides, not order. */
 
+/* Role tokens → `tokens` layer — completes the tokens layer the @layer migration
+   deferred (ADR-0038). Behavior-neutral: each token is declared once, so layer
+   assignment can't change resolution. */
+@layer tokens {
 :root {
   /* ═══════════════════════════════════════════════════════════
      L3 ROLES — 13 roles across 6 jobs
@@ -246,6 +250,7 @@
      + expressive hero + standard body.
      ═══════════════════════════════════════════════════════════ */
 }
+} /* @layer tokens — role tokens */
 
 /* ═══════════════════════════════════════════════════════════
    VARIANT ATTRIBUTE — applies typography roles to any element.

package/styles/typography.css

@@ -58,7 +58,7 @@
    api/{text,layout}.css (v0.6.48 foundation reorg, ADR-0035). The imports
    below reproduce the historical cascade order exactly. */
 
-@import "./type/scale.css";    /* L1/L2 — families, weights, leading, tracking */
+@import "./type/scale.css" layer(tokens);    /* L1/L2 — families, weights, leading, tracking → tokens layer (ADR-0038) */
 @import "./type/roles.css";    /* L3   — 13 roles + h1-h6 + [variant] */
 @import "./type/elements.css" layer(elements); /* native element defaults → elements layer (ADR-0038 step 4) */
 @import "./api/text.css" layer(utilities);      /* [text-align][weight][color][transform][truncate] → utilities (ADR-0038 step 6) */