@adia-ai/web-components 0.0.1

package/components/table/table.css

@@ -0,0 +1,531 @@
+@scope (table-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --table-font-size:        var(--a-ui-size);
+    --table-heading-size:     var(--a-ui-sm);
+    --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);
+
+    /* ── 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;
+
+    /* ── 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);
+
+    /* ── 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);
+
+    /* ── 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);
+
+    /* ── Pinning ── */
+    --table-pinned-bg:        var(--a-canvas);
+    --table-pinned-shadow:    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);
+
+    /* ── Sort priority badge ── */
+    --table-sort-priority-fg: var(--a-chrome-light);
+
+    /* ── Sort icon gap ── */
+    --table-sort-icon-gap:    var(--a-space-1);
+
+    /* ── Footer / pagination ── */
+    --table-footer-py:        var(--a-space-3);
+
+    /* ── Overlays ── */
+    --table-overlay-gap:      var(--a-space-3);
+    --table-overlay-pad:      var(--a-space-8);
+
+    /* ── Transitions ── */
+    --table-duration:         var(--a-duration-fast);
+    --table-easing:           var(--a-easing);
+
+    /* ── State ── */
+    --table-focus-ring:       var(--a-focus-ring);
+
+    /* ── Z-index layers ── */
+    --_z-cell:                0;
+    --_z-pinned:              1;
+    --_z-header:              2;
+    --_z-header-pinned:       3;
+  }
+
+  /* ═══════ Base ═══════ */
+
+  :scope {
+    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);
+    position: relative;
+    /* Own stacking context — sticky headers, pinned columns, and filter
+       dropdowns use internal z-indices that must not leak to parents. */
+    isolation: isolate;
+  }
+
+  /* ═══════ Raw (no chrome — for embedding inside card-ui) ═══════ */
+
+  :scope[raw] {
+    background: none;
+    border: none;
+    border-radius: 0;
+  }
+
+  /* ═══════ Subgrid passthrough ═══════ */
+
+  /* Rowgroup wrappers (header, body, footer) must participate in the
+     parent grid so their children can use subgrid. */
+  [data-header],
+  [data-body] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+  }
+
+  [role="row"] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+  }
+
+  /* ═══════ Header row ═══════ */
+
+  [data-header] {
+    border-bottom: 1px solid var(--table-border-strong);
+    position: sticky;
+    top: 0;
+    z-index: var(--_z-header);
+    background: var(--table-bg);
+  }
+
+  /* ═══════ Column headers ═══════ */
+
+  [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);
+    text-transform: uppercase;
+    letter-spacing: var(--table-heading-tracking);
+    white-space: nowrap;
+    position: relative;
+  }
+
+  /* ═══════ Sortable headers ═══════ */
+
+  [data-sort-key] {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: color var(--table-duration) var(--table-easing);
+  }
+
+  [data-sort-key]:hover {
+    color: var(--table-fg);
+  }
+
+  /* ═══════ Sort indicator ═══════ */
+
+  [data-sort-icon] {
+    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);
+  }
+
+  [data-sort-priority] {
+    display: inline-flex;
+    font-size: 0.6em;
+    background: var(--table-accent);
+    color: var(--table-sort-priority-fg);
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: 2px;
+  }
+
+  /* ═══════ Body cells ═══════ */
+
+  [data-body] [role="gridcell"] {
+    box-sizing: border-box;
+    padding: var(--table-py) var(--table-px);
+    border-bottom: 1px solid var(--table-border);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  [data-align="right"] {
+    text-align: right;
+  }
+
+  [data-align="center"] {
+    text-align: center;
+  }
+
+  /* ═══════ Row states ═══════ */
+
+  [data-body] > [role="row"] {
+    background: var(--table-row-bg);
+    transition: background var(--table-duration) var(--table-easing);
+  }
+
+  [data-body] > [role="row"]:hover {
+    background: var(--table-row-bg-hover);
+    color: var(--table-fg-hover);
+  }
+
+  [data-selected] {
+    background: var(--table-row-bg-selected);
+  }
+
+  /* ═══════ Striped ═══════ */
+
+  :scope[striped] [data-body] [role="gridcell"] {
+    border-bottom: none;
+  }
+
+  :scope[striped] [data-body] > [role="row"]:nth-child(even) {
+    background: var(--table-row-bg-striped);
+  }
+
+  :scope[striped] [data-body] > [role="row"]:nth-child(even):hover {
+    background: var(--table-row-bg-hover);
+  }
+
+  /* ═══════ Selection checkboxes ═══════ */
+
+  [data-check-col] {
+    width: 2.5rem;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  /* Selectable: checkbox column width is handled by the parent grid-template-columns.
+     Subgrid rows inherit it automatically — no override needed. */
+
+  /* ═══════ Density ═══════ */
+
+  :scope[density="compact"] {
+    --table-py: var(--a-space-1);
+    --table-px: var(--a-space-2);
+  }
+
+  :scope[density="comfortable"] {
+    --table-py: var(--a-space-4);
+  }
+
+  /* ═══════ Pinned cells ═══════ */
+
+  [data-pinned="left"] {
+    position: sticky;
+    left: var(--_pin-left, 0);
+    z-index: var(--_z-pinned);
+    background: var(--table-bg);
+  }
+
+  [data-pinned="right"] {
+    position: sticky;
+    right: var(--_pin-right, 0);
+    z-index: var(--_z-pinned);
+    background: var(--table-bg);
+  }
+
+  [data-header] [data-pinned] {
+    z-index: var(--_z-header-pinned);
+  }
+
+  /* ═══════ Resize handle ═══════ */
+
+  [data-resize-handle] {
+    position: absolute;
+    right: calc(-1 * var(--table-resize-width) / 2);
+    top: 0;
+    bottom: 0;
+    width: var(--table-resize-width);
+    cursor: col-resize;
+    z-index: 1;
+  }
+
+  [data-resize-handle]:hover,
+  [data-resize-handle][data-resizing] {
+    background: var(--table-accent);
+  }
+
+  /* ═══════ Footer / pagination ═══════ */
+
+  [data-footer] {
+    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);
+  }
+
+  /* ═══════ Overlays (empty / loading / error) ═══════ */
+
+  [data-overlay],
+  [data-empty],
+  [data-loading] {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    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);
+    outline-offset: -2px;
+  }
+
+  /* ═══════ Disabled ═══════ */
+
+  :scope[disabled] {
+    pointer-events: none;
+    color: var(--table-fg-disabled);
+  }
+
+  :scope[disabled] [data-body] > [role="row"]:hover {
+    background: var(--table-row-bg);
+    color: var(--table-fg-disabled);
+  }
+
+  /* ═══════ Loading ═══════ */
+
+  :scope[loading] [data-body] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* ═══════ Filter UI ═══════ */
+
+  [data-filter-btn] {
+    all: unset;
+    cursor: pointer;
+    opacity: 0.5;
+    padding: 0 var(--table-filter-btn-px);
+    &:hover { opacity: 1; }
+  }
+
+  [role="columnheader"] { position: relative; }
+
+  [data-filter-dropdown] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    min-width: var(--table-cell-min-width);
+    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);
+    display: flex;
+    flex-direction: column;
+    gap: var(--table-filter-gap);
+  }
+
+  [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);
+    font: inherit;
+    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);
+    border: 1px solid var(--table-filter-border);
+    border-radius: var(--table-filter-input-radius);
+    font: inherit;
+    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);
+    font-size: var(--table-filter-input-size);
+    cursor: pointer;
+    padding: var(--table-filter-input-py) 0;
+  }
+
+  [data-filter-clear] {
+    all: unset;
+    cursor: pointer;
+    font-size: var(--table-filter-input-size);
+    color: var(--table-filter-clear-fg);
+    text-align: center;
+    padding: var(--table-filter-input-py);
+    &:hover { text-decoration: underline; }
+  }
+
+  /* ═══════ Filter Chips Bar ═══════ */
+
+  [data-filter-bar] {
+    grid-column: 1 / -1;
+    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);
+  }
+
+  [data-chip-dismiss] {
+    all: unset;
+    cursor: pointer;
+    margin-left: var(--table-chip-dismiss-gap);
+    opacity: 0.6;
+    &:hover { opacity: 1; }
+  }
+
+  [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);
+    &:hover { text-decoration: underline; }
+  }
+
+  /* ═══════ Row Expansion ═══════ */
+
+  [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);
+  }
+
+  [data-expand-toggle] {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform var(--table-duration) var(--table-easing);
+  }
+
+  [data-expanded] [data-expand-toggle] {
+    transform: rotate(90deg);
+  }
+
+  /* ═══════ Column Pinning ═══════ */
+
+  [data-pinned] {
+    position: sticky;
+    z-index: 1;
+    background: var(--table-pinned-bg);
+  }
+
+  [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);
+    pointer-events: none;
+    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)); top: 0; bottom: 0;
+    width: var(--table-pin-shadow-width);
+    pointer-events: none;
+    background: linear-gradient(to left, var(--table-pinned-shadow), transparent);
+  }
+
+  /* ═══════ Aggregation Footer ═══════ */
+
+  [data-agg-row] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    border-top: 2px solid var(--table-agg-border);
+    font-weight: 600;
+    font-size: var(--table-agg-size);
+    color: var(--table-fg-secondary);
+  }
+
+  [data-agg-row] > [role="gridcell"] {
+    padding: var(--table-agg-py) var(--table-agg-px);
+  }
+}