@adia-ai/web-components 0.7.2 → 0.7.4

package/components/chart-legend/chart-legend.css

@@ -1,37 +1,37 @@
 @scope (chart-legend-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --chart-legend-gap-default:         var(--a-space-2);
-    --chart-legend-row-gap-default:     var(--a-space-1);
-    --chart-legend-py-default:          var(--a-space-1);
-    --chart-legend-px-default:          0;
+    --chart-legend-gap:         var(--a-space-2);
+    --chart-legend-row-gap:     var(--a-space-1);
+    --chart-legend-py:          var(--a-space-1);
+    --chart-legend-px:          0;
 
     /* ── Swatch ── */
-    --chart-legend-swatch-size-default: var(--a-space-2-5);
-    --chart-legend-line-w-default:      2px;
+    --chart-legend-swatch-size: var(--a-space-2-5);
+    --chart-legend-line-w:      2px;
 
     /* ── Typography ── */
-    --chart-legend-font-size-default:   var(--a-ui-tiny);
-    --chart-legend-fg-default:          var(--a-fg-subtle);
-    --chart-legend-fg-inactive-default: var(--a-fg-muted);
+    --chart-legend-font-size:   var(--a-ui-tiny);
+    --chart-legend-fg:          var(--a-fg-subtle);
+    --chart-legend-fg-inactive: var(--a-fg-muted);
 
     /* ── Interaction ── */
-    --chart-legend-row-radius-default:  var(--a-radius-sm);
-    --chart-legend-row-hover-default:   var(--a-canvas-2);
-    --chart-legend-row-fg-hover-default: var(--a-fg);
+    --chart-legend-row-radius:  var(--a-radius-sm);
+    --chart-legend-row-hover:   var(--a-canvas-2);
+    --chart-legend-row-fg-hover: var(--a-fg);
 
     /* ── Focus ── */
-    --chart-legend-focus-ring-default:  var(--a-focus-ring);
+    --chart-legend-focus-ring:  var(--a-focus-ring);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--chart-legend-gap, var(--chart-legend-gap-default));
-    padding: var(--chart-legend-py, var(--chart-legend-py-default)) var(--chart-legend-px, var(--chart-legend-px-default));
-    font-size: var(--chart-legend-font-size, var(--chart-legend-font-size-default));
-    color: var(--chart-legend-fg, var(--chart-legend-fg-default));
+    gap: var(--chart-legend-gap);
+    padding: var(--chart-legend-py) var(--chart-legend-px);
+    font-size: var(--chart-legend-font-size);
+    color: var(--chart-legend-fg);
   }
 
   /* Position variants — drive flex-direction. DOM placement still wins for
@@ -55,12 +55,12 @@
      font-size, line-height) comes from badge-ui itself. */
   badge-ui[data-row] {
     --badge-bg: transparent;
-    --badge-fg: var(--chart-legend-fg, var(--chart-legend-fg-default));
-    --badge-radius: var(--chart-legend-row-radius, var(--chart-legend-row-radius-default));
+    --badge-fg: var(--chart-legend-fg);
+    --badge-radius: var(--chart-legend-row-radius);
     --badge-px: var(--a-space-1);
-    --badge-py: var(--chart-legend-py, var(--chart-legend-py-default));
-    --badge-gap: var(--chart-legend-row-gap, var(--chart-legend-row-gap-default));
-    --badge-font-size: var(--chart-legend-font-size, var(--chart-legend-font-size-default));
+    --badge-py: var(--chart-legend-py);
+    --badge-gap: var(--chart-legend-row-gap);
+    --badge-font-size: var(--chart-legend-font-size);
     cursor: pointer;
     transition: background var(--a-duration-fast) var(--a-easing),
                 color var(--a-duration-fast) var(--a-easing);
@@ -72,19 +72,19 @@
   }
 
   badge-ui[data-row][role="button"]:hover {
-    --badge-bg: var(--chart-legend-row-hover, var(--chart-legend-row-hover-default));
-    --badge-fg: var(--chart-legend-row-fg-hover, var(--chart-legend-row-fg-hover-default));
+    --badge-bg: var(--chart-legend-row-hover);
+    --badge-fg: var(--chart-legend-row-fg-hover);
   }
 
   badge-ui[data-row][role="button"]:focus-visible {
     outline: none;
-    box-shadow: var(--chart-legend-focus-ring, var(--chart-legend-focus-ring-default));
+    box-shadow: var(--chart-legend-focus-ring);
   }
 
   /* Inactive (toggled-off) rows — dim the swatch + fade label. Drives
      badge-ui's --badge-fg so the label fades alongside the swatch. */
   badge-ui[data-row]:not([data-active]) {
-    --badge-fg: var(--chart-legend-fg-inactive, var(--chart-legend-fg-inactive-default));
+    --badge-fg: var(--chart-legend-fg-inactive);
   }
   badge-ui[data-row]:not([data-active]) swatch-ui {
     opacity: 0.4;

package/components/check/check.css

@@ -4,63 +4,63 @@
    Safari leaves the visual stuck — selectors moved out as plain
    `tagname[attr]` rules. See docs/BROWSER-COMPAT.md §3a. */
 check-ui:not([disabled]):hover [slot="box"] {
-  border-color: var(--check-border-hover, var(--check-border-hover-default));
-  background: var(--check-bg-hover, var(--check-bg-hover-default));
+  border-color: var(--check-border-hover);
+  background: var(--check-bg-hover);
 }
 check-ui[checked]:not([disabled]):hover [slot="box"],
 check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
-  background: var(--check-bg-checked-hover, var(--check-bg-checked-hover-default));
-  border-color: var(--check-bg-checked-hover, var(--check-bg-checked-hover-default));
+  background: var(--check-bg-checked-hover);
+  border-color: var(--check-bg-checked-hover);
 }
 check-ui[checked] [slot="box"],
 check-ui[indeterminate] [slot="box"] {
-  background: var(--check-bg-checked, var(--check-bg-checked-default));
-  border-color: var(--check-border-checked, var(--check-border-checked-default));
+  background: var(--check-bg-checked);
+  border-color: var(--check-border-checked);
 }
 check-ui[checked] {
-  --_icon-w:         calc(var(--check-size, var(--check-size-default)) * 0.3);
-  --_icon-h:         calc(var(--check-size, var(--check-size-default)) * 0.55);
-  --_icon-border:    solid var(--check-fg-checked, var(--check-fg-checked-default));
-  --_icon-bw:        0 calc(var(--check-size, var(--check-size-default)) * 0.12) calc(var(--check-size, var(--check-size-default)) * 0.12) 0;
+  --_icon-w:         calc(var(--check-size) * 0.3);
+  --_icon-h:         calc(var(--check-size) * 0.55);
+  --_icon-border:    solid var(--check-fg-checked);
+  --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
   --_icon-transform: rotate(45deg) translate(-1px, -1px);
 }
 check-ui[indeterminate] {
-  --_dash-bg: var(--check-fg-checked, var(--check-fg-checked-default));
-  --_icon-w:  calc(var(--check-size, var(--check-size-default)) * 0.5);
-  --_icon-h:  calc(var(--check-size, var(--check-size-default)) * 0.12);
+  --_dash-bg: var(--check-fg-checked);
+  --_icon-w:  calc(var(--check-size) * 0.5);
+  --_icon-h:  calc(var(--check-size) * 0.12);
 }
 
 @scope (check-ui) {
   :where(:scope) {
     /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
-    --check-size-default:             var(--a-toggle-size);
-    --check-gap-default:              var(--a-space-2);
-    --check-font-size-default:        var(--a-ui-size);
-    --check-radius-default:           min(var(--a-radius-md), var(--a-space-1-5));
+    --check-size:             var(--a-toggle-size);
+    --check-gap:              var(--a-space-2);
+    --check-font-size:        var(--a-ui-size);
+    --check-radius:           min(var(--a-radius-md), var(--a-space-1-5));
 
     /* ── State: default ── */
-    --check-bg-default:               var(--a-ui-bg);
-    --check-border-default:           var(--a-ui-border);
-    --check-border-hover-default:     var(--a-fg-subtle);
+    --check-bg:               var(--a-ui-bg);
+    --check-border:           var(--a-ui-border);
+    --check-border-hover:     var(--a-fg-subtle);
 
     /* ── Transitions ── */
-    --check-duration-default:         var(--a-duration-fast);
-    --check-easing-default:           var(--a-easing);
+    --check-duration:         var(--a-duration-fast);
+    --check-easing:           var(--a-easing);
 
     /* ── Focus ── */
-    --check-focus-ring-default:       var(--a-focus-ring);
+    --check-focus-ring:       var(--a-focus-ring);
 
     /* ── State: default hover ── */
-    --check-bg-hover-default:         var(--a-bg-muted);
+    --check-bg-hover:         var(--a-bg-muted);
 
     /* ── State: checked ── */
-    --check-bg-checked-default:       var(--a-primary);
-    --check-border-checked-default:   var(--a-primary);
-    --check-fg-checked-default:       var(--a-chrome-light);
-    --check-bg-checked-hover-default: var(--a-primary-hover);
+    --check-bg-checked:       var(--a-primary);
+    --check-border-checked:   var(--a-primary);
+    --check-fg-checked:       var(--a-chrome-light);
+    --check-bg-checked-hover: var(--a-primary-hover);
 
     /* ── State: disabled ── */
-    --check-fg-disabled-default:      var(--a-ui-text-disabled);
+    --check-fg-disabled:      var(--a-ui-text-disabled);
 
     /* ── Check icon (CSS border trick, no SVG) ── */
     --_icon-w:    0;
@@ -81,28 +81,28 @@ check-ui[indeterminate] {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--check-gap, var(--check-gap-default));
+    gap: var(--check-gap);
     cursor: pointer;
     user-select: none;
-    font-size: var(--check-font-size, var(--check-font-size-default));
+    font-size: var(--check-font-size);
     outline: none;
   }
-  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled, var(--check-fg-disabled-default)); }
+  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled); }
 
   /* Box */
   [slot="box"] {
     flex-shrink: 0;
-    width: var(--check-size, var(--check-size-default));
-    height: var(--check-size, var(--check-size-default));
-    border: 1.5px solid var(--check-border, var(--check-border-default));
-    border-radius: var(--check-radius, var(--check-radius-default));
-    background: var(--check-bg, var(--check-bg-default));
+    width: var(--check-size);
+    height: var(--check-size);
+    border: 1.5px solid var(--check-border);
+    border-radius: var(--check-radius);
+    background: var(--check-bg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition:
-      background var(--check-duration, var(--check-duration-default)) var(--check-easing, var(--check-easing-default)),
-      border-color var(--check-duration, var(--check-duration-default)) var(--check-easing, var(--check-easing-default));
+      background var(--check-duration) var(--check-easing),
+      border-color var(--check-duration) var(--check-easing);
   }
 
   /* Icon (checkmark or dash) */
@@ -123,7 +123,7 @@ check-ui[indeterminate] {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring, var(--check-focus-ring-default)); }
+  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/code/code.css

@@ -1,92 +1,92 @@
 @scope (code-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --code-px-default:          var(--a-space-3);
-    --code-py-default:          var(--a-space-2);
-    --code-radius-default:      var(--a-radius-md);
-    --code-radius-sm-default:   var(--a-radius-sm);
-    --code-copy-px-default:     var(--a-space-1);
-    --code-copy-py-default:     var(--a-space-0-5);
-    --code-lint-marker-w-default: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
+    --code-px:          var(--a-space-3);
+    --code-py:          var(--a-space-2);
+    --code-radius:      var(--a-radius-md);
+    --code-radius-sm:   var(--a-radius-sm);
+    --code-copy-px:     var(--a-space-1);
+    --code-copy-py:     var(--a-space-0-5);
+    --code-lint-marker-w: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
 
     /* ── Colors ── */
-    --code-bg-default:          var(--a-bg);
-    --code-fg-default:          var(--a-fg);
-    --code-border-default:      var(--a-border-subtle);
-    --code-header-bg-default:   var(--a-bg-scrim);
-    --code-header-fg-default:   var(--a-fg-muted);
-    --code-copy-hover-bg-default: var(--a-bg-muted);
-    --code-copy-hover-fg-default: var(--a-fg);
+    --code-bg:          var(--a-bg);
+    --code-fg:          var(--a-fg);
+    --code-border:      var(--a-border-subtle);
+    --code-header-bg:   var(--a-bg-scrim);
+    --code-header-fg:   var(--a-fg-muted);
+    --code-copy-hover-bg: var(--a-bg-muted);
+    --code-copy-hover-fg: var(--a-fg);
 
     /* ── Typography ── */
-    --code-font-default:        var(--a-font-family-code);
-    --code-font-size-default:   var(--a-ui-sm);
-    --code-header-font-default: var(--a-ui-sm);
+    --code-font:        var(--a-font-family-code);
+    --code-font-size:   var(--a-ui-sm);
+    --code-header-font: var(--a-ui-sm);
 
     /* ── Transition ── */
-    --code-duration-default:    var(--a-duration-fast);
-    --code-easing-default:      var(--a-easing);
+    --code-duration:    var(--a-duration-fast);
+    --code-easing:      var(--a-easing);
 
     /* ── Editor chrome (CodeMirror 6) ──
        Active only when `[language]` triggers the CM mount. Still safe
        to emit in read-only mode; unused until `.cm-editor` is in the
        DOM. See docs/specs/code-editor.md §6. */
-    --code-gutter-bg-default:        var(--a-bg-subtle);
-    --code-gutter-fg-default:        var(--a-fg-muted);
+    --code-gutter-bg:        var(--a-bg-subtle);
+    --code-gutter-fg:        var(--a-fg-muted);
     /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
        the transparent operand's hue resolves to 0, red-shifting the mix.
        oklab is hue-agnostic and visually identical in fixed engines. */
-    --code-active-line-bg-default:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
-    --code-selection-bg-default:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
-    --code-selection-match-default:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
-    --code-cursor-default:           var(--a-accent-strong);
-    --code-focus-ring-default:       var(--a-focus-ring);
+    --code-active-line-bg:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
+    --code-selection-bg:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
+    --code-selection-match:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
+    --code-cursor:           var(--a-accent-strong);
+    --code-focus-ring:       var(--a-focus-ring);
 
     /* ── Syntax highlight tokens ──
        Map Lezer/CodeMirror highlight tag names to AdiaUI semantic
        tokens. Overridable per-instance by setting `--code-tok-*` on
        any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
        class → role map. */
-    --code-tok-comment-default:      var(--a-fg-subtle);
-    --code-tok-keyword-default:      var(--a-accent-strong);
-    --code-tok-string-default:       var(--a-success-strong);
-    --code-tok-number-default:       var(--a-info-strong);
-    --code-tok-boolean-default:      var(--a-info-strong);
-    --code-tok-operator-default:     var(--a-fg);
-    --code-tok-punctuation-default:  var(--a-fg-muted);
-    --code-tok-function-default:     var(--a-brand-strong);
-    --code-tok-variable-default:     var(--a-fg);
-    --code-tok-type-default:         var(--a-warning-strong);
-    --code-tok-property-default:     var(--a-fg);
-    --code-tok-tag-default:          var(--a-accent-strong);
-    --code-tok-attribute-default:    var(--a-warning-strong);
-    --code-tok-url-default:          var(--a-info-strong);
-    --code-tok-invalid-default:      var(--a-danger-strong);
+    --code-tok-comment:      var(--a-fg-subtle);
+    --code-tok-keyword:      var(--a-accent-strong);
+    --code-tok-string:       var(--a-success-strong);
+    --code-tok-number:       var(--a-info-strong);
+    --code-tok-boolean:      var(--a-info-strong);
+    --code-tok-operator:     var(--a-fg);
+    --code-tok-punctuation:  var(--a-fg-muted);
+    --code-tok-function:     var(--a-brand-strong);
+    --code-tok-variable:     var(--a-fg);
+    --code-tok-type:         var(--a-warning-strong);
+    --code-tok-property:     var(--a-fg);
+    --code-tok-tag:          var(--a-accent-strong);
+    --code-tok-attribute:    var(--a-warning-strong);
+    --code-tok-url:          var(--a-info-strong);
+    --code-tok-invalid:      var(--a-danger-strong);
 
     /* ── Lint markers (Phase 3 — editable JSON) ──
        `@codemirror/lint` paints gutter markers + diagnostic tooltips
        + inline underlines. Only fires in editable mode with a linter
        attached; read-only instances never see these selectors. */
-    --code-lint-gutter-bg-default:   var(--a-bg-subtle);
-    --code-lint-error-default:       var(--a-danger-strong);
-    --code-lint-warning-default:     var(--a-warning-strong);
-    --code-lint-info-default:        var(--a-info-strong);
-    --code-lint-tooltip-bg-default:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
-    --code-lint-tooltip-fg-default:  var(--a-fg);
-    --code-lint-tooltip-border-default: var(--a-border-subtle);
+    --code-lint-gutter-bg:   var(--a-bg-subtle);
+    --code-lint-error:       var(--a-danger-strong);
+    --code-lint-warning:     var(--a-warning-strong);
+    --code-lint-info:        var(--a-info-strong);
+    --code-lint-tooltip-bg:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
+    --code-lint-tooltip-fg:  var(--a-fg);
+    --code-lint-tooltip-border: var(--a-border-subtle);
   }
 
   /* ── Block (default) ── */
   :scope {
     box-sizing: border-box;
     display: block;
-    border: 1px solid var(--code-border, var(--code-border-default));
-    border-radius: var(--code-radius, var(--code-radius-default));
+    border: 1px solid var(--code-border);
+    border-radius: var(--code-radius);
     overflow: hidden;
-    background: var(--code-bg, var(--code-bg-default));
-    color: var(--code-fg, var(--code-fg-default));
-    font-family: var(--code-font, var(--code-font-default));
-    font-size: var(--code-font-size, var(--code-font-size-default));
+    background: var(--code-bg);
+    color: var(--code-fg);
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
   }
 
   /* Header — chrome band above the code block */
@@ -96,11 +96,11 @@
     align-items: center;
     justify-content: space-between;
     min-height: var(--a-chrome-pane-header-height);
-    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
-    background: var(--code-header-bg, var(--code-header-bg-default));
-    border-bottom: 1px solid var(--code-border, var(--code-border-default));
-    font-size: var(--code-header-font, var(--code-header-font-default));
-    color: var(--code-header-fg, var(--code-header-fg-default));
+    padding: var(--code-py) var(--code-px);
+    background: var(--code-header-bg);
+    border-bottom: 1px solid var(--code-border);
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
   }
 
   & > header [slot="label"] {
@@ -113,17 +113,17 @@
   & > header [slot="copy"] {
     all: unset;
     cursor: pointer;
-    font-size: var(--code-header-font, var(--code-header-font-default));
-    color: var(--code-header-fg, var(--code-header-fg-default));
-    padding: var(--code-copy-py, var(--code-copy-py-default)) var(--code-copy-px, var(--code-copy-px-default));
-    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
+    padding: var(--code-copy-py) var(--code-copy-px);
+    border-radius: var(--code-radius-sm);
     transition:
-      background var(--code-duration, var(--code-duration-default)) var(--code-easing, var(--code-easing-default)),
-      color var(--code-duration, var(--code-duration-default)) var(--code-easing, var(--code-easing-default));
+      background var(--code-duration) var(--code-easing),
+      color var(--code-duration) var(--code-easing);
   }
   & > header [slot="copy"]:hover {
-    background: var(--code-copy-hover-bg, var(--code-copy-hover-bg-default));
-    color: var(--code-copy-hover-fg, var(--code-copy-hover-fg-default));
+    background: var(--code-copy-hover-bg);
+    color: var(--code-copy-hover-fg);
   }
 
   /* Pre > Code — reset any ambient page styling (margins, borders,
@@ -134,10 +134,10 @@
     border: none;
     border-radius: 0;
     background: transparent;
-    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
+    padding: var(--code-py) var(--code-px);
     overflow-x: auto;
-    font-family: var(--code-font, var(--code-font-default));
-    font-size: var(--code-font-size, var(--code-font-size-default));
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
     line-height: 1.5;
     scrollbar-width: none;
   }
@@ -170,8 +170,8 @@
     grid-template-columns: 1fr;
     /* Bleed the row tint to the pre's padding edges so it reads as a
        full-width line, not a gap-margined pill. */
-    margin-inline: calc(-1 * var(--code-px, var(--code-px-default)));
-    padding-inline: var(--code-px, var(--code-px-default));
+    margin-inline: calc(-1 * var(--code-px));
+    padding-inline: var(--code-px);
   }
   & > pre > code[data-line-numbers] > [data-line-state] {
     grid-template-columns: auto 1fr;
@@ -205,21 +205,21 @@
     align-items: center;
     justify-content: space-between;
     min-height: var(--a-chrome-pane-footer-height);
-    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
-    background: var(--code-header-bg, var(--code-header-bg-default));
-    border-top: 1px solid var(--code-border, var(--code-border-default));
-    font-size: var(--code-header-font, var(--code-header-font-default));
-    color: var(--code-header-fg, var(--code-header-fg-default));
+    padding: var(--code-py) var(--code-px);
+    background: var(--code-header-bg);
+    border-top: 1px solid var(--code-border);
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
   }
 
   /* ── Inline ── */
   :scope[inline] {
     display: inline;
     padding: 0.1em 0.4em;
-    background: var(--code-bg, var(--code-bg-default));
+    background: var(--code-bg);
     border: none;
-    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
-    font-family: var(--code-font, var(--code-font-default));
+    border-radius: var(--code-radius-sm);
+    font-family: var(--code-font);
     font-size: 0.9em;
     overflow: visible;
   }
@@ -295,9 +295,9 @@
 
   :scope .cm-editor {
     background: transparent;
-    color: var(--code-fg, var(--code-fg-default));
-    font-family: var(--code-font, var(--code-font-default));
-    font-size: var(--code-font-size, var(--code-font-size-default));
+    color: var(--code-fg);
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
     line-height: 1.5;
   }
 
@@ -313,64 +313,64 @@
   }
 
   :scope .cm-content {
-    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
-    caret-color: var(--code-cursor, var(--code-cursor-default));
+    padding: var(--code-py) var(--code-px);
+    caret-color: var(--code-cursor);
   }
 
   :scope .cm-editor.cm-focused {
-    outline: 2px solid var(--code-focus-ring, var(--code-focus-ring-default));
+    outline: 2px solid var(--code-focus-ring);
     outline-offset: -2px;
   }
 
   :scope .cm-gutters {
-    background: var(--code-gutter-bg, var(--code-gutter-bg-default));
-    color: var(--code-gutter-fg, var(--code-gutter-fg-default));
-    border-right: 1px solid var(--code-border, var(--code-border-default));
+    background: var(--code-gutter-bg);
+    color: var(--code-gutter-fg);
+    border-right: 1px solid var(--code-border);
   }
 
   :scope .cm-activeLine {
-    background: var(--code-active-line-bg, var(--code-active-line-bg-default));
+    background: var(--code-active-line-bg);
   }
   :scope .cm-activeLineGutter {
-    background: var(--code-active-line-bg, var(--code-active-line-bg-default));
-    color: var(--code-fg, var(--code-fg-default));
+    background: var(--code-active-line-bg);
+    color: var(--code-fg);
   }
 
   :scope .cm-selectionBackground,
   :scope ::selection {
-    background: var(--code-selection-bg, var(--code-selection-bg-default));
+    background: var(--code-selection-bg);
   }
 
   :scope .cm-selectionMatch {
-    background: var(--code-selection-match, var(--code-selection-match-default));
+    background: var(--code-selection-match);
   }
 
   :scope .cm-cursor {
-    border-left-color: var(--code-cursor, var(--code-cursor-default));
+    border-left-color: var(--code-cursor);
   }
 
   /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
-  :scope .tok-comment     { color: var(--code-tok-comment, var(--code-tok-comment-default)); font-style: italic; }
-  :scope .tok-keyword     { color: var(--code-tok-keyword, var(--code-tok-keyword-default)); font-weight: 500; }
-  :scope .tok-string      { color: var(--code-tok-string, var(--code-tok-string-default)); }
-  :scope .tok-number      { color: var(--code-tok-number, var(--code-tok-number-default)); }
-  :scope .tok-boolean     { color: var(--code-tok-boolean, var(--code-tok-boolean-default)); }
-  :scope .tok-operator    { color: var(--code-tok-operator, var(--code-tok-operator-default)); }
-  :scope .tok-punctuation { color: var(--code-tok-punctuation, var(--code-tok-punctuation-default)); }
-  :scope .tok-function    { color: var(--code-tok-function, var(--code-tok-function-default)); }
-  :scope .tok-variable    { color: var(--code-tok-variable, var(--code-tok-variable-default)); }
-  :scope .tok-type        { color: var(--code-tok-type, var(--code-tok-type-default)); font-weight: 500; }
-  :scope .tok-property    { color: var(--code-tok-property, var(--code-tok-property-default)); }
-  :scope .tok-tag         { color: var(--code-tok-tag, var(--code-tok-tag-default)); }
-  :scope .tok-attribute   { color: var(--code-tok-attribute, var(--code-tok-attribute-default)); }
-  :scope .tok-url         { color: var(--code-tok-url, var(--code-tok-url-default)); text-decoration: underline; }
-  :scope .tok-invalid     { color: var(--code-tok-invalid, var(--code-tok-invalid-default)); text-decoration: wavy underline; }
+  :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
+  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
+  :scope .tok-string      { color: var(--code-tok-string); }
+  :scope .tok-number      { color: var(--code-tok-number); }
+  :scope .tok-boolean     { color: var(--code-tok-boolean); }
+  :scope .tok-operator    { color: var(--code-tok-operator); }
+  :scope .tok-punctuation { color: var(--code-tok-punctuation); }
+  :scope .tok-function    { color: var(--code-tok-function); }
+  :scope .tok-variable    { color: var(--code-tok-variable); }
+  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
+  :scope .tok-property    { color: var(--code-tok-property); }
+  :scope .tok-tag         { color: var(--code-tok-tag); }
+  :scope .tok-attribute   { color: var(--code-tok-attribute); }
+  :scope .tok-url         { color: var(--code-tok-url); text-decoration: underline; }
+  :scope .tok-invalid     { color: var(--code-tok-invalid); text-decoration: wavy underline; }
 
   /* ── Lint gutter + diagnostics ──
      Styles the `@codemirror/lint` markers in the gutter, the inline
      wavy underline on the diagnostic range, and the tooltip panel. */
   :scope .cm-gutter-lint {
-    background: var(--code-lint-gutter-bg, var(--code-lint-gutter-bg-default));
+    background: var(--code-lint-gutter-bg);
     width: 1em;
   }
   :scope .cm-lint-marker {
@@ -378,19 +378,19 @@
     height: 0.7em;
     margin: 0.15em 0.15em;
   }
-  :scope .cm-lint-marker-error   { color: var(--code-lint-error, var(--code-lint-error-default)); }
-  :scope .cm-lint-marker-warning { color: var(--code-lint-warning, var(--code-lint-warning-default)); }
-  :scope .cm-lint-marker-info    { color: var(--code-lint-info, var(--code-lint-info-default)); }
+  :scope .cm-lint-marker-error   { color: var(--code-lint-error); }
+  :scope .cm-lint-marker-warning { color: var(--code-lint-warning); }
+  :scope .cm-lint-marker-info    { color: var(--code-lint-info); }
 
-  :scope .cm-lintRange-error   { background: none; text-decoration: wavy underline var(--code-lint-error, var(--code-lint-error-default)); }
-  :scope .cm-lintRange-warning { background: none; text-decoration: wavy underline var(--code-lint-warning, var(--code-lint-warning-default)); }
-  :scope .cm-lintRange-info    { background: none; text-decoration: wavy underline var(--code-lint-info, var(--code-lint-info-default)); }
+  :scope .cm-lintRange-error   { background: none; text-decoration: wavy underline var(--code-lint-error); }
+  :scope .cm-lintRange-warning { background: none; text-decoration: wavy underline var(--code-lint-warning); }
+  :scope .cm-lintRange-info    { background: none; text-decoration: wavy underline var(--code-lint-info); }
 
   :scope .cm-tooltip.cm-tooltip-lint {
-    background: var(--code-lint-tooltip-bg, var(--code-lint-tooltip-bg-default));
-    color: var(--code-lint-tooltip-fg, var(--code-lint-tooltip-fg-default));
-    border: 1px solid var(--code-lint-tooltip-border, var(--code-lint-tooltip-border-default));
-    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
+    background: var(--code-lint-tooltip-bg);
+    color: var(--code-lint-tooltip-fg);
+    border: 1px solid var(--code-lint-tooltip-border);
+    border-radius: var(--code-radius-sm);
     padding: var(--a-space-1) var(--a-space-2);
     font-size: var(--a-ui-sm);
     font-family: var(--a-font-family);
@@ -398,11 +398,11 @@
   }
   :scope .cm-diagnostic {
     padding: 0;
-    border-inline-start: var(--code-lint-marker-w, var(--code-lint-marker-w-default)) solid transparent;
+    border-inline-start: var(--code-lint-marker-w) solid transparent;
     padding-inline-start: var(--a-space-2);
   }
-  :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error, var(--code-lint-error-default)); }
-  :scope .cm-diagnostic-warning { border-inline-start-color: var(--code-lint-warning, var(--code-lint-warning-default)); }
-  :scope .cm-diagnostic-info    { border-inline-start-color: var(--code-lint-info, var(--code-lint-info-default)); }
+  :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error); }
+  :scope .cm-diagnostic-warning { border-inline-start-color: var(--code-lint-warning); }
+  :scope .cm-diagnostic-info    { border-inline-start-color: var(--code-lint-info); }
   :scope .cm-diagnosticText { white-space: pre-wrap; }
 }

package/components/col/col.a2ui.json

@@ -22,7 +22,7 @@
       "const": "Col"
     },
     "gap": {
-      "description": "Gap between children. Named scale (xs/sm/md/lg/xl) or numeric spacing rung (\"1\"…\"16\", mapped to --a-space-N). Accepts `@bp` notation: gap=\"2 4@md\" = 2 below md, 4 from md upward.",
+      "description": "Gap between children. Two grammars: a NAMED scale (xs/sm/md/lg/xl) and an integer space-rung (\"0\"…\"10\", \"12\", \"16\", mapped to --a-space-N). The named scale is parametric (half + half·--a-gap-k, = 4/8/12/16/20px at the default k=1); the integer rungs are literal / k-independent. At k=1 the two coincide: xs=1, sm=2, md=3, lg=4, xl=5. Accepts `@bp` notation: gap=\"2 4@md\" = 2 below md, 4 from md upward.",
       "type": "string",
       "default": "md"
     },