kanto-ds 1.0.0 → 1.0.1

package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js

@@ -1,13 +1,13 @@
-import { css as f, nothing as c, html as d } from "lit";
-import { query as m, property as r } from "lit/decorators.js";
-import { K as p, d as h } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { css as f, nothing as d, html as c } from "lit";
+import { query as h, property as o } from "lit/decorators.js";
+import { K as p, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
-import { o as u, c as b, i as y } from "../../../chunks/dialog-CPIfFIlF.js";
+import { o as y, c as u, i as b } from "../../../chunks/dialog-CPIfFIlF.js";
 import "../../core/kt-button/kt-button.js";
-var v = Object.defineProperty, a = (i, o, s, k) => {
-  for (var e = void 0, n = i.length - 1, l; n >= 0; n--)
-    (l = i[n]) && (e = l(o, s, e) || e);
-  return e && v(o, s, e), e;
+var v = Object.defineProperty, a = (r, e, l, k) => {
+  for (var i = void 0, n = r.length - 1, s; n >= 0; n--)
+    (s = r[n]) && (i = s(e, l, i) || i);
+  return i && v(e, l, i), i;
 };
 class t extends p {
   constructor() {
@@ -21,8 +21,23 @@ class t extends p {
         display: contents;
       }
 
+      /*
+       * Closed by default (\`display: none\`, the native UA default a plain
+       * \`dialog\` selector here would otherwise override): before this,
+       * \`display: flex\` applied unconditionally, so a \`<kt-confirm-dialog>\`
+       * that had never been opened still rendered its \`<dialog>\` in normal
+       * flow — \`opacity: 0\` hides it, but does not stop it from occupying
+       * its box or intercepting clicks meant for whatever sits underneath.
+       * Verified against a real page: a closed dialog several screens away
+       * from where it was declared silently ate clicks on the content
+       * behind it. \`display\` is already in the transition list below with
+       * \`allow-discrete\` for exactly this swap — switching \`dialog[open]\`
+       * to set \`display: flex\` is what makes that transition real instead
+       * of a no-op, and the close animation (opacity/transform) still plays
+       * in full before \`display\` flips back to \`none\`.
+       */
       dialog {
-        display: flex;
+        display: none;
         flex-direction: column;
         gap: var(--gap-modal);
         box-sizing: border-box;
@@ -43,6 +58,7 @@ class t extends p {
       }
 
       dialog[open] {
+        display: flex;
         transform: translateY(0);
         opacity: 1;
       }
@@ -84,8 +100,8 @@ class t extends p {
     `
     ];
   }
-  updated(o) {
-    o.has("open") && (this.open ? (u(this.dialog), this.cancelButton?.focus()) : b(this.dialog));
+  updated(e) {
+    e.has("open") && (this.open ? (y(this.dialog), this.cancelButton?.focus()) : u(this.dialog));
   }
   confirm() {
     this.open = !1, g(this, "kt-confirm");
@@ -97,20 +113,20 @@ class t extends p {
   onDialogClose() {
     this.open && this.cancel();
   }
-  onDialogClick(o) {
-    y(this.dialog, o) && this.cancel();
+  onDialogClick(e) {
+    b(this.dialog, e) && this.cancel();
   }
   render() {
-    return d`<dialog
+    return c`<dialog
       part="dialog"
       role="alertdialog"
       aria-label=${this.heading}
-      aria-describedby=${this.message ? "kt-confirm-message" : c}
+      aria-describedby=${this.message ? "kt-confirm-message" : d}
       @close=${this.onDialogClose}
       @click=${this.onDialogClick}
     >
       <h2>${this.heading}</h2>
-      ${this.message ? d`<p id="kt-confirm-message">${this.message}</p>` : c}
+      ${this.message ? c`<p id="kt-confirm-message">${this.message}</p>` : d}
       <slot></slot>
 
       <div part="actions" class="actions">
@@ -125,30 +141,30 @@ class t extends p {
   }
 }
 a([
-  m("dialog")
+  h("dialog")
 ], t.prototype, "dialog");
 a([
-  m("kt-button[data-cancel]")
+  h("kt-button[data-cancel]")
 ], t.prototype, "cancelButton");
 a([
-  r({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "open");
 a([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "heading");
 a([
-  r({ type: String })
+  o({ type: String })
 ], t.prototype, "message");
 a([
-  r({ type: String, attribute: "confirm-label" })
+  o({ type: String, attribute: "confirm-label" })
 ], t.prototype, "confirmLabel");
 a([
-  r({ type: String, attribute: "cancel-label" })
+  o({ type: String, attribute: "cancel-label" })
 ], t.prototype, "cancelLabel");
 a([
-  r({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "variant");
-h("kt-confirm-dialog", t);
+m("kt-confirm-dialog", t);
 export {
   t as KtConfirmDialog
 };

package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-confirm-dialog.js","sources":["../../../../src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.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\nexport type KtConfirmVariant = 'danger' | 'primary';\n\n/**\n * A centred yes/no overlay, for an action worth stopping to think about.\n *\n * Confirmations are for destructive or irreversible work. Editing belongs in a\n * `<kt-side-panel>`, which does not block the page behind it.\n *\n * `role=\"alertdialog\"` and the cancel button takes focus on open, so a stray\n * Enter dismisses rather than confirms.\n *\n * @element kt-confirm-dialog\n *\n * @slot - Extra content between the message and the buttons.\n *\n * @csspart dialog - The `<dialog>`.\n * @csspart actions - The button row.\n *\n * @fires kt-confirm - The confirm button was pressed.\n * @fires kt-cancel - Dismissed, by button, Escape or backdrop.\n *\n * @example\n * ```html\n * <kt-confirm-dialog\n *   heading=\"Delete this entity?\"\n *   message=\"This action cannot be undone.\"\n *   confirm-label=\"Delete\"\n * ></kt-confirm-dialog>\n * ```\n */\nexport class KtConfirmDialog extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      dialog {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-modal);\n        box-sizing: border-box;\n        width: 400px;\n        max-width: calc(100vw - 48px);\n        padding: var(--padding-modal);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--radius-modal);\n        transform: translateY(8px);\n        opacity: 0;\n        transition:\n          transform var(--duration-normal) var(--easing-standard),\n          opacity 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: translateY(0);\n        opacity: 1;\n      }\n\n      @starting-style {\n        dialog[open] {\n          transform: translateY(8px);\n          opacity: 0;\n        }\n      }\n\n      dialog::backdrop {\n        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      p {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .actions {\n        display: flex;\n        justify-content: flex-end;\n        gap: var(--gap-button);\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  @query('kt-button[data-cancel]')\n  private cancelButton!: HTMLElement | null;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  heading = 'Are you sure?';\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'confirm-label' })\n  confirmLabel = 'Confirm';\n\n  @property({ type: String, attribute: 'cancel-label' })\n  cancelLabel = 'Cancel';\n\n  /** `danger` gives the confirm button the solid red treatment. */\n  @property({ type: String, reflect: true })\n  variant: KtConfirmVariant = 'danger';\n\n  override updated(changed: PropertyValues<this>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      openModal(this.dialog);\n      // Focus lands on Cancel, not Confirm: an Enter meant for whatever was\n      // behind the dialog should not delete anything.\n      this.cancelButton?.focus();\n    } else {\n      closeDialog(this.dialog);\n    }\n  }\n\n  private confirm(): void {\n    this.open = false;\n    emit(this, 'kt-confirm');\n  }\n\n  private cancel(): void {\n    this.open = false;\n    emit(this, 'kt-cancel');\n  }\n\n  /** Escape closes the native dialog; report it as a cancel. */\n  private onDialogClose(): void {\n    if (this.open) this.cancel();\n  }\n\n  private onDialogClick(event: MouseEvent): void {\n    if (isBackdropClick(this.dialog, event)) this.cancel();\n  }\n\n  override render(): TemplateResult {\n    return html`<dialog\n      part=\"dialog\"\n      role=\"alertdialog\"\n      aria-label=${this.heading}\n      aria-describedby=${this.message ? 'kt-confirm-message' : nothing}\n      @close=${this.onDialogClose}\n      @click=${this.onDialogClick}\n    >\n      <h2>${this.heading}</h2>\n      ${this.message ? html`<p id=\"kt-confirm-message\">${this.message}</p>` : nothing}\n      <slot></slot>\n\n      <div part=\"actions\" class=\"actions\">\n        <kt-button data-cancel variant=\"dark\" @click=${this.cancel}>${this.cancelLabel}</kt-button>\n        <kt-button\n          variant=${this.variant === 'danger' ? 'delete' : 'primary'}\n          @click=${this.confirm}\n          >${this.confirmLabel}</kt-button\n        >\n      </div>\n    </dialog>`;\n  }\n}\n\ndefineElement('kt-confirm-dialog', KtConfirmDialog);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-confirm-dialog': KtConfirmDialog;\n  }\n}\n"],"names":["KtConfirmDialog","KtElement","css","changed","openModal","closeDialog","emit","event","isBackdropClick","html","nothing","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;;;;AAqCO,MAAMA,UAAwBC,EAAU;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8EL,KAAA,OAAO,IAGP,KAAA,UAAU,iBAGV,KAAA,UAAU,IAGV,KAAA,eAAe,WAGf,KAAA,cAAc,UAId,KAAA,UAA4B;AAAA,EAAA;AAAA,EA7F5B,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,IAAA;AAAA,EAkEF;AAAA,EA2BS,QAAQC,GAAqC;AACpD,IAAKA,EAAQ,IAAI,MAAM,MAEnB,KAAK,QACPC,EAAU,KAAK,MAAM,GAGrB,KAAK,cAAc,MAAA,KAEnBC,EAAY,KAAK,MAAM;AAAA,EAE3B;AAAA,EAEQ,UAAgB;AACtB,SAAK,OAAO,IACZC,EAAK,MAAM,YAAY;AAAA,EACzB;AAAA,EAEQ,SAAe;AACrB,SAAK,OAAO,IACZA,EAAK,MAAM,WAAW;AAAA,EACxB;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,IAAI,KAAK,QAAM,KAAK,OAAA;AAAA,EACtB;AAAA,EAEQ,cAAcC,GAAyB;AAC7C,IAAIC,EAAgB,KAAK,QAAQD,CAAK,UAAQ,OAAA;AAAA,EAChD;AAAA,EAES,SAAyB;AAChC,WAAOE;AAAA;AAAA;AAAA,mBAGQ,KAAK,OAAO;AAAA,yBACN,KAAK,UAAU,uBAAuBC,CAAO;AAAA,eACvD,KAAK,aAAa;AAAA,eAClB,KAAK,aAAa;AAAA;AAAA,YAErB,KAAK,OAAO;AAAA,QAChB,KAAK,UAAUD,+BAAkC,KAAK,OAAO,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,uDAI9B,KAAK,MAAM,IAAI,KAAK,WAAW;AAAA;AAAA,oBAElE,KAAK,YAAY,WAAW,WAAW,SAAS;AAAA,mBACjD,KAAK,OAAO;AAAA,aAClB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI5B;AACF;AA/EUC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,GAvEJZ,EAwEH,WAAA,QAAA;AAGAW,EAAA;AAAA,EADPC,EAAM,wBAAwB;AAAA,GA1EpBZ,EA2EH,WAAA,cAAA;AAGRW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7E/Bb,EA8EX,WAAA,MAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhFfb,EAiFX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnFfb,EAoFX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAtF3Cb,EAuFX,WAAA,cAAA;AAGAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAzF1Cb,EA0FX,WAAA,aAAA;AAIAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7F9Bb,EA8FX,WAAA,SAAA;AA2DFc,EAAc,qBAAqBd,CAAe;"}
+{"version":3,"file":"kt-confirm-dialog.js","sources":["../../../../src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.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\nexport type KtConfirmVariant = 'danger' | 'primary';\n\n/**\n * A centred yes/no overlay, for an action worth stopping to think about.\n *\n * Confirmations are for destructive or irreversible work. Editing belongs in a\n * `<kt-side-panel>`, which does not block the page behind it.\n *\n * `role=\"alertdialog\"` and the cancel button takes focus on open, so a stray\n * Enter dismisses rather than confirms.\n *\n * @element kt-confirm-dialog\n *\n * @slot - Extra content between the message and the buttons.\n *\n * @csspart dialog - The `<dialog>`.\n * @csspart actions - The button row.\n *\n * @fires kt-confirm - The confirm button was pressed.\n * @fires kt-cancel - Dismissed, by button, Escape or backdrop.\n *\n * @example\n * ```html\n * <kt-confirm-dialog\n *   heading=\"Delete this entity?\"\n *   message=\"This action cannot be undone.\"\n *   confirm-label=\"Delete\"\n * ></kt-confirm-dialog>\n * ```\n */\nexport class KtConfirmDialog extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      /*\n       * Closed by default (\\`display: none\\`, the native UA default a plain\n       * \\`dialog\\` selector here would otherwise override): before this,\n       * \\`display: flex\\` applied unconditionally, so a \\`<kt-confirm-dialog>\\`\n       * that had never been opened still rendered its \\`<dialog>\\` in normal\n       * flow — \\`opacity: 0\\` hides it, but does not stop it from occupying\n       * its box or intercepting clicks meant for whatever sits underneath.\n       * Verified against a real page: a closed dialog several screens away\n       * from where it was declared silently ate clicks on the content\n       * behind it. \\`display\\` is already in the transition list below with\n       * \\`allow-discrete\\` for exactly this swap — switching \\`dialog[open]\\`\n       * to set \\`display: flex\\` is what makes that transition real instead\n       * of a no-op, and the close animation (opacity/transform) still plays\n       * in full before \\`display\\` flips back to \\`none\\`.\n       */\n      dialog {\n        display: none;\n        flex-direction: column;\n        gap: var(--gap-modal);\n        box-sizing: border-box;\n        width: 400px;\n        max-width: calc(100vw - 48px);\n        padding: var(--padding-modal);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--radius-modal);\n        transform: translateY(8px);\n        opacity: 0;\n        transition:\n          transform var(--duration-normal) var(--easing-standard),\n          opacity 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        display: flex;\n        transform: translateY(0);\n        opacity: 1;\n      }\n\n      @starting-style {\n        dialog[open] {\n          transform: translateY(8px);\n          opacity: 0;\n        }\n      }\n\n      dialog::backdrop {\n        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      p {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .actions {\n        display: flex;\n        justify-content: flex-end;\n        gap: var(--gap-button);\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  @query('kt-button[data-cancel]')\n  private cancelButton!: HTMLElement | null;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  heading = 'Are you sure?';\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'confirm-label' })\n  confirmLabel = 'Confirm';\n\n  @property({ type: String, attribute: 'cancel-label' })\n  cancelLabel = 'Cancel';\n\n  /** `danger` gives the confirm button the solid red treatment. */\n  @property({ type: String, reflect: true })\n  variant: KtConfirmVariant = 'danger';\n\n  override updated(changed: PropertyValues<this>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      openModal(this.dialog);\n      // Focus lands on Cancel, not Confirm: an Enter meant for whatever was\n      // behind the dialog should not delete anything.\n      this.cancelButton?.focus();\n    } else {\n      closeDialog(this.dialog);\n    }\n  }\n\n  private confirm(): void {\n    this.open = false;\n    emit(this, 'kt-confirm');\n  }\n\n  private cancel(): void {\n    this.open = false;\n    emit(this, 'kt-cancel');\n  }\n\n  /** Escape closes the native dialog; report it as a cancel. */\n  private onDialogClose(): void {\n    if (this.open) this.cancel();\n  }\n\n  private onDialogClick(event: MouseEvent): void {\n    if (isBackdropClick(this.dialog, event)) this.cancel();\n  }\n\n  override render(): TemplateResult {\n    return html`<dialog\n      part=\"dialog\"\n      role=\"alertdialog\"\n      aria-label=${this.heading}\n      aria-describedby=${this.message ? 'kt-confirm-message' : nothing}\n      @close=${this.onDialogClose}\n      @click=${this.onDialogClick}\n    >\n      <h2>${this.heading}</h2>\n      ${this.message ? html`<p id=\"kt-confirm-message\">${this.message}</p>` : nothing}\n      <slot></slot>\n\n      <div part=\"actions\" class=\"actions\">\n        <kt-button data-cancel variant=\"dark\" @click=${this.cancel}>${this.cancelLabel}</kt-button>\n        <kt-button\n          variant=${this.variant === 'danger' ? 'delete' : 'primary'}\n          @click=${this.confirm}\n          >${this.confirmLabel}</kt-button\n        >\n      </div>\n    </dialog>`;\n  }\n}\n\ndefineElement('kt-confirm-dialog', KtConfirmDialog);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-confirm-dialog': KtConfirmDialog;\n  }\n}\n"],"names":["KtConfirmDialog","KtElement","css","changed","openModal","closeDialog","emit","event","isBackdropClick","html","nothing","__decorateClass","query","property","defineElement"],"mappings":"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"}

package/dist/components/overlays/kt-dropdown/kt-dropdown.d.ts

@@ -2,6 +2,7 @@ import { type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import { type KtOption } from '#internal/listbox';
 export type KtDropdownPlacement = 'bottom' | 'top';
+export type KtDropdownAlign = 'start' | 'end';
 /**
  * A panel anchored to a trigger.
  *
@@ -35,6 +36,8 @@ export declare class KtDropdown extends KtElement {
     value: string | number | null;
     /** Where to put the panel when there is room on both sides. */
     preferredPlacement: KtDropdownPlacement;
+    /** Which edge of the trigger the panel lines up with. */
+    align: KtDropdownAlign;
     disabled: boolean;
     emptyText: string;
     /** Whether the panel is showing. */

package/dist/components/overlays/kt-dropdown/kt-dropdown.js

@@ -1,20 +1,20 @@
-import { css as v, nothing as f, html as a } from "lit";
-import { query as b, state as g, property as n } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
+import { css as f, nothing as v, html as s } from "lit";
+import { query as b, state as g, property as i } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
 import { K as m, d as y } from "../../../chunks/kt-element-CcMLO5e8.js";
-import { e as l } from "../../../chunks/events-Bjl5Zmmq.js";
-import { o as w } from "../../../chunks/listbox-CUXYn_3S.js";
-var x = Object.defineProperty, r = (p, t, i, s) => {
-  for (var e = void 0, d = p.length - 1, c; d >= 0; d--)
-    (c = p[d]) && (e = c(t, i, e) || e);
-  return e && x(t, i, e), e;
+import { e as d } from "../../../chunks/events-Bjl5Zmmq.js";
+import { o as w } from "../../../chunks/listbox-Sm3nvsC6.js";
+var x = Object.defineProperty, r = (p, t, n, a) => {
+  for (var e = void 0, l = p.length - 1, h; l >= 0; l--)
+    (h = p[l]) && (e = h(t, n, e) || e);
+  return e && x(t, n, e), e;
 };
 const u = 230;
 class o extends m {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom", this.options = [], this.value = null, this.preferredPlacement = "bottom", this.disabled = !1, this.emptyText = "No results", this.reposition = () => {
-      const i = (this.triggerWrapper ?? this).getBoundingClientRect(), s = window.innerHeight - i.bottom, e = i.top;
-      this.placement = this.preferredPlacement === "top" ? e >= u || e >= s ? "top" : "bottom" : s >= u || s >= e ? "bottom" : "top";
+    super(...arguments), this.open = !1, this.placement = "bottom", this.options = [], this.value = null, this.preferredPlacement = "bottom", this.align = "start", this.disabled = !1, this.emptyText = "No results", this.reposition = () => {
+      const n = (this.triggerWrapper ?? this).getBoundingClientRect(), a = window.innerHeight - n.bottom, e = n.top;
+      this.placement = this.preferredPlacement === "top" ? e >= u || e >= a ? "top" : "bottom" : a >= u || a >= e ? "bottom" : "top";
     }, this.onDocumentPointerDown = (t) => {
       t.composedPath().includes(this) || this.hide();
     }, this.onDocumentKeyDown = (t) => {
@@ -24,7 +24,7 @@ class o extends m {
   static {
     this.styles = [
       m.styles,
-      v`
+      f`
       :host {
         position: relative;
         display: inline-block;
@@ -68,6 +68,18 @@ class o extends m {
         transform-origin: bottom left;
       }
 
+      /* Hangs the panel off the trigger's right edge, for a trigger that sits
+         at the right of what it belongs to — the caret of a split button. */
+      .panel.end {
+        right: 0;
+        left: auto;
+        transform-origin: top right;
+      }
+
+      .panel.end.top {
+        transform-origin: bottom right;
+      }
+
       .panel.open {
         visibility: visible;
         opacity: 1;
@@ -129,21 +141,21 @@ class o extends m {
   }
   /** Opens the panel. */
   show() {
-    this.disabled || this.open || (this.reposition(), this.open = !0, l(this, "kt-open"));
+    this.disabled || this.open || (this.reposition(), this.open = !0, d(this, "kt-open"));
   }
   /** Closes the panel. */
   hide() {
-    this.open && (this.open = !1, l(this, "kt-close"));
+    this.open && (this.open = !1, d(this, "kt-close"));
   }
   /** Opens or closes it. */
   toggle() {
     this.open ? this.hide() : this.show();
   }
   choose(t) {
-    t.disabled || (this.value = t.id, this.hide(), l(this, "kt-select", { value: t.id, option: t }));
+    t.disabled || (this.value = t.id, this.hide(), d(this, "kt-select", { value: t.id, option: t }));
   }
   render() {
-    return a`<div
+    return s`<div
         part="trigger"
         class="trigger"
         aria-haspopup="menu"
@@ -155,27 +167,32 @@ class o extends m {
 
       <div
         part="panel"
-        class=${h({ panel: !0, open: this.open, top: this.placement === "top" })}
+        class=${c({
+      panel: !0,
+      open: this.open,
+      top: this.placement === "top",
+      end: this.align === "end"
+    })}
         role=${this.options.length > 0 ? "menu" : "group"}
         aria-hidden=${this.open ? "false" : "true"}
       >
-        ${this.options.length > 0 ? a`<ul class="list">
+        ${this.options.length > 0 ? s`<ul class="list">
                 ${this.options.map(
-      (t) => a`<li
+      (t) => s`<li
                       part="option"
-                      class=${h({
+                      class=${c({
         option: !0,
         selected: t.id === this.value,
         disabled: !!t.disabled
       })}
                       role="menuitem"
-                      aria-disabled=${t.disabled ? "true" : f}
+                      aria-disabled=${t.disabled ? "true" : v}
                       @click=${() => this.choose(t)}
                     >
                       ${w(t)}
                     </li>`
     )}
-              </ul>` : a`<slot name="panel">
+              </ul>` : s`<slot name="panel">
                 <div class="empty">${this.emptyText}</div>
               </slot>`}
       </div>`;
@@ -191,19 +208,22 @@ r([
   g()
 ], o.prototype, "placement");
 r([
-  n({ attribute: !1 })
+  i({ attribute: !1 })
 ], o.prototype, "options");
 r([
-  n({ type: String })
+  i({ type: String })
 ], o.prototype, "value");
 r([
-  n({ type: String, attribute: "preferred-placement" })
+  i({ type: String, attribute: "preferred-placement" })
 ], o.prototype, "preferredPlacement");
 r([
-  n({ type: Boolean, reflect: !0 })
+  i({ type: String, reflect: !0 })
+], o.prototype, "align");
+r([
+  i({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled");
 r([
-  n({ type: String, attribute: "empty-text" })
+  i({ type: String, attribute: "empty-text" })
 ], o.prototype, "emptyText");
 y("kt-dropdown", o);
 export {

package/dist/components/overlays/kt-dropdown/kt-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-dropdown.js","sources":["../../../../src/components/overlays/kt-dropdown/kt-dropdown.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\n\nexport type KtDropdownPlacement = 'bottom' | 'top';\n\n/** Panel height plus the 6px offset, used to decide whether it fits below. */\nconst PANEL_SPACE = 224 + 6;\n\n/**\n * A panel anchored to a trigger.\n *\n * The generic overlay: pass `options` for a menu, or slot anything into\n * `panel` for arbitrary content. For choosing a value in a form, reach for\n * `<kt-select>` or `<kt-input-menu>` instead — they carry the listbox\n * semantics this one deliberately does not assume.\n *\n * @element kt-dropdown\n *\n * @slot trigger - What opens the panel.\n * @slot panel - Panel contents, when `options` is not used.\n *\n * @csspart trigger - The trigger wrapper.\n * @csspart panel - The floating panel.\n * @csspart option - A menu row.\n *\n * @fires kt-select - A menu row was chosen. `detail: { value, option }`.\n * @fires kt-open - The panel opened.\n * @fires kt-close - The panel closed.\n */\nexport class KtDropdown extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n      }\n\n      .trigger {\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      :host([disabled]) .trigger {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n\n      .panel {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        z-index: var(--z-dropdown);\n        box-sizing: border-box;\n        width: 224px;\n        max-height: 224px;\n        margin: 0;\n        padding: var(--padding-expand);\n        background: var(--surface-raised);\n        border-radius: var(--radius-input);\n        transform: translateY(-6px);\n        transform-origin: top left;\n        visibility: hidden;\n        opacity: 0;\n        transition:\n          opacity var(--duration-normal) var(--easing-standard),\n          transform var(--duration-normal) var(--easing-standard);\n      }\n\n      .panel.top {\n        top: auto;\n        bottom: calc(100% + 6px);\n        transform: translateY(6px);\n        transform-origin: bottom left;\n      }\n\n      .panel.open {\n        visibility: visible;\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      .list {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        max-height: 208px;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n        list-style: none;\n        scrollbar-width: thin;\n      }\n\n      .option {\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n      .option:hover {\n        background: var(--surface-hover);\n      }\n\n      .option.selected {\n        color: var(--text-body);\n        font-weight: 600;\n        background: var(--color-dark-23);\n      }\n\n      .option.disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .empty {\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        cursor: default;\n      }\n    `,\n  ];\n\n  @query('.trigger')\n  private triggerWrapper!: HTMLElement;\n\n  @state()\n  private open = false;\n\n  /** Where the panel actually landed, after checking the room available. */\n  @state()\n  private placement: KtDropdownPlacement = 'bottom';\n\n  /** Menu rows. Leave empty and slot into `panel` for custom content. */\n  @property({ attribute: false })\n  options: readonly KtOption[] = [];\n\n  /** Marks one row as current. */\n  @property({ type: String })\n  value: string | number | null = null;\n\n  /** Where to put the panel when there is room on both sides. */\n  @property({ type: String, attribute: 'preferred-placement' })\n  preferredPlacement: KtDropdownPlacement = 'bottom';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No results';\n\n  /** Whether the panel is showing. */\n  get isOpen(): boolean {\n    return this.open;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this.onDocumentPointerDown);\n    document.addEventListener('keydown', this.onDocumentKeyDown);\n    window.addEventListener('resize', this.reposition);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n    document.removeEventListener('keydown', this.onDocumentKeyDown);\n    window.removeEventListener('resize', this.reposition);\n  }\n\n  /**\n   * Flips the panel above the trigger when there is not enough room below,\n   * preferring whichever side has more space if neither fits.\n   */\n  private reposition = (): void => {\n    const anchor = this.triggerWrapper ?? this;\n    const rect = anchor.getBoundingClientRect();\n    const below = window.innerHeight - rect.bottom;\n    const above = rect.top;\n\n    this.placement =\n      this.preferredPlacement === 'top'\n        ? above >= PANEL_SPACE || above >= below\n          ? 'top'\n          : 'bottom'\n        : below >= PANEL_SPACE || below >= above\n          ? 'bottom'\n          : 'top';\n  };\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.hide();\n  };\n\n  private onDocumentKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape') this.hide();\n  };\n\n  /** Opens the panel. */\n  show(): void {\n    if (this.disabled || this.open) return;\n    this.reposition();\n    this.open = true;\n    emit(this, 'kt-open');\n  }\n\n  /** Closes the panel. */\n  hide(): void {\n    if (!this.open) return;\n    this.open = false;\n    emit(this, 'kt-close');\n  }\n\n  /** Opens or closes it. */\n  toggle(): void {\n    if (this.open) this.hide();\n    else this.show();\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.hide();\n    emit(this, 'kt-select', { value: option.id, option });\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n        part=\"trigger\"\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        @click=${this.toggle}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n\n      <div\n        part=\"panel\"\n        class=${classMap({ panel: true, open: this.open, top: this.placement === 'top' })}\n        role=${this.options.length > 0 ? 'menu' : 'group'}\n        aria-hidden=${this.open ? 'false' : 'true'}\n      >\n        ${\n          this.options.length > 0\n            ? html`<ul class=\"list\">\n                ${this.options.map(\n                  (option) =>\n                    html`<li\n                      part=\"option\"\n                      class=${classMap({\n                        option: true,\n                        selected: option.id === this.value,\n                        disabled: Boolean(option.disabled),\n                      })}\n                      role=\"menuitem\"\n                      aria-disabled=${option.disabled ? 'true' : nothing}\n                      @click=${() => this.choose(option)}\n                    >\n                      ${optionLabel(option)}\n                    </li>`,\n                )}\n              </ul>`\n            : html`<slot name=\"panel\">\n                <div class=\"empty\">${this.emptyText}</div>\n              </slot>`\n        }\n      </div>`;\n  }\n}\n\ndefineElement('kt-dropdown', KtDropdown);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-dropdown': KtDropdown;\n  }\n}\n"],"names":["PANEL_SPACE","KtDropdown","KtElement","rect","below","above","event","css","emit","option","html","classMap","nothing","optionLabel","__decorateClass","query","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-dropdown.js","sources":["../../../../src/components/overlays/kt-dropdown/kt-dropdown.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { optionLabel, type KtOption } from '#internal/listbox';\n\nexport type KtDropdownPlacement = 'bottom' | 'top';\nexport type KtDropdownAlign = 'start' | 'end';\n\n/** Panel height plus the 6px offset, used to decide whether it fits below. */\nconst PANEL_SPACE = 224 + 6;\n\n/**\n * A panel anchored to a trigger.\n *\n * The generic overlay: pass `options` for a menu, or slot anything into\n * `panel` for arbitrary content. For choosing a value in a form, reach for\n * `<kt-select>` or `<kt-input-menu>` instead — they carry the listbox\n * semantics this one deliberately does not assume.\n *\n * @element kt-dropdown\n *\n * @slot trigger - What opens the panel.\n * @slot panel - Panel contents, when `options` is not used.\n *\n * @csspart trigger - The trigger wrapper.\n * @csspart panel - The floating panel.\n * @csspart option - A menu row.\n *\n * @fires kt-select - A menu row was chosen. `detail: { value, option }`.\n * @fires kt-open - The panel opened.\n * @fires kt-close - The panel closed.\n */\nexport class KtDropdown extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n      }\n\n      .trigger {\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      :host([disabled]) .trigger {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n\n      .panel {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        z-index: var(--z-dropdown);\n        box-sizing: border-box;\n        width: 224px;\n        max-height: 224px;\n        margin: 0;\n        padding: var(--padding-expand);\n        background: var(--surface-raised);\n        border-radius: var(--radius-input);\n        transform: translateY(-6px);\n        transform-origin: top left;\n        visibility: hidden;\n        opacity: 0;\n        transition:\n          opacity var(--duration-normal) var(--easing-standard),\n          transform var(--duration-normal) var(--easing-standard);\n      }\n\n      .panel.top {\n        top: auto;\n        bottom: calc(100% + 6px);\n        transform: translateY(6px);\n        transform-origin: bottom left;\n      }\n\n      /* Hangs the panel off the trigger's right edge, for a trigger that sits\n         at the right of what it belongs to — the caret of a split button. */\n      .panel.end {\n        right: 0;\n        left: auto;\n        transform-origin: top right;\n      }\n\n      .panel.end.top {\n        transform-origin: bottom right;\n      }\n\n      .panel.open {\n        visibility: visible;\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      .list {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        max-height: 208px;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n        list-style: none;\n        scrollbar-width: thin;\n      }\n\n      .option {\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n      .option:hover {\n        background: var(--surface-hover);\n      }\n\n      .option.selected {\n        color: var(--text-body);\n        font-weight: 600;\n        background: var(--color-dark-23);\n      }\n\n      .option.disabled {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .empty {\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        cursor: default;\n      }\n    `,\n  ];\n\n  @query('.trigger')\n  private triggerWrapper!: HTMLElement;\n\n  @state()\n  private open = false;\n\n  /** Where the panel actually landed, after checking the room available. */\n  @state()\n  private placement: KtDropdownPlacement = 'bottom';\n\n  /** Menu rows. Leave empty and slot into `panel` for custom content. */\n  @property({ attribute: false })\n  options: readonly KtOption[] = [];\n\n  /** Marks one row as current. */\n  @property({ type: String })\n  value: string | number | null = null;\n\n  /** Where to put the panel when there is room on both sides. */\n  @property({ type: String, attribute: 'preferred-placement' })\n  preferredPlacement: KtDropdownPlacement = 'bottom';\n\n  /** Which edge of the trigger the panel lines up with. */\n  @property({ type: String, reflect: true })\n  align: KtDropdownAlign = 'start';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No results';\n\n  /** Whether the panel is showing. */\n  get isOpen(): boolean {\n    return this.open;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this.onDocumentPointerDown);\n    document.addEventListener('keydown', this.onDocumentKeyDown);\n    window.addEventListener('resize', this.reposition);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n    document.removeEventListener('keydown', this.onDocumentKeyDown);\n    window.removeEventListener('resize', this.reposition);\n  }\n\n  /**\n   * Flips the panel above the trigger when there is not enough room below,\n   * preferring whichever side has more space if neither fits.\n   */\n  private reposition = (): void => {\n    const anchor = this.triggerWrapper ?? this;\n    const rect = anchor.getBoundingClientRect();\n    const below = window.innerHeight - rect.bottom;\n    const above = rect.top;\n\n    this.placement =\n      this.preferredPlacement === 'top'\n        ? above >= PANEL_SPACE || above >= below\n          ? 'top'\n          : 'bottom'\n        : below >= PANEL_SPACE || below >= above\n          ? 'bottom'\n          : 'top';\n  };\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.hide();\n  };\n\n  private onDocumentKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape') this.hide();\n  };\n\n  /** Opens the panel. */\n  show(): void {\n    if (this.disabled || this.open) return;\n    this.reposition();\n    this.open = true;\n    emit(this, 'kt-open');\n  }\n\n  /** Closes the panel. */\n  hide(): void {\n    if (!this.open) return;\n    this.open = false;\n    emit(this, 'kt-close');\n  }\n\n  /** Opens or closes it. */\n  toggle(): void {\n    if (this.open) this.hide();\n    else this.show();\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.hide();\n    emit(this, 'kt-select', { value: option.id, option });\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n        part=\"trigger\"\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        @click=${this.toggle}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n\n      <div\n        part=\"panel\"\n        class=${classMap({\n          panel: true,\n          open: this.open,\n          top: this.placement === 'top',\n          end: this.align === 'end',\n        })}\n        role=${this.options.length > 0 ? 'menu' : 'group'}\n        aria-hidden=${this.open ? 'false' : 'true'}\n      >\n        ${\n          this.options.length > 0\n            ? html`<ul class=\"list\">\n                ${this.options.map(\n                  (option) =>\n                    html`<li\n                      part=\"option\"\n                      class=${classMap({\n                        option: true,\n                        selected: option.id === this.value,\n                        disabled: Boolean(option.disabled),\n                      })}\n                      role=\"menuitem\"\n                      aria-disabled=${option.disabled ? 'true' : nothing}\n                      @click=${() => this.choose(option)}\n                    >\n                      ${optionLabel(option)}\n                    </li>`,\n                )}\n              </ul>`\n            : html`<slot name=\"panel\">\n                <div class=\"empty\">${this.emptyText}</div>\n              </slot>`\n        }\n      </div>`;\n  }\n}\n\ndefineElement('kt-dropdown', KtDropdown);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-dropdown': KtDropdown;\n  }\n}\n"],"names":["PANEL_SPACE","KtDropdown","KtElement","rect","below","above","event","css","emit","option","html","classMap","nothing","optionLabel","__decorateClass","query","state","property","defineElement"],"mappings":"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"}

package/dist/components/overlays/kt-modal/kt-modal.js

@@ -1,29 +1,30 @@
 import { css as g, nothing as r, html as s } from "lit";
 import { query as f, property as i } from "lit/decorators.js";
-import { K as h, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as c, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
 import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
-import { h as v } from "../../../chunks/slots-BPbIdxAJ.js";
-import { o as c, c as y, i as b } from "../../../chunks/dialog-CPIfFIlF.js";
+import { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
+import { o as h, c as v, i as b } from "../../../chunks/dialog-CPIfFIlF.js";
 import "../../core/kt-button/kt-button.js";
-var x = Object.defineProperty, e = (l, t, d, C) => {
+var x = Object.defineProperty, e = (l, t, d, k) => {
   for (var a = void 0, n = l.length - 1, p; n >= 0; n--)
     (p = l[n]) && (a = p(t, d, a) || a);
   return a && x(t, d, a), a;
 };
-class o extends h {
+class o extends c {
   constructor() {
     super(...arguments), this.open = !1, this.heading = "", this.description = "", this.size = "medium", this.noCloseButton = !1, this.noBackdropClose = !1, this.hasFooter = !1;
   }
   static {
     this.styles = [
-      h.styles,
+      c.styles,
       g`
       :host {
         display: contents;
       }
 
+      /* Closed by default — see kt-confirm-dialog.ts's identical comment: an unconditional \`display: flex\` here left a never-opened dialog occupying its centred box (\`opacity: 0\`, but still in flow and hit-testable), silently eating clicks meant for whatever sat underneath it on the page. */
       dialog {
-        display: flex;
+        display: none;
         flex-direction: column;
         gap: var(--gap-modal);
         box-sizing: border-box;
@@ -56,6 +57,7 @@ class o extends h {
       }
 
       dialog[open] {
+        display: flex;
         opacity: 1;
         transform: translateY(0);
       }
@@ -125,10 +127,10 @@ class o extends h {
     ];
   }
   updated(t) {
-    t.has("open") && (this.open ? c(this.dialog) : y(this.dialog)), this.readFooter();
+    t.has("open") && (this.open ? h(this.dialog) : v(this.dialog)), this.readFooter();
   }
   readFooter() {
-    const t = v(
+    const t = y(
       this.shadowRoot?.querySelector('slot[name="footer"]')
     );
     t !== this.hasFooter && (this.hasFooter = t, this.requestUpdate());
@@ -136,7 +138,7 @@ class o extends h {
   /** Asks to close. A cancelled `kt-close` keeps the modal open. */
   requestClose() {
     if (u(this, "kt-close").defaultPrevented) {
-      this.dialog.open || c(this.dialog);
+      this.dialog.open || h(this.dialog);
       return;
     }
     this.open = !1;

package/dist/components/overlays/kt-modal/kt-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-modal.js","sources":["../../../../src/components/overlays/kt-modal/kt-modal.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 { hasAssignedContent } from '#internal/slots';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport '../../core/kt-button/kt-button.js';\n\nexport type KtModalSize = 'small' | 'medium' | 'large' | 'full';\n\n/**\n * A centred dialog for anything that is not a yes/no question.\n *\n * `<kt-confirm-dialog>` asks one thing and offers two answers. This one holds\n * content — a compose window, a command palette, a picker — and lets you put\n * whatever you like in the footer.\n *\n * Built on the native `<dialog>`, so the top layer, focus containment, page\n * inertness and Escape all come from the platform rather than from a focus trap\n * that leaks.\n *\n * @element kt-modal\n *\n * @slot - The body.\n * @slot header - Replaces the `heading` attribute.\n * @slot footer - Actions. Hidden when empty.\n *\n * @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n * @csspart footer - The action row.\n *\n * @fires kt-close - Dismissal requested. Cancelable, for an unsaved-changes guard.\n *\n * @example\n * ```html\n * <kt-modal open heading=\"Compose\">\n *   <kt-textarea rows=\"6\"></kt-textarea>\n *   <kt-button slot=\"footer\" type=\"submit\">Send</kt-button>\n * </kt-modal>\n * ```\n */\nexport class KtModal extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      dialog {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-modal);\n        box-sizing: border-box;\n        width: 560px;\n        max-width: calc(100vw - 48px);\n        max-height: calc(100vh - 96px);\n        padding: var(--padding-modal);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--radius-modal);\n        opacity: 0;\n        transform: translateY(8px);\n        transition:\n          transform var(--duration-normal) var(--easing-standard),\n          opacity var(--duration-normal) var(--easing-standard),\n          overlay var(--duration-normal) allow-discrete,\n          display var(--duration-normal) allow-discrete;\n      }\n\n      :host([size='small']) dialog {\n        width: 400px;\n      }\n      :host([size='large']) dialog {\n        width: 760px;\n      }\n      :host([size='full']) dialog {\n        width: calc(100vw - 48px);\n        height: calc(100vh - 96px);\n      }\n\n      dialog[open] {\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      @starting-style {\n        dialog[open] {\n          opacity: 0;\n          transform: translateY(8px);\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        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-card);\n      }\n\n      .titles {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .body {\n        flex: 1 1 auto;\n        min-height: 0;\n        overflow: auto;\n        scrollbar-width: thin;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      .footer.empty {\n        display: none;\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  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String, reflect: true })\n  size: KtModalSize = 'medium';\n\n  /** Hides the close button. Escape still works — a modal you cannot leave is a trap. */\n  @property({ type: Boolean, attribute: 'no-close-button' })\n  noCloseButton = false;\n\n  /** Stops a backdrop click from dismissing. */\n  @property({ type: Boolean, attribute: 'no-backdrop-close' })\n  noBackdropClose = false;\n\n  private hasFooter = false;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('open')) {\n      if (this.open) openModal(this.dialog);\n      else closeDialog(this.dialog);\n    }\n    this.readFooter();\n  }\n\n  private readFooter(): void {\n    const next = hasAssignedContent(\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n    );\n    if (next === this.hasFooter) return;\n    this.hasFooter = next;\n    this.requestUpdate();\n  }\n\n  /** Asks to close. A cancelled `kt-close` keeps the modal open. */\n  requestClose(): void {\n    const proceed = emit(this, 'kt-close');\n    if (proceed.defaultPrevented) {\n      if (!this.dialog.open) openModal(this.dialog);\n      return;\n    }\n    this.open = false;\n  }\n\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    const hasHeader = Boolean(this.heading) || Boolean(this.description);\n\n    return html`<dialog\n      part=\"dialog\"\n      aria-label=${this.heading || nothing}\n      @close=${this.onDialogClose}\n      @click=${this.onDialogClick}\n    >\n      ${\n        hasHeader || !this.noCloseButton\n          ? html`<div part=\"header\" class=\"header\">\n              <div class=\"titles\">\n                <slot name=\"header\">\n                  ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}\n                </slot>\n                ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n              </div>\n              ${\n                this.noCloseButton\n                  ? nothing\n                  : html`<kt-button\n                      variant=\"secondary-no-bg\"\n                      size=\"small\"\n                      icon=\"x\"\n                      label=\"Close\"\n                      @click=${this.requestClose}\n                    ></kt-button>`\n              }\n            </div>`\n          : nothing\n      }\n\n      <div part=\"body\" class=\"body\"><slot></slot></div>\n\n      <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n        <slot name=\"footer\" @slotchange=${this.readFooter}></slot>\n      </div>\n    </dialog>`;\n  }\n}\n\ndefineElement('kt-modal', KtModal);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-modal': KtModal;\n  }\n}\n"],"names":["KtModal","KtElement","css","changed","openModal","closeDialog","next","hasAssignedContent","emit","event","isBackdropClick","hasHeader","html","nothing","__decorateClass","query","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-modal.js","sources":["../../../../src/components/overlays/kt-modal/kt-modal.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 { hasAssignedContent } from '#internal/slots';\nimport { closeDialog, isBackdropClick, openModal } from '#internal/dialog';\nimport '../../core/kt-button/kt-button.js';\n\nexport type KtModalSize = 'small' | 'medium' | 'large' | 'full';\n\n/**\n * A centred dialog for anything that is not a yes/no question.\n *\n * `<kt-confirm-dialog>` asks one thing and offers two answers. This one holds\n * content — a compose window, a command palette, a picker — and lets you put\n * whatever you like in the footer.\n *\n * Built on the native `<dialog>`, so the top layer, focus containment, page\n * inertness and Escape all come from the platform rather than from a focus trap\n * that leaks.\n *\n * @element kt-modal\n *\n * @slot - The body.\n * @slot header - Replaces the `heading` attribute.\n * @slot footer - Actions. Hidden when empty.\n *\n * @csspart dialog - The `<dialog>`.\n * @csspart header - The header row.\n * @csspart body - The scrolling body.\n * @csspart footer - The action row.\n *\n * @fires kt-close - Dismissal requested. Cancelable, for an unsaved-changes guard.\n *\n * @example\n * ```html\n * <kt-modal open heading=\"Compose\">\n *   <kt-textarea rows=\"6\"></kt-textarea>\n *   <kt-button slot=\"footer\" type=\"submit\">Send</kt-button>\n * </kt-modal>\n * ```\n */\nexport class KtModal extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      /* Closed by default — see kt-confirm-dialog.ts's identical comment: an unconditional \\`display: flex\\` here left a never-opened dialog occupying its centred box (\\`opacity: 0\\`, but still in flow and hit-testable), silently eating clicks meant for whatever sat underneath it on the page. */\n      dialog {\n        display: none;\n        flex-direction: column;\n        gap: var(--gap-modal);\n        box-sizing: border-box;\n        width: 560px;\n        max-width: calc(100vw - 48px);\n        max-height: calc(100vh - 96px);\n        padding: var(--padding-modal);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--radius-modal);\n        opacity: 0;\n        transform: translateY(8px);\n        transition:\n          transform var(--duration-normal) var(--easing-standard),\n          opacity var(--duration-normal) var(--easing-standard),\n          overlay var(--duration-normal) allow-discrete,\n          display var(--duration-normal) allow-discrete;\n      }\n\n      :host([size='small']) dialog {\n        width: 400px;\n      }\n      :host([size='large']) dialog {\n        width: 760px;\n      }\n      :host([size='full']) dialog {\n        width: calc(100vw - 48px);\n        height: calc(100vh - 96px);\n      }\n\n      dialog[open] {\n        display: flex;\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      @starting-style {\n        dialog[open] {\n          opacity: 0;\n          transform: translateY(8px);\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        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-card);\n      }\n\n      .titles {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .body {\n        flex: 1 1 auto;\n        min-height: 0;\n        overflow: auto;\n        scrollbar-width: thin;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      .footer.empty {\n        display: none;\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  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String, reflect: true })\n  size: KtModalSize = 'medium';\n\n  /** Hides the close button. Escape still works — a modal you cannot leave is a trap. */\n  @property({ type: Boolean, attribute: 'no-close-button' })\n  noCloseButton = false;\n\n  /** Stops a backdrop click from dismissing. */\n  @property({ type: Boolean, attribute: 'no-backdrop-close' })\n  noBackdropClose = false;\n\n  private hasFooter = false;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('open')) {\n      if (this.open) openModal(this.dialog);\n      else closeDialog(this.dialog);\n    }\n    this.readFooter();\n  }\n\n  private readFooter(): void {\n    const next = hasAssignedContent(\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n    );\n    if (next === this.hasFooter) return;\n    this.hasFooter = next;\n    this.requestUpdate();\n  }\n\n  /** Asks to close. A cancelled `kt-close` keeps the modal open. */\n  requestClose(): void {\n    const proceed = emit(this, 'kt-close');\n    if (proceed.defaultPrevented) {\n      if (!this.dialog.open) openModal(this.dialog);\n      return;\n    }\n    this.open = false;\n  }\n\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    const hasHeader = Boolean(this.heading) || Boolean(this.description);\n\n    return html`<dialog\n      part=\"dialog\"\n      aria-label=${this.heading || nothing}\n      @close=${this.onDialogClose}\n      @click=${this.onDialogClick}\n    >\n      ${\n        hasHeader || !this.noCloseButton\n          ? html`<div part=\"header\" class=\"header\">\n              <div class=\"titles\">\n                <slot name=\"header\">\n                  ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}\n                </slot>\n                ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n              </div>\n              ${\n                this.noCloseButton\n                  ? nothing\n                  : html`<kt-button\n                      variant=\"secondary-no-bg\"\n                      size=\"small\"\n                      icon=\"x\"\n                      label=\"Close\"\n                      @click=${this.requestClose}\n                    ></kt-button>`\n              }\n            </div>`\n          : nothing\n      }\n\n      <div part=\"body\" class=\"body\"><slot></slot></div>\n\n      <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n        <slot name=\"footer\" @slotchange=${this.readFooter}></slot>\n      </div>\n    </dialog>`;\n  }\n}\n\ndefineElement('kt-modal', KtModal);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-modal': KtModal;\n  }\n}\n"],"names":["KtModal","KtElement","css","changed","openModal","closeDialog","next","hasAssignedContent","emit","event","isBackdropClick","hasHeader","html","nothing","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;;;;;AA0CO,MAAMA,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAoHL,KAAA,OAAO,IAGP,KAAA,UAAU,IAGV,KAAA,cAAc,IAGd,KAAA,OAAoB,UAIpB,KAAA,gBAAgB,IAIhB,KAAA,kBAAkB,IAElB,KAAQ,YAAY;AAAA,EAAA;AAAA,EAtIpB,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;AAAA,IAAA;AAAA,EA2GF;AAAA,EA2BS,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OAAMC,EAAU,KAAK,MAAM,IAC/BC,EAAY,KAAK,MAAM,IAE9B,KAAK,WAAA;AAAA,EACP;AAAA,EAEQ,aAAmB;AACzB,UAAMC,IAAOC;AAAA,MACX,KAAK,YAAY,cAA+B,qBAAqB;AAAA,IAAA;AAEvE,IAAID,MAAS,KAAK,cAClB,KAAK,YAAYA,GACjB,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAGA,eAAqB;AAEnB,QADgBE,EAAK,MAAM,UAAU,EACzB,kBAAkB;AAC5B,MAAK,KAAK,OAAO,QAAMJ,EAAU,KAAK,MAAM;AAC5C;AAAA,IACF;AACA,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,gBAAsB;AAC5B,IAAI,KAAK,QAAM,KAAK,aAAA;AAAA,EACtB;AAAA,EAEQ,cAAcK,GAAyB;AAC7C,IAAI,KAAK,mBACLC,EAAgB,KAAK,QAAQD,CAAK,UAAQ,aAAA;AAAA,EAChD;AAAA,EAES,SAAyB;AAChC,UAAME,IAAY,EAAQ,KAAK,WAAY,EAAQ,KAAK;AAExD,WAAOC;AAAA;AAAA,mBAEQ,KAAK,WAAWC,CAAO;AAAA,eAC3B,KAAK,aAAa;AAAA,eAClB,KAAK,aAAa;AAAA;AAAA,QAGzBF,KAAa,CAAC,KAAK,gBACfC;AAAA;AAAA;AAAA,oBAGQ,KAAK,UAAUA,QAAW,KAAK,OAAO,UAAUC,CAAO;AAAA;AAAA,kBAEzD,KAAK,cAAcD,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA,gBAGnF,KAAK,gBACDA,IACAD;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKW,KAAK,YAAY;AAAA,kCAElC;AAAA,sBAEFC,CACN;AAAA;AAAA;AAAA;AAAA,iCAI2B,KAAK,YAAY,WAAW,cAAc;AAAA,0CACjC,KAAK,UAAU;AAAA;AAAA;AAAA,EAGvD;AACF;AApGUC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,GAhHJf,EAiHH,WAAA,QAAA;AAGRc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnH/BhB,EAoHX,WAAA,MAAA;AAGAc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtHfhB,EAuHX,WAAA,SAAA;AAGAc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzHfhB,EA0HX,WAAA,aAAA;AAGAc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5H9BhB,EA6HX,WAAA,MAAA;AAIAc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB;AAAA,GAhI9ChB,EAiIX,WAAA,eAAA;AAIAc,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB;AAAA,GApIhDhB,EAqIX,WAAA,iBAAA;AAkFFiB,EAAc,YAAYjB,CAAO;"}

package/dist/icons/index.js

@@ -1,37 +1,10 @@
-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);
+import { d as a, g as r, r as o, a as t, b as c, t as g } from "../chunks/defaults-DKzFsNbv.js";
 export {
-  y as defaultIcons,
-  E as getIcon,
-  F as registerIcon,
-  e as registerIcons,
-  L as registeredIcons,
-  T as toKebabCase
+  a as defaultIcons,
+  r as getIcon,
+  o as registerIcon,
+  t as registerIcons,
+  c as registeredIcons,
+  g as toKebabCase
 };
 //# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -1 +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;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ 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 { KtSplitButton } from './components/core/kt-split-button/kt-split-button.js';
+export type { KtSplitButtonItem } from './components/core/kt-split-button/kt-split-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';
@@ -59,12 +61,12 @@ export { KtCollapsible } from './components/overlays/kt-collapsible/kt-collapsib
 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 type { KtDropdownAlign, 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 type { KtChartType, KtMark, KtPoint, 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';