kanto-ds 1.0.0

package/dist/components/overlays/kt-side-panel/kt-side-panel.js

@@ -0,0 +1,178 @@
+import { css as g, nothing as d, html as p } from "lit";
+import { query as f, property as a } from "lit/decorators.js";
+import { K as c, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
+import { o as h, c as v, i as b } from "../../../chunks/dialog-CPIfFIlF.js";
+import "../../core/kt-button/kt-button.js";
+var y = Object.defineProperty, r = (i, e, l, x) => {
+  for (var o = void 0, s = i.length - 1, n; s >= 0; s--)
+    (n = i[s]) && (o = n(e, l, o) || o);
+  return o && y(e, l, o), o;
+};
+class t extends c {
+  constructor() {
+    super(...arguments), this.open = !1, this.eyebrow = "Details", this.heading = "", this.noBackdropClose = !1;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      g`
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: auto;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-drag-drop);
+        box-sizing: border-box;
+        width: 308px;
+        max-width: 100%;
+        height: 100vh;
+        max-height: 100vh;
+        margin: 0;
+        padding: var(--padding-card);
+        overflow: hidden;
+        color: var(--text-body);
+        background-color: var(--surface-card);
+        border: none;
+        transform: translateX(100%);
+        transition:
+          transform var(--duration-normal) var(--easing-standard),
+          overlay var(--duration-normal) allow-discrete,
+          display var(--duration-normal) allow-discrete;
+      }
+
+      dialog[open] {
+        transform: translateX(0);
+      }
+
+      /* The panel starts off-screen on open, so the slide runs the first time
+         too rather than only on close. */
+      @starting-style {
+        dialog[open] {
+          transform: translateX(100%);
+        }
+      }
+
+      dialog::backdrop {
+        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));
+      }
+
+      .header {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-drag-drop);
+      }
+
+      .titles {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .eyebrow {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+      }
+
+      h2 {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+
+      .divider {
+        width: 100%;
+        margin: 0;
+        border: 0;
+        border-bottom: var(--border-width) solid var(--border-subtle);
+      }
+
+      .body {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        dialog {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  updated(e) {
+    e.has("open") && (this.open ? h(this.dialog) : v(this.dialog));
+  }
+  /** Asks to close. A cancelled `kt-close` keeps the panel open. */
+  requestClose() {
+    if (u(this, "kt-close").defaultPrevented) {
+      this.dialog.open || h(this.dialog);
+      return;
+    }
+    this.open = !1;
+  }
+  /** Escape and the native close both land here. */
+  onDialogClose() {
+    this.open && this.requestClose();
+  }
+  onDialogClick(e) {
+    this.noBackdropClose || b(this.dialog, e) && this.requestClose();
+  }
+  render() {
+    return p`<dialog
+      part="dialog"
+      aria-label=${this.heading || d}
+      @close=${this.onDialogClose}
+      @click=${this.onDialogClick}
+    >
+      <div part="header" class="header">
+        <div class="titles">
+          ${this.eyebrow ? p`<div class="eyebrow">${this.eyebrow}</div>` : d}
+          <h2>${this.heading}</h2>
+        </div>
+        <kt-button
+          variant="secondary"
+          size="small"
+          icon="x"
+          label="Close"
+          @click=${this.requestClose}
+        ></kt-button>
+      </div>
+
+      <hr class="divider" />
+
+      <div part="body" class="body"><slot></slot></div>
+      <slot name="footer"></slot>
+    </dialog>`;
+  }
+}
+r([
+  f("dialog")
+], t.prototype, "dialog");
+r([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "open");
+r([
+  a({ type: String })
+], t.prototype, "eyebrow");
+r([
+  a({ type: String })
+], t.prototype, "heading");
+r([
+  a({ type: Boolean, attribute: "no-backdrop-close" })
+], t.prototype, "noBackdropClose");
+m("kt-side-panel", t);
+export {
+  t as KtSidePanel
+};
+//# sourceMappingURL=kt-side-panel.js.map

package/dist/components/overlays/kt-side-panel/kt-side-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-side-panel.js","sources":["../../../../src/components/overlays/kt-side-panel/kt-side-panel.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * A drawer that slides in from the right, for viewing or editing one record\n * without leaving the list behind it.\n *\n * Built on the native `<dialog>`: the panel lands in the top layer, focus is\n * trapped inside it, the page behind goes inert, and Escape closes it — none of\n * which the fixed-position div this replaces did.\n *\n * @element kt-side-panel\n *\n * @slot - The panel body.\n * @slot footer - Pinned below the body.\n *\n * @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n *\n * @fires kt-close - The panel was dismissed. Cancelable: cancel it to keep the\n *   panel open, for an unsaved-changes prompt.\n *\n * @example\n * ```html\n * <kt-side-panel open eyebrow=\"Details\" heading=\"Entity 4812\">\n *   <p>…</p>\n * </kt-side-panel>\n * ```\n */\nexport class KtSidePanel extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      dialog {\n        position: fixed;\n        top: 0;\n        right: 0;\n        left: auto;\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-drag-drop);\n        box-sizing: border-box;\n        width: 308px;\n        max-width: 100%;\n        height: 100vh;\n        max-height: 100vh;\n        margin: 0;\n        padding: var(--padding-card);\n        overflow: hidden;\n        color: var(--text-body);\n        background-color: var(--surface-card);\n        border: none;\n        transform: translateX(100%);\n        transition:\n          transform var(--duration-normal) var(--easing-standard),\n          overlay var(--duration-normal) allow-discrete,\n          display var(--duration-normal) allow-discrete;\n      }\n\n      dialog[open] {\n        transform: translateX(0);\n      }\n\n      /* The panel starts off-screen on open, so the slide runs the first time\n         too rather than only on close. */\n      @starting-style {\n        dialog[open] {\n          transform: translateX(100%);\n        }\n      }\n\n      dialog::backdrop {\n        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n      }\n\n      .header {\n        display: flex;\n        flex: 0 0 auto;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-drag-drop);\n      }\n\n      .titles {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      .eyebrow {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        letter-spacing: 1px;\n        text-transform: uppercase;\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      .divider {\n        width: 100%;\n        margin: 0;\n        border: 0;\n        border-bottom: var(--border-width) solid var(--border-subtle);\n      }\n\n      .body {\n        flex: 1 1 auto;\n        overflow: auto;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        dialog {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  @query('dialog')\n  private dialog!: HTMLDialogElement;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Small uppercase label above the heading — \"Details\", \"Editing\". */\n  @property({ type: String })\n  eyebrow = 'Details';\n\n  @property({ type: String })\n  heading = '';\n\n  /** Suppresses dismissal by backdrop click. Escape still works, by design. */\n  @property({ type: Boolean, attribute: 'no-backdrop-close' })\n  noBackdropClose = false;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (!changed.has('open')) return;\n    if (this.open) openModal(this.dialog);\n    else closeDialog(this.dialog);\n  }\n\n  /** Asks to close. A cancelled `kt-close` keeps the panel open. */\n  requestClose(): void {\n    const proceed = emit(this, 'kt-close');\n    if (proceed.defaultPrevented) {\n      // The dialog may already have closed itself — Escape does that natively.\n      if (!this.dialog.open) openModal(this.dialog);\n      return;\n    }\n    this.open = false;\n  }\n\n  /** Escape and the native close both land here. */\n  private onDialogClose(): void {\n    if (this.open) this.requestClose();\n  }\n\n  private onDialogClick(event: MouseEvent): void {\n    if (this.noBackdropClose) return;\n    if (isBackdropClick(this.dialog, event)) this.requestClose();\n  }\n\n  override render(): TemplateResult {\n    return html`<dialog\n      part=\"dialog\"\n      aria-label=${this.heading || nothing}\n      @close=${this.onDialogClose}\n      @click=${this.onDialogClick}\n    >\n      <div part=\"header\" class=\"header\">\n        <div class=\"titles\">\n          ${this.eyebrow ? html`<div class=\"eyebrow\">${this.eyebrow}</div>` : nothing}\n          <h2>${this.heading}</h2>\n        </div>\n        <kt-button\n          variant=\"secondary\"\n          size=\"small\"\n          icon=\"x\"\n          label=\"Close\"\n          @click=${this.requestClose}\n        ></kt-button>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <div part=\"body\" class=\"body\"><slot></slot></div>\n      <slot name=\"footer\"></slot>\n    </dialog>`;\n  }\n}\n\ndefineElement('kt-side-panel', KtSidePanel);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-side-panel': KtSidePanel;\n  }\n}\n"],"names":["KtSidePanel","KtElement","css","changed","openModal","closeDialog","emit","event","isBackdropClick","html","nothing","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;;;;AAkCO,MAAMA,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqGL,KAAA,OAAO,IAIP,KAAA,UAAU,WAGV,KAAA,UAAU,IAIV,KAAA,kBAAkB;AAAA,EAAA;AAAA,EA/GlB,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,IAAA;AAAA,EA4FF;AAAA,EAmBS,QAAQC,GAAqC;AACpD,IAAKA,EAAQ,IAAI,MAAM,MACnB,KAAK,OAAMC,EAAU,KAAK,MAAM,IAC/BC,EAAY,KAAK,MAAM;AAAA,EAC9B;AAAA;AAAA,EAGA,eAAqB;AAEnB,QADgBC,EAAK,MAAM,UAAU,EACzB,kBAAkB;AAE5B,MAAK,KAAK,OAAO,QAAMF,EAAU,KAAK,MAAM;AAC5C;AAAA,IACF;AACA,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,IAAI,KAAK,QAAM,KAAK,aAAA;AAAA,EACtB;AAAA,EAEQ,cAAcG,GAAyB;AAC7C,IAAI,KAAK,mBACLC,EAAgB,KAAK,QAAQD,CAAK,UAAQ,aAAA;AAAA,EAChD;AAAA,EAES,SAAyB;AAChC,WAAOE;AAAA;AAAA,mBAEQ,KAAK,WAAWC,CAAO;AAAA,eAC3B,KAAK,aAAa;AAAA,eAClB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,YAIrB,KAAK,UAAUD,yBAA4B,KAAK,OAAO,WAAWC,CAAO;AAAA,gBACrE,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOT,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlC;AACF;AAtEUC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,GAjGJZ,EAkGH,WAAA,QAAA;AAGRW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApG/Bb,EAqGX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxGfb,EAyGX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Gfb,EA4GX,WAAA,SAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB;AAAA,GA/GhDb,EAgHX,WAAA,iBAAA;AA0DFc,EAAc,iBAAiBd,CAAW;"}

package/dist/icons/defaults.d.ts

@@ -0,0 +1,25 @@
+/** Icons referenced by Kanto elements, keyed by their Lucide name. */
+export declare const defaultIcons: {
+    ArrowDown: import("lucide").IconNode;
+    ArrowUp: import("lucide").IconNode;
+    Check: import("lucide").IconNode;
+    ChevronDown: import("lucide").IconNode;
+    ChevronLeft: import("lucide").IconNode;
+    ChevronRight: import("lucide").IconNode;
+    ChevronUp: import("lucide").IconNode;
+    CircleAlert: import("lucide").IconNode;
+    CircleCheck: import("lucide").IconNode;
+    Copy: import("lucide").IconNode;
+    Eye: import("lucide").IconNode;
+    EyeOff: import("lucide").IconNode;
+    File: import("lucide").IconNode;
+    FileUp: import("lucide").IconNode;
+    Info: import("lucide").IconNode;
+    LoaderCircle: import("lucide").IconNode;
+    Menu: import("lucide").IconNode;
+    Search: import("lucide").IconNode;
+    Trash2: import("lucide").IconNode;
+    TriangleAlert: import("lucide").IconNode;
+    User: import("lucide").IconNode;
+    X: import("lucide").IconNode;
+};

package/dist/icons/index.d.ts

@@ -0,0 +1,3 @@
+export { getIcon, registerIcon, registerIcons, registeredIcons, toKebabCase } from './registry.js';
+export type { IconNode } from './registry.js';
+export { defaultIcons } from './defaults.js';

package/dist/icons/index.js

@@ -0,0 +1,37 @@
+import { a as e } from "../chunks/registry-X4LS9J5K.js";
+import { g as E, r as F, b as L, t as T } from "../chunks/registry-X4LS9J5K.js";
+import { X as r, User as o, TriangleAlert as t, Trash2 as n, Search as s, Menu as a, LoaderCircle as c, Info as i, FileUp as C, File as h, EyeOff as l, Eye as f, Copy as p, CircleCheck as g, CircleAlert as I, ChevronUp as m, ChevronRight as v, ChevronLeft as w, ChevronDown as A, Check as U, ArrowUp as b, ArrowDown as d } from "lucide";
+const y = {
+  ArrowDown: d,
+  ArrowUp: b,
+  Check: U,
+  ChevronDown: A,
+  ChevronLeft: w,
+  ChevronRight: v,
+  ChevronUp: m,
+  CircleAlert: I,
+  CircleCheck: g,
+  Copy: p,
+  Eye: f,
+  EyeOff: l,
+  File: h,
+  FileUp: C,
+  Info: i,
+  LoaderCircle: c,
+  Menu: a,
+  Search: s,
+  Trash2: n,
+  TriangleAlert: t,
+  User: o,
+  X: r
+};
+e(y);
+export {
+  y as defaultIcons,
+  E as getIcon,
+  F as registerIcon,
+  e as registerIcons,
+  L as registeredIcons,
+  T as toKebabCase
+};
+//# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/icons/defaults.ts"],"sourcesContent":["/**\n * The icons the design system uses in its own elements.\n *\n * Importing any Kanto element pulls this set in — roughly 2 kB of path data,\n * the price of `<kt-select>` being able to draw its own chevron. Application\n * icons are registered separately through `registerIcons`.\n */\nimport {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n} from 'lucide';\n// The sibling registry, not the `kanto-ds` barrel: the barrel pulls in every\n// element, and one of them pulls in this file — a cycle that leaves\n// `registerIcons` undefined by the time the call below runs.\nimport { registerIcons } from './registry.js';\n\n/** Icons referenced by Kanto elements, keyed by their Lucide name. */\nexport const defaultIcons = {\n  ArrowDown,\n  ArrowUp,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n};\n\nregisterIcons(defaultIcons);\n"],"names":["defaultIcons","ArrowDown","ArrowUp","Check","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","CircleAlert","CircleCheck","Copy","Eye","EyeOff","File","FileUp","Info","LoaderCircle","Menu","Search","Trash2","TriangleAlert","User","X","registerIcons"],"mappings":";;;AAqCO,MAAMA,IAAe;AAAA,EAC1B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAAC;AACF;AAEAC,EAAcvB,CAAY;"}

package/dist/icons/registry.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The icon registry.
+ *
+ * `<kt-icon>` looks icons up by name at render time, which means the set of
+ * icons cannot be statically analysed and a bundler cannot tree-shake it. So
+ * Kanto does not bundle all two thousand Lucide icons: the elements register
+ * the handful they need themselves, and an application registers whatever else
+ * it uses.
+ *
+ *     import { Rocket, Wallet } from 'lucide';
+ *     import { registerIcons } from 'kanto-ds/icons';
+ *
+ *     registerIcons({ Rocket, Wallet });
+ *
+ * Names are normalised to kebab-case, so `Rocket`, `rocket` and
+ * `ChevronDown` / `chevron-down` all resolve.
+ */
+/** A Lucide icon: a flat list of SVG children, each `[tag, attributes]`. */
+export type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];
+/**
+ * `ChevronDown` → `chevron-down`, `Trash2` → `trash-2`, `AArrowDown` →
+ * `a-arrow-down`.
+ *
+ * The digit boundary matters: Lucide names that icon `trash-2`, so a rule that
+ * only splits on case produces `trash2` and the lookup quietly misses.
+ */
+export declare function toKebabCase(name: string): string;
+/** Registers a single icon under `name`. */
+export declare function registerIcon(name: string, node: IconNode): void;
+/**
+ * Registers a map of icons. Accepts a Lucide namespace import directly:
+ * every non-icon export (`createElement`, `createIcons`, …) is skipped.
+ */
+export declare function registerIcons(icons: Record<string, unknown>): void;
+/** Returns the icon registered under `name`, or `undefined`. */
+export declare function getIcon(name: string): IconNode | undefined;
+/** Every registered name, kebab-cased and sorted. Useful for docs and tests. */
+export declare function registeredIcons(): string[];

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Kanto — the whole design system.
+ *
+ * Importing this module registers every element. Applications that only use a
+ * few should import those directly instead, so the bundler can drop the rest:
+ *
+ *     import 'kanto-ds/components/core/kt-button';
+ */
+export { KtAvatar } from './components/core/kt-avatar/kt-avatar.js';
+export type { KtAvatarSize, KtAvatarStatus } from './components/core/kt-avatar/kt-avatar.js';
+export { KtBadge } from './components/core/kt-badge/kt-badge.js';
+export type { KtBadgeSize, KtBadgeTone, KtBadgeVariant, } from './components/core/kt-badge/kt-badge.js';
+export { KtButton } from './components/core/kt-button/kt-button.js';
+export type { KtButtonSize, KtButtonType, KtButtonVariant, } from './components/core/kt-button/kt-button.js';
+export { KtCard } from './components/core/kt-card/kt-card.js';
+export type { KtCardImagePosition } from './components/core/kt-card/kt-card.js';
+export { KtCode } from './components/core/kt-code/kt-code.js';
+export { KtIcon } from './components/core/kt-icon/kt-icon.js';
+export { KtKbd } from './components/core/kt-kbd/kt-kbd.js';
+export { KtDragDrop } from './components/forms/kt-drag-drop/kt-drag-drop.js';
+export { KtForm } from './components/forms/kt-form/kt-form.js';
+export { KtInput } from './components/forms/kt-input/kt-input.js';
+export type { KtInputSize } from './components/forms/kt-input/kt-input.js';
+export { KtInputMenu } from './components/forms/kt-input-menu/kt-input-menu.js';
+export { KtLabelInput } from './components/forms/kt-label-input/kt-label-input.js';
+export { KtSelect } from './components/forms/kt-select/kt-select.js';
+export type { KtSelectSize } from './components/forms/kt-select/kt-select.js';
+export { KtTextarea } from './components/forms/kt-textarea/kt-textarea.js';
+export { KtToggle } from './components/forms/kt-toggle/kt-toggle.js';
+export type { KtToggleSize } from './components/forms/kt-toggle/kt-toggle.js';
+export { KtBreadcrumb } from './components/navigation/kt-breadcrumb/kt-breadcrumb.js';
+export type { KtBreadcrumbItem } from './components/navigation/kt-breadcrumb/kt-breadcrumb.js';
+export { KtPageHeader } from './components/navigation/kt-page-header/kt-page-header.js';
+export { KtSegmentedControl } from './components/navigation/kt-segmented-control/kt-segmented-control.js';
+export type { KtSegmentedOption, KtSegmentedSize, } from './components/navigation/kt-segmented-control/kt-segmented-control.js';
+export { KtSubMenuNavigation } from './components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';
+export { KtTabs } from './components/navigation/kt-tabs/kt-tabs.js';
+export type { KtTab } from './components/navigation/kt-tabs/kt-tabs.js';
+export { KtHeader } from './components/navigation/kt-header/kt-header.js';
+export type { KtNavItem, KtNavSection, } from './components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';
+export { KtToggleButton } from './components/navigation/kt-toggle-button/kt-toggle-button.js';
+export type { KtToggleButtonSize, KtToggleButtonVariant, } from './components/navigation/kt-toggle-button/kt-toggle-button.js';
+export { KtToggleButtonGroup } from './components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';
+export { KtAlert } from './components/feedback/kt-alert/kt-alert.js';
+export type { KtAlertVariant } from './components/feedback/kt-alert/kt-alert.js';
+export { KtEmptyState } from './components/feedback/kt-empty-state/kt-empty-state.js';
+export { KtProgressBar } from './components/feedback/kt-progress-bar/kt-progress-bar.js';
+export type { KtProgressSize, KtProgressVariant, } from './components/feedback/kt-progress-bar/kt-progress-bar.js';
+export { KtSkeleton } from './components/feedback/kt-skeleton/kt-skeleton.js';
+export type { KtSkeletonVariant } from './components/feedback/kt-skeleton/kt-skeleton.js';
+export { KtToast } from './components/feedback/kt-toast/kt-toast.js';
+export type { KtToastVariant } from './components/feedback/kt-toast/kt-toast.js';
+export { KtToastContainer } from './components/feedback/kt-toast-container/kt-toast-container.js';
+export type { KtToastOptions, KtToastPosition, } from './components/feedback/kt-toast-container/kt-toast-container.js';
+export { toaster } from './components/feedback/kt-toast-container/toaster.js';
+export { KtTooltip } from './components/feedback/kt-tooltip/kt-tooltip.js';
+export type { KtTooltipPlacement } from './components/feedback/kt-tooltip/kt-tooltip.js';
+export { KtCollapsible } from './components/overlays/kt-collapsible/kt-collapsible.js';
+export { KtConfirmDialog } from './components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';
+export type { KtConfirmVariant } from './components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';
+export { KtDropdown } from './components/overlays/kt-dropdown/kt-dropdown.js';
+export type { KtDropdownPlacement } from './components/overlays/kt-dropdown/kt-dropdown.js';
+export { KtModal } from './components/overlays/kt-modal/kt-modal.js';
+export type { KtModalSize } from './components/overlays/kt-modal/kt-modal.js';
+export { KtSidePanel } from './components/overlays/kt-side-panel/kt-side-panel.js';
+export { KtChart } from './components/data/kt-chart/kt-chart.js';
+export type { KtChartType, KtSeries } from './components/data/kt-chart/kt-chart.js';
+export { KtMeter } from './components/data/kt-meter/kt-meter.js';
+export type { KtMeterSegment } from './components/data/kt-meter/kt-meter.js';
+export { KtPagination } from './components/data/kt-pagination/kt-pagination.js';
+export { KtStat } from './components/data/kt-stat/kt-stat.js';
+export type { KtStatTrend } from './components/data/kt-stat/kt-stat.js';
+export { KtTable } from './components/data/kt-table/kt-table.js';
+export type { KtCellRenderer, KtSortDirection, KtSortState, KtTableColumn, KtTableRow, } from './components/data/kt-table/kt-table.js';
+export { KtTimeline, KtTimelineItem } from './components/data/kt-timeline/kt-timeline.js';
+export type { KtTimelineVariant } from './components/data/kt-timeline/kt-timeline.js';
+export type { KtOption } from './internal/listbox.js';
+export type { KtCountry } from './internal/countries.js';
+export { getIcon, registerIcon, registerIcons, registeredIcons } from './icons/registry.js';
+export type { IconNode } from './icons/registry.js';
+export { KtElement, defineElement } from './internal/kt-element.js';

package/dist/index.js

@@ -0,0 +1,96 @@
+import { KtAvatar as r } from "./components/core/kt-avatar/kt-avatar.js";
+import { KtBadge as m } from "./components/core/kt-badge/kt-badge.js";
+import { KtButton as f } from "./components/core/kt-button/kt-button.js";
+import { KtCard as K } from "./components/core/kt-card/kt-card.js";
+import { KtCode as n } from "./components/core/kt-code/kt-code.js";
+import { KtIcon as g } from "./components/core/kt-icon/kt-icon.js";
+import { KtKbd as i } from "./components/core/kt-kbd/kt-kbd.js";
+import { KtDragDrop as u } from "./components/forms/kt-drag-drop/kt-drag-drop.js";
+import { KtForm as I } from "./components/forms/kt-form/kt-form.js";
+import { KtInput as c } from "./components/forms/kt-input/kt-input.js";
+import { KtInputMenu as S } from "./components/forms/kt-input-menu/kt-input-menu.js";
+import { KtLabelInput as D } from "./components/forms/kt-label-input/kt-label-input.js";
+import { KtSelect as P } from "./components/forms/kt-select/kt-select.js";
+import { KtTextarea as v } from "./components/forms/kt-textarea/kt-textarea.js";
+import { KtToggle as H } from "./components/forms/kt-toggle/kt-toggle.js";
+import { KtBreadcrumb as k } from "./components/navigation/kt-breadcrumb/kt-breadcrumb.js";
+import { KtPageHeader as y } from "./components/navigation/kt-page-header/kt-page-header.js";
+import { KtSegmentedControl as G } from "./components/navigation/kt-segmented-control/kt-segmented-control.js";
+import { KtSubMenuNavigation as N } from "./components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js";
+import { KtTabs as q } from "./components/navigation/kt-tabs/kt-tabs.js";
+import { KtHeader as J } from "./components/navigation/kt-header/kt-header.js";
+import { KtToggleButton as Q } from "./components/navigation/kt-toggle-button/kt-toggle-button.js";
+import { KtToggleButtonGroup as U } from "./components/navigation/kt-toggle-button-group/kt-toggle-button-group.js";
+import { KtAlert as W } from "./components/feedback/kt-alert/kt-alert.js";
+import { KtEmptyState as Y } from "./components/feedback/kt-empty-state/kt-empty-state.js";
+import { KtProgressBar as _ } from "./components/feedback/kt-progress-bar/kt-progress-bar.js";
+import { KtSkeleton as tt } from "./components/feedback/kt-skeleton/kt-skeleton.js";
+import { KtToast as rt } from "./components/feedback/kt-toast/kt-toast.js";
+import { KtToastContainer as mt } from "./components/feedback/kt-toast-container/kt-toast-container.js";
+import { t as ft } from "./chunks/toaster-PmdKSV5x.js";
+import { KtTooltip as Kt } from "./components/feedback/kt-tooltip/kt-tooltip.js";
+import { KtCollapsible as nt } from "./components/overlays/kt-collapsible/kt-collapsible.js";
+import { KtConfirmDialog as gt } from "./components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
+import { KtDropdown as it } from "./components/overlays/kt-dropdown/kt-dropdown.js";
+import { KtModal as ut } from "./components/overlays/kt-modal/kt-modal.js";
+import { KtSidePanel as It } from "./components/overlays/kt-side-panel/kt-side-panel.js";
+import { KtChart as ct } from "./components/data/kt-chart/kt-chart.js";
+import { KtMeter as St } from "./components/data/kt-meter/kt-meter.js";
+import { KtPagination as Dt } from "./components/data/kt-pagination/kt-pagination.js";
+import { KtStat as Pt } from "./components/data/kt-stat/kt-stat.js";
+import { KtTable as vt } from "./components/data/kt-table/kt-table.js";
+import { KtTimeline as Ht, KtTimelineItem as ht } from "./components/data/kt-timeline/kt-timeline.js";
+import { g as wt, r as yt, a as Ft, b as Gt } from "./chunks/registry-X4LS9J5K.js";
+import { K as Nt, d as jt } from "./chunks/kt-element-CcMLO5e8.js";
+export {
+  W as KtAlert,
+  r as KtAvatar,
+  m as KtBadge,
+  k as KtBreadcrumb,
+  f as KtButton,
+  K as KtCard,
+  ct as KtChart,
+  n as KtCode,
+  nt as KtCollapsible,
+  gt as KtConfirmDialog,
+  u as KtDragDrop,
+  it as KtDropdown,
+  Nt as KtElement,
+  Y as KtEmptyState,
+  I as KtForm,
+  J as KtHeader,
+  g as KtIcon,
+  c as KtInput,
+  S as KtInputMenu,
+  i as KtKbd,
+  D as KtLabelInput,
+  St as KtMeter,
+  ut as KtModal,
+  y as KtPageHeader,
+  Dt as KtPagination,
+  _ as KtProgressBar,
+  G as KtSegmentedControl,
+  P as KtSelect,
+  It as KtSidePanel,
+  tt as KtSkeleton,
+  Pt as KtStat,
+  N as KtSubMenuNavigation,
+  vt as KtTable,
+  q as KtTabs,
+  v as KtTextarea,
+  Ht as KtTimeline,
+  ht as KtTimelineItem,
+  rt as KtToast,
+  mt as KtToastContainer,
+  H as KtToggle,
+  Q as KtToggleButton,
+  U as KtToggleButtonGroup,
+  Kt as KtTooltip,
+  jt as defineElement,
+  wt as getIcon,
+  yt as registerIcon,
+  Ft as registerIcons,
+  Gt as registeredIcons,
+  ft as toaster
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/internal/countries.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Country data for the phone mode of `<kt-input>`.
+ *
+ * Deliberately a short list rather than all 195: an exhaustive picker is a
+ * worse experience than a handful of entries and a search box. Applications
+ * that need more pass their own list to the element.
+ */
+export interface KtCountry {
+    /** ISO 3166-1 alpha-2, lowercase. */
+    readonly id: string;
+    readonly name: string;
+    /** International dialling code, without the leading `+`. */
+    readonly dialCode: string;
+    /** Placeholder showing the local format. */
+    readonly format: string;
+}
+export declare const DEFAULT_COUNTRIES: readonly KtCountry[];
+/**
+ * The flag emoji for a country code, built from regional indicator symbols.
+ *
+ * This is the one place emoji appear in a Kanto interface. They are here
+ * because no flag icon set ships with the system, and a country picker without
+ * flags is markedly slower to scan.
+ */
+export declare function flagEmoji(id: string): string;
+/** Keeps only the digits — what gets stored and submitted. */
+export declare function digitsOnly(value: string): string;
+/**
+ * Groups digits for display, per country.
+ *
+ * North American numbers read as `123 456 7890`, French ones as
+ * `6 12 34 56 78` — a single leading digit, then pairs. Everything else falls
+ * back to groups of three.
+ */
+export declare function formatNationalNumber(digits: string, country: KtCountry | undefined): string;
+/** Filters by name, dial code or country code — whatever the user types. */
+export declare function searchCountries(countries: readonly KtCountry[], query: string): readonly KtCountry[];

package/dist/internal/dialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Helpers for elements built on the native `<dialog>`.
+ *
+ * `showModal()` is worth the trouble: it puts the dialog in the top layer
+ * (above every stacking context, which no z-index can guarantee), traps focus,
+ * makes the rest of the page inert, and handles Escape. Rebuilding that by
+ * hand — and every design system has tried — produces a focus trap that leaks.
+ *
+ * The calls are guarded because test DOMs implement `<dialog>` only partially.
+ */
+/** Opens `dialog` modally, falling back to a non-modal open where it is unsupported. */
+export declare function openModal(dialog: HTMLDialogElement): void;
+/** Closes `dialog`, whichever way it was opened. */
+export declare function closeDialog(dialog: HTMLDialogElement): void;
+/**
+ * True when a click at these coordinates landed on the backdrop rather than on
+ * the dialog itself.
+ *
+ * A click on `::backdrop` is reported as a click on the dialog element, so the
+ * only way to tell them apart is to compare against its box.
+ */
+export declare function isBackdropClick(dialog: HTMLDialogElement, event: MouseEvent): boolean;

package/dist/internal/events.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Dispatches a `CustomEvent` from a Kanto element.
+ *
+ * Kanto events cross shadow boundaries (`composed`) and bubble, so a consumer
+ * can listen on a container rather than on every element — the behaviour a
+ * React or Vue developer expects from an `onChange` prop. They are cancelable
+ * so a host can `preventDefault()` a change it wants to veto.
+ */
+export declare function emit<T>(host: HTMLElement, name: string, detail?: T): CustomEvent<T>;
+/**
+ * Generates a document-unique id, for wiring `aria-labelledby` and friends
+ * across a shadow root.
+ */
+export declare function uniqueId(prefix: string): string;

package/dist/internal/form-control.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Form participation for Kanto's input elements.
+ *
+ * A control inside a shadow root is invisible to the form around it. The
+ * platform's answer is `ElementInternals`: the element declares
+ * `static formAssociated = true`, calls `attachInternals()` and pushes its
+ * value in with `setFormValue`, which makes it a first-class form control —
+ * serialised into `FormData`, reset by `form.reset()`, validated by
+ * `form.checkValidity()`.
+ *
+ * Every browser Kanto targets supports this. Test environments do not: neither
+ * happy-dom nor jsdom implements it, and jsdom stubs `attachInternals` with an
+ * object that has no `setFormValue`. So each call is guarded, and an element
+ * still works — minus form serialisation — where the API is missing.
+ */
+/** An `ElementInternals` implementation complete enough to be worth calling. */
+export type UsableInternals = ElementInternals;
+export declare function attachFormInternals(host: HTMLElement): UsableInternals | null;
+/** Pushes the control's current value into the enclosing form, if there is one. */
+export declare function setFormValue(internals: UsableInternals | null, value: string | null): void;
+/**
+ * Mirrors a control's validity onto the host element.
+ *
+ * `anchor` is the element a browser scrolls to and anchors the native bubble
+ * against when the form is submitted invalid.
+ */
+export declare function setValidity(internals: UsableInternals | null, flags: ValidityStateFlags, message: string, anchor?: HTMLElement): void;

package/dist/internal/format.d.ts

@@ -0,0 +1,8 @@
+/** Formatting helpers shared by elements that display data. */
+/**
+ * A human-readable file size.
+ *
+ * Uses 1024 steps, matching what every desktop file manager shows, and one
+ * decimal above a kilobyte — "1.4 MB" reads; "1468006 B" does not.
+ */
+export declare function formatFileSize(bytes: number): string;

package/dist/internal/kt-element.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+/**
+ * Base class for every Kanto element.
+ *
+ * It exists for two reasons. First, `box-sizing: border-box` does not cross a
+ * shadow boundary, so each root has to re-establish it. Second, `[hidden]`
+ * loses to a `:host { display: flex }` rule inside the shadow root, and every
+ * element in this system sets its own display — without the override here,
+ * hiding a Kanto element from the outside silently does nothing.
+ */
+export declare class KtElement extends LitElement {
+    static styles: CSSResultGroup;
+}
+/**
+ * Registers a custom element, tolerating a repeat call.
+ *
+ * A design system gets loaded twice more often than you would like — two
+ * versions in one dependency tree, a dev-server hot reload, a micro-frontend
+ * mounting a second copy. `customElements.define` throws on a duplicate tag
+ * and would take the whole page down with it.
+ */
+export declare function defineElement(tag: string, ctor: CustomElementConstructor): void;