@jsekulowicz/ds-components 0.8.0 → 0.9.0

package/dist/atoms/skeleton/skeleton.js

@@ -0,0 +1,78 @@
+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 { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { skeletonStyles } from './skeleton.styles.js';
+/**
+ * @tag ds-skeleton
+ * @summary Decorative placeholder for content that is still loading.
+ * @slot default - Optional accessible loading text for assistive technology.
+ * @csspart item - Each generated skeleton item.
+ */
+export class DsSkeleton extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'text';
+        this.lines = 1;
+    }
+    static { this.styles = [...DsElement.styles, skeletonStyles]; }
+    updated() {
+        this.#syncHostProperty('--ds-skeleton-width', this.width);
+        this.#syncHostProperty('--ds-skeleton-height', this.height);
+    }
+    #count() {
+        return Math.max(1, Math.floor(this.lines || 1));
+    }
+    #syncHostProperty(name, value) {
+        if (value) {
+            this.style.setProperty(name, value);
+            return;
+        }
+        this.style.removeProperty(name);
+    }
+    #lineWidth(index) {
+        if (this.width) {
+            return this.width;
+        }
+        if (this.variant !== 'text' || this.#count() === 1) {
+            return undefined;
+        }
+        return index === this.#count() - 1 ? '72%' : undefined;
+    }
+    #style(index) {
+        const styles = [];
+        const width = this.#lineWidth(index);
+        if (width) {
+            styles.push(`--ds-skeleton-item-width: ${width}`);
+        }
+        return styles.join('; ');
+    }
+    render() {
+        return html `
+      <span class="stack" aria-hidden="true">
+        ${Array.from({ length: this.#count() }, (_, index) => html `
+          <span class="item" part="item" style=${this.#style(index)}></span>
+        `)}
+      </span>
+      <slot class="sr-only"></slot>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DsSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], DsSkeleton.prototype, "lines", void 0);
+__decorate([
+    property()
+], DsSkeleton.prototype, "width", void 0);
+__decorate([
+    property()
+], DsSkeleton.prototype, "height", void 0);
+//# sourceMappingURL=skeleton.js.map

package/dist/atoms/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/atoms/skeleton/skeleton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,SAAS;IAAzC;;QAG+B,YAAO,GAAoB,MAAM,CAAC;QACnC,UAAK,GAAG,CAAC,CAAC;IAkDxC,CAAC;aArDiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,cAAc,CAAC,AAAxC,CAAyC;IAOtD,OAAO;QACd,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1D,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB,CAAC,IAAY,EAAE,KAAc;QAC5C,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,UAAU,CAAC,KAAa;QACtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAC;QACpB,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;YACnD,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC;IAED,MAAM,CAAC,KAAa;QAClB,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,IAAI,CAAC,6BAA6B,KAAK,EAAE,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;iDACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;SAC1D,CAAC;;;KAGL,CAAC;IACJ,CAAC;;AAlD4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAC1B;IAAX,QAAQ,EAAE;yCAAgB;AACf;IAAX,QAAQ,EAAE;0CAAiB"}

package/dist/atoms/skeleton/skeleton.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const skeletonStyles: import("lit").CSSResult;
+//# sourceMappingURL=skeleton.styles.d.ts.map

package/dist/atoms/skeleton/skeleton.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton/skeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAuE1B,CAAC"}

package/dist/atoms/skeleton/skeleton.styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+export const skeletonStyles = css `
+  :host {
+    display: block;
+    width: var(--ds-skeleton-width, 100%);
+  }
+
+  .stack {
+    display: grid;
+    gap: var(--ds-skeleton-gap, var(--ds-space-2));
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .item {
+    display: block;
+    width: var(--ds-skeleton-item-width, 100%);
+    height: var(--ds-skeleton-height, 1em);
+    border-radius: var(--ds-skeleton-radius, var(--ds-radius-xs));
+    background:
+      linear-gradient(
+        90deg,
+        var(--ds-color-bg-muted) 0%,
+        var(--ds-color-bg-muted) 34%,
+        var(--ds-color-bg-subtle) 50%,
+        var(--ds-color-bg-muted) 66%,
+        var(--ds-color-bg-muted) 100%
+      );
+    background-size: 200% 100%;
+    animation: ds-skeleton-shimmer var(--ds-skeleton-duration, 4s) linear infinite;
+  }
+
+  :host([variant='text']) .item {
+    transform: translateY(0.12em);
+  }
+
+  :host([variant='rectangle']) .item {
+    height: var(--ds-skeleton-height, 6rem);
+    border-radius: var(--ds-skeleton-radius, var(--ds-radius-sm));
+  }
+
+  :host([variant='circle']) {
+    width: var(--ds-skeleton-width, 2.5rem);
+  }
+
+  :host([variant='circle']) .item {
+    width: var(--ds-skeleton-item-width, var(--ds-skeleton-width, 2.5rem));
+    height: var(--ds-skeleton-height, var(--ds-skeleton-width, 2.5rem));
+    border-radius: 999px;
+  }
+
+  @keyframes ds-skeleton-shimmer {
+    from { background-position: 200% 0; }
+    to { background-position: 0 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .item {
+      animation: none;
+      background-size: 100% 100%;
+    }
+  }
+`;
+//# sourceMappingURL=skeleton.styles.js.map

package/dist/atoms/skeleton/skeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.js","sourceRoot":"","sources":["../../../src/atoms/skeleton/skeleton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEhC,CAAC"}

package/dist/atoms/table/define.d.ts

@@ -1,6 +1,7 @@
 import { DsTable } from './table.js';
 import { DsTableSortButton } from './table-sort-button.js';
 import { DsTablePagination } from './table-pagination.js';
+import '../skeleton/define.js';
 declare global {
     interface HTMLElementTagNameMap {
         'ds-table': DsTable;

package/dist/atoms/table/define.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAY1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;QACpB,sBAAsB,EAAE,iBAAiB,CAAC;QAC1C,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,uBAAuB,CAAC;AAY/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;QACpB,sBAAsB,EAAE,iBAAiB,CAAC;QAC1C,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/atoms/table/define.js

@@ -1,6 +1,7 @@
 import { DsTable } from './table.js';
 import { DsTableSortButton } from './table-sort-button.js';
 import { DsTablePagination } from './table-pagination.js';
+import '../skeleton/define.js';
 if (!customElements.get('ds-table')) {
     customElements.define('ds-table', DsTable);
 }

package/dist/atoms/table/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/table/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;IACpC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7C,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AACnE,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/table/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,uBAAuB,CAAC;AAE/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;IACpC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7C,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AACnE,CAAC;AACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC"}

package/dist/atoms/table/table-skeleton.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateResult } from 'lit';
+export declare function renderTableSkeleton(rowCount: number, columnCount: number): TemplateResult;
+//# sourceMappingURL=table-skeleton.d.ts.map

package/dist/atoms/table/table-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAkBhD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,cAAc,CA6BzF"}

package/dist/atoms/table/table-skeleton.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+function count(value, fallback) {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(1, Math.floor(value));
+}
+function range(length) {
+    return Array.from({ length }, (_, index) => index);
+}
+function cellWidth(index) {
+    const widths = ['70%', '52%', '62%', '44%', '58%'];
+    return widths[index % widths.length] ?? '60%';
+}
+export function renderTableSkeleton(rowCount, columnCount) {
+    const rows = range(count(rowCount, 5));
+    const columns = range(count(columnCount, 4));
+    return html `
+    <table part="table" class="skeleton-table" aria-hidden="true">
+      <colgroup>${columns.map(() => html `<col>`)}</colgroup>
+      <thead part="thead">
+        <tr>
+          ${columns.map(index => html `
+            <th part="header-cell" scope="col">
+              <ds-skeleton width=${cellWidth(index)}></ds-skeleton>
+            </th>
+          `)}
+        </tr>
+      </thead>
+      <tbody part="tbody">
+        ${rows.map(() => html `
+          <tr part="row">
+            ${columns.map(index => html `
+              <td part="cell">
+                <ds-skeleton width=${cellWidth(index)}></ds-skeleton>
+              </td>
+            `)}
+          </tr>
+        `)}
+      </tbody>
+    </table>
+  `;
+}
+//# sourceMappingURL=table-skeleton.js.map

package/dist/atoms/table/table-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.js","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,SAAS,KAAK,CAAC,KAAa,EAAE,QAAgB;IAC5C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,SAAS,KAAK,CAAC,MAAc;IAC3B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,WAAmB;IACvE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7C,OAAO,IAAI,CAAA;;kBAEK,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,OAAO,CAAC;;;YAGpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;mCAEF,SAAS,CAAC,KAAK,CAAC;;WAExC,CAAC;;;;UAIF,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;qCAEF,SAAS,CAAC,KAAK,CAAC;;aAExC,CAAC;;SAEL,CAAC;;;GAGP,CAAC;AACJ,CAAC"}

package/dist/atoms/table/table.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult } from 'lit';
 import { DsElement } from '@jsekulowicz/ds-core';
+import '../skeleton/define.js';
 import type { TableColumn, TableRow, TableSortState } from './types.js';
 /**
  * @tag ds-table
@@ -8,6 +9,7 @@ import type { TableColumn, TableRow, TableSortState } from './types.js';
  * @slot toolbar - Content placed above the table (filter, search).
  * @slot footer - Content placed below the table (pagination).
  * @slot empty - Shown when `rows` is empty.
+ * @slot loading - Shown inside the loading overlay when `loading` is true.
  * @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
  * @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
  * @csspart table - The internal `<table>` element.
@@ -21,6 +23,7 @@ import type { TableColumn, TableRow, TableSortState } from './types.js';
  * @csspart toolbar - The toolbar wrapper.
  * @csspart footer - The footer wrapper.
  * @csspart empty - The empty-state wrapper.
+ * @csspart loading - Loading overlay rendered when `loading` is true.
  */
 export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
     #private;
@@ -29,6 +32,9 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
     columns: readonly TableColumn<T>[];
     sortState: TableSortState | null;
     clickableRows: boolean;
+    loading: boolean;
+    skeletonRows: number;
+    skeletonColumns: number;
     rowKey?: string;
     render(): TemplateResult;
 }

package/dist/atoms/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AASxE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAAsC;IAE5B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAsG3C,MAAM,IAAI,cAAc;CAkBlC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AASxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAAsC;IAE5B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IACnD,OAAO,UAAS;IACJ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAqJ3C,MAAM,IAAI,cAAc;CAUlC"}

package/dist/atoms/table/table.js

@@ -4,10 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DsElement } from '@jsekulowicz/ds-core';
+import '../skeleton/define.js';
 import { tableStyles } from './table.styles.js';
+import { renderTableSkeleton } from './table-skeleton.js';
 const INTERACTIVE_TAGS = new Set([
     'a', 'button', 'input', 'select', 'textarea', 'label',
     'ds-button', 'ds-link', 'ds-checkbox', 'ds-radio', 'ds-select',
@@ -21,6 +24,7 @@ const INTERACTIVE_TAGS = new Set([
  * @slot toolbar - Content placed above the table (filter, search).
  * @slot footer - Content placed below the table (pagination).
  * @slot empty - Shown when `rows` is empty.
+ * @slot loading - Shown inside the loading overlay when `loading` is true.
  * @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
  * @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
  * @csspart table - The internal `<table>` element.
@@ -34,6 +38,7 @@ const INTERACTIVE_TAGS = new Set([
  * @csspart toolbar - The toolbar wrapper.
  * @csspart footer - The footer wrapper.
  * @csspart empty - The empty-state wrapper.
+ * @csspart loading - Loading overlay rendered when `loading` is true.
  */
 export class DsTable extends DsElement {
     constructor() {
@@ -42,13 +47,22 @@ export class DsTable extends DsElement {
         this.columns = [];
         this.sortState = null;
         this.clickableRows = false;
+        this.loading = false;
+        this.skeletonRows = 5;
+        this.skeletonColumns = 4;
         this.#onRowClick = (event, row, index) => {
+            if (this.loading) {
+                return;
+            }
             if (this.#pathHasInteractiveBeforeRow(event)) {
                 return;
             }
             this.emit('ds-row-click', { detail: { row, index } });
         };
         this.#onRowKeydown = (event, row, index) => {
+            if (this.loading) {
+                return;
+            }
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
             }
@@ -101,31 +115,43 @@ export class DsTable extends DsElement {
         part="header-cell"
         scope="col"
         class=${`align-${align}`}
-        aria-sort=${this.#ariaSort(column) ?? nothing}
+        aria-sort=${ifDefined(this.#ariaSort(column))}
       >
         <slot name=${`header-${column.name}`}>${column.label}</slot>
       </th>
     `;
     }
-    #renderRow(row, index) {
-        const clickable = this.clickableRows;
+    #renderClickableRow(row, index) {
         return html `
       <tr
-        part=${clickable ? 'row row-clickable' : 'row'}
-        class=${clickable ? 'clickable' : ''}
-        role=${clickable ? 'button' : nothing}
-        tabindex=${clickable ? 0 : nothing}
-        @click=${clickable ? (e) => this.#onRowClick(e, row, index) : nothing}
-        @keydown=${clickable ? (e) => this.#onRowKeydown(e, row, index) : nothing}
+        part="row row-clickable"
+        class="clickable"
+        role="button"
+        tabindex="0"
+        @click=${(e) => this.#onRowClick(e, row, index)}
+        @keydown=${(e) => this.#onRowKeydown(e, row, index)}
       >
-        ${this.columns.map(column => html `
-          <td part="cell" class=${`align-${column.align ?? 'left'}`}>
-            ${this.#renderCell(column, row, index)}
-          </td>
-        `)}
+        ${this.#renderCells(row, index)}
       </tr>
     `;
     }
+    #renderRow(row, index) {
+        if (this.clickableRows) {
+            return this.#renderClickableRow(row, index);
+        }
+        return html `
+      <tr part="row">
+        ${this.#renderCells(row, index)}
+      </tr>
+    `;
+    }
+    #renderCells(row, index) {
+        return this.columns.map(column => html `
+      <td part="cell" class=${`align-${column.align ?? 'left'}`}>
+        ${this.#renderCell(column, row, index)}
+      </td>
+    `);
+    }
     #renderBody() {
         if (this.rows.length === 0) {
             return html `
@@ -138,20 +164,37 @@ export class DsTable extends DsElement {
         }
         return html `${this.rows.map((row, i) => this.#renderRow(row, i))}`;
     }
+    #renderLoading() {
+        if (!this.loading || this.columns.length === 0) {
+            return null;
+        }
+        return html `
+      <div class="loading" part="loading" role="status" aria-live="polite">
+        <span><slot name="loading">Loading...</slot></span>
+      </div>
+    `;
+    }
+    #renderTable() {
+        if (this.columns.length === 0) {
+            return renderTableSkeleton(this.skeletonRows, this.skeletonColumns);
+        }
+        return html `
+      <table part="table" aria-busy=${ifDefined(this.loading ? 'true' : undefined)}>
+        <caption part="caption"><slot name="caption"></slot></caption>
+        <colgroup>${this.columns.map(col => html `<col style=${col.width ? `width: ${col.width}` : ''}>`)}</colgroup>
+        <thead part="thead">
+          <tr>${this.columns.map(col => this.#renderHeader(col))}</tr>
+        </thead>
+        <tbody part="tbody">${this.#renderBody()}</tbody>
+      </table>
+    `;
+    }
     render() {
         return html `
       <div class="toolbar" part="toolbar"><slot name="toolbar"></slot></div>
       <div class="scroll">
-        <table part="table">
-          <caption part="caption"><slot name="caption"></slot></caption>
-          <colgroup>
-            ${this.columns.map(col => html `<col style=${col.width ? `width: ${col.width}` : ''} />`)}
-          </colgroup>
-          <thead part="thead">
-            <tr>${this.columns.map(col => this.#renderHeader(col))}</tr>
-          </thead>
-          <tbody part="tbody">${this.#renderBody()}</tbody>
-        </table>
+        ${this.#renderTable()}
+        ${this.#renderLoading()}
       </div>
       <div class="footer" part="footer"><slot name="footer"></slot></div>
     `;
@@ -169,6 +212,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'clickable-rows' })
 ], DsTable.prototype, "clickableRows", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number, attribute: 'skeleton-rows' })
+], DsTable.prototype, "skeletonRows", void 0);
+__decorate([
+    property({ type: Number, attribute: 'skeleton-columns' })
+], DsTable.prototype, "skeletonColumns", void 0);
 __decorate([
     property({ attribute: 'row-key' })
 ], DsTable.prototype, "rowKey", void 0);

package/dist/atoms/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}

package/dist/atoms/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBA2FvB,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAoHvB,CAAC"}

package/dist/atoms/table/table.styles.js

@@ -16,6 +16,7 @@ export const tableStyles = css `
   }
 
   .scroll {
+    position: relative;
     width: 100%;
     overflow-x: auto;
     border: 1px solid var(--ds-color-border-subtle);
@@ -78,6 +79,30 @@ export const tableStyles = css `
     box-shadow: inset 0 0 0 2px var(--ds-color-focus);
   }
 
+  .skeleton-table {
+    min-width: 32rem;
+  }
+
+  .loading {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    min-height: 100%;
+    background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent);
+    color: var(--ds-color-fg);
+    pointer-events: auto;
+  }
+
+  .loading span {
+    padding: var(--ds-space-2) var(--ds-space-3);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-sm);
+    background: var(--ds-color-bg);
+    box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12));
+    font-weight: var(--ds-font-weight-medium);
+  }
+
   .empty {
     padding: var(--ds-space-6);
     text-align: center;

package/dist/atoms/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F7B,CAAC"}
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}

package/dist/css/utilities/layout.css

@@ -0,0 +1,33 @@
+@layer ds.utilities {
+  .ds-d-block { display: block; }
+  .ds-d-inline-block { display: inline-block; }
+  .ds-d-flex { display: flex; }
+  .ds-d-inline-flex { display: inline-flex; }
+  .ds-d-grid { display: grid; }
+  .ds-d-none { display: none; }
+
+  .ds-flex-row { flex-direction: row; }
+  .ds-flex-column { flex-direction: column; }
+  .ds-flex-wrap { flex-wrap: wrap; }
+  .ds-flex-nowrap { flex-wrap: nowrap; }
+
+  .ds-items-start { align-items: flex-start; }
+  .ds-items-center { align-items: center; }
+  .ds-items-end { align-items: flex-end; }
+  .ds-items-stretch { align-items: stretch; }
+
+  .ds-justify-start { justify-content: flex-start; }
+  .ds-justify-center { justify-content: center; }
+  .ds-justify-end { justify-content: flex-end; }
+  .ds-justify-between { justify-content: space-between; }
+
+  .ds-content-start { align-content: flex-start; }
+  .ds-content-center { align-content: center; }
+  .ds-content-end { align-content: flex-end; }
+  .ds-content-between { align-content: space-between; }
+
+  .ds-self-start { align-self: flex-start; }
+  .ds-self-center { align-self: center; }
+  .ds-self-end { align-self: flex-end; }
+  .ds-self-stretch { align-self: stretch; }
+}