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

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

@@ -1,89 +0,0 @@
-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 } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import { tableColumnStyles } from "./table-column.styles.js";
-/**
- * Tag name of the table-column component.
- */
-export const EunomiaTableColumnTagName = "eun-table-column";
-/**
- * A single header cell, slotted into a table header, one per column, in
- * order. Width feeds directly into the table's shared grid column track
- * list. Label content is entirely free-form, through the default slot.
- *
- * It has no sort behavior of its own: sort is a presentation and
- * accessibility hook only. Wire your own click handler and re-order or
- * re-render your table items to actually sort.
- *
- * Never a `Tab` stop of its own — see `eun-table-cell`'s own class doc
- * for why this deliberately carries no `tabindex` at all, not even
- * `-1` : plain, unmanaged content, so native sequential focus reaches
- * whatever's slotted inside it (a sort button, say) the same way it
- * would anywhere else.
- *
- * @slot [default] - The column header's label content
- * @csspart column - The column's own padded content box. Exposed for effects the column's CSS custom properties don't cover
- * @prop {string} [width] - This column's track size, fed verbatim into the table's shared grid template, such as 120px, 20%, or 1fr. A flexible track is used when unset
- * @prop {'ascending' | 'descending' | 'none'} [sort] - Reflects the sort state to assistive technology. Presentation only
- * @cssprop [--table-column-color] - Sets the text color
- * @cssprop [--table-column-font-weight] - Sets the font weight
- * @cssprop [--table-column-border-color] - Sets the color of a vertical divider on this header cell's trailing edge, between it and the next column. Transparent, with no divider, by default
- * @element eun-table-column
- */
-let EunomiaTableColumn = class EunomiaTableColumn extends LitElement {
-    connectedCallback() {
-        super.connectedCallback?.();
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", "columnheader");
-        }
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has("sort")) {
-            if (this.sort) {
-                this.setAttribute("aria-sort", this.sort);
-            }
-            else {
-                this.removeAttribute("aria-sort");
-            }
-        }
-    }
-    /**
-     * Renders the column's content wrapped in an internal `#column` element
-     * that carries the padding and typography instead of `:host` itself.
-     * `:host` stays the grid item that `eun-table-header`'s own sticky-column
-     * rules style directly from outside (`::slotted()` reaching
-     * `eun-table-column`'s own box for `background`/`position: sticky` —
-     * see `table-header.styles.ts`), so it keeps everything those rules
-     * depend on ; only padding/typography move, since that's what a
-     * consumer's own global CSS (a reset like `* { margin: 0; padding: 0; }`)
-     * can otherwise reach and silently override on `:host` from outside the
-     * shadow root.
-     */
-    render() {
-        return html `<div id="column" part="column"><slot></slot></div>`;
-    }
-};
-/**
- * Styles to import to the component.
- *
- * @static
- * @internal
- * @readonly
- */
-EunomiaTableColumn.styles = tableColumnStyles;
-__decorate([
-    property({ reflect: true })
-], EunomiaTableColumn.prototype, "width", void 0);
-__decorate([
-    property({ reflect: true })
-], EunomiaTableColumn.prototype, "sort", void 0);
-EunomiaTableColumn = __decorate([
-    customElement(EunomiaTableColumnTagName)
-], EunomiaTableColumn);
-export { EunomiaTableColumn };

package/dist/features/table/table-column/table-column.styles.d.ts

@@ -1 +0,0 @@
-export declare const tableColumnStyles: import("lit").CSSResult;

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

@@ -1,51 +0,0 @@
-import { css } from "lit";
-/**
- * Style for `eun-table-column` — a header cell's own padding/typography.
- * Column *sizing* is entirely `eun-table`'s concern (the shared
- * `grid-template-columns` track list) ; this component has no layout
- * opinion of its own beyond filling whatever track it's placed in.
- *
- * Custom css variables:
- * [--table-column-color] - Set a custom text color
- * [--table-column-font-weight] - Set a custom font weight
- * [--table-column-border-color] - Set a color for a vertical divider on this header cell's trailing edge, between it and the next column ; transparent (no divider) by default, same variable `eun-table-cell`'s own data cells read
- *
- * `:host` stays the grid item `eun-table-header` styles directly from
- * outside for sticky columns (`::slotted()` setting `background`/
- * `position: sticky`/`border-inline-*` on this element's own box — see
- * `table-header.styles.ts`), so it keeps its box-model/border basics ;
- * `#column` alone carries the padding and typography, which a consumer's
- * own global CSS (`* { padding: 0; }`) could otherwise reach and override
- * on `:host` from outside the shadow root.
- */
-const base = css `
-  :host {
-    display: flex;
-    box-sizing: border-box;
-    min-width: 0;
-    border-inline-end: var(--eun-border-width-s, 1px) solid
-      var(--table-column-border-color, transparent);
-  }
-
-  :host(:focus-visible) {
-    outline: 2px solid var(--eun-color-primary-500, #3d6fff);
-    outline-offset: -2px;
-  }
-
-  #column {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    font-size: var(--eun-font-size-s, 13px);
-    font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
-    color: var(--table-column-color, var(--eun-text-secondary, #484e61));
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-export const tableColumnStyles = base;

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

@@ -1,102 +0,0 @@
-import { LitElement, TemplateResult } from "lit";
-/**
- * Tag name of the table-header component.
- */
-export declare const EunomiaTableHeaderTagName = "eun-table-header";
-declare const EunomiaTableHeader_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/table-row.mixin.js").TableRowMixinInterface> & typeof LitElement;
-/**
- * The header row of a table, row zero of its accessible grid. Slot in
- * table column elements, one per column, in the same order the table
- * item's table cells use.
- *
- * The select-all checkbox and the sticky and selection state below are
- * entirely managed by the owning table. Nothing here is meant to be set
- * by hand.
- *
- * @slot [default] - Table column elements, one per column
- * @cssprop [--table-sticky-column-background] - Sets the background color of a sticky first or last column's header cell, and the always-sticky checkbox header cell once the owning table is selectable. Falls back to table-header-background
- * @cssprop [--table-sticky-border-color] - Sets the border color of this header's own bottom edge while sticky, falling back to table-border-color, and of the inner edge of a sticky first or last column's header cell, transparent by default
- * @cssprop [--table-checkbox-background] - Sets the background color of the unchecked select-all checkbox, once the owning table is selectable
- * @cssprop [--table-checkbox-hover] - Sets the background color of the unchecked select-all checkbox while hovered, once the owning table is selectable
- * @element eun-table-header
- */
-export declare class EunomiaTableHeader extends EunomiaTableHeader_base {
-    /**
-     * Styles to import to the component.
-     *
-     * @static
-     * @internal
-     * @readonly
-     */
-    static readonly styles: import("lit").CSSResult[];
-    /**
-     * Whether the owning table is selectable — renders the select-all cell.
-     * @internal
-     */
-    selectable: boolean;
-    /**
-     * Whether any row has trailing action content — renders a spacer cell so
-     * the header stays aligned with every item's own action column.
-     * @internal
-     */
-    hasAction: boolean;
-    /**
-     * Whether the header should stick to the top of its scroll container.
-     * Once sticky, this header never renders the select-all checkbox — even
-     * while the owning table is `selectable` — since it stays permanently
-     * visible rather than only appearing on hover/focus like an item's own
-     * checkbox, which would otherwise leave a stray, always-on control
-     * floating above the scrolling content ; an empty `#select-spacer` keeps
-     * column alignment in its place instead. It never renders hover styling
-     * either — this component simply has none of its own.
-     * @internal
-     */
-    sticky: boolean;
-    /**
-     * Whether the first data column should stick to the start edge.
-     * @internal
-     */
-    stickyFirstColumn: boolean;
-    /**
-     * Whether the last data column should stick to the end edge.
-     * @internal
-     */
-    stickyLastColumn: boolean;
-    /**
-     * The number of currently selected rows, for the select-all checkbox's
-     * tri-state.
-     * @internal
-     */
-    selectedCount: number;
-    /**
-     * The total number of rows, for the select-all checkbox's tri-state.
-     * @internal
-     */
-    totalCount: number;
-    /**
-     * Accessible label for the select-all checkbox while not every row is
-     * selected.
-     * @default Select all rows
-     */
-    selectAllAriaLabel: string;
-    /**
-     * Accessible label for the select-all checkbox once every row is
-     * selected.
-     * @default Deselect all rows
-     */
-    deselectAllAriaLabel: string;
-    /**
-     * Called when the select-all checkbox is toggled. Set by the owning
-     * `eun-table`.
-     * @internal
-     */
-    onSelectAllToggle?: () => void;
-    connectedCallback(): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [EunomiaTableHeaderTagName]: EunomiaTableHeader;
-    }
-}
-export {};

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

@@ -1,165 +0,0 @@
-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 } from "lit/decorators.js";
-import { html, LitElement, nothing } from "lit";
-import { TableRowMixin } from "../../../mixins/table-row.mixin.js";
-import { renderSelectCell } from "../table/table.utils.js";
-import { tableRowStyles } from "../shared-styles/table-row.styles.js";
-import { tableSharedStyles } from "../shared-styles/table-shared.styles.js";
-import { tableHeaderStyles } from "./table-header.styles.js";
-/**
- * Tag name of the table-header component.
- */
-export const EunomiaTableHeaderTagName = "eun-table-header";
-/**
- * The header row of a table, row zero of its accessible grid. Slot in
- * table column elements, one per column, in the same order the table
- * item's table cells use.
- *
- * The select-all checkbox and the sticky and selection state below are
- * entirely managed by the owning table. Nothing here is meant to be set
- * by hand.
- *
- * @slot [default] - Table column elements, one per column
- * @cssprop [--table-sticky-column-background] - Sets the background color of a sticky first or last column's header cell, and the always-sticky checkbox header cell once the owning table is selectable. Falls back to table-header-background
- * @cssprop [--table-sticky-border-color] - Sets the border color of this header's own bottom edge while sticky, falling back to table-border-color, and of the inner edge of a sticky first or last column's header cell, transparent by default
- * @cssprop [--table-checkbox-background] - Sets the background color of the unchecked select-all checkbox, once the owning table is selectable
- * @cssprop [--table-checkbox-hover] - Sets the background color of the unchecked select-all checkbox while hovered, once the owning table is selectable
- * @element eun-table-header
- */
-let EunomiaTableHeader = class EunomiaTableHeader extends TableRowMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether the owning table is selectable — renders the select-all cell.
-         * @internal
-         */
-        this.selectable = false;
-        /**
-         * Whether any row has trailing action content — renders a spacer cell so
-         * the header stays aligned with every item's own action column.
-         * @internal
-         */
-        this.hasAction = false;
-        /**
-         * Whether the header should stick to the top of its scroll container.
-         * Once sticky, this header never renders the select-all checkbox — even
-         * while the owning table is `selectable` — since it stays permanently
-         * visible rather than only appearing on hover/focus like an item's own
-         * checkbox, which would otherwise leave a stray, always-on control
-         * floating above the scrolling content ; an empty `#select-spacer` keeps
-         * column alignment in its place instead. It never renders hover styling
-         * either — this component simply has none of its own.
-         * @internal
-         */
-        this.sticky = false;
-        /**
-         * Whether the first data column should stick to the start edge.
-         * @internal
-         */
-        this.stickyFirstColumn = false;
-        /**
-         * Whether the last data column should stick to the end edge.
-         * @internal
-         */
-        this.stickyLastColumn = false;
-        /**
-         * The number of currently selected rows, for the select-all checkbox's
-         * tri-state.
-         * @internal
-         */
-        this.selectedCount = 0;
-        /**
-         * The total number of rows, for the select-all checkbox's tri-state.
-         * @internal
-         */
-        this.totalCount = 0;
-        /**
-         * Accessible label for the select-all checkbox while not every row is
-         * selected.
-         * @default Select all rows
-         */
-        this.selectAllAriaLabel = "Select all rows";
-        /**
-         * Accessible label for the select-all checkbox once every row is
-         * selected.
-         * @default Deselect all rows
-         */
-        this.deselectAllAriaLabel = "Deselect all rows";
-    }
-    connectedCallback() {
-        super.connectedCallback?.();
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", "row");
-        }
-    }
-    render() {
-        const allSelected = this.totalCount > 0 && this.selectedCount === this.totalCount;
-        const selectCell = this.sticky
-            ? html `<div id="select-spacer" aria-hidden="true"></div>`
-            : renderSelectCell({
-                role: "columnheader",
-                checked: allSelected,
-                indeterminate: this.selectedCount > 0 && !allSelected,
-                ariaLabel: allSelected
-                    ? this.deselectAllAriaLabel
-                    : this.selectAllAriaLabel,
-                disabled: this.totalCount === 0,
-                onChange: () => this.onSelectAllToggle?.(),
-            });
-        return html `
-      ${this.selectable ? selectCell : nothing}
-      <slot></slot>
-      ${this.hasAction
-            ? html `<div id="action-spacer" aria-hidden="true"></div>`
-            : nothing}
-    `;
-    }
-};
-/**
- * Styles to import to the component.
- *
- * @static
- * @internal
- * @readonly
- */
-EunomiaTableHeader.styles = [
-    tableRowStyles,
-    tableSharedStyles,
-    tableHeaderStyles,
-];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableHeader.prototype, "selectable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "has-action" })
-], EunomiaTableHeader.prototype, "hasAction", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableHeader.prototype, "sticky", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "sticky-first-column" })
-], EunomiaTableHeader.prototype, "stickyFirstColumn", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "sticky-last-column" })
-], EunomiaTableHeader.prototype, "stickyLastColumn", void 0);
-__decorate([
-    property({ attribute: false })
-], EunomiaTableHeader.prototype, "selectedCount", void 0);
-__decorate([
-    property({ attribute: false })
-], EunomiaTableHeader.prototype, "totalCount", void 0);
-__decorate([
-    property({ attribute: "select-all-aria-label" })
-], EunomiaTableHeader.prototype, "selectAllAriaLabel", void 0);
-__decorate([
-    property({ attribute: "deselect-all-aria-label" })
-], EunomiaTableHeader.prototype, "deselectAllAriaLabel", void 0);
-EunomiaTableHeader = __decorate([
-    customElement(EunomiaTableHeaderTagName)
-], EunomiaTableHeader);
-export { EunomiaTableHeader };

package/dist/features/table/table-header/table-header.styles.d.ts

@@ -1 +0,0 @@
-export declare const tableHeaderStyles: import("lit").CSSResult;

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

@@ -1,147 +0,0 @@
-import { css } from "lit";
-/**
- * Style for `eun-table-header`, layered on top of the shared
- * {@link tableRowStyles}/{@link tableSharedStyles} (subgrid + z-index
- * constants) — its own background/border, sticky-header positioning, and
- * the sticky-column corner (when a sticky first/last column meets the
- * sticky header, it must win over both).
- *
- * Custom css variables:
- * [--table-header-background] - Set a custom background color
- * [--table-border-color] - Set a custom border color
- * [--table-sticky-column-background] - Set a custom background color for a sticky first/last column's header cell (and the always-sticky checkbox header cell, once the owning table is `selectable`) ; falls back to `--table-header-background`, same variable `eun-table-item`'s own sticky column cells read
- * [--table-sticky-border-color] - Set a custom border color for this header's own bottom edge while `sticky` (falls back to `--table-border-color`, so unset it looks the same as a non-sticky header), and for the inner edge of a sticky first/last column's header cell (transparent, i.e. no border there, unless this is set) ; same variable `eun-table-item`'s own sticky elements read
- * [--table-checkbox-background] - Set a custom background color for the select-all checkbox (unchecked), once the owning table is `selectable` ; same variable every `eun-table-item`'s own row checkbox reads
- * [--table-checkbox-hover] - Set a custom background color for the select-all checkbox (unchecked) while hovered, once the owning table is `selectable` ; same variable every `eun-table-item`'s own row checkbox reads
- * [--table-row-hover-background] - Set a custom background tint shown while any part of the header has keyboard focus ; same variable every `eun-table-item`'s own hover/focus tint reads
- * [--table-row-transition-duration] - Set a custom duration for that tint's transition (default 200ms) ; same variable every `eun-table-item`'s own hover/focus transitions read
- */
-const base = css `
-  :host {
-    position: relative;
-    background: var(
-      --table-header-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));
-    font-weight: var(--eun-font-weight-m, 500);
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host(:focus-within) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([sticky]) {
-    position: sticky;
-    top: 0;
-    z-index: var(--_table-z-header, 4);
-    border-bottom-color: var(
-      --table-sticky-border-color,
-      var(--table-border-color, var(--eun-border-color, #dee0e7))
-    );
-  }
-
-  #select-cell {
-    position: sticky;
-    left: 0;
-    z-index: var(--_table-z-checkbox, 1);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    padding-inline-start: var(--eun-space-s);
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host(:focus-within) #select-cell {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  #select-cell eun-checkbox {
-    --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)
-    );
-  }
-
-  #select-spacer {
-    box-sizing: border-box;
-    background: var(
-      --table-header-background,
-      var(--eun-surface-color, #ffffff)
-    );
-  }
-
-  :host([sticky-first-column]) ::slotted(:first-of-type) {
-    position: sticky;
-    left: var(--_table-select-offset, 0px);
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host([sticky-first-column]:focus-within) ::slotted(:first-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  #action-spacer {
-    box-sizing: border-box;
-  }
-
-  :host([sticky-last-column]) #action-spacer {
-    position: sticky;
-    right: 0;
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host([sticky-last-column]:focus-within) #action-spacer,
-  :host([sticky-last-column]:focus-within) ::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]) ::slotted(:last-of-type) {
-    position: sticky;
-    right: var(--_table-action-offset, 0px);
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-  }
-`;
-export const tableHeaderStyles = base;