kanto-ds 1.0.0

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

@@ -0,0 +1,212 @@
+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 { 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;
+};
+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";
+    }, this.onDocumentPointerDown = (t) => {
+      t.composedPath().includes(this) || this.hide();
+    }, this.onDocumentKeyDown = (t) => {
+      t.key === "Escape" && this.hide();
+    };
+  }
+  static {
+    this.styles = [
+      m.styles,
+      v`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      .trigger {
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+
+      :host([disabled]) .trigger {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      .panel {
+        position: absolute;
+        top: calc(100% + 6px);
+        left: 0;
+        z-index: var(--z-dropdown);
+        box-sizing: border-box;
+        width: 224px;
+        max-height: 224px;
+        margin: 0;
+        padding: var(--padding-expand);
+        background: var(--surface-raised);
+        border-radius: var(--radius-input);
+        transform: translateY(-6px);
+        transform-origin: top left;
+        visibility: hidden;
+        opacity: 0;
+        transition:
+          opacity var(--duration-normal) var(--easing-standard),
+          transform var(--duration-normal) var(--easing-standard);
+      }
+
+      .panel.top {
+        top: auto;
+        bottom: calc(100% + 6px);
+        transform: translateY(6px);
+        transform-origin: bottom left;
+      }
+
+      .panel.open {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        max-height: 208px;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        list-style: none;
+        scrollbar-width: thin;
+      }
+
+      .option {
+        padding: var(--padding-expand-item);
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      .option:hover {
+        background: var(--surface-hover);
+      }
+
+      .option.selected {
+        color: var(--text-body);
+        font-weight: 600;
+        background: var(--color-dark-23);
+      }
+
+      .option.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .empty {
+        padding: var(--padding-expand-item);
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        cursor: default;
+      }
+    `
+    ];
+  }
+  /** Whether the panel is showing. */
+  get isOpen() {
+    return this.open;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("pointerdown", this.onDocumentPointerDown), document.addEventListener("keydown", this.onDocumentKeyDown), window.addEventListener("resize", this.reposition);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown), document.removeEventListener("keydown", this.onDocumentKeyDown), window.removeEventListener("resize", this.reposition);
+  }
+  /** Opens the panel. */
+  show() {
+    this.disabled || this.open || (this.reposition(), this.open = !0, l(this, "kt-open"));
+  }
+  /** Closes the panel. */
+  hide() {
+    this.open && (this.open = !1, l(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 }));
+  }
+  render() {
+    return a`<div
+        part="trigger"
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        <slot name="trigger"></slot>
+      </div>
+
+      <div
+        part="panel"
+        class=${h({ panel: !0, open: this.open, top: this.placement === "top" })}
+        role=${this.options.length > 0 ? "menu" : "group"}
+        aria-hidden=${this.open ? "false" : "true"}
+      >
+        ${this.options.length > 0 ? a`<ul class="list">
+                ${this.options.map(
+      (t) => a`<li
+                      part="option"
+                      class=${h({
+        option: !0,
+        selected: t.id === this.value,
+        disabled: !!t.disabled
+      })}
+                      role="menuitem"
+                      aria-disabled=${t.disabled ? "true" : f}
+                      @click=${() => this.choose(t)}
+                    >
+                      ${w(t)}
+                    </li>`
+    )}
+              </ul>` : a`<slot name="panel">
+                <div class="empty">${this.emptyText}</div>
+              </slot>`}
+      </div>`;
+  }
+}
+r([
+  b(".trigger")
+], o.prototype, "triggerWrapper");
+r([
+  g()
+], o.prototype, "open");
+r([
+  g()
+], o.prototype, "placement");
+r([
+  n({ attribute: !1 })
+], o.prototype, "options");
+r([
+  n({ type: String })
+], o.prototype, "value");
+r([
+  n({ type: String, attribute: "preferred-placement" })
+], o.prototype, "preferredPlacement");
+r([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+r([
+  n({ type: String, attribute: "empty-text" })
+], o.prototype, "emptyText");
+y("kt-dropdown", o);
+export {
+  o as KtDropdown
+};
+//# sourceMappingURL=kt-dropdown.js.map

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

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

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

@@ -0,0 +1,61 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+export type KtModalSize = 'small' | 'medium' | 'large' | 'full';
+/**
+ * A centred dialog for anything that is not a yes/no question.
+ *
+ * `<kt-confirm-dialog>` asks one thing and offers two answers. This one holds
+ * content — a compose window, a command palette, a picker — and lets you put
+ * whatever you like in the footer.
+ *
+ * Built on the native `<dialog>`, so the top layer, focus containment, page
+ * inertness and Escape all come from the platform rather than from a focus trap
+ * that leaks.
+ *
+ * @element kt-modal
+ *
+ * @slot - The body.
+ * @slot header - Replaces the `heading` attribute.
+ * @slot footer - Actions. Hidden when empty.
+ *
+ * @csspart dialog - The `<dialog>`.
+ * @csspart header - The header row.
+ * @csspart body - The scrolling body.
+ * @csspart footer - The action row.
+ *
+ * @fires kt-close - Dismissal requested. Cancelable, for an unsaved-changes guard.
+ *
+ * @example
+ * ```html
+ * <kt-modal open heading="Compose">
+ *   <kt-textarea rows="6"></kt-textarea>
+ *   <kt-button slot="footer" type="submit">Send</kt-button>
+ * </kt-modal>
+ * ```
+ */
+export declare class KtModal extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private dialog;
+    open: boolean;
+    heading: string;
+    description: string;
+    size: KtModalSize;
+    /** Hides the close button. Escape still works — a modal you cannot leave is a trap. */
+    noCloseButton: boolean;
+    /** Stops a backdrop click from dismissing. */
+    noBackdropClose: boolean;
+    private hasFooter;
+    updated(changed: PropertyValues<this>): void;
+    private readFooter;
+    /** Asks to close. A cancelled `kt-close` keeps the modal open. */
+    requestClose(): void;
+    private onDialogClose;
+    private onDialogClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-modal': KtModal;
+    }
+}

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

@@ -0,0 +1,207 @@
+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 { 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 "../../core/kt-button/kt-button.js";
+var x = Object.defineProperty, e = (l, t, d, C) => {
+  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 {
+  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,
+      g`
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-modal);
+        box-sizing: border-box;
+        width: 560px;
+        max-width: calc(100vw - 48px);
+        max-height: calc(100vh - 96px);
+        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);
+        opacity: 0;
+        transform: translateY(8px);
+        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;
+      }
+
+      :host([size='small']) dialog {
+        width: 400px;
+      }
+      :host([size='large']) dialog {
+        width: 760px;
+      }
+      :host([size='full']) dialog {
+        width: calc(100vw - 48px);
+        height: calc(100vh - 96px);
+      }
+
+      dialog[open] {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      @starting-style {
+        dialog[open] {
+          opacity: 0;
+          transform: translateY(8px);
+        }
+      }
+
+      dialog::backdrop {
+        background: var(--color-backdrop, rgba(0, 0, 0, 0.45));
+      }
+
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--gap-card);
+      }
+
+      .titles {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+
+      h2 {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+
+      .description {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+
+      .body {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+        scrollbar-width: thin;
+      }
+
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--gap-button);
+      }
+
+      .footer.empty {
+        display: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        dialog {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  updated(t) {
+    t.has("open") && (this.open ? c(this.dialog) : y(this.dialog)), this.readFooter();
+  }
+  readFooter() {
+    const t = v(
+      this.shadowRoot?.querySelector('slot[name="footer"]')
+    );
+    t !== this.hasFooter && (this.hasFooter = t, this.requestUpdate());
+  }
+  /** Asks to close. A cancelled `kt-close` keeps the modal open. */
+  requestClose() {
+    if (u(this, "kt-close").defaultPrevented) {
+      this.dialog.open || c(this.dialog);
+      return;
+    }
+    this.open = !1;
+  }
+  onDialogClose() {
+    this.open && this.requestClose();
+  }
+  onDialogClick(t) {
+    this.noBackdropClose || b(this.dialog, t) && this.requestClose();
+  }
+  render() {
+    const t = !!this.heading || !!this.description;
+    return s`<dialog
+      part="dialog"
+      aria-label=${this.heading || r}
+      @close=${this.onDialogClose}
+      @click=${this.onDialogClick}
+    >
+      ${t || !this.noCloseButton ? s`<div part="header" class="header">
+              <div class="titles">
+                <slot name="header">
+                  ${this.heading ? s`<h2>${this.heading}</h2>` : r}
+                </slot>
+                ${this.description ? s`<p class="description">${this.description}</p>` : r}
+              </div>
+              ${this.noCloseButton ? r : s`<kt-button
+                      variant="secondary-no-bg"
+                      size="small"
+                      icon="x"
+                      label="Close"
+                      @click=${this.requestClose}
+                    ></kt-button>`}
+            </div>` : r}
+
+      <div part="body" class="body"><slot></slot></div>
+
+      <div part="footer" class=${this.hasFooter ? "footer" : "footer empty"}>
+        <slot name="footer" @slotchange=${this.readFooter}></slot>
+      </div>
+    </dialog>`;
+  }
+}
+e([
+  f("dialog")
+], o.prototype, "dialog");
+e([
+  i({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+e([
+  i({ type: String })
+], o.prototype, "heading");
+e([
+  i({ type: String })
+], o.prototype, "description");
+e([
+  i({ type: String, reflect: !0 })
+], o.prototype, "size");
+e([
+  i({ type: Boolean, attribute: "no-close-button" })
+], o.prototype, "noCloseButton");
+e([
+  i({ type: Boolean, attribute: "no-backdrop-close" })
+], o.prototype, "noBackdropClose");
+m("kt-modal", o);
+export {
+  o as KtModal
+};
+//# sourceMappingURL=kt-modal.js.map

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

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

package/dist/components/overlays/kt-side-panel/kt-side-panel.d.ts

@@ -0,0 +1,52 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+/**
+ * A drawer that slides in from the right, for viewing or editing one record
+ * without leaving the list behind it.
+ *
+ * Built on the native `<dialog>`: the panel lands in the top layer, focus is
+ * trapped inside it, the page behind goes inert, and Escape closes it — none of
+ * which the fixed-position div this replaces did.
+ *
+ * @element kt-side-panel
+ *
+ * @slot - The panel body.
+ * @slot footer - Pinned below the body.
+ *
+ * @csspart dialog - The `<dialog>`.
+ * @csspart header - The header row.
+ * @csspart body - The scrolling body.
+ *
+ * @fires kt-close - The panel was dismissed. Cancelable: cancel it to keep the
+ *   panel open, for an unsaved-changes prompt.
+ *
+ * @example
+ * ```html
+ * <kt-side-panel open eyebrow="Details" heading="Entity 4812">
+ *   <p>…</p>
+ * </kt-side-panel>
+ * ```
+ */
+export declare class KtSidePanel extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private dialog;
+    open: boolean;
+    /** Small uppercase label above the heading — "Details", "Editing". */
+    eyebrow: string;
+    heading: string;
+    /** Suppresses dismissal by backdrop click. Escape still works, by design. */
+    noBackdropClose: boolean;
+    updated(changed: PropertyValues<this>): void;
+    /** Asks to close. A cancelled `kt-close` keeps the panel open. */
+    requestClose(): void;
+    /** Escape and the native close both land here. */
+    private onDialogClose;
+    private onDialogClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-side-panel': KtSidePanel;
+    }
+}