@adia-ai/web-components 0.6.50 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.50",
+  "version": "0.7.0",
   "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",
@@ -115,7 +115,7 @@
     "./core/icons-phosphor.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-runtime": "^0.6.0",
+    "@adia-ai/a2ui-runtime": "^0.7.0",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/language": "^6.12.3",
     "@codemirror/lint": "^6.9.5",
@@ -124,7 +124,7 @@
     "@lezer/highlight": "^1.2.3"
   },
   "optionalDependencies": {
-    "@adia-ai/web-modules": "^0.6.0",
+    "@adia-ai/web-modules": "^0.7.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.5",

package/styles/api/layout.css

@@ -17,3 +17,10 @@
   flex: 1;
   min-width: 0;
 }
+
+/* [inline] — display-flip to inline-level. Deliberately NOT a global rule here:
+   it must override each component's own `:scope{display}` (specificity 0,1,0),
+   so it lives per-component as `:scope[inline]` (0,2,0) inside each @scope. A
+   bare global `[inline]` would tie and be cascade-order-fragile. Block-level is
+   the default for composite/control/container primitives; text-flow atoms stay
+   inline. See ADR-0037 + docs/specs/attribute-api-system.md §5. */

package/styles/api/text.css

@@ -7,11 +7,15 @@
    GLOBAL PRESENTATIONAL ATTRIBUTES
    Work on any element. Attribute-driven, not class-based.
 
-   NOTE: These have lower specificity than @scope component CSS.
-   Using [weight="bold"] on a component like <text-ui> will be
-   overridden by the component's own font-weight rule. Use these
-   on plain elements (<span>, <p>, <div>) or choose the right
-   [variant] instead.
+   PRECEDENCE (ADR-0038): these attributes are the `utilities` layer
+   (currently unlayered, → a named `utilities` layer in migration step 6),
+   which sits ABOVE the `components` layer in cascade order. So
+   [weight="bold"] on a component like <text-ui> now OVERRIDES the
+   component's own font-weight rule — utilities win over components by layer,
+   on any element. Before the @layer migration (step 5) these LOST to
+   component @scope by proximity; that limitation is retired. The full set of
+   component×property honorings (39: 25 color · 10 weight · 3 text-align ·
+   1 transform) is enumerated by scripts/qa/cascade-component-attr-sweep.mjs.
    ═══════════════════════════════════════════════════════════ */
 
 /* Text alignment */

package/styles/index.css

@@ -9,6 +9,15 @@
    Opt-in layers (theme presets, prose context) are linked separately —
    styles/themes.css and styles/prose.css. */
 
+/* Cascade-layer order — ADR-0038, GS-P2-SPEC-1 §8 step 1.
+   Declares the precedence order once, up front. INERT until rules are assigned
+   to layers: with every import below still unlayered, all rules stay in the
+   (highest-priority) unlayered context, so the resolved cascade is unchanged —
+   proven behavior-neutral by the dist-bundle fingerprint at commit time.
+   Later cuts move each import into its layer (e.g. `… layer(tokens)`), one at
+   a time, each re-fingerprinted. */
+@layer reset, tokens, elements, components, utilities, context, overrides;
+
 @import "./tokens.css";
-@import "./components.css";
-@import "./resets.css";
+@import "./components.css" layer(components);
+@import "./resets.css" layer(reset);

package/styles/prose.css

@@ -10,6 +10,12 @@
      <div prose size="lg">...</div>          — spacious prose
    ═══════════════════════════════════════════════════════════════ */
 
+/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
+   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   re-skins everything within it. The @layer order is declared by the co-loaded
+   barrel (styles/index.css); this file only contributes to `context`. */
+@layer context {
+
 [prose] {
   /* ── Radius — larger bases than UI ── */
   --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));
@@ -180,3 +186,5 @@
 [prose] img {
   border-radius: var(--a-radius-lg);
 }
+
+}

package/styles/resets.css

@@ -73,11 +73,11 @@ canvas {
   block-size: auto;
 }
 
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-  padding: 0;
-}
+/* The `ul/ol[role="list"]` semantic-list opt-out moved to
+   styles/type/elements.css (with the other element list defaults) during the
+   @layer migration — it's an element-default refinement that must win by
+   specificity, not a floor-reset that may be demoted to the `reset` layer.
+   See ADR-0038 step 2 + the cascade-reset-layer probe. */
 
 /* ── Size-query provider utility ──────────────────────────────────
    Opt any element into being a container-query size provider for

package/styles/themes.css

@@ -10,6 +10,12 @@
      <html data-theme="slate">...entire app...</html>
    ═══════════════════════════════════════════════════════════════ */
 
+/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
+   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   re-skins everything within it. The @layer order is declared by the co-loaded
+   barrel (styles/index.css); this file only contributes to `context`. */
+@layer context {
+
 /* ── Default (cool indigo, balanced) ── */
 
 [data-scheme="light"] {
@@ -35,7 +41,6 @@
   --a-info-hue:      200;
   --a-radius-k:      1;
   --a-density:       1;
-  --a-density:       1;
   --a-shadow-intensity: 1;
 }
 
@@ -153,3 +158,5 @@
   --a-radius-k:      1.25;
   --a-density:       1.1;
 }
+
+}

package/styles/tokens.css

@@ -15,7 +15,7 @@
    API. Splitting the former single :root block into per-dimension files is
    cascade-inert (every token is declared exactly once). */
 
-@import "./colors/index.css";
+@import "./colors/index.css" layer(tokens);
 @import "./typography.css";
-@import "./foundation/index.css";
-@import "./api/sizing.css";
+@import "./foundation/index.css" layer(tokens);
+@import "./api/sizing.css" layer(utilities);

package/styles/type/elements.css

@@ -60,6 +60,22 @@
   color: var(--a-fg-muted);
 }
 
+/* Semantic-list opt-out: `role="list"` restores the ARIA list role that
+   `list-style: none` strips in Safari/VoiceOver, and removes the default
+   indent so a de-listed list reads as plain content. An element-default
+   *refinement*, not a floor-reset — its real specificity (0,1,1) beats the
+   `:where(ul, ol)` default (0,0,0) within this layer, so it wins by
+   specificity rather than by source order or by being unlayered. Relocated
+   from styles/resets.css during the @layer migration (ADR-0038 step 2):
+   under `@layer`, a rule in the low `reset` layer would lose to this
+   unlayered/`elements`-layer default — the win must come from specificity,
+   here, not from precedence trickery. */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
 /* ── Blockquote ── */
 :where(blockquote) {
   margin: 1em 0;
@@ -200,6 +216,63 @@
   border-radius: var(--a-radius-md);
 }
 
+/* ── Heading role defaults (h1–h6) ──
+   Each native heading defaults to a sensible typographic role. Zero specificity
+   via :where() (0,0,0) so [variant] and component @scope always win. Relocated
+   from styles/type/roles.css during the @layer migration (ADR-0038 step 4) to
+   consolidate all native h1–h6 styling in the element-defaults file / `elements`
+   layer; co-located with the bare h1–h6 rule below, whose real specificity
+   (0,0,1) intentionally wins line-height (1.1) over these (the relationship is
+   specificity-decided, so it survives both rules landing in the same layer). */
+:where(h1) {
+  font-family: var(--a-title-family);
+  font-weight: var(--a-title-weight);
+  font-size: var(--a-title-size);
+  line-height: var(--a-title-leading);
+  letter-spacing: var(--a-title-tracking);
+  color: var(--a-title-color);
+}
+:where(h2) {
+  font-family: var(--a-heading-family);
+  font-weight: var(--a-heading-weight);
+  font-size: var(--a-heading-size);
+  line-height: var(--a-heading-leading);
+  letter-spacing: var(--a-heading-tracking);
+  color: var(--a-heading-color);
+}
+:where(h3) {
+  font-family: var(--a-section-family);
+  font-weight: var(--a-section-weight);
+  font-size: var(--a-section-size);
+  line-height: var(--a-section-leading);
+  letter-spacing: var(--a-section-tracking);
+  color: var(--a-section-color);
+}
+:where(h4) {
+  font-family: var(--a-subsection-family);
+  font-weight: var(--a-subsection-weight);
+  font-size: var(--a-subsection-size);
+  line-height: var(--a-subsection-leading);
+  letter-spacing: var(--a-subsection-tracking);
+  color: var(--a-subsection-color);
+}
+:where(h5) {
+  font-family: var(--a-caption-family);
+  font-weight: var(--a-caption-weight);
+  font-size: var(--a-caption-size);
+  line-height: var(--a-caption-leading);
+  letter-spacing: var(--a-caption-tracking);
+  color: var(--a-caption-color);
+}
+:where(h6) {
+  font-family: var(--a-label-family);
+  font-weight: var(--a-label-weight);
+  font-size: var(--a-label-size);
+  line-height: var(--a-label-leading);
+  letter-spacing: var(--a-label-tracking);
+  color: var(--a-label-color);
+}
+
 /* ── Native element typography consolidated from resets.css ──
    (v0.6.48 reorg, ADR-0035). These are (0,0,1)/(0,1,1) and only compete
    with the :where() (0,0,0) defaults above, so specificity decides — the

package/styles/type/roles.css

@@ -259,56 +259,20 @@
      <span variant="kicker">Category</span>
    ═══════════════════════════════════════════════════════════ */
 
-/* ── h1–h6 defaults — sensible roles, zero specificity so [variant] wins ── */
-:where(h1) {
-  font-family: var(--a-title-family);
-  font-weight: var(--a-title-weight);
-  font-size: var(--a-title-size);
-  line-height: var(--a-title-leading);
-  letter-spacing: var(--a-title-tracking);
-  color: var(--a-title-color);
-}
-:where(h2) {
-  font-family: var(--a-heading-family);
-  font-weight: var(--a-heading-weight);
-  font-size: var(--a-heading-size);
-  line-height: var(--a-heading-leading);
-  letter-spacing: var(--a-heading-tracking);
-  color: var(--a-heading-color);
-}
-:where(h3) {
-  font-family: var(--a-section-family);
-  font-weight: var(--a-section-weight);
-  font-size: var(--a-section-size);
-  line-height: var(--a-section-leading);
-  letter-spacing: var(--a-section-tracking);
-  color: var(--a-section-color);
-}
-:where(h4) {
-  font-family: var(--a-subsection-family);
-  font-weight: var(--a-subsection-weight);
-  font-size: var(--a-subsection-size);
-  line-height: var(--a-subsection-leading);
-  letter-spacing: var(--a-subsection-tracking);
-  color: var(--a-subsection-color);
-}
-:where(h5) {
-  font-family: var(--a-caption-family);
-  font-weight: var(--a-caption-weight);
-  font-size: var(--a-caption-size);
-  line-height: var(--a-caption-leading);
-  letter-spacing: var(--a-caption-tracking);
-  color: var(--a-caption-color);
-}
-:where(h6) {
-  font-family: var(--a-label-family);
-  font-weight: var(--a-label-weight);
-  font-size: var(--a-label-size);
-  line-height: var(--a-label-leading);
-  letter-spacing: var(--a-label-tracking);
-  color: var(--a-label-color);
-}
+/* The h1–h6 :where() defaults moved to styles/type/elements.css (the
+   element-defaults file, which already owns the bare h1–h6 text-wrap/leading
+   rule) during the @layer migration — ADR-0038 step 4. They belong in the
+   `elements` layer alongside the rest of the native-element baseline. Role
+   *tokens* (above) stay here (unlayered → `tokens`); the [variant] API (below)
+   is now the `utilities` layer (step 6). */
 
+/* [variant] attribute API → `utilities` layer (ADR-0038 step 6). Above
+   `components` and `elements`, so a [variant] on any element (component,
+   heading, span) wins by layer order — not specificity. Within `utilities` it
+   ties with [weight]/[color] (all (0,1,0)); source order decides, and api/text
+   imports AFTER this block, so [weight] still wins that tie — preserved by both
+   landing in the same layer. */
+@layer utilities {
 [variant="display"] {
   font-family: var(--a-display-family);
   font-weight: var(--a-display-weight);
@@ -417,3 +381,4 @@
   text-transform: var(--a-code-case);
   color: var(--a-code-color);
 }
+} /* @layer utilities — [variant] API */

package/styles/type/scale.css

@@ -12,10 +12,6 @@
 
   /* ── Font families ── */
 
-  /*--a-font-family-sans:     var(--a-font-gt-standard);*/
-  /*--a-font-family-mono:     var(--a-font-gt-standard-mono);*/
-  /*--a-font-family-sans:     var(--a-font-neu-montreal-sans);*/
-  /*--a-font-family-mono:     var(--a-font-neu-montreal-mono);*/
   --a-font-family-display: var(--a-font-family-sans);
   --a-font-family-text: var(--a-font-family-sans);
   --a-font-family-heading: var(--a-font-family-sans);
@@ -23,7 +19,6 @@
   --a-font-family-code: var(--a-font-family-mono);
   --a-font-family-control: var(--a-font-family-mono);
   --a-font-family: var(--a-font-family-sans);
-  --a-font-family-text: var(--a-font-family-sans);
 
   /* ── Type scale ──
       Ratio: ~1.25 (major third) with dramatic hero jump.

package/styles/typography.css

@@ -60,6 +60,6 @@
 
 @import "./type/scale.css";    /* L1/L2 — families, weights, leading, tracking */
 @import "./type/roles.css";    /* L3   — 13 roles + h1-h6 + [variant] */
-@import "./type/elements.css"; /* native element defaults */
-@import "./api/text.css";      /* [text-align][weight][color][transform][truncate] */
-@import "./api/layout.css";    /* [hidden][nomargin][grow] */
+@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) */
+@import "./api/layout.css" layer(utilities);    /* [hidden][nomargin][grow] → utilities */