kanto-ds 1.0.0

package/dist/components/data/kt-stat/kt-stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-stat.js","sources":["../../../../src/components/data/kt-stat/kt-stat.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport type KtStatTrend = 'up' | 'down' | 'flat';\n\n/**\n * One headline figure: a label, a value, and how it moved.\n *\n * Worth its own element because every dashboard rebuilds this tile, and every\n * rebuild makes the same two mistakes — the delta coloured by sign rather than\n * by meaning, and the label competing with the number.\n *\n * **The colour comes from `trend`, not from the sign.** Falling costs are good\n * news; rising churn is not. Pass `trend` to say which, and `inverted` when\n * down is the direction you want.\n *\n * @element kt-stat\n *\n * @slot - Extra content under the value — a sparkline, a caption.\n *\n * @csspart base - The tile.\n * @csspart value - The figure.\n *\n * @example\n * ```html\n * <kt-stat label=\"Revenue\" value=\"$292,342\" delta=\"-3%\" trend=\"down\"></kt-stat>\n * <kt-stat label=\"Customers\" value=\"712\" delta=\"+12%\" trend=\"up\" icon=\"users\"></kt-stat>\n * ```\n */\nexport class KtStat extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .stat {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: var(--padding-card);\n      }\n\n      .head {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      /* A tinted disc rather than a bare glyph: at this size an icon on its\n         own reads as noise beside the figure. */\n      .icon {\n        display: inline-flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: 34px;\n        height: 34px;\n        color: var(--color-primary-base);\n        background: var(--color-primary-soft);\n        border-radius: var(--radius-full);\n      }\n\n      .label {\n        color: var(--color-text-500);\n        font: var(--font-title-overline);\n        letter-spacing: var(--letter-spacing-overline);\n        text-transform: uppercase;\n      }\n\n      .figure {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .value {\n        color: var(--text-body);\n        font: var(--font-title-h1);\n        font-variant-numeric: tabular-nums;\n        line-height: 1.1;\n      }\n\n      :host([size='small']) .value {\n        font: var(--font-title-h4);\n      }\n\n      .caption {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  /** The movement, shown as a badge: `+12%`, `-3%`, `+2`. */\n  @property({ type: String })\n  delta = '';\n\n  /**\n   * What the movement means. Drives the badge colour.\n   * `flat` — and the default — stay neutral.\n   */\n  @property({ type: String, reflect: true })\n  trend: KtStatTrend = 'flat';\n\n  /**\n   * Down is the good direction here — churn, cost, latency.\n   * Swaps which trend reads as success.\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  /** Lucide icon name, kebab-case. */\n  @property({ type: String })\n  icon = '';\n\n  /** Small print under the figure — \"vs last month\". */\n  @property({ type: String })\n  caption = '';\n\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  private get deltaVariant(): 'success' | 'danger' | 'neutral' {\n    if (this.trend === 'flat') return 'neutral';\n    const good = this.inverted ? 'down' : 'up';\n    return this.trend === good ? 'success' : 'danger';\n  }\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"stat\">\n      <div class=\"head\">\n        ${\n          this.icon\n            ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"18\"></kt-icon></span>`\n            : nothing\n        }\n        <span class=\"label\">${this.label}</span>\n      </div>\n\n      ${\n        this.loading\n          ? html`<kt-skeleton variant=\"rect\" height=\"38px\" width=\"60%\"></kt-skeleton>`\n          : html`<div class=\"figure\">\n              <span part=\"value\" class=\"value\">${this.value}</span>\n              ${\n                this.delta\n                  ? html`<kt-badge variant=\"count\" tone=${this.deltaVariant}\n                      >${this.delta}</kt-badge\n                    >`\n                  : nothing\n              }\n            </div>`\n      }\n      ${this.caption ? html`<span class=\"caption\">${this.caption}</span>` : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n\ndefineElement('kt-stat', KtStat);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-stat': KtStat;\n  }\n}\n"],"names":["KtStat","KtElement","css","good","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAiCO,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAoEL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAIR,KAAA,QAAQ,IAOR,KAAA,QAAqB,QAOrB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,UAAU,IAGV,KAAA,OAA2B,UAG3B,KAAA,UAAU;AAAA,EAAA;AAAA,EAtGV,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA8DF;AAAA,EAwCA,IAAY,eAAiD;AAC3D,QAAI,KAAK,UAAU,OAAQ,QAAO;AAClC,UAAMC,IAAO,KAAK,WAAW,SAAS;AACtC,WAAO,KAAK,UAAUA,IAAO,YAAY;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA,UAGD,KAAK,OACDA,qCAAwC,KAAK,IAAI,iCACjDC,CACN;AAAA,8BACsB,KAAK,KAAK;AAAA;AAAA;AAAA,QAIhC,KAAK,UACDD,0EACAA;AAAA,iDACqC,KAAK,KAAK;AAAA,gBAE3C,KAAK,QACDA,mCAAsC,KAAK,YAAY;AAAA,yBAClD,KAAK,KAAK;AAAA,yBAEfC,CACN;AAAA,mBAER;AAAA,QACE,KAAK,UAAUD,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA;AAAA;AAAA,EAGjF;AACF;AAxEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfP,EAoEX,WAAA,OAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfP,EAuEX,WAAA,OAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxFhBP,EAyFX,WAAA,UAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5FfP,EA6FX,WAAA,MAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfP,EAiGX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnG9BP,EAoGX,WAAA,MAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAuGX,WAAA,SAAA;AAuCFQ,EAAc,WAAWR,CAAM;"}

package/dist/components/data/kt-table/kt-table.d.ts

@@ -0,0 +1,99 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-pagination/kt-pagination.js';
+export type KtSortDirection = 'asc' | 'desc' | null;
+export type KtTableRow = Record<string, unknown>;
+export interface KtTableColumn {
+    /** Key into the row object. */
+    readonly key: string;
+    /** Header text. Falls back to `key`. */
+    readonly label?: string;
+    readonly sortable?: boolean;
+    readonly align?: 'left' | 'center' | 'right';
+    /** Any CSS width. */
+    readonly width?: string;
+}
+export interface KtSortState {
+    readonly key: string | null;
+    readonly direction: KtSortDirection;
+}
+/** Renders a cell. Return `undefined` to fall back to the raw value. */
+export type KtCellRenderer = (row: KtTableRow, column: KtTableColumn) => unknown;
+/**
+ * A data table: tri-state sorting, single or multiple selection, paging.
+ *
+ * @element kt-table
+ *
+ * @csspart table - The `<table>`.
+ * @csspart header-cell - A `<th>`.
+ * @csspart row - A `<tr>`.
+ * @csspart cell - A `<td>`.
+ *
+ * @fires kt-sort-change - Sorting changed. `detail: { key, direction }`.
+ * @fires kt-selection-change - Selection changed. `detail: { selected, rows }`.
+ * @fires kt-row-click - A row was clicked. `detail: { row, index }`.
+ * @fires kt-page-change - The page changed. `detail: { page }`.
+ *
+ * @example
+ * ```js
+ * table.columns = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'amount', label: 'Amount', sortable: true, align: 'right' },
+ * ];
+ * table.data = rows;
+ * ```
+ */
+export declare class KtTable extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private page;
+    columns: readonly KtTableColumn[];
+    data: readonly KtTableRow[];
+    selectable: boolean;
+    selectionMode: 'single' | 'multiple';
+    /** The identities of the selected rows. */
+    selected: readonly unknown[];
+    /** Rows per page. Zero shows everything and hides the footer. */
+    pageSize: number;
+    loading: boolean;
+    compact: boolean;
+    sortKey: string | null;
+    sortDirection: KtSortDirection;
+    /** Renders a cell. Return `undefined` to fall back to the raw value. */
+    renderCell: KtCellRenderer | undefined;
+    emptyText: string;
+    loadingText: string;
+    /** Accessible name for the table. */
+    label: string;
+    /** The rows after sorting, before paging. */
+    get sortedRows(): readonly KtTableRow[];
+    get totalPages(): number;
+    /** The rows actually on screen. */
+    get visibleRows(): readonly KtTableRow[];
+    /**
+     * Cycles a column: unsorted → ascending → descending → unsorted. The third
+     * press restoring the original order is what makes sorting undoable.
+     */
+    private toggleSort;
+    private isSelected;
+    private toggleSelection;
+    /** Selects or clears every row on the current page. */
+    private toggleAll;
+    /** The selected rows themselves, not just their identities. */
+    get selectedRows(): readonly KtTableRow[];
+    private onPageChange;
+    /**
+     * The aria-sort value for a column.
+     *
+     * Not named ariaSort: HTMLElement reflects that ARIA attribute as a string
+     * property, and shadowing it with a method breaks the element's own typing.
+     */
+    private sortStateFor;
+    private renderHeaderCell;
+    private renderBody;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-table': KtTable;
+    }
+}

package/dist/components/data/kt-table/kt-table.js

@@ -0,0 +1,340 @@
+import { css as x, html as d, nothing as h } from "lit";
+import { state as k, property as n } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+import { K as f, d as $ } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../kt-pagination/kt-pagination.js";
+var v = Object.defineProperty, a = (o, t, e, s) => {
+  for (var i = void 0, c = o.length - 1, l; c >= 0; c--)
+    (l = o[c]) && (i = l(t, e, i) || i);
+  return i && v(t, e, i), i;
+};
+const w = new Intl.Collator("en", { numeric: !0, sensitivity: "base" });
+function m(o) {
+  if (typeof o == "string") return o;
+  if (typeof o == "number" || typeof o == "boolean" || typeof o == "bigint")
+    return String(o);
+  try {
+    return JSON.stringify(o) ?? "";
+  } catch {
+    return "";
+  }
+}
+function u(o) {
+  return o.id ?? o.uid ?? o;
+}
+class r extends f {
+  constructor() {
+    super(...arguments), this.page = 1, this.columns = [], this.data = [], this.selectable = !1, this.selectionMode = "multiple", this.selected = [], this.pageSize = 0, this.loading = !1, this.compact = !1, this.sortKey = null, this.sortDirection = null, this.emptyText = "No data to display", this.loadingText = "Loading…", this.label = "";
+  }
+  static {
+    this.styles = [
+      f.styles,
+      x`
+      :host {
+        display: block;
+        width: 100%;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+      }
+
+      .scroller {
+        overflow: auto;
+        border-radius: var(--border-radius);
+      }
+
+      table {
+        width: 100%;
+        min-width: 600px;
+        border-spacing: 0;
+        border-collapse: separate;
+      }
+
+      thead {
+        background: var(--surface-card);
+        color: var(--text-muted);
+      }
+
+      th {
+        padding: 16px 18px;
+        font-size: 13px;
+        font-weight: inherit;
+        text-align: left;
+        white-space: nowrap;
+        vertical-align: middle;
+        user-select: none;
+      }
+
+      /* Sortable headers are buttons, not clickable <th>s: a header you can
+         only sort with a mouse is a table half the users cannot sort. */
+      th button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 0;
+        color: inherit;
+        font: inherit;
+        text-align: inherit;
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+
+      th button:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .indicator {
+        color: var(--color-primary-base);
+        font-size: 10px;
+      }
+
+      tbody tr {
+        transition: background-color 120ms linear;
+      }
+
+      tbody tr:hover {
+        background: var(--color-dark-14);
+      }
+
+      tbody tr.selected {
+        background: var(--color-primary-soft);
+      }
+
+      td {
+        padding: 14px 18px;
+        font-size: 14px;
+        border-bottom: var(--border-width) solid var(--surface-hover);
+      }
+
+      :host([compact]) td {
+        padding: 8px 12px;
+      }
+      :host([compact]) th {
+        padding: 10px 12px;
+      }
+
+      .select-cell {
+        width: 56px;
+        text-align: center;
+      }
+
+      .placeholder {
+        padding: 28px 0;
+        color: var(--text-muted);
+        text-align: center;
+      }
+
+      footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 12px;
+        padding-top: 12px;
+      }
+
+      @media (max-width: 680px) {
+        table {
+          min-width: 100%;
+        }
+        td,
+        th {
+          padding: 10px 12px;
+        }
+      }
+    `
+    ];
+  }
+  /** The rows after sorting, before paging. */
+  get sortedRows() {
+    if (!this.sortKey || !this.sortDirection) return this.data;
+    const t = this.sortKey, e = this.sortDirection === "asc" ? 1 : -1;
+    return [...this.data].sort((s, i) => {
+      const c = s[t], l = i[t], p = c == null, y = l == null;
+      return p && y ? 0 : p ? 1 : y ? -1 : typeof c == "number" && typeof l == "number" ? (c - l) * e : w.compare(m(c), m(l)) * e;
+    });
+  }
+  get totalPages() {
+    return this.pageSize <= 0 ? 1 : Math.max(1, Math.ceil(this.data.length / this.pageSize));
+  }
+  /** The rows actually on screen. */
+  get visibleRows() {
+    const t = this.sortedRows;
+    if (this.pageSize <= 0) return t;
+    const e = Math.min(this.page, this.totalPages);
+    return t.slice((e - 1) * this.pageSize, e * this.pageSize);
+  }
+  /**
+   * Cycles a column: unsorted → ascending → descending → unsorted. The third
+   * press restoring the original order is what makes sorting undoable.
+   */
+  toggleSort(t) {
+    t.sortable && (this.sortKey !== t.key ? (this.sortKey = t.key, this.sortDirection = "asc") : this.sortDirection === "asc" ? this.sortDirection = "desc" : (this.sortKey = null, this.sortDirection = null), g(this, "kt-sort-change", { key: this.sortKey, direction: this.sortDirection }));
+  }
+  isSelected(t) {
+    return this.selected.includes(u(t));
+  }
+  toggleSelection(t) {
+    const e = u(t);
+    this.selectionMode === "single" ? this.selected = this.isSelected(t) ? [] : [e] : this.selected = this.isSelected(t) ? this.selected.filter((s) => s !== e) : [...this.selected, e], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
+  }
+  /** Selects or clears every row on the current page. */
+  toggleAll() {
+    const e = this.visibleRows.map(u), s = e.every((i) => this.selected.includes(i));
+    this.selected = s ? this.selected.filter((i) => !e.includes(i)) : [.../* @__PURE__ */ new Set([...this.selected, ...e])], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
+  }
+  /** The selected rows themselves, not just their identities. */
+  get selectedRows() {
+    return this.data.filter((t) => this.selected.includes(u(t)));
+  }
+  onPageChange(t) {
+    t.stopPropagation(), this.page = t.detail.page, g(this, "kt-page-change", { page: this.page });
+  }
+  /**
+   * The aria-sort value for a column.
+   *
+   * Not named ariaSort: HTMLElement reflects that ARIA attribute as a string
+   * property, and shadowing it with a method breaks the element's own typing.
+   */
+  sortStateFor(t) {
+    return this.sortKey !== t.key || !this.sortDirection ? "none" : this.sortDirection === "asc" ? "ascending" : "descending";
+  }
+  renderHeaderCell(t) {
+    const e = t.label ?? t.key, s = this.sortKey === t.key && this.sortDirection !== null;
+    return d`<th
+      part="header-cell"
+      scope="col"
+      style=${b(t.width ? { width: t.width } : {})}
+      aria-sort=${this.sortStateFor(t)}
+    >
+      ${t.sortable ? d`<button type="button" @click=${() => this.toggleSort(t)}>
+              <span>${e}</span>
+              <span class="indicator" aria-hidden="true"
+                >${s ? this.sortDirection === "asc" ? "▲" : "▼" : ""}</span
+              >
+            </button>` : d`<span>${e}</span>`}
+    </th>`;
+  }
+  renderBody() {
+    const t = this.visibleRows, e = this.columns.length + (this.selectable ? 1 : 0);
+    return t.length === 0 ? d`<tr>
+        <td colspan=${e}>
+          <div class="placeholder">${this.emptyText}</div>
+        </td>
+      </tr>` : d`${t.map((s, i) => {
+      const c = this.isSelected(s);
+      return d`<tr
+        part="row"
+        class=${S({ selected: c })}
+        aria-selected=${this.selectable ? String(c) : h}
+        @click=${() => g(this, "kt-row-click", { row: s, index: i })}
+      >
+        ${this.selectable ? d`<td class="select-cell">
+                <input
+                  type=${this.selectionMode === "single" ? "radio" : "checkbox"}
+                  name=${this.selectionMode === "single" ? "kt-table-selection" : h}
+                  .checked=${c}
+                  aria-label="Select row"
+                  @click=${(l) => l.stopPropagation()}
+                  @change=${() => this.toggleSelection(s)}
+                />
+              </td>` : h}
+        ${this.columns.map((l) => {
+        const p = this.renderCell?.(s, l);
+        return d`<td part="cell" style=${b({ textAlign: l.align ?? "left" })}>
+            ${p === void 0 ? s[l.key] : p}
+          </td>`;
+      })}
+      </tr>`;
+    })}`;
+  }
+  render() {
+    if (this.loading)
+      return d`<div class="placeholder" role="status" aria-live="polite">
+        ${this.loadingText}
+      </div>`;
+    const t = this.visibleRows, e = t.length > 0 && t.every((i) => this.isSelected(i)), s = t.some((i) => this.isSelected(i));
+    return d`<div class="scroller">
+        <table part="table" aria-label=${this.label || h}>
+          <thead>
+            <tr>
+              ${this.selectable ? d`<th class="select-cell" scope="col">
+                      ${this.selectionMode === "multiple" ? d`<input
+                              type="checkbox"
+                              .checked=${e}
+                              .indeterminate=${s && !e}
+                              aria-label="Select all"
+                              @change=${this.toggleAll}
+                            />` : h}
+                    </th>` : h}
+              ${this.columns.map((i) => this.renderHeaderCell(i))}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.renderBody()}
+          </tbody>
+        </table>
+      </div>
+
+      ${this.pageSize > 0 ? d`<footer>
+              <kt-pagination
+                .page=${Math.min(this.page, this.totalPages)}
+                .totalPages=${this.totalPages}
+                @kt-page-change=${this.onPageChange}
+              ></kt-pagination>
+            </footer>` : h}`;
+  }
+}
+a([
+  k()
+], r.prototype, "page");
+a([
+  n({ attribute: !1 })
+], r.prototype, "columns");
+a([
+  n({ attribute: !1 })
+], r.prototype, "data");
+a([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "selectable");
+a([
+  n({ type: String, attribute: "selection-mode" })
+], r.prototype, "selectionMode");
+a([
+  n({ attribute: !1 })
+], r.prototype, "selected");
+a([
+  n({ type: Number, attribute: "page-size" })
+], r.prototype, "pageSize");
+a([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "loading");
+a([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "compact");
+a([
+  n({ type: String, attribute: "sort-key" })
+], r.prototype, "sortKey");
+a([
+  n({ type: String, attribute: "sort-direction" })
+], r.prototype, "sortDirection");
+a([
+  n({ attribute: !1 })
+], r.prototype, "renderCell");
+a([
+  n({ type: String, attribute: "empty-text" })
+], r.prototype, "emptyText");
+a([
+  n({ type: String, attribute: "loading-text" })
+], r.prototype, "loadingText");
+a([
+  n({ type: String })
+], r.prototype, "label");
+$("kt-table", r);
+export {
+  r as KtTable
+};
+//# sourceMappingURL=kt-table.js.map

package/dist/components/data/kt-table/kt-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-table.js","sources":["../../../../src/components/data/kt-table/kt-table.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../kt-pagination/kt-pagination.js';\n\nexport type KtSortDirection = 'asc' | 'desc' | null;\nexport type KtTableRow = Record<string, unknown>;\n\nexport interface KtTableColumn {\n  /** Key into the row object. */\n  readonly key: string;\n  /** Header text. Falls back to `key`. */\n  readonly label?: string;\n  readonly sortable?: boolean;\n  readonly align?: 'left' | 'center' | 'right';\n  /** Any CSS width. */\n  readonly width?: string;\n}\n\nexport interface KtSortState {\n  readonly key: string | null;\n  readonly direction: KtSortDirection;\n}\n\n/** Renders a cell. Return `undefined` to fall back to the raw value. */\nexport type KtCellRenderer = (row: KtTableRow, column: KtTableColumn) => unknown;\n\n/**\n * Sorts with a locale-aware collator, so \"Ångström\" files next to \"Angstrom\"\n * instead of after \"Zeta\". `numeric` also makes \"Entity 2\" precede\n * \"Entity 10\".\n */\nconst collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });\n\n/**\n * A sortable string for any cell value.\n *\n * Objects get their JSON rather than \"[object Object]\", which at least sorts\n * consistently instead of collapsing every object in the column to one key.\n */\nfunction sortableText(value: unknown): string {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {\n    return String(value);\n  }\n  try {\n    return JSON.stringify(value) ?? '';\n  } catch {\n    return '';\n  }\n}\n\n/** A row's identity: `id`, else `uid`, else the row itself. */\nfunction rowKey(row: KtTableRow): unknown {\n  return row['id'] ?? row['uid'] ?? row;\n}\n\n/**\n * A data table: tri-state sorting, single or multiple selection, paging.\n *\n * @element kt-table\n *\n * @csspart table - The `<table>`.\n * @csspart header-cell - A `<th>`.\n * @csspart row - A `<tr>`.\n * @csspart cell - A `<td>`.\n *\n * @fires kt-sort-change - Sorting changed. `detail: { key, direction }`.\n * @fires kt-selection-change - Selection changed. `detail: { selected, rows }`.\n * @fires kt-row-click - A row was clicked. `detail: { row, index }`.\n * @fires kt-page-change - The page changed. `detail: { page }`.\n *\n * @example\n * ```js\n * table.columns = [\n *   { key: 'name', label: 'Name', sortable: true },\n *   { key: 'amount', label: 'Amount', sortable: true, align: 'right' },\n * ];\n * table.data = rows;\n * ```\n */\nexport class KtTable extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n      }\n\n      .scroller {\n        overflow: auto;\n        border-radius: var(--border-radius);\n      }\n\n      table {\n        width: 100%;\n        min-width: 600px;\n        border-spacing: 0;\n        border-collapse: separate;\n      }\n\n      thead {\n        background: var(--surface-card);\n        color: var(--text-muted);\n      }\n\n      th {\n        padding: 16px 18px;\n        font-size: 13px;\n        font-weight: inherit;\n        text-align: left;\n        white-space: nowrap;\n        vertical-align: middle;\n        user-select: none;\n      }\n\n      /* Sortable headers are buttons, not clickable <th>s: a header you can\n         only sort with a mouse is a table half the users cannot sort. */\n      th button {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        padding: 0;\n        color: inherit;\n        font: inherit;\n        text-align: inherit;\n        background: none;\n        border: none;\n        cursor: pointer;\n      }\n\n      th button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .indicator {\n        color: var(--color-primary-base);\n        font-size: 10px;\n      }\n\n      tbody tr {\n        transition: background-color 120ms linear;\n      }\n\n      tbody tr:hover {\n        background: var(--color-dark-14);\n      }\n\n      tbody tr.selected {\n        background: var(--color-primary-soft);\n      }\n\n      td {\n        padding: 14px 18px;\n        font-size: 14px;\n        border-bottom: var(--border-width) solid var(--surface-hover);\n      }\n\n      :host([compact]) td {\n        padding: 8px 12px;\n      }\n      :host([compact]) th {\n        padding: 10px 12px;\n      }\n\n      .select-cell {\n        width: 56px;\n        text-align: center;\n      }\n\n      .placeholder {\n        padding: 28px 0;\n        color: var(--text-muted);\n        text-align: center;\n      }\n\n      footer {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 12px;\n        padding-top: 12px;\n      }\n\n      @media (max-width: 680px) {\n        table {\n          min-width: 100%;\n        }\n        td,\n        th {\n          padding: 10px 12px;\n        }\n      }\n    `,\n  ];\n\n  @state()\n  private page = 1;\n\n  @property({ attribute: false })\n  columns: readonly KtTableColumn[] = [];\n\n  @property({ attribute: false })\n  data: readonly KtTableRow[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  @property({ type: String, attribute: 'selection-mode' })\n  selectionMode: 'single' | 'multiple' = 'multiple';\n\n  /** The identities of the selected rows. */\n  @property({ attribute: false })\n  selected: readonly unknown[] = [];\n\n  /** Rows per page. Zero shows everything and hides the footer. */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey: string | null = null;\n\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: KtSortDirection = null;\n\n  /** Renders a cell. Return `undefined` to fall back to the raw value. */\n  @property({ attribute: false })\n  renderCell: KtCellRenderer | undefined;\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No data to display';\n\n  @property({ type: String, attribute: 'loading-text' })\n  loadingText = 'Loading…';\n\n  /** Accessible name for the table. */\n  @property({ type: String })\n  label = '';\n\n  /** The rows after sorting, before paging. */\n  get sortedRows(): readonly KtTableRow[] {\n    if (!this.sortKey || !this.sortDirection) return this.data;\n\n    const key = this.sortKey;\n    const sign = this.sortDirection === 'asc' ? 1 : -1;\n\n    return [...this.data].sort((a, b) => {\n      const left = a[key];\n      const right = b[key];\n\n      // Empty values sort to the end whichever way the column points, so a\n      // descending sort does not open with a screen of blanks.\n      const leftEmpty = left === null || left === undefined;\n      const rightEmpty = right === null || right === undefined;\n      if (leftEmpty && rightEmpty) return 0;\n      if (leftEmpty) return 1;\n      if (rightEmpty) return -1;\n\n      if (typeof left === 'number' && typeof right === 'number') return (left - right) * sign;\n      return collator.compare(sortableText(left), sortableText(right)) * sign;\n    });\n  }\n\n  get totalPages(): number {\n    if (this.pageSize <= 0) return 1;\n    return Math.max(1, Math.ceil(this.data.length / this.pageSize));\n  }\n\n  /** The rows actually on screen. */\n  get visibleRows(): readonly KtTableRow[] {\n    const rows = this.sortedRows;\n    if (this.pageSize <= 0) return rows;\n\n    const page = Math.min(this.page, this.totalPages);\n    return rows.slice((page - 1) * this.pageSize, page * this.pageSize);\n  }\n\n  /**\n   * Cycles a column: unsorted → ascending → descending → unsorted. The third\n   * press restoring the original order is what makes sorting undoable.\n   */\n  private toggleSort(column: KtTableColumn): void {\n    if (!column.sortable) return;\n\n    if (this.sortKey !== column.key) {\n      this.sortKey = column.key;\n      this.sortDirection = 'asc';\n    } else if (this.sortDirection === 'asc') {\n      this.sortDirection = 'desc';\n    } else {\n      this.sortKey = null;\n      this.sortDirection = null;\n    }\n\n    emit(this, 'kt-sort-change', { key: this.sortKey, direction: this.sortDirection });\n  }\n\n  private isSelected(row: KtTableRow): boolean {\n    return this.selected.includes(rowKey(row));\n  }\n\n  private toggleSelection(row: KtTableRow): void {\n    const key = rowKey(row);\n\n    if (this.selectionMode === 'single') {\n      this.selected = this.isSelected(row) ? [] : [key];\n    } else {\n      this.selected = this.isSelected(row)\n        ? this.selected.filter((candidate) => candidate !== key)\n        : [...this.selected, key];\n    }\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** Selects or clears every row on the current page. */\n  private toggleAll(): void {\n    const rows = this.visibleRows;\n    const keys = rows.map(rowKey);\n    const allSelected = keys.every((key) => this.selected.includes(key));\n\n    this.selected = allSelected\n      ? this.selected.filter((key) => !keys.includes(key))\n      : [...new Set([...this.selected, ...keys])];\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** The selected rows themselves, not just their identities. */\n  get selectedRows(): readonly KtTableRow[] {\n    return this.data.filter((row) => this.selected.includes(rowKey(row)));\n  }\n\n  private onPageChange(event: Event): void {\n    event.stopPropagation();\n    this.page = (event as CustomEvent<{ page: number }>).detail.page;\n    emit(this, 'kt-page-change', { page: this.page });\n  }\n\n  /**\n   * The aria-sort value for a column.\n   *\n   * Not named ariaSort: HTMLElement reflects that ARIA attribute as a string\n   * property, and shadowing it with a method breaks the element's own typing.\n   */\n  private sortStateFor(column: KtTableColumn): 'ascending' | 'descending' | 'none' {\n    if (this.sortKey !== column.key || !this.sortDirection) return 'none';\n    return this.sortDirection === 'asc' ? 'ascending' : 'descending';\n  }\n\n  private renderHeaderCell(column: KtTableColumn): TemplateResult {\n    const title = column.label ?? column.key;\n    const active = this.sortKey === column.key && this.sortDirection !== null;\n\n    return html`<th\n      part=\"header-cell\"\n      scope=\"col\"\n      style=${styleMap(column.width ? { width: column.width } : {})}\n      aria-sort=${this.sortStateFor(column)}\n    >\n      ${\n        column.sortable\n          ? html`<button type=\"button\" @click=${() => this.toggleSort(column)}>\n              <span>${title}</span>\n              <span class=\"indicator\" aria-hidden=\"true\"\n                >${active ? (this.sortDirection === 'asc' ? '▲' : '▼') : ''}</span\n              >\n            </button>`\n          : html`<span>${title}</span>`\n      }\n    </th>`;\n  }\n\n  private renderBody(): TemplateResult {\n    const rows = this.visibleRows;\n    const columnCount = this.columns.length + (this.selectable ? 1 : 0);\n\n    if (rows.length === 0) {\n      return html`<tr>\n        <td colspan=${columnCount}>\n          <div class=\"placeholder\">${this.emptyText}</div>\n        </td>\n      </tr>`;\n    }\n\n    return html`${rows.map((row, index) => {\n      const selected = this.isSelected(row);\n\n      return html`<tr\n        part=\"row\"\n        class=${classMap({ selected })}\n        aria-selected=${this.selectable ? String(selected) : nothing}\n        @click=${() => emit(this, 'kt-row-click', { row, index })}\n      >\n        ${\n          this.selectable\n            ? html`<td class=\"select-cell\">\n                <input\n                  type=${this.selectionMode === 'single' ? 'radio' : 'checkbox'}\n                  name=${this.selectionMode === 'single' ? 'kt-table-selection' : nothing}\n                  .checked=${selected}\n                  aria-label=\"Select row\"\n                  @click=${(event: Event) => event.stopPropagation()}\n                  @change=${() => this.toggleSelection(row)}\n                />\n              </td>`\n            : nothing\n        }\n        ${this.columns.map((column) => {\n          const rendered = this.renderCell?.(row, column);\n          return html`<td part=\"cell\" style=${styleMap({ textAlign: column.align ?? 'left' })}>\n            ${rendered === undefined ? row[column.key] : rendered}\n          </td>`;\n        })}\n      </tr>`;\n    })}`;\n  }\n\n  override render(): TemplateResult {\n    if (this.loading) {\n      return html`<div class=\"placeholder\" role=\"status\" aria-live=\"polite\">\n        ${this.loadingText}\n      </div>`;\n    }\n\n    const rows = this.visibleRows;\n    const allSelected = rows.length > 0 && rows.every((row) => this.isSelected(row));\n    const someSelected = rows.some((row) => this.isSelected(row));\n\n    return html`<div class=\"scroller\">\n        <table part=\"table\" aria-label=${this.label || nothing}>\n          <thead>\n            <tr>\n              ${\n                this.selectable\n                  ? html`<th class=\"select-cell\" scope=\"col\">\n                      ${\n                        this.selectionMode === 'multiple'\n                          ? html`<input\n                              type=\"checkbox\"\n                              .checked=${allSelected}\n                              .indeterminate=${someSelected && !allSelected}\n                              aria-label=\"Select all\"\n                              @change=${this.toggleAll}\n                            />`\n                          : nothing\n                      }\n                    </th>`\n                  : nothing\n              }\n              ${this.columns.map((column) => this.renderHeaderCell(column))}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.renderBody()}\n          </tbody>\n        </table>\n      </div>\n\n      ${\n        this.pageSize > 0\n          ? html`<footer>\n              <kt-pagination\n                .page=${Math.min(this.page, this.totalPages)}\n                .totalPages=${this.totalPages}\n                @kt-page-change=${this.onPageChange}\n              ></kt-pagination>\n            </footer>`\n          : nothing\n      }`;\n  }\n}\n\ndefineElement('kt-table', KtTable);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-table': KtTable;\n  }\n}\n"],"names":["collator","sortableText","value","rowKey","row","KtTable","KtElement","css","key","sign","a","b","left","right","leftEmpty","rightEmpty","rows","page","column","emit","candidate","keys","allSelected","event","title","active","html","styleMap","columnCount","index","selected","classMap","nothing","rendered","someSelected","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/components/data/kt-timeline/kt-timeline.d.ts

@@ -0,0 +1,78 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtTimelineVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * An ordered run of events on a rail.
+ *
+ * The same shape keeps reappearing — an activity feed, an audit log, a
+ * changelog, the stages of a delivery, a résumé — and every time it gets
+ * rebuilt out of a list, a pseudo-element line and a hand-placed dot. The
+ * fiddly part is the rail: it must start at the first dot and stop at the
+ * last, which a border on the list cannot do. Here each item draws its own
+ * segment and the last one is told to stop.
+ *
+ * `<kt-timeline>` is the semantic list; `<kt-timeline-item>` is one event.
+ *
+ * @element kt-timeline
+ *
+ * @slot - The `<kt-timeline-item>` children.
+ *
+ * @csspart base - The list.
+ *
+ * @example
+ * ```html
+ * <kt-timeline>
+ *   <kt-timeline-item heading="Deployed" time="09:24" variant="success" icon="rocket">
+ *     Build 4210 went to production.
+ *   </kt-timeline-item>
+ *   <kt-timeline-item heading="Review requested" time="09:02" icon="eye"></kt-timeline-item>
+ * </kt-timeline>
+ * ```
+ */
+export declare class KtTimeline extends KtElement {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    /** Tighter rhythm, for a feed in a side panel. */
+    compact: boolean;
+    render(): TemplateResult;
+    /**
+     * The first `slotchange` is a microtask that can land after `updateComplete`,
+     * so a caller that awaits the element would read stale items. Sync once the
+     * shadow root exists as well as on every later change.
+     */
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+}
+/**
+ * One event on a `<kt-timeline>`.
+ *
+ * @element kt-timeline-item
+ *
+ * @slot - The body of the event.
+ * @slot actions - Trailing controls, aligned with the heading.
+ *
+ * @csspart base - The row.
+ * @csspart marker - The dot or icon.
+ */
+export declare class KtTimelineItem extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    /** Shown right-aligned on the heading row. Any string — "09:24", "2 days ago". */
+    time: string;
+    /** Lucide icon name. Without one the marker is a plain dot. */
+    icon: string;
+    variant: KtTimelineVariant;
+    /** Set by the parent `<kt-timeline>`: drops the trailing rail segment. */
+    last: boolean;
+    /** Set by the parent `<kt-timeline>`. */
+    compact: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-timeline': KtTimeline;
+        'kt-timeline-item': KtTimelineItem;
+    }
+}