@adia-ai/web-components 0.7.3 → 0.7.4

package/components/table/table.css

@@ -1,99 +1,100 @@
 @scope (table-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --table-font-size-default:        var(--a-ui-size);
-    --table-heading-size-default:     var(--a-ui-xs);
-    --table-heading-weight-default:   var(--a-weight-medium);
-    --table-heading-tracking-default: 0.06em;
-    --table-heading-fg-default:       var(--a-fg-muted);
-    --table-heading-bg-default:       transparent;
-
-    --table-fg-default:               var(--a-fg);
-    --table-fg-hover-default:         var(--a-fg-strong);
-    --table-fg-secondary-default:     var(--a-fg-muted);
-    --table-border-default:           var(--a-border-subtle);
-    --table-border-strong-default:    var(--a-border);
-    --table-py-default:               var(--a-space-3);
-    --table-px-default:               var(--a-space-4);
-
-    --table-row-bg-default:           transparent;
-    --table-row-bg-hover-default:     var(--a-bg-hover);
-    --table-row-bg-selected-default:  var(--a-bg-selected);
-    --table-row-bg-striped-default:   var(--a-bg-subtle);
-
-    --table-sort-fg-default:          var(--a-fg-muted);
-    --table-accent-default:           var(--a-primary);
-    --table-fg-disabled-default:      var(--a-ui-text-disabled);
-    --table-bg-default:               var(--a-bg);
+    --table-font-size:        var(--a-ui-size);
+    --table-font-family:      var(--a-font-family-ui);
+    --table-heading-size:     var(--a-ui-xs);
+    --table-heading-weight:   var(--a-weight-medium);
+    --table-heading-tracking: 0.06em;
+    --table-heading-fg:       var(--a-fg-muted);
+    --table-heading-bg:       transparent;
+
+    --table-fg:               var(--a-fg);
+    --table-fg-hover:         var(--a-fg-strong);
+    --table-fg-secondary:     var(--a-fg-muted);
+    --table-border:           var(--a-border-subtle);
+    --table-border-strong:    var(--a-border);
+    --table-py:               var(--a-space-3);
+    --table-px:               var(--a-space-4);
+
+    --table-row-bg:           transparent;
+    --table-row-bg-hover:     var(--a-bg-hover);
+    --table-row-bg-selected:  var(--a-bg-selected);
+    --table-row-bg-striped:   var(--a-bg-subtle);
+
+    --table-sort-fg:          var(--a-fg-muted);
+    --table-accent:           var(--a-primary);
+    --table-fg-disabled:      var(--a-ui-text-disabled);
+    --table-bg:               var(--a-bg);
     /* No default rounding — table-ui composes inside card-ui / drawer-ui
        which own the surface rounding; doubly-rounded corners (table inside
        card) look broken. Override per-instance via `--table-radius: …` if
        table-ui sits standalone on the page. */
-    --table-radius-default:           0;
+    --table-radius:           0;
 
     /* ── Resize + pinned-column intrinsics ── */
-    --table-resize-width-default:     var(--a-space-1);
-    --table-pin-shadow-width-default: var(--a-space-1);
-    --table-cell-min-width-default:   11.25rem;
+    --table-resize-width:     var(--a-space-1);
+    --table-pin-shadow-width: var(--a-space-1);
+    --table-cell-min-width:   11.25rem;
 
     /* ── Filter popover ── */
-    --table-filter-bg-default:        var(--a-canvas);
-    --table-filter-fg-default:        var(--a-canvas-text);
-    --table-filter-border-default:    var(--a-border);
-    --table-filter-radius-default:    var(--a-radius-md);
-    --table-filter-inset-default:     var(--a-space-2);
-    --table-filter-gap-default:       var(--a-space-1);
-    --table-filter-shadow-default:    var(--a-shadow-md);
-    --table-filter-input-py-default:  var(--a-space-1);
-    --table-filter-input-px-default:  var(--a-space-2);
-    --table-filter-input-radius-default: var(--a-radius-sm);
-    --table-filter-input-size-default: var(--a-ui-tiny);
-    --table-filter-btn-px-default:    var(--a-space-1);
-    --table-filter-clear-fg-default:  var(--a-accent);
+    --table-filter-bg:        var(--a-canvas);
+    --table-filter-fg:        var(--a-canvas-text);
+    --table-filter-border:    var(--a-border);
+    --table-filter-radius:    var(--a-radius-md);
+    --table-filter-inset:     var(--a-space-2);
+    --table-filter-gap:       var(--a-space-1);
+    --table-filter-shadow:    var(--a-shadow-md);
+    --table-filter-input-py:  var(--a-space-1);
+    --table-filter-input-px:  var(--a-space-2);
+    --table-filter-input-radius: var(--a-radius-sm);
+    --table-filter-input-size: var(--a-ui-tiny);
+    --table-filter-btn-px:    var(--a-space-1);
+    --table-filter-clear-fg:  var(--a-accent);
 
     /* ── Chips / filter bar ── */
-    --table-chip-bar-bg-default:      var(--a-canvas-subtle);
-    --table-chip-bar-border-default:  var(--a-border);
-    --table-chip-bar-gap-default:     var(--a-space-1);
-    --table-chip-bar-py-default:      var(--a-space-1);
-    --table-chip-bar-px-default:      var(--a-space-2);
-    --table-chip-dismiss-gap-default: var(--a-space-1);
+    --table-chip-bar-bg:      var(--a-canvas-subtle);
+    --table-chip-bar-border:  var(--a-border);
+    --table-chip-bar-gap:     var(--a-space-1);
+    --table-chip-bar-py:      var(--a-space-1);
+    --table-chip-bar-px:      var(--a-space-2);
+    --table-chip-dismiss-gap: var(--a-space-1);
 
     /* ── Detail / expansion row ── */
-    --table-detail-bg-default:        var(--a-canvas-subtle);
-    --table-detail-border-default:    var(--a-border);
-    --table-detail-py-default:        var(--a-space-3);
-    --table-detail-px-default:        var(--a-space-4);
+    --table-detail-bg:        var(--a-canvas-subtle);
+    --table-detail-border:    var(--a-border);
+    --table-detail-py:        var(--a-space-3);
+    --table-detail-px:        var(--a-space-4);
 
     /* ── Pinning ── */
-    --table-pinned-bg-default:        var(--a-canvas);
-    --table-pinned-shadow-default:    var(--a-chrome-shadow-soft);
+    --table-pinned-bg:        var(--a-canvas);
+    --table-pinned-shadow:    var(--a-chrome-shadow-soft);
 
     /* ── Aggregation row ── */
-    --table-agg-border-default:       var(--a-border);
-    --table-agg-size-default:         var(--a-ui-tiny);
-    --table-agg-py-default:           var(--a-space-2);
-    --table-agg-px-default:           var(--a-space-3);
+    --table-agg-border:       var(--a-border);
+    --table-agg-size:         var(--a-ui-tiny);
+    --table-agg-py:           var(--a-space-2);
+    --table-agg-px:           var(--a-space-3);
 
     /* ── Sort priority badge ── */
-    --table-sort-priority-fg-default: var(--a-chrome-light);
+    --table-sort-priority-fg: var(--a-chrome-light);
 
     /* ── Sort icon gap ── */
-    --table-sort-icon-gap-default:    var(--a-space-1);
+    --table-sort-icon-gap:    var(--a-space-1);
 
     /* ── Footer / pagination ── */
-    --table-footer-py-default:        var(--a-space-3);
+    --table-footer-py:        var(--a-space-3);
 
     /* ── Overlays ── */
-    --table-overlay-gap-default:      var(--a-space-3);
-    --table-overlay-pad-default:      var(--a-space-8);
+    --table-overlay-gap:      var(--a-space-3);
+    --table-overlay-pad:      var(--a-space-8);
 
     /* ── Transitions ── */
-    --table-duration-default:         var(--a-duration-fast);
-    --table-easing-default:           var(--a-easing);
+    --table-duration:         var(--a-duration-fast);
+    --table-easing:           var(--a-easing);
 
     /* ── State ── */
-    --table-focus-ring-default:       var(--a-focus-ring);
+    --table-focus-ring:       var(--a-focus-ring);
 
     /* ── Z-index layers ── */
     --_z-cell:                0;
@@ -115,15 +116,17 @@
        block but with no vertical clip — wrapping in an outer max-height
        div made the WHOLE table scroll (header included), defeating sticky. */
     overflow: auto;
-    font-size: var(--table-font-size, var(--table-font-size-default));
-    color: var(--table-fg, var(--table-fg-default));
-    background: var(--table-bg, var(--table-bg-default));
+    /* font-family floor — host anchor; cells + filter inputs inherit it. */
+    font-family: var(--table-font-family);
+    font-size: var(--table-font-size);
+    color: var(--table-fg);
+    background: var(--table-bg);
     /* Use inset box-shadow as a faux border so the 1px chrome paints
        inside the content box and doesn't shrink clientWidth — a real
        `border: 1px` made grid content overflow by exactly 2 px on every
        table (scrollbar appeared with nothing to scroll). */
-    box-shadow: inset 0 0 0 1px var(--table-border, var(--table-border-default));
-    border-radius: var(--table-radius, var(--table-radius-default));
+    box-shadow: inset 0 0 0 1px var(--table-border);
+    border-radius: var(--table-radius);
     position: relative;
     /* Own stacking context — sticky headers, pinned columns, and filter
        dropdowns use internal z-indices that must not leak to parents. */
@@ -159,11 +162,11 @@
   /* ═══════ Header row ═══════ */
 
   [data-header] {
-    border-bottom: 1px solid var(--table-border-strong, var(--table-border-strong-default));
+    border-bottom: 1px solid var(--table-border-strong);
     position: sticky;
     top: 0;
     z-index: var(--_z-header);
-    background: var(--table-bg, var(--table-bg-default));
+    background: var(--table-bg);
   }
 
   /* ═══════ Column headers ═══════ */
@@ -171,13 +174,13 @@
   [role="columnheader"] {
     box-sizing: border-box;
     text-align: left;
-    padding: var(--table-py, var(--table-py-default)) var(--table-px, var(--table-px-default));
-    font-size: var(--table-heading-size, var(--table-heading-size-default));
-    font-weight: var(--table-heading-weight, var(--table-heading-weight-default));
-    color: var(--table-heading-fg, var(--table-heading-fg-default));
-    background: var(--table-heading-bg, var(--table-heading-bg-default));
+    padding: var(--table-py) var(--table-px);
+    font-size: var(--table-heading-size);
+    font-weight: var(--table-heading-weight);
+    color: var(--table-heading-fg);
+    background: var(--table-heading-bg);
     text-transform: uppercase;
-    letter-spacing: var(--table-heading-tracking, var(--table-heading-tracking-default));
+    letter-spacing: var(--table-heading-tracking);
     white-space: nowrap;
     position: relative;
     display: flex;
@@ -201,31 +204,31 @@
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
-    transition: color var(--table-duration, var(--table-duration-default)) var(--table-easing, var(--table-easing-default));
+    transition: color var(--table-duration) var(--table-easing);
   }
 
   [data-sort-key]:hover {
-    color: var(--table-fg, var(--table-fg-default));
+    color: var(--table-fg);
   }
 
   /* ═══════ Sort indicator ═══════ */
 
   [data-sort-icon] {
-    color: var(--table-sort-fg, var(--table-sort-fg-default));
-    margin-inline-start: var(--table-sort-icon-gap, var(--table-sort-icon-gap-default));
+    color: var(--table-sort-fg);
+    margin-inline-start: var(--table-sort-icon-gap);
     vertical-align: middle;
     --a-icon-size: 0.75em;
   }
 
   [aria-sort] [data-sort-icon] {
-    color: var(--table-fg, var(--table-fg-default));
+    color: var(--table-fg);
   }
 
   [data-sort-priority] {
     display: inline-flex;
     font-size: 0.6em;
-    background: var(--table-accent, var(--table-accent-default));
-    color: var(--table-sort-priority-fg, var(--table-sort-priority-fg-default));
+    background: var(--table-accent);
+    color: var(--table-sort-priority-fg);
     width: 1em;
     height: 1em;
     border-radius: 50%;
@@ -241,8 +244,8 @@
     display: flex;
     align-items: center;
     align-self: stretch;
-    padding: var(--table-py, var(--table-py-default)) var(--table-px, var(--table-px-default));
-    border-bottom: 1px solid var(--table-border, var(--table-border-default));
+    padding: var(--table-py) var(--table-px);
+    border-bottom: 1px solid var(--table-border);
     min-width: 0;
     /* Default: single line with ellipsis. Authors opt in to wrapping
        via [wrap] on the host (whole table) or [data-wrap] on a column /
@@ -314,13 +317,13 @@
   /* ═══════ Row states ═══════ */
 
   [data-body] > [role="row"] {
-    background: var(--table-row-bg, var(--table-row-bg-default));
-    transition: background var(--table-duration, var(--table-duration-default)) var(--table-easing, var(--table-easing-default));
+    background: var(--table-row-bg);
+    transition: background var(--table-duration) var(--table-easing);
   }
 
   [data-body] > [role="row"]:hover {
-    background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
-    color: var(--table-fg-hover, var(--table-fg-hover-default));
+    background: var(--table-row-bg-hover);
+    color: var(--table-fg-hover);
   }
 
   /* Selected row — must out-specify the base row rule `[data-body] >
@@ -329,7 +332,7 @@
      (0,4,0). (The striped-even override below handles selected+striped, which
      is higher still.) */
   [data-body] > [role="row"][data-selected] {
-    background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
+    background: var(--table-row-bg-selected);
   }
 
   /* ═══════ Striped ═══════ */
@@ -339,18 +342,18 @@
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even) {
-    background: var(--table-row-bg-striped, var(--table-row-bg-striped-default));
+    background: var(--table-row-bg-striped);
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even):hover {
-    background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
+    background: var(--table-row-bg-hover);
   }
 
   /* Selected wins over the stripe — same (0,5,0) specificity as the striped-
      even rule above, placed AFTER it so source order resolves the tie in
      favor of selection (a selected row reads as selected regardless of stripe). */
   :scope[striped] [data-body] > [role="row"][data-selected] {
-    background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
+    background: var(--table-row-bg-selected);
   }
 
   /* ═══════ Selection checkboxes ═══════ */
@@ -367,12 +370,12 @@
   /* ═══════ Density ═══════ */
 
   :scope[density="compact"] {
-    --table-py-default: var(--a-space-1);
-    --table-px-default: var(--a-space-2);
+    --table-py: var(--a-space-1);
+    --table-px: var(--a-space-2);
   }
 
   :scope[density="comfortable"] {
-    --table-py-default: var(--a-space-4);
+    --table-py: var(--a-space-4);
   }
 
   /* ═══════ Pinned cells ═══════ */
@@ -381,14 +384,14 @@
     position: sticky;
     left: var(--_pin-left, 0);
     z-index: var(--_z-pinned);
-    background: var(--table-bg, var(--table-bg-default));
+    background: var(--table-bg);
   }
 
   [data-pinned="right"] {
     position: sticky;
     right: var(--_pin-right, 0);
     z-index: var(--_z-pinned);
-    background: var(--table-bg, var(--table-bg-default));
+    background: var(--table-bg);
   }
 
   [data-header] [data-pinned] {
@@ -399,10 +402,10 @@
 
   [data-resize-handle] {
     position: absolute;
-    right: calc(-1 * var(--table-resize-width, var(--table-resize-width-default)) / 2);
+    right: calc(-1 * var(--table-resize-width) / 2);
     top: 0;
     bottom: 0;
-    width: var(--table-resize-width, var(--table-resize-width-default));
+    width: var(--table-resize-width);
     cursor: col-resize;
     /* Sit above the next column header so pointer events hit the handle
        (the handle is centered on the column boundary; without z-index the
@@ -421,7 +424,7 @@
 
   [data-resize-handle]:hover,
   [data-resize-handle][data-resizing] {
-    background: var(--table-accent, var(--table-accent-default));
+    background: var(--table-accent);
   }
 
   /* ═══════ Footer / pagination ═══════ */
@@ -430,10 +433,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--table-footer-py, var(--table-footer-py-default)) var(--table-px, var(--table-px-default));
-    font-size: var(--table-heading-size, var(--table-heading-size-default));
-    color: var(--table-heading-fg, var(--table-heading-fg-default));
-    border-top: 1px solid var(--table-border, var(--table-border-default));
+    padding: var(--table-footer-py) var(--table-px);
+    font-size: var(--table-heading-size);
+    color: var(--table-heading-fg);
+    border-top: 1px solid var(--table-border);
   }
 
   /* ═══════ Overlays (empty / loading / error) ═══════ */
@@ -446,15 +449,15 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--table-overlay-gap, var(--table-overlay-gap-default));
-    padding: var(--table-overlay-pad, var(--table-overlay-pad-default));
-    color: var(--table-heading-fg, var(--table-heading-fg-default));
+    gap: var(--table-overlay-gap);
+    padding: var(--table-overlay-pad);
+    color: var(--table-heading-fg);
   }
 
   /* ═══════ Keyboard focus ═══════ */
 
   [data-focused] {
-    outline: 2px solid var(--table-accent, var(--table-accent-default));
+    outline: 2px solid var(--table-accent);
     outline-offset: -2px;
   }
 
@@ -462,12 +465,12 @@
 
   :scope[disabled] {
     pointer-events: none;
-    color: var(--table-fg-disabled, var(--table-fg-disabled-default));
+    color: var(--table-fg-disabled);
   }
 
   :scope[disabled] [data-body] > [role="row"]:hover {
-    background: var(--table-row-bg, var(--table-row-bg-default));
-    color: var(--table-fg-disabled, var(--table-fg-disabled-default));
+    background: var(--table-row-bg);
+    color: var(--table-fg-disabled);
   }
 
   /* ═══════ Loading (skeleton rows) ═══════
@@ -499,7 +502,7 @@
     all: unset;
     cursor: pointer;
     opacity: 0.5;
-    padding: 0 var(--table-filter-btn-px, var(--table-filter-btn-px-default));
+    padding: 0 var(--table-filter-btn-px);
     &:hover { opacity: 1; }
   }
 
@@ -510,55 +513,55 @@
     top: 100%;
     left: 0;
     right: 0;
-    min-width: var(--table-cell-min-width, var(--table-cell-min-width-default));
+    min-width: var(--table-cell-min-width);
     z-index: 10;
-    background: var(--table-filter-bg, var(--table-filter-bg-default));
-    border: 1px solid var(--table-filter-border, var(--table-filter-border-default));
-    border-radius: var(--table-filter-radius, var(--table-filter-radius-default));
-    padding: var(--table-filter-inset, var(--table-filter-inset-default));
-    box-shadow: var(--table-filter-shadow, var(--table-filter-shadow-default));
+    background: var(--table-filter-bg);
+    border: 1px solid var(--table-filter-border);
+    border-radius: var(--table-filter-radius);
+    padding: var(--table-filter-inset);
+    box-shadow: var(--table-filter-shadow);
     display: flex;
     flex-direction: column;
-    gap: var(--table-filter-gap, var(--table-filter-gap-default));
+    gap: var(--table-filter-gap);
   }
 
   [data-filter-input] {
     width: 100%;
-    padding: var(--table-filter-input-py, var(--table-filter-input-py-default)) var(--table-filter-input-px, var(--table-filter-input-px-default));
-    border: 1px solid var(--table-filter-border, var(--table-filter-border-default));
-    border-radius: var(--table-filter-input-radius, var(--table-filter-input-radius-default));
+    padding: var(--table-filter-input-py) var(--table-filter-input-px);
+    border: 1px solid var(--table-filter-border);
+    border-radius: var(--table-filter-input-radius);
     font: inherit;
-    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
-    background: var(--table-filter-bg, var(--table-filter-bg-default));
-    color: var(--table-filter-fg, var(--table-filter-fg-default));
+    font-size: var(--table-filter-input-size);
+    background: var(--table-filter-bg);
+    color: var(--table-filter-fg);
   }
 
   [data-filter-op] {
-    padding: var(--table-filter-input-py, var(--table-filter-input-py-default));
-    border: 1px solid var(--table-filter-border, var(--table-filter-border-default));
-    border-radius: var(--table-filter-input-radius, var(--table-filter-input-radius-default));
+    padding: var(--table-filter-input-py);
+    border: 1px solid var(--table-filter-border);
+    border-radius: var(--table-filter-input-radius);
     font: inherit;
-    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
-    background: var(--table-filter-bg, var(--table-filter-bg-default));
-    color: var(--table-filter-fg, var(--table-filter-fg-default));
+    font-size: var(--table-filter-input-size);
+    background: var(--table-filter-bg);
+    color: var(--table-filter-fg);
   }
 
   [data-filter-option] {
     display: flex;
     align-items: center;
-    gap: var(--table-filter-gap, var(--table-filter-gap-default));
-    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
+    gap: var(--table-filter-gap);
+    font-size: var(--table-filter-input-size);
     cursor: pointer;
-    padding: var(--table-filter-input-py, var(--table-filter-input-py-default)) 0;
+    padding: var(--table-filter-input-py) 0;
   }
 
   [data-filter-clear] {
     all: unset;
     cursor: pointer;
-    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
-    color: var(--table-filter-clear-fg, var(--table-filter-clear-fg-default));
+    font-size: var(--table-filter-input-size);
+    color: var(--table-filter-clear-fg);
     text-align: center;
-    padding: var(--table-filter-input-py, var(--table-filter-input-py-default));
+    padding: var(--table-filter-input-py);
     &:hover { text-decoration: underline; }
   }
 
@@ -569,16 +572,16 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--table-chip-bar-gap, var(--table-chip-bar-gap-default));
-    padding: var(--table-chip-bar-py, var(--table-chip-bar-py-default)) var(--table-chip-bar-px, var(--table-chip-bar-px-default));
-    border-bottom: 1px solid var(--table-chip-bar-border, var(--table-chip-bar-border-default));
-    background: var(--table-chip-bar-bg, var(--table-chip-bar-bg-default));
+    gap: var(--table-chip-bar-gap);
+    padding: var(--table-chip-bar-py) var(--table-chip-bar-px);
+    border-bottom: 1px solid var(--table-chip-bar-border);
+    background: var(--table-chip-bar-bg);
   }
 
   [data-chip-dismiss] {
     all: unset;
     cursor: pointer;
-    margin-left: var(--table-chip-dismiss-gap, var(--table-chip-dismiss-gap-default));
+    margin-left: var(--table-chip-dismiss-gap);
     opacity: 0.6;
     &:hover { opacity: 1; }
   }
@@ -586,9 +589,9 @@
   [data-filter-clear-all] {
     all: unset;
     cursor: pointer;
-    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
-    color: var(--table-filter-clear-fg, var(--table-filter-clear-fg-default));
-    padding: var(--table-chip-bar-py, var(--table-chip-bar-py-default)) var(--table-chip-bar-px, var(--table-chip-bar-px-default));
+    font-size: var(--table-filter-input-size);
+    color: var(--table-filter-clear-fg);
+    padding: var(--table-chip-bar-py) var(--table-chip-bar-px);
     &:hover { text-decoration: underline; }
   }
 
@@ -596,9 +599,9 @@
 
   [data-detail-row] {
     grid-column: 1 / -1;
-    padding: var(--table-detail-py, var(--table-detail-py-default)) var(--table-detail-px, var(--table-detail-px-default));
-    background: var(--table-detail-bg, var(--table-detail-bg-default));
-    border-bottom: 1px solid var(--table-detail-border, var(--table-detail-border-default));
+    padding: var(--table-detail-py) var(--table-detail-px);
+    background: var(--table-detail-bg);
+    border-bottom: 1px solid var(--table-detail-border);
   }
 
   [data-expand-toggle] {
@@ -607,7 +610,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform var(--table-duration, var(--table-duration-default)) var(--table-easing, var(--table-easing-default));
+    transition: transform var(--table-duration) var(--table-easing);
   }
 
   [data-expanded] [data-expand-toggle] {
@@ -619,25 +622,25 @@
   [data-pinned] {
     position: sticky;
     z-index: 1;
-    background: var(--table-pinned-bg, var(--table-pinned-bg-default));
+    background: var(--table-pinned-bg);
   }
 
   [data-pinned="left"]::after {
     content: '';
     position: absolute;
-    right: calc(-1 * var(--table-pin-shadow-width, var(--table-pin-shadow-width-default))); top: 0; bottom: 0;
-    width: var(--table-pin-shadow-width, var(--table-pin-shadow-width-default));
+    right: calc(-1 * var(--table-pin-shadow-width)); top: 0; bottom: 0;
+    width: var(--table-pin-shadow-width);
     pointer-events: none;
-    background: linear-gradient(to right, var(--table-pinned-shadow, var(--table-pinned-shadow-default)), transparent);
+    background: linear-gradient(to right, var(--table-pinned-shadow), transparent);
   }
 
   [data-pinned="right"]::before {
     content: '';
     position: absolute;
-    left: calc(-1 * var(--table-pin-shadow-width, var(--table-pin-shadow-width-default))); top: 0; bottom: 0;
-    width: var(--table-pin-shadow-width, var(--table-pin-shadow-width-default));
+    left: calc(-1 * var(--table-pin-shadow-width)); top: 0; bottom: 0;
+    width: var(--table-pin-shadow-width);
     pointer-events: none;
-    background: linear-gradient(to left, var(--table-pinned-shadow, var(--table-pinned-shadow-default)), transparent);
+    background: linear-gradient(to left, var(--table-pinned-shadow), transparent);
   }
 
   /* ═══════ Aggregation Footer ═══════ */
@@ -646,13 +649,13 @@
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
-    border-top: 2px solid var(--table-agg-border, var(--table-agg-border-default));
+    border-top: 2px solid var(--table-agg-border);
     font-weight: 600;
-    font-size: var(--table-agg-size, var(--table-agg-size-default));
-    color: var(--table-fg-secondary, var(--table-fg-secondary-default));
+    font-size: var(--table-agg-size);
+    color: var(--table-fg-secondary);
   }
 
   [data-agg-row] > [role="gridcell"] {
-    padding: var(--table-agg-py, var(--table-agg-py-default)) var(--table-agg-px, var(--table-agg-px-default));
+    padding: var(--table-agg-py) var(--table-agg-px);
   }
 }