@eunomia/elements 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/features/table/table/table.js

@@ -4,140 +4,190 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, property, query, queryAssignedElements, state, } from "lit/decorators.js";
-import { html, LitElement, nothing } from "lit";
-import { EunomiaTableHeaderTagName, } from "../table-header/table-header.js";
-import { EunomiaTableItemTagName, } from "../table-item/table-item.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html, LitElement, nothing, render, } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
 import { EunomiaTableActionBarTagName, } from "../table-action-bar/table-action-bar.js";
-import { computeColumnsTemplate, resolveRowKey } from "./table.utils.js";
-import { buildManagedHeader, buildManagedItem, } from "../table-managed/table-managed.js";
+import { alignToTextAlign, resolveRowKey } from "./table.utils.js";
 import { TableSelectionChangeEvent } from "../../../events/table-selection-change.event.js";
 import { TableActionEvent } from "../../../events/table-action.event.js";
+import { TableRowClickEvent } from "../../../events/table-row-click.event.js";
 import { LoadMoreEvent } from "../../../events/loadmore.event.js";
 import { LoadMoreSentinelMixin } from "../../../mixins/load-more-sentinel.mixin.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { tableStyles } from "./table.styles.js";
-import "../table-skeleton-row/table-skeleton-row.js";
+import { tableNativeStyles } from "./table-native.styles.js";
+import { adoptLightDomStyles } from "../../../utils/light-dom-styles.utils.js";
+import "../../../components/form/checkbox/checkbox.js";
+import "../../../components/action/button/button.js";
+import "../../../components/action/dropdown-button/dropdown-button.js";
+import "../../../components/content/icon/icon.js";
 import "../../../components/loader/loader/loader.js";
+import "../../../components/loader/skeleton/skeleton.js";
 /**
- * Class marker of a virtualized-out page's placeholder: a full-width
- * (`grid-column: 1 / -1`) spacer sized to the page's last measured height,
- * standing in for its detached `eun-table-item`s so the grid's scroll
- * position/scrollbar don't jump ; excluded from row bookkeeping since it's
- * a plain `<div>`, never matching the `eun-table-item` selector queries rely
- * on.
+ * Tag name of the table component.
+ */
+export const EunomiaTableTagName = "eun-table";
+/**
+ * Marks the selection column cells `eun-table` generates.
+ * @internal
+ */
+const SELECT_ATTR = "data-table-select";
+/**
+ * Marks a row end action cell, authored by the consumer.
+ * @internal
+ */
+const ACTION_ATTR = "data-table-action";
+/**
+ * Marks the link a body row click follows, authored by the consumer.
+ * @internal
+ */
+const ROW_LINK_ATTR = "data-table-row-link";
+/**
+ * Marks the placeholder body rendered while `loading`.
+ * @internal
+ */
+const SKELETON_ATTR = "data-table-skeleton";
+/**
+ * Reflected on a selected body row.
  * @internal
  */
-const TABLE_ROW_SPACER_CLASS = "eun-table-row-spacer";
+const SELECTED_ATTR = "data-selected";
 /**
- * Row height (px) assumed for a virtualized page never measured yet:
- * refined into a real running average the moment any page actually gets
- * measured. See `eun-infinite-list`'s own `DEFAULT_ITEM_HEIGHT` for the same
- * reasoning.
+ * Class of a virtualized-out page's placeholder row, sized to the page's
+ * last measured height so the scroll position doesn't jump.
+ * @internal
+ */
+const SPACER_CLASS = "eun-table-row-spacer";
+/**
+ * Row height (px) assumed for a virtualized page never measured yet.
  * @internal
  */
 const DEFAULT_ROW_HEIGHT = 44;
 /**
- * Tag name of the table component.
+ * Elements a click on which belongs to that element, not to its row.
+ * @internal
  */
-export const EunomiaTableTagName = "eun-table";
+const INTERACTIVE_SELECTOR = 'a[href], button, input, select, textarea, summary, label, [contenteditable=""], [contenteditable="true"], [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"]';
 /**
- * A row-and-column-based grid (`<eun-table>`), usable two ways, both
- * producing the exact same DOM, CSS, and behavior underneath, since the
- * second is just a generator for the first :
+ * A data table built on a native `<table>` (`<eun-table><table>…</table></eun-table>`).
+ * The table keeps its native semantics (`table`, `row`, `columnheader`,
+ * `rowheader`, `cell`), renders before any script runs, and holds any
+ * content: tags, icons, buttons, dropdown buttons, links.
  *
- * Every row shares one set of column tracks via CSS Subgrid : `eun-table`'s
- * own shadow root is `display: grid` with a bare `<slot>` (no wrapper), per
- * the flat-tree slotting model, a slot's assigned nodes render as if they
- * were direct children of the host, so `eun-table-header`/`eun-table-item`
- * become direct items of this grid despite living in separate shadow
- * roots. Each of those, in turn, sets `grid-template-columns: subgrid` on
- * its own `:host`, inheriting the exact same tracks the browser computed
- * once for the whole grid: this is what keeps `auto`/flexible columns
- * pixel-aligned across every row with zero JS measurement. The track list
- * itself (from `eun-table-column`'s `width`, plus a select/action track
- * when relevant) is computed in `updateColumnsTemplate` and applied as the
- * `--_columns` custom property `table.styles.ts`'s `:host` reads.
+ * `eun-table` styles the slotted table from the light DOM and layers the
+ * optional behaviors on top: row selection with a checkbox column it
+ * generates and a floating action bar, row end actions revealed on hover
+ * (cells marked `data-table-action`), clickable rows, sticky header,
+ * footer, and columns, loading placeholders, and scroll-driven pagination.
+ * Without any of those, it's a plain, read-only table.
  *
- * Selection, sticky flags, and row-to-row keyboard navigation are all
- * pushed down onto the header/items imperatively (the same "poke state onto
- * slotted children" pattern `eun-toggle-group` uses for its own
- * `eun-toggle-item`s) rather than those elements pulling state from a
- * shared config object, since they're consumer-authored tags, not
- * data-driven renders.
+ * A row click follows the link marked `data-table-row-link` in that row,
+ * which stays the keyboard way to reach it. Rows are identified by their
+ * `data-row-key` attribute. A `<tfoot>` holds
+ * summary rows, kept out of the selection. A `<caption>` stays in the
+ * table for its semantics, and shows above the table's frame.
  *
- * @slot [default] - One `eun-table-header` followed by any number of `eun-table-item`s
- * @prop {boolean} [selectable=false] - Enables row selection (checkboxes, select-all, the floating action bar)
- * @prop {boolean} [checkboxAlwaysVisible=false] - Keeps every row's own checkbox visible at all times instead of only on hover/focus/selection ; the header's own select-all checkbox is already always visible regardless of this (see `stickyHeader`)
+ * @slot [default] - A native `<table>`, with a `<thead>`, a `<tbody>`, and an optional `<caption>` and `<tfoot>`
+ * @csspart frame - The bordered scroll container around the table
+ * @prop {boolean} [selectable=false] - Enables row selection (generated checkbox column, select-all, the floating action bar)
+ * @prop {boolean} [checkboxAlwaysVisible=false] - Keeps every row's own checkbox visible at all times instead of only on hover/focus/selection
  * @attr {boolean} [checkbox-always-visible=false] - Keeps every row's own checkbox visible at all times instead of only on hover/focus/selection
- * @prop {boolean} [actionAlwaysVisible=false] - Keeps every row's own row-end action (`slot="action"`, or a `rowAction`-generated one) visible at all times instead of only on hover/focus ; still cedes to the floating action bar once a row is selected, same as the hover-only default
- * @attr {boolean} [action-always-visible=false] - Keeps every row's own row-end action visible at all times instead of only on hover/focus
- * @prop {boolean} [stickyHeader=false] - Pins the header to the top of the table's own scroll container ; once pinned, the header never renders the select-all checkbox (even while `selectable`) or any hover styling, since it stays permanently visible rather than only appearing on hover/focus
+ * @prop {boolean} [actionAlwaysVisible=false] - Keeps every row end action (a `data-table-action` cell's content) visible at all times instead of only on hover/focus ; still hidden while rows are selected
+ * @attr {boolean} [action-always-visible=false] - Keeps every row end action visible at all times instead of only on hover/focus
+ * @prop {boolean} [stickyHeader=false] - Pins the `<thead>` to the top of the table's own scroll container
  * @attr {boolean} [sticky-header=false] - Pins the header to the top
+ * @prop {boolean} [stickyFooter=false] - Pins the `<tfoot>` to the bottom of the table's own scroll container
+ * @attr {boolean} [sticky-footer=false] - Pins the footer to the bottom
  * @prop {boolean} [stickyFirstColumn=false] - Pins the first data column to the start edge
  * @attr {boolean} [sticky-first-column=false] - Pins the first data column to the start edge
- * @prop {boolean} [stickyLastColumn=false] - Pins the last data column to the end edge
+ * @prop {boolean} [stickyLastColumn=false] - Pins the last data column, and the row end action column, to the end edge
  * @attr {boolean} [sticky-last-column=false] - Pins the last data column to the end edge
- * @prop {boolean} [clearOnEscape=false] - Whether `Escape` clears the selection while the action bar is shown ; off by default so it never fights a consumer's own global `Escape` handling
+ * @prop {boolean} [clearOnEscape=false] - Whether `Escape` clears the selection while the action bar is shown
  * @attr {boolean} [clear-on-escape=false] - Whether `Escape` clears the selection while the action bar is shown
- * @prop {Array<string>} [selectedKeys=[]] - The currently selected rows' keys ; settable from outside for a "controlled" table, always reflecting the live selection either way
+ * @prop {Array<string>} [selectedKeys=[]] - The currently selected rows' keys ; settable from outside for a "controlled" table
  * @prop {Array<import('./table.types.js').EunomiaTableAction>} [actions=[]] - Custom actions rendered in the floating action bar's center region
- * @prop {string} [selectedLabel='selected'] - Text shown after the count in the action bar's badge
+ * @prop {string} [selectedLabel='selected'] - Text shown after the count in the action bar's badge ; translated from `locale` while unset
  * @attr {string} [selected-label='selected'] - Text shown after the count in the action bar's badge
- * @prop {string} [selectAllLabel='Select all'] - Label of the action bar's select-all button while not every row is selected
+ * @prop {string} [selectAllLabel='Select all'] - Label of the action bar's select-all button while not every row is selected ; translated from `locale` while unset
  * @attr {string} [select-all-label='Select all'] - Label of the action bar's select-all button
- * @prop {string} [deselectAllLabel='Deselect all'] - Label of the action bar's select-all button once every row is selected
+ * @prop {string} [deselectAllLabel='Deselect all'] - Label of the action bar's select-all button once every row is selected ; translated from `locale` while unset
  * @attr {string} [deselect-all-label='Deselect all'] - Label of the action bar's select-all button once every row is selected
- * @prop {string} [selectAllAriaLabel='Select all rows'] - Accessible label for the header's select-all checkbox while not every row is selected
+ * @prop {string} [selectAllAriaLabel='Select all rows'] - Accessible label for the header's select-all checkbox while not every row is selected ; translated from `locale` while unset
  * @attr {string} [select-all-aria-label='Select all rows'] - Accessible label for the header's select-all checkbox
- * @prop {string} [deselectAllAriaLabel='Deselect all rows'] - Accessible label for the header's select-all checkbox once every row is selected
+ * @prop {string} [deselectAllAriaLabel='Deselect all rows'] - Accessible label for the header's select-all checkbox once every row is selected ; translated from `locale` while unset
  * @attr {string} [deselect-all-aria-label='Deselect all rows'] - Accessible label for the header's select-all checkbox
- * @prop {string} [selectRowAriaLabel='Select row'] - Accessible label prefix for each row's own checkbox (its 1-based row number is appended)
+ * @prop {string} [selectRowAriaLabel='Select row'] - Accessible label prefix for each row's own checkbox, followed by the row header's text, or its 1-based row number without one ; translated from `locale` while unset
  * @attr {string} [select-row-aria-label='Select row'] - Accessible label prefix for each row's own checkbox
- * @prop {string} [toolbarAriaLabel='Selection actions'] - Accessible label for the floating action bar itself
+ * @prop {string} [toolbarAriaLabel='Selection actions'] - Accessible label for the floating action bar itself ; translated from `locale` while unset
  * @attr {string} [toolbar-aria-label='Selection actions'] - Accessible label for the floating action bar itself
- * @prop {string} [closeActionBarAriaLabel='Clear selection'] - Accessible label for the action bar's close button
+ * @prop {string} [closeActionBarAriaLabel='Clear selection'] - Accessible label for the action bar's close button ; translated from `locale` while unset
  * @attr {string} [close-action-bar-aria-label='Clear selection'] - Accessible label for the action bar's close button
- * @prop {Array<import('./table.types.js').EunomiaTableColumnDef<T>>} [columns] - Programmatic alternative to hand-authoring `eun-table-header`/`eun-table-column` : when set, `eun-table` generates that exact markup itself from `columns`/`data`. Setting this puts the table in "managed" mode: it owns its own light DOM from then on ; don't also hand-author `eun-table-header`/`eun-table-item` children
+ * @prop {Array<import('./table.types.js').EunomiaTableColumnDef<T>>} [columns] - Programmatic alternative to authoring the `<table>` : when set, `eun-table` renders the native table itself from `columns`/`data`, and owns its light DOM from then on
  * @prop {Array<T>} [data=[]] - The rows to render, in "managed" mode (see `columns`)
- * @prop {import('./table.types.js').EunomiaTableRowActionDef<T>} [rowAction] - A single row-end action (button or dropdown), in "managed" mode: the data-driven equivalent of a `slot="action"` element
- * @prop {(row: T, index: number) => string} [rowKey] - Computes each row's stable key, in "managed" mode ; defaults to a DOM-order fallback, same caveat as `eun-table-item`'s own `row-key`
- * @fires {TableSelectionChangeEvent} euntableselectionchange - Emitted whenever the selection changes, from any source
- * @fires {TableActionEvent} euntableaction - Emitted when a floating action bar action is activated
- * @prop {boolean} [loading=false] - Shows `skeletonRows` shimmering placeholder rows in place of the real ones: the header stays visible, only `eun-table-item`s are hidden ; set back to `false` once real data has arrived
+ * @prop {import('./table.types.js').EunomiaTableRowActionDef<T>} [rowAction] - A single row end action (button or dropdown), in "managed" mode
+ * @prop {(row: T, index: number) => string} [rowKey] - Computes each row's stable key, in "managed" mode ; defaults to a DOM-order fallback
+ * @prop {boolean} [loading=false] - Shows `skeletonRows` placeholder rows in place of the body rows ; the header stays visible
  * @prop {number} [skeletonRows=6] - Number of placeholder rows rendered while `loading`
  * @attr {number} [skeleton-rows=6] - Number of placeholder rows rendered while `loading`
- * @prop {boolean} [syncing=false] - Shows a shimmering overlay sweeping across every already-visible `eun-table-item`, without hiding any of them (unlike `loading`) : for a background refresh of data the user can already see, rather than an initial load with nothing to show yet. Reflects `aria-busy` on the table itself while set
- * @prop {boolean} [clickable=false] - Shows a pointer cursor on a row while it has no row-end action content of its own ; purely visual; a row click already fires `euntablerowclick` regardless of this or any row-end action (see `eun-table-item`)
- * @attr {boolean} [clickable=false] - Shows a pointer cursor on a row while it has no row-end action content of its own
- * @prop {boolean} [infinite=false] - Enables scroll-triggered pagination : dispatches `eunloadmore` once the user scrolls near the end of the table's own scroll container and `hasMore` is `true`, showing a trailing `eun-loader` while `loadingMore` is `true`. Independent of `virtualize`: combine both for `eun-infinite-list` parity, or use `infinite` alone to paginate without detaching any DOM
- * @prop {boolean} [virtualize=false] - Detaches `eun-table-item` pages far from the current scroll position once the known row count exceeds `virtualizeThreshold`, replacing each with a single full-width spacer sized to its last measured height, the same mechanism `eun-infinite-list` uses for its own items, adapted to this table's CSS Subgrid rows. Independent of `infinite`: useful on its own for a very large, already-fully-loaded dataset
- * @prop {number} [pageSize=20] - Number of rows per page: both the unit `eunloadmore` requests are made in, and the chunk size `virtualize` mounts/unmounts as a whole
+ * @prop {boolean} [syncing=false] - Sweeps a shimmer across every visible body row without hiding any, for a background refresh. Sets `aria-busy` on the table while set
+ * @prop {boolean} [clickable=false] - Shows a pointer cursor on body rows ; a row click fires `euntablerowclick` and follows the row's `data-table-row-link` link regardless, which stays the keyboard way to do the same
+ * @prop {boolean} [infinite=false] - Enables scroll-triggered pagination : dispatches `eunloadmore` once the user scrolls near the end of the table's own scroll container and `hasMore` is `true`
+ * @prop {boolean} [virtualize=false] - Detaches body row pages far from the current scroll position once the row count exceeds `virtualizeThreshold`, each replaced by a spacer row of the same height
+ * @prop {number} [pageSize=20] - Number of rows per page, for both `eunloadmore` and `virtualize`
  * @attr {number} [page-size=20] - Number of rows per page
- * @prop {number} [virtualizeThreshold=100] - Total known row count above which `virtualize` actually starts detaching pages
- * @attr {number} [virtualize-threshold=100] - Total known row count above which `virtualize` actually starts detaching pages
- * @prop {number} [bufferPages=1] - Number of extra pages kept mounted before and after the page currently in view
- * @attr {number} [buffer-pages=1] - Number of extra pages kept mounted before and after the page currently in view
- * @prop {boolean} [hasMore=false] - Whether more rows can still be obtained ; the `infinite` sentinel never fires `eunloadmore` while this is `false`
+ * @prop {number} [virtualizeThreshold=100] - Row count above which `virtualize` starts detaching pages
+ * @attr {number} [virtualize-threshold=100] - Row count above which `virtualize` starts detaching pages
+ * @prop {number} [bufferPages=1] - Number of extra pages kept mounted before and after the page in view
+ * @attr {number} [buffer-pages=1] - Number of extra pages kept mounted before and after the page in view
+ * @prop {boolean} [hasMore=false] - Whether more rows can still be obtained
  * @attr {boolean} [has-more=false] - Whether more rows can still be obtained
- * @prop {boolean} [loadingMore=false] - Whether a `eunloadmore` request is currently in flight ; set to `true` right before dispatching the event, left to the consumer to reset once new rows are appended
- * @attr {boolean} [loading-more=false] - Whether a `eunloadmore` request is currently in flight
- * @prop {string} [rootMargin='400px'] - How far before the physical end of the table `eunloadmore` triggers, as a CSS-like margin
- * @attr {string} [root-margin='400px'] - How far before the physical end of the table `eunloadmore` triggers
- * @prop {string} [loadingMoreLabel='Loading more rows…'] - Accessible label passed to the trailing `eun-loader`
+ * @prop {boolean} [loadingMore=false] - Whether a `eunloadmore` request is in flight ; set to `true` right before the event fires, reset by the consumer once rows are appended
+ * @attr {boolean} [loading-more=false] - Whether a `eunloadmore` request is in flight
+ * @prop {string} [rootMargin='400px'] - How far before the end of the table `eunloadmore` triggers, as a CSS-like margin
+ * @attr {string} [root-margin='400px'] - How far before the end of the table `eunloadmore` triggers
+ * @prop {string} [loadingMoreLabel='Loading more rows…'] - Accessible label passed to the trailing `eun-loader` ; translated from `locale` while unset
  * @attr {string} [loading-more-label='Loading more rows…'] - Accessible label passed to the trailing `eun-loader`
- * @fires {LoadMoreEvent} eunloadmore - Dispatched when `infinite` is set, more rows are needed, and `hasMore` is `true` ; `loadingMore` is already `true` by the time this fires
- * @cssprop [--table-border-color] - Set a custom border color
- * @cssprop [--table-background] - Set a custom background color
- * @cssprop [--table-max-height] - Set a custom max height (with scroll) ; `none` by default
- * @cssprop [--table-skeleton-stagger] - Delay between each skeleton row's entrance animation, as a CSS time (e.g. `60ms`)
- * @cssprop [--table-skeleton-duration] - Duration of each skeleton row's own entrance animation, as a CSS time (e.g. `320ms`)
- * @cssprop [--table-loader-color] - Set a custom color for the trailing `eun-loader` shown while `loadingMore` (an `infinite` table)
- * @cssprop [--table-sync-overlay-color] - Set a custom highlight color for the shimmer sweep shown while `syncing`
- * @cssprop [--table-sync-duration] - Set a custom duration for the `syncing` shimmer sweep, as a CSS time (default `1.6s`)
+ * @fires {TableSelectionChangeEvent} euntableselectionchange - Emitted whenever the selection changes, from any source
+ * @fires {TableActionEvent} euntableaction - Emitted when a floating action bar action is activated
+ * @fires {TableRowClickEvent} euntablerowclick - Emitted on a body row click outside its checkbox, its action cell, and any interactive content, while no row is selected ; cancelable, `preventDefault()` keeps the row's `data-table-row-link` link from being followed
+ * @fires {LoadMoreEvent} eunloadmore - Dispatched when `infinite` is set, more rows are needed, and `hasMore` is `true`
+ * @cssprop [--table-border-color] - Sets the border color of the frame and the rows
+ * @cssprop [--table-background] - Sets the background color of the frame
+ * @cssprop [--table-max-height] - Sets a max height, scrolling past it ; `none` by default
+ * @cssprop [--table-caption-color] - Sets the text color of the `<caption>`
+ * @cssprop [--table-caption-font-size] - Sets the font size of the `<caption>`
+ * @cssprop [--table-caption-font-weight] - Sets the font weight of the `<caption>`
+ * @cssprop [--table-header-background] - Sets the background color of the header cells
+ * @cssprop [--table-footer-background] - Sets the background color of the footer cells
+ * @cssprop [--table-row-background] - Sets the background color of the body cells
+ * @cssprop [--table-row-hover-background] - Sets the tint of a hovered or focused body row
+ * @cssprop [--table-row-selected-background] - Sets the tint of a selected body row
+ * @cssprop [--table-row-dragging-background] - Sets the tint of a row being reordered with `createDragReorder`
+ * @cssprop [--table-row-transition-duration] - Sets the duration of the hover and selection tint transitions
+ * @cssprop [--table-column-color] - Sets the text color of the header cells
+ * @cssprop [--table-column-font-weight] - Sets the font weight of the header cells
+ * @cssprop [--table-cell-color] - Sets the text color of the cells
+ * @cssprop [--table-column-border-color] - Sets the color of a vertical divider between columns ; transparent by default
+ * @cssprop [--table-sticky-column-background] - Sets the background color of a sticky column's cells, and of the selection column
+ * @cssprop [--table-sticky-row-background] - Sets the background color of the footer cells while `stickyFooter`
+ * @cssprop [--table-sticky-border-color] - Sets the color of the edges of a sticky header, footer, or column
+ * @cssprop [--table-checkbox-background] - Sets the background color of an unchecked selection checkbox
+ * @cssprop [--table-checkbox-border-color] - Sets the border color of an unchecked selection checkbox
+ * @cssprop [--table-checkbox-hover] - Sets the background color of an unchecked selection checkbox while hovered
+ * @cssprop [--table-action-color] - Sets the text and icon color of a row end action
+ * @cssprop [--eun-table-select-col-width] - Sets the width of the selection column ; 40px by default
+ * @cssprop [--eun-table-action-col-width] - Sets the width of the row end action column, which stays fixed so a sticky last column lines up with it ; 56px by default, enough for an icon-only button
+ * @cssprop [--table-skeleton-stagger] - Delay between each placeholder row's entrance animation, as a CSS time (e.g. `60ms`)
+ * @cssprop [--table-skeleton-duration] - Duration of each placeholder row's entrance animation, as a CSS time (e.g. `320ms`)
+ * @cssprop [--table-loader-color] - Sets the color of the trailing `eun-loader` shown while `loadingMore`
+ * @cssprop [--table-sync-overlay-color] - Sets the highlight color of the `syncing` shimmer sweep
+ * @cssprop [--table-sync-duration] - Sets the duration of the `syncing` shimmer sweep, as a CSS time (default `1.6s`)
  * @element eun-table
  * @template T Shape of a data row, in "managed" `columns`/`data` mode.
  */
-let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement) {
+let EunomiaTable = class EunomiaTable extends LocalizableMixin(LoadMoreSentinelMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /** @default false */
@@ -149,6 +199,8 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         /** @default false */
         this.stickyHeader = false;
         /** @default false */
+        this.stickyFooter = false;
+        /** @default false */
         this.stickyFirstColumn = false;
         /** @default false */
         this.stickyLastColumn = false;
@@ -178,72 +230,50 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         this.loadingMore = false;
         /** @default 400px */
         this.rootMargin = "400px";
-        /** @default Loading more rows… */
-        this.loadingMoreLabel = "Loading more rows…";
         /** @default [] */
         this.actions = [];
-        /** @default selected */
-        this.selectedLabel = "selected";
-        /** @default Select all */
-        this.selectAllLabel = "Select all";
-        /** @default Deselect all */
-        this.deselectAllLabel = "Deselect all";
-        /** @default Select all rows */
-        this.selectAllAriaLabel = "Select all rows";
-        /** @default Deselect all rows */
-        this.deselectAllAriaLabel = "Deselect all rows";
-        /** @default Select row */
-        this.selectRowAriaLabel = "Select row";
-        /** @default Selection actions */
-        this.toolbarAriaLabel = "Selection actions";
-        /** @default Clear selection */
-        this.closeActionBarAriaLabel = "Clear selection";
         /**
          * The rows to render, in "managed" mode (see `columns`).
          * @default []
          */
         this.data = [];
         /**
-         * The current selection, as a `Set` internally — the source of truth
-         * `selectedKeys` reads/writes through. A `@state()`, not a `@property()` :
-         * external reads/writes go through the `selectedKeys` accessor, which
-         * handles change detection and event dispatch explicitly.
+         * The current selection, the source of truth `selectedKeys` reads and
+         * writes through.
          * @internal
          */
         this.internalSelection = new Set();
         /**
-         * Whether any row currently has action content — computed by scanning
-         * every item's `slot="action"` content, not author-set.
+         * The resolved key of every body row known at the last sync.
+         * @internal
+         */
+        this.rowKeys = new Map();
+        /**
+         * Whether `aria-rowcount`/`aria-rowindex` were set for `virtualize`, so
+         * they're only ever removed by this component.
          * @internal
          */
-        this.hasAction = false;
+        this.ariaRowsApplied = false;
         /**
-         * Every logical `eun-table-item`, mounted or currently virtualized-out
-         * (replaced by a `TABLE_ROW_SPACER_CLASS` placeholder), in document
-         * order — only kept up to date while `virtualize` is set ; `itemEls`
-         * alone (mounted-only) is used otherwise. Reconstructed on every
-         * legitimate `slotchange` (see {@link syncLogicalItems}) by threading each
-         * spacer's cached nodes back into their position, the same reconciliation
-         * `eun-infinite-list`'s own `syncItemsFromLightDom` performs.
+         * Every body row, mounted or virtualized-out, in document order ; only
+         * kept up to date while `virtualize` is set.
          * @internal
          */
-        this.logicalItems = [];
+        this.logicalRows = [];
         /**
-         * Page indices currently mounted (their rows are real children of this
-         * host, not replaced by a spacer).
+         * Page indices currently mounted.
          * @internal
          */
         this.mountedPages = new Set();
         /**
-         * Cached row nodes for each currently-virtualized-out page, keyed by page
-         * index — reattached as-is once a page remounts, so no consumer
-         * state/listeners inside them are ever lost.
+         * Cached rows of each virtualized-out page, reattached as-is once the
+         * page remounts.
          * @internal
          */
         this.detachedByPage = new Map();
         /**
          * Measured height (px) of each page, filled in the first time it's
-         * unmounted ; used instead of {@link avgRowHeight} once known.
+         * unmounted.
          * @internal
          */
         this.pageHeights = [];
@@ -253,73 +283,81 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
          */
         this.avgRowHeight = DEFAULT_ROW_HEIGHT;
         /**
-         * Set while this component is itself inserting/removing light DOM
-         * children for `virtualize` (mount/unmount), so the resulting
-         * `slotchange` isn't misread as a consumer-driven content change.
-         * @internal
-         */
-        this.mutatingSlot = false;
-        /**
-         * Count of `eunloadmore` events dispatched so far ; becomes the event's
-         * own `page` field.
+         * Count of `eunloadmore` events dispatched so far.
          * @internal
          */
         this.requestedPages = 0;
         /**
-         * {@link lastFocusedRow}'s row index at the time it was last focused,
-         * used to refocus whatever row now sits in that same slot.
-         * @internal
-         */
-        this.lastFocusedRowIndex = -1;
-        /**
-         * Tracks {@link lastFocusedRow}/{@link lastFocusedRowIndex} from any
-         * `focusin` landing on a row's own leading stop or its content —
-         * `event.target` is that row itself either way, whether directly focused
-         * or retargeted through its own shadow root ; slotted content (an
-         * `action` button, ...) instead needs `closest`, since it's a light-DOM
-         * descendant rather than something the shadow boundary retargets.
+         * Re-syncs on structural light DOM changes only: added or removed rows,
+         * cells, or sections, and a changed `data-row-key`. A change deeper
+         * inside a cell's own content is ignored.
          * @private
          */
-        this.handleFocusIn = (event) => {
-            const row = event.target.closest(`${EunomiaTableHeaderTagName}, ${EunomiaTableItemTagName}`);
-            if (!row) {
+        this.handleMutations = (records) => {
+            const structural = records.some((record) => {
+                if (record.type === "attributes") {
+                    return true;
+                }
+                const target = record.target;
+                return (target === this ||
+                    /^(TABLE|THEAD|TBODY|TFOOT|TR)$/.test(target.nodeName ?? ""));
+            });
+            if (!structural) {
                 return;
             }
-            const index = this.rowIndexOf(row);
-            if (index < 0) {
-                return;
+            this.sync();
+            this.announceLoadedRows();
+            if (this.virtualize) {
+                this.scheduleAnimationFrame(() => this.syncPages());
+            }
+            if (this.infinite) {
+                this.reobserveSentinel(this.sentinelEl);
             }
-            this.lastFocusedRow = row;
-            this.lastFocusedRowIndex = index;
         };
         /** @private */
-        this.handleSlotChange = () => {
-            if (this.mutatingSlot) {
+        this.handleClick = (event) => {
+            const target = event.target;
+            const selectCell = target.closest?.(`[${SELECT_ATTR}]`);
+            if (selectCell) {
+                const checkbox = target.closest("eun-checkbox");
+                if (checkbox?.indeterminate) {
+                    this.toggleSelectAll();
+                }
                 return;
             }
-            if (this.virtualize) {
-                this.syncLogicalItems();
+            const row = this.bodyRowOf(target);
+            if (!row ||
+                target.closest(`[${ACTION_ATTR}]`) ||
+                this.isInteractiveClick(event, row)) {
+                return;
             }
-            this.syncChildren();
-            this.restoreFocusIfLost();
-            if (this.virtualize) {
-                this.scheduleAnimationFrame(() => this.syncPages());
+            this.activateRow(row, event);
+        };
+        /** @private */
+        this.handleCheckboxChange = (event) => {
+            const target = event.target;
+            const cell = target.closest?.(`[${SELECT_ATTR}]`);
+            if (!cell || target.nodeName !== "EUN-CHECKBOX") {
+                return;
             }
-            if (this.infinite) {
-                this.reobserveSentinel(this.sentinelEl);
+            const row = cell.parentElement;
+            if (row.parentElement?.nodeName === "THEAD") {
+                this.toggleSelectAll();
+                return;
+            }
+            const key = this.rowKeys.get(row);
+            if (key !== undefined) {
+                this.toggleRow(key);
             }
         };
         /**
-         * Re-dispatches `euntableaction` from `eun-table` itself : the action bar
-         * lives outside this component's own DOM tree entirely (portaled to
-         * `document.body`), so its own `bubbles: true, composed: false` event
-         * never reaches here on its own — the same reasoning `eun-scheduler`'s
-         * `handleEditorCreate` documents for its own embedded (non-portaled but
-         * still non-composed) editor.
+         * Re-dispatches `euntableaction` from `eun-table` itself, since the
+         * action bar is a sibling of this element, not a descendant.
          * @private
          */
         this.handlePortaledAction = (event) => {
             const actionEvent = event;
+            event.stopPropagation();
             this.dispatchEvent(new TableActionEvent(actionEvent.key, actionEvent.optionKey));
         };
         /** @private */
@@ -335,25 +373,37 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
     }
     connectedCallback() {
         super.connectedCallback?.();
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", "grid");
+        adoptLightDomStyles(this, tableNativeStyles);
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("eunchange", this.handleCheckboxChange);
+        this.mutationObserver = new MutationObserver(this.handleMutations);
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-row-key"],
+        });
+        if (this.hasUpdated) {
+            this.sync();
         }
-        this.addEventListener("focusin", this.handleFocusIn);
     }
     disconnectedCallback() {
-        this.removeEventListener("focusin", this.handleFocusIn);
-        this.headerObserver?.disconnect();
+        this.removeEventListener("click", this.handleClick);
+        this.removeEventListener("eunchange", this.handleCheckboxChange);
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
         this.teardownActionBar();
         this.teardownLoadMoreSentinel();
         this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.captionObserver?.disconnect();
+        this.captionObserver = undefined;
+        this.observedCaption = undefined;
         super.disconnectedCallback?.();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        if (this.virtualize) {
-            this.syncLogicalItems();
-        }
-        this.syncChildren();
+        this.sync();
         this.ensureVirtualizeObservers();
         if (this.infinite) {
             this.setupTableLoadObserver();
@@ -361,33 +411,23 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has("selectable")) {
-            if (this.selectable) {
-                this.setAttribute("aria-multiselectable", "true");
-            }
-            else {
-                this.removeAttribute("aria-multiselectable");
-            }
-        }
-        if (changed.has("syncing")) {
-            if (this.syncing) {
-                this.setAttribute("aria-busy", "true");
-            }
-            else {
-                this.removeAttribute("aria-busy");
-            }
-        }
         const managedTriggers = ["columns", "data", "rowAction", "rowKey"];
-        if (managedTriggers.some((prop) => changed.has(prop))) {
-            this.regenerateManagedChildren();
+        if (this.columns && managedTriggers.some((prop) => changed.has(prop))) {
+            this.renderManagedTable();
         }
         const syncTriggers = [
+            "columns",
+            "data",
+            "rowAction",
+            "rowKey",
             "selectable",
-            "checkboxAlwaysVisible",
-            "actionAlwaysVisible",
             "stickyHeader",
-            "stickyFirstColumn",
-            "stickyLastColumn",
+            "loading",
+            "virtualize",
+            "infinite",
+            "hasMore",
+            "skeletonRows",
+            "syncing",
             "internalSelection",
             "actions",
             "selectedLabel",
@@ -398,12 +438,10 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             "selectRowAriaLabel",
             "toolbarAriaLabel",
             "closeActionBarAriaLabel",
-            "loading",
-            "clickable",
-            "syncing",
+            "locale",
         ];
         if (syncTriggers.some((prop) => changed.has(prop))) {
-            this.syncChildren();
+            this.sync();
         }
         if (changed.has("virtualize")) {
             this.ensureVirtualizeObservers();
@@ -414,7 +452,9 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
                 changed.has("bufferPages"))) {
             this.scheduleAnimationFrame(() => this.syncPages());
         }
-        if (changed.has("infinite") || changed.has("rootMargin")) {
+        if (changed.has("infinite") ||
+            changed.has("rootMargin") ||
+            changed.has("loading")) {
             if (this.infinite) {
                 this.setupTableLoadObserver();
             }
@@ -435,255 +475,421 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         this.setSelection(new Set(keys));
     }
     /**
-     * Regenerates this table's own light DOM from `columns`/`data`/
-     * `rowAction`/`rowKey` — see the class doc's "Programmatic `columns`/
-     * `data`" section. A no-op unless `columns` is set (light-DOM-authored
-     * tables never call this). Previously-selected keys that still exist
-     * among the regenerated rows stay selected ; ones that don't (a row was
-     * removed from `data`) drop out of the selection.
+     * The slotted native table.
      * @private
      */
-    regenerateManagedChildren() {
-        const columns = this.columns;
-        if (!columns) {
-            return;
-        }
-        const header = buildManagedHeader(columns);
-        const rows = this.data.map((row, index) => buildManagedItem(row, index, columns, this.rowKey, this.rowAction));
-        this.detachedByPage.clear();
-        this.pageHeights = [];
-        this.mutatingSlot = true;
-        this.replaceChildren(header, ...rows);
-        queueMicrotask(() => {
-            this.mutatingSlot = false;
-        });
-        const stillPresent = new Set(rows.map((item) => item.rowKey));
-        const preserved = new Set([...this.internalSelection].filter((key) => stillPresent.has(key)));
-        if (preserved.size !== this.internalSelection.size) {
-            this.internalSelection = preserved;
-        }
-        if (this.virtualize) {
-            this.syncLogicalItems();
-        }
-        this.syncChildren();
-        this.restoreFocusIfLost();
+    get tableEl() {
+        return this.querySelector(":scope > table");
+    }
+    /**
+     * Whether any body row is currently selected.
+     * @private
+     */
+    get selectionActive() {
+        return this.selectable && this.internalSelection.size > 0;
+    }
+    /**
+     * Every visible or accessible text the table renders: its own property
+     * when set, else the `locale` dictionary's.
+     * @private
+     */
+    get labels() {
+        const strings = this.dictionary.table;
+        return {
+            ...strings,
+            loadingMore: this.loadingMoreLabel ?? strings.loadingMore,
+            selected: this.selectedLabel ?? strings.selected,
+            selectAll: this.selectAllLabel ?? strings.selectAll,
+            deselectAll: this.deselectAllLabel ?? strings.deselectAll,
+            selectAllRows: this.selectAllAriaLabel ?? strings.selectAllRows,
+            deselectAllRows: this.deselectAllAriaLabel ?? strings.deselectAllRows,
+            selectRow: this.selectRowAriaLabel ?? strings.selectRow,
+            selectionActions: this.toolbarAriaLabel ?? strings.selectionActions,
+            clearSelection: this.closeActionBarAriaLabel ?? strings.clearSelection,
+        };
+    }
+    /**
+     * Every body row this table currently knows about: the full logical set
+     * (including virtualized-out pages) while `virtualize` is set, the
+     * mounted rows otherwise.
+     * @private
+     */
+    currentRows() {
         if (this.virtualize) {
-            this.scheduleAnimationFrame(() => this.syncPages());
+            return this.logicalRows;
         }
-        if (this.infinite) {
-            this.reobserveSentinel(this.sentinelEl);
+        const table = this.tableEl;
+        if (!table) {
+            return [];
         }
+        return Array.from(table.tBodies)
+            .filter((body) => !body.hasAttribute(SKELETON_ATTR))
+            .flatMap((body) => Array.from(body.rows))
+            .filter((row) => !row.classList.contains(SPACER_CLASS));
     }
     /**
-     * Every `eun-table-item` this table currently knows about — the full
-     * logical set (including virtualized-out pages) while `virtualize` is
-     * set, the mounted-only `itemEls` otherwise.
+     * The body section `virtualize` operates on.
      * @private
      */
-    currentItems() {
-        return this.virtualize ? this.logicalItems : this.itemEls;
+    get bodyEl() {
+        const table = this.tableEl;
+        return table
+            ? Array.from(table.tBodies).find((body) => !body.hasAttribute(SKELETON_ATTR))
+            : undefined;
     }
     /**
-     * Refocuses whatever row now sits at {@link lastFocusedRowIndex} once
-     * {@link lastFocusedRow} itself has disconnected (removed outright, or
-     * recreated wholesale by `regenerateManagedChildren`) while focus was
-     * still on it or its content — otherwise that focus would just silently
-     * fall back to the document body. Left alone if focus already landed
-     * somewhere else on its own (the consumer moved it deliberately before
-     * the removal), detected by the document's active element no longer
-     * being the body.
+     * Pushes the selection and configuration state down onto the slotted
+     * table: generated selection cells, row state, action cells, the
+     * loading placeholder body, and the action bar. Its own mutations are
+     * dropped from the observer queue so they never trigger another sync.
      * @private
      */
-    restoreFocusIfLost() {
-        if (!this.lastFocusedRow || this.lastFocusedRow.isConnected) {
+    sync() {
+        if (this.virtualize) {
+            this.syncLogicalRows();
+        }
+        const table = this.tableEl;
+        if (table) {
+            this.syncHeader(table);
+            this.syncFooter(table);
+            this.syncRows(this.currentRows());
+            this.syncSkeleton(table);
+            this.syncAriaRows(table);
+            if (this.syncing || this.loading) {
+                table.setAttribute("aria-busy", "true");
+            }
+            else {
+                table.removeAttribute("aria-busy");
+            }
+        }
+        this.watchCaption(table?.caption ?? undefined);
+        this.toggleAttribute("selection-active", this.selectionActive);
+        this.syncActionBar();
+        this.mutationObserver?.takeRecords();
+    }
+    /**
+     * Reserves the height of the table's `<caption>` above the frame, where
+     * the light DOM sheet positions it, and keeps it up to date as the
+     * caption resizes.
+     * @private
+     */
+    watchCaption(caption) {
+        if (caption === this.observedCaption) {
             return;
         }
-        const rowIndex = this.lastFocusedRowIndex;
-        this.lastFocusedRow = undefined;
-        this.lastFocusedRowIndex = -1;
-        if (this.ownerDocument.activeElement !== this.ownerDocument.body) {
+        this.captionObserver?.disconnect();
+        this.observedCaption = caption;
+        if (!caption) {
+            this.style.removeProperty("--_table-caption-height");
             return;
         }
-        this.focusRowAt(rowIndex);
+        const reserve = () => {
+            this.style.setProperty("--_table-caption-height", `${caption.getBoundingClientRect().height}px`);
+        };
+        this.captionObserver ??= new ResizeObserver(() => this.observedCaption ? reserve() : undefined);
+        this.captionObserver.observe(caption);
+        reserve();
     }
     /**
-     * Re-scans the slotted header/items and pushes every derived/config value
-     * down onto them — called after structural changes (`slotchange`, the
-     * header's own `MutationObserver`, {@link regenerateManagedChildren}) and
-     * whenever a reactive property that affects children changes (see
-     * {@link updated}).
+     * Adds the selection column's leading cell to `row` if missing, and
+     * returns it.
      * @private
      */
-    syncChildren() {
-        const header = this.headerEls[0];
-        const items = this.currentItems();
-        this.watchHeaderColumns(header);
-        this.updateColumnsTemplate(header, items);
-        this.wireHeader(header);
-        this.wireItems(items);
-        this.syncActionBar();
+    ensureSelectCell(row, tagName) {
+        const first = row.cells[0];
+        if (first?.hasAttribute(SELECT_ATTR)) {
+            return first;
+        }
+        const cell = document.createElement(tagName);
+        cell.setAttribute(SELECT_ATTR, "");
+        row.prepend(cell);
+        return cell;
+    }
+    /** @private */
+    removeSelectCell(row) {
+        const first = row.cells[0];
+        if (first?.hasAttribute(SELECT_ATTR)) {
+            first.remove();
+        }
     }
     /**
-     * (Re)installs {@link headerObserver} on `header`, only when it's actually
-     * a different element than last time.
+     * Returns the checkbox inside a selection cell, creating it if missing.
      * @private
      */
-    watchHeaderColumns(header) {
-        if (this.observedHeader === header) {
+    ensureCheckbox(cell) {
+        let checkbox = cell.querySelector("eun-checkbox");
+        if (!checkbox) {
+            checkbox = document.createElement("eun-checkbox");
+            checkbox.setAttribute("tabindex", "0");
+            cell.replaceChildren(checkbox);
+        }
+        return checkbox;
+    }
+    /**
+     * Adds or removes the header's selection cell, holding the select-all
+     * checkbox.
+     * @private
+     */
+    syncHeader(table) {
+        const headerRows = table.tHead ? Array.from(table.tHead.rows) : [];
+        const [firstRow, ...otherRows] = headerRows;
+        otherRows.forEach((row) => this.removeSelectCell(row));
+        if (!firstRow) {
             return;
         }
-        this.headerObserver?.disconnect();
-        this.observedHeader = header;
-        if (!header) {
+        if (!this.selectable) {
+            this.removeSelectCell(firstRow);
             return;
         }
-        this.headerObserver = new MutationObserver(() => this.syncChildren());
-        this.headerObserver.observe(header, {
-            childList: true,
-            attributes: true,
-            attributeFilter: ["width"],
-            subtree: true,
+        const cell = this.ensureSelectCell(firstRow, "th");
+        cell.setAttribute("scope", "col");
+        cell.rowSpan = headerRows.length;
+        const labels = this.labels;
+        const total = this.currentRows().length;
+        const selectedCount = this.internalSelection.size;
+        const allSelected = total > 0 && selectedCount === total;
+        const checkbox = this.ensureCheckbox(cell);
+        checkbox.checked = allSelected;
+        checkbox.indeterminate = selectedCount > 0 && !allSelected;
+        checkbox.disabled = total === 0;
+        checkbox.setAttribute("aria-label", allSelected ? labels.deselectAllRows : labels.selectAllRows);
+    }
+    /**
+     * Keeps footer rows aligned with an empty selection cell.
+     * @private
+     */
+    syncFooter(table) {
+        const rows = table.tFoot ? Array.from(table.tFoot.rows) : [];
+        rows.forEach((row) => {
+            if (this.selectable) {
+                this.ensureSelectCell(row, "td").replaceChildren();
+            }
+            else {
+                this.removeSelectCell(row);
+            }
         });
     }
     /**
-     * Rebuilds the shared `grid-template-columns` track list from the
-     * header's own `eun-table-column` children's `width`s, and whether any
-     * item currently has action content — see the class doc's CSS Subgrid
-     * section.
+     * Resolves each body row's key and pushes its selection and action cell
+     * state.
      * @private
      */
-    updateColumnsTemplate(header, items) {
-        const columns = header
-            ? Array.from(header.querySelectorAll(":scope > eun-table-column"))
-            : [];
-        const widths = columns.map((column) => column.width);
-        this.hasAction = items.some((item) => !!item.querySelector(':scope > [slot="action"]'));
-        const template = computeColumnsTemplate(widths, {
-            selectable: this.selectable,
-            hasAction: this.hasAction,
+    syncRows(rows) {
+        const rowKeys = new Map();
+        const selectionActive = this.selectionActive;
+        const labels = this.labels;
+        rows.forEach((row, index) => {
+            const key = resolveRowKey(row.dataset.rowKey, index);
+            rowKeys.set(row, key);
+            const selected = this.selectable && this.internalSelection.has(key);
+            row.toggleAttribute(SELECTED_ATTR, selected);
+            if (this.selectable) {
+                const checkbox = this.ensureCheckbox(this.ensureSelectCell(row, "td"));
+                checkbox.checked = selected;
+                checkbox.setAttribute("aria-label", `${labels.selectRow} ${this.rowName(row) ?? index + 1}`);
+            }
+            else {
+                this.removeSelectCell(row);
+            }
+            for (const cell of Array.from(row.cells)) {
+                if (cell.hasAttribute(ACTION_ATTR)) {
+                    cell.inert = selectionActive;
+                }
+            }
         });
-        this.style.setProperty("--_columns", template);
+        this.rowKeys = rowKeys;
     }
-    /** @private */
-    wireHeader(header) {
-        if (!header) {
+    /**
+     * The name of a body row: the text of its row header (`<th scope="row">`,
+     * or else its first `<th>`), used to label its checkbox.
+     * @private
+     */
+    rowName(row) {
+        const header = row.querySelector(':scope > th[scope="row"]') ??
+            row.querySelector(`:scope > th:not([${SELECT_ATTR}])`);
+        const name = header?.textContent?.replace(/\s+/g, " ").trim();
+        return name || undefined;
+    }
+    /**
+     * Gives every row its position and the table its total row count while
+     * `virtualize` is set, so assistive technology announces the real size
+     * of the table even though only part of its rows are in the DOM. The
+     * count is `-1` (unknown) while `infinite` can still load more.
+     * @private
+     */
+    syncAriaRows(table) {
+        if (!this.virtualize) {
+            if (this.ariaRowsApplied) {
+                table.removeAttribute("aria-rowcount");
+                table
+                    .querySelectorAll("tr[aria-rowindex]")
+                    .forEach((row) => row.removeAttribute("aria-rowindex"));
+                this.ariaRowsApplied = false;
+            }
             return;
         }
-        header.selectable = this.selectable;
-        header.hasAction = this.hasAction;
-        header.sticky = this.stickyHeader;
-        header.stickyFirstColumn = this.stickyFirstColumn;
-        header.stickyLastColumn = this.stickyLastColumn;
-        header.selectedCount = this.internalSelection.size;
-        header.totalCount = this.currentItems().length;
-        header.selectAllAriaLabel = this.selectAllAriaLabel;
-        header.deselectAllAriaLabel = this.deselectAllAriaLabel;
-        header.onSelectAllToggle = () => this.toggleSelectAll();
-        header.requestAdjacentRow = (direction) => this.moveFocus(this.rowIndexOf(header), direction);
-        header.requestGridEdge = (edge) => this.moveToGridEdge(edge);
+        const rows = [
+            ...(table.tHead ? Array.from(table.tHead.rows) : []),
+            ...this.logicalRows,
+            ...(table.tFoot ? Array.from(table.tFoot.rows) : []),
+        ];
+        table.setAttribute("aria-rowcount", this.infinite && this.hasMore ? "-1" : String(rows.length));
+        rows.forEach((row, index) => row.setAttribute("aria-rowindex", String(index + 1)));
+        this.ariaRowsApplied = true;
     }
-    /** @private */
-    wireItems(items) {
-        items.forEach((item, index) => {
-            const key = resolveRowKey(item.rowKey, index);
-            item.resolvedKey = key;
-            item.selectable = this.selectable;
-            item.hasAction = this.hasAction;
-            item.checkboxAlwaysVisible = this.checkboxAlwaysVisible;
-            item.actionAlwaysVisible = this.actionAlwaysVisible;
-            item.stickyFirstColumn = this.stickyFirstColumn;
-            item.stickyLastColumn = this.stickyLastColumn;
-            item.clickable = this.clickable;
-            item.syncing = this.syncing;
-            item.selected = this.internalSelection.has(key);
-            item.selectionActive = this.selectable && this.internalSelection.size > 0;
-            item.selectCheckboxLabel = `${this.selectRowAriaLabel} ${index + 1}`;
-            item.onToggleSelected = () => this.toggleRow(key);
-            item.requestAdjacentRow = (direction) => this.moveFocus(this.rowIndexOf(item), direction);
-            item.requestGridEdge = (edge) => this.moveToGridEdge(edge);
-        });
+    /**
+     * Announces how many rows the last `eunloadmore` added, once they're in.
+     * @private
+     */
+    announceLoadedRows() {
+        if (this.rowCountBeforeLoad === undefined || !this.announcerEl) {
+            return;
+        }
+        const added = this.currentRows().length - this.rowCountBeforeLoad;
+        if (added <= 0) {
+            return;
+        }
+        this.rowCountBeforeLoad = undefined;
+        this.announcerEl.textContent = this.dictionary.table.rowsLoaded(added);
     }
     /**
-     * Every row, header first — the space `ArrowUp`/`ArrowDown`/`Ctrl+Home`/
-     * `Ctrl+End` move across. Excludes every `eun-table-item` while `loading`
-     * is set, since they're hidden (`display: none`) and shouldn't be
-     * reachable ; otherwise the full logical set (mounted or virtualized-out)
-     * while `virtualize` is on, so `Ctrl+End`/`ArrowDown` math stays correct
-     * regardless of what's currently mounted (see {@link ensureRowMounted}).
+     * Adds the placeholder body while `loading`, shaped after the header's
+     * own cells so its columns line up, and removes it otherwise.
      * @private
      */
-    allRows() {
-        const header = this.headerEls[0];
-        if (this.loading) {
-            return header ? [header] : [];
+    syncSkeleton(table) {
+        const existing = table.querySelector(`:scope > tbody[${SKELETON_ATTR}]`);
+        if (!this.loading) {
+            existing?.remove();
+            return;
+        }
+        const headerCells = table.tHead?.rows[0]
+            ? Array.from(table.tHead.rows[0].cells).filter((cell) => !cell.hasAttribute(SELECT_ATTR))
+            : [];
+        const signature = [
+            this.selectable,
+            this.skeletonRows,
+            ...headerCells.map((cell) => `${cell.colSpan}${cell.hasAttribute(ACTION_ATTR) ? "a" : ""}`),
+        ].join(",");
+        if (existing?.dataset.tableSkeleton === signature) {
+            return;
+        }
+        const body = document.createElement("tbody");
+        body.setAttribute(SKELETON_ATTR, signature);
+        body.setAttribute("aria-hidden", "true");
+        for (let index = 0; index < this.skeletonRows; index++) {
+            const row = body.insertRow();
+            row.style.setProperty("--_row-index", String(index));
+            if (this.selectable) {
+                const cell = row.insertCell();
+                cell.setAttribute(SELECT_ATTR, "");
+                cell.append(this.createSkeleton("18px", "18px", "4px"));
+            }
+            for (const headerCell of headerCells) {
+                const cell = row.insertCell();
+                cell.colSpan = headerCell.colSpan;
+                if (headerCell.hasAttribute(ACTION_ATTR)) {
+                    cell.setAttribute(ACTION_ATTR, "");
+                    cell.append(this.createSkeleton("28px", "28px", "8px"));
+                }
+                else {
+                    cell.append(this.createSkeleton("50%", "14px", "4px"));
+                }
+            }
+        }
+        if (existing) {
+            existing.replaceWith(body);
+            return;
+        }
+        const bodies = Array.from(table.tBodies);
+        const lastBody = bodies[bodies.length - 1];
+        if (lastBody) {
+            lastBody.after(body);
+        }
+        else if (table.tFoot) {
+            table.tFoot.before(body);
+        }
+        else {
+            table.append(body);
         }
-        const items = this.currentItems();
-        return header ? [header, ...items] : [...items];
     }
     /** @private */
-    rowIndexOf(row) {
-        return this.allRows().indexOf(row);
+    createSkeleton(width, height, radius) {
+        const skeleton = document.createElement("eun-skeleton");
+        skeleton.setAttribute("variant", "rect");
+        skeleton.setAttribute("width", width);
+        skeleton.setAttribute("height", height);
+        skeleton.setAttribute("radius", radius);
+        if (width.endsWith("%")) {
+            skeleton.style.width = width;
+        }
+        return skeleton;
     }
     /**
-     * Moves focus to the row before/after `rowIndex` — `ArrowUp`/`ArrowDown`
-     * delegated up from a row's own `TableRowMixin`. Every row is always its
-     * own permanent `Tab` stop (see `TableRowMixin`'s own class doc), so this
-     * only ever needs to resolve *which* row and hand it a plain `.focus()`,
-     * no column bookkeeping of any kind.
+     * The body row `target` belongs to, if any.
      * @private
      */
-    moveFocus(rowIndex, direction) {
-        this.focusRowAt(rowIndex + direction);
+    bodyRowOf(target) {
+        const row = target.closest?.("tr");
+        return row && this.rowKeys.has(row) ? row : undefined;
     }
     /**
-     * Moves focus to the header (`Ctrl+Home`) or the last row (`Ctrl+End`).
+     * Whether the click went to interactive content of `row` (a link, a
+     * button, an input, a nested eunomia control) rather than to the row.
      * @private
      */
-    moveToGridEdge(edge) {
-        const rows = this.allRows();
-        if (!rows.length) {
-            return;
+    isInteractiveClick(event, row) {
+        for (const node of event.composedPath()) {
+            if (node === row) {
+                return false;
+            }
+            if (node instanceof Element && node.matches(INTERACTIVE_SELECTOR)) {
+                return true;
+            }
         }
-        this.focusRowAt(edge === "start" ? 0 : rows.length - 1);
+        return false;
     }
     /**
-     * Moves focus to `rows[rowIndex]`, clamped to the grid's own bounds,
-     * mounting its page first if it's currently virtualized-out.
+     * Toggles a row while rows are selected, otherwise fires
+     * {@link TableRowClickEvent}.
      * @private
      */
-    focusRowAt(rowIndex) {
-        const rows = this.allRows();
-        if (!rows.length) {
+    activateRow(row, event) {
+        const key = this.rowKeys.get(row) ?? "";
+        if (this.selectionActive) {
+            this.toggleRow(key);
             return;
         }
-        const clampedRow = Math.max(0, Math.min(rowIndex, rows.length - 1));
-        this.ensureRowMounted(rows, clampedRow);
-        this.allRows()[clampedRow]?.focus();
+        const rowClick = new TableRowClickEvent(key);
+        this.dispatchEvent(rowClick);
+        if (!rowClick.defaultPrevented) {
+            this.followRowLink(row, event);
+        }
     }
     /**
-     * Mounts `rows[rowIndex]`'s page first if it's a `eun-table-item`
-     * currently virtualized-out — the same "mount before focusing" fix
-     * `eun-infinite-list`'s own `#focusItem` applies, needed because
-     * `Ctrl+End`/a long `ArrowDown` run can target a row several pages away
-     * from what's currently mounted.
+     * Follows the row's `data-table-row-link` link, if any, keeping the
+     * modifier keys so a `Ctrl`/`Cmd` click still opens a new tab. The link
+     * stays the row's one keyboard-reachable way to do the same.
      * @private
      */
-    ensureRowMounted(rows, rowIndex) {
-        if (!this.virtualize) {
-            return;
-        }
-        const row = rows[rowIndex];
-        if (!row || row.isConnected) {
+    followRowLink(row, event) {
+        const marker = row.querySelector(`[${ROW_LINK_ATTR}]`);
+        if (!marker) {
             return;
         }
-        const logicalIndex = this.logicalItems.indexOf(row);
-        if (logicalIndex < 0) {
-            return;
-        }
-        const page = Math.floor(logicalIndex / this.pageSize);
-        if (this.mountPage(page)) {
-            this.syncChildren();
-        }
+        const link = (marker.matches("a[href]") ? marker : null) ??
+            marker.querySelector("a[href]") ??
+            marker.shadowRoot?.querySelector("a[href]") ??
+            marker;
+        link.dispatchEvent(new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+        }));
     }
     /** @private */
     toggleRow(key) {
@@ -698,21 +904,13 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
     }
     /** @private */
     toggleSelectAll() {
-        const items = this.currentItems();
-        const allSelected = items.length > 0 && this.internalSelection.size === items.length;
-        if (allSelected) {
-            this.setSelection(new Set());
-            return;
-        }
-        this.setSelection(new Set(items.map((item, index) => resolveRowKey(item.rowKey, index))));
+        const keys = Array.from(this.rowKeys.values());
+        const allSelected = keys.length > 0 && keys.every((key) => this.internalSelection.has(key));
+        this.setSelection(allSelected ? new Set() : new Set(keys));
     }
     /**
-     * Applies a new selection and fires {@link TableSelectionChangeEvent} —
-     * the single path both internal interactions (a checkbox, select-all) and
-     * an external `selectedKeys` assignment funnel through, so the event
-     * fires consistently either way (the same "always fires, whatever the
-     * source" convention `eun-scheduler`'s own `eunperiodchange` uses for its
-     * controlled `view`/`displayedDate`).
+     * Applies a new selection and fires {@link TableSelectionChangeEvent},
+     * whatever the source.
      * @private
      */
     setSelection(next) {
@@ -720,25 +918,27 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         this.dispatchEvent(new TableSelectionChangeEvent(Array.from(next)));
     }
     /**
-     * Creates the body-portaled action bar the first time it's needed.
+     * Creates the action bar the first time it's needed, right after the
+     * table so it comes next in the `Tab` order, and shows it as a manual
+     * popover so it renders above the page whatever the table's ancestors
+     * clip or transform.
      * @private
      */
     ensureActionBar() {
         if (!this.actionBarEl) {
-            this.actionBarEl = document.createElement(EunomiaTableActionBarTagName);
-            this.actionBarEl.addEventListener(TableActionEvent.eventName, this.handlePortaledAction);
-            document.body.appendChild(this.actionBarEl);
+            const bar = document.createElement(EunomiaTableActionBarTagName);
+            bar.setAttribute("popover", "manual");
+            bar.addEventListener(TableActionEvent.eventName, this.handlePortaledAction);
+            this.after(bar);
+            bar.showPopover?.();
+            this.actionBarEl = bar;
         }
         return this.actionBarEl;
     }
     /**
-     * Tears down the body-portaled action bar. If focus is currently inside
-     * it (the close button, most often), removing it would otherwise drop
-     * focus to the document body the same way removing a focused row would
-     * (see {@link restoreFocusIfLost}) — except the bar lives outside this
-     * component's own DOM subtree entirely, so that row-focused mechanism
-     * can't see it ; this restores focus back onto the grid itself (its
-     * header, or its first row absent one) instead.
+     * Tears down the action bar. If focus was inside it, it
+     * moves back to the table's first selection checkbox rather than
+     * falling to the document body.
      * @private
      */
     teardownActionBar() {
@@ -751,16 +951,16 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         this.actionBarEl.remove();
         this.actionBarEl = undefined;
         if (hadFocus) {
-            this.focusRowAt(0);
+            this.querySelector(`[${SELECT_ATTR}] eun-checkbox:not([disabled])`)?.focus();
         }
     }
     /**
-     * Mounts/updates/unmounts the floating action bar based on the current
-     * selection.
+     * Mounts, updates, or unmounts the floating action bar based on the
+     * current selection.
      * @private
      */
     syncActionBar() {
-        if (!this.selectable || this.internalSelection.size === 0) {
+        if (!this.selectionActive) {
             this.teardownActionBar();
             return;
         }
@@ -770,41 +970,142 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             document.addEventListener("keydown", this.handleEscapeClear);
         }
         bar.selectedCount = this.internalSelection.size;
-        bar.totalCount = this.currentItems().length;
+        bar.totalCount = this.rowKeys.size;
         bar.actions = this.actions;
-        bar.toolbarAriaLabel = this.toolbarAriaLabel;
-        bar.selectedLabel = this.selectedLabel;
-        bar.selectAllLabel = this.selectAllLabel;
-        bar.deselectAllLabel = this.deselectAllLabel;
-        bar.closeAriaLabel = this.closeActionBarAriaLabel;
+        const labels = this.labels;
+        bar.toolbarAriaLabel = labels.selectionActions;
+        bar.selectedLabel = labels.selected;
+        bar.selectAllLabel = labels.selectAll;
+        bar.deselectAllLabel = labels.deselectAll;
+        bar.closeAriaLabel = labels.clearSelection;
         bar.onSelectAll = () => this.toggleSelectAll();
         bar.onClose = () => this.setSelection(new Set());
     }
     /**
-     * Rebuilds {@link logicalItems} from the current light DOM, reconciling it
-     * with whatever's still cached behind a spacer — the same reconciliation
-     * `eun-infinite-list`'s own `syncItemsFromLightDom` performs, scoped here
-     * to `eun-table-item` children only (the header is excluded, it's never
-     * virtualized). Also recomputes {@link mountedPages} from the rebuilt
-     * page count. A no-op unless `virtualize` is set.
+     * Renders the native table from `columns`/`data`/`rowAction`/`rowKey`
+     * into this element's light DOM. Previously selected keys that no
+     * longer match a row drop out of the selection.
+     * @private
+     */
+    renderManagedTable() {
+        const columns = this.columns ?? [];
+        const keys = this.data.map((row, index) => this.rowKey ? this.rowKey(row, index) : resolveRowKey(undefined, index));
+        this.mountAllPages();
+        render(html `<table>
+        <thead>
+          <tr>
+            ${columns.map((column) => html `<th
+                  scope="col"
+                  style=${ifDefined(this.columnStyle(column, true))}
+                  aria-sort=${ifDefined(column.sort)}
+                >
+                  ${column.label}
+                </th>`)}
+            ${this.rowAction
+            ? html `<th scope="col" data-table-action>
+                  <span class="eun-table-visually-hidden"
+                    >${this.rowAction.label ?? this.labels.rowActions}</span
+                  >
+                </th>`
+            : nothing}
+          </tr>
+        </thead>
+        <tbody>
+          ${repeat(this.data, (_, index) => keys[index], (row, index) => html `<tr data-row-key=${keys[index]}>
+                ${columns.map((column) => html `<td
+                      style=${ifDefined(this.columnStyle(column, false))}
+                    >
+                      ${this.renderManagedCell(column, row, index)}
+                    </td>`)}
+                ${this.rowAction
+            ? html `<td data-table-action>
+                      ${this.renderRowAction(this.rowAction, row, index)}
+                    </td>`
+            : nothing}
+              </tr>`)}
+        </tbody>
+      </table>`, this);
+        const stillPresent = new Set(keys);
+        const preserved = new Set([...this.internalSelection].filter((key) => stillPresent.has(key)));
+        if (preserved.size !== this.internalSelection.size) {
+            this.internalSelection = preserved;
+        }
+        if (this.virtualize) {
+            this.scheduleAnimationFrame(() => this.syncPages());
+        }
+        if (this.infinite) {
+            this.reobserveSentinel(this.sentinelEl);
+        }
+    }
+    /** @private */
+    columnStyle(column, header) {
+        const declarations = [];
+        if (header && column.width) {
+            declarations.push(`width: ${column.width}`);
+        }
+        const align = alignToTextAlign(column.align);
+        if (align) {
+            declarations.push(`text-align: ${align}`);
+        }
+        return declarations.length ? declarations.join("; ") : undefined;
+    }
+    /** @private */
+    renderManagedCell(column, row, index) {
+        const value = row[column.key];
+        if (column.render) {
+            return column.render(value, row, index);
+        }
+        return value === null || value === undefined ? "" : String(value);
+    }
+    /**
+     * Renders a row's `rowAction`: a `eun-dropdown-button` for
+     * `type: "dropdown"`, a `eun-button` otherwise.
+     * @private
+     */
+    renderRowAction(action, row, index) {
+        if (action.type === "dropdown") {
+            return html `<eun-dropdown-button
+        size="xs"
+        appearance="ghost"
+        icon=${ifDefined(action.icon)}
+        label=${ifDefined(action.icon ? undefined : action.label)}
+        aria-label=${action.label ?? this.labels.rowActions}
+        .options=${action.options(row)}
+        .disabledKeys=${action.disabledKeys?.(row) ?? []}
+        ?disabled=${action.disabled?.(row) ?? false}
+        @eunselect=${(event) => action.onSelect(event.key, row, index)}
+      ></eun-dropdown-button>`;
+        }
+        return html `<eun-button
+      size="xs"
+      appearance=${action.color ? "default" : "ghost"}
+      color=${ifDefined(action.color)}
+      aria-label=${action.label}
+      ?disabled=${action.disabled?.(row) ?? false}
+      @click=${() => action.onClick(row, index)}
+    >
+      ${action.icon
+            ? html `<eun-icon name=${action.icon} size="16"></eun-icon>`
+            : action.label}
+    </eun-button>`;
+    }
+    /**
+     * Rebuilds {@link logicalRows} from the body, threading each spacer's
+     * cached rows back into their position, and recomputes
+     * {@link mountedPages}.
      * @private
      */
-    syncLogicalItems() {
+    syncLogicalRows() {
         const rebuilt = [];
-        for (const child of Array.from(this.children)) {
-            if (!(child instanceof HTMLElement)) {
-                continue;
+        for (const row of Array.from(this.bodyEl?.rows ?? [])) {
+            if (row.classList.contains(SPACER_CLASS)) {
+                rebuilt.push(...(this.detachedByPage.get(Number(row.dataset.eunPage)) ?? []));
             }
-            if (child.classList.contains(TABLE_ROW_SPACER_CLASS)) {
-                const page = Number(child.dataset.eunPage);
-                rebuilt.push(...(this.detachedByPage.get(page) ?? []));
-                continue;
-            }
-            if (child.tagName.toLowerCase() === EunomiaTableItemTagName) {
-                rebuilt.push(child);
+            else {
+                rebuilt.push(row);
             }
         }
-        this.logicalItems = rebuilt;
+        this.logicalRows = rebuilt;
         const totalPages = Math.ceil(rebuilt.length / this.pageSize);
         const mountedPages = new Set();
         for (let page = 0; page < totalPages; page++) {
@@ -814,14 +1115,27 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         }
         this.mountedPages = mountedPages;
     }
+    /**
+     * Remounts every virtualized-out page, before the light DOM gets
+     * re-rendered wholesale.
+     * @private
+     */
+    mountAllPages() {
+        for (const page of Array.from(this.detachedByPage.keys())) {
+            this.mountPage(page);
+        }
+        this.detachedByPage.clear();
+        this.pageHeights = [];
+        this.mutationObserver?.takeRecords();
+    }
     /**
      * Mounts the page range around the current scroll position and
-     * virtualizes everything outside it, once the known row count passes
-     * `virtualizeThreshold` ; below that, every page simply stays mounted.
+     * virtualizes everything outside it, once the row count passes
+     * `virtualizeThreshold`.
      * @private
      */
     syncPages() {
-        const totalRows = this.logicalItems.length;
+        const totalRows = this.logicalRows.length;
         if (totalRows === 0) {
             return;
         }
@@ -833,7 +1147,7 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             }
         }
         else {
-            if (this.clientHeight === 0) {
+            if (!this.frameEl?.clientHeight) {
                 return;
             }
             const centerPage = this.estimateCenterPage(totalPages);
@@ -849,19 +1163,17 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             }
         }
         if (changed) {
-            this.syncChildren();
+            this.sync();
         }
     }
     /**
-     * Estimates which page the middle of the current viewport falls into, by
-     * walking cumulative page heights — measured ones where known, an
-     * average-based estimate otherwise. `this` is the scroll container itself
-     * (`:host` sets `overflow: auto`, see table.styles.ts), so its own
-     * `scrollTop`/`clientHeight` are read directly.
+     * Estimates which page the middle of the viewport falls into, from
+     * measured page heights where known, an average otherwise.
      * @private
      */
     estimateCenterPage(totalPages) {
-        const target = this.scrollTop + this.clientHeight / 2;
+        const frame = this.frameEl;
+        const target = frame ? frame.scrollTop + frame.clientHeight / 2 : 0;
         let offset = 0;
         for (let page = 0; page < totalPages; page++) {
             const height = this.pageHeights[page] ?? this.estimatePageHeight(page);
@@ -874,55 +1186,38 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
     }
     /** @private */
     estimatePageHeight(page) {
-        const totalPages = Math.ceil(this.logicalItems.length / this.pageSize);
+        const totalPages = Math.ceil(this.logicalRows.length / this.pageSize);
         const rowsInPage = page === totalPages - 1
-            ? this.logicalItems.length - page * this.pageSize
+            ? this.logicalRows.length - page * this.pageSize
             : this.pageSize;
         return rowsInPage * this.avgRowHeight;
     }
     /**
-     * Remounts a virtualized-out page by reattaching its cached nodes in
-     * place of its spacer. Returns whether it actually did anything (a no-op
-     * if already mounted), so {@link syncPages} only re-syncs children once
-     * per batch rather than once per page.
+     * Remounts a virtualized-out page in place of its spacer. Returns
+     * whether it did anything.
      * @private
      */
     mountPage(page) {
-        if (this.mountedPages.has(page)) {
-            return false;
-        }
         const cached = this.detachedByPage.get(page);
-        if (!cached || cached.length === 0) {
+        if (this.mountedPages.has(page) || !cached?.length) {
             return false;
         }
-        const spacer = this.querySelector(`.${TABLE_ROW_SPACER_CLASS}[data-eun-page="${page}"]`);
-        this.mutatingSlot = true;
+        const spacer = this.bodyEl?.querySelector(`:scope > .${SPACER_CLASS}[data-eun-page="${page}"]`);
         if (spacer) {
-            for (const row of cached) {
-                spacer.before(row);
-            }
+            spacer.before(...cached);
             spacer.remove();
         }
         else {
-            for (const row of cached) {
-                this.append(row);
-            }
+            this.bodyEl?.append(...cached);
         }
-        queueMicrotask(() => {
-            this.mutatingSlot = false;
-        });
         this.detachedByPage.delete(page);
         this.mountedPages.add(page);
         return true;
     }
     /**
-     * Virtualizes out a mounted page : measures its current rendered height
-     * (used both as its own spacer size and to refine {@link avgRowHeight}),
-     * replaces its rows with a single full-width (`grid-column: 1 / -1`)
-     * spacer of that height so the scrollbar/scroll position don't jump, and
-     * caches the actual nodes for an exact reattach later. Returns whether it
-     * actually did anything (a no-op if already virtualized-out, or if the
-     * page can't be measured — not currently rendered with real layout).
+     * Replaces a mounted page's rows with a single spacer row of the same
+     * measured height, caching the rows for an exact reattach later.
+     * Returns whether it did anything.
      * @private
      */
     unmountPage(page) {
@@ -930,8 +1225,8 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             return false;
         }
         const start = page * this.pageSize;
-        const end = Math.min(start + this.pageSize, this.logicalItems.length);
-        const rows = this.logicalItems
+        const end = Math.min(start + this.pageSize, this.logicalRows.length);
+        const rows = this.logicalRows
             .slice(start, end)
             .filter((row) => row.isConnected);
         if (rows.length === 0) {
@@ -945,26 +1240,21 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         }
         this.pageHeights[page] = height;
         this.avgRowHeight = (this.avgRowHeight + height / rows.length) / 2;
-        const spacer = document.createElement("div");
-        spacer.className = TABLE_ROW_SPACER_CLASS;
+        const spacer = document.createElement("tr");
+        spacer.className = SPACER_CLASS;
         spacer.dataset.eunPage = String(page);
-        spacer.style.gridColumn = "1 / -1";
-        spacer.style.blockSize = `${height}px`;
         spacer.setAttribute("aria-hidden", "true");
-        this.mutatingSlot = true;
+        const cell = spacer.insertCell();
+        cell.colSpan = 1000;
+        cell.style.blockSize = `${height}px`;
         first.before(spacer);
-        for (const row of rows) {
-            row.remove();
-        }
-        queueMicrotask(() => {
-            this.mutatingSlot = false;
-        });
+        rows.forEach((row) => row.remove());
         this.detachedByPage.set(page, rows);
         this.mountedPages.delete(page);
         return true;
     }
     /**
-     * (Re)creates {@link resizeObserver}/the scroll listener once `virtualize`
+     * (Re)creates the resize observer and scroll listener once `virtualize`
      * is set, and tears them down once it's cleared.
      * @private
      */
@@ -972,31 +1262,31 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
         if (!this.virtualize) {
             this.resizeObserver?.disconnect();
             this.resizeObserver = undefined;
-            this.removeEventListener("scroll", this.handleTableScroll);
+            this.frameEl?.removeEventListener("scroll", this.handleTableScroll);
             if (this.syncHandle) {
                 cancelAnimationFrame(this.syncHandle);
                 this.syncHandle = undefined;
             }
             return;
         }
-        if (!this.resizeObserver) {
+        if (!this.resizeObserver && this.frameEl) {
             this.resizeObserver = new ResizeObserver(() => this.scheduleAnimationFrame(() => this.syncPages()));
-            this.resizeObserver.observe(this);
-            this.addEventListener("scroll", this.handleTableScroll, {
+            this.resizeObserver.observe(this.frameEl);
+            this.frameEl.addEventListener("scroll", this.handleTableScroll, {
                 passive: true,
             });
         }
+        this.sync();
         this.scheduleAnimationFrame(() => this.syncPages());
     }
     /**
      * Sets up (or re-creates, after `rootMargin` changes) the observer
-     * driving {@link maybeLoadMore} — the sentinel lives in this component's
-     * own shadow root (see {@link sentinelEl}), so `this` itself (the scroll
-     * container) is used as the observer's `root`.
+     * driving {@link maybeLoadMore}, with the frame, the scroll container,
+     * as its root.
      * @private
      */
     setupTableLoadObserver() {
-        this.setupLoadObserver(this.sentinelEl, this, this.rootMargin, () => this.maybeLoadMore());
+        this.setupLoadObserver(this.sentinelEl, this.frameEl ?? this, this.rootMargin, () => this.maybeLoadMore());
     }
     /** @private */
     maybeLoadMore() {
@@ -1004,45 +1294,29 @@ let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement)
             return;
         }
         this.loadingMore = true;
+        this.rowCountBeforeLoad = this.currentRows().length;
         this.requestedPages += 1;
         this.dispatchEvent(new LoadMoreEvent(this.requestedPages, this.pageSize));
     }
-    /**
-     * Renders `skeletonRows` placeholder rows, each shaped like a real
-     * `eun-table-item` (same select/data/action cell count, via CSS Subgrid)
-     * so they align under the real header's columns. `--_row-index` drives
-     * each row's own staggered entrance animation delay (see
-     * table-skeleton-row.styles.ts).
-     * @private
-     */
-    renderSkeletonRows() {
-        const header = this.querySelector(":scope > eun-table-header");
-        const columnCount = this.columns?.length ??
-            header?.querySelectorAll(":scope > eun-table-column").length ??
-            0;
-        return html `
-      ${Array.from({ length: this.skeletonRows }, (_, index) => html `
-          <eun-table-skeleton-row
-            ?selectable=${this.selectable}
-            ?has-action=${this.hasAction}
-            column-count=${columnCount}
-            style="--_row-index: ${index}"
-          ></eun-table-skeleton-row>
-        `)}
-    `;
-    }
     render() {
         return html `
-      <slot @slotchange=${this.handleSlotChange}></slot>
-      ${!this.loading && this.infinite
+      <div id="frame" part="frame">
+        <slot></slot>
+        ${!this.loading && this.infinite
             ? html `
-            <div id="table-sentinel" aria-hidden="true"></div>
-            <div id="table-loading-row" ?hidden=${!this.loadingMore}>
-              <eun-loader label=${this.loadingMoreLabel}></eun-loader>
-            </div>
-          `
+              <div id="table-sentinel" aria-hidden="true"></div>
+              <div id="table-loading-row" ?hidden=${!this.loadingMore}>
+                <eun-loader label=${this.labels.loadingMore}></eun-loader>
+              </div>
+            `
             : nothing}
-      ${this.loading ? this.renderSkeletonRows() : nothing}
+      </div>
+      <div
+        id="announcer"
+        role="status"
+        aria-live="polite"
+        class="visually-hidden"
+      ></div>
     `;
     }
 };
@@ -1074,6 +1348,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "sticky-header" })
 ], EunomiaTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-footer" })
+], EunomiaTable.prototype, "stickyFooter", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "sticky-first-column" })
 ], EunomiaTable.prototype, "stickyFirstColumn", void 0);
@@ -1164,18 +1441,15 @@ __decorate([
 __decorate([
     state()
 ], EunomiaTable.prototype, "internalSelection", void 0);
-__decorate([
-    state()
-], EunomiaTable.prototype, "hasAction", void 0);
-__decorate([
-    queryAssignedElements({ selector: "eun-table-header" })
-], EunomiaTable.prototype, "headerEls", void 0);
-__decorate([
-    queryAssignedElements({ selector: "eun-table-item" })
-], EunomiaTable.prototype, "itemEls", void 0);
 __decorate([
     query("#table-sentinel")
 ], EunomiaTable.prototype, "sentinelEl", void 0);
+__decorate([
+    query("#frame")
+], EunomiaTable.prototype, "frameEl", void 0);
+__decorate([
+    query("#announcer")
+], EunomiaTable.prototype, "announcerEl", void 0);
 EunomiaTable = __decorate([
     customElement(EunomiaTableTagName)
 ], EunomiaTable);