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

package/dist/features/table/table-skeleton-row/table-skeleton-row.js

@@ -1,110 +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 { tableSkeletonRowStyles } from "./table-skeleton-row.styles.js";
-import "../../../components/loader/skeleton/skeleton.js";
-/**
- * Tag name of the table-skeleton-row component.
- */
-export 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
- */
-let EunomiaTableSkeletonRow = class EunomiaTableSkeletonRow extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** @default false */
-        this.selectable = false;
-        /** @default false */
-        this.hasAction = false;
-        /** @default 0 */
-        this.columnCount = 0;
-    }
-    connectedCallback() {
-        super.connectedCallback?.();
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", "presentation");
-        }
-        if (!this.hasAttribute("aria-hidden")) {
-            this.setAttribute("aria-hidden", "true");
-        }
-    }
-    render() {
-        return html `
-      ${this.selectable
-            ? html `
-            <span class="cell select">
-              <eun-skeleton
-                variant="rect"
-                width="18px"
-                height="18px"
-                radius="4px"
-              ></eun-skeleton>
-            </span>
-          `
-            : nothing}
-      ${Array.from({ length: this.columnCount }, () => html `
-          <span class="cell">
-            <eun-skeleton
-              variant="rect"
-              height="14px"
-              width="50%"
-              radius="4px"
-            ></eun-skeleton>
-          </span>
-        `)}
-      ${this.hasAction
-            ? html `
-            <span class="cell action">
-              <eun-skeleton
-                variant="rect"
-                width="28px"
-                height="28px"
-                radius="8px"
-              ></eun-skeleton>
-            </span>
-          `
-            : nothing}
-    `;
-    }
-};
-/**
- * Styles to import to the component.
- *
- * @static
- * @internal
- * @readonly
- */
-EunomiaTableSkeletonRow.styles = tableSkeletonRowStyles;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableSkeletonRow.prototype, "selectable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "has-action" })
-], EunomiaTableSkeletonRow.prototype, "hasAction", void 0);
-__decorate([
-    property({ attribute: "column-count", type: Number })
-], EunomiaTableSkeletonRow.prototype, "columnCount", void 0);
-EunomiaTableSkeletonRow = __decorate([
-    customElement(EunomiaTableSkeletonRowTagName)
-], EunomiaTableSkeletonRow);
-export { EunomiaTableSkeletonRow };

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

@@ -1,12 +0,0 @@
-/**
- * Style for `eun-table-skeleton-row` — a CSS Subgrid row (same trick as
- * `eun-table-header`/`eun-table-item`, see `eun-table`'s own class doc) so
- * its cells align under the real header's columns, with a staggered
- * fade/slide-in entrance driven by the `--_row-index` custom property
- * `eun-table` sets inline on each instance.
- *
- * Custom css variables:
- * [--table-skeleton-stagger] - Delay between each row's entrance animation, as a CSS time (e.g. `60ms`)
- * [--table-skeleton-duration] - Duration of each row's own entrance animation, as a CSS time (e.g. `320ms`)
- */
-export declare const tableSkeletonRowStyles: import("lit").CSSResult;

package/dist/features/table/table-skeleton-row/table-skeleton-row.styles.js

@@ -1,65 +0,0 @@
-import { css } from "lit";
-/**
- * Style for `eun-table-skeleton-row` — a CSS Subgrid row (same trick as
- * `eun-table-header`/`eun-table-item`, see `eun-table`'s own class doc) so
- * its cells align under the real header's columns, with a staggered
- * fade/slide-in entrance driven by the `--_row-index` custom property
- * `eun-table` sets inline on each instance.
- *
- * Custom css variables:
- * [--table-skeleton-stagger] - Delay between each row's entrance animation, as a CSS time (e.g. `60ms`)
- * [--table-skeleton-duration] - Duration of each row's own entrance animation, as a CSS time (e.g. `320ms`)
- */
-export const tableSkeletonRowStyles = css `
-  :host {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: subgrid;
-    align-items: center;
-    box-sizing: border-box;
-    border-bottom: var(--eun-border-width-s, 1px) solid
-      var(--table-border-color, var(--eun-border-color, #dee0e7));
-    opacity: 0;
-    animation: eun-table-skeleton-row-enter
-      var(--table-skeleton-duration, 320ms) ease forwards;
-    animation-delay: calc(
-      var(--table-skeleton-stagger, 60ms) * var(--_row-index, 0)
-    );
-  }
-
-  .cell {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    box-sizing: border-box;
-    min-width: 0;
-    padding: var(--eun-space-m, 16px);
-  }
-
-  .cell.select {
-    justify-content: center;
-    padding-inline-start: calc(var(--eun-space-s) + 3px);
-  }
-
-  .cell.action {
-    justify-content: flex-end;
-  }
-
-  @keyframes eun-table-skeleton-row-enter {
-    from {
-      opacity: 0;
-      transform: translateY(4px);
-    }
-    to {
-      opacity: 1;
-      transform: none;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      animation: none;
-      opacity: 1;
-    }
-  }
-`;

package/dist/mixins/table-row.mixin.d.ts

@@ -1,37 +0,0 @@
-import { LitElement } from "lit";
-import { Constructor } from "../utils/constructor.type.js";
-/**
- * Interface defining the contract for components using {@link TableRowMixin}.
- */
-export declare class TableRowMixinInterface {
-    requestAdjacentRow?: (direction: 1 | -1) => void;
-    requestGridEdge?: (edge: "start" | "end") => void;
-    handleRowKeydown(event: KeyboardEvent): void;
-}
-/**
- * Shared behavior between `eun-table-header` and `eun-table-item` — both are
- * "rows" of `eun-table`'s grid, occupying an identical CSS Subgrid `:host`
- * and behaving as one native, always-focusable unit : `Tab` reaches a row
- * itself (a plain, permanent `tabindex="0"` on the host, set once here
- * rather than juggled by any global roving-tabindex bookkeeping), the same
- * way a mouse user meets it as one surface before touching anything inside
- * it, then ordinary sequential focus carries `Tab` on into whatever
- * checkbox/cell content/action that row holds : no cell-level roving stop,
- * no column-index alignment with another row, nothing `eun-table` needs to
- * manage beyond knowing which row comes before/after this one.
- *
- * `ArrowUp`/`ArrowDown` (delegated to {@link
- * TableRowMixinClass.requestAdjacentRow}) and `Ctrl+Home`/`Ctrl+End`
- * (delegated to {@link TableRowMixinClass.requestGridEdge}) are a keyboard
- * accelerator layered on top, moving straight to the previous/next row (or
- * the first/last one) without needing to `Tab` there one row at a time —
- * genuinely optional, since every row is already its own reachable `Tab`
- * stop regardless. Both are only ever recognized while the row's own host
- * has focus directly, not once `Tab` has moved into its content : arrow
- * keys are then left to that content's own native behavior instead (a
- * text input's cursor movement, a radio group's own arrow handling, ...).
- *
- * @param superClass - The base class to extend.
- * @returns A new class extending the base with shared row behavior.
- */
-export declare const TableRowMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TableRowMixinInterface> & T;

package/dist/mixins/table-row.mixin.js

@@ -1,103 +0,0 @@
-/**
- * Shared behavior between `eun-table-header` and `eun-table-item` — both are
- * "rows" of `eun-table`'s grid, occupying an identical CSS Subgrid `:host`
- * and behaving as one native, always-focusable unit : `Tab` reaches a row
- * itself (a plain, permanent `tabindex="0"` on the host, set once here
- * rather than juggled by any global roving-tabindex bookkeeping), the same
- * way a mouse user meets it as one surface before touching anything inside
- * it, then ordinary sequential focus carries `Tab` on into whatever
- * checkbox/cell content/action that row holds : no cell-level roving stop,
- * no column-index alignment with another row, nothing `eun-table` needs to
- * manage beyond knowing which row comes before/after this one.
- *
- * `ArrowUp`/`ArrowDown` (delegated to {@link
- * TableRowMixinClass.requestAdjacentRow}) and `Ctrl+Home`/`Ctrl+End`
- * (delegated to {@link TableRowMixinClass.requestGridEdge}) are a keyboard
- * accelerator layered on top, moving straight to the previous/next row (or
- * the first/last one) without needing to `Tab` there one row at a time —
- * genuinely optional, since every row is already its own reachable `Tab`
- * stop regardless. Both are only ever recognized while the row's own host
- * has focus directly, not once `Tab` has moved into its content : arrow
- * keys are then left to that content's own native behavior instead (a
- * text input's cursor movement, a radio group's own arrow handling, ...).
- *
- * @param superClass - The base class to extend.
- * @returns A new class extending the base with shared row behavior.
- */
-export const TableRowMixin = (superClass) => {
-    class TableRowMixinClass extends superClass {
-        /**
-         * Gives this row's own host a permanent `tabindex="0"`, unless a
-         * consumer already set one explicitly — set once here rather than
-         * toggled between `"0"`/`"-1"` by any table-wide bookkeeping, since
-         * every row is meant to be simultaneously `Tab`-reachable, not
-         * competing for one single grid-wide stop.
-         */
-        connectedCallback() {
-            super.connectedCallback?.();
-            if (!this.hasAttribute("tabindex")) {
-                this.setAttribute("tabindex", "0");
-            }
-        }
-        /**
-         * Installs {@link handleRowKeydown} directly on the host : this mixin
-         * only ever reacts to a keydown whose target is the row itself (see
-         * {@link handleRowKeydown}), never to one bubbling up from its own
-         * content, so a plain host-level listener is enough — no shadow-root
-         * listener needed the way a per-cell roving-tabindex scheme would.
-         *
-         * @param changed the changed properties.
-         */
-        firstUpdated(changed) {
-            super.firstUpdated?.(changed);
-            this.addEventListener("keydown", (event) => this.handleRowKeydown(event));
-        }
-        /**
-         * Keyboard handling for this row's own host : `ArrowUp`/`ArrowDown`
-         * delegate to {@link requestAdjacentRow}, `Ctrl+Home`/`Ctrl+End` to
-         * {@link requestGridEdge}, `Enter`/`Space` to {@link
-         * activateLeadingRowFocusTarget}. A no-op unless the event's target is
-         * the row itself directly — once `Tab` has moved focus onto its own
-         * content (a checkbox, a button, ...), these keys are left to that
-         * content's own native behavior instead.
-         *
-         * @param event the native keyboard event.
-         * @internal
-         */
-        handleRowKeydown(event) {
-            if (event.target !== this) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowUp":
-                    event.preventDefault();
-                    this.requestAdjacentRow?.(-1);
-                    return;
-                case "ArrowDown":
-                    event.preventDefault();
-                    this.requestAdjacentRow?.(1);
-                    return;
-                case "Home":
-                    if (event.ctrlKey) {
-                        event.preventDefault();
-                        this.requestGridEdge?.("start");
-                    }
-                    return;
-                case "End":
-                    if (event.ctrlKey) {
-                        event.preventDefault();
-                        this.requestGridEdge?.("end");
-                    }
-                    return;
-                case "Enter":
-                case " ":
-                    event.preventDefault();
-                    this.activateLeadingRowFocusTarget?.();
-                    return;
-                default:
-                    return;
-            }
-        }
-    }
-    return TableRowMixinClass;
-};

package/styles/tools/mixins/media-queries/eunomia-device.mixin.scss

@@ -1,14 +0,0 @@
-@use "sass:map";
-@use "./../../variables/eunomia.breakpoints.scss" as *;
-
-@mixin eunomia-mobile {
-  @media (max-width: map.get($map-device-width, tablet) - 1) {
-    @content;
-  }
-}
-
-@mixin eunomia-desktop {
-  @media (min-width: map.get($map-device-width, tablet)) {
-    @content;
-  }
-}

package/styles/tools/mixins/media-queries/eunomia-gte.mixin.scss

@@ -1,26 +0,0 @@
-@use "sass:map";
-@use './../../variables/eunomia.breakpoints.scss' as *;
-
-@mixin eunomia-gte-mobile {
-  @media (min-width: map.get($map-device-width, mobile)) {
-    @content;
-  }
-}
-
-@mixin eunomia-gte-tablet {
-  @media (min-width: map.get($map-device-width, tablet)) {
-    @content;
-  }
-}
-
-@mixin eunomia-gte-laptop {
-  @media (min-width: map.get($map-device-width, laptop)) {
-    @content;
-  }
-}
-
-@mixin eunomia-gte-desktop {
-  @media (min-width: map.get($map-device-width, desktop)) {
-    @content;
-  }
-}

package/styles/tools/mixins/media-queries/eunomia-lte.mixin.scss

@@ -1,26 +0,0 @@
-@use "sass:map";
-@use "./../../variables/eunomia.breakpoints.scss" as *;
-
-@mixin eunomia-lte-mobile {
-  @media (max-width: map.get($map-device-width, mobile) - 1) {
-    @content;
-  }
-}
-
-@mixin eunomia-lte-tablet {
-  @media (max-width: map.get($map-device-width, tablet) - 1) {
-    @content;
-  }
-}
-
-@mixin eunomia-lte-laptop {
-  @media (max-width: map.get($map-device-width, laptop) - 1) {
-    @content;
-  }
-}
-
-@mixin eunomia-lte-desktop {
-  @media (max-width: map.get($map-device-width, desktop) - 1) {
-    @content;
-  }
-}