@eunomia/elements 1.0.0-beta.1

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

@@ -0,0 +1,1162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { EunomiaTableItemTagName, } from "../table-item/table-item.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 { TableSelectionChangeEvent } from "../../../events/table-selection-change.event.js";
+import { TableActionEvent } from "../../../events/table-action.event.js";
+import { LoadMoreEvent } from "../../../events/loadmore.event.js";
+import { LoadMoreSentinelMixin } from "../../../mixins/load-more-sentinel.mixin.js";
+import { tableStyles } from "./table.styles.js";
+import "../table-skeleton-row/table-skeleton-row.js";
+import "../../../components/loader/loader/loader.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.
+ * @internal
+ */
+const TABLE_ROW_SPACER_CLASS = "eun-table-row-spacer";
+/**
+ * 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.
+ * @internal
+ */
+const DEFAULT_ROW_HEIGHT = 44;
+/**
+ * Tag name of the table component.
+ */
+export const EunomiaTableTagName = "eun-table";
+/**
+ * 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 :
+ *
+ * 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.
+ *
+ * Selection, sticky flags, and roving-tabindex coordination 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.
+ *
+ * @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`)
+ * @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
+ * @attr {boolean} [sticky-header=false] - Pins the header to the top
+ * @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
+ * @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
+ * @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<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
+ * @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
+ * @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
+ * @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
+ * @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
+ * @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)
+ * @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
+ * @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
+ * @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<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 {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
+ * @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`
+ * @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`
+ * @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`)
+ * @element eun-table
+ * @template T Shape of a data row, in "managed" `columns`/`data` mode.
+ */
+let EunomiaTable = class EunomiaTable extends LoadMoreSentinelMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** @default false */
+        this.selectable = false;
+        /** @default false */
+        this.checkboxAlwaysVisible = false;
+        /** @default false */
+        this.actionAlwaysVisible = false;
+        /** @default false */
+        this.stickyHeader = false;
+        /** @default false */
+        this.stickyFirstColumn = false;
+        /** @default false */
+        this.stickyLastColumn = false;
+        /** @default false */
+        this.clearOnEscape = false;
+        /** @default false */
+        this.loading = false;
+        /** @default 6 */
+        this.skeletonRows = 6;
+        /** @default false */
+        this.syncing = false;
+        /** @default false */
+        this.clickable = false;
+        /** @default false */
+        this.infinite = false;
+        /** @default false */
+        this.virtualize = false;
+        /** @default 20 */
+        this.pageSize = 20;
+        /** @default 100 */
+        this.virtualizeThreshold = 100;
+        /** @default 1 */
+        this.bufferPages = 1;
+        /** @default false */
+        this.hasMore = false;
+        /** @default false */
+        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.
+         * @internal
+         */
+        this.internalSelection = new Set();
+        /**
+         * Whether any row currently has action content — computed by scanning
+         * every item's `slot="action"` content, not author-set.
+         * @internal
+         */
+        this.hasAction = false;
+        /**
+         * The roving-tabindex coordinate currently holding the grid's single tab
+         * stop — row 0 is the header, 1..N are items in DOM order.
+         * @internal
+         */
+        this.focusedRow = 0;
+        /** @internal */
+        this.focusedCol = 0;
+        /**
+         * 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.
+         * @internal
+         */
+        this.logicalItems = [];
+        /**
+         * Page indices currently mounted (their rows are real children of this
+         * host, not replaced by a spacer).
+         * @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.
+         * @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.
+         * @internal
+         */
+        this.pageHeights = [];
+        /**
+         * Running average row height (px), refined every time a page is measured.
+         * @internal
+         */
+        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.
+         * @internal
+         */
+        this.requestedPages = 0;
+        /** @private */
+        this.handleSlotChange = () => {
+            if (this.mutatingSlot) {
+                return;
+            }
+            if (this.virtualize) {
+                this.syncLogicalItems();
+            }
+            this.syncChildren();
+            if (this.virtualize) {
+                this.scheduleAnimationFrame(() => this.syncPages());
+            }
+            if (this.infinite) {
+                this.reobserveSentinel(this.sentinelEl);
+            }
+        };
+        /**
+         * 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.
+         * @private
+         */
+        this.handlePortaledAction = (event) => {
+            const actionEvent = event;
+            this.dispatchEvent(new TableActionEvent(actionEvent.key, actionEvent.optionKey));
+        };
+        /** @private */
+        this.handleEscapeClear = (event) => {
+            if (event.key === "Escape") {
+                this.setSelection(new Set());
+            }
+        };
+        /** @private */
+        this.handleTableScroll = () => {
+            this.scheduleAnimationFrame(() => this.syncPages());
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        if (!this.hasAttribute("role")) {
+            this.setAttribute("role", "grid");
+        }
+    }
+    disconnectedCallback() {
+        this.headerObserver?.disconnect();
+        this.teardownActionBar();
+        this.teardownLoadMoreSentinel();
+        this.resizeObserver?.disconnect();
+        super.disconnectedCallback?.();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        if (this.virtualize) {
+            this.syncLogicalItems();
+        }
+        this.syncChildren();
+        this.ensureVirtualizeObservers();
+        if (this.infinite) {
+            this.setupTableLoadObserver();
+        }
+    }
+    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();
+        }
+        const syncTriggers = [
+            "selectable",
+            "checkboxAlwaysVisible",
+            "actionAlwaysVisible",
+            "stickyHeader",
+            "stickyFirstColumn",
+            "stickyLastColumn",
+            "internalSelection",
+            "actions",
+            "selectedLabel",
+            "selectAllLabel",
+            "deselectAllLabel",
+            "selectAllAriaLabel",
+            "deselectAllAriaLabel",
+            "selectRowAriaLabel",
+            "toolbarAriaLabel",
+            "closeActionBarAriaLabel",
+            "loading",
+            "clickable",
+            "syncing",
+        ];
+        if (syncTriggers.some((prop) => changed.has(prop))) {
+            this.syncChildren();
+        }
+        if (changed.has("virtualize")) {
+            this.ensureVirtualizeObservers();
+        }
+        if (this.virtualize &&
+            (changed.has("pageSize") ||
+                changed.has("virtualizeThreshold") ||
+                changed.has("bufferPages"))) {
+            this.scheduleAnimationFrame(() => this.syncPages());
+        }
+        if (changed.has("infinite") || changed.has("rootMargin")) {
+            if (this.infinite) {
+                this.setupTableLoadObserver();
+            }
+            else {
+                this.loadObserver?.disconnect();
+                this.loadObserver = undefined;
+            }
+        }
+    }
+    /**
+     * The current selection's keys.
+     * @default []
+     */
+    get selectedKeys() {
+        return Array.from(this.internalSelection);
+    }
+    set selectedKeys(keys) {
+        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.
+     * @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();
+        if (this.virtualize) {
+            this.scheduleAnimationFrame(() => this.syncPages());
+        }
+        if (this.infinite) {
+            this.reobserveSentinel(this.sentinelEl);
+        }
+    }
+    /**
+     * 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.
+     * @private
+     */
+    currentItems() {
+        return this.virtualize ? this.logicalItems : this.itemEls;
+    }
+    /**
+     * 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}).
+     * @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.ensureRovingTabindex();
+        this.syncActionBar();
+    }
+    /**
+     * (Re)installs {@link headerObserver} on `header`, only when it's actually
+     * a different element than last time.
+     * @private
+     */
+    watchHeaderColumns(header) {
+        if (this.observedHeader === header) {
+            return;
+        }
+        this.headerObserver?.disconnect();
+        this.observedHeader = header;
+        if (!header) {
+            return;
+        }
+        this.headerObserver = new MutationObserver(() => this.syncChildren());
+        this.headerObserver.observe(header, {
+            childList: true,
+            attributes: true,
+            attributeFilter: ["width"],
+            subtree: true,
+        });
+    }
+    /**
+     * 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.
+     * @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,
+        });
+        this.style.setProperty("--_columns", template);
+    }
+    /** @private */
+    wireHeader(header) {
+        if (!header) {
+            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, colIndex) => this.moveFocus(this.rowIndexOf(header), direction, colIndex);
+        header.requestGridEdge = (edge) => this.moveToGridEdge(edge);
+    }
+    /** @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, colIndex) => this.moveFocus(this.rowIndexOf(item), direction, colIndex);
+            item.requestGridEdge = (edge) => this.moveToGridEdge(edge);
+        });
+    }
+    /**
+     * Every row, header first — the roving-tabindex coordinate space. 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}).
+     * @private
+     */
+    allRows() {
+        const header = this.headerEls[0];
+        if (this.loading) {
+            return header ? [header] : [];
+        }
+        const items = this.currentItems();
+        return header ? [header, ...items] : [...items];
+    }
+    /** @private */
+    rowIndexOf(row) {
+        return this.allRows().indexOf(row);
+    }
+    /**
+     * Ensures exactly one cell, across the whole grid, carries the roving
+     * `tabindex="0"` — called after every structural change, since a freshly
+     * (re)rendered row otherwise starts with every cell at `-1` (see
+     * `table.utils.ts`'s `renderSelectCell`/each row's action-cell template).
+     * @private
+     */
+    ensureRovingTabindex() {
+        const rows = this.allRows();
+        if (!rows.length) {
+            return;
+        }
+        if (this.focusedRow < 0 || this.focusedRow >= rows.length) {
+            this.focusedRow = 0;
+            this.focusedCol = 0;
+        }
+        rows.forEach((row, index) => {
+            if (!row.isConnected) {
+                return;
+            }
+            if (index === this.focusedRow) {
+                const lastCol = Math.max(0, row.cellElements.length - 1);
+                row.setActiveCellIndex(Math.min(this.focusedCol, lastCol));
+            }
+            else {
+                row.setActiveCellIndex(-1);
+            }
+        });
+    }
+    /**
+     * Moves the roving cell to the same column in the row before/after
+     * `rowIndex` — `ArrowUp`/`ArrowDown` delegated up from a row's own
+     * `TableRowMixin`.
+     * @private
+     */
+    moveFocus(rowIndex, direction, colIndex) {
+        this.focusRowAt(rowIndex + direction, colIndex);
+    }
+    /**
+     * Moves the roving cell to the header's first cell (`Ctrl+Home`) or the
+     * last row's last cell (`Ctrl+End`).
+     * @private
+     */
+    moveToGridEdge(edge) {
+        const rows = this.allRows();
+        if (!rows.length) {
+            return;
+        }
+        if (edge === "start") {
+            this.focusRowAt(0, 0);
+            return;
+        }
+        const lastRow = rows[rows.length - 1];
+        this.focusRowAt(rows.length - 1, Math.max(0, lastRow.cellElements.length - 1));
+    }
+    /** @private */
+    focusRowAt(rowIndex, colIndex) {
+        const rows = this.allRows();
+        if (!rows.length) {
+            return;
+        }
+        const clampedRow = Math.max(0, Math.min(rowIndex, rows.length - 1));
+        this.ensureRowMounted(rows, clampedRow);
+        const target = rows[clampedRow];
+        const clampedCol = Math.max(0, Math.min(colIndex, target.cellElements.length - 1));
+        this.focusedRow = clampedRow;
+        this.focusedCol = clampedCol;
+        rows.forEach((row, index) => {
+            if (index !== clampedRow && row.isConnected) {
+                row.setActiveCellIndex(-1);
+            }
+        });
+        target.focusCellAt(clampedCol);
+    }
+    /**
+     * 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.
+     * @private
+     */
+    ensureRowMounted(rows, rowIndex) {
+        if (!this.virtualize) {
+            return;
+        }
+        const row = rows[rowIndex];
+        if (!row || row.isConnected) {
+            return;
+        }
+        const logicalIndex = this.logicalItems.indexOf(row);
+        if (logicalIndex < 0) {
+            return;
+        }
+        const page = Math.floor(logicalIndex / this.pageSize);
+        if (this.mountPage(page)) {
+            this.syncChildren();
+        }
+    }
+    /** @private */
+    toggleRow(key) {
+        const next = new Set(this.internalSelection);
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        this.setSelection(next);
+    }
+    /** @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))));
+    }
+    /**
+     * 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`).
+     * @private
+     */
+    setSelection(next) {
+        this.internalSelection = next;
+        this.dispatchEvent(new TableSelectionChangeEvent(Array.from(next)));
+    }
+    /**
+     * Creates the body-portaled action bar the first time it's needed.
+     * @private
+     */
+    ensureActionBar() {
+        if (!this.actionBarEl) {
+            this.actionBarEl = document.createElement(EunomiaTableActionBarTagName);
+            this.actionBarEl.addEventListener(TableActionEvent.eventName, this.handlePortaledAction);
+            document.body.appendChild(this.actionBarEl);
+        }
+        return this.actionBarEl;
+    }
+    /** @private */
+    teardownActionBar() {
+        if (!this.actionBarEl) {
+            return;
+        }
+        this.actionBarEl.removeEventListener(TableActionEvent.eventName, this.handlePortaledAction);
+        document.removeEventListener("keydown", this.handleEscapeClear);
+        this.actionBarEl.remove();
+        this.actionBarEl = undefined;
+    }
+    /**
+     * Mounts/updates/unmounts the floating action bar based on the current
+     * selection.
+     * @private
+     */
+    syncActionBar() {
+        if (!this.selectable || this.internalSelection.size === 0) {
+            this.teardownActionBar();
+            return;
+        }
+        const wasMounted = !!this.actionBarEl;
+        const bar = this.ensureActionBar();
+        if (!wasMounted && this.clearOnEscape) {
+            document.addEventListener("keydown", this.handleEscapeClear);
+        }
+        bar.selectedCount = this.internalSelection.size;
+        bar.totalCount = this.currentItems().length;
+        bar.actions = this.actions;
+        bar.toolbarAriaLabel = this.toolbarAriaLabel;
+        bar.selectedLabel = this.selectedLabel;
+        bar.selectAllLabel = this.selectAllLabel;
+        bar.deselectAllLabel = this.deselectAllLabel;
+        bar.closeAriaLabel = this.closeActionBarAriaLabel;
+        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.
+     * @private
+     */
+    syncLogicalItems() {
+        const rebuilt = [];
+        for (const child of Array.from(this.children)) {
+            if (!(child instanceof HTMLElement)) {
+                continue;
+            }
+            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);
+            }
+        }
+        this.logicalItems = rebuilt;
+        const totalPages = Math.ceil(rebuilt.length / this.pageSize);
+        const mountedPages = new Set();
+        for (let page = 0; page < totalPages; page++) {
+            if (!this.detachedByPage.has(page)) {
+                mountedPages.add(page);
+            }
+        }
+        this.mountedPages = mountedPages;
+    }
+    /**
+     * 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.
+     * @private
+     */
+    syncPages() {
+        const totalRows = this.logicalItems.length;
+        if (totalRows === 0) {
+            return;
+        }
+        const totalPages = Math.ceil(totalRows / this.pageSize);
+        let changed = false;
+        if (totalRows <= this.virtualizeThreshold) {
+            for (let page = 0; page < totalPages; page++) {
+                changed = this.mountPage(page) || changed;
+            }
+        }
+        else {
+            if (this.clientHeight === 0) {
+                return;
+            }
+            const centerPage = this.estimateCenterPage(totalPages);
+            const start = Math.max(0, centerPage - this.bufferPages);
+            const end = Math.min(totalPages - 1, centerPage + this.bufferPages);
+            for (let page = 0; page < totalPages; page++) {
+                if (page >= start && page <= end) {
+                    changed = this.mountPage(page) || changed;
+                }
+                else {
+                    changed = this.unmountPage(page) || changed;
+                }
+            }
+        }
+        if (changed) {
+            this.syncChildren();
+        }
+    }
+    /**
+     * 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.
+     * @private
+     */
+    estimateCenterPage(totalPages) {
+        const target = this.scrollTop + this.clientHeight / 2;
+        let offset = 0;
+        for (let page = 0; page < totalPages; page++) {
+            const height = this.pageHeights[page] ?? this.estimatePageHeight(page);
+            if (target < offset + height) {
+                return page;
+            }
+            offset += height;
+        }
+        return Math.max(0, totalPages - 1);
+    }
+    /** @private */
+    estimatePageHeight(page) {
+        const totalPages = Math.ceil(this.logicalItems.length / this.pageSize);
+        const rowsInPage = page === totalPages - 1
+            ? this.logicalItems.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.
+     * @private
+     */
+    mountPage(page) {
+        if (this.mountedPages.has(page)) {
+            return false;
+        }
+        const cached = this.detachedByPage.get(page);
+        if (!cached || cached.length === 0) {
+            return false;
+        }
+        const spacer = this.querySelector(`.${TABLE_ROW_SPACER_CLASS}[data-eun-page="${page}"]`);
+        this.mutatingSlot = true;
+        if (spacer) {
+            for (const row of cached) {
+                spacer.before(row);
+            }
+            spacer.remove();
+        }
+        else {
+            for (const row of cached) {
+                this.append(row);
+            }
+        }
+        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).
+     * @private
+     */
+    unmountPage(page) {
+        if (!this.mountedPages.has(page)) {
+            return false;
+        }
+        const start = page * this.pageSize;
+        const end = Math.min(start + this.pageSize, this.logicalItems.length);
+        const rows = this.logicalItems
+            .slice(start, end)
+            .filter((row) => row.isConnected);
+        if (rows.length === 0) {
+            return false;
+        }
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        const height = last.getBoundingClientRect().bottom - first.getBoundingClientRect().top;
+        if (height <= 0) {
+            return false;
+        }
+        this.pageHeights[page] = height;
+        this.avgRowHeight = (this.avgRowHeight + height / rows.length) / 2;
+        const spacer = document.createElement("div");
+        spacer.className = TABLE_ROW_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;
+        first.before(spacer);
+        for (const row of rows) {
+            row.remove();
+        }
+        queueMicrotask(() => {
+            this.mutatingSlot = false;
+        });
+        this.detachedByPage.set(page, rows);
+        this.mountedPages.delete(page);
+        return true;
+    }
+    /**
+     * (Re)creates {@link resizeObserver}/the scroll listener once `virtualize`
+     * is set, and tears them down once it's cleared.
+     * @private
+     */
+    ensureVirtualizeObservers() {
+        if (!this.virtualize) {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = undefined;
+            this.removeEventListener("scroll", this.handleTableScroll);
+            if (this.syncHandle) {
+                cancelAnimationFrame(this.syncHandle);
+                this.syncHandle = undefined;
+            }
+            return;
+        }
+        if (!this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleAnimationFrame(() => this.syncPages()));
+            this.resizeObserver.observe(this);
+            this.addEventListener("scroll", this.handleTableScroll, {
+                passive: true,
+            });
+        }
+        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`.
+     * @private
+     */
+    setupTableLoadObserver() {
+        this.setupLoadObserver(this.sentinelEl, this, this.rootMargin, () => this.maybeLoadMore());
+    }
+    /** @private */
+    maybeLoadMore() {
+        if (this.loadingMore || !this.hasMore) {
+            return;
+        }
+        this.loadingMore = true;
+        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
+            ? 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>
+          `
+            : nothing}
+      ${this.loading ? this.renderSkeletonRows() : nothing}
+    `;
+    }
+};
+/**
+ * Styles to import to the component.
+ *
+ * @static
+ * @internal
+ * @readonly
+ */
+EunomiaTable.styles = tableStyles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "selectable", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: "checkbox-always-visible",
+    })
+], EunomiaTable.prototype, "checkboxAlwaysVisible", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: "action-always-visible",
+    })
+], EunomiaTable.prototype, "actionAlwaysVisible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-header" })
+], EunomiaTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-first-column" })
+], EunomiaTable.prototype, "stickyFirstColumn", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-last-column" })
+], EunomiaTable.prototype, "stickyLastColumn", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "clear-on-escape" })
+], EunomiaTable.prototype, "clearOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: "skeleton-rows", type: Number })
+], EunomiaTable.prototype, "skeletonRows", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "syncing", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "infinite", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTable.prototype, "virtualize", void 0);
+__decorate([
+    property({ attribute: "page-size", type: Number })
+], EunomiaTable.prototype, "pageSize", void 0);
+__decorate([
+    property({ attribute: "virtualize-threshold", type: Number })
+], EunomiaTable.prototype, "virtualizeThreshold", void 0);
+__decorate([
+    property({ attribute: "buffer-pages", type: Number })
+], EunomiaTable.prototype, "bufferPages", void 0);
+__decorate([
+    property({ attribute: "has-more", type: Boolean, reflect: true })
+], EunomiaTable.prototype, "hasMore", void 0);
+__decorate([
+    property({ attribute: "loading-more", type: Boolean, reflect: true })
+], EunomiaTable.prototype, "loadingMore", void 0);
+__decorate([
+    property({ attribute: "root-margin" })
+], EunomiaTable.prototype, "rootMargin", void 0);
+__decorate([
+    property({ attribute: "loading-more-label" })
+], EunomiaTable.prototype, "loadingMoreLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], EunomiaTable.prototype, "actions", void 0);
+__decorate([
+    property({ attribute: "selected-label" })
+], EunomiaTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: "select-all-label" })
+], EunomiaTable.prototype, "selectAllLabel", void 0);
+__decorate([
+    property({ attribute: "deselect-all-label" })
+], EunomiaTable.prototype, "deselectAllLabel", void 0);
+__decorate([
+    property({ attribute: "select-all-aria-label" })
+], EunomiaTable.prototype, "selectAllAriaLabel", void 0);
+__decorate([
+    property({ attribute: "deselect-all-aria-label" })
+], EunomiaTable.prototype, "deselectAllAriaLabel", void 0);
+__decorate([
+    property({ attribute: "select-row-aria-label" })
+], EunomiaTable.prototype, "selectRowAriaLabel", void 0);
+__decorate([
+    property({ attribute: "toolbar-aria-label" })
+], EunomiaTable.prototype, "toolbarAriaLabel", void 0);
+__decorate([
+    property({ attribute: "close-action-bar-aria-label" })
+], EunomiaTable.prototype, "closeActionBarAriaLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], EunomiaTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], EunomiaTable.prototype, "data", void 0);
+__decorate([
+    property({ attribute: false })
+], EunomiaTable.prototype, "rowAction", void 0);
+__decorate([
+    property({ attribute: false })
+], EunomiaTable.prototype, "rowKey", void 0);
+__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);
+EunomiaTable = __decorate([
+    customElement(EunomiaTableTagName)
+], EunomiaTable);
+export { EunomiaTable };
+//# sourceMappingURL=table.js.map