kanto-ds 1.0.0

package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js

@@ -0,0 +1,128 @@
+import { css as c, html as h } from "lit";
+import { queryAssignedElements as g, property as l } from "lit/decorators.js";
+import { K as d, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
+import { KtToggleButton as v } from "../kt-toggle-button/kt-toggle-button.js";
+var f = Object.defineProperty, s = (n, t, e, r) => {
+  for (var o = void 0, a = n.length - 1, u; a >= 0; a--)
+    (u = n[a]) && (o = u(t, e, o) || o);
+  return o && f(t, e, o), o;
+};
+class i extends d {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.orientation = "horizontal", this.label = "", this.value = null, this.onButtonClick = (t) => {
+      const e = t.composedPath().find((r) => r instanceof v);
+      if (!(!e || e.disabled) && this.buttons?.includes(e)) {
+        if (this.multiple) {
+          const r = Array.isArray(this.value) ? this.value : [];
+          this.value = r.includes(e.value) ? r.filter((o) => o !== e.value) : [...r, e.value];
+        } else
+          this.value = this.value === e.value ? null : e.value;
+        this.syncButtons(), p(this, "kt-change", { value: this.value });
+      }
+    };
+  }
+  static {
+    this.styles = [
+      d.styles,
+      c`
+      :host {
+        display: inline-flex;
+        width: fit-content;
+      }
+
+      .group {
+        display: inline-flex;
+        gap: 0;
+      }
+
+      :host([orientation='vertical']) .group {
+        flex-direction: column;
+      }
+
+      /* The buttons butt up against each other: square off the inner corners,
+         pull them together by a border width, and lift the selected one so its
+         border wins over its neighbour's. */
+      ::slotted(kt-toggle-button) {
+        position: relative;
+        z-index: 1;
+        --kt-toggle-button-radius: 0;
+      }
+
+      ::slotted(kt-toggle-button[selected]) {
+        z-index: 3;
+      }
+
+      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:not(:first-child)) {
+        margin-left: calc(var(--border-width) * -1);
+      }
+      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:first-child) {
+        --kt-toggle-button-radius: var(--border-radius) 0 0 var(--border-radius);
+      }
+      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:last-child) {
+        --kt-toggle-button-radius: 0 var(--border-radius) var(--border-radius) 0;
+      }
+
+      :host([orientation='vertical']) ::slotted(kt-toggle-button:not(:first-child)) {
+        margin-top: calc(var(--border-width) * -1);
+      }
+      :host([orientation='vertical']) ::slotted(kt-toggle-button:first-child) {
+        --kt-toggle-button-radius: var(--border-radius) var(--border-radius) 0 0;
+      }
+      :host([orientation='vertical']) ::slotted(kt-toggle-button:last-child) {
+        --kt-toggle-button-radius: 0 0 var(--border-radius) var(--border-radius);
+      }
+
+      /* A lone button keeps all four corners. */
+      ::slotted(kt-toggle-button:only-child) {
+        --kt-toggle-button-radius: var(--border-radius);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this.onButtonClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.onButtonClick);
+  }
+  firstUpdated() {
+    this.syncButtons();
+  }
+  updated(t) {
+    (t.has("value") || t.has("multiple")) && this.syncButtons();
+  }
+  isSelected(t) {
+    return this.multiple ? Array.isArray(this.value) && this.value.includes(t) : this.value === t;
+  }
+  /** Pushes the group's state down; the buttons are the display, not the truth. */
+  syncButtons() {
+    for (const t of this.buttons ?? [])
+      t.managed = !0, t.selected = this.isSelected(t.value);
+  }
+  render() {
+    return h`<div part="base" class="group" role="group" aria-label=${this.label || "Options"}>
+      <slot @slotchange=${this.syncButtons}></slot>
+    </div>`;
+  }
+}
+s([
+  g({ selector: "kt-toggle-button" })
+], i.prototype, "buttons");
+s([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "multiple");
+s([
+  l({ type: String, reflect: !0 })
+], i.prototype, "orientation");
+s([
+  l({ type: String })
+], i.prototype, "label");
+s([
+  l({ attribute: !1 })
+], i.prototype, "value");
+b("kt-toggle-button-group", i);
+export {
+  i as KtToggleButtonGroup
+};
+//# sourceMappingURL=kt-toggle-button-group.js.map

package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-toggle-button-group.js","sources":["../../../../src/components/navigation/kt-toggle-button-group/kt-toggle-button-group.ts"],"sourcesContent":["import { css, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { KtToggleButton } from '../kt-toggle-button/kt-toggle-button.js';\n\n/**\n * Joins `<kt-toggle-button>`s into one segmented bar and coordinates their\n * selection.\n *\n * Single mode behaves like a radio group with a deselect: clicking the active\n * button clears it. Multiple mode is a set of independent checkboxes that\n * happen to be drawn together.\n *\n * The buttons are slotted rather than described by an options array, so a\n * button can hold whatever its label needs — an icon, a count, a badge.\n *\n * @element kt-toggle-button-group\n *\n * @slot - The `<kt-toggle-button>` children.\n *\n * @csspart base - The group container.\n *\n * @fires kt-change - The selection changed.\n *   `detail: { value }` — a single value or `null`, or an array in multiple mode.\n *\n * @example\n * ```html\n * <kt-toggle-button-group>\n *   <kt-toggle-button value=\"list\" icon=\"list\" label=\"List\"></kt-toggle-button>\n *   <kt-toggle-button value=\"grid\" icon=\"grid\" label=\"Grid\"></kt-toggle-button>\n * </kt-toggle-button-group>\n * ```\n */\nexport class KtToggleButtonGroup extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        width: fit-content;\n      }\n\n      .group {\n        display: inline-flex;\n        gap: 0;\n      }\n\n      :host([orientation='vertical']) .group {\n        flex-direction: column;\n      }\n\n      /* The buttons butt up against each other: square off the inner corners,\n         pull them together by a border width, and lift the selected one so its\n         border wins over its neighbour's. */\n      ::slotted(kt-toggle-button) {\n        position: relative;\n        z-index: 1;\n        --kt-toggle-button-radius: 0;\n      }\n\n      ::slotted(kt-toggle-button[selected]) {\n        z-index: 3;\n      }\n\n      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:not(:first-child)) {\n        margin-left: calc(var(--border-width) * -1);\n      }\n      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:first-child) {\n        --kt-toggle-button-radius: var(--border-radius) 0 0 var(--border-radius);\n      }\n      :host(:not([orientation='vertical'])) ::slotted(kt-toggle-button:last-child) {\n        --kt-toggle-button-radius: 0 var(--border-radius) var(--border-radius) 0;\n      }\n\n      :host([orientation='vertical']) ::slotted(kt-toggle-button:not(:first-child)) {\n        margin-top: calc(var(--border-width) * -1);\n      }\n      :host([orientation='vertical']) ::slotted(kt-toggle-button:first-child) {\n        --kt-toggle-button-radius: var(--border-radius) var(--border-radius) 0 0;\n      }\n      :host([orientation='vertical']) ::slotted(kt-toggle-button:last-child) {\n        --kt-toggle-button-radius: 0 0 var(--border-radius) var(--border-radius);\n      }\n\n      /* A lone button keeps all four corners. */\n      ::slotted(kt-toggle-button:only-child) {\n        --kt-toggle-button-radius: var(--border-radius);\n      }\n    `,\n  ];\n\n  @queryAssignedElements({ selector: 'kt-toggle-button' })\n  private buttons!: KtToggleButton[];\n\n  /** `false`: one selection at a time. `true`: any number. */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Accessible name for the group. */\n  @property({ type: String })\n  label = '';\n\n  /** The selected value, or values in multiple mode. */\n  @property({ attribute: false })\n  value: string | string[] | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Listen on the host: the buttons are slotted light-DOM children, so a\n    // listener inside the shadow root would see them through a retargeted\n    // event.\n    this.addEventListener('click', this.onButtonClick);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.onButtonClick);\n  }\n\n  override firstUpdated(): void {\n    this.syncButtons();\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('multiple')) this.syncButtons();\n  }\n\n  private isSelected(candidate: string): boolean {\n    if (this.multiple) return Array.isArray(this.value) && this.value.includes(candidate);\n    return this.value === candidate;\n  }\n\n  /** Pushes the group's state down; the buttons are the display, not the truth. */\n  private syncButtons(): void {\n    for (const button of this.buttons ?? []) {\n      button.managed = true;\n      button.selected = this.isSelected(button.value);\n    }\n  }\n\n  private onButtonClick = (event: Event): void => {\n    // composedPath rather than target: the click starts on the <button> inside\n    // the child's shadow root, and reading target relies on retargeting, which\n    // browsers do and test DOMs do not.\n    const button = event\n      .composedPath()\n      .find((node): node is KtToggleButton => node instanceof KtToggleButton);\n\n    if (!button || button.disabled) return;\n    if (!this.buttons?.includes(button)) return;\n\n    if (this.multiple) {\n      const current = Array.isArray(this.value) ? this.value : [];\n      this.value = current.includes(button.value)\n        ? current.filter((candidate) => candidate !== button.value)\n        : [...current, button.value];\n    } else {\n      this.value = this.value === button.value ? null : button.value;\n    }\n\n    this.syncButtons();\n    emit(this, 'kt-change', { value: this.value });\n  };\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"group\" role=\"group\" aria-label=${this.label || 'Options'}>\n      <slot @slotchange=${this.syncButtons}></slot>\n    </div>`;\n  }\n}\n\ndefineElement('kt-toggle-button-group', KtToggleButtonGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toggle-button-group': KtToggleButtonGroup;\n  }\n}\n"],"names":["KtToggleButtonGroup","KtElement","event","button","node","KtToggleButton","current","candidate","emit","css","changed","html","__decorateClass","queryAssignedElements","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+/**
+ * A section that folds away.
+ *
+ * Built on `<details>`, which means it works before the JavaScript loads,
+ * survives find-in-page — the browser opens a closed section to reveal a match —
+ * and needs no ARIA of its own.
+ *
+ * @element kt-collapsible
+ *
+ * @slot - The contents.
+ * @slot summary - Replaces the `heading` attribute.
+ *
+ * @csspart base - The `<details>`.
+ * @csspart summary - The clickable row.
+ * @csspart content - The revealed panel.
+ *
+ * @fires kt-toggle - Opened or closed. `detail: { open }`.
+ *
+ * @example
+ * ```html
+ * <kt-collapsible heading="Notifications" open>
+ *   <kt-toggle checked>Email me about mentions</kt-toggle>
+ * </kt-collapsible>
+ * ```
+ */
+export declare class KtCollapsible extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    open: boolean;
+    heading: string;
+    /** Drops the bottom rule, for a collapsible that is not part of a list. */
+    plain: boolean;
+    private onToggle;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-collapsible': KtCollapsible;
+    }
+}

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

@@ -0,0 +1,107 @@
+import { css as d, nothing as m, html as c } from "lit";
+import { property as n } from "lit/decorators.js";
+import { K as p, d as u } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+var h = Object.defineProperty, i = (a, o, t, y) => {
+  for (var e = void 0, s = a.length - 1, l; s >= 0; s--)
+    (l = a[s]) && (e = l(o, t, e) || e);
+  return e && h(o, t, e), e;
+};
+class r extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "", this.plain = !1;
+  }
+  static {
+    this.styles = [
+      p.styles,
+      d`
+      :host {
+        display: block;
+      }
+
+      details {
+        border-bottom: var(--border-width) solid var(--border-subtle);
+      }
+
+      :host([plain]) details {
+        border-bottom: none;
+      }
+
+      summary {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-button);
+        padding: 12px 0;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        cursor: pointer;
+        list-style: none;
+      }
+
+      /* The default marker is a triangle nobody asked for. */
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      summary:hover {
+        color: var(--text-body);
+      }
+
+      summary:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      .chevron {
+        display: inline-flex;
+        flex: none;
+        color: var(--text-muted);
+        transition: transform var(--duration-fast) var(--easing-standard);
+      }
+
+      details[open] .chevron {
+        transform: rotate(90deg);
+      }
+
+      .label {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .content {
+        padding: 0 0 16px;
+        color: var(--text-muted);
+      }
+    `
+    ];
+  }
+  onToggle(o) {
+    const t = o.target;
+    t.open !== this.open && (this.open = t.open, f(this, "kt-toggle", { open: this.open }));
+  }
+  render() {
+    return c`<details part="base" ?open=${this.open} @toggle=${this.onToggle}>
+      <summary part="summary">
+        <span class="chevron"><kt-icon name="chevron-right" size="16"></kt-icon></span>
+        <span class="label"><slot name="summary">${this.heading || m}</slot></span>
+      </summary>
+      <div part="content" class="content"><slot></slot></div>
+    </details>`;
+  }
+}
+i([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "open");
+i([
+  n({ type: String })
+], r.prototype, "heading");
+i([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "plain");
+u("kt-collapsible", r);
+export {
+  r as KtCollapsible
+};
+//# sourceMappingURL=kt-collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-collapsible.js","sources":["../../../../src/components/overlays/kt-collapsible/kt-collapsible.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A section that folds away.\n *\n * Built on `<details>`, which means it works before the JavaScript loads,\n * survives find-in-page — the browser opens a closed section to reveal a match —\n * and needs no ARIA of its own.\n *\n * @element kt-collapsible\n *\n * @slot - The contents.\n * @slot summary - Replaces the `heading` attribute.\n *\n * @csspart base - The `<details>`.\n * @csspart summary - The clickable row.\n * @csspart content - The revealed panel.\n *\n * @fires kt-toggle - Opened or closed. `detail: { open }`.\n *\n * @example\n * ```html\n * <kt-collapsible heading=\"Notifications\" open>\n *   <kt-toggle checked>Email me about mentions</kt-toggle>\n * </kt-collapsible>\n * ```\n */\nexport class KtCollapsible extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      details {\n        border-bottom: var(--border-width) solid var(--border-subtle);\n      }\n\n      :host([plain]) details {\n        border-bottom: none;\n      }\n\n      summary {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n        padding: 12px 0;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        cursor: pointer;\n        list-style: none;\n      }\n\n      /* The default marker is a triangle nobody asked for. */\n      summary::-webkit-details-marker {\n        display: none;\n      }\n\n      summary:hover {\n        color: var(--text-body);\n      }\n\n      summary:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n\n      .chevron {\n        display: inline-flex;\n        flex: none;\n        color: var(--text-muted);\n        transition: transform var(--duration-fast) var(--easing-standard);\n      }\n\n      details[open] .chevron {\n        transform: rotate(90deg);\n      }\n\n      .label {\n        flex: 1;\n        min-width: 0;\n      }\n\n      .content {\n        padding: 0 0 16px;\n        color: var(--text-muted);\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String })\n  heading = '';\n\n  /** Drops the bottom rule, for a collapsible that is not part of a list. */\n  @property({ type: Boolean, reflect: true })\n  plain = false;\n\n  private onToggle(event: Event): void {\n    const details = event.target as HTMLDetailsElement;\n    if (details.open === this.open) return;\n\n    this.open = details.open;\n    emit(this, 'kt-toggle', { open: this.open });\n  }\n\n  override render(): TemplateResult {\n    return html`<details part=\"base\" ?open=${this.open} @toggle=${this.onToggle}>\n      <summary part=\"summary\">\n        <span class=\"chevron\"><kt-icon name=\"chevron-right\" size=\"16\"></kt-icon></span>\n        <span class=\"label\"><slot name=\"summary\">${this.heading || nothing}</slot></span>\n      </summary>\n      <div part=\"content\" class=\"content\"><slot></slot></div>\n    </details>`;\n  }\n}\n\ndefineElement('kt-collapsible', KtCollapsible);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-collapsible': KtCollapsible;\n  }\n}\n"],"names":["KtCollapsible","KtElement","css","event","details","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA+BO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkEL,KAAA,OAAO,IAGP,KAAA,UAAU,IAIV,KAAA,QAAQ;AAAA,EAAA;AAAA,EAxER,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,IAAA;AAAA,EA4DF;AAAA,EAYQ,SAASC,GAAoB;AACnC,UAAMC,IAAUD,EAAM;AACtB,IAAIC,EAAQ,SAAS,KAAK,SAE1B,KAAK,OAAOA,EAAQ,MACpBC,EAAK,MAAM,aAAa,EAAE,MAAM,KAAK,MAAM;AAAA,EAC7C;AAAA,EAES,SAAyB;AAChC,WAAOC,+BAAkC,KAAK,IAAI,YAAY,KAAK,QAAQ;AAAA;AAAA;AAAA,mDAG5B,KAAK,WAAWC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIxE;AACF;AA1BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjE/BT,EAkEX,WAAA,MAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApEfT,EAqEX,WAAA,SAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxE/BT,EAyEX,WAAA,OAAA;AAqBFU,EAAc,kBAAkBV,CAAa;"}

package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.d.ts

@@ -0,0 +1,56 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+export type KtConfirmVariant = 'danger' | 'primary';
+/**
+ * A centred yes/no overlay, for an action worth stopping to think about.
+ *
+ * Confirmations are for destructive or irreversible work. Editing belongs in a
+ * `<kt-side-panel>`, which does not block the page behind it.
+ *
+ * `role="alertdialog"` and the cancel button takes focus on open, so a stray
+ * Enter dismisses rather than confirms.
+ *
+ * @element kt-confirm-dialog
+ *
+ * @slot - Extra content between the message and the buttons.
+ *
+ * @csspart dialog - The `<dialog>`.
+ * @csspart actions - The button row.
+ *
+ * @fires kt-confirm - The confirm button was pressed.
+ * @fires kt-cancel - Dismissed, by button, Escape or backdrop.
+ *
+ * @example
+ * ```html
+ * <kt-confirm-dialog
+ *   heading="Delete this entity?"
+ *   message="This action cannot be undone."
+ *   confirm-label="Delete"
+ * ></kt-confirm-dialog>
+ * ```
+ */
+export declare class KtConfirmDialog extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private dialog;
+    private cancelButton;
+    open: boolean;
+    heading: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    /** `danger` gives the confirm button the solid red treatment. */
+    variant: KtConfirmVariant;
+    updated(changed: PropertyValues<this>): void;
+    private confirm;
+    private cancel;
+    /** Escape closes the native dialog; report it as a cancel. */
+    private onDialogClose;
+    private onDialogClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-confirm-dialog': KtConfirmDialog;
+    }
+}

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

@@ -0,0 +1,155 @@
+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 { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { o as u, c as b, i as y } 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;
+};
+class t extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "Are you sure?", this.message = "", this.confirmLabel = "Confirm", this.cancelLabel = "Cancel", this.variant = "danger";
+  }
+  static {
+    this.styles = [
+      p.styles,
+      f`
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-modal);
+        box-sizing: border-box;
+        width: 400px;
+        max-width: calc(100vw - 48px);
+        padding: var(--padding-modal);
+        color: var(--text-body);
+        background: var(--surface-card);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--radius-modal);
+        transform: translateY(8px);
+        opacity: 0;
+        transition:
+          transform var(--duration-normal) var(--easing-standard),
+          opacity var(--duration-normal) var(--easing-standard),
+          overlay var(--duration-normal) allow-discrete,
+          display var(--duration-normal) allow-discrete;
+      }
+
+      dialog[open] {
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      @starting-style {
+        dialog[open] {
+          transform: translateY(8px);
+          opacity: 0;
+        }
+      }
+
+      dialog::backdrop {
+        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));
+      }
+
+      h2 {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+
+      p {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--gap-button);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        dialog {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  updated(o) {
+    o.has("open") && (this.open ? (u(this.dialog), this.cancelButton?.focus()) : b(this.dialog));
+  }
+  confirm() {
+    this.open = !1, g(this, "kt-confirm");
+  }
+  cancel() {
+    this.open = !1, g(this, "kt-cancel");
+  }
+  /** Escape closes the native dialog; report it as a cancel. */
+  onDialogClose() {
+    this.open && this.cancel();
+  }
+  onDialogClick(o) {
+    y(this.dialog, o) && this.cancel();
+  }
+  render() {
+    return d`<dialog
+      part="dialog"
+      role="alertdialog"
+      aria-label=${this.heading}
+      aria-describedby=${this.message ? "kt-confirm-message" : c}
+      @close=${this.onDialogClose}
+      @click=${this.onDialogClick}
+    >
+      <h2>${this.heading}</h2>
+      ${this.message ? d`<p id="kt-confirm-message">${this.message}</p>` : c}
+      <slot></slot>
+
+      <div part="actions" class="actions">
+        <kt-button data-cancel variant="dark" @click=${this.cancel}>${this.cancelLabel}</kt-button>
+        <kt-button
+          variant=${this.variant === "danger" ? "delete" : "primary"}
+          @click=${this.confirm}
+          >${this.confirmLabel}</kt-button
+        >
+      </div>
+    </dialog>`;
+  }
+}
+a([
+  m("dialog")
+], t.prototype, "dialog");
+a([
+  m("kt-button[data-cancel]")
+], t.prototype, "cancelButton");
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "open");
+a([
+  r({ type: String })
+], t.prototype, "heading");
+a([
+  r({ type: String })
+], t.prototype, "message");
+a([
+  r({ type: String, attribute: "confirm-label" })
+], t.prototype, "confirmLabel");
+a([
+  r({ type: String, attribute: "cancel-label" })
+], t.prototype, "cancelLabel");
+a([
+  r({ type: String, reflect: !0 })
+], t.prototype, "variant");
+h("kt-confirm-dialog", t);
+export {
+  t as KtConfirmDialog
+};
+//# sourceMappingURL=kt-confirm-dialog.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,64 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtOption } from '#internal/listbox';
+export type KtDropdownPlacement = 'bottom' | 'top';
+/**
+ * A panel anchored to a trigger.
+ *
+ * The generic overlay: pass `options` for a menu, or slot anything into
+ * `panel` for arbitrary content. For choosing a value in a form, reach for
+ * `<kt-select>` or `<kt-input-menu>` instead — they carry the listbox
+ * semantics this one deliberately does not assume.
+ *
+ * @element kt-dropdown
+ *
+ * @slot trigger - What opens the panel.
+ * @slot panel - Panel contents, when `options` is not used.
+ *
+ * @csspart trigger - The trigger wrapper.
+ * @csspart panel - The floating panel.
+ * @csspart option - A menu row.
+ *
+ * @fires kt-select - A menu row was chosen. `detail: { value, option }`.
+ * @fires kt-open - The panel opened.
+ * @fires kt-close - The panel closed.
+ */
+export declare class KtDropdown extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private triggerWrapper;
+    private open;
+    /** Where the panel actually landed, after checking the room available. */
+    private placement;
+    /** Menu rows. Leave empty and slot into `panel` for custom content. */
+    options: readonly KtOption[];
+    /** Marks one row as current. */
+    value: string | number | null;
+    /** Where to put the panel when there is room on both sides. */
+    preferredPlacement: KtDropdownPlacement;
+    disabled: boolean;
+    emptyText: string;
+    /** Whether the panel is showing. */
+    get isOpen(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Flips the panel above the trigger when there is not enough room below,
+     * preferring whichever side has more space if neither fits.
+     */
+    private reposition;
+    private onDocumentPointerDown;
+    private onDocumentKeyDown;
+    /** Opens the panel. */
+    show(): void;
+    /** Closes the panel. */
+    hide(): void;
+    /** Opens or closes it. */
+    toggle(): void;
+    private choose;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-dropdown': KtDropdown;
+    }
+}