@adia-ai/web-components 0.7.3 → 0.7.5

package/components/command/command.css

@@ -4,85 +4,85 @@
        No default width or height — the host pattern (dialog, popover,
        app-shell search slot, etc.) is responsible for sizing the palette.
        This keeps the component composable across overlay and inline use. */
-    --command-radius-default:             var(--a-radius-lg);
-    --command-px-default:                 var(--a-space-3);
-    --command-py-default:                 var(--a-space-3);
-    --command-gap-default:                var(--a-space-2);
-    --command-list-px-default:            var(--a-space-1);
-    --command-list-py-default:            var(--a-space-1);
-    --command-group-gap-default:          var(--a-space-1);
+    --command-radius:             var(--a-radius-lg);
+    --command-px:                 var(--a-space-3);
+    --command-py:                 var(--a-space-3);
+    --command-gap:                var(--a-space-2);
+    --command-list-px:            var(--a-space-1);
+    --command-list-py:            var(--a-space-1);
+    --command-group-gap:          var(--a-space-1);
 
     /* ── Colors ── */
-    --command-bg-default:                 var(--a-bg-subtle);
-    --command-fg-default:                 var(--a-fg);
-    --command-fg-muted-default:           var(--a-fg-muted);
-    --command-border-default:             var(--a-border-subtle);
+    --command-bg:                 var(--a-bg-subtle);
+    --command-fg:                 var(--a-fg);
+    --command-fg-muted:           var(--a-fg-muted);
+    --command-border:             var(--a-border-subtle);
 
     /* ── Elevation ── */
-    --command-shadow-default:             var(--a-shadow-lg);
+    --command-shadow:             var(--a-shadow-lg);
 
     /* ── Typography ── */
-    --command-font-size-default:          var(--a-ui-size);
-    --command-input-font-size-default:    var(--a-body-size);
+    --command-font-size:          var(--a-ui-size);
+    --command-input-font-size:    var(--a-body-size);
 
     /* ── Transition ── */
-    --command-duration-default:           var(--a-duration-fast);
-    --command-easing-default:             var(--a-easing);
+    --command-duration:           var(--a-duration-fast);
+    --command-easing:             var(--a-easing);
 
     /* ── Item ── */
-    --command-item-height-default:        var(--a-size);
-    --command-item-radius-default:        var(--a-radius-md);
-    --command-item-px-default:            var(--a-space-2);
-    --command-item-py-default:            var(--a-space-2);
-    --command-item-fg-default:            var(--a-fg-subtle);
-    --command-item-fg-hover-default:      var(--a-fg-hover);
-    --command-item-bg-hover-default:      var(--a-bg-hover);
-    --command-item-fg-disabled-default:   var(--a-ui-text-disabled);
+    --command-item-height:        var(--a-size);
+    --command-item-radius:        var(--a-radius-md);
+    --command-item-px:            var(--a-space-2);
+    --command-item-py:            var(--a-space-2);
+    --command-item-fg:            var(--a-fg-subtle);
+    --command-item-fg-hover:      var(--a-fg-hover);
+    --command-item-bg-hover:      var(--a-bg-hover);
+    --command-item-fg-disabled:   var(--a-ui-text-disabled);
 
     /* ── Shortcut ── */
-    --command-shortcut-fg-default:        var(--a-fg-muted);
-    --command-shortcut-font-size-default: var(--a-ui-sm);
+    --command-shortcut-fg:        var(--a-fg-muted);
+    --command-shortcut-font-size: var(--a-ui-sm);
 
     /* ── Group label ── */
-    --command-group-fg-default:           var(--a-fg-muted);
-    --command-group-font-size-default:    var(--a-ui-sm);
-    --command-group-font-weight-default:  var(--a-weight-medium);
-    --command-group-label-px-default:     var(--a-space-2);
-    --command-group-label-py-default:     var(--a-space-2);
+    --command-group-fg:           var(--a-fg-muted);
+    --command-group-font-size:    var(--a-ui-sm);
+    --command-group-font-weight:  var(--a-weight-medium);
+    --command-group-label-px:     var(--a-space-2);
+    --command-group-label-py:     var(--a-space-2);
 
     /* ── Empty state ── */
-    --command-empty-fg-default:           var(--a-fg-muted);
+    --command-empty-fg:           var(--a-fg-muted);
 
     /* ── Header ── */
-    --command-header-px-default:          var(--a-space-4);
-    --command-header-py-default:          var(--a-space-4);
+    --command-header-px:          var(--a-space-4);
+    --command-header-py:          var(--a-space-4);
 
     /* ── Footer ── */
-    --command-footer-fg-default:          var(--a-fg-muted);
-    --command-footer-font-size-default:   var(--a-ui-sm);
-    --command-footer-px-default:          var(--command-px, var(--command-px-default));
-    --command-footer-py-default:          var(--command-py, var(--command-py-default));
+    --command-footer-fg:          var(--a-fg-muted);
+    --command-footer-font-size:   var(--a-ui-sm);
+    --command-footer-px:          var(--command-px);
+    --command-footer-py:          var(--command-py);
 
     /* ── Footer kbd ── */
-    --command-kbd-border-default:         var(--a-border-subtle);
-    --command-kbd-radius-default:         var(--a-radius-sm);
-    --command-kbd-bg-default:             var(--a-bg-muted);
-    --command-kbd-fg-default:             var(--a-fg-muted);
+    --command-kbd-border:         var(--a-border-subtle);
+    --command-kbd-radius:         var(--a-radius-sm);
+    --command-kbd-bg:             var(--a-bg-muted);
+    --command-kbd-fg:             var(--a-fg-muted);
 
     /* ── Hint ── */
-    --command-hint-gap-default:           var(--a-space-0-5);
-    --command-hint-kbd-px-default:        var(--a-space-0-5);
+    --command-hint-gap:           var(--a-space-0-5);
+    --command-hint-kbd-px:        var(--a-space-0-5);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    background: var(--command-bg, var(--command-bg-default));
-    border: 1px solid var(--command-border, var(--command-border-default));
-    border-radius: var(--command-radius, var(--command-radius-default));
-    box-shadow: var(--command-shadow, var(--command-shadow-default));
-    font-size: var(--command-font-size, var(--command-font-size-default));
+    background: var(--command-bg);
+    border: 1px solid var(--command-border);
+    border-radius: var(--command-radius);
+    box-shadow: var(--command-shadow);
+    font-size: var(--command-font-size);
     overflow: hidden;
   }
 
@@ -90,15 +90,15 @@
   & > header {
     display: flex;
     align-items: center;
-    gap: var(--command-gap, var(--command-gap-default));
-    padding: var(--command-header-py, var(--command-header-py-default)) var(--command-header-px, var(--command-header-px-default));
-    border-bottom: 1px solid var(--command-border, var(--command-border-default));
+    gap: var(--command-gap);
+    padding: var(--command-header-py) var(--command-header-px);
+    border-bottom: 1px solid var(--command-border);
     flex-shrink: 0;
   }
 
   & > header icon-ui {
     flex-shrink: 0;
-    color: var(--command-fg-muted, var(--command-fg-muted-default));
+    color: var(--command-fg-muted);
     --a-icon-size: 1rem;
   }
 
@@ -108,15 +108,15 @@
     border: none;
     outline: none;
     background: transparent;
-    color: var(--command-fg, var(--command-fg-default));
-    font-family: inherit;
-    font-size: var(--command-input-font-size, var(--command-input-font-size-default));
+    color: var(--command-fg);
+    font-family: var(--command-font-family, var(--a-font-family-ui));
+    font-size: var(--command-input-font-size);
     line-height: 1.4;
     padding: 0;
   }
 
   & > header input::placeholder {
-    color: var(--command-fg-muted, var(--command-fg-muted-default));
+    color: var(--command-fg-muted);
   }
 
   /* Suppress focus ring on the input — the palette itself is the focused surface */
@@ -133,7 +133,7 @@
   [slot="list"] {
     flex: 1;
     overflow-y: auto;
-    padding: var(--command-list-py, var(--command-list-py-default)) var(--command-list-px, var(--command-list-px-default));
+    padding: var(--command-list-py) var(--command-list-px);
     scrollbar-width: none;
   }
 
@@ -143,22 +143,22 @@
   [role="option"] {
     display: flex;
     align-items: center;
-    gap: var(--command-gap, var(--command-gap-default));
-    min-height: var(--command-item-height, var(--command-item-height-default));
-    padding: 0 var(--command-item-px, var(--command-item-px-default));
-    border-radius: var(--command-item-radius, var(--command-item-radius-default));
-    color: var(--command-item-fg, var(--command-item-fg-default));
+    gap: var(--command-gap);
+    min-height: var(--command-item-height);
+    padding: 0 var(--command-item-px);
+    border-radius: var(--command-item-radius);
+    color: var(--command-item-fg);
     cursor: pointer;
     white-space: nowrap;
     transition:
-      background var(--command-duration, var(--command-duration-default)) var(--command-easing, var(--command-easing-default)),
-      color var(--command-duration, var(--command-duration-default)) var(--command-easing, var(--command-easing-default));
+      background var(--command-duration) var(--command-easing),
+      color var(--command-duration) var(--command-easing);
   }
 
   [role="option"] icon-ui {
-    --a-icon-size: var(--command-font-size, var(--command-font-size-default));
+    --a-icon-size: var(--command-font-size);
     flex-shrink: 0;
-    color: var(--command-fg-muted, var(--command-fg-muted-default));
+    color: var(--command-fg-muted);
   }
 
   [role="option"] [data-text] {
@@ -169,8 +169,8 @@
   }
 
   [role="option"] [data-shortcut] {
-    color: var(--command-shortcut-fg, var(--command-shortcut-fg-default));
-    font-size: var(--command-shortcut-font-size, var(--command-shortcut-font-size-default));
+    color: var(--command-shortcut-fg);
+    font-size: var(--command-shortcut-font-size);
     margin-inline-start: auto;
     flex-shrink: 0;
   }
@@ -178,32 +178,32 @@
   /* ── State: hover / active ── */
   [role="option"]:not([aria-disabled]):hover,
   [role="option"][data-active] {
-    background: var(--command-item-bg-hover, var(--command-item-bg-hover-default));
-    color: var(--command-item-fg-hover, var(--command-item-fg-hover-default));
+    background: var(--command-item-bg-hover);
+    color: var(--command-item-fg-hover);
   }
 
   [role="option"]:not([aria-disabled]):hover icon-ui,
   [role="option"][data-active] icon-ui {
-    color: var(--command-item-fg-hover, var(--command-item-fg-hover-default));
+    color: var(--command-item-fg-hover);
   }
 
   /* ── State: disabled ── */
   [role="option"][aria-disabled] {
-    color: var(--command-item-fg-disabled, var(--command-item-fg-disabled-default));
+    color: var(--command-item-fg-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
   /* ── Groups ── */
   [data-group] {
-    padding: var(--command-list-py, var(--command-list-py-default)) var(--command-list-px, var(--command-list-px-default));
+    padding: var(--command-list-py) var(--command-list-px);
   }
 
   [data-group-label] {
-    padding: var(--command-group-label-py, var(--command-group-label-py-default)) var(--command-group-label-px, var(--command-group-label-px-default));
-    font-size: var(--command-group-font-size, var(--command-group-font-size-default));
-    font-weight: var(--command-group-font-weight, var(--command-group-font-weight-default));
-    color: var(--command-group-fg, var(--command-group-fg-default));
+    padding: var(--command-group-label-py) var(--command-group-label-px);
+    font-size: var(--command-group-font-size);
+    font-weight: var(--command-group-font-weight);
+    color: var(--command-group-fg);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     white-space: nowrap;
@@ -211,8 +211,8 @@
 
   /* ── Empty state ── */
   [data-empty] {
-    padding: var(--command-py, var(--command-py-default)) var(--command-px, var(--command-px-default));
-    color: var(--command-empty-fg, var(--command-empty-fg-default));
+    padding: var(--command-py) var(--command-px);
+    color: var(--command-empty-fg);
     text-align: center;
   }
 
@@ -220,18 +220,18 @@
   & > footer {
     display: flex;
     align-items: center;
-    gap: var(--command-px, var(--command-px-default));
-    padding: var(--command-footer-py, var(--command-footer-py-default)) var(--command-footer-px, var(--command-footer-px-default));
-    border-top: 1px solid var(--command-border, var(--command-border-default));
-    font-size: var(--command-footer-font-size, var(--command-footer-font-size-default));
-    color: var(--command-footer-fg, var(--command-footer-fg-default));
+    gap: var(--command-px);
+    padding: var(--command-footer-py) var(--command-footer-px);
+    border-top: 1px solid var(--command-border);
+    font-size: var(--command-footer-font-size);
+    color: var(--command-footer-fg);
     flex-shrink: 0;
   }
 
   [data-hint] {
     display: inline-flex;
     align-items: center;
-    gap: var(--command-hint-gap, var(--command-hint-gap-default));
+    gap: var(--command-hint-gap);
   }
 
   [data-hint] kbd {
@@ -239,13 +239,13 @@
     align-items: center;
     justify-content: center;
     min-width: 1.25em;
-    padding: 0 var(--command-hint-kbd-px, var(--command-hint-kbd-px-default));
-    border: 1px solid var(--command-kbd-border, var(--command-kbd-border-default));
-    border-radius: var(--command-kbd-radius, var(--command-kbd-radius-default));
+    padding: 0 var(--command-hint-kbd-px);
+    border: 1px solid var(--command-kbd-border);
+    border-radius: var(--command-kbd-radius);
     font-family: inherit;
     font-size: inherit;
     line-height: 1.6;
-    color: var(--command-kbd-fg, var(--command-kbd-fg-default));
-    background: var(--command-kbd-bg, var(--command-kbd-bg-default));
+    color: var(--command-kbd-fg);
+    background: var(--command-kbd-bg);
   }
 }

package/components/context-menu/context-menu.css

@@ -31,7 +31,7 @@
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
-  font-family: inherit;
+  font-family: var(--context-menu-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
   color: var(--a-fg);
   opacity: 1;

package/components/date-range-picker/date-range-picker.css

@@ -11,59 +11,59 @@
 @scope (date-range-picker-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --date-range-picker-bg-default:               var(--a-bg);
-    --date-range-picker-fg-default:               var(--a-fg);
+    --date-range-picker-bg:               var(--a-bg);
+    --date-range-picker-fg:               var(--a-fg);
 
     /* Popover surface */
-    --date-range-picker-popover-bg-default:       var(--a-bg-subtle);
-    --date-range-picker-popover-border-default:   var(--a-border-subtle);
-    --date-range-picker-popover-radius-default:   var(--a-radius-lg);
-    --date-range-picker-popover-shadow-default:   var(--a-shadow-lg);
-    --date-range-picker-popover-padding-default:  var(--a-space-3);
-    --date-range-picker-popover-gap-default:      var(--a-space-3);
+    --date-range-picker-popover-bg:       var(--a-bg-subtle);
+    --date-range-picker-popover-border:   var(--a-border-subtle);
+    --date-range-picker-popover-radius:   var(--a-radius-lg);
+    --date-range-picker-popover-shadow:   var(--a-shadow-lg);
+    --date-range-picker-popover-padding:  var(--a-space-3);
+    --date-range-picker-popover-gap:      var(--a-space-3);
     /* Wide enough for the preset rail + two side-by-side month panes; raises
        anchor.js's default 32rem cap (which clipped the second month). */
-    --date-range-picker-popover-max-width-default: 48rem;
+    --date-range-picker-popover-max-width: 48rem;
 
     /* Preset rail */
-    --date-range-picker-preset-bg-default:        transparent;
-    --date-range-picker-preset-bg-hover-default:  var(--a-bg-hover);
-    --date-range-picker-preset-min-width-default: 10em;
-    --date-range-picker-preset-gap-default:       var(--a-space-1);
+    --date-range-picker-preset-bg:        transparent;
+    --date-range-picker-preset-bg-hover:  var(--a-bg-hover);
+    --date-range-picker-preset-min-width: 10em;
+    --date-range-picker-preset-gap:       var(--a-space-1);
 
     /* Selected / preview day cells (cascade into calendar) */
-    --date-range-picker-selected-bg-default:      var(--a-accent);
-    --date-range-picker-selected-fg-default:      var(--a-accent-fg);
-    --date-range-picker-preview-bg-default:       var(--a-accent-muted);
+    --date-range-picker-selected-bg:      var(--a-accent);
+    --date-range-picker-selected-fg:      var(--a-accent-fg);
+    --date-range-picker-preview-bg:       var(--a-accent-muted);
 
     /* Trigger — mirrors the canonical trigger surface used by
        <select-ui> and <calendar-picker-ui> so consumers see a
        consistent open-picker chrome across the input/picker family.
        The values are deliberately the same tokens select/calendar
        cascade onto their own `--*-trigger-*` aliases. */
-    --date-range-picker-trigger-min-width-default: 14em;
-    --date-range-picker-trigger-height-default:    var(--a-size);
-    --date-range-picker-trigger-px-default:        var(--a-ui-px);
-    --date-range-picker-trigger-gap-default:       var(--a-space-1);
-    --date-range-picker-trigger-radius-default:    var(--a-radius);
-    --date-range-picker-trigger-bg-default:        var(--a-ui-bg);
-    --date-range-picker-trigger-bg-hover-default:  var(--a-ui-bg-hover);
+    --date-range-picker-trigger-min-width: 14em;
+    --date-range-picker-trigger-height:    var(--a-size);
+    --date-range-picker-trigger-px:        var(--a-ui-px);
+    --date-range-picker-trigger-gap:       var(--a-space-1);
+    --date-range-picker-trigger-radius:    var(--a-radius);
+    --date-range-picker-trigger-bg:        var(--a-ui-bg);
+    --date-range-picker-trigger-bg-hover:  var(--a-ui-bg-hover);
     /* Placeholder state by default; a committed value bumps to --a-ui-text
        via [data-has-value] (matches input-ui / select-ui value vs placeholder). */
-    --date-range-picker-trigger-fg-default:        var(--a-ui-text-placeholder);
-    --date-range-picker-trigger-border-default:    var(--a-ui-border);
-    --date-range-picker-trigger-border-hover-default: var(--a-ui-border-hover);
-    --date-range-picker-trigger-focus-ring-default:   var(--a-focus-ring);
+    --date-range-picker-trigger-fg:        var(--a-ui-text-placeholder);
+    --date-range-picker-trigger-border:    var(--a-ui-border);
+    --date-range-picker-trigger-border-hover: var(--a-ui-border-hover);
+    --date-range-picker-trigger-focus-ring:   var(--a-focus-ring);
 
     /* Popover-internal padding (NOT the trigger — kept distinct from
        --date-range-picker-trigger-px to avoid the historical conflation
        that made the trigger render with --a-space-3 vertical inflation). */
-    --date-range-picker-px-default:               var(--a-space-3);
-    --date-range-picker-py-default:               var(--a-space-2);
+    --date-range-picker-px:               var(--a-space-3);
+    --date-range-picker-py:               var(--a-space-2);
 
     /* Motion */
-    --date-range-picker-duration-default:         var(--a-duration-fast);
-    --date-range-picker-easing-default:           var(--a-easing);
+    --date-range-picker-duration:         var(--a-duration-fast);
+    --date-range-picker-easing:           var(--a-easing);
   }
 
   /* ── Block 2 — BASE ── */
@@ -75,7 +75,7 @@
     box-sizing: border-box;
     position: relative;
     display: block;
-    color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
+    color: var(--date-range-picker-fg);
     font-size: var(--a-ui-size);
   }
 
@@ -90,14 +90,14 @@
      equal specificity so the picker trigger reads as part of the
      input/picker family rather than a generic button. */
   :scope [slot="trigger"] {
-    min-width: var(--date-range-picker-trigger-min-width, var(--date-range-picker-trigger-min-width-default));
-    min-height: var(--date-range-picker-trigger-height, var(--date-range-picker-trigger-height-default));
-    padding: 0 var(--date-range-picker-trigger-px, var(--date-range-picker-trigger-px-default));
-    gap: var(--date-range-picker-trigger-gap, var(--date-range-picker-trigger-gap-default));
-    border-radius: var(--date-range-picker-trigger-radius, var(--date-range-picker-trigger-radius-default));
-    border: 1px solid var(--date-range-picker-trigger-border, var(--date-range-picker-trigger-border-default));
-    background: var(--date-range-picker-trigger-bg, var(--date-range-picker-trigger-bg-default));
-    color: var(--date-range-picker-trigger-fg, var(--date-range-picker-trigger-fg-default));
+    min-width: var(--date-range-picker-trigger-min-width);
+    min-height: var(--date-range-picker-trigger-height);
+    padding: 0 var(--date-range-picker-trigger-px);
+    gap: var(--date-range-picker-trigger-gap);
+    border-radius: var(--date-range-picker-trigger-radius);
+    border: 1px solid var(--date-range-picker-trigger-border);
+    background: var(--date-range-picker-trigger-bg);
+    color: var(--date-range-picker-trigger-fg);
     /* Justify content so leading icon + label sit at start, trailing
        caret at end — same shape select-ui's trigger uses via
        `justify-content: space-between` on a [leading|display|caret]
@@ -106,12 +106,12 @@
     justify-content: space-between;
     line-height: 1;
     transition:
-      border-color var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
-      background   var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+      border-color var(--date-range-picker-duration) var(--date-range-picker-easing),
+      background   var(--date-range-picker-duration) var(--date-range-picker-easing);
   }
   :scope [slot="trigger"]:hover {
-    border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
-    background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
+    border-color: var(--date-range-picker-trigger-border-hover);
+    background: var(--date-range-picker-trigger-bg-hover);
   }
   /* Committed value reads as filled content (matches input-ui/select-ui),
      not as the muted placeholder. Marked by the class when a range is set. */
@@ -120,7 +120,7 @@
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
-    box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));
+    box-shadow: var(--date-range-picker-trigger-focus-ring);
   }
 
   /* States */
@@ -147,12 +147,12 @@ date-range-picker-ui [slot="popover"] {
   margin: 0;
   /* Opt into a wider anchor.js max-width cap so both month panes fit side-by-side
      (the 32rem default clipped the second month). Viewport safety still applies. */
-  --popover-max-width: var(--date-range-picker-popover-max-width, var(--date-range-picker-popover-max-width-default));
-  padding: var(--date-range-picker-py, var(--date-range-picker-py-default)) var(--date-range-picker-px, var(--date-range-picker-px-default));
-  border: 1px solid var(--date-range-picker-popover-border, var(--date-range-picker-popover-border-default));
-  border-radius: var(--date-range-picker-popover-radius, var(--date-range-picker-popover-radius-default));
-  background: var(--date-range-picker-popover-bg, var(--date-range-picker-popover-bg-default));
-  box-shadow: var(--date-range-picker-popover-shadow, var(--date-range-picker-popover-shadow-default));
+  --popover-max-width: var(--date-range-picker-popover-max-width);
+  padding: var(--date-range-picker-py) var(--date-range-picker-px);
+  border: 1px solid var(--date-range-picker-popover-border);
+  border-radius: var(--date-range-picker-popover-radius);
+  background: var(--date-range-picker-popover-bg);
+  box-shadow: var(--date-range-picker-popover-shadow);
   color: var(--a-fg);
   /* Anchor-positioning fallback — popover.css and anchor.js handle
      placement; layout here just sets the grid. */
@@ -161,14 +161,14 @@ date-range-picker-ui [slot="popover"] {
   opacity: 1;
   translate: 0 0;
   transition:
-    opacity var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
-    translate var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+    opacity var(--date-range-picker-duration) var(--date-range-picker-easing),
+    translate var(--date-range-picker-duration) var(--date-range-picker-easing);
 }
 
 date-range-picker-ui [slot="popover"]:popover-open {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: var(--date-range-picker-popover-gap, var(--date-range-picker-popover-gap-default));
+  gap: var(--date-range-picker-popover-gap);
 }
 
 date-range-picker-ui [slot="popover"]:popover-open {
@@ -189,8 +189,8 @@ date-range-picker-ui [slot="presets"] {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: var(--date-range-picker-preset-gap, var(--date-range-picker-preset-gap-default));
-  min-width: var(--date-range-picker-preset-min-width, var(--date-range-picker-preset-min-width-default));
+  gap: var(--date-range-picker-preset-gap);
+  min-width: var(--date-range-picker-preset-min-width);
 }
 
 /* When [no-presets] is set OR no preset rail exists, collapse the
@@ -224,9 +224,9 @@ date-range-picker-ui [data-calendar-area] calendar-grid-ui {
    §FB-Wave1-QA — now consumes calendar-grid-ui tokens (the extracted
    substrate primitive). */
 date-range-picker-ui calendar-grid-ui {
-  --calendar-grid-day-bg-selected: var(--date-range-picker-selected-bg, var(--date-range-picker-selected-bg-default));
-  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg, var(--date-range-picker-selected-fg-default));
-  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg, var(--date-range-picker-preview-bg-default));
+  --calendar-grid-day-bg-selected: var(--date-range-picker-selected-bg);
+  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg);
+  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg);
 }
 
 /* Comparison mode — split preset rail visual via the divider. */

package/components/datetime-picker/datetime-picker.css

@@ -11,30 +11,30 @@
 @scope (datetime-picker-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    --datetime-picker-bg-default:                  var(--a-bg);
-    --datetime-picker-fg-default:                  var(--a-fg);
+    --datetime-picker-bg:                  var(--a-bg);
+    --datetime-picker-fg:                  var(--a-fg);
 
     /* Popover surface */
-    --datetime-picker-popover-bg-default:          var(--a-bg-subtle);
-    --datetime-picker-popover-border-default:      var(--a-border-subtle);
-    --datetime-picker-popover-radius-default:      var(--a-radius-lg);
-    --datetime-picker-popover-shadow-default:      var(--a-shadow-lg);
-    --datetime-picker-popover-padding-default:     var(--a-space-3);
-    --datetime-picker-popover-gap-default:         var(--a-space-3);
+    --datetime-picker-popover-bg:          var(--a-bg-subtle);
+    --datetime-picker-popover-border:      var(--a-border-subtle);
+    --datetime-picker-popover-radius:      var(--a-radius-lg);
+    --datetime-picker-popover-shadow:      var(--a-shadow-lg);
+    --datetime-picker-popover-padding:     var(--a-space-3);
+    --datetime-picker-popover-gap:         var(--a-space-3);
 
     /* Pane divider */
-    --datetime-picker-divider-default:             var(--a-border-subtle);
+    --datetime-picker-divider:             var(--a-border-subtle);
 
     /* Trigger */
-    --datetime-picker-trigger-min-width-default:   16em;
+    --datetime-picker-trigger-min-width:   16em;
 
     /* Padding */
-    --datetime-picker-px-default:                  var(--a-space-3);
-    --datetime-picker-py-default:                  var(--a-space-2);
+    --datetime-picker-px:                  var(--a-space-3);
+    --datetime-picker-py:                  var(--a-space-2);
 
     /* Motion */
-    --datetime-picker-duration-default:            var(--a-duration-fast);
-    --datetime-picker-easing-default:              var(--a-easing);
+    --datetime-picker-duration:            var(--a-duration-fast);
+    --datetime-picker-easing:              var(--a-easing);
   }
 
   /* ── Block 2 — BASE ── */
@@ -49,7 +49,7 @@
     box-sizing: border-box;
     position: relative;
     display: block;
-    color: var(--datetime-picker-fg, var(--datetime-picker-fg-default));
+    color: var(--datetime-picker-fg);
     font-size: var(--a-ui-size);
   }
 
@@ -62,7 +62,7 @@
      left-aligned with the caret pushed to the trailing edge, not centered
      like a default button. */
   :scope [slot="trigger"] {
-    min-width: var(--datetime-picker-trigger-min-width, var(--datetime-picker-trigger-min-width-default));
+    min-width: var(--datetime-picker-trigger-min-width);
     justify-content: space-between;
     line-height: 1;
   }
@@ -93,11 +93,11 @@
    popover honors the UA `popover` `display: none` while closed. */
 datetime-picker-ui [slot="popover"] {
   margin: 0;
-  padding: var(--datetime-picker-py, var(--datetime-picker-py-default)) var(--datetime-picker-px, var(--datetime-picker-px-default));
-  border: 1px solid var(--datetime-picker-popover-border, var(--datetime-picker-popover-border-default));
-  border-radius: var(--datetime-picker-popover-radius, var(--datetime-picker-popover-radius-default));
-  background: var(--datetime-picker-popover-bg, var(--datetime-picker-popover-bg-default));
-  box-shadow: var(--datetime-picker-popover-shadow, var(--datetime-picker-popover-shadow-default));
+  padding: var(--datetime-picker-py) var(--datetime-picker-px);
+  border: 1px solid var(--datetime-picker-popover-border);
+  border-radius: var(--datetime-picker-popover-radius);
+  background: var(--datetime-picker-popover-bg);
+  box-shadow: var(--datetime-picker-popover-shadow);
   color: var(--a-fg);
   /* Anchor-positioning fallback — popover.css and anchor.js handle
      placement; layout here just sets the grid. */
@@ -106,15 +106,15 @@ datetime-picker-ui [slot="popover"] {
   opacity: 1;
   translate: 0 0;
   transition:
-    opacity var(--datetime-picker-duration, var(--datetime-picker-duration-default)) var(--datetime-picker-easing, var(--datetime-picker-easing-default)),
-    translate var(--datetime-picker-duration, var(--datetime-picker-duration-default)) var(--datetime-picker-easing, var(--datetime-picker-easing-default));
+    opacity var(--datetime-picker-duration) var(--datetime-picker-easing),
+    translate var(--datetime-picker-duration) var(--datetime-picker-easing);
 }
 
 datetime-picker-ui [slot="popover"]:popover-open {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-areas: "cal divider time";
-  gap: var(--datetime-picker-popover-gap, var(--datetime-picker-popover-gap-default));
+  gap: var(--datetime-picker-popover-gap);
   align-items: start;
 }
 
@@ -136,7 +136,7 @@ datetime-picker-ui [slot="popover"] > [data-cal-pane] {
 datetime-picker-ui [slot="popover"] > [data-pane-divider] {
   grid-area: divider;
   align-self: stretch;
-  --divider-color: var(--datetime-picker-divider, var(--datetime-picker-divider-default));
+  --divider-color: var(--datetime-picker-divider);
 }
 datetime-picker-ui [slot="popover"] > [data-time-pane] {
   grid-area: time;