@adia-ai/web-components 0.7.3 → 0.7.4

package/components/option-card/option-card.css

@@ -2,83 +2,83 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 option-card-ui:not([checked]):not([disabled]):hover {
-  background: var(--option-card-bg-hover, var(--option-card-bg-hover-default));
-  border-color: var(--option-card-border-hover, var(--option-card-border-hover-default));
+  background: var(--option-card-bg-hover);
+  border-color: var(--option-card-border-hover);
 }
 option-card-ui[checked] > :not([slot]) {
   display: block;
 }
 option-card-ui[checked] {
-  background: var(--option-card-bg-checked, var(--option-card-bg-checked-default));
-  border-color: var(--option-card-border-checked, var(--option-card-border-checked-default));
+  background: var(--option-card-bg-checked);
+  border-color: var(--option-card-border-checked);
 }
 option-card-ui[checked]::before {
-  border-color: var(--option-card-radio-fill, var(--option-card-radio-fill-default));
+  border-color: var(--option-card-radio-fill);
   background:
     radial-gradient(
       circle,
-      var(--option-card-radio-dot, var(--option-card-radio-dot-default)) 0 30%,
-      var(--option-card-radio-fill, var(--option-card-radio-fill-default)) 30% 100%
+      var(--option-card-radio-dot) 0 30%,
+      var(--option-card-radio-fill) 30% 100%
     );
 }
 option-card-ui[checked] [slot="heading"] {
-  color: var(--option-card-heading-color-checked, var(--option-card-heading-color-checked-default));
+  color: var(--option-card-heading-color-checked);
 }
 option-card-ui[checked] [slot="icon"] {
-  color: var(--option-card-icon-color-checked, var(--option-card-icon-color-checked-default));
+  color: var(--option-card-icon-color-checked);
 }
 
 @scope (option-card-ui) {
   :where(:scope) {
     /* ── Container ── */
-    --option-card-padding-block-default:    var(--a-space-3);
-    --option-card-padding-inline-default:   var(--a-space-4);
-    --option-card-radius-default:           var(--a-radius-md);
-    --option-card-bg-default:               var(--a-bg);
-    --option-card-border-default:           var(--a-border);
-    --option-card-gap-x-default:            var(--a-space-3);
-    --option-card-gap-y-default:            var(--a-space-1);
+    --option-card-padding-block:    var(--a-space-3);
+    --option-card-padding-inline:   var(--a-space-4);
+    --option-card-radius:           var(--a-radius-md);
+    --option-card-bg:               var(--a-bg);
+    --option-card-border:           var(--a-border);
+    --option-card-gap-x:            var(--a-space-3);
+    --option-card-gap-y:            var(--a-space-1);
 
     /* ── State: hover ── */
-    --option-card-bg-hover-default:         var(--a-bg-muted);
-    --option-card-border-hover-default:     var(--a-fg-subtle);
+    --option-card-bg-hover:         var(--a-bg-muted);
+    --option-card-border-hover:     var(--a-fg-subtle);
 
     /* ── State: checked ── */
-    --option-card-bg-checked-default:       var(--a-accent-muted);
-    --option-card-border-checked-default:   var(--a-accent);
+    --option-card-bg-checked:       var(--a-accent-muted);
+    --option-card-border-checked:   var(--a-accent);
 
     /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
-    --option-card-radio-size-default:       var(--a-toggle-size);
-    --option-card-radio-bg-default:         var(--a-bg);
-    --option-card-radio-border-default:     var(--a-border);
-    --option-card-radio-fill-default:       var(--a-accent);
+    --option-card-radio-size:       var(--a-toggle-size);
+    --option-card-radio-bg:         var(--a-bg);
+    --option-card-radio-border:     var(--a-border);
+    --option-card-radio-fill:       var(--a-accent);
     /* Mirror radio.css's --radio-fg-checked recipe: an always-light
        token rather than --a-accent-fg, which can flip dark depending
        on theme/scheme combos and produce a near-black inner dot
        against the accent disc. */
-    --option-card-radio-dot-default:        var(--a-chrome-light);
+    --option-card-radio-dot:        var(--a-chrome-light);
 
     /* ── Typography ── */
-    --option-card-heading-color-default:          var(--a-fg);
-    --option-card-heading-color-checked-default:  var(--a-fg-strong);
-    --option-card-heading-weight-default:         var(--a-weight-medium);
-    --option-card-heading-size-default:           var(--a-ui-size);
-    --option-card-desc-color-default:             var(--a-fg-muted);
-    --option-card-desc-size-default:              var(--a-ui-sm);
-    --option-card-desc-line-height-default:       1.4;
-    --option-card-icon-color-default:             var(--a-fg-subtle);
-    --option-card-icon-color-checked-default:     var(--a-fg-strong);
-    --option-card-icon-size-default:              1.5rem;
+    --option-card-heading-color:          var(--a-fg);
+    --option-card-heading-color-checked:  var(--a-fg-strong);
+    --option-card-heading-weight:         var(--a-weight-medium);
+    --option-card-heading-size:           var(--a-ui-size);
+    --option-card-desc-color:             var(--a-fg-muted);
+    --option-card-desc-size:              var(--a-ui-sm);
+    --option-card-desc-line-height:       1.4;
+    --option-card-icon-color:             var(--a-fg-subtle);
+    --option-card-icon-color-checked:     var(--a-fg-strong);
+    --option-card-icon-size:              1.5rem;
 
     /* ── State: disabled ── */
-    --option-card-disabled-opacity-default: 0.6;
+    --option-card-disabled-opacity: 0.6;
 
     /* ── Focus ── */
-    --option-card-focus-ring-default:       var(--a-focus-ring);
+    --option-card-focus-ring:       var(--a-focus-ring);
 
     /* ── Transitions ── */
-    --option-card-duration-default:         var(--a-duration-fast);
-    --option-card-easing-default:           var(--a-easing);
+    --option-card-duration:         var(--a-duration-fast);
+    --option-card-easing:           var(--a-easing);
   }
 
   /* ── Base — grid: indicator | (heading + description). Optional icon
@@ -90,19 +90,19 @@ option-card-ui[checked] [slot="icon"] {
     grid-template-areas:
       "indicator heading"
       "indicator description";
-    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
-    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
-    padding: var(--option-card-padding-block, var(--option-card-padding-block-default)) var(--option-card-padding-inline, var(--option-card-padding-inline-default));
-    border: 1px solid var(--option-card-border, var(--option-card-border-default));
-    border-radius: var(--option-card-radius, var(--option-card-radius-default));
-    background: var(--option-card-bg, var(--option-card-bg-default));
+    column-gap: var(--option-card-gap-x);
+    row-gap: var(--option-card-gap-y);
+    padding: var(--option-card-padding-block) var(--option-card-padding-inline);
+    border: 1px solid var(--option-card-border);
+    border-radius: var(--option-card-radius);
+    background: var(--option-card-bg);
     cursor: pointer;
     user-select: none;
     outline: none;
     transition:
-      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
-      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
-      box-shadow var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
+      background var(--option-card-duration) var(--option-card-easing),
+      border-color var(--option-card-duration) var(--option-card-easing),
+      box-shadow var(--option-card-duration) var(--option-card-easing);
   }
 
   /* When an icon slot is present, insert a third column for it
@@ -116,41 +116,41 @@ option-card-ui[checked] [slot="icon"] {
   :scope [slot="icon"] {
     grid-area: icon;
     align-self: start;
-    color: var(--option-card-icon-color, var(--option-card-icon-color-default));
-    --a-icon-size: var(--option-card-icon-size, var(--option-card-icon-size-default));
-    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
+    color: var(--option-card-icon-color);
+    --a-icon-size: var(--option-card-icon-size);
+    transition: color var(--option-card-duration) var(--option-card-easing);
   }
 
   /* ── Indicator — pure CSS radio circle, no separate <radio-ui>. */
   :scope::before {
     content: '';
     grid-area: indicator;
-    width: var(--option-card-radio-size, var(--option-card-radio-size-default));
-    height: var(--option-card-radio-size, var(--option-card-radio-size-default));
-    border: 1.5px solid var(--option-card-radio-border, var(--option-card-radio-border-default));
+    width: var(--option-card-radio-size);
+    height: var(--option-card-radio-size);
+    border: 1.5px solid var(--option-card-radio-border);
     border-radius: var(--a-radius-full);
-    background: var(--option-card-radio-bg, var(--option-card-radio-bg-default));
+    background: var(--option-card-radio-bg);
     align-self: start;
     margin-block-start: 0.125rem;
     flex-shrink: 0;
     transition:
-      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
-      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
+      background var(--option-card-duration) var(--option-card-easing),
+      border-color var(--option-card-duration) var(--option-card-easing);
   }
 
   /* ── Slots — heading + description ── */
   :scope [slot="heading"] {
     grid-area: heading;
-    color: var(--option-card-heading-color, var(--option-card-heading-color-default));
-    font-weight: var(--option-card-heading-weight, var(--option-card-heading-weight-default));
-    font-size: var(--option-card-heading-size, var(--option-card-heading-size-default));
-    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
+    color: var(--option-card-heading-color);
+    font-weight: var(--option-card-heading-weight);
+    font-size: var(--option-card-heading-size);
+    transition: color var(--option-card-duration) var(--option-card-easing);
   }
   :scope [slot="description"] {
     grid-area: description;
-    color: var(--option-card-desc-color, var(--option-card-desc-color-default));
-    font-size: var(--option-card-desc-size, var(--option-card-desc-size-default));
-    line-height: var(--option-card-desc-line-height, var(--option-card-desc-line-height-default));
+    color: var(--option-card-desc-color);
+    font-size: var(--option-card-desc-size);
+    line-height: var(--option-card-desc-line-height);
   }
 
   /* ── Default slot — "spillover" content revealed when checked.
@@ -182,7 +182,7 @@ option-card-ui[checked] [slot="icon"] {
   :scope[layout="tile"] {
     display: flex;
     flex-direction: column;
-    gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
+    gap: var(--option-card-gap-y);
     position: relative;
     /* padding inherited from base :scope (token-driven, --option-card-padding-*) */
   }
@@ -195,8 +195,8 @@ option-card-ui[checked] [slot="icon"] {
   :scope[layout="tile"]::before {
     position: absolute;
     grid-area: auto;
-    inset-block-start: var(--option-card-padding-block, var(--option-card-padding-block-default));
-    inset-inline-end: var(--option-card-padding-inline, var(--option-card-padding-inline-default));
+    inset-block-start: var(--option-card-padding-block);
+    inset-inline-end: var(--option-card-padding-inline);
     margin-block-start: 0;
   }
   /* Visual order is fixed via `order`, NOT DOM order: composites
@@ -206,7 +206,7 @@ option-card-ui[checked] [slot="icon"] {
   :scope[layout="tile"] [slot="icon"] {
     order: 1;
     align-self: start;
-    --option-card-icon-size-default: 1.75rem;
+    --option-card-icon-size: 1.75rem;
   }
   :scope[layout="tile"] [slot="heading"] {
     order: 2;
@@ -231,11 +231,11 @@ option-card-ui[checked] [slot="icon"] {
   /* ── State: disabled ── */
   :scope[disabled] {
     cursor: not-allowed;
-    opacity: var(--option-card-disabled-opacity, var(--option-card-disabled-opacity-default));
+    opacity: var(--option-card-disabled-opacity);
   }
 
   /* ── Focus ── */
   :scope:focus-visible {
-    box-shadow: var(--option-card-focus-ring, var(--option-card-focus-ring-default));
+    box-shadow: var(--option-card-focus-ring);
   }
 }

package/components/otp-input/otp-input.css

@@ -5,23 +5,23 @@
        (~52px) so they read as comfortable single-digit boxes. Radius is the
        plain --a-radius-lg token (no min()/clamp expression — radius patterns
        stay simple). Scales with [size] + density (relative to --a-size). */
-    --otp-input-size-default:         calc(var(--a-size) * 1.75);
-    --otp-input-gap-default:          var(--a-space-2);
-    --otp-input-radius-default:       var(--a-radius-lg);
-    --otp-input-border-default:       var(--a-ui-border);
-    --otp-input-border-hover-default: var(--a-ui-border-hover);
-    --otp-input-border-focus-default: var(--a-accent);
-    --otp-input-bg-disabled-default:  var(--a-ui-bg-disabled);
-    --otp-input-fg-disabled-default:  var(--a-ui-text-disabled);
-    --otp-input-border-disabled-default: var(--a-ui-border-disabled);
-    --otp-input-font-default:         var(--a-font-family-code);
-    --otp-input-font-size-default:    var(--a-body-md);
-    --otp-input-bg-default:           var(--a-ui-bg);
-    --otp-input-fg-default:           var(--a-ui-text);
+    --otp-input-size:         calc(var(--a-size) * 1.75);
+    --otp-input-gap:          var(--a-space-2);
+    --otp-input-radius:       var(--a-radius-lg);
+    --otp-input-border:       var(--a-ui-border);
+    --otp-input-border-hover: var(--a-ui-border-hover);
+    --otp-input-border-focus: var(--a-accent);
+    --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
+    --otp-input-fg-disabled:  var(--a-ui-text-disabled);
+    --otp-input-border-disabled: var(--a-ui-border-disabled);
+    --otp-input-font:         var(--a-font-family-code);
+    --otp-input-font-size:    var(--a-body-md);
+    --otp-input-bg:           var(--a-ui-bg);
+    --otp-input-fg:           var(--a-ui-text);
 
     /* ── Transitions ── */
-    --otp-input-duration-default:     var(--a-duration-fast);
-    --otp-input-easing-default:       var(--a-easing);
+    --otp-input-duration:     var(--a-duration-fast);
+    --otp-input-easing:       var(--a-easing);
   }
 
   :scope {
@@ -29,7 +29,7 @@
     box-sizing: border-box;
     display: flex;
     justify-content: center;
-    gap: var(--otp-input-gap, var(--otp-input-gap-default));
+    gap: var(--otp-input-gap);
     /* Fill the container (a block-level control per ADR-0037) so the digit
        boxes grow to use the available width instead of sitting content-width
        on the left. Boxes flex to fill up to their cap; once capped (very wide
@@ -47,18 +47,18 @@
     box-sizing: border-box;
     flex: 1 1 0;
     min-width: 0;
-    max-width: var(--otp-input-size, var(--otp-input-size-default));
+    max-width: var(--otp-input-size);
     aspect-ratio: 1;
     text-align: center;
-    border: 1px solid var(--otp-input-border, var(--otp-input-border-default));
-    border-radius: var(--otp-input-radius, var(--otp-input-radius-default));
-    background: var(--otp-input-bg, var(--otp-input-bg-default));
-    color: var(--otp-input-fg, var(--otp-input-fg-default));
-    font-family: var(--otp-input-font, var(--otp-input-font-default));
-    font-size: var(--otp-input-font-size, var(--otp-input-font-size-default));
+    border: 1px solid var(--otp-input-border);
+    border-radius: var(--otp-input-radius);
+    background: var(--otp-input-bg);
+    color: var(--otp-input-fg);
+    font-family: var(--otp-input-font);
+    font-size: var(--otp-input-font-size);
     line-height: 1;
     outline: none;
-    transition: border-color var(--otp-input-duration, var(--otp-input-duration-default)) var(--otp-input-easing, var(--otp-input-easing-default));
+    transition: border-color var(--otp-input-duration) var(--otp-input-easing);
     /* Hide number spinner */
     -moz-appearance: textfield;
   }
@@ -69,11 +69,11 @@
   }
 
   [slot="digit"]:hover:not(:disabled) {
-    border-color: var(--otp-input-border-hover, var(--otp-input-border-hover-default));
+    border-color: var(--otp-input-border-hover);
   }
 
   [slot="digit"]:focus {
-    border-color: var(--otp-input-border-focus, var(--otp-input-border-focus-default));
+    border-color: var(--otp-input-border-focus);
   }
 
   /* ── Disabled ── */
@@ -81,13 +81,13 @@
     pointer-events: none;
   }
   :scope[disabled] [slot="digit"] {
-    background: var(--otp-input-bg-disabled, var(--otp-input-bg-disabled-default));
-    color: var(--otp-input-fg-disabled, var(--otp-input-fg-disabled-default));
+    background: var(--otp-input-bg-disabled);
+    color: var(--otp-input-fg-disabled);
     /* Native dashed border — it follows the box's border-radius (a rounded
        dashed square, matching the enabled state). An SVG border-image would
        give more uniform dashes but is clipped to a SQUARE — it ignores
        border-radius — so the disabled corners wouldn't round. */
-    border: 1px dashed var(--otp-input-border-disabled, var(--otp-input-border-disabled-default));
+    border: 1px dashed var(--otp-input-border-disabled);
     cursor: not-allowed;
   }
 }

package/components/page/page.a2ui.json

@@ -29,7 +29,7 @@
       "default": ""
     },
     "padding": {
-      "description": "Page-padding scale from the spacing system. Accepts `0`–`8`\n(mapped to `--a-space-N`). Empty (no value) applies the\n`--page-padding-default` token; `0` removes padding.\n",
+      "description": "Page-padding scale from the spacing system. Accepts `0`–`8`\n(mapped to `--a-space-N`). Empty (no value) applies the\n`--page-padding` token; `0` removes padding.\n",
       "type": "string",
       "default": ""
     },

package/components/page/page.css

@@ -1,31 +1,31 @@
 @scope (page-ui) {
   :where(:scope) {
     /* ── Max-width clamps ── */
-    --page-max-width-prose-default:  65ch;
-    --page-max-width-narrow-default: 80ch;
-    --page-max-width-wide-default:   1080px;
-    --page-max-width-full-default:   100%;
+    --page-max-width-prose:  65ch;
+    --page-max-width-narrow: 80ch;
+    --page-max-width-wide:   1080px;
+    --page-max-width-full:   100%;
 
     /* ── Padding default (when [padding] is set without a value) ── */
-    --page-padding-default:  var(--a-space-6);
+    --page-padding:  var(--a-space-6);
 
     /* ── Region rhythm — vertical gap between header / section / footer,
        mirroring card-ui's section inset. The page [padding] supplies the
        outer frame; this is the inter-region spacing. ── */
-    --page-inset-default:    var(--a-space-5);
+    --page-inset:    var(--a-space-5);
 
     /* ── Padded-region sub-surface (a section[padding] inside the page) ── */
-    --page-region-bg-default:     var(--a-bg-subtle);
-    --page-region-radius-default: var(--a-radius-md);
+    --page-region-bg:     var(--a-bg-subtle);
+    --page-region-radius: var(--a-radius-md);
 
     /* ── Surfaces ── */
-    --page-bg-default:               var(--a-canvas-0);
-    --page-fg-default:               var(--a-fg);
+    --page-bg:               var(--a-canvas-0);
+    --page-fg:               var(--a-fg);
 
     /* ── Sticky-header chrome (when [data-header-stuck]) ── */
-    --page-sticky-bg-default:        var(--a-canvas-0);
-    --page-sticky-border-default:    1px solid var(--a-border-subtle);
-    --page-sticky-shadow-default:    var(--a-shadow-sm);
+    --page-sticky-bg:        var(--a-canvas-0);
+    --page-sticky-border:    1px solid var(--a-border-subtle);
+    --page-sticky-shadow:    var(--a-shadow-sm);
   }
 
   :scope {
@@ -35,18 +35,18 @@
     /* --page-pad carries the resolved [padding] value so the sticky header can
        bleed back over it (card-ui pattern) — see the sticky-header rule. */
     padding: var(--page-pad, 0);
-    background: var(--page-bg, var(--page-bg-default));
-    color: var(--page-fg, var(--page-fg-default));
+    background: var(--page-bg);
+    color: var(--page-fg);
   }
 
   /* ── max-width clamps ── */
-  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose, var(--page-max-width-prose-default));  margin-inline: auto; }
-  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow, var(--page-max-width-narrow-default)); margin-inline: auto; }
-  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide, var(--page-max-width-wide-default));   margin-inline: auto; }
-  :scope[max-width="full"]   { max-width: var(--page-max-width-full, var(--page-max-width-full-default)); }
+  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose);  margin-inline: auto; }
+  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow); margin-inline: auto; }
+  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide);   margin-inline: auto; }
+  :scope[max-width="full"]   { max-width: var(--page-max-width-full); }
 
   /* ── Padding scale (mirrors --a-space-N) — sets --page-pad, applied above ── */
-  :scope[padding=""]  { --page-pad: var(--page-padding-default); }
+  :scope[padding=""]  { --page-pad: var(--page-padding); }
   :scope[padding="0"] { --page-pad: 0; }
   :scope[padding="1"] { --page-pad: var(--a-space-1); }
   :scope[padding="2"] { --page-pad: var(--a-space-2); }
@@ -69,7 +69,7 @@
      padding edge). */
   :scope > :where(header, header-ui, section, section-ui, footer, footer-ui)
     ~ :where(header, header-ui, section, section-ui, footer, footer-ui) {
-    margin-block-start: var(--page-inset, var(--page-inset-default));
+    margin-block-start: var(--page-inset);
   }
 
   /* [bleed] — edge-to-edge region: cancel the page's inline [padding] so
@@ -82,9 +82,9 @@
   /* [padding] on a region — a padded sub-surface with its own background +
      radius, like card-ui's section[padding]. */
   :scope > :where(section, section-ui)[padding] {
-    padding: var(--page-inset, var(--page-inset-default));
-    background: var(--page-region-bg, var(--page-region-bg-default));
-    border-radius: var(--page-region-radius, var(--page-region-radius-default));
+    padding: var(--page-inset);
+    background: var(--page-region-bg);
+    border-radius: var(--page-region-radius);
   }
 
   /* ── Scroll container ── */
@@ -104,7 +104,7 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    background: var(--page-sticky-bg, var(--page-sticky-bg-default));
+    background: var(--page-sticky-bg);
     /* Bleed horizontally over the page's inline [padding] so the opaque band
        spans the full scroll width, then re-inset the content so it stays
        aligned with the body. Vertical = its own breathing room. Card-ui
@@ -115,7 +115,7 @@
   }
 
   :scope[data-header-stuck] > :where(header, header-ui) {
-    border-block-end: var(--page-sticky-border, var(--page-sticky-border-default));
-    box-shadow: var(--page-sticky-shadow, var(--page-sticky-shadow-default));
+    border-block-end: var(--page-sticky-border);
+    box-shadow: var(--page-sticky-shadow);
   }
 }

package/components/page/page.d.ts

@@ -27,7 +27,7 @@ Centered horizontally via `margin-inline: auto`.
   maxWidth: '' | 'prose' | 'narrow' | 'wide' | 'full';
   /** Page-padding scale from the spacing system. Accepts `0`–`8`
 (mapped to `--a-space-N`). Empty (no value) applies the
-`--page-padding-default` token; `0` removes padding.
+`--page-padding` token; `0` removes padding.
  */
   padding: string;
   /** Sets the page as a scroll container. `overflow-y: auto`, full

package/components/page/page.yaml

@@ -44,7 +44,7 @@ props:
     description: |
       Page-padding scale from the spacing system. Accepts `0`–`8`
       (mapped to `--a-space-N`). Empty (no value) applies the
-      `--page-padding-default` token; `0` removes padding.
+      `--page-padding` token; `0` removes padding.
     type: string
     default: ""
     reflect: true

package/components/pagination/pagination.css

@@ -12,11 +12,11 @@
 @scope (pagination-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --pagination-gap-default:          var(--a-space-1);
+    --pagination-gap:          var(--a-space-1);
 
     /* ── Ellipsis cell (the only piece pagination styles directly) ── */
-    --pagination-ellipsis-fg-default:  var(--a-fg-muted);
-    --pagination-ellipsis-font-default: var(--a-ui-size);
+    --pagination-ellipsis-fg:  var(--a-fg-muted);
+    --pagination-ellipsis-font: var(--a-ui-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
   }
 
@@ -33,7 +33,7 @@
   [slot="nav"] {
     display: flex;
     align-items: center;
-    gap: var(--pagination-gap, var(--pagination-gap-default));
+    gap: var(--pagination-gap);
   }
 
   /* ── Nested button-ui sizing handoff ──
@@ -54,8 +54,8 @@
     /* Match the height of the nested button-ui so the row baseline aligns */
     min-width: var(--a-size);
     height: var(--a-size);
-    color: var(--pagination-ellipsis-fg, var(--pagination-ellipsis-fg-default));
-    font-size: var(--pagination-ellipsis-font, var(--pagination-ellipsis-font-default));
+    color: var(--pagination-ellipsis-fg);
+    font-size: var(--pagination-ellipsis-font);
     pointer-events: none;
     user-select: none;
     line-height: 1;