@adia-ai/web-components 0.6.32 → 0.6.34

package/components/table/table.css

@@ -1,95 +1,95 @@
 @scope (table-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --table-font-size:        var(--a-ui-size);
-    --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);
-    --table-radius:           var(--a-radius-lg);
+    --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-radius-default:           var(--a-radius-lg);
 
     /* ── Resize + pinned-column intrinsics ── */
-    --table-resize-width:     var(--a-space-1);
-    --table-pin-shadow-width: var(--a-space-1);
-    --table-cell-min-width:   11.25rem;
+    --table-resize-width-default:     var(--a-space-1);
+    --table-pin-shadow-width-default: var(--a-space-1);
+    --table-cell-min-width-default:   11.25rem;
 
     /* ── Filter popover ── */
-    --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);
+    --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);
 
     /* ── Chips / filter bar ── */
-    --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);
+    --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);
 
     /* ── Detail / expansion row ── */
-    --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);
+    --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);
 
     /* ── Pinning ── */
-    --table-pinned-bg:        var(--a-canvas);
-    --table-pinned-shadow:    var(--a-chrome-shadow-soft);
+    --table-pinned-bg-default:        var(--a-canvas);
+    --table-pinned-shadow-default:    var(--a-chrome-shadow-soft);
 
     /* ── Aggregation row ── */
-    --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);
+    --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);
 
     /* ── Sort priority badge ── */
-    --table-sort-priority-fg: var(--a-chrome-light);
+    --table-sort-priority-fg-default: var(--a-chrome-light);
 
     /* ── Sort icon gap ── */
-    --table-sort-icon-gap:    var(--a-space-1);
+    --table-sort-icon-gap-default:    var(--a-space-1);
 
     /* ── Footer / pagination ── */
-    --table-footer-py:        var(--a-space-3);
+    --table-footer-py-default:        var(--a-space-3);
 
     /* ── Overlays ── */
-    --table-overlay-gap:      var(--a-space-3);
-    --table-overlay-pad:      var(--a-space-8);
+    --table-overlay-gap-default:      var(--a-space-3);
+    --table-overlay-pad-default:      var(--a-space-8);
 
     /* ── Transitions ── */
-    --table-duration:         var(--a-duration-fast);
-    --table-easing:           var(--a-easing);
+    --table-duration-default:         var(--a-duration-fast);
+    --table-easing-default:           var(--a-easing);
 
     /* ── State ── */
-    --table-focus-ring:       var(--a-focus-ring);
+    --table-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Z-index layers ── */
     --_z-cell:                0;
@@ -104,11 +104,11 @@
     box-sizing: border-box;
     display: grid;
     overflow-x: auto;
-    font-size: var(--table-font-size);
-    color: var(--table-fg);
-    background: var(--table-bg);
-    border: 1px solid var(--table-border);
-    border-radius: var(--table-radius);
+    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));
+    border: 1px solid var(--table-border, var(--table-border-default));
+    border-radius: var(--table-radius, var(--table-radius-default));
     position: relative;
     /* Own stacking context — sticky headers, pinned columns, and filter
        dropdowns use internal z-indices that must not leak to parents. */
@@ -144,11 +144,11 @@
   /* ═══════ Header row ═══════ */
 
   [data-header] {
-    border-bottom: 1px solid var(--table-border-strong);
+    border-bottom: 1px solid var(--table-border-strong, var(--table-border-strong-default));
     position: sticky;
     top: 0;
     z-index: var(--_z-header);
-    background: var(--table-bg);
+    background: var(--table-bg, var(--table-bg-default));
   }
 
   /* ═══════ Column headers ═══════ */
@@ -156,13 +156,13 @@
   [role="columnheader"] {
     box-sizing: border-box;
     text-align: left;
-    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);
+    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));
     text-transform: uppercase;
-    letter-spacing: var(--table-heading-tracking);
+    letter-spacing: var(--table-heading-tracking, var(--table-heading-tracking-default));
     white-space: nowrap;
     position: relative;
     display: flex;
@@ -186,31 +186,31 @@
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
-    transition: color var(--table-duration) var(--table-easing);
+    transition: color var(--table-duration, var(--table-duration-default)) var(--table-easing, var(--table-easing-default));
   }
 
   [data-sort-key]:hover {
-    color: var(--table-fg);
+    color: var(--table-fg, var(--table-fg-default));
   }
 
   /* ═══════ Sort indicator ═══════ */
 
   [data-sort-icon] {
-    color: var(--table-sort-fg);
-    margin-inline-start: var(--table-sort-icon-gap);
+    color: var(--table-sort-fg, var(--table-sort-fg-default));
+    margin-inline-start: var(--table-sort-icon-gap, var(--table-sort-icon-gap-default));
     vertical-align: middle;
     --a-icon-size: 0.75em;
   }
 
   [aria-sort] [data-sort-icon] {
-    color: var(--table-fg);
+    color: var(--table-fg, var(--table-fg-default));
   }
 
   [data-sort-priority] {
     display: inline-flex;
     font-size: 0.6em;
-    background: var(--table-accent);
-    color: var(--table-sort-priority-fg);
+    background: var(--table-accent, var(--table-accent-default));
+    color: var(--table-sort-priority-fg, var(--table-sort-priority-fg-default));
     width: 1em;
     height: 1em;
     border-radius: 50%;
@@ -226,8 +226,8 @@
     display: flex;
     align-items: center;
     align-self: stretch;
-    padding: var(--table-py) var(--table-px);
-    border-bottom: 1px solid var(--table-border);
+    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));
     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 /
@@ -299,17 +299,17 @@
   /* ═══════ Row states ═══════ */
 
   [data-body] > [role="row"] {
-    background: var(--table-row-bg);
-    transition: background var(--table-duration) var(--table-easing);
+    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));
   }
 
   [data-body] > [role="row"]:hover {
-    background: var(--table-row-bg-hover);
-    color: var(--table-fg-hover);
+    background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
+    color: var(--table-fg-hover, var(--table-fg-hover-default));
   }
 
   [data-selected] {
-    background: var(--table-row-bg-selected);
+    background: var(--table-row-bg-selected, var(--table-row-bg-selected-default));
   }
 
   /* ═══════ Striped ═══════ */
@@ -319,11 +319,11 @@
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even) {
-    background: var(--table-row-bg-striped);
+    background: var(--table-row-bg-striped, var(--table-row-bg-striped-default));
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even):hover {
-    background: var(--table-row-bg-hover);
+    background: var(--table-row-bg-hover, var(--table-row-bg-hover-default));
   }
 
   /* ═══════ Selection checkboxes ═══════ */
@@ -340,12 +340,12 @@
   /* ═══════ Density ═══════ */
 
   :scope[density="compact"] {
-    --table-py: var(--a-space-1);
-    --table-px: var(--a-space-2);
+    --table-py-default: var(--a-space-1);
+    --table-px-default: var(--a-space-2);
   }
 
   :scope[density="comfortable"] {
-    --table-py: var(--a-space-4);
+    --table-py-default: var(--a-space-4);
   }
 
   /* ═══════ Pinned cells ═══════ */
@@ -354,14 +354,14 @@
     position: sticky;
     left: var(--_pin-left, 0);
     z-index: var(--_z-pinned);
-    background: var(--table-bg);
+    background: var(--table-bg, var(--table-bg-default));
   }
 
   [data-pinned="right"] {
     position: sticky;
     right: var(--_pin-right, 0);
     z-index: var(--_z-pinned);
-    background: var(--table-bg);
+    background: var(--table-bg, var(--table-bg-default));
   }
 
   [data-header] [data-pinned] {
@@ -372,17 +372,17 @@
 
   [data-resize-handle] {
     position: absolute;
-    right: calc(-1 * var(--table-resize-width) / 2);
+    right: calc(-1 * var(--table-resize-width, var(--table-resize-width-default)) / 2);
     top: 0;
     bottom: 0;
-    width: var(--table-resize-width);
+    width: var(--table-resize-width, var(--table-resize-width-default));
     cursor: col-resize;
     z-index: 1;
   }
 
   [data-resize-handle]:hover,
   [data-resize-handle][data-resizing] {
-    background: var(--table-accent);
+    background: var(--table-accent, var(--table-accent-default));
   }
 
   /* ═══════ Footer / pagination ═══════ */
@@ -391,10 +391,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    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);
+    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));
   }
 
   /* ═══════ Overlays (empty / loading / error) ═══════ */
@@ -407,15 +407,15 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--table-overlay-gap);
-    padding: var(--table-overlay-pad);
-    color: var(--table-heading-fg);
+    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));
   }
 
   /* ═══════ Keyboard focus ═══════ */
 
   [data-focused] {
-    outline: 2px solid var(--table-accent);
+    outline: 2px solid var(--table-accent, var(--table-accent-default));
     outline-offset: -2px;
   }
 
@@ -423,12 +423,12 @@
 
   :scope[disabled] {
     pointer-events: none;
-    color: var(--table-fg-disabled);
+    color: var(--table-fg-disabled, var(--table-fg-disabled-default));
   }
 
   :scope[disabled] [data-body] > [role="row"]:hover {
-    background: var(--table-row-bg);
-    color: var(--table-fg-disabled);
+    background: var(--table-row-bg, var(--table-row-bg-default));
+    color: var(--table-fg-disabled, var(--table-fg-disabled-default));
   }
 
   /* ═══════ Loading (skeleton rows) ═══════
@@ -460,7 +460,7 @@
     all: unset;
     cursor: pointer;
     opacity: 0.5;
-    padding: 0 var(--table-filter-btn-px);
+    padding: 0 var(--table-filter-btn-px, var(--table-filter-btn-px-default));
     &:hover { opacity: 1; }
   }
 
@@ -471,55 +471,55 @@
     top: 100%;
     left: 0;
     right: 0;
-    min-width: var(--table-cell-min-width);
+    min-width: var(--table-cell-min-width, var(--table-cell-min-width-default));
     z-index: 10;
-    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);
+    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));
     display: flex;
     flex-direction: column;
-    gap: var(--table-filter-gap);
+    gap: var(--table-filter-gap, var(--table-filter-gap-default));
   }
 
   [data-filter-input] {
     width: 100%;
-    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);
+    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));
     font: inherit;
-    font-size: var(--table-filter-input-size);
-    background: var(--table-filter-bg);
-    color: var(--table-filter-fg);
+    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));
   }
 
   [data-filter-op] {
-    padding: var(--table-filter-input-py);
-    border: 1px solid var(--table-filter-border);
-    border-radius: var(--table-filter-input-radius);
+    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));
     font: inherit;
-    font-size: var(--table-filter-input-size);
-    background: var(--table-filter-bg);
-    color: var(--table-filter-fg);
+    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));
   }
 
   [data-filter-option] {
     display: flex;
     align-items: center;
-    gap: var(--table-filter-gap);
-    font-size: var(--table-filter-input-size);
+    gap: var(--table-filter-gap, var(--table-filter-gap-default));
+    font-size: var(--table-filter-input-size, var(--table-filter-input-size-default));
     cursor: pointer;
-    padding: var(--table-filter-input-py) 0;
+    padding: var(--table-filter-input-py, var(--table-filter-input-py-default)) 0;
   }
 
   [data-filter-clear] {
     all: unset;
     cursor: pointer;
-    font-size: var(--table-filter-input-size);
-    color: var(--table-filter-clear-fg);
+    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));
     text-align: center;
-    padding: var(--table-filter-input-py);
+    padding: var(--table-filter-input-py, var(--table-filter-input-py-default));
     &:hover { text-decoration: underline; }
   }
 
@@ -530,16 +530,16 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    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);
+    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));
   }
 
   [data-chip-dismiss] {
     all: unset;
     cursor: pointer;
-    margin-left: var(--table-chip-dismiss-gap);
+    margin-left: var(--table-chip-dismiss-gap, var(--table-chip-dismiss-gap-default));
     opacity: 0.6;
     &:hover { opacity: 1; }
   }
@@ -547,9 +547,9 @@
   [data-filter-clear-all] {
     all: unset;
     cursor: pointer;
-    font-size: var(--table-filter-input-size);
-    color: var(--table-filter-clear-fg);
-    padding: var(--table-chip-bar-py) var(--table-chip-bar-px);
+    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));
     &:hover { text-decoration: underline; }
   }
 
@@ -557,9 +557,9 @@
 
   [data-detail-row] {
     grid-column: 1 / -1;
-    padding: var(--table-detail-py) var(--table-detail-px);
-    background: var(--table-detail-bg);
-    border-bottom: 1px solid var(--table-detail-border);
+    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));
   }
 
   [data-expand-toggle] {
@@ -568,7 +568,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform var(--table-duration) var(--table-easing);
+    transition: transform var(--table-duration, var(--table-duration-default)) var(--table-easing, var(--table-easing-default));
   }
 
   [data-expanded] [data-expand-toggle] {
@@ -580,25 +580,25 @@
   [data-pinned] {
     position: sticky;
     z-index: 1;
-    background: var(--table-pinned-bg);
+    background: var(--table-pinned-bg, var(--table-pinned-bg-default));
   }
 
   [data-pinned="left"]::after {
     content: '';
     position: absolute;
-    right: calc(-1 * var(--table-pin-shadow-width)); top: 0; bottom: 0;
-    width: var(--table-pin-shadow-width);
+    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));
     pointer-events: none;
-    background: linear-gradient(to right, var(--table-pinned-shadow), transparent);
+    background: linear-gradient(to right, var(--table-pinned-shadow, var(--table-pinned-shadow-default)), transparent);
   }
 
   [data-pinned="right"]::before {
     content: '';
     position: absolute;
-    left: calc(-1 * var(--table-pin-shadow-width)); top: 0; bottom: 0;
-    width: var(--table-pin-shadow-width);
+    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));
     pointer-events: none;
-    background: linear-gradient(to left, var(--table-pinned-shadow), transparent);
+    background: linear-gradient(to left, var(--table-pinned-shadow, var(--table-pinned-shadow-default)), transparent);
   }
 
   /* ═══════ Aggregation Footer ═══════ */
@@ -607,13 +607,13 @@
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
-    border-top: 2px solid var(--table-agg-border);
+    border-top: 2px solid var(--table-agg-border, var(--table-agg-border-default));
     font-weight: 600;
-    font-size: var(--table-agg-size);
-    color: var(--table-fg-secondary);
+    font-size: var(--table-agg-size, var(--table-agg-size-default));
+    color: var(--table-fg-secondary, var(--table-fg-secondary-default));
   }
 
   [data-agg-row] > [role="gridcell"] {
-    padding: var(--table-agg-py) var(--table-agg-px);
+    padding: var(--table-agg-py, var(--table-agg-py-default)) var(--table-agg-px, var(--table-agg-px-default));
   }
 }

package/components/table/table.d.ts

@@ -98,7 +98,7 @@ export class UITable extends UIElement {
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
   paginate: number;
-  /** Raw mode */
+  /** Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom "No data" overlay. v0.6.33+ matches the documented contract. */
   raw: boolean;
   /** Global search/filter string. Filters visible rows across all columns using case-insensitive substring matching. Resets to page 1 on change. */
   search: string;

package/components/table/table.test.js

@@ -283,3 +283,56 @@ describe('table-ui — FB-47 keyboard: Enter activates focused body cell', () =>
     expect(cellClickFired).toBe(false);
   });
 });
+
+/**
+ * Raw mode: visual-only passthrough — consumer owns the body shape.
+ *
+ * Pre-v0.6.33 (FB-53 §2), `<table-ui raw>` only applied the CSS chrome
+ * reset (background/border/radius transparent) but the data lifecycle
+ * still ran. With `.data === []` (the natural state when wrapping a
+ * consumer-authored native <table>), `#renderOverlays` injected a
+ * [data-empty] "No data" placeholder above the consumer's content.
+ *
+ * v0.6.33 short-circuits `render()` at the top when `this.raw` is set:
+ * no header injection, no body reconciliation, no overlays, no
+ * aggregation, no pagination.
+ */
+describe('table-ui — raw mode passthrough (FB-53 §2)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('raw mode does NOT inject [data-empty] overlay when .data is empty', async () => {
+    const el = mount('<table-ui raw><table><tr><td>foo</td></tr></table></table-ui>');
+    // No .data set → empty by default. Without the raw early-return,
+    // #renderOverlays would create the [data-empty] placeholder.
+    await raf();
+    expect(el.querySelector(':scope > [data-empty]')).toBeNull();
+    // Consumer's native <table> survives untouched.
+    expect(el.querySelector(':scope > table')).not.toBeNull();
+  });
+
+  it('raw mode does NOT inject [data-header] or [data-body] rowgroups', async () => {
+    const el = mount('<table-ui raw><table><tr><td>x</td></tr></table></table-ui>');
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).toBeNull();
+  });
+
+  it('raw mode preserves consumer markup even when .columns + .data are set', async () => {
+    const el = mount('<table-ui raw><table id="consumer"><tr><td>consumer-owned</td></tr></table></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    // The consumer's native <table> is still the only table-shaped child.
+    expect(el.querySelector('#consumer')).not.toBeNull();
+    expect(el.querySelectorAll(':scope > [role="rowgroup"]').length).toBe(0);
+  });
+
+  it('non-raw mode (default) still injects header + body rowgroups', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).not.toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).not.toBeNull();
+  });
+});