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

package/dist/features/table/table-item/table-item.styles.js

@@ -1,404 +0,0 @@
-import { css } from "lit";
-/**
- * Style for `eun-table-item`, layered on top of the shared
- * {@link tableRowStyles}/{@link tableSharedStyles} (subgrid + z-index
- * constants) — background/hover/selected states, the pinned-bottom row,
- * sticky first/last column, and the hover/keyboard-focus-only reveal for
- * the checkbox glyph and row-end action content.
- *
- * Every `:hover` rule below has a `:focus-within` counterpart applying
- * the exact same tint, so a keyboard user sees the same visual feedback
- * tabbing/arrowing onto a row (or anything inside it, its checkbox or
- * action included) that a mouse user gets from merely pointing at it —
- * `eun-table-item` itself is the grid's one roving-tabindex stop per row
- * (see `TableRowMixin`'s own class doc), so this is normally what the
- * row looks like the moment it's reached at all, not just once something
- * inside it is activated.
- *
- * Every cell in a regular row — sticky or not, including the row's own
- * `:host` background behind its ordinary (non-sticky) cells — always
- * paints a solid, fully-opaque `background-color` at rest and layers the
- * hover/selected tint on top via an inset `box-shadow`
- * (`inset 0 0 0 9999px color`) instead of changing `background-color`
- * itself. That oversized inset shadow fills the box like a second,
- * independent background layer that composites *over* `background-color`
- * regardless of paint order (no pseudo-element or stacking trick needed),
- * which is what keeps a sticky cell opaque — scrolling cell content from
- * other columns is never visible through it, in any state, translucent
- * tint or not (particularly the default `--table-row-selected-background`,
- * a low-alpha `rgba(...)`). A `background-image: linear-gradient(...)`
- * swap was tried first for this same layering, but `background-image` has
- * a *discrete* CSS animation type — engines don't interpolate between two
- * gradients on transition, they just snap straight to the end value, so
- * hover/selected never actually faded despite the declared transition.
- * `box-shadow`'s color, unlike `background-image`, interpolates smoothly.
- *
- * The row's own `:host` background doesn't strictly need that opacity
- * guard (nothing scrolls behind the row itself), but it uses the exact
- * same `background-color` (fixed) + `box-shadow` (animated) split anyway :
- * both go through the same `--table-row-transition-duration` `ease`
- * transition, so the row and its sticky cells reach the same intermediate
- * color at the same instant rather than one lagging the other.
- *
- * Every hover/reveal *background* transition on the row — the row's own,
- * `#select-cell`'s, and the sticky-column ones — shares one duration,
- * `--table-row-transition-duration` (200ms by default), so nothing on the
- * row drifts out of sync with anything else. The checkbox and the action
- * slot are the exception : both appear/disappear with no transition at
- * all, snapping to their final `opacity` on the same frame as the
- * hover/selection state change, rather than fading — a fade reads as the
- * control lagging behind or lingering after the pointer leaves.
- *
- * The checkbox also overrides its own `--checkbox-background` (white by
- * default) and forces `--checkbox-border-color: transparent` rather than
- * inheriting its component defaults — unchecked, those defaults are a
- * light grey fill on a barely-darker grey border, which nearly disappears
- * against this row's own hover tint (`--eun-content-hover`, itself a light
- * grey) since the two are close enough in luminance to fail contrast
- * against each other. Dropping the border and relying on the background
- * fill alone for contrast keeps the glyph a plain filled square rather
- * than adding a second, separately-contrasted outline.
- *
- * A `sticky-bottom` row (a pinned summary/totals row, typically) never
- * reacts to hover — no background/reveal changes at all, since unlike an
- * ordinary row it isn't one where a hover affordance makes sense — and its
- * own sticky columns keep their pre-existing (untouched) selected-tint
- * handling rather than the opaque-layered treatment above, since it's
- * already rare for a totals row to be individually selected.
- *
- * A `selected` row never shows the hover tint on top of its own selected
- * one, on any cell — every hover rule below also requires `:not([selected])`
- * so it simply never matches a selected row, rather than relying on
- * cascade order/specificity against the `[selected]` rule to decide which
- * tint wins.
- *
- * Custom css variables:
- * [--table-row-background] - Set a custom background color
- * [--table-row-hover-background] - Set a custom background color on hover
- * [--table-row-selected-background] - Set a custom background color while selected
- * [--table-sticky-row-background] - Set a custom background color for a `sticky-bottom` pinned row, at rest ; falls back to `--table-row-background`. A `sticky-bottom` row sits above a sticky column in the documented stacking order (see below), so this also wins at the corner where the two meet — its checkbox cell and any sticky first/last column cell read this first, falling back to `--table-sticky-column-background` (then the same base) only when this one is unset
- * [--table-sticky-column-background] - Set a custom background color for a sticky first/last data column's cells (and the always-sticky checkbox column, once `selectable`), at rest ; falls back to `--table-row-background`. Overridden by `--table-sticky-row-background` at the corner where a sticky column meets a `sticky-bottom` row, matching that corner's own higher stacking position
- * [--table-border-color] - Set a custom border color
- * [--table-row-transition-duration] - Set a custom duration for the row's hover/selected background transitions (default 200ms)
- * [--table-checkbox-background] - Set a custom background color for the row's (unchecked) checkbox ; same variable `eun-table-header`'s own select-all checkbox reads
- * [--table-checkbox-hover] - Set a custom background color for the row's (unchecked) checkbox while hovered ; same variable `eun-table-header`'s own select-all checkbox reads
- * [--table-sticky-border-color] - Set a custom border color for this row's own top edge while `sticky-bottom` (falls back to `--table-border-color`, so unset it looks the same as any other row), and for the trailing edge of the always-sticky checkbox cell and any sticky first/last column cell (transparent, i.e. no border there, unless this is set) ; same variable `eun-table-header`'s own sticky elements read. A regular (non-sticky) `eun-table-cell`'s own vertical divider is `--table-column-border-color` instead, read directly on that element — see its own class doc
- * [--table-action-color] - Set a custom text/icon color for a row-end action (`slot="action"`) — bridges into a slotted `eun-button`'s or `eun-dropdown-button`'s own `--button-text`
- * [--table-sync-overlay-color] - Set a custom highlight color for the shimmer sweep shown while `syncing`
- * [--table-sync-duration] - Set a custom duration for the `syncing` shimmer sweep, as a CSS time (default `1.6s`)
- */
-const base = css `
-  :host {
-    --_table-row-transition-duration: var(
-      --table-row-transition-duration,
-      200ms
-    );
-    position: relative;
-    background-color: var(
-      --table-row-background,
-      var(--eun-surface-color, #ffffff)
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-border-width-s, 1px) solid
-      var(--table-border-color, var(--eun-border-color, #dee0e7));
-    transition:
-      background-color var(--_table-row-transition-duration) ease,
-      box-shadow var(--_table-row-transition-duration) ease;
-  }
-
-  :host(:last-child) {
-    border-bottom: none;
-  }
-
-  :host(:hover:not([sticky-bottom]):not([selected])),
-  :host(:focus-within:not([sticky-bottom]):not([selected])) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([selected]) {
-    box-shadow: inset 0 0 0 9999px
-      var(
-        --table-row-selected-background,
-        var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-      );
-  }
-
-  :host([sticky-bottom]) {
-    position: sticky;
-    bottom: 0;
-    z-index: var(--_table-z-sticky-row, 3);
-    border-top: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-border-color, var(--eun-border-color, #dee0e7))
-      );
-  }
-
-  :host([sticky-bottom]:not([selected])) {
-    background-color: var(
-      --table-sticky-row-background,
-      var(--table-row-background, var(--eun-surface-color, #ffffff))
-    );
-  }
-
-  :host([sticky-bottom]) #select-cell {
-    background-color: var(
-      --table-sticky-row-background,
-      var(
-        --table-sticky-column-background,
-        var(--table-row-background, var(--eun-surface-color, #ffffff))
-      )
-    );
-  }
-
-  #select-cell {
-    position: sticky;
-    left: 0;
-    z-index: var(--_table-z-checkbox, 1);
-    background-color: var(
-      --table-sticky-column-background,
-      var(--table-row-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    padding-inline-start: var(--eun-space-s);
-    border-inline-end: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-    transition:
-      background-color var(--_table-row-transition-duration) ease,
-      box-shadow var(--_table-row-transition-duration) ease;
-  }
-
-  :host(:hover:not([sticky-bottom]):not([selected])) #select-cell,
-  :host(:focus-within:not([sticky-bottom]):not([selected])) #select-cell {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([selected]) #select-cell {
-    box-shadow: inset 0 0 0 9999px
-      var(
-        --table-row-selected-background,
-        var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-      );
-  }
-
-  :host([sticky-first-column]) ::slotted(:first-of-type) {
-    background-color: var(
-      --table-sticky-column-background,
-      var(--table-row-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition:
-      background-color var(--_table-row-transition-duration) ease,
-      box-shadow var(--_table-row-transition-duration) ease;
-  }
-
-  :host([sticky-first-column][sticky-bottom]) ::slotted(:first-of-type) {
-    background-color: var(
-      --table-sticky-row-background,
-      var(
-        --table-sticky-column-background,
-        var(--table-row-background, var(--eun-surface-color, #ffffff))
-      )
-    );
-  }
-
-  :host([sticky-first-column]:hover:not([sticky-bottom]):not([selected]))
-    ::slotted(:first-of-type),
-  :host([sticky-first-column]:focus-within:not([sticky-bottom]):not([selected]))
-    ::slotted(:first-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([sticky-first-column][selected]:not([sticky-bottom]))
-    ::slotted(:first-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(
-        --table-row-selected-background,
-        var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-      );
-  }
-
-  :host([sticky-first-column]) ::slotted(:first-of-type) {
-    position: sticky;
-    left: var(--_table-select-offset, 0px);
-    z-index: var(--_table-z-sticky-col, 2);
-    border-inline-end: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-  }
-
-  :host([sticky-last-column]) #action-cell,
-  :host([sticky-last-column]) ::slotted(:last-of-type) {
-    background-color: var(
-      --table-sticky-column-background,
-      var(--table-row-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition:
-      background-color var(--_table-row-transition-duration) ease,
-      box-shadow var(--_table-row-transition-duration) ease;
-  }
-
-  :host([sticky-last-column][sticky-bottom]) #action-cell,
-  :host([sticky-last-column][sticky-bottom]) ::slotted(:last-of-type) {
-    background-color: var(
-      --table-sticky-row-background,
-      var(
-        --table-sticky-column-background,
-        var(--table-row-background, var(--eun-surface-color, #ffffff))
-      )
-    );
-  }
-
-  :host([sticky-last-column]:hover:not([sticky-bottom]):not([selected]))
-    #action-cell,
-  :host([sticky-last-column]:hover:not([sticky-bottom]):not([selected]))
-    ::slotted(:last-of-type),
-  :host([sticky-last-column]:focus-within:not([sticky-bottom]):not([selected]))
-    #action-cell,
-  :host([sticky-last-column]:focus-within:not([sticky-bottom]):not([selected]))
-    ::slotted(:last-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([sticky-last-column][selected]:not([sticky-bottom])) #action-cell,
-  :host([sticky-last-column][selected]:not([sticky-bottom]))
-    ::slotted(:last-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(
-        --table-row-selected-background,
-        var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-      );
-  }
-
-  :host([sticky-first-column][selected][sticky-bottom])
-    ::slotted(:first-of-type) {
-    background-color: var(
-      --table-row-selected-background,
-      var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-    );
-  }
-
-  :host([sticky-last-column][selected][sticky-bottom]) #action-cell,
-  :host([sticky-last-column][selected][sticky-bottom])
-    ::slotted(:last-of-type) {
-    background-color: var(
-      --table-row-selected-background,
-      var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
-    );
-  }
-
-  :host([sticky-last-column]) #action-cell {
-    position: sticky;
-    right: 0;
-    z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-  }
-
-  :host([sticky-last-column]) ::slotted(:last-of-type) {
-    position: sticky;
-    right: var(--_table-action-offset, 0px);
-    z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-  }
-
-  #select-cell eun-checkbox {
-    opacity: 0;
-    --checkbox-border-color: transparent;
-    --checkbox-background: var(
-      --table-checkbox-background,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --checkbox-background-hover: var(
-      --table-checkbox-hover,
-      var(--eun-color-grey-400, #c1c9d6)
-    );
-  }
-
-  :host(:hover:not([sticky-bottom])) #select-cell eun-checkbox,
-  :host([selected]) #select-cell eun-checkbox,
-  :host([selection-active]) #select-cell eun-checkbox,
-  :host([checkbox-always-visible]) #select-cell eun-checkbox {
-    opacity: 1;
-  }
-
-  :host(:focus-within) #select-cell eun-checkbox {
-    opacity: 1;
-  }
-
-  ::slotted([slot="action"]) {
-    transition: none;
-    opacity: 0;
-    --button-text: var(--table-action-color);
-  }
-
-  :host(:hover:not([sticky-bottom])) ::slotted([slot="action"]),
-  :host([action-always-visible]) ::slotted([slot="action"]) {
-    opacity: 1;
-  }
-
-  :host(:focus-within) ::slotted([slot="action"]) {
-    opacity: 1;
-  }
-
-  ::slotted([slot="action"][open]) {
-    opacity: 1;
-  }
-
-  :host([selection-active]) ::slotted([slot="action"]) {
-    opacity: 0 !important;
-  }
-
-  :host([clickable]:not([has-action])) {
-    cursor: pointer;
-  }
-
-  :host([syncing])::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-image: linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--table-sync-overlay-color, var(--eun-surface-color, #ffffff)) 50%,
-      transparent 100%
-    );
-    background-size: 200% 100%;
-    animation: eun-table-row-sync-shimmer var(--table-sync-duration, 1.6s)
-      ease-in-out infinite;
-  }
-
-  @keyframes eun-table-row-sync-shimmer {
-    0% {
-      background-position: -200% 0;
-    }
-    100% {
-      background-position: 200% 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host([syncing])::after {
-      animation: none;
-    }
-  }
-`;
-export const tableItemStyles = base;

package/dist/features/table/table-managed/table-managed.d.ts

@@ -1,19 +0,0 @@
-import { EunomiaTableHeader } from "../table-header/table-header.js";
-import { EunomiaTableItem } from "../table-item/table-item.js";
-import { EunomiaTableColumnDef, EunomiaTableRowActionDef } from "../table/table.types.js";
-/**
- * Builds a `eun-table-header` (with one `eun-table-column` per entry) from
- * a `columns` definition — the data-driven equivalent of hand-authoring
- * that same markup. Used only by `eun-table`'s own `columns`/`data` mode ;
- * the resulting elements are indistinguishable from ones a consumer wrote
- * directly, since it's the same tags/CSS/behavior either way.
- * @internal
- */
-export declare function buildManagedHeader<T extends object>(columns: EunomiaTableColumnDef<T>[]): EunomiaTableHeader;
-/**
- * Builds a `eun-table-item` (one `eun-table-cell` per column, plus an
- * optional `slot="action"` element) for a single row of `data` — see
- * {@link buildManagedHeader}'s own doc.
- * @internal
- */
-export declare function buildManagedItem<T extends object>(row: T, index: number, columns: EunomiaTableColumnDef<T>[], rowKeyFn: ((row: T, index: number) => string) | undefined, rowAction: EunomiaTableRowActionDef<T> | undefined): EunomiaTableItem;

package/dist/features/table/table-managed/table-managed.js

@@ -1,128 +0,0 @@
-import { render as renderToContainer } from "lit";
-import { EunomiaTableHeaderTagName, } from "../table-header/table-header.js";
-import { EunomiaTableColumnTagName, } from "../table-column/table-column.js";
-import { EunomiaTableItemTagName, } from "../table-item/table-item.js";
-import { EunomiaTableCellTagName, } from "../table-cell/table-cell.js";
-import { EunomiaButtonTagName, } from "../../../components/action/button/button.js";
-import { EunomiaDropdownButtonTagName, } from "../../../components/action/dropdown-button/dropdown-button.js";
-import { EunomiaIconTagName, } from "../../../components/content/icon/icon.js";
-import { resolveRowKey } from "../table/table.utils.js";
-/**
- * Builds a `eun-table-header` (with one `eun-table-column` per entry) from
- * a `columns` definition — the data-driven equivalent of hand-authoring
- * that same markup. Used only by `eun-table`'s own `columns`/`data` mode ;
- * the resulting elements are indistinguishable from ones a consumer wrote
- * directly, since it's the same tags/CSS/behavior either way.
- * @internal
- */
-export function buildManagedHeader(columns) {
-    const header = document.createElement(EunomiaTableHeaderTagName);
-    for (const column of columns) {
-        const columnEl = document.createElement(EunomiaTableColumnTagName);
-        columnEl.textContent = column.label;
-        if (column.width) {
-            columnEl.width = column.width;
-        }
-        if (column.sort) {
-            columnEl.sort = column.sort;
-        }
-        header.appendChild(columnEl);
-    }
-    return header;
-}
-/**
- * Builds a `eun-table-item` (one `eun-table-cell` per column, plus an
- * optional `slot="action"` element) for a single row of `data` — see
- * {@link buildManagedHeader}'s own doc.
- * @internal
- */
-export function buildManagedItem(row, index, columns, rowKeyFn, rowAction) {
-    const item = document.createElement(EunomiaTableItemTagName);
-    item.rowKey = rowKeyFn
-        ? rowKeyFn(row, index)
-        : resolveRowKey(undefined, index);
-    for (const column of columns) {
-        item.appendChild(buildManagedCell(column, row, index));
-    }
-    if (rowAction) {
-        item.appendChild(buildRowActionElement(rowAction, row, index));
-    }
-    return item;
-}
-/** @internal */
-function buildManagedCell(column, row, index) {
-    const cell = document.createElement(EunomiaTableCellTagName);
-    if (column.align) {
-        cell.style.setProperty("--table-cell-align", alignToJustify(column.align));
-    }
-    const value = row[column.key];
-    renderToContainer(column.render ? column.render(value, row, index) : formatCellValue(value), cell);
-    return cell;
-}
-/** @internal */
-function alignToJustify(align) {
-    switch (align) {
-        case "center":
-            return "center";
-        case "right":
-            return "flex-end";
-        default:
-            return "flex-start";
-    }
-}
-/** @internal */
-function formatCellValue(value) {
-    return value === null || value === undefined ? "" : String(value);
-}
-/**
- * Builds the `slot="action"` element for a single row from a `rowAction`
- * definition — a `eun-dropdown-button` when `type: "dropdown"`, otherwise a
- * plain icon/label `eun-button` ; both wired to call back into `rowAction`'s
- * own `onClick`/`onSelect` with `row`/`index`.
- * @internal
- */
-function buildRowActionElement(action, row, index) {
-    if (action.type === "dropdown") {
-        const el = document.createElement(EunomiaDropdownButtonTagName);
-        el.setAttribute("slot", "action");
-        el.size = "xs";
-        el.appearance = "ghost";
-        if (action.icon) {
-            el.icon = action.icon;
-        }
-        else if (action.label) {
-            el.label = action.label;
-        }
-        el.ariaLabel = action.label ?? "Row actions";
-        el.options = action.options(row);
-        el.disabledKeys = action.disabledKeys?.(row) ?? [];
-        el.disabled = action.disabled?.(row) ?? false;
-        el.addEventListener("eunselect", (event) => {
-            action.onSelect(event.key, row, index);
-        });
-        return el;
-    }
-    const el = document.createElement(EunomiaButtonTagName);
-    el.setAttribute("slot", "action");
-    el.size = "xs";
-    if (action.color) {
-        el.color = action.color;
-        el.appearance = "default";
-    }
-    else {
-        el.appearance = "ghost";
-    }
-    el.ariaLabel = action.label;
-    el.disabled = action.disabled?.(row) ?? false;
-    if (action.icon) {
-        const icon = document.createElement(EunomiaIconTagName);
-        icon.name = action.icon;
-        icon.size = "16";
-        el.appendChild(icon);
-    }
-    else {
-        el.textContent = action.label;
-    }
-    el.addEventListener("click", () => action.onClick(row, index));
-    return el;
-}

package/dist/features/table/table-skeleton-row/table-skeleton-row.d.ts

@@ -1,46 +0,0 @@
-import { LitElement, TemplateResult } from "lit";
-import "../../../components/loader/skeleton/skeleton.js";
-/**
- * Tag name of the table-skeleton-row component.
- */
-export declare const EunomiaTableSkeletonRowTagName = "eun-table-skeleton-row";
-/**
- * A single shimmering placeholder row rendered by a table in place of its
- * real table items while its own loading is set: a grid row filled with
- * skeleton blocks, one per data column, plus a select or action
- * placeholder block when selectable or hasAction, so the total cell count
- * always matches the real grid's own track list. It's purely decorative
- * and entirely owned by the table, not meant to be authored directly.
- *
- * @prop {boolean} [selectable=false] - Renders a small checkbox-shaped placeholder in the select column
- * @prop {boolean} [hasAction=false] - Renders a small button-shaped placeholder in the action column
- * @attr {boolean} [has-action=false] - Renders a small button-shaped placeholder in the action column
- * @prop {number} [columnCount=0] - The number of data-column placeholder cells to render
- * @attr {number} [column-count=0] - The number of data-column placeholder cells to render
- * @cssprop [--table-skeleton-stagger] - Sets the delay between each row's entrance animation, as a CSS time, such as 60ms
- * @cssprop [--table-skeleton-duration] - Sets the duration of each row's own entrance animation, as a CSS time, such as 320ms
- * @element eun-table-skeleton-row
- */
-export declare class EunomiaTableSkeletonRow extends LitElement {
-    /**
-     * Styles to import to the component.
-     *
-     * @static
-     * @internal
-     * @readonly
-     */
-    static readonly styles: import("lit").CSSResult;
-    /** @default false */
-    selectable: boolean;
-    /** @default false */
-    hasAction: boolean;
-    /** @default 0 */
-    columnCount: number;
-    connectedCallback(): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [EunomiaTableSkeletonRowTagName]: EunomiaTableSkeletonRow;
-    }
-}