kanto-ds 1.2.0 → 1.4.0

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

@@ -1,6 +1,6 @@
 import { css as m, html as r, nothing as o } from "lit";
 import { property as i } from "lit/decorators.js";
-import { K as u, d as c } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as u, d as c } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var g = Object.defineProperty, n = (d, t, e, s) => {
   for (var a = void 0, p = d.length - 1, h; p >= 0; p--)
     (h = d[p]) && (a = h(t, e, a) || a);

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

@@ -24,7 +24,7 @@ export declare class KtPagination extends KtElement {
     /** The current page, 1-based. */
     page: number;
     totalPages: number;
-    label: string;
+    label: string | undefined;
     private go;
     render(): TemplateResult;
 }

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

@@ -1,21 +1,22 @@
-import { css as g, html as h } from "lit";
-import { property as o } from "lit/decorators.js";
-import { K as l, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
+import { css as h, html as m } from "lit";
+import { property as n } from "lit/decorators.js";
+import { K as g, d as c } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as i } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-button/kt-button.js";
-var u = Object.defineProperty, n = (r, a, t, d) => {
-  for (var e = void 0, s = r.length - 1, p; s >= 0; s--)
-    (p = r[s]) && (e = p(a, t, e) || e);
-  return e && u(a, t, e), e;
+var d = Object.defineProperty, p = (r, a, t, f) => {
+  for (var e = void 0, o = r.length - 1, l; o >= 0; o--)
+    (l = r[o]) && (e = l(a, t, e) || e);
+  return e && d(a, t, e), e;
 };
-class i extends l {
+class s extends g {
   constructor() {
-    super(...arguments), this.page = 1, this.totalPages = 1, this.label = "Pagination";
+    super(...arguments), this.page = 1, this.totalPages = 1, this.label = void 0;
   }
   static {
     this.styles = [
-      l.styles,
-      g`
+      g.styles,
+      h`
       :host {
         display: block;
       }
@@ -38,11 +39,11 @@ class i extends l {
   }
   go(a) {
     const t = Math.min(Math.max(a, 1), Math.max(this.totalPages, 1));
-    t !== this.page && (this.page = t, c(this, "kt-page-change", { page: t }));
+    t !== this.page && (this.page = t, u(this, "kt-page-change", { page: t }));
   }
   render() {
     const a = this.page <= 1, t = this.page >= this.totalPages;
-    return h`<nav aria-label=${this.label}>
+    return m`<nav aria-label=${this.label ?? i().pagination}>
       <kt-button
         part="previous"
         variant="dark"
@@ -50,13 +51,13 @@ class i extends l {
         icon="chevron-left"
         ?disabled=${a}
         @click=${() => this.go(this.page - 1)}
-        >Previous</kt-button
+        >${i().previous}</kt-button
       >
 
       <!-- polite, so a page change is announced without interrupting whatever
            the reader is already working through -->
       <span part="info" class="info" aria-live="polite">
-        Page ${this.page} / ${this.totalPages}
+        ${i().pageOf(this.page, this.totalPages)}
       </span>
 
       <kt-button
@@ -67,22 +68,22 @@ class i extends l {
         icon-position="right"
         ?disabled=${t}
         @click=${() => this.go(this.page + 1)}
-        >Next</kt-button
+        >${i().next}</kt-button
       >
     </nav>`;
   }
 }
-n([
-  o({ type: Number })
-], i.prototype, "page");
-n([
-  o({ type: Number, attribute: "total-pages" })
-], i.prototype, "totalPages");
-n([
-  o({ type: String })
-], i.prototype, "label");
-m("kt-pagination", i);
+p([
+  n({ type: Number })
+], s.prototype, "page");
+p([
+  n({ type: Number, attribute: "total-pages" })
+], s.prototype, "totalPages");
+p([
+  n({ type: String })
+], s.prototype, "label");
+c("kt-pagination", s);
 export {
-  i as KtPagination
+  s as KtPagination
 };
 //# sourceMappingURL=kt-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kt-pagination.js","sources":["../../../../src/components/data/kt-pagination/kt-pagination.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * Previous / next paging, with the position between them.\n *\n * Extracted from the table footer so a card list or a gallery can page the same\n * way a table does.\n *\n * The two controls are `<kt-button variant=\"dark\">`, not buttons of its own:\n * a paging control that invents its own colours, hover and disabled states is\n * how a design system ends up with two kinds of button on one screen.\n *\n * @element kt-pagination\n *\n * @csspart previous - The previous button.\n * @csspart next - The next button.\n * @csspart info - The \"Page 2 / 7\" text.\n *\n * @fires kt-page-change - A page was requested. `detail: { page }`.\n */\nexport class KtPagination extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      .info {\n        padding: 0 4px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  /** The current page, 1-based. */\n  @property({ type: Number })\n  page = 1;\n\n  @property({ type: Number, attribute: 'total-pages' })\n  totalPages = 1;\n\n  @property({ type: String })\n  label = 'Pagination';\n\n  private go(target: number): void {\n    const next = Math.min(Math.max(target, 1), Math.max(this.totalPages, 1));\n    if (next === this.page) return;\n\n    this.page = next;\n    emit(this, 'kt-page-change', { page: next });\n  }\n\n  override render(): TemplateResult {\n    const first = this.page <= 1;\n    const last = this.page >= this.totalPages;\n\n    return html`<nav aria-label=${this.label}>\n      <kt-button\n        part=\"previous\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-left\"\n        ?disabled=${first}\n        @click=${() => this.go(this.page - 1)}\n        >Previous</kt-button\n      >\n\n      <!-- polite, so a page change is announced without interrupting whatever\n           the reader is already working through -->\n      <span part=\"info\" class=\"info\" aria-live=\"polite\">\n        Page ${this.page} / ${this.totalPages}\n      </span>\n\n      <kt-button\n        part=\"next\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-right\"\n        icon-position=\"right\"\n        ?disabled=${last}\n        @click=${() => this.go(this.page + 1)}\n        >Next</kt-button\n      >\n    </nav>`;\n  }\n}\n\ndefineElement('kt-pagination', KtPagination);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-pagination': KtPagination;\n  }\n}\n"],"names":["KtPagination","KtElement","css","target","next","emit","first","last","html","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAwBO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0BL,KAAA,OAAO,GAGP,KAAA,aAAa,GAGb,KAAA,QAAQ;AAAA,EAAA;AAAA,EA/BR,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,IAAA;AAAA,EAmBF;AAAA,EAYQ,GAAGC,GAAsB;AAC/B,UAAMC,IAAO,KAAK,IAAI,KAAK,IAAID,GAAQ,CAAC,GAAG,KAAK,IAAI,KAAK,YAAY,CAAC,CAAC;AACvE,IAAIC,MAAS,KAAK,SAElB,KAAK,OAAOA,GACZC,EAAK,MAAM,kBAAkB,EAAE,MAAMD,GAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,UAAME,IAAQ,KAAK,QAAQ,GACrBC,IAAO,KAAK,QAAQ,KAAK;AAE/B,WAAOC,oBAAuB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxBF,CAAK;AAAA,iBACR,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO9B,KAAK,IAAI,MAAM,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASzBC,CAAI;AAAA,iBACP,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAI3C;AACF;AAjDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBfV,EA0BX,WAAA,MAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA5BzCV,EA6BX,WAAA,YAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/BfV,EAgCX,WAAA,OAAA;AA6CFW,EAAc,iBAAiBX,CAAY;"}
+{"version":3,"file":"kt-pagination.js","sources":["../../../../src/components/data/kt-pagination/kt-pagination.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * Previous / next paging, with the position between them.\n *\n * Extracted from the table footer so a card list or a gallery can page the same\n * way a table does.\n *\n * The two controls are `<kt-button variant=\"dark\">`, not buttons of its own:\n * a paging control that invents its own colours, hover and disabled states is\n * how a design system ends up with two kinds of button on one screen.\n *\n * @element kt-pagination\n *\n * @csspart previous - The previous button.\n * @csspart next - The next button.\n * @csspart info - The \"Page 2 / 7\" text.\n *\n * @fires kt-page-change - A page was requested. `detail: { page }`.\n */\nexport class KtPagination extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      .info {\n        padding: 0 4px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  /** The current page, 1-based. */\n  @property({ type: Number })\n  page = 1;\n\n  @property({ type: Number, attribute: 'total-pages' })\n  totalPages = 1;\n\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  private go(target: number): void {\n    const next = Math.min(Math.max(target, 1), Math.max(this.totalPages, 1));\n    if (next === this.page) return;\n\n    this.page = next;\n    emit(this, 'kt-page-change', { page: next });\n  }\n\n  override render(): TemplateResult {\n    const first = this.page <= 1;\n    const last = this.page >= this.totalPages;\n\n    return html`<nav aria-label=${this.label ?? strings().pagination}>\n      <kt-button\n        part=\"previous\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-left\"\n        ?disabled=${first}\n        @click=${() => this.go(this.page - 1)}\n        >${strings().previous}</kt-button\n      >\n\n      <!-- polite, so a page change is announced without interrupting whatever\n           the reader is already working through -->\n      <span part=\"info\" class=\"info\" aria-live=\"polite\">\n        ${strings().pageOf(this.page, this.totalPages)}\n      </span>\n\n      <kt-button\n        part=\"next\"\n        variant=\"dark\"\n        size=\"small\"\n        icon=\"chevron-right\"\n        icon-position=\"right\"\n        ?disabled=${last}\n        @click=${() => this.go(this.page + 1)}\n        >${strings().next}</kt-button\n      >\n    </nav>`;\n  }\n}\n\ndefineElement('kt-pagination', KtPagination);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-pagination': KtPagination;\n  }\n}\n"],"names":["KtPagination","KtElement","css","target","next","emit","first","last","html","strings","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAyBO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0BL,KAAA,OAAO,GAGP,KAAA,aAAa,GAGb,KAAA,QAA4B;AAAA,EAAA;AAAA,EA/B5B,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,IAAA;AAAA,EAmBF;AAAA,EAYQ,GAAGC,GAAsB;AAC/B,UAAMC,IAAO,KAAK,IAAI,KAAK,IAAID,GAAQ,CAAC,GAAG,KAAK,IAAI,KAAK,YAAY,CAAC,CAAC;AACvE,IAAIC,MAAS,KAAK,SAElB,KAAK,OAAOA,GACZC,EAAK,MAAM,kBAAkB,EAAE,MAAMD,GAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,UAAME,IAAQ,KAAK,QAAQ,GACrBC,IAAO,KAAK,QAAQ,KAAK;AAE/B,WAAOC,oBAAuB,KAAK,SAASC,EAAA,EAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhDH,CAAK;AAAA,iBACR,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA,WAClCG,EAAA,EAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMnBA,IAAU,OAAO,KAAK,MAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASlCF,CAAI;AAAA,iBACP,MAAM,KAAK,GAAG,KAAK,OAAO,CAAC,CAAC;AAAA,WAClCE,EAAA,EAAU,IAAI;AAAA;AAAA;AAAA,EAGvB;AACF;AAjDEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBfX,EA0BX,WAAA,MAAA;AAGAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA5BzCX,EA6BX,WAAA,YAAA;AAGAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/BfX,EAgCX,WAAA,OAAA;AA6CFY,EAAc,iBAAiBZ,CAAY;"}

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

@@ -1,6 +1,6 @@
 import { css as h, nothing as l, html as r } from "lit";
 import { property as e } from "lit/decorators.js";
-import { K as c, d as f } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as c, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";

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

@@ -60,8 +60,8 @@ export declare class KtTable extends KtElement {
     sortDirection: KtSortDirection;
     /** Renders a cell. Return `undefined` to fall back to the raw value. */
     renderCell: KtCellRenderer | undefined;
-    emptyText: string;
-    loadingText: string;
+    emptyText: string | undefined;
+    loadingText: string | undefined;
     /** Accessible name for the table. */
     label: string;
     /** The rows after sorting, before paging. */

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

@@ -1,17 +1,18 @@
-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-B_jjQDhg.js";
+import { css as k, html as d, nothing as h } from "lit";
+import { state as $, property as n } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { K as m, d as S } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as u } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-pagination/kt-pagination.js";
-var v = Object.defineProperty, a = (o, t, e, s) => {
+var w = 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;
+  return i && w(t, e, i), i;
 };
-const w = new Intl.Collator("en", { numeric: !0, sensitivity: "base" });
-function m(o) {
+const D = new Intl.Collator("en", { numeric: !0, sensitivity: "base" });
+function x(o) {
   if (typeof o == "string") return o;
   if (typeof o == "number" || typeof o == "boolean" || typeof o == "bigint")
     return String(o);
@@ -21,17 +22,17 @@ function m(o) {
     return "";
   }
 }
-function u(o) {
+function y(o) {
   return o.id ?? o.uid ?? o;
 }
-class r extends f {
+class r extends m {
   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 = "";
+    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 = void 0, this.loadingText = void 0, this.label = "";
   }
   static {
     this.styles = [
-      f.styles,
-      x`
+      m.styles,
+      k`
       :host {
         display: block;
         width: 100%;
@@ -153,8 +154,8 @@ class r extends f {
     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;
+      const c = s[t], l = i[t], p = c == null, b = l == null;
+      return p && b ? 0 : p ? 1 : b ? -1 : typeof c == "number" && typeof l == "number" ? (c - l) * e : D.compare(x(c), x(l)) * e;
     });
   }
   get totalPages() {
@@ -175,20 +176,20 @@ class r extends f {
     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));
+    return this.selected.includes(y(t));
   }
   toggleSelection(t) {
-    const e = u(t);
+    const e = y(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));
+    const e = this.visibleRows.map(y), 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)));
+    return this.data.filter((t) => this.selected.includes(y(t)));
   }
   onPageChange(t) {
     t.stopPropagation(), this.page = t.detail.page, g(this, "kt-page-change", { page: this.page });
@@ -207,7 +208,7 @@ class r extends f {
     return d`<th
       part="header-cell"
       scope="col"
-      style=${b(t.width ? { width: t.width } : {})}
+      style=${f(t.width ? { width: t.width } : {})}
       aria-sort=${this.sortStateFor(t)}
     >
       ${t.sortable ? d`<button type="button" @click=${() => this.toggleSort(t)}>
@@ -222,13 +223,13 @@ class r extends f {
     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>
+          <div class="placeholder">${this.emptyText ?? u().noData}</div>
         </td>
       </tr>` : d`${t.map((s, i) => {
       const c = this.isSelected(s);
       return d`<tr
         part="row"
-        class=${S({ selected: c })}
+        class=${v({ selected: c })}
         aria-selected=${this.selectable ? String(c) : h}
         @click=${() => g(this, "kt-row-click", { row: s, index: i })}
       >
@@ -237,14 +238,14 @@ class r extends f {
                   type=${this.selectionMode === "single" ? "radio" : "checkbox"}
                   name=${this.selectionMode === "single" ? "kt-table-selection" : h}
                   .checked=${c}
-                  aria-label="Select row"
+                  aria-label=${u().selectRow}
                   @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" })}>
+        return d`<td part="cell" style=${f({ textAlign: l.align ?? "left" })}>
             ${p === void 0 ? s[l.key] : p}
           </td>`;
       })}
@@ -254,7 +255,7 @@ class r extends f {
   render() {
     if (this.loading)
       return d`<div class="placeholder" role="status" aria-live="polite">
-        ${this.loadingText}
+        ${this.loadingText ?? u().loading}
       </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">
@@ -266,7 +267,7 @@ class r extends f {
                               type="checkbox"
                               .checked=${e}
                               .indeterminate=${s && !e}
-                              aria-label="Select all"
+                              aria-label=${u().selectAll}
                               @change=${this.toggleAll}
                             />` : h}
                     </th>` : h}
@@ -289,7 +290,7 @@ class r extends f {
   }
 }
 a([
-  k()
+  $()
 ], r.prototype, "page");
 a([
   n({ attribute: !1 })
@@ -333,7 +334,7 @@ a([
 a([
   n({ type: String })
 ], r.prototype, "label");
-$("kt-table", r);
+S("kt-table", r);
 export {
   r as KtTable
 };

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

@@ -1 +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-text);\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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"}
+{"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 { strings } from '#internal/strings';\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-text);\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: string | undefined = undefined;\n\n  @property({ type: String, attribute: 'loading-text' })\n  loadingText: string | undefined = undefined;\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 ?? strings().noData}</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=${strings().selectRow}\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 ?? strings().loading}\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=${strings().selectAll}\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","strings","index","selected","classMap","nothing","rendered","someSelected","__decorateClass","state","property","defineElement"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { css as h, html as s, nothing as m } from "lit";
 import { property as a } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
-import { K as c, d as f } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as c, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../../core/kt-icon/kt-icon.js";
 var v = Object.defineProperty, i = (l, r, o, n) => {
   for (var e = void 0, p = l.length - 1, d; p >= 0; p--)

package/dist/components/feedback/kt-alert/kt-alert.js

@@ -1,14 +1,15 @@
-import { css as v, nothing as n, html as e } from "lit";
+import { css as v, nothing as s, html as e } from "lit";
 import { property as t } from "lit/decorators.js";
-import { K as p, d as h } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { K as p, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as f } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
-var f = Object.defineProperty, a = (s, i, c, b) => {
-  for (var r = void 0, l = s.length - 1, d; l >= 0; l--)
-    (d = s[l]) && (r = d(i, c, r) || r);
-  return r && f(i, c, r), r;
+var u = Object.defineProperty, a = (n, i, c, b) => {
+  for (var r = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (r = d(i, c, r) || r);
+  return r && u(i, c, r), r;
 };
-const u = {
+const m = {
   info: "info",
   success: "circle-check",
   warning: "triangle-alert",
@@ -133,13 +134,13 @@ class o extends p {
   render() {
     const i = this.variant === "danger" ? "assertive" : "polite";
     return e`<div part="base" class="alert" role="alert" aria-live=${i}>
-      ${this.noIcon ? n : e`<span class="icon">
-              <kt-icon name=${this.icon || u[this.variant]} size="20"></kt-icon>
+      ${this.noIcon ? s : e`<span class="icon">
+              <kt-icon name=${this.icon || m[this.variant]} size="20"></kt-icon>
             </span>`}
 
       <div class="content">
-        ${this.heading ? e`<span class="heading">${this.heading}</span>` : n}
-        ${this.description ? e`<span class="description">${this.description}</span>` : n}
+        ${this.heading ? e`<span class="heading">${this.heading}</span>` : s}
+        ${this.description ? e`<span class="description">${this.description}</span>` : s}
         <slot></slot>
         <div class="actions"><slot name="actions"></slot></div>
       </div>
@@ -147,11 +148,11 @@ class o extends p {
       ${this.dismissible ? e`<button
               part="close"
               class="close"
-              aria-label="Dismiss"
-              @click=${() => g(this, "kt-close")}
+              aria-label=${f().dismiss}
+              @click=${() => h(this, "kt-close")}
             >
               <kt-icon name="x" size="16"></kt-icon>
-            </button>` : n}
+            </button>` : s}
     </div>`;
   }
 }
@@ -173,7 +174,7 @@ a([
 a([
   t({ type: String })
 ], o.prototype, "icon");
-h("kt-alert", o);
+g("kt-alert", o);
 export {
   o as KtAlert
 };

package/dist/components/feedback/kt-alert/kt-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n  info: 'info',\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  danger: 'circle-alert',\n  neutral: 'info',\n};\n\n/**\n * A message that stays on the page.\n *\n * Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n *\n * @element kt-alert\n *\n * @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n *\n * @csspart base - The alert.\n * @csspart close - The dismiss button.\n *\n * @fires kt-close - The dismiss button was pressed.\n *\n * @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n *           description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n */\nexport class KtAlert extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .alert {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--gap-form);\n        padding: var(--padding-form);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius);\n      }\n\n      /* A tinted fill plus a matching border, rather than a coloured bar: the\n         whole block should read as the message's temperature. */\n      :host([variant='info']) .alert {\n        background: var(--color-info-soft);\n        border-color: var(--color-info-base);\n      }\n      :host([variant='success']) .alert {\n        background: var(--color-success-soft);\n        border-color: var(--color-success-base);\n      }\n      :host([variant='warning']) .alert {\n        background: var(--color-warning-soft);\n        border-color: var(--color-warning-base);\n      }\n      :host([variant='danger']) .alert {\n        background: var(--color-danger-soft);\n        border-color: var(--color-danger-base);\n      }\n\n      .icon {\n        display: flex;\n        flex: none;\n        padding-top: 1px;\n      }\n\n      :host([variant='info']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='danger']) .icon {\n        color: var(--color-danger-text);\n      }\n      :host([variant='neutral']) .icon {\n        color: var(--text-muted);\n      }\n\n      .content {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: var(--gap-element);\n        min-width: 0;\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        margin-top: 4px;\n      }\n\n      .actions:not(:has(*)) {\n        display: none;\n      }\n\n      .close {\n        display: flex;\n        flex: none;\n        align-items: center;\n        padding: 2px;\n        color: currentcolor;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0.7;\n      }\n\n      .close:hover {\n        opacity: 1;\n      }\n\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: KtAlertVariant = 'info';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Adds a dismiss button. Removing the alert is the caller's job. */\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /** Hides the leading icon. */\n  @property({ type: Boolean, attribute: 'no-icon' })\n  noIcon = false;\n\n  /** Overrides the icon the variant would pick. */\n  @property({ type: String })\n  icon = '';\n\n  override render(): TemplateResult {\n    // Danger interrupts; the rest wait their turn.\n    const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n      ${\n        this.noIcon\n          ? nothing\n          : html`<span class=\"icon\">\n              <kt-icon name=${this.icon || ICONS[this.variant]} size=\"20\"></kt-icon>\n            </span>`\n      }\n\n      <div class=\"content\">\n        ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n        ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n        <slot></slot>\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=\"Dismiss\"\n              @click=${() => emit(this, 'kt-close')}\n            >\n              <kt-icon name=\"x\" size=\"16\"></kt-icon>\n            </button>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-alert': KtAlert;\n  }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAQA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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;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,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA;AAAA,uBAIW,MAAME,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCD,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BR,EAgHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfR,EAmHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfR,EAsHX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBR,EA0HX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCR,EA8HX,WAAA,QAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfR,EAkIX,WAAA,MAAA;AAsCFS,EAAc,YAAYT,CAAO;"}
+{"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n  info: 'info',\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  danger: 'circle-alert',\n  neutral: 'info',\n};\n\n/**\n * A message that stays on the page.\n *\n * Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n *\n * @element kt-alert\n *\n * @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n *\n * @csspart base - The alert.\n * @csspart close - The dismiss button.\n *\n * @fires kt-close - The dismiss button was pressed.\n *\n * @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n *           description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n */\nexport class KtAlert extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .alert {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--gap-form);\n        padding: var(--padding-form);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius);\n      }\n\n      /* A tinted fill plus a matching border, rather than a coloured bar: the\n         whole block should read as the message's temperature. */\n      :host([variant='info']) .alert {\n        background: var(--color-info-soft);\n        border-color: var(--color-info-base);\n      }\n      :host([variant='success']) .alert {\n        background: var(--color-success-soft);\n        border-color: var(--color-success-base);\n      }\n      :host([variant='warning']) .alert {\n        background: var(--color-warning-soft);\n        border-color: var(--color-warning-base);\n      }\n      :host([variant='danger']) .alert {\n        background: var(--color-danger-soft);\n        border-color: var(--color-danger-base);\n      }\n\n      .icon {\n        display: flex;\n        flex: none;\n        padding-top: 1px;\n      }\n\n      :host([variant='info']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='danger']) .icon {\n        color: var(--color-danger-text);\n      }\n      :host([variant='neutral']) .icon {\n        color: var(--text-muted);\n      }\n\n      .content {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: var(--gap-element);\n        min-width: 0;\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        margin-top: 4px;\n      }\n\n      .actions:not(:has(*)) {\n        display: none;\n      }\n\n      .close {\n        display: flex;\n        flex: none;\n        align-items: center;\n        padding: 2px;\n        color: currentcolor;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0.7;\n      }\n\n      .close:hover {\n        opacity: 1;\n      }\n\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: KtAlertVariant = 'info';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Adds a dismiss button. Removing the alert is the caller's job. */\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /** Hides the leading icon. */\n  @property({ type: Boolean, attribute: 'no-icon' })\n  noIcon = false;\n\n  /** Overrides the icon the variant would pick. */\n  @property({ type: String })\n  icon = '';\n\n  override render(): TemplateResult {\n    // Danger interrupts; the rest wait their turn.\n    const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n      ${\n        this.noIcon\n          ? nothing\n          : html`<span class=\"icon\">\n              <kt-icon name=${this.icon || ICONS[this.variant]} size=\"20\"></kt-icon>\n            </span>`\n      }\n\n      <div class=\"content\">\n        ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n        ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n        <slot></slot>\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=${strings().dismiss}\n              @click=${() => emit(this, 'kt-close')}\n            >\n              <kt-icon name=\"x\" size=\"16\"></kt-icon>\n            </button>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-alert': KtAlert;\n  }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","strings","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AASA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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;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,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA,2BAGeE,EAAA,EAAU,OAAO;AAAA,uBACrB,MAAMC,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCF,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BT,EAgHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfT,EAmHX,WAAA,SAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfT,EAsHX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBT,EA0HX,WAAA,aAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCT,EA8HX,WAAA,QAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfT,EAkIX,WAAA,MAAA;AAsCFU,EAAc,YAAYV,CAAO;"}

package/dist/components/feedback/kt-empty-state/kt-empty-state.js

@@ -1,6 +1,6 @@
 import { css as h, nothing as r, html as i } from "lit";
 import { property as n } from "lit/decorators.js";
-import { K as d, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as d, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../../core/kt-icon/kt-icon.js";
 var g = Object.defineProperty, o = (s, p, c, f) => {
   for (var t = void 0, a = s.length - 1, l; a >= 0; a--)

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js

@@ -2,7 +2,7 @@ import { css as v, nothing as p, html as o } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as u, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var f = Object.defineProperty, r = (n, e, i, c) => {
   for (var s = void 0, l = n.length - 1, d; l >= 0; l--)
     (d = n[l]) && (s = d(e, i, s) || s);

package/dist/components/feedback/kt-skeleton/kt-skeleton.js

@@ -2,7 +2,7 @@ import { css as c, html as d } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as f } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as u, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var y = Object.defineProperty, a = (n, i, t, p) => {
   for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
     (l = n[o]) && (e = l(i, t, e) || e);