@ethlete/components 1.0.0-next.69 → 1.0.0-next.71

package/src/lib/table/table-page-sticky-header-styles.component.css

@@ -0,0 +1,77 @@
+@layer components {
+  @property --et-table-sticky-header-offset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --_et-table-inline-scroll {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --_et-table-inline-max-scroll {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  /* The page scrolls this table, so the host scrolls nothing - but it keeps the grid and its
+     `minmax(0, 1fr)` column. As a plain block its inline min-content size would be the header strip's
+     whole track width, and no ancestor can be narrower than that: a window under it scrolls the page
+     sideways instead of narrowing the table. */
+  .et-table-host--page-sticky-header {
+    grid-template-rows: none;
+    overflow: visible;
+    position: relative;
+  }
+
+  .et-table-header-strip {
+    position: sticky;
+    inset-block-start: var(--et-table-sticky-header-offset);
+    /* The strip is a grid item, and the column it sits in has a 0 floor. Without this it takes its
+       content's width instead and hangs out past the table, rather than clipping the columns that
+       scroll behind it. */
+    min-inline-size: 0;
+    overflow: clip;
+    z-index: 4;
+  }
+
+  .et-table-header {
+    transform: translateX(calc(-1 * var(--_et-table-inline-scroll)));
+  }
+
+  /* The strip pins these cells, so they do not pin themselves. The gap an appearance leaves under the
+     header (`cards`) leaves with them: the strip is pinned over the rows and paints its own surface, so
+     it has to end on the header's rule instead of covering the rows for the gap's height as well. The
+     body below carries that gap - see the scroller. */
+  .et-table-header .et-table-header-cell {
+    position: relative;
+    inset-block-start: auto;
+    margin-block-end: 0;
+  }
+
+  /* Padding rather than a margin on the header, so the busy bar's negative offset lands inside the
+     scrollport instead of in unreachable overflow above it.
+
+     The bar is the host's: `scrollbar-color` inherits on its own, `scrollbar-width` does not, and a
+     table that hides its own bar (or thins it) must not get the platform's one back in this layout. */
+  .et-table-scroller {
+    padding-block-start: var(--_et-table-header-gap-block);
+    overflow-x: auto;
+    scrollbar-width: inherit;
+  }
+
+  .et-table-header .et-table-header-cell.et-table-sticky-start {
+    transform: translateX(var(--_et-table-inline-scroll));
+  }
+
+  .et-table-header .et-table-header-cell.et-table-sticky-end {
+    transform: translateX(calc(var(--_et-table-inline-scroll) - var(--_et-table-inline-max-scroll)));
+  }
+
+  .et-table-host--page-sticky-header:dir(rtl) .et-table-header .et-table-header-cell.et-table-sticky-end {
+    transform: translateX(calc(var(--_et-table-inline-scroll) + var(--_et-table-inline-max-scroll)));
+  }
+}

package/src/lib/table/table-reorder-overlay.component.css

@@ -0,0 +1,42 @@
+@layer components {
+  /* The affordance is put on the table host by the feature, so only a reorderable table's headers
+     advertise the grab — pinned columns are excluded, they can't be dragged. */
+  .et-table-host--reorderable
+    .et-table-header-cell:not(
+      .et-table-sticky-start,
+      .et-table-sticky-end,
+      .et-table-select-cell,
+      .et-table-expander-cell
+    ) {
+    cursor: grab;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+
+  /* The source header stays in place, dimmed, while its floating ghost is dragged. */
+  .et-table-header-cell:where(.et-table-header-cell--dragging) {
+    cursor: grabbing;
+    opacity: 0.4;
+  }
+
+  /* Floating copy of the dragged header, following the pointer (offset so it clears a finger/cursor). */
+  .et-table-drag-ghost {
+    position: fixed;
+    z-index: 10;
+    transform: translate(12px, 8px);
+    max-inline-size: 256px;
+    padding: var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--et-surface-color-solid, CanvasText);
+    background: var(--et-surface-background-solid, Canvas);
+    border: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / 0.3));
+    border-radius: 6px;
+    box-shadow: 0 8px 24px color-mix(in srgb, var(--et-surface-interaction-solid, black) 18%, transparent);
+    pointer-events: none;
+  }
+}

package/src/lib/table/table-resize-grip.component.css

@@ -0,0 +1,65 @@
+@layer components {
+  /* The stamped host is layout-transparent, like the other header adornments: as a box it would be a
+     zero-width flex item in the header cell, and the cell's `gap` would then reserve space after the
+     last real control. The grip inside is absolutely positioned, so it keeps its containing block
+     (the sticky header cell) either way. */
+  et-table-resize-grip {
+    display: contents;
+  }
+
+  /* A hairline at the header cell's trailing edge that strengthens to the accent on hover. The header
+     cell is position:sticky, so this positions against it. */
+  .et-table-resize-grip {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: 9px;
+    z-index: 1;
+    cursor: col-resize;
+  }
+
+  /* On the boundary, not a few pixels inside it: the column rules of `appearance="grid"`, and any rule an
+     app draws at a pinned column's edge, sit at the trailing edge of this same cell. A grip off them by
+     3px reads as a second, misaligned line rather than as the handle of that boundary. */
+  .et-table-resize-grip::after {
+    content: '';
+    position: absolute;
+    inset-block: 20%;
+    inset-inline-end: 0;
+    inline-size: 1px;
+    background: var(--et-surface-border-solid, rgb(128 128 128 / 0.4));
+    transition: background 120ms ease;
+  }
+
+  @media (hover: hover) {
+    .et-table-resize-grip:hover::after {
+      inset-block: 0;
+      inline-size: 2px;
+      background: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  .et-table-resize-grip:focus-visible {
+    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    outline-offset: -2px;
+  }
+
+  .et-table-resize-grip:focus-visible::after {
+    inset-block: 0;
+    inline-size: 2px;
+    background: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  /* Fingers can't hit a 9px strip: widen the hit area inward on coarse pointers (the header cell clips
+     overflow, so it can't extend past the trailing edge) and thicken the hairline so it reads as a grip. */
+  @media (pointer: coarse) {
+    .et-table-resize-grip {
+      inline-size: 28px;
+    }
+
+    .et-table-resize-grip::after {
+      inset-block: 15%;
+      inline-size: 2px;
+    }
+  }
+}

package/src/lib/table/table-row-box-styles.component.css

@@ -0,0 +1,260 @@
+@layer components {
+  /* A row with a box of its own, in place of the layout-transparent default. `subgrid` is what keeps the
+     cells in the table's own column tracks, so every column still lines up across the header, the rows
+     and the footer — the same shape the detail row already uses inside this grid.
+
+     `z-index: 0` makes it a stacking context, so a cell that lifts itself over the row's link cannot
+     also rise over the sticky header.
+
+     Two classes, to outweigh the base sheet's `display: contents`: this sheet stays mounted while the
+     table's own style is removed with the last table and re-appended after it by the next one. */
+  .et-table-row.et-table-row--box {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    z-index: 0;
+  }
+
+  /* The row's box carries the surface, the border and the radius; its cells keep their padding and stay
+     transparent, so the card paints through them. The leading and trailing cell take the row's own
+     corner radii, so a cell background — hover, a selected row, a pinned column — cannot square off a
+     corner, whichever column happens to be first after a reorder or a hidden column. */
+  .et-table-row {
+    margin-block-end: var(--_et-table-row-gap-block);
+    background: var(--_et-table-row-paint);
+    border-radius: var(--_et-table-row-corner);
+  }
+
+  /* A card is a surface, not a tint: `etTableCardSurface` puts the theme one elevation above the table's
+     on the row, and the row paints that theme's background. Every knob naming the row's paint therefore
+     has to be declared here rather than in the appearance block - a `var()` in the block would resolve
+     against the host, which is the surface the card is meant to stand off. */
+  .et-table-row--card {
+    --_et-table-row-paint: var(--et-surface-background-solid, Canvas);
+    --_et-table-row-surface: var(--_et-table-row-paint);
+    --_et-table-stripe-solid: var(--_et-table-row-paint);
+    --_et-table-row-hover-solid: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, gray) 8%,
+      var(--_et-table-row-paint)
+    );
+    --_et-table-row-pressed-solid: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, gray) 16%,
+      var(--_et-table-row-paint)
+    );
+    --_et-table-inert-row-hover-solid: var(--_et-table-row-paint);
+    color: var(--et-surface-color-solid, CanvasText);
+  }
+
+  /* No surface a level above the table's to raise the card onto - a theme-less app, or a table already on
+     top of the ladder (see etTableCardSurface). Back to a tint, so the card is still marked off from the
+     table under it. Only the paint needs saying: every knob above reads it. */
+  .et-table-row--card:where(.et-table-row--card-tint) {
+    --_et-table-row-paint: var(--_et-table-band);
+  }
+
+  /* The card's 1px ring, drawn out of flow instead of as a border on the row, and that is load-bearing: a
+     border insets the row's content box, so its subgrid tracks land a pixel off the header's - and a
+     pinned cell, whose sticky offset is measured from the header, then stops a pixel short of the next
+     one and leaves a seam that scrolled text shows through.
+
+     Above the cells (which are opaque where they are pinned) but inside the row's own stacking context,
+     so it still passes under the sticky header. An outline would not do: Chrome paints it with the row's
+     own background, under the cells. */
+  .et-table-host:where([data-appearance='cards']) .et-table-row--box::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    border: 1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / 0.3)));
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  /* The edge mark is an outer `box-shadow`, so it reaches about 7px past the pinned cell on every side -
+     and on `cards` the sides above and below a cell are the gaps between the cards. Clipped to the cell's
+     block extent and let out sideways only, since a mark laid across a gap outlives the rounded card end.
+     Body cells only: header and footer cells compose a block-axis shadow in the same property, which is
+     meant to fall on the rows passing under them. */
+  .et-table-cell:where(.et-table-sticky-start, .et-table-sticky-end) {
+    clip-path: var(--_et-table-sticky-clip);
+  }
+
+  /* The header is a label row over the cards, so its rule must not run into the first one's border.
+     A margin under the header cells rather than a grid `row-gap`, which would space out every row
+     kind - the same reason the cards themselves are spaced by a margin. */
+  .et-table-header-cell {
+    margin-block-end: var(--_et-table-header-gap-block);
+  }
+
+  /* A card that neither links nor takes clicks has nothing to react to, so it does not light up under
+     the pointer. Set as the tint rather than as a background, so a selected row keeps its accent. */
+  .et-table-row:not(.et-table-row--interactive, .et-table-row--link) {
+    --_et-table-row-hover: var(--_et-table-inert-row-hover);
+    --_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid);
+  }
+
+  .et-table-row > :first-child {
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+
+  .et-table-row > .et-table-cell:nth-last-child(1 of .et-table-cell) {
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  /* A card's leading and trailing corners belong to whichever box is holding that edge, which stops
+     being the row's own end as soon as a column is pinned: the row's box - its radius and its ring -
+     scrolls away with the columns, and the pinned cell left at the edge squares the card off against the
+     table's surface. So this layer paints the corner standing at each edge: the surface outside the
+     radius, the ring's arc through it, and the edge line between the two arcs. At rest that is the
+     geometry the row's own corner already has, so a table that never scrolls looks unchanged.
+
+     A child of the row, not of a cell, and that is load-bearing: a pinned cell carries a `z-index`, so it
+     is a stacking context, and a corner drawn inside one can never rise over the row's ring - the ring
+     then runs its straight edge out past the arc. Here the corner competes with the ring directly.
+
+     The layer spans the row's whole scroll extent, so each corner can hold its place at a pinned edge
+     with `position: sticky` for the entire range - the same shape the scroll fades use. */
+  .et-table-card-corners {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+  }
+
+  /* Physical positions: the corner box is placed logically, but a gradient cannot be. */
+  .et-table-host:where([data-appearance='cards']) .et-table-card-corners::before,
+  .et-table-host:where([data-appearance='cards']) .et-table-card-corners::after {
+    --_et-table-card-radius: var(--et-table-row-radius, 10px);
+    --_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / 0.3)));
+
+    content: '';
+    flex: 0 0 auto;
+    inline-size: var(--_et-table-card-radius);
+  }
+
+  /* Only an edge that actually pins a column needs a corner held at the viewport: everywhere else the
+     card's own end is the corner, and it is meant to scroll away with the columns. */
+  .et-table-row:has(.et-table-sticky-start) .et-table-card-corners::before {
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  .et-table-row:has(.et-table-sticky-end) .et-table-card-corners::after {
+    position: sticky;
+    inset-inline-end: 0;
+  }
+
+  .et-table-host:where([data-appearance='cards']) .et-table-card-corners::before {
+    background:
+      radial-gradient(
+          circle at 100% 100%,
+          transparent calc(var(--_et-table-card-radius) - 1.2px),
+          var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - 0.8px)
+            calc(var(--_et-table-card-radius) - 0.2px),
+          var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + 0.2px)
+        )
+        0 0 / 100% var(--_et-table-card-radius) no-repeat,
+      radial-gradient(
+          circle at 100% 0,
+          transparent calc(var(--_et-table-card-radius) - 1.2px),
+          var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - 0.8px)
+            calc(var(--_et-table-card-radius) - 0.2px),
+          var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + 0.2px)
+        )
+        0 100% / 100% var(--_et-table-card-radius) no-repeat,
+      linear-gradient(var(--_et-table-card-edge), var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat;
+  }
+
+  .et-table-host:where([data-appearance='cards']) .et-table-card-corners::after {
+    background:
+      radial-gradient(
+          circle at 0 100%,
+          transparent calc(var(--_et-table-card-radius) - 1.2px),
+          var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - 0.8px)
+            calc(var(--_et-table-card-radius) - 0.2px),
+          var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + 0.2px)
+        )
+        0 0 / 100% var(--_et-table-card-radius) no-repeat,
+      radial-gradient(
+          circle at 0 0,
+          transparent calc(var(--_et-table-card-radius) - 1.2px),
+          var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - 0.8px)
+            calc(var(--_et-table-card-radius) - 0.2px),
+          var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + 0.2px)
+        )
+        0 100% / 100% var(--_et-table-card-radius) no-repeat,
+      linear-gradient(var(--_et-table-card-edge), var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat;
+  }
+
+  /* One real anchor per row, stretched over the row box: middle click, Ctrl/Cmd-click, "open in a new
+     tab" and "copy link address" are the browser's again, and the row stays one link in the
+     accessibility tree and one stop in the tab order. It holds no text — the identity cell names it —
+     so nothing about the row's own content changes.
+
+     Three layers inside the row's own stacking context (see `.et-table-row--box`): a pinned cell at 1,
+     so scrolled cells pass behind it; the link at 2, so the whole row takes the click and not just the
+     columns that happen to scroll; and a cell holding its own control at 3, so that control still gets
+     its own clicks. */
+  .et-table-row-link {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    cursor: pointer;
+    border-radius: var(--_et-table-row-corner);
+  }
+
+  /* The row's ring marks the whole row, which is what the link covers. It sits well inside the card so
+     it reads as a ring of its own rather than as a second, doubled card border.
+
+     Drawn on the row's box and not on the link, and that is load-bearing: the link is positioned with a
+     z-index, so it is its own stacking context and an `outline` on it - or any pseudo inside it - paints
+     at the link's own level, which is 2. The utility cells sit at 3 and are opaque where they are
+     pinned, so each one covered whichever end of the ring it held and the ring read as two loose lines
+     with no ends. Here it is a layer of the row box instead, above the cells and above the card's ring
+     at 4. */
+  .et-table-row-link:focus-visible {
+    outline: none;
+  }
+
+  .et-table-row--box:has(.et-table-row-link:focus-visible)::before {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    z-index: 5;
+    border: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    border-radius: max(0px, calc(var(--_et-table-row-corner, 0px) - 4px));
+    pointer-events: none;
+  }
+
+  /* Cells that hold their own controls stay above the stretched link, so the control keeps the click: the
+     utility cells always, a column that says so with `interactive`, and the one cell in edit mode. */
+  .et-table-row--link
+    .et-table-cell:where(
+      .et-table-select-cell,
+      .et-table-expander-cell,
+      .et-table-cell--interactive,
+      .et-table-cell--editing
+    ) {
+    z-index: 3;
+  }
+
+  /* `relative` only where the cell is not pinned: it outweighs the pinned cell's `sticky`, so applying it
+     to a pinned cell unpins it. The utility cells then scroll away with the rows and let scrolled content
+     show through the strip they were holding at the pinned column's edge. */
+  .et-table-row--link
+    .et-table-cell:where(
+      .et-table-select-cell,
+      .et-table-expander-cell,
+      .et-table-cell--interactive,
+      .et-table-cell--editing
+    ):not(.et-table-sticky-start, .et-table-sticky-end) {
+    position: relative;
+  }
+}

package/src/lib/table/table-select-cell.component.css

@@ -0,0 +1,89 @@
+@layer components {
+  /* The stamped component host is layout-transparent, so the checkbox itself is the cell's flex item
+     and picks up its `align-items: center`. As a block box the host would instead establish a line
+     box and the inline-flex checkbox would sit on its text baseline — a few px above centre. */
+  et-table-select-cell,
+  et-table-select-all-cell {
+    display: contents;
+  }
+
+  /* Leading checkbox column for multi-selection. The checkbox's own size token (inherited) is dialed
+     down so it sits in scale with the table text rather than the 20px form default. */
+  .et-table-select-cell {
+    justify-content: center;
+    padding: 0 4px;
+    --et-checkbox-size: 16px;
+
+    /* `et-checkbox`'s own click handler lives on its host, not on this cell - stretching the host to
+       the cell's full box (rather than sizing it to the 16px visual box) is what makes the whole
+       column tappable, matching --et-table-select-width. The visual box stays centered and 16px;
+       dropping the block padding here lets `align-self: stretch` reach the full (grid-stretched)
+       row height instead of just the padded-down content box. */
+    et-checkbox {
+      flex: 1;
+      justify-content: center;
+      align-self: stretch;
+    }
+  }
+
+  /* The cell clips its overflow like every other one, so the checkbox's own ring - 3px outside it by
+     default - would be cut off on all four sides. Pulled inside instead, and set on the checkbox rather
+     than on the cell: `et-focus-ring` declares the offset on itself, and a property an element declares
+     beats one it inherits. */
+  .et-table-select-cell et-checkbox {
+    --_et-focus-ring-offset: -2px;
+  }
+
+  /* Selected rows carry a persistent accent tint (opaque variant on pinned cells, like stripe/hover).
+     `.et-table-row.et-table-row--selected` outweighs the base sheet's stripe, hover and pressed rules
+     instead of tying with them: Angular re-appends that sheet after this one when a table mounts again. */
+  .et-table-row.et-table-row--selected {
+    --_et-table-selected-accent: var(--et-table-row-selected-tint, var(--et-theme-color-primary-solid, gray));
+  }
+
+  .et-table-row.et-table-row--selected .et-table-cell {
+    background: color-mix(in srgb, var(--_et-table-selected-accent) 12%, transparent);
+  }
+
+  .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-start,
+  .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-end {
+    background: color-mix(
+      in srgb,
+      var(--_et-table-selected-accent) 12%,
+      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    );
+  }
+
+  /* A hovered selected row keeps its accent (slightly stronger) rather than reverting to the grey the
+     base table paints on hover. */
+  @media (hover: hover) {
+    .et-table-row.et-table-row--selected:hover .et-table-cell {
+      background: color-mix(in srgb, var(--_et-table-selected-accent) 18%, transparent);
+    }
+
+    .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,
+    .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-end {
+      background: color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 18%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      );
+    }
+  }
+
+  /* A held selected row escalates within its accent, for the same reason. */
+  .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell {
+    background: color-mix(in srgb, var(--_et-table-selected-accent) 26%, transparent);
+  }
+
+  .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
+    .et-table-cell.et-table-sticky-start,
+  .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
+    .et-table-cell.et-table-sticky-end {
+    background: color-mix(
+      in srgb,
+      var(--_et-table-selected-accent) 26%,
+      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    );
+  }
+}

package/src/lib/table/table-skeleton-rows.component.css

@@ -0,0 +1,19 @@
+@layer components {
+  /* The placeholder body of a first load, mounted with etTableSkeleton. The bones themselves are
+     `<et-skeleton-item>`s, so a loading table matches every other loading surface in the app - all this
+     adds is the cell chrome around them. */
+  .et-table-skeleton-rows {
+    display: contents;
+  }
+
+  /* A placeholder row is as tall as the row it stands in for: the height measured off a real row when
+     this table has had one (`--_et-table-row-h`, set per row by the template), else a line of text plus
+     the cell's own padding. A column whose cells are taller than text — a chip, an avatar — should also
+     say so with `etTableCellSkeleton`, which is what makes the *first* load match too. */
+  .et-table-row--placeholder .et-table-cell {
+    min-block-size: max(
+      var(--et-table-row-min-block-size, 0px),
+      var(--_et-table-row-h, calc(1.4em + var(--et-table-cell-padding-block) * 2))
+    );
+  }
+}

package/src/lib/table/table-sort-priority-styles.component.css

@@ -0,0 +1,15 @@
+@layer components {
+  .et-table-sort-priority {
+    flex: none;
+    min-inline-size: 1.4em;
+    padding-inline: 0.3em;
+    font-size: 0.75em;
+    font-weight: 600;
+    line-height: 1.4em;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    color: var(--et-theme-color-ink-solid, currentColor);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px currentColor;
+  }
+}

package/src/lib/table/table-sticky-columns-styles.component.css

@@ -0,0 +1,80 @@
+@layer components {
+  /* Pinned cells stay put during horizontal scroll. The inline offset comes from a per-cell style
+     binding, fed by the widths `etTableStickyColumns` measures; the edge shadow marks the pinned
+     boundary. */
+  .et-table-sticky-start,
+  .et-table-sticky-end {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .et-table-sticky-start {
+    box-shadow: var(--_et-table-edge-start);
+  }
+
+  .et-table-sticky-end {
+    box-shadow: var(--_et-table-edge-end);
+  }
+
+  /* Only the outermost pinned cell of an edge marks it. Being opaque, the next pinned cell covers an
+     inner one's shadow - until it is a utility column lifted over its neighbours to keep its own clicks
+     (see the row-link rules), and the inner shadow then escapes as a rule down the middle of the pinned
+     block. Dropped through the edge variable rather than `box-shadow`, so a header or footer cell keeps
+     the block-axis shadow it carries in the same property. */
+  .et-table-sticky-start:has(~ .et-table-sticky-start) {
+    --_et-table-edge-start: 0 0 transparent;
+  }
+
+  .et-table-sticky-end ~ .et-table-sticky-end {
+    --_et-table-edge-end: 0 0 transparent;
+  }
+
+  /* Body pinned cells need an opaque fill so scrolled cells pass behind them — but they still
+     reflect the row's zebra stripe and hover, using opaque (solid) variants of those tints. The
+     real `.et-table-sticky-*` classes (not `:where`) give these the specificity to win over the
+     translucent stripe/hover rules. */
+  .et-table-cell:where(.et-table-sticky-start, .et-table-sticky-end) {
+    background: var(--_et-table-row-surface);
+  }
+
+  .et-table-row--stripe .et-table-cell.et-table-sticky-start,
+  .et-table-row--stripe .et-table-cell.et-table-sticky-end {
+    background: var(--_et-table-stripe-solid);
+  }
+
+  /* Only on real hover-capable pointers — a touch tap otherwise leaves the row stuck "hovered". */
+  @media (hover: hover) {
+    .et-table-row:hover .et-table-cell.et-table-sticky-start,
+    .et-table-row:hover .et-table-cell.et-table-sticky-end {
+      background: var(--_et-table-row-hover-solid);
+    }
+  }
+
+  .et-table-row:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell.et-table-sticky-start,
+  .et-table-row:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell.et-table-sticky-end {
+    background: var(--_et-table-row-pressed-solid);
+  }
+
+  /* Header/footer pinned cells are corner-sticky (both axes) and sit above the row-pinned cells. `:is()`
+     so this outweighs the base sheet's `z-index`, which Angular may re-append after this one. */
+  .et-table-header-cell:is(.et-table-sticky-start, .et-table-sticky-end),
+  .et-table-footer-cell:is(.et-table-sticky-start, .et-table-sticky-end) {
+    z-index: 3;
+  }
+
+  .et-table-header-cell.et-table-sticky-start {
+    box-shadow: var(--_et-table-edge-block-start), var(--_et-table-edge-start);
+  }
+
+  .et-table-header-cell.et-table-sticky-end {
+    box-shadow: var(--_et-table-edge-block-start), var(--_et-table-edge-end);
+  }
+
+  .et-table-footer-cell.et-table-sticky-start {
+    box-shadow: var(--_et-table-edge-block-end), var(--_et-table-edge-start);
+  }
+
+  .et-table-footer-cell.et-table-sticky-end {
+    box-shadow: var(--_et-table-edge-block-end), var(--_et-table-edge-end);
+  }
+}

package/src/lib/table/table-virtual-scroll-styles.component.css

@@ -0,0 +1,9 @@
+@layer components {
+  /* Full-width filler standing in for the rows a virtual window leaves out; its block-size is the
+     window's padding, so the scrollbar reflects the whole row count. Mounted by the virtual-scroll
+     feature (see TableVirtualScrollStylesComponent), so a table that renders every row ships none of
+     it — there is nothing to space out. */
+  .et-table-spacer {
+    grid-column: 1 / -1;
+  }
+}