@adia-ai/web-components 0.7.3 → 0.7.5

package/components/grid/grid.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "align": {
+      "description": "Block-axis alignment of grid items (start/center/end/stretch) via align-items — e.g. vertically centering a text column against a visual in a 2-column hero. Sets grid-item alignment, NOT text alignment.",
+      "type": "string",
+      "default": "stretch"
+    },
     "columnGap": {
       "description": "Column gap override",
       "type": "string",
@@ -31,6 +36,11 @@
       "type": "string",
       "default": "md"
     },
+    "justify": {
+      "description": "Inline-axis alignment of grid items (start/center/end/stretch) via justify-items. Default stretch (items fill their column track).",
+      "type": "string",
+      "default": "stretch"
+    },
     "minColumnWidth": {
       "description": "Minimum track width for columns=\"auto-fit\"/\"auto-fill\" (any CSS length, e.g. \"240px\", \"16rem\"). Sets the minmax() floor so cards don't shrink below it before wrapping; unset uses the 12rem default. No effect on numeric columns.",
       "type": "string",

package/components/grid/grid.css

@@ -3,9 +3,9 @@
     /* Explicit-then-ambient: `[gap="N"]` sets non-inheriting
        `--a-gap-self`; `[size]`/`:root` set inheriting `--a-gap` (base
        `--a-gap-md`). See styles/api/sizing.css + spec §5.2. */
-    --grid-gap-default:        var(--a-gap-self, var(--a-gap));
-    --grid-column-gap-default: var(--grid-gap, var(--grid-gap-default));
-    --grid-row-gap-default:    var(--grid-gap, var(--grid-gap-default));
+    --grid-gap:        var(--a-gap-self, var(--a-gap));
+    --grid-column-gap: var(--grid-gap);
+    --grid-row-gap:    var(--grid-gap);
   }
 
   :scope {
@@ -14,13 +14,31 @@
     /* Default: auto 1fr columns — as many equal columns as children */
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    column-gap: var(--grid-column-gap, var(--grid-column-gap-default));
-    row-gap: var(--grid-row-gap, var(--grid-row-gap-default));
+    column-gap: var(--grid-column-gap);
+    row-gap: var(--grid-row-gap);
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
+    /* Neutralize the legacy UA rule that maps the HTML `align=` attr to
+       `text-align`. Our [align]/[justify] set grid cross/main-axis item
+       alignment, NOT text alignment — without this, `align="center"` silently
+       leaks `text-align:center` into every descendant (centered a hero
+       headline/deck that should read left). Mirrors row.css / col.css. */
+    text-align: inherit;
   }
 
+  /* ── Item alignment ── [align] = block axis (align-items), [justify] =
+     inline axis (justify-items). Parity with row-ui / col-ui. CSS-only. */
+  :scope[align="start"]     { align-items: start; }
+  :scope[align="center"]    { align-items: center; }
+  :scope[align="end"]       { align-items: end; }
+  :scope[align="stretch"]   { align-items: stretch; }
+
+  :scope[justify="start"]   { justify-items: start; }
+  :scope[justify="center"]  { justify-items: center; }
+  :scope[justify="end"]     { justify-items: end; }
+  :scope[justify="stretch"] { justify-items: stretch; }
+
   /* Explicit column count — switches to template mode */
   :scope[columns="1"] { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; }
   :scope[columns="2"] { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }

package/components/grid/grid.d.ts

@@ -13,12 +13,16 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIGrid extends UIElement {
+  /** Block-axis alignment of grid items (start/center/end/stretch) via align-items — e.g. vertically centering a text column against a visual in a 2-column hero. Sets grid-item alignment, NOT text alignment. */
+  align: string;
   /** Column gap override */
   columnGap: string;
   /** Number of equal columns (1–6), "auto-fill", or "auto-fit". Accepts responsive `@bp` notation: "1 2@sm 4@lg" = 1 on xs, 2 from sm, 4 from lg/xl. Unannotated value is the mobile-first base. */
   columns: string;
   /** Grid gap (row + column). Two grammars: a NAMED scale (xs/sm/md/lg/xl, parametric via --a-gap-k — 4/8/12/16/20px at k=1) and an integer space-rung ("0"…"10", "12", "16", literal). At k=1 they coincide: xs=1, sm=2, md=3, lg=4, xl=5. Responsive `@bp` notation supported: "2 4@md" = 2 below md, 4 from md upward. */
   gap: string;
+  /** Inline-axis alignment of grid items (start/center/end/stretch) via justify-items. Default stretch (items fill their column track). */
+  justify: string;
   /** Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length, e.g. "240px", "16rem"). Sets the minmax() floor so cards don't shrink below it before wrapping; unset uses the 12rem default. No effect on numeric columns. */
   minColumnWidth: string;
   /** Row gap override */

package/components/grid/grid.yaml

@@ -16,6 +16,13 @@ description: >-
   Compose a 2:1 split as columns="3" + span="2"; 3:2 as columns="5" +
   span="3" + span="2".
 props:
+  align:
+    description: >-
+      Block-axis alignment of grid items (start/center/end/stretch) via
+      align-items — e.g. vertically centering a text column against a visual
+      in a 2-column hero. Sets grid-item alignment, NOT text alignment.
+    type: string
+    default: stretch
   columnGap:
     description: Column gap override
     type: string
@@ -37,6 +44,12 @@ props:
       upward.
     type: string
     default: md
+  justify:
+    description: >-
+      Inline-axis alignment of grid items (start/center/end/stretch) via
+      justify-items. Default stretch (items fill their column track).
+    type: string
+    default: stretch
   minColumnWidth:
     description: >-
       Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length,

package/components/heatmap/heatmap.css

@@ -1,40 +1,40 @@
 @scope (heatmap-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --heatmap-gap-default:              var(--a-space-1);
-    --heatmap-cell-radius-default:      var(--a-radius-xs);
-    --heatmap-inset-default:            var(--a-inset);
-    --heatmap-aspect-default:           auto;
-    --heatmap-cell-min-size-default:    0.75rem;
+    --heatmap-gap:              var(--a-space-1);
+    --heatmap-cell-radius:      var(--a-radius-xs);
+    --heatmap-inset:            var(--a-inset);
+    --heatmap-aspect:           auto;
+    --heatmap-cell-min-size:    0.75rem;
 
     /* ── Colors ── */
-    --heatmap-empty-bg-default:         var(--a-bg-muted);
-    --heatmap-border-default:           1px solid var(--a-border-subtle);
-    --heatmap-text-default:             var(--a-fg);
-    --heatmap-label-default:            var(--a-fg-subtle);
+    --heatmap-empty-bg:         var(--a-bg-muted);
+    --heatmap-border:           1px solid var(--a-border-subtle);
+    --heatmap-text:             var(--a-fg);
+    --heatmap-label:            var(--a-fg-subtle);
 
     /* ── Data ramp (5 buckets) ──
        Sequential tint scale, sourced from the L2 `--a-{family}-bucket-N`
        semantic aliases (see styles/colors/semantics.css §BUCKETS). The
        L2 layer handles light-dark() polarity so step 0 reads as
        low-intensity in either scheme without per-component math. */
-    --heatmap-bucket-0-default:         var(--a-accent-bucket-0);
-    --heatmap-bucket-1-default:         var(--a-accent-bucket-1);
-    --heatmap-bucket-2-default:         var(--a-accent-bucket-2);
-    --heatmap-bucket-3-default:         var(--a-accent-bucket-3);
-    --heatmap-bucket-4-default:         var(--a-accent-bucket-4);
+    --heatmap-bucket-0:         var(--a-accent-bucket-0);
+    --heatmap-bucket-1:         var(--a-accent-bucket-1);
+    --heatmap-bucket-2:         var(--a-accent-bucket-2);
+    --heatmap-bucket-3:         var(--a-accent-bucket-3);
+    --heatmap-bucket-4:         var(--a-accent-bucket-4);
 
     /* ── Legend ── */
-    --heatmap-legend-size-default:      var(--a-caption-size);
-    --heatmap-legend-gap-default:       var(--a-space-1);
+    --heatmap-legend-size:      var(--a-caption-size);
+    --heatmap-legend-gap:       var(--a-space-1);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--heatmap-gap, var(--heatmap-gap-default));
-    color: var(--heatmap-text, var(--heatmap-text-default));
+    gap: var(--heatmap-gap);
+    color: var(--heatmap-text);
     font-size: var(--a-body-size);
     /* A wide day-grid (52+ week columns) keeps a FIXED cell size and scrolls
        horizontally (the GitHub-contributions model) rather than crushing
@@ -60,9 +60,9 @@
   /* Month labels row (day-grid mode) */
   :scope > [data-months] {
     display: grid;
-    gap: var(--heatmap-gap, var(--heatmap-gap-default));
-    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
-    color: var(--heatmap-label, var(--heatmap-label-default));
+    gap: var(--heatmap-gap);
+    font-size: var(--heatmap-legend-size);
+    color: var(--heatmap-label);
   }
 
   :scope [data-month-label] {
@@ -72,7 +72,7 @@
   /* Grid of cells */
   :scope > [data-grid] {
     display: grid;
-    gap: var(--heatmap-gap, var(--heatmap-gap-default));
+    gap: var(--heatmap-gap);
   }
 
   :scope[aspect="square"] > [data-grid] {
@@ -84,8 +84,8 @@
   }
 
   :scope [data-cell] {
-    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
-    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
+    border-radius: var(--heatmap-cell-radius);
+    background: var(--heatmap-empty-bg);
     /* No hard min on the cell box — it conflicted with matrix/density's
        minmax(0,1fr) tracks (the floor refused to shrink, so cells overlapped
        into a smear). day-grid keeps fixed size via its fixed tracks; the
@@ -103,70 +103,70 @@
 
   :scope [data-cell][data-v]:hover {
     transform: scale(1.15);
-    outline: var(--heatmap-border, var(--heatmap-border-default));
+    outline: var(--heatmap-border);
   }
 
-  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
-  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
-  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
-  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
-  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }
+  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0); }
+  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1); }
+  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2); }
+  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3); }
+  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4); }
 
   /* Legend strip */
   :scope > [data-legend] {
     display: flex;
     align-items: center;
-    gap: var(--heatmap-legend-gap, var(--heatmap-legend-gap-default));
-    font-size: var(--heatmap-legend-size, var(--heatmap-legend-size-default));
-    color: var(--heatmap-label, var(--heatmap-label-default));
-    margin-top: var(--heatmap-gap, var(--heatmap-gap-default));
+    gap: var(--heatmap-legend-gap);
+    font-size: var(--heatmap-legend-size);
+    color: var(--heatmap-label);
+    margin-top: var(--heatmap-gap);
   }
 
   :scope [data-legend-swatch] {
     width: 0.875rem;
     height: 0.875rem;
-    border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
-    background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
+    border-radius: var(--heatmap-cell-radius);
+    background: var(--heatmap-empty-bg);
     display: inline-block;
   }
 
-  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0, var(--heatmap-bucket-0-default)); }
-  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1, var(--heatmap-bucket-1-default)); }
-  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2, var(--heatmap-bucket-2-default)); }
-  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3, var(--heatmap-bucket-3-default)); }
-  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4, var(--heatmap-bucket-4-default)); }
+  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0); }
+  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1); }
+  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2); }
+  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3); }
+  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4); }
 
   /* ── Color-scheme variants (token overrides only) ── */
 
   :scope[color-scheme="success"] {
-    --heatmap-bucket-0-default: var(--a-success-bucket-0);
-    --heatmap-bucket-1-default: var(--a-success-bucket-1);
-    --heatmap-bucket-2-default: var(--a-success-bucket-2);
-    --heatmap-bucket-3-default: var(--a-success-bucket-3);
-    --heatmap-bucket-4-default: var(--a-success-bucket-4);
+    --heatmap-bucket-0: var(--a-success-bucket-0);
+    --heatmap-bucket-1: var(--a-success-bucket-1);
+    --heatmap-bucket-2: var(--a-success-bucket-2);
+    --heatmap-bucket-3: var(--a-success-bucket-3);
+    --heatmap-bucket-4: var(--a-success-bucket-4);
   }
 
   :scope[color-scheme="warning"] {
-    --heatmap-bucket-0-default: var(--a-warning-bucket-0);
-    --heatmap-bucket-1-default: var(--a-warning-bucket-1);
-    --heatmap-bucket-2-default: var(--a-warning-bucket-2);
-    --heatmap-bucket-3-default: var(--a-warning-bucket-3);
-    --heatmap-bucket-4-default: var(--a-warning-bucket-4);
+    --heatmap-bucket-0: var(--a-warning-bucket-0);
+    --heatmap-bucket-1: var(--a-warning-bucket-1);
+    --heatmap-bucket-2: var(--a-warning-bucket-2);
+    --heatmap-bucket-3: var(--a-warning-bucket-3);
+    --heatmap-bucket-4: var(--a-warning-bucket-4);
   }
 
   :scope[color-scheme="danger"] {
-    --heatmap-bucket-0-default: var(--a-danger-bucket-0);
-    --heatmap-bucket-1-default: var(--a-danger-bucket-1);
-    --heatmap-bucket-2-default: var(--a-danger-bucket-2);
-    --heatmap-bucket-3-default: var(--a-danger-bucket-3);
-    --heatmap-bucket-4-default: var(--a-danger-bucket-4);
+    --heatmap-bucket-0: var(--a-danger-bucket-0);
+    --heatmap-bucket-1: var(--a-danger-bucket-1);
+    --heatmap-bucket-2: var(--a-danger-bucket-2);
+    --heatmap-bucket-3: var(--a-danger-bucket-3);
+    --heatmap-bucket-4: var(--a-danger-bucket-4);
   }
 
   :scope[color-scheme="info"] {
-    --heatmap-bucket-0-default: var(--a-info-bucket-0);
-    --heatmap-bucket-1-default: var(--a-info-bucket-1);
-    --heatmap-bucket-2-default: var(--a-info-bucket-2);
-    --heatmap-bucket-3-default: var(--a-info-bucket-3);
-    --heatmap-bucket-4-default: var(--a-info-bucket-4);
+    --heatmap-bucket-0: var(--a-info-bucket-0);
+    --heatmap-bucket-1: var(--a-info-bucket-1);
+    --heatmap-bucket-2: var(--a-info-bucket-2);
+    --heatmap-bucket-3: var(--a-info-bucket-3);
+    --heatmap-bucket-4: var(--a-info-bucket-4);
   }
 }

package/components/icon/icon.css

@@ -1,6 +1,6 @@
 @scope (icon-ui) {
   :where(:scope) {
-    --icon-size-default: var(--a-icon-size, calc(1em + 0.125rem));
+    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
   }
 
   :scope {
@@ -8,8 +8,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--icon-size, var(--icon-size-default));
-    height: var(--icon-size, var(--icon-size-default));
+    width: var(--icon-size);
+    height: var(--icon-size);
     flex-shrink: 0;
     line-height: 0;
   }
@@ -24,13 +24,13 @@
      icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
      extend the scale beyond the universal range for hero placeholder
      contexts. `fill` matches the parent box. */
-  :scope[size="xs"]   { --icon-size-default: 0.75rem; }   /* 12px */
-  :scope[size="sm"]   { --icon-size-default: 0.875rem; }  /* 14px */
-  :scope[size="md"]   { --icon-size-default: 1rem; }      /* 16px */
-  :scope[size="lg"]   { --icon-size-default: 1.25rem; }   /* 20px */
-  :scope[size="xl"]   { --icon-size-default: 2rem; }      /* 32px */
-  :scope[size="2xl"]  { --icon-size-default: 3rem; }      /* 48px */
-  :scope[size="3xl"]  { --icon-size-default: 4rem; }      /* 64px */
-  :scope[size="4xl"]  { --icon-size-default: 6rem; }      /* 96px */
-  :scope[size="fill"] { --icon-size-default: 100%; }
+  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
+  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
+  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
+  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
+  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
+  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
+  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
+  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
+  :scope[size="fill"] { --icon-size: 100%; }
 }

package/components/image/image.css

@@ -1,14 +1,14 @@
 @scope (image-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --image-radius-default: 0;
+    --image-radius: 0;
 
     /* ── Colors ── */
-    --image-bg-default:       var(--a-bg-muted);
+    --image-bg:       var(--a-bg-muted);
 
     /* ── Transition ── */
-    --image-duration-default: var(--a-duration);
-    --image-easing-default:   var(--a-easing);
+    --image-duration: var(--a-duration);
+    --image-easing:   var(--a-easing);
   }
 
   :scope {
@@ -17,8 +17,8 @@
     display: block;
     position: relative;
     overflow: hidden;
-    background: var(--image-bg, var(--image-bg-default));
-    border-radius: var(--image-radius, var(--image-radius-default));
+    background: var(--image-bg);
+    border-radius: var(--image-radius);
   }
 
   /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
@@ -31,7 +31,7 @@
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
+    transition: opacity var(--image-duration) var(--image-easing);
   }
 
   :scope[data-loaded] [slot="image"] {
@@ -48,7 +48,7 @@
   [slot="skeleton"] {
     position: absolute;
     inset: 0;
-    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
+    transition: opacity var(--image-duration) var(--image-easing);
   }
 
   :scope[data-loaded] [slot="skeleton"] {
@@ -57,10 +57,10 @@
   }
 
   /* ── Radius variants ── */
-  :scope[radius="sm"]   { --image-radius-default: var(--a-radius-sm); }
-  :scope[radius="md"]   { --image-radius-default: var(--a-radius-md); }
-  :scope[radius="lg"]   { --image-radius-default: var(--a-radius-lg); }
-  :scope[radius="full"] { --image-radius-default: var(--a-radius-full); }
+  :scope[radius="sm"]   { --image-radius: var(--a-radius-sm); }
+  :scope[radius="md"]   { --image-radius: var(--a-radius-md); }
+  :scope[radius="lg"]   { --image-radius: var(--a-radius-lg); }
+  :scope[radius="full"] { --image-radius: var(--a-radius-full); }
 
   /* ── Size mode — fills the container.
      Layout-changing attribute; sanctioned in component-token-contract.md. */
@@ -73,7 +73,7 @@
   /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
      Comes after radius variants so it overrides them by source order. */
   :scope[raw] {
-    --image-bg-default: transparent;
-    --image-radius-default: 0;
+    --image-bg: transparent;
+    --image-radius: 0;
   }
 }

package/components/inline-edit/inline-edit.css

@@ -1,12 +1,12 @@
 @scope (inline-edit-ui) {
   :where(:scope) {
-    --inline-edit-bg-hover-default:    var(--a-bg-muted);
-    --inline-edit-bg-edit-default:     var(--a-bg);
-    --inline-edit-outline-default:     var(--a-accent-strong);
-    --inline-edit-placeholder-default: var(--a-fg-subtle);
-    --inline-edit-px-default:          var(--a-space-1);
-    --inline-edit-py-default:          var(--a-space-0-5);
-    --inline-edit-radius-default:      var(--a-radius-sm);
+    --inline-edit-bg-hover:    var(--a-bg-muted);
+    --inline-edit-bg-edit:     var(--a-bg);
+    --inline-edit-outline:     var(--a-accent-strong);
+    --inline-edit-placeholder: var(--a-fg-subtle);
+    --inline-edit-px:          var(--a-space-1);
+    --inline-edit-py:          var(--a-space-0-5);
+    --inline-edit-radius:      var(--a-radius-sm);
   }
 
   :scope {
@@ -15,11 +15,11 @@
        table cells (where the cell already contains the box). */
     display: inline-block;
     box-sizing: border-box;
-    padding-inline: var(--inline-edit-px, var(--inline-edit-px-default));
-    padding-block: var(--inline-edit-py, var(--inline-edit-py-default));
-    margin-inline: calc(-1 * var(--inline-edit-px, var(--inline-edit-px-default)));
-    margin-block: calc(-1 * var(--inline-edit-py, var(--inline-edit-py-default)));
-    border-radius: var(--inline-edit-radius, var(--inline-edit-radius-default));
+    padding-inline: var(--inline-edit-px);
+    padding-block: var(--inline-edit-py);
+    margin-inline: calc(-1 * var(--inline-edit-px));
+    margin-block: calc(-1 * var(--inline-edit-py));
+    border-radius: var(--inline-edit-radius);
     cursor: text;
     color: inherit;
     font: inherit;
@@ -31,13 +31,13 @@
   /* Hover affordance — subtle bg tint so the user sees this IS editable.
      Suppressed when disabled / readonly / already editing. */
   :scope:not([editing]):not([disabled]):not([readonly]):hover {
-    background: var(--inline-edit-bg-hover, var(--inline-edit-bg-hover-default));
+    background: var(--inline-edit-bg-hover);
   }
 
   /* Editing state — flat background + accent outline for focus clarity */
   :scope[editing] {
-    background: var(--inline-edit-bg-edit, var(--inline-edit-bg-edit-default));
-    outline: 2px solid var(--inline-edit-outline, var(--inline-edit-outline-default));
+    background: var(--inline-edit-bg-edit);
+    outline: 2px solid var(--inline-edit-outline);
     outline-offset: 0;
     cursor: text;
   }
@@ -46,7 +46,7 @@
      when the host has no text content + isn't being edited. */
   :scope:empty:not([editing])::before {
     content: attr(placeholder);
-    color: var(--inline-edit-placeholder, var(--inline-edit-placeholder-default));
+    color: var(--inline-edit-placeholder);
     font-style: italic;
   }
 

package/components/inline-message/inline-message.css

@@ -5,16 +5,16 @@
        `--a-fg-muted`). Severity variants drop in `--a-{family}-text`
        (light-dark(20-shade, 20-tint)) — the on-canvas text family, not
        `--a-{family}-fg` (which is on-fill / on-strong-bg). */
-    --inline-message-fg-default:        var(--a-fg-muted);
-    --inline-message-icon-fg-default:   currentColor;
+    --inline-message-fg:        var(--a-fg-muted);
+    --inline-message-icon-fg:   currentColor;
 
     /* ── Layout ── */
-    --inline-message-gap-default:       var(--a-space-1);
-    --inline-message-icon-size-default: var(--a-ui-sm);
+    --inline-message-gap:       var(--a-space-1);
+    --inline-message-icon-size: var(--a-ui-sm);
 
     /* ── Typography ── */
-    --inline-message-font-size-default: var(--a-ui-sm);
-    --inline-message-line-height-default: var(--a-leading-snug);
+    --inline-message-font-size: var(--a-ui-sm);
+    --inline-message-line-height: var(--a-leading-snug);
   }
 
   :scope {
@@ -26,10 +26,10 @@
     box-sizing: border-box;
     display: inline-flex;
     align-items: baseline;
-    gap: var(--inline-message-gap, var(--inline-message-gap-default));
-    color: var(--inline-message-fg, var(--inline-message-fg-default));
-    font-size: var(--inline-message-font-size, var(--inline-message-font-size-default));
-    line-height: var(--inline-message-line-height, var(--inline-message-line-height-default));
+    gap: var(--inline-message-gap);
+    color: var(--inline-message-fg);
+    font-size: var(--inline-message-font-size);
+    line-height: var(--inline-message-line-height);
   }
 
   /* ── Leading icon ──
@@ -48,8 +48,8 @@
   :scope [slot="leading"] {
     flex-shrink: 0;
     align-self: center;
-    color: var(--inline-message-icon-fg, var(--inline-message-icon-fg-default));
-    --a-icon-size: var(--inline-message-icon-size, var(--inline-message-icon-size-default));
+    color: var(--inline-message-icon-fg);
+    --a-icon-size: var(--inline-message-icon-size);
     order: -1;
   }
 
@@ -58,18 +58,18 @@
      the variant's default in inline-message.class.js). No padding / display / layout
      changes — these are variants, not modes (per css-patterns.md). */
   :scope[variant="info"] {
-    --inline-message-fg-default: var(--a-info-text);
+    --inline-message-fg: var(--a-info-text);
   }
 
   :scope[variant="success"] {
-    --inline-message-fg-default: var(--a-success-text);
+    --inline-message-fg: var(--a-success-text);
   }
 
   :scope[variant="warning"] {
-    --inline-message-fg-default: var(--a-warning-text);
+    --inline-message-fg: var(--a-warning-text);
   }
 
   :scope[variant="danger"] {
-    --inline-message-fg-default: var(--a-danger-text);
+    --inline-message-fg: var(--a-danger-text);
   }
 }