@slotted/styles 0.1.0-beta.0 → 0.1.0-beta.10

package/src/table/table.css

@@ -14,7 +14,7 @@
    * `prose` makes the same division for the same reason, and every token below
    * is declared here so both boxes and every cell read one set.
    */
-  [data-ui='table'][data-part='root'] {
+  [data-ui-table][data-part-root] {
     /* Geometry. Every value is the control scale's, because a row is a
        control-sized thing: one theme decision retunes the rows, the buttons and
        the fields together, and `@media (pointer: coarse)` grows all three at
@@ -146,7 +146,7 @@
     max-inline-size: 100%;
   }
 
-  [data-ui='table'][data-variant='framed'] {
+  [data-ui-table][data-variant='framed'] {
     border: var(--_rule-width) solid var(--_rule);
     border-radius: var(--_radius);
     /**
@@ -180,7 +180,7 @@
    * press Tab for nothing, and a wide table with no tab stop is unreachable
    * without a pointer.
    */
-  [data-ui='table'] [data-part='scroll'] {
+  [data-ui-table] [data-part-scroll] {
     /* `overscroll-behavior-inline: contain` keeps a sideways flick inside the
        table instead of walking the page back a step, which is the gesture a
        wide table on a trackpad produces constantly. */
@@ -189,8 +189,14 @@
   }
 
   /* The ring is drawn inside, because a scroller flush against the frame would
-     otherwise draw half its ring outside it. */
-  [data-ui='table'] [data-part='scroll']:focus-visible {
+     otherwise draw half its ring outside it. It is drawn for a focus from the
+     keyboard: a click on a cell focuses the scroller too, and the next Shift
+     would make it match `:focus-visible` (`createFocusOrigin`). The browser's own
+     ring is suppressed for the same focus. */
+  [data-ui-table] [data-part-scroll]:focus {
+    outline: none;
+  }
+  [data-ui-table] [data-part-scroll]:focus-visible[data-focus-origin='keyboard'] {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
@@ -204,7 +210,7 @@
    * a border radius. The rules are therefore drawn as one edge on each cell,
    * never as a border on the row.
    */
-  [data-ui='table'] [data-part='table'] {
+  [data-ui-table] [data-part-table] {
     border-collapse: separate;
     border-spacing: 0;
     /* The table fills the scroller and grows past it when its columns need
@@ -214,7 +220,7 @@
     text-align: start;
   }
 
-  [data-ui='table'][data-layout='fixed'] [data-part='table'] {
+  [data-ui-table][data-layout='fixed'] [data-part-table] {
     inline-size: 100%;
     table-layout: fixed;
   }
@@ -227,12 +233,12 @@
    * consumer who hides it with `visually-hidden` loses the picture and keeps
    * the name.
    */
-  [data-ui='table'] [data-part='caption'] {
+  [data-ui-table] [data-part-caption] {
     caption-side: block-start;
     color: var(--_muted);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     padding-block: var(--_pad-block);
-    padding-inline: var(--_pad-inline);
+    padding-inline: var(--_edge-inset);
     text-align: start;
   }
 
@@ -251,8 +257,8 @@
      column header above the alignment rule that comes after it — a header
      carrying data-align="end" computed text-align: start, so a numeric
      column's digits ended at one edge and their name at the other. */
-  [data-ui='table'] [data-part='column-header'],
-  [data-ui='table'] [data-part='head'] [data-part='selection'] {
+  [data-ui-table] [data-part-column-header],
+  [data-ui-table] [data-part-head] [data-part-selection] {
     background-color: var(--_head-surface);
     border-block-end: var(--_rule-width) solid var(--_rule-strong);
     color: var(--_text);
@@ -272,14 +278,14 @@
     vertical-align: bottom;
   }
 
-  [data-ui='table'][data-variant='plain'] [data-part='column-header'] {
+  [data-ui-table][data-variant='plain'] [data-part-column-header] {
     background-color: transparent;
   }
 
   /**
    * ── Rows and cells ─────────────────────────────────────────────────────
    */
-  [data-ui='table'] [data-part='row'] {
+  [data-ui-table] [data-part-row] {
     background-color: var(--_surface);
   }
 
@@ -299,35 +305,80 @@
    * because the cell that wants the other answer is usually one: the actions
    * pinned at the end of a tall row.
    */
-  [data-ui='table'] {
+  [data-ui-table] {
     --_cell-align: middle;
   }
 
-  [data-ui='table'][data-cell-align='start'] {
+  [data-ui-table][data-cell-align='start'] {
     --_cell-align: top;
   }
 
-  [data-ui='table'][data-cell-align='end'] {
+  [data-ui-table][data-cell-align='end'] {
     --_cell-align: bottom;
   }
 
-  [data-ui='table'] [data-part='cell'],
-  [data-ui='table'] [data-part='row-header'] {
+  [data-ui-table] [data-part-cell],
+  [data-ui-table] [data-part-row-header] {
     padding-block: var(--_pad-block);
     padding-inline: var(--_pad-inline);
     text-align: start;
     vertical-align: var(--_cell-align);
   }
 
-  [data-ui='table'] [data-block-align='start'] {
+  /**
+   * ── The outer edges ────────────────────────────────────────────────────
+   *
+   * The first and the last column take `--_edge-inset` on their outer side:
+   * the cell's own inset by default, and under `edges="flush"` the theme's
+   * `--slotted-table-edge-inset`, nought when it sets none — so a `plain` or
+   * `ruled` table lines its text up with the heading above it. A `framed`
+   * table keeps the inset whatever `edges` says: its text stands against a
+   * border, and text touching a border is the cramped picture the frame
+   * exists to avoid. A pinned column keeps its own offset, which is a
+   * position rather than a padding, and the selection cell keeps its own
+   * inset because it is not one of the parts named here — a table that leads
+   * with a chooser has no text at its edge.
+   */
+  [data-ui-table][data-part-root] {
+    --_edge-inset: var(--_pad-inline);
+  }
+
+  [data-ui-table][data-part-root][data-edges='flush']:is(
+      [data-variant='plain'],
+      [data-variant='ruled']
+    ) {
+    --_edge-inset: var(--slotted-table-edge-inset, 0px);
+  }
+
+  [data-ui-table]
+    [data-part-row]
+    > :is([data-part-cell], [data-part-row-header], [data-part-group-header]):first-child,
+  [data-ui-table]
+    [data-part-row]
+    > [data-part-column-header]:first-child:not(:has(> [data-part-sort])),
+  [data-ui-table] [data-part-row] > [data-part-column-header]:first-child > [data-part-sort] {
+    padding-inline-start: var(--_edge-inset);
+  }
+
+  [data-ui-table]
+    [data-part-row]
+    > :is([data-part-cell], [data-part-row-header], [data-part-group-header]):last-child,
+  [data-ui-table]
+    [data-part-row]
+    > [data-part-column-header]:last-child:not(:has(> [data-part-sort])),
+  [data-ui-table] [data-part-row] > [data-part-column-header]:last-child > [data-part-sort] {
+    padding-inline-end: var(--_edge-inset);
+  }
+
+  [data-ui-table] [data-block-align='start'] {
     vertical-align: top;
   }
 
-  [data-ui='table'] [data-block-align='center'] {
+  [data-ui-table] [data-block-align='center'] {
     vertical-align: middle;
   }
 
-  [data-ui='table'] [data-block-align='end'] {
+  [data-ui-table] [data-block-align='end'] {
     vertical-align: bottom;
   }
 
@@ -356,24 +407,24 @@
    * `timeline` or a nested table has a `plain` variant of its own and is not a
    * control. `table.styles.test.mjs` holds the two lists against each other.
    */
-  [data-ui='table']
-    :is([data-part='cell'], [data-part='row-header']):has(
-      > [data-part='root'][data-variant='plain']:is(
-          [data-ui='select'],
-          [data-ui='combobox'],
-          [data-ui='multi-select'],
-          [data-ui='text-field'],
-          [data-ui='textarea'],
-          [data-ui='number-field'],
-          [data-ui='currency-field'],
-          [data-ui='date-field'],
-          [data-ui='time-field'],
-          [data-ui='datetime-field'],
-          [data-ui='tags-input'],
-          [data-ui='date-range-picker'],
-          [data-ui='time-range-picker'],
-          [data-ui='datetime-range-picker'],
-          [data-ui='entity-picker']
+  [data-ui-table]
+    :is([data-part-cell], [data-part-row-header]):has(
+      > [data-part-root][data-variant='plain']:is(
+          [data-ui-select],
+          [data-ui-combobox],
+          [data-ui-multi-select],
+          [data-ui-text-field],
+          [data-ui-textarea],
+          [data-ui-number-field],
+          [data-ui-currency-field],
+          [data-ui-date-field],
+          [data-ui-time-field],
+          [data-ui-datetime-field],
+          [data-ui-tags-input],
+          [data-ui-date-range-picker],
+          [data-ui-time-range-picker],
+          [data-ui-datetime-range-picker],
+          [data-ui-entity-picker]
         )
     ) {
     --slotted-control-padding-inline-sm: var(--_pad-inline);
@@ -391,7 +442,7 @@
      against the row's ink, a selected record's name stayed the page's black
      while every value beside it turned accent, and a disabled row's name stayed
      at full strength — the two states the row paints and this cell refused. */
-  [data-ui='table'] [data-part='row-header'] {
+  [data-ui-table] [data-part-row-header] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
@@ -399,16 +450,16 @@
      it under `border-collapse: separate`. The last row of the body gives its
      rule up unless a footer follows, so a `ruled` table does not end in a line
      with nothing under it. */
-  [data-ui='table']:is([data-variant='ruled'], [data-variant='framed'])
-    [data-part='body']
-    > [data-part='row']
+  [data-ui-table]:is([data-variant='ruled'], [data-variant='framed'])
+    [data-part-body]
+    > [data-part-row]
     > * {
     border-block-end: var(--_rule-width) solid var(--_rule);
   }
 
-  [data-ui='table']:is([data-variant='ruled'], [data-variant='framed'])
-    [data-part='body']
-    > [data-part='row']:last-child
+  [data-ui-table]:is([data-variant='ruled'], [data-variant='framed'])
+    [data-part-body]
+    > [data-part-row]:last-child
     > * {
     border-block-end-color: transparent;
   }
@@ -418,7 +469,7 @@
      `nth-child(even)` counts rows the family renders; a detail row is a row of
      the same body, so the stripe follows the record it belongs to rather than
      alternating around it — see the detail rule below. */
-  [data-ui='table'][data-striped] [data-part='body'] > [data-part='row']:nth-child(even) {
+  [data-ui-table][data-striped] [data-part-body] > [data-part-row]:nth-child(even) {
     background-color: var(--_stripe);
   }
 
@@ -430,7 +481,7 @@
    * every pointer state rather than a rule of its own: a row a consumer has
    * disabled does not answer the pointer at all.
    */
-  [data-ui='table'] [data-part='body'] > [data-part='row']:not([data-disabled]):hover {
+  [data-ui-table] [data-part-body] > [data-part-row]:not([data-disabled]):hover {
     background-color: var(--_hover);
   }
 
@@ -446,21 +497,97 @@
    * is what survives forced colours, which is where WCAG 2.2 SC 1.4.1 puts the
    * requirement anyway.
    */
-  [data-ui='table'] [data-part='body'] > [data-part='row'][data-selected] {
+  [data-ui-table] [data-part-body] > [data-part-row][data-selected] {
     background-color: var(--_selected);
     color: var(--_selected-text);
   }
 
-  [data-ui='table']
-    [data-part='body']
-    > [data-part='row'][data-selected]:not([data-disabled]):hover {
+  [data-ui-table] [data-part-body] > [data-part-row][data-selected]:not([data-disabled]):hover {
     background-color: var(--_selected-hover);
   }
 
-  [data-ui='table'] [data-part='row'][data-disabled] {
+  [data-ui-table] [data-part-row][data-disabled] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
+  /**
+   * The row the page shows elsewhere — the record open in a detail pane. A
+   * neutral ground a step beyond hover, so the pointer passing over it changes
+   * nothing, and no edge on the start side (R1). It is opaque, because a
+   * pinned cell copies the row's ground and a translucent one shows the
+   * scrolled cells through it. Selection is stronger and paints over it.
+   */
+  [data-ui-table] [data-part-body] > [data-part-row][data-current]:not([data-selected]) {
+    background-color: var(
+      --slotted-table-row-surface-current,
+      var(--slotted-tone-secondary-subtle-active, ButtonFace)
+    );
+  }
+
+  /* A row with an action of its own is a thing the pointer presses. */
+  [data-ui-table] [data-part-body] > [data-part-row][data-interactive]:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  /**
+   * ── The band that opens a group ────────────────────────────────────────
+   *
+   * One header cell across every column: the group's name at the start and
+   * its total at the end, in tabular figures so a column of daily nets lines
+   * up. The ground is the stripe's step, opaque for the same reason a pinned
+   * cell's is, and the band stays where it is when the pointer passes.
+   */
+  [data-ui-table] [data-part-group-header] {
+    background-color: var(--slotted-table-group-surface, var(--_stripe));
+    border-block-end: var(--_rule-width) solid var(--_rule);
+    color: var(--slotted-table-group-color, var(--_text));
+    font-weight: var(--slotted-font-weight-semibold, 600);
+    padding-block: var(--_pad-block);
+    padding-inline: var(--_pad-inline);
+    text-align: start;
+  }
+
+  [data-ui-table] [data-part-group-content] {
+    align-items: baseline;
+    display: flex;
+    gap: var(--_gap);
+    justify-content: space-between;
+    min-inline-size: 0;
+  }
+
+  [data-ui-table] [data-part-group-end] {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  /**
+   * A sticky band stops under the header when the header sticks too. The
+   * header's height is one row of the control scale and its rule; a header
+   * that wraps sets `--slotted-table-group-sticky-offset` itself.
+   */
+  [data-ui-table] [data-part-group-row][data-sticky] > [data-part-group-header] {
+    inset-block-start: var(--slotted-table-group-sticky-offset, 0);
+    position: sticky;
+    z-index: var(--slotted-z-index-sticky, 100);
+  }
+
+  [data-ui-table][data-sticky-header]
+    [data-part-group-row][data-sticky]
+    > [data-part-group-header] {
+    inset-block-start: var(
+      --slotted-table-group-sticky-offset,
+      calc(var(--_row-min-block) + var(--_rule-width))
+    );
+  }
+
+  @media (forced-colors: active) {
+    [data-ui-table] [data-part-body] > [data-part-row][data-current] {
+      outline: var(--_rule-width) solid Highlight;
+      outline-offset: calc(var(--_rule-width) * -1);
+    }
+  }
+
   /**
    * ── Alignment and numerals ─────────────────────────────────────────────
    *
@@ -469,25 +596,25 @@
    * `start` and `end` are the logical values, so a column aligned to the end is
    * on the right in English and on the left in Arabic.
    */
-  [data-ui='table'] [data-align='start'] {
+  [data-ui-table] [data-align='start'] {
     text-align: start;
   }
 
-  [data-ui='table'] [data-align='center'] {
+  [data-ui-table] [data-align='center'] {
     text-align: center;
   }
 
-  [data-ui='table'] [data-align='end'] {
+  [data-ui-table] [data-align='end'] {
     text-align: end;
   }
 
   /* A ten under a nine is only a column if the digits are the same width. The
      alignment is inferred once, and only where the consumer stated none. */
-  [data-ui='table'] [data-numeric] {
+  [data-ui-table] [data-numeric] {
     font-variant-numeric: tabular-nums;
   }
 
-  [data-ui='table'] [data-numeric]:not([data-align]) {
+  [data-ui-table] [data-numeric]:not([data-align]) {
     text-align: end;
   }
 
@@ -498,18 +625,18 @@
    * decision is that a truncated string stays readable to assistive technology
    * and reachable in full.
    */
-  [data-ui='table'] [data-text='wrap'] {
+  [data-ui-table] [data-text='wrap'] {
     /* An identifier, a hash or a URL is one unbroken token, and every surveyed
        table lets it set the column's width and push the rest of the table
        sideways. */
     overflow-wrap: anywhere;
   }
 
-  [data-ui='table'] [data-text='nowrap'] {
+  [data-ui-table] [data-text='nowrap'] {
     white-space: nowrap;
   }
 
-  [data-ui='table'] [data-text='truncate'] {
+  [data-ui-table] [data-text='truncate'] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -542,21 +669,33 @@
    * written where the choice is made: a table wider than the page pushes the
    * page sideways instead of scrolling inside its frame.
    *
-   * The offset is where the header stops. An application with a bar of its own
-   * sets `--slotted-table-sticky-offset` once, and every table under it stops
-   * below the bar rather than under it.
+   * The offset is where the header stops under `page`. An application with a
+   * bar of its own sets `--slotted-table-sticky-offset` once, and every table
+   * under it stops below the bar rather than under it. Under `scroll` the
+   * header stops at the top of the family's own scroller and reads no offset:
+   * `page.css` binds the offset to the page's chrome for every table inside
+   * the page, and a header reading it stood that far below its own scroller's
+   * top, over the first rows. A `page` table inside a scrolling box of the
+   * consumer's own sets the offset on that box, `0` for its top edge.
    */
-  [data-ui='table'][data-sticky-header] [data-part='column-header'],
+  [data-ui-table][data-sticky-header] [data-part-column-header],
   /* The chooser's own header is a `selection` cell and not a `column-header`,
      and a rule naming only the second left the select-all scrolling away while
      every column beside it stayed. */
-  [data-ui='table'][data-sticky-header] [data-part='head'] [data-part='selection'] {
-    inset-block-start: var(--slotted-table-sticky-offset, 0);
+  [data-ui-table][data-sticky-header] [data-part-head] [data-part-selection] {
+    inset-block-start: 0;
     position: sticky;
     z-index: calc(var(--slotted-z-index-sticky, 100) + 1);
   }
 
-  [data-ui='table'][data-sticky-to='page'] [data-part='scroll'] {
+  [data-ui-table][data-sticky-to='page'][data-sticky-header] [data-part-column-header],
+  [data-ui-table][data-sticky-to='page'][data-sticky-header]
+    [data-part-head]
+    [data-part-selection] {
+    inset-block-start: var(--slotted-table-sticky-offset, 0);
+  }
+
+  [data-ui-table][data-sticky-to='page'] [data-part-scroll] {
     overflow: visible;
   }
 
@@ -571,19 +710,26 @@
    * It is the `tfoot` that is pinned and not the footer bar: the bar is a
    * sibling of the scroller and never leaves it in the first place.
    */
-  [data-ui='table'][data-sticky-footer] [data-part='summary'] > [data-part='row'] > * {
-    inset-block-end: var(--slotted-table-sticky-offset-end, 0);
+  [data-ui-table][data-sticky-footer] [data-part-summary] > [data-part-row] > * {
+    inset-block-end: 0;
     position: sticky;
     z-index: calc(var(--slotted-z-index-sticky, 100) + 1);
   }
 
+  [data-ui-table][data-sticky-to='page'][data-sticky-footer]
+    [data-part-summary]
+    > [data-part-row]
+    > * {
+    inset-block-end: var(--slotted-table-sticky-offset-end, 0);
+  }
+
   /* The corner again, at the bottom: a summary cell that is also a pinned
      column takes both insets and the step above both. */
-  [data-ui='table'][data-sticky-footer] [data-part='summary'] [data-sticky] {
+  [data-ui-table][data-sticky-footer] [data-part-summary] [data-sticky] {
     z-index: calc(var(--slotted-z-index-sticky, 100) + 2);
   }
 
-  [data-ui='table'] [data-sticky='start'] {
+  [data-ui-table] [data-sticky='start'] {
     /* The ground the row is painted with, whatever state it is in: `inherit`
        takes the row's own computed value, so a hovered, striped or selected row
        keeps one colour across the seam. */
@@ -601,15 +747,15 @@
     z-index: var(--slotted-z-index-sticky, 100);
   }
 
-  [data-ui='table'] [data-sticky='end'] {
+  [data-ui-table] [data-sticky='end'] {
     background-color: inherit;
     inset-inline-end: var(--slotted-table-sticky-inset, 0);
     position: sticky;
     z-index: var(--slotted-z-index-sticky, 100);
   }
 
-  [data-ui='table'][data-sticky-header] [data-part='column-header'][data-sticky],
-  [data-ui='table'][data-sticky-header] [data-part='head'] [data-part='selection'][data-sticky] {
+  [data-ui-table][data-sticky-header] [data-part-column-header][data-sticky],
+  [data-ui-table][data-sticky-header] [data-part-head] [data-part-selection][data-sticky] {
     background-color: var(--_head-surface);
     z-index: calc(var(--slotted-z-index-sticky, 100) + 2);
   }
@@ -642,7 +788,7 @@
      positioned box, so the line below resolves against it — and a `relative`
      written at this point in the file would land after the sticky rules and
      unpin every pinned column. */
-  [data-ui='table'] [data-sticky]::after {
+  [data-ui-table] [data-sticky]::after {
     background-color: var(--slotted-table-border-color, var(--slotted-border-subtle));
     content: '';
     inline-size: var(--_rule-width);
@@ -651,11 +797,11 @@
     z-index: 1;
   }
 
-  [data-ui='table'] [data-sticky='start']::after {
+  [data-ui-table] [data-sticky='start']::after {
     inset-inline-end: 0;
   }
 
-  [data-ui='table'] [data-sticky='end']::after {
+  [data-ui-table] [data-sticky='end']::after {
     inset-inline-start: 0;
   }
 
@@ -694,7 +840,7 @@
    * so does this: the header cell gives up its inset and the control takes it,
    * so the whole header is the target rather than the words inside it.
    */
-  [data-ui='table'] [data-part='column-header']:has(> [data-part='sort']) {
+  [data-ui-table] [data-part-column-header]:has(> [data-part-sort]) {
     padding: 0;
   }
 
@@ -728,7 +874,7 @@
    * consumer's own, so their width is not a fact this family holds, and
    * measuring it would mean reading the layout during render.
    */
-  [data-ui='table'] [data-part='column-header']:has(> [data-part='column-actions']) {
+  [data-ui-table] [data-part-column-header]:has(> [data-part-column-actions]) {
     /**
      * The room is what the slot actually occupies plus one gap: the slot stands
      * `--_pad-inline` in from the cell's edge and its control is one target
@@ -745,7 +891,7 @@
     padding-inline-end: var(--_actions-room);
   }
 
-  [data-ui='table'] [data-part='column-actions'] {
+  [data-ui-table] [data-part-column-actions] {
     align-items: center;
     display: inline-flex;
     gap: var(--_gap);
@@ -754,7 +900,7 @@
     position: absolute;
   }
 
-  [data-ui='table'] [data-part='sort'] {
+  [data-ui-table] [data-part-sort] {
     /* The mark is centred on the text rather than dropped at the top of the
        line: with the default `stretch` resolving to `flex-start` under a stated
        block size, the chevron sat two pixels above the capitals and read as a
@@ -790,11 +936,11 @@
   /* An aligned column keeps its name over its values, and the mark follows the
      name rather than the cell: a centred column reads as a centred pair, and a
      numeric column's name and mark both stand at the edge its digits end on. */
-  [data-ui='table'] [data-align='center'] > [data-part='sort'] {
+  [data-ui-table] [data-align='center'] > [data-part-sort] {
     justify-content: center;
   }
 
-  [data-ui='table'] :is([data-align='end'], [data-numeric]:not([data-align])) > [data-part='sort'] {
+  [data-ui-table] :is([data-align='end'], [data-numeric]:not([data-align])) > [data-part-sort] {
     justify-content: end;
   }
 
@@ -814,20 +960,20 @@
    * scale holds a ground one step under this one, and mixing keeps the
    * direction right in every scheme.
    */
-  [data-ui='table'] [data-part='column-header']:has(> [data-part='sort']:not(:disabled)):hover {
+  [data-ui-table] [data-part-column-header]:has(> [data-part-sort]:not(:disabled)):hover {
     background-color: var(
       --slotted-table-header-surface-hover,
       color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface))
     );
   }
 
-  [data-ui='table'] [data-part='column-header'] {
+  [data-ui-table] [data-part-column-header] {
     transition: background-color
       var(--slotted-control-transition-duration, var(--slotted-duration-short))
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='table'] [data-part='sort']:focus-visible {
+  [data-ui-table] [data-part-sort]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
@@ -842,7 +988,7 @@
    * pointer or under focus, so the column says it can be sorted without twelve
    * marks competing with twelve names. The sorted column keeps its mark drawn.
    */
-  [data-ui='table'] [data-part='sort'] > [data-ui='icon'] {
+  [data-ui-table] [data-part-sort] > [data-ui-icon] {
     --slotted-icon-size: var(--_icon-size);
     opacity: 0;
     transition:
@@ -852,19 +998,19 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='table'] [data-part='sort']:not(:disabled):hover > [data-ui='icon'],
-  [data-ui='table'] [data-part='sort']:focus-visible > [data-ui='icon'] {
+  [data-ui-table] [data-part-sort]:not(:disabled):hover > [data-ui-icon],
+  [data-ui-table] [data-part-sort]:focus-visible > [data-ui-icon] {
     opacity: 0.55;
   }
 
-  [data-ui='table'] [aria-sort] > [data-part='sort'] > [data-ui='icon'] {
+  [data-ui-table] [aria-sort] > [data-part-sort] > [data-ui-icon] {
     opacity: 1;
   }
 
   /* Ascending is the same mark turned over. The rotation is animated because it
      is the one movement in this family a reader has to follow: the column did
      not change, its direction did. */
-  [data-ui='table'] [aria-sort='ascending'] > [data-part='sort'] > [data-ui='icon'] {
+  [data-ui-table] [aria-sort='ascending'] > [data-part-sort] > [data-ui-icon] {
     rotate: 180deg;
   }
 
@@ -884,7 +1030,7 @@
    * past the chooser and over the column behind it. Now one name answers both
    * places: this width, and the `stickyOffset` beside it.
    */
-  [data-ui='table'] [data-part='selection'] {
+  [data-ui-table] [data-part-selection] {
     inline-size: var(--slotted-table-selection-size, 3rem);
     padding-block: var(--_pad-block);
     padding-inline: var(--_pad-inline);
@@ -898,7 +1044,7 @@
 
   /* The control is one line tall whatever the row is, so it sits on the line
      the axis puts it on rather than stretching down a three-line cell. */
-  [data-ui='table'] [data-part='selection'] > [data-ui='checkbox'] {
+  [data-ui-table] [data-part-selection] > [data-ui-checkbox] {
     block-size: var(--_line);
   }
 
@@ -917,7 +1063,7 @@
    * be this stylesheet deciding how that one looks. The target is unaffected —
    * it is a separate pseudo-element, and it stays at the WCAG minimum.
    */
-  [data-ui='table'] [data-part='selection'] {
+  [data-ui-table] [data-part-selection] {
     --slotted-selection-halo-opacity: 0;
   }
 
@@ -929,7 +1075,7 @@
    * expander inside the row header moved one identifier and left the column
    * ragged.
    */
-  [data-ui='table'] [data-part='cell']:has(> [data-part='expander']) {
+  [data-ui-table] [data-part-cell]:has(> [data-part-expander]) {
     inline-size: 1%;
     padding-inline-end: 0;
     white-space: nowrap;
@@ -945,7 +1091,7 @@
    * out. `display: contents` removes both wrappers from layout and leaves the
    * button as the slot's own child, which is the box tree React already has.
    */
-  [data-ui='table'] [data-part='column-actions'] *:has([data-part='filter']) {
+  [data-ui-table] [data-part-column-actions] *:has([data-part-filter]) {
     display: contents;
   }
 
@@ -957,10 +1103,10 @@
    * turn when the detail is open — and mirrored in a right-to-left document,
    * where a closed disclosure points the other way.
    */
-  [data-ui='table'] [data-part='expander'],
-  [data-ui='table'] [data-part='column-actions'] > button,
-  [data-ui='table'] button[data-part='column-actions'],
-  [data-ui='table'] [data-part='filter'] {
+  [data-ui-table] [data-part-expander],
+  [data-ui-table] [data-part-column-actions] > button,
+  [data-ui-table] button[data-part-column-actions],
+  [data-ui-table] [data-part-filter] {
     background-color: transparent;
     border: 0;
     border-radius: var(--slotted-table-control-radius, var(--slotted-radius-sm, 4px));
@@ -1001,39 +1147,39 @@
    * back across them.
    */
   @media (pointer: coarse) {
-    [data-ui='table'] [data-part='expander'],
-    [data-ui='table'] [data-part='column-actions'] > button,
-    [data-ui='table'] button[data-part='column-actions'],
-    [data-ui='table'] [data-part='filter'] {
+    [data-ui-table] [data-part-expander],
+    [data-ui-table] [data-part-column-actions] > button,
+    [data-ui-table] button[data-part-column-actions],
+    [data-ui-table] [data-part-filter] {
       position: relative;
     }
 
-    [data-ui='table'] [data-part='expander']::after,
-    [data-ui='table'] [data-part='column-actions'] > button::after,
-    [data-ui='table'] button[data-part='column-actions']::after,
-    [data-ui='table'] [data-part='filter']::after {
+    [data-ui-table] [data-part-expander]::after,
+    [data-ui-table] [data-part-column-actions] > button::after,
+    [data-ui-table] button[data-part-column-actions]::after,
+    [data-ui-table] [data-part-filter]::after {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
     }
 
-    [data-ui='table'] [data-part='column-actions'] > button::after,
-    [data-ui='table'] button[data-part='column-actions']::after,
-    [data-ui='table'] [data-part='filter']::after {
+    [data-ui-table] [data-part-column-actions] > button::after,
+    [data-ui-table] button[data-part-column-actions]::after,
+    [data-ui-table] [data-part-filter]::after {
       inset-inline-start: 0;
     }
   }
 
-  [data-ui='table'] [data-part='expander']:not(:disabled):hover {
+  [data-ui-table] [data-part-expander]:not(:disabled):hover {
     background-color: var(--_hover);
     color: var(--_text);
   }
 
   /* On the band the hover darkens, for the reason the sort control's does: the
      step a row hovers with is lighter than the band and reads as a hole in it. */
-  [data-ui='table'] [data-part='column-actions'] > button:not(:disabled):hover,
-  [data-ui='table'] button[data-part='column-actions']:not(:disabled):hover,
-  [data-ui='table'] [data-part='filter']:not(:disabled):hover {
+  [data-ui-table] [data-part-column-actions] > button:not(:disabled):hover,
+  [data-ui-table] button[data-part-column-actions]:not(:disabled):hover,
+  [data-ui-table] [data-part-filter]:not(:disabled):hover {
     background-color: var(
       --slotted-table-header-surface-hover,
       color-mix(in oklab, var(--slotted-text, CanvasText) 7%, var(--_head-surface))
@@ -1046,10 +1192,10 @@
      because both stand against an edge the ring would otherwise cross; these
      are 24-pixel boxes inside a cell's own inset, and read at that size an
      inward ring closed on the chevron. */
-  [data-ui='table'] [data-part='expander']:focus-visible,
-  [data-ui='table'] [data-part='column-actions'] > button:focus-visible,
-  [data-ui='table'] button[data-part='column-actions']:focus-visible,
-  [data-ui='table'] [data-part='filter']:focus-visible {
+  [data-ui-table] [data-part-expander]:focus-visible,
+  [data-ui-table] [data-part-column-actions] > button:focus-visible,
+  [data-ui-table] button[data-part-column-actions]:focus-visible,
+  [data-ui-table] [data-part-filter]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: 0;
   }
@@ -1062,7 +1208,7 @@
    * nineteen and a half — the control scale is right for a control in a form
    * and wrong for a mark in a header.
    */
-  [data-ui='table'] :is([data-part='column-actions'], [data-part='filter']) :is(svg, img) {
+  [data-ui-table] :is([data-part-column-actions], [data-part-filter]) :is(svg, img) {
     block-size: var(--_icon-size);
     inline-size: var(--_icon-size);
   }
@@ -1075,8 +1221,8 @@
    * accent ink and holds it whether the pointer is on it or not, because a
    * filter a reader forgot they set is the defect this state exists to prevent.
    */
-  [data-ui='table'] [data-part='filter'][data-filtered],
-  [data-ui='table'] [data-part='filter'][data-filtered]:not(:disabled):hover {
+  [data-ui-table] [data-part-filter][data-filtered],
+  [data-ui-table] [data-part-filter][data-filtered]:not(:disabled):hover {
     color: var(--slotted-tone-accent-text, LinkText);
   }
 
@@ -1084,17 +1230,17 @@
    * The panel, which is drawn wherever `popover` puts it — inside the header or
    * portalled to the end of the document. So it carries the family's identity
    * on itself rather than reading it from an ancestor: a rule that reached for
-   * `[data-ui='table']` above would style the panel in one of the two.
+   * `[data-ui-table]` above would style the panel in one of the two.
    *
    * And it declares the values it uses rather than reading them from the root,
-   * for the same reason. Every `--_` above is declared on `[data-part='root']`;
+   * for the same reason. Every `--_` above is declared on `[data-part-root]`;
    * portalled to the end of the document the panel is not inside it, and a
    * custom property that resolves to nothing takes its whole declaration with
    * it — `gap: var(--_gap)` became no gap at all, silently, in the one
    * arrangement `popover` uses by default. The eight below are the panel's own,
    * from the same theme tokens the root reads.
    */
-  [data-ui='table'][data-part='filter-panel'] {
+  [data-ui-table][data-part-filter-panel] {
     --_gap: var(--slotted-table-gap, var(--slotted-control-gap-md, 8px));
     --_font-size: var(--slotted-table-font-size, var(--slotted-control-font-size-md, 13px));
     --_line: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));
@@ -1164,13 +1310,13 @@
    * rather than set on a row, because an operator name is the widest thing in
    * the panel and a row would give the value what was left of 15rem.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-condition'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-condition] {
     display: grid;
     gap: calc(var(--_gap) / 2);
   }
 
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operator'],
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-search'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operator],
+  [data-ui-table][data-part-filter-panel] [data-part-filter-search] {
     display: block;
   }
 
@@ -1185,14 +1331,14 @@
    * way round: two number fields side by side in a 15rem panel are two fields
    * nobody can read.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operand'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operand] {
     display: grid;
     gap: calc(var(--_gap) / 2);
     grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
   }
 
   /* A set's operand is a search and a list, which own their own stacking. */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operand'][data-kind='set'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operand][data-kind='set'] {
     grid-template-columns: 1fr;
     gap: var(--_gap);
   }
@@ -1210,9 +1356,9 @@
    * one field, and the field takes the panel's width so the wrapping has
    * somewhere to go.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operand'][data-range],
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operand'][data-kind='datetime'],
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-operand'][data-operand='tags'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operand][data-range],
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operand][data-kind='datetime'],
+  [data-ui-table][data-part-filter-panel] [data-part-filter-operand][data-operand='tags'] {
     grid-template-columns: 1fr;
   }
 
@@ -1225,8 +1371,8 @@
    * `between` is one range picker, marked `data-range`, and this rule stands
    * after the one above, so it steps aside for that mark.
    */
-  [data-ui='table'][data-part='filter-panel']
-    [data-part='filter-operand'][data-kind='time']:not([data-range]) {
+  [data-ui-table][data-part-filter-panel]
+    [data-part-filter-operand][data-kind='time']:not([data-range]) {
     grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   }
 
@@ -1235,7 +1381,7 @@
    * conditions are separate boxes and the reader has to see where the first ends
    * before being asked how the second joins it.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-join'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-join] {
     align-items: center;
     border-block-start: var(--_rule-width) solid var(--_rule);
     display: flex;
@@ -1244,7 +1390,7 @@
     padding-block-start: var(--_gap);
   }
 
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-join'] > [data-label] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-join] > [data-label] {
     color: var(--_muted);
   }
 
@@ -1253,7 +1399,7 @@
    * than the screen. Eight rows is the height a set filter opens at in AG Grid
    * and about the height Excel's opens at; past that the reader searches.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-list'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-list] {
     display: grid;
     gap: var(--_gap);
     max-block-size: calc(var(--_line) * 9);
@@ -1273,7 +1419,7 @@
    * pulled out to the panel's inset so it reads as a row rather than as a box
    * around the words.
    */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-option'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-option] {
     --slotted-selection-halo-opacity: 0;
 
     align-items: center;
@@ -1285,26 +1431,25 @@
     padding-inline: var(--_gap);
   }
 
-  [data-ui='table'][data-part='filter-panel']
-    [data-part='filter-option']:not([data-disabled]):hover {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-option]:not([data-disabled]):hover {
     background-color: var(--_hover);
   }
 
   /* The count is the consumer's fact about their own query, so it is set apart
      from the value rather than beside it as a second label. */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-option'] > [data-count] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-option] > [data-count] {
     color: var(--_muted);
     font-variant-numeric: tabular-nums;
   }
 
   /* The covering checkbox is a row of the same list and a boundary at once: it
      answers for everything under it, so the rule says where "everything" ends. */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-option'][data-covering] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-option][data-covering] {
     border-block-end: var(--_rule-width) solid var(--_rule);
     padding-block-end: var(--_gap);
   }
 
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-empty'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-empty] {
     color: var(--_muted);
     padding-block: var(--_pad-block);
     text-align: center;
@@ -1312,7 +1457,7 @@
 
   /* Clear at the leading edge and Apply at the trailing one: the destructive
      answer is farthest from the one a reader presses without reading. */
-  [data-ui='table'][data-part='filter-panel'] [data-part='filter-actions'] {
+  [data-ui-table][data-part-filter-panel] [data-part-filter-actions] {
     border-block-start: var(--_rule-width) solid var(--_rule);
     display: flex;
     gap: var(--_gap);
@@ -1321,25 +1466,25 @@
   }
 
   /* The chevron is the `Glyph` the binding draws inside the button. */
-  [data-ui='table'] [data-part='expander'] > [data-ui='icon'] {
+  [data-ui-table] [data-part-expander] > [data-ui-icon] {
     --slotted-icon-size: var(--_icon-size);
     rotate: 0deg;
     transition: rotate var(--slotted-control-transition-duration, var(--slotted-duration-short))
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='table'] [data-part='expander'][aria-expanded='true'] > [data-ui='icon'] {
+  [data-ui-table] [data-part-expander][aria-expanded='true'] > [data-ui-icon] {
     rotate: 90deg;
   }
 
   /* A chevron is direction-sensitive artwork, so it is mirrored rather than
      reused: a closed row in Arabic points to the start of the line, which is
      the right-hand side. */
-  [data-ui='table']:dir(rtl) [data-part='expander'] > [data-ui='icon'] {
+  [data-ui-table]:dir(rtl) [data-part-expander] > [data-ui-icon] {
     scale: -1 1;
   }
 
-  [data-ui='table']:dir(rtl) [data-part='expander'][aria-expanded='true'] > [data-ui='icon'] {
+  [data-ui-table]:dir(rtl) [data-part-expander][aria-expanded='true'] > [data-ui-icon] {
     rotate: -90deg;
   }
 
@@ -1351,25 +1496,25 @@
    * reach, and it takes the sunken ground so the record it belongs to still
    * reads as one thing.
    */
-  [data-ui='table'] [data-part='detail'] {
+  [data-ui-table] [data-part-detail] {
     background-color: var(--_stripe);
   }
 
-  [data-ui='table'] [data-part='detail'] > [data-part='cell'] {
+  [data-ui-table] [data-part-detail] > [data-part-cell] {
     padding-block: var(--_pad-block);
     padding-inline: var(--_pad-inline);
   }
 
   /* A detail row is not a record, so it takes no stripe of its own and never
      shifts the alternation of the rows around it. */
-  [data-ui='table'][data-striped] [data-part='body'] > [data-part='detail'] {
+  [data-ui-table][data-striped] [data-part-body] > [data-part-detail] {
     background-color: var(--_stripe);
   }
 
   /**
    * ── Empty and loading ──────────────────────────────────────────────────
    */
-  [data-ui='table'] [data-part='empty'] {
+  [data-ui-table] [data-part-empty] {
     color: var(--_muted);
     padding-block: var(--slotted-space-9, 2rem);
     padding-inline: var(--_pad-inline);
@@ -1379,7 +1524,7 @@
   /* The skeleton rows of a first load. The shapes are `skeleton`'s own; what
      this family supplies is the row that holds them, so the table's shape is
      visible before its content arrives. */
-  [data-ui='table'] [data-part='loader'] > [data-part='row'] > * {
+  [data-ui-table] [data-part-loader] > [data-part-row] > * {
     padding-block: var(--_pad-block);
     padding-inline: var(--_pad-inline);
   }
@@ -1389,7 +1534,7 @@
    * body dims and nothing moves: the column widths are the table's, the scroll
    * position is the reader's, and swapping rows for skeletons would take both.
    */
-  [data-ui='table'][data-loading] [data-part='body'] {
+  [data-ui-table][data-loading] [data-part-body] {
     opacity: 0.55;
     transition: opacity var(--slotted-control-transition-duration, var(--slotted-duration-short))
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
@@ -1404,7 +1549,7 @@
    * kind of boundary — and it is not the `footer`, which is a bar outside the
    * table holding the consumer's own controls.
    */
-  [data-ui='table'] [data-part='summary'] > [data-part='row'] > * {
+  [data-ui-table] [data-part-summary] > [data-part-row] > * {
     background-color: var(--_head-surface);
     border-block-start: var(--_rule-width) solid var(--_rule-strong);
     font-weight: var(--slotted-font-weight-medium, 500);
@@ -1412,7 +1557,7 @@
     padding-inline: var(--_pad-inline);
   }
 
-  [data-ui='table'][data-variant='plain'] [data-part='summary'] > [data-part='row'] > * {
+  [data-ui-table][data-variant='plain'] [data-part-summary] > [data-part-row] > * {
     background-color: transparent;
   }
 
@@ -1428,7 +1573,7 @@
    * a count, a bulk-action bar. The family draws the rule above it and the
    * inset around it, and nothing else.
    */
-  [data-ui='table'] [data-part='footer'] {
+  [data-ui-table] [data-part-footer] {
     align-items: center;
     border-block-start: var(--_rule-width) solid var(--_rule);
     display: flex;
@@ -1450,7 +1595,7 @@
    * So the bar states the room instead of asking for it, and a control that
    * wants to sit at the trailing edge justifies itself there.
    */
-  [data-ui='table'] [data-part='footer'] > :last-child {
+  [data-ui-table] [data-part-footer] > :last-child {
     flex: 1 1 auto;
     /* And it aligns its own content to the trailing edge, which is where a
        listing screen puts its paging control. The rule is structural rather
@@ -1467,15 +1612,15 @@
    * repeats at the top of every printed page.
    */
   @media print {
-    [data-ui='table'] [data-part='scroll'] {
+    [data-ui-table] [data-part-scroll] {
       max-block-size: none;
       overflow: visible;
     }
 
-    [data-ui='table'][data-sticky-header] [data-part='column-header'],
-    [data-ui='table'][data-sticky-header] [data-part='head'] [data-part='selection'],
-    [data-ui='table'][data-sticky-footer] [data-part='summary'] > [data-part='row'] > *,
-    [data-ui='table'] [data-sticky] {
+    [data-ui-table][data-sticky-header] [data-part-column-header],
+    [data-ui-table][data-sticky-header] [data-part-head] [data-part-selection],
+    [data-ui-table][data-sticky-footer] [data-part-summary] > [data-part-row] > *,
+    [data-ui-table] [data-sticky] {
       position: static;
     }
   }