kanto-ds 1.7.0 → 1.9.0

package/dist/components/navigation/kt-user-menu/kt-user-menu.js

@@ -0,0 +1,298 @@
+import { css as c, nothing as r, html as s } from "lit";
+import { property as l, state as g, query as f } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { K as u, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { u as w, t as y, e as m } from "../../../chunks/events-r51msXNf.js";
+import { F as x, f as k } from "../../../chunks/floating-C9RLa6cZ.js";
+import "../../core/kt-avatar/kt-avatar.js";
+import "../../core/kt-icon/kt-icon.js";
+var $ = Object.defineProperty, n = (p, e, t, h) => {
+  for (var a = void 0, i = p.length - 1, d; i >= 0; i--)
+    (d = p[i]) && (a = d(e, t, a) || a);
+  return a && $(e, t, a), a;
+};
+class o extends u {
+  constructor() {
+    super(...arguments), this.name = "", this.email = "", this.avatar = "", this.items = [], this.showName = !1, this.open = !1, this.menuId = w("kt-user-menu"), this.floating = new x(this, {
+      panel: () => this.shadowRoot?.querySelector(".panel"),
+      anchor: () => this.trigger,
+      align: () => "end"
+    }), this.onDocumentPointerDown = (e) => {
+      e.composedPath().includes(this) || this.hide(!1);
+    };
+  }
+  static {
+    this.styles = [
+      u.styles,
+      k,
+      c`
+      :host {
+        display: inline-block;
+      }
+
+      .trigger {
+        display: inline-flex;
+        gap: var(--gap-button);
+        align-items: center;
+        padding: 2px;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        background: none;
+        border: none;
+        border-radius: var(--radius-full);
+        cursor: pointer;
+      }
+      :host([show-name]) .trigger {
+        padding-inline-end: 10px;
+      }
+      .trigger:hover {
+        background: var(--surface-hover);
+      }
+      .trigger:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .panel {
+        box-sizing: border-box;
+        width: 260px;
+        padding: var(--padding-expand);
+        background: var(--surface-popover);
+        border-radius: var(--radius-input);
+        opacity: 1;
+        transform: none;
+        transition:
+          opacity var(--duration-fast) var(--easing-standard),
+          transform var(--duration-fast) var(--easing-standard);
+      }
+      @starting-style {
+        .panel {
+          opacity: 0;
+          transform: translateY(-6px);
+        }
+      }
+
+      .who {
+        display: flex;
+        gap: var(--gap-form);
+        align-items: center;
+        padding: 8px 8px 12px;
+      }
+      .who-text {
+        display: grid;
+        min-width: 0;
+      }
+      .who-name {
+        overflow: hidden;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .who-email {
+        overflow: hidden;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      [role='menu'] {
+        display: grid;
+        gap: 2px;
+        margin: 0;
+        padding: 4px 0 0;
+        list-style: none;
+        border-top: var(--border-width) solid var(--divider-popover);
+      }
+      [role='separator'] {
+        height: var(--border-width);
+        margin: 4px 0;
+        background: var(--divider-popover);
+      }
+      .item {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        padding: 8px 10px;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        border-radius: var(--radius-input);
+        outline: none;
+        cursor: pointer;
+      }
+      .item kt-icon {
+        color: var(--text-muted);
+      }
+      .item:hover,
+      .item:focus-visible {
+        background: var(--surface-hover);
+      }
+      .item:focus-visible {
+        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);
+      }
+      .item.danger,
+      .item.danger kt-icon {
+        color: var(--color-danger-text);
+      }
+      .item.disabled {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+
+      .extra:empty {
+        display: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .panel {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.listen(!1);
+  }
+  listen(e) {
+    y(e, document, "pointerdown", this.onDocumentPointerDown);
+  }
+  get menuItems() {
+    return [
+      ...this.shadowRoot?.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled])'
+      ) ?? []
+    ];
+  }
+  /** Opens the menu, focusing its first item, or its last with `from: 'end'`. */
+  show(e = "start") {
+    this.open || (this.open = !0, m(this, "kt-open")), this.updateComplete.then(() => {
+      const t = this.menuItems;
+      (e === "end" ? t.at(-1) : t[0])?.focus();
+    });
+  }
+  /** Closes the menu; the focus goes back to the button unless told otherwise. */
+  hide(e = !0) {
+    this.open && (this.open = !1, m(this, "kt-close"), e && this.updateComplete.then(() => this.trigger.focus()));
+  }
+  // `open` is a state, so the map is read untyped.
+  updated(e) {
+    e.has("open") && this.listen(this.open), this.floating.sync(this.open);
+  }
+  choose(e) {
+    e.disabled || (this.hide(), m(this, "kt-select", { id: e.id, item: e }));
+  }
+  onTriggerKeyDown(e) {
+    (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show(e.key === "ArrowUp" ? "end" : "start"));
+  }
+  onMenuKeyDown(e) {
+    const t = this.menuItems, h = t.indexOf(e.target), a = (i) => {
+      e.preventDefault(), t[(i + t.length) % t.length]?.focus();
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        a(h + 1);
+        break;
+      case "ArrowUp":
+        a(h - 1);
+        break;
+      case "Home":
+        a(0);
+        break;
+      case "End":
+        a(t.length - 1);
+        break;
+      case "Escape":
+        e.preventDefault(), this.hide();
+        break;
+      case "Tab":
+        this.hide(!1);
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const i = this.items.find(
+          (d) => d.id === e.target.dataset.id
+        );
+        i && this.choose(i);
+        break;
+      }
+    }
+  }
+  renderItem(e) {
+    return s`${e.separator ? s`<li role="separator"></li>` : r}
+      <li
+        part="item"
+        role="menuitem"
+        tabindex="-1"
+        data-id=${e.id}
+        class=${v({ item: !0, danger: !!e.danger, disabled: !!e.disabled })}
+        aria-disabled=${e.disabled ? "true" : r}
+        @click=${() => this.choose(e)}
+      >
+        ${e.icon ? s`<kt-icon name=${e.icon} size="16"></kt-icon>` : r}
+        <span>${e.label}</span>
+      </li>`;
+  }
+  render() {
+    return s`<button
+        part="trigger"
+        class="trigger"
+        type="button"
+        aria-label=${this.name || r}
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.open ? this.menuId : r}
+        @click=${() => this.open ? this.hide() : this.show()}
+        @keydown=${this.onTriggerKeyDown}
+      >
+        <kt-avatar name=${this.name} src=${this.avatar || r} size="small"></kt-avatar>
+        ${this.showName ? s`<span aria-hidden="true">${this.name}</span>` : r}
+      </button>
+      ${this.open ? s`<div part="panel" class="panel floating" popover="manual">
+              <div class="who">
+                <kt-avatar name=${this.name} src=${this.avatar || r}></kt-avatar>
+                <div class="who-text">
+                  <span class="who-name">${this.name}</span>
+                  ${this.email ? s`<span class="who-email">${this.email}</span>` : r}
+                </div>
+              </div>
+              <ul
+                role="menu"
+                id=${this.menuId}
+                aria-label=${this.name || r}
+                @keydown=${this.onMenuKeyDown}
+              >
+                ${this.items.map((e) => this.renderItem(e))}
+              </ul>
+              <div class="extra"><slot></slot></div>
+            </div>` : r}`;
+  }
+}
+n([
+  l({ type: String })
+], o.prototype, "name");
+n([
+  l({ type: String })
+], o.prototype, "email");
+n([
+  l({ type: String })
+], o.prototype, "avatar");
+n([
+  l({ attribute: !1 })
+], o.prototype, "items");
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-name" })
+], o.prototype, "showName");
+n([
+  g()
+], o.prototype, "open");
+n([
+  f(".trigger")
+], o.prototype, "trigger");
+b("kt-user-menu", o);
+export {
+  o as KtUserMenu
+};
+//# sourceMappingURL=kt-user-menu.js.map

package/dist/components/navigation/kt-user-menu/kt-user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-user-menu.js","sources":["../../../../src/components/navigation/kt-user-menu/kt-user-menu.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, 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, toggleListener, uniqueId } from '#internal/events';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport '../../core/kt-avatar/kt-avatar.js';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtUserMenuItem {\n  readonly id: string;\n  readonly label: string;\n  /** A Lucide icon name, before the label. */\n  readonly icon?: string;\n  /** A rule above it, setting it apart from the items before. */\n  readonly separator?: boolean;\n  /** Drawn in the danger colour: sign out, delete the account. */\n  readonly danger?: boolean;\n  readonly disabled?: boolean;\n}\n\n/**\n * The account menu at the end of an application's header: the person's\n * avatar, and under it who is signed in and what they can do — their profile,\n * their settings, switching workspace, signing out.\n *\n * A menu button, as the WAI-ARIA pattern describes: Enter, Space or the down\n * arrow open it on the first item, the up arrow on the last; the arrows, Home\n * and End move between items; Escape closes it and gives the focus back; Tab\n * or a click outside close it too. The panel is drawn in the top layer, so no\n * overflow clips it.\n *\n * @element kt-user-menu\n *\n * @slot - Under the items: a workspace switcher, a theme toggle, a plan badge.\n *\n * @csspart trigger - The button.\n * @csspart panel - The menu's panel.\n * @csspart item - One item.\n *\n * @fires kt-select - An item was chosen. `detail: { id, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n *\n * @example\n * ```html\n * <kt-user-menu name=\"Dana Whitfield\" email=\"dana@northwind.io\"></kt-user-menu>\n * <script>\n *   menu.items = [\n *     { id: 'profile', label: 'Profile', icon: 'user' },\n *     { id: 'signout', label: 'Sign out', separator: true, danger: true },\n *   ];\n * </script>\n * ```\n */\nexport class KtUserMenu extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    floatingStyles,\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      .trigger {\n        display: inline-flex;\n        gap: var(--gap-button);\n        align-items: center;\n        padding: 2px;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        background: none;\n        border: none;\n        border-radius: var(--radius-full);\n        cursor: pointer;\n      }\n      :host([show-name]) .trigger {\n        padding-inline-end: 10px;\n      }\n      .trigger:hover {\n        background: var(--surface-hover);\n      }\n      .trigger:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .panel {\n        box-sizing: border-box;\n        width: 260px;\n        padding: var(--padding-expand);\n        background: var(--surface-popover);\n        border-radius: var(--radius-input);\n        opacity: 1;\n        transform: none;\n        transition:\n          opacity var(--duration-fast) var(--easing-standard),\n          transform var(--duration-fast) var(--easing-standard);\n      }\n      @starting-style {\n        .panel {\n          opacity: 0;\n          transform: translateY(-6px);\n        }\n      }\n\n      .who {\n        display: flex;\n        gap: var(--gap-form);\n        align-items: center;\n        padding: 8px 8px 12px;\n      }\n      .who-text {\n        display: grid;\n        min-width: 0;\n      }\n      .who-name {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n      .who-email {\n        overflow: hidden;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      [role='menu'] {\n        display: grid;\n        gap: 2px;\n        margin: 0;\n        padding: 4px 0 0;\n        list-style: none;\n        border-top: var(--border-width) solid var(--divider-popover);\n      }\n      [role='separator'] {\n        height: var(--border-width);\n        margin: 4px 0;\n        background: var(--divider-popover);\n      }\n      .item {\n        display: flex;\n        gap: 10px;\n        align-items: center;\n        padding: 8px 10px;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        border-radius: var(--radius-input);\n        outline: none;\n        cursor: pointer;\n      }\n      .item kt-icon {\n        color: var(--text-muted);\n      }\n      .item:hover,\n      .item:focus-visible {\n        background: var(--surface-hover);\n      }\n      .item:focus-visible {\n        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);\n      }\n      .item.danger,\n      .item.danger kt-icon {\n        color: var(--color-danger-text);\n      }\n      .item.disabled {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n\n      .extra:empty {\n        display: none;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .panel {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** The person signed in: names the button, draws the avatar's initials. */\n  @property({ type: String })\n  name = '';\n\n  /** Under the name in the panel. */\n  @property({ type: String })\n  email = '';\n\n  /** A picture for the avatar. */\n  @property({ type: String })\n  avatar = '';\n\n  /** The menu's items. Set as a property: `menu.items = [...]`. */\n  @property({ attribute: false })\n  items: readonly KtUserMenuItem[] = [];\n\n  /** Shows the name beside the avatar on the button. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-name' })\n  showName = false;\n\n  /** Whether the menu is open. */\n  @state() open = false;\n\n  @query('.trigger') private trigger!: HTMLButtonElement;\n\n  private readonly menuId = uniqueId('kt-user-menu');\n  private readonly floating = new FloatingController(this, {\n    panel: () => this.shadowRoot?.querySelector<HTMLElement>('.panel'),\n    anchor: () => this.trigger,\n    align: () => 'end',\n  });\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.listen(false);\n  }\n\n  private listen(on: boolean): void {\n    toggleListener(on, document, 'pointerdown', this.onDocumentPointerDown);\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (!event.composedPath().includes(this)) this.hide(false);\n  };\n\n  private get menuItems(): HTMLElement[] {\n    return [\n      ...(this.shadowRoot?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled])',\n      ) ?? []),\n    ];\n  }\n\n  /** Opens the menu, focusing its first item, or its last with `from: 'end'`. */\n  show(from: 'start' | 'end' = 'start'): void {\n    if (!this.open) {\n      this.open = true;\n      emit(this, 'kt-open');\n    }\n    void this.updateComplete.then(() => {\n      const items = this.menuItems;\n      (from === 'end' ? items.at(-1) : items[0])?.focus();\n    });\n  }\n\n  /** Closes the menu; the focus goes back to the button unless told otherwise. */\n  hide(refocus = true): void {\n    if (!this.open) return;\n    this.open = false;\n    emit(this, 'kt-close');\n    if (refocus) void this.updateComplete.then(() => this.trigger.focus());\n  }\n\n  // `open` is a state, so the map is read untyped.\n  override updated(changed: PropertyValues): void {\n    if (changed.has('open')) this.listen(this.open);\n    this.floating.sync(this.open);\n  }\n\n  private choose(item: KtUserMenuItem): void {\n    if (item.disabled) return;\n    this.hide();\n    emit(this, 'kt-select', { id: item.id, item });\n  }\n\n  private onTriggerKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.show(event.key === 'ArrowUp' ? 'end' : 'start');\n    }\n  }\n\n  private onMenuKeyDown(event: KeyboardEvent): void {\n    const items = this.menuItems;\n    const index = items.indexOf(event.target as HTMLElement);\n    const go = (to: number) => {\n      event.preventDefault();\n      items[(to + items.length) % items.length]?.focus();\n    };\n    switch (event.key) {\n      case 'ArrowDown':\n        go(index + 1);\n        break;\n      case 'ArrowUp':\n        go(index - 1);\n        break;\n      case 'Home':\n        go(0);\n        break;\n      case 'End':\n        go(items.length - 1);\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.hide();\n        break;\n      case 'Tab':\n        this.hide(false);\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const item = this.items.find(\n          (candidate) => candidate.id === (event.target as HTMLElement).dataset['id'],\n        );\n        if (item) this.choose(item);\n        break;\n      }\n    }\n  }\n\n  private renderItem(item: KtUserMenuItem): TemplateResult {\n    return html`${item.separator ? html`<li role=\"separator\"></li>` : nothing}\n      <li\n        part=\"item\"\n        role=\"menuitem\"\n        tabindex=\"-1\"\n        data-id=${item.id}\n        class=${classMap({ item: true, danger: Boolean(item.danger), disabled: Boolean(item.disabled) })}\n        aria-disabled=${item.disabled ? 'true' : nothing}\n        @click=${() => this.choose(item)}\n      >\n        ${item.icon ? html`<kt-icon name=${item.icon} size=\"16\"></kt-icon>` : nothing}\n        <span>${item.label}</span>\n      </li>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<button\n        part=\"trigger\"\n        class=\"trigger\"\n        type=\"button\"\n        aria-label=${this.name || nothing}\n        aria-haspopup=\"menu\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=${this.open ? this.menuId : nothing}\n        @click=${() => (this.open ? this.hide() : this.show())}\n        @keydown=${this.onTriggerKeyDown}\n      >\n        <kt-avatar name=${this.name} src=${this.avatar || nothing} size=\"small\"></kt-avatar>\n        ${this.showName ? html`<span aria-hidden=\"true\">${this.name}</span>` : nothing}\n      </button>\n      ${\n        this.open\n          ? html`<div part=\"panel\" class=\"panel floating\" popover=\"manual\">\n              <div class=\"who\">\n                <kt-avatar name=${this.name} src=${this.avatar || nothing}></kt-avatar>\n                <div class=\"who-text\">\n                  <span class=\"who-name\">${this.name}</span>\n                  ${this.email ? html`<span class=\"who-email\">${this.email}</span>` : nothing}\n                </div>\n              </div>\n              <ul\n                role=\"menu\"\n                id=${this.menuId}\n                aria-label=${this.name || nothing}\n                @keydown=${this.onMenuKeyDown}\n              >\n                ${this.items.map((item) => this.renderItem(item))}\n              </ul>\n              <div class=\"extra\"><slot></slot></div>\n            </div>`\n          : nothing\n      }`;\n  }\n}\n\ndefineElement('kt-user-menu', KtUserMenu);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-user-menu': KtUserMenu;\n  }\n}\n"],"names":["KtUserMenu","KtElement","uniqueId","FloatingController","event","floatingStyles","css","on","toggleListener","from","emit","items","refocus","changed","item","index","go","to","candidate","html","nothing","classMap","__decorateClass","property","state","query","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import type { KtCollapsible } from '../kt-collapsible/kt-collapsible.js';
+/**
+ * A set of `kt-collapsible` sections that open one at a time: opening one
+ * folds the one that was open, so the page stays the length of one answer.
+ * `multiple` lets each open on its own.
+ *
+ * The arrows, Home and End move between the sections' summaries, as the
+ * WAI-ARIA accordion pattern describes; Enter and Space open them, as they
+ * always do.
+ *
+ * @element kt-accordion
+ *
+ * @slot - The `kt-collapsible` sections.
+ *
+ * @fires kt-change - A section opened or closed. `detail: { open }`, the indexes of the open sections.
+ *
+ * @example
+ * ```html
+ * <kt-accordion>
+ *   <kt-collapsible heading="Shipping">Three to five days.</kt-collapsible>
+ *   <kt-collapsible heading="Returns">Thirty days, no questions.</kt-collapsible>
+ * </kt-accordion>
+ * ```
+ */
+export declare class KtAccordion extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Lets each section open on its own, instead of one at a time. */
+    multiple: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The sections, in order: the direct `kt-collapsible` children. */
+    get sections(): KtCollapsible[];
+    /** The first slotchange can land after the first render; settle once directly as well. */
+    firstUpdated(): void;
+    /** One open at a time: of several opened in the markup, the first stays. */
+    private settle;
+    private onToggle;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-accordion': KtAccordion;
+    }
+}

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

@@ -0,0 +1,80 @@
+import { css as a, html as h } from "lit";
+import { property as d } from "lit/decorators.js";
+import { K as l, d as p } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as f } from "../../../chunks/events-r51msXNf.js";
+var m = Object.defineProperty, u = (i, e, o, s) => {
+  for (var t = void 0, n = i.length - 1, r; n >= 0; n--)
+    (r = i[n]) && (t = r(e, o, t) || t);
+  return t && m(e, o, t), t;
+};
+class c extends l {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.onToggle = (e) => {
+      const o = e.target;
+      if (o.parentElement !== this) return;
+      if (!this.multiple && o.open)
+        for (const t of this.sections) t !== o && (t.open = !1);
+      const s = this.sections.flatMap((t, n) => t.open ? [n] : []);
+      f(this, "kt-change", { open: s });
+    }, this.onKeyDown = (e) => {
+      const o = e.target;
+      if (o.parentElement !== this || e.composedPath()[0].localName !== "summary")
+        return;
+      const s = this.sections, t = s.indexOf(o), n = {
+        ArrowDown: (t + 1) % s.length,
+        ArrowUp: (t - 1 + s.length) % s.length,
+        Home: 0,
+        End: s.length - 1
+      }[e.key];
+      n !== void 0 && (e.preventDefault(), s[n]?.focus());
+    };
+  }
+  static {
+    this.styles = [
+      l.styles,
+      a`
+      :host {
+        display: block;
+      }
+      /* The sections' rules run between them; one along the top closes the set. */
+      ::slotted(kt-collapsible:first-child) {
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("kt-toggle", this.onToggle), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("kt-toggle", this.onToggle), this.removeEventListener("keydown", this.onKeyDown);
+  }
+  /** The sections, in order: the direct `kt-collapsible` children. */
+  get sections() {
+    return [...this.children].filter(
+      (e) => e.localName === "kt-collapsible"
+    );
+  }
+  /** The first slotchange can land after the first render; settle once directly as well. */
+  firstUpdated() {
+    this.settle();
+  }
+  /** One open at a time: of several opened in the markup, the first stays. */
+  settle() {
+    if (this.multiple) return;
+    let e = !1;
+    for (const o of this.sections)
+      o.open && (e && (o.open = !1), e = !0);
+  }
+  render() {
+    return h`<slot @slotchange=${() => this.settle()}></slot>`;
+  }
+}
+u([
+  d({ type: Boolean, reflect: !0 })
+], c.prototype, "multiple");
+p("kt-accordion", c);
+export {
+  c as KtAccordion
+};
+//# sourceMappingURL=kt-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-accordion.js","sources":["../../../../src/components/overlays/kt-accordion/kt-accordion.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport type { KtCollapsible } from '../kt-collapsible/kt-collapsible.js';\n\n/**\n * A set of `kt-collapsible` sections that open one at a time: opening one\n * folds the one that was open, so the page stays the length of one answer.\n * `multiple` lets each open on its own.\n *\n * The arrows, Home and End move between the sections' summaries, as the\n * WAI-ARIA accordion pattern describes; Enter and Space open them, as they\n * always do.\n *\n * @element kt-accordion\n *\n * @slot - The `kt-collapsible` sections.\n *\n * @fires kt-change - A section opened or closed. `detail: { open }`, the indexes of the open sections.\n *\n * @example\n * ```html\n * <kt-accordion>\n *   <kt-collapsible heading=\"Shipping\">Three to five days.</kt-collapsible>\n *   <kt-collapsible heading=\"Returns\">Thirty days, no questions.</kt-collapsible>\n * </kt-accordion>\n * ```\n */\nexport class KtAccordion extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      /* The sections' rules run between them; one along the top closes the set. */\n      ::slotted(kt-collapsible:first-child) {\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n    `,\n  ];\n\n  /** Lets each section open on its own, instead of one at a time. */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('kt-toggle', this.onToggle);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('kt-toggle', this.onToggle);\n    this.removeEventListener('keydown', this.onKeyDown);\n  }\n\n  /** The sections, in order: the direct `kt-collapsible` children. */\n  get sections(): KtCollapsible[] {\n    return [...this.children].filter(\n      (child): child is KtCollapsible => child.localName === 'kt-collapsible',\n    );\n  }\n\n  /** The first slotchange can land after the first render; settle once directly as well. */\n  override firstUpdated(): void {\n    this.settle();\n  }\n\n  /** One open at a time: of several opened in the markup, the first stays. */\n  private settle(): void {\n    if (this.multiple) return;\n    let seen = false;\n    for (const section of this.sections) {\n      if (!section.open) continue;\n      if (seen) section.open = false;\n      seen = true;\n    }\n  }\n\n  private onToggle = (event: Event): void => {\n    const opened = event.target as KtCollapsible;\n    if (opened.parentElement !== this) return;\n    if (!this.multiple && opened.open) {\n      for (const section of this.sections) if (section !== opened) section.open = false;\n    }\n    const open = this.sections.flatMap((section, index) => (section.open ? [index] : []));\n    emit(this, 'kt-change', { open });\n  };\n\n  private onKeyDown = (event: KeyboardEvent): void => {\n    const from = event.target as Element;\n    // From a section's summary only: keys inside its content are its own.\n    if (\n      from.parentElement !== this ||\n      (event.composedPath()[0] as Element).localName !== 'summary'\n    ) {\n      return;\n    }\n    const sections = this.sections;\n    const index = sections.indexOf(from as KtCollapsible);\n    const to = {\n      ArrowDown: (index + 1) % sections.length,\n      ArrowUp: (index - 1 + sections.length) % sections.length,\n      Home: 0,\n      End: sections.length - 1,\n    }[event.key];\n    if (to === undefined) return;\n    event.preventDefault();\n    sections[to]?.focus();\n  };\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=${() => this.settle()}></slot>`;\n  }\n}\n\ndefineElement('kt-accordion', KtAccordion);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-accordion': KtAccordion;\n  }\n}\n"],"names":["KtAccordion","KtElement","event","opened","section","open","index","emit","from","sections","to","css","child","seen","html","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;AA6BO,MAAMA,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgBL,KAAA,WAAW,IAqCX,KAAQ,WAAW,CAACC,MAAuB;AACzC,YAAMC,IAASD,EAAM;AACrB,UAAIC,EAAO,kBAAkB,KAAM;AACnC,UAAI,CAAC,KAAK,YAAYA,EAAO;AAC3B,mBAAWC,KAAW,KAAK,UAAcA,MAAYD,QAAgB,OAAO;AAE9E,YAAME,IAAO,KAAK,SAAS,QAAQ,CAACD,GAASE,MAAWF,EAAQ,OAAO,CAACE,CAAK,IAAI,CAAA,CAAG;AACpF,MAAAC,EAAK,MAAM,aAAa,EAAE,MAAAF,EAAA,CAAM;AAAA,IAClC,GAEA,KAAQ,YAAY,CAACH,MAA+B;AAClD,YAAMM,IAAON,EAAM;AAEnB,UACEM,EAAK,kBAAkB,QACtBN,EAAM,eAAe,CAAC,EAAc,cAAc;AAEnD;AAEF,YAAMO,IAAW,KAAK,UAChBH,IAAQG,EAAS,QAAQD,CAAqB,GAC9CE,IAAK;AAAA,QACT,YAAYJ,IAAQ,KAAKG,EAAS;AAAA,QAClC,UAAUH,IAAQ,IAAIG,EAAS,UAAUA,EAAS;AAAA,QAClD,MAAM;AAAA,QACN,KAAKA,EAAS,SAAS;AAAA,MAAA,EACvBP,EAAM,GAAG;AACX,MAAIQ,MAAO,WACXR,EAAM,eAAA,GACNO,EAASC,CAAE,GAAG,MAAA;AAAA,IAChB;AAAA,EAAA;AAAA,EAlFA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBT,EAAU;AAAA,MACVU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EASF;AAAA,EAMS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,aAAa,KAAK,QAAQ,GAChD,KAAK,iBAAiB,WAAW,KAAK,SAAS;AAAA,EACjD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,aAAa,KAAK,QAAQ,GACnD,KAAK,oBAAoB,WAAW,KAAK,SAAS;AAAA,EACpD;AAAA;AAAA,EAGA,IAAI,WAA4B;AAC9B,WAAO,CAAC,GAAG,KAAK,QAAQ,EAAE;AAAA,MACxB,CAACC,MAAkCA,EAAM,cAAc;AAAA,IAAA;AAAA,EAE3D;AAAA;AAAA,EAGS,eAAqB;AAC5B,SAAK,OAAA;AAAA,EACP;AAAA;AAAA,EAGQ,SAAe;AACrB,QAAI,KAAK,SAAU;AACnB,QAAIC,IAAO;AACX,eAAWT,KAAW,KAAK;AACzB,MAAKA,EAAQ,SACTS,QAAc,OAAO,KACzBA,IAAO;AAAA,EAEX;AAAA,EAkCS,SAAyB;AAChC,WAAOC,sBAAyB,MAAM,KAAK,OAAA,CAAQ;AAAA,EACrD;AACF;AAxEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BhB,EAgBX,WAAA,UAAA;AA0EFiB,EAAc,gBAAgBjB,CAAW;"}

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

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import '../../core/kt-icon/kt-icon.js';
 /**
@@ -8,6 +8,11 @@ import '../../core/kt-icon/kt-icon.js';
  * survives find-in-page — the browser opens a closed section to reveal a match —
  * and needs no ARIA of its own.
  *
+ * Opening unfolds the content to its height and closing folds it away, in
+ * every browser: the details stays open until the fold is done, and a click
+ * half-way turns back from where it is. Not on the first render, and not
+ * under reduced motion.
+ *
  * @element kt-collapsible
  *
  * @slot - The contents.
@@ -32,6 +37,17 @@ export declare class KtCollapsible extends KtElement {
     heading: string;
     /** Drops the bottom rule, for a collapsible that is not part of a list. */
     plain: boolean;
+    /** Moves the focus to the summary, the control a person reaches it by. */
+    focus(options?: FocusOptions): void;
+    /** Closing, with the details kept open until the content has folded away. */
+    private folding;
+    private fold;
+    /** The summary opens and closes it here, so a close can wait for the fold. */
+    private onSummaryClick;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    /** Moves the content's height to its own (opening) or to nothing (closing), from where it is. */
+    private animateFold;
     private onToggle;
     render(): TemplateResult;
 }

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

@@ -1,21 +1,22 @@
-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-T0VbIBNp.js";
-import { e as f } from "../../../chunks/events-r51msXNf.js";
+import { css as u, nothing as g, html as y } from "lit";
+import { property as h, state as v } from "lit/decorators.js";
+import { K as p, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as c } from "../../../chunks/events-r51msXNf.js";
+import { d as k, p as w } from "../../../chunks/motion-ChVUUO7O.js";
 import "../../core/kt-icon/kt-icon.js";
-var h = Object.defineProperty, i = (a, o, t, v) => {
-  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;
+var x = Object.defineProperty, l = (d, t, e, a) => {
+  for (var o = void 0, i = d.length - 1, s; i >= 0; i--)
+    (s = d[i]) && (o = s(t, e, o) || o);
+  return o && x(t, e, o), o;
 };
-class r extends p {
+class n extends p {
   constructor() {
-    super(...arguments), this.open = !1, this.heading = "", this.plain = !1;
+    super(...arguments), this.open = !1, this.heading = "", this.plain = !1, this.folding = !1, this.fold = null;
   }
   static {
     this.styles = [
       p.styles,
-      d`
+      u`
       :host {
         display: block;
       }
@@ -58,10 +59,14 @@ class r extends p {
         display: inline-flex;
         flex: none;
         color: var(--text-muted);
-        transition: transform var(--duration-fast) var(--easing-standard);
+        /* Turns with the fold, as long, overshooting a touch before it
+           settles — so it reads as moving, not as swapped. */
+        transition: transform var(--duration-normal) cubic-bezier(0.34, 1.4, 0.64, 1);
       }
 
-      details[open] .chevron {
+      /* Follows what was asked, not the details, which stays open while
+         the content folds: the chevron turns back at the click. */
+      :host([open]) .chevron {
         transform: rotate(90deg);
       }
 
@@ -70,38 +75,88 @@ class r extends p {
         min-width: 0;
       }
 
+      /* The fold animates .content, which has no padding of its own: the
+         space sits inside it, so a height of nothing is nothing. */
       .content {
-        padding: 0 0 16px;
         color: var(--text-muted);
       }
+      .inner {
+        padding: 0 0 16px;
+      }
     `
     ];
   }
-  onToggle(o) {
-    const t = o.target;
-    t.open !== this.open && (this.open = t.open, f(this, "kt-toggle", { open: this.open }));
+  /** Moves the focus to the summary, the control a person reaches it by. */
+  focus(t) {
+    this.shadowRoot?.querySelector("summary")?.focus(t);
+  }
+  /** The summary opens and closes it here, so a close can wait for the fold. */
+  onSummaryClick(t) {
+    t.preventDefault(), this.open = !this.open, c(this, "kt-toggle", { open: this.open });
+  }
+  willUpdate(t) {
+    t.has("open") && this.hasUpdated && !this.open && k(this, "--duration-normal") > 0 && (this.folding = !0);
+  }
+  updated(t) {
+    t.has("open") && t.get("open") !== void 0 && this.animateFold(this.open);
+  }
+  /** Moves the content's height to its own (opening) or to nothing (closing), from where it is. */
+  animateFold(t) {
+    const e = this.renderRoot.querySelector(".content");
+    if (!e) return;
+    const a = this.fold, o = a ? e.getBoundingClientRect().height : t ? 0 : null, i = a ? Number(getComputedStyle(e).opacity) : t ? 0 : 1;
+    a?.cancel();
+    const s = e.getBoundingClientRect().height, f = o ?? s, m = t ? s : 0, r = w(
+      e,
+      [
+        { height: `${f}px`, opacity: i, overflow: "clip" },
+        { height: `${m}px`, opacity: t ? 1 : 0, overflow: "clip" }
+      ],
+      "--duration-normal",
+      "kt-collapsible-fold"
+    );
+    if (this.fold = r, !r) {
+      this.folding = !1;
+      return;
+    }
+    r.finished.then(
+      () => {
+        this.fold === r && (this.fold = null, t || (this.folding = !1));
+      },
+      () => {
+      }
+    );
+  }
+  onToggle(t) {
+    const e = t.target;
+    e.open !== (this.open || this.folding) && (this.open = e.open, c(this, "kt-toggle", { open: this.open }));
   }
   render() {
-    return c`<details part="base" ?open=${this.open} @toggle=${this.onToggle}>
-      <summary part="summary">
+    return y`<details part="base" ?open=${this.open || this.folding} @toggle=${this.onToggle}>
+      <summary part="summary" @click=${this.onSummaryClick}>
         <span class="chevron"><kt-icon name="chevron-right" size="16"></kt-icon></span>
-        <span class="label"><slot name="summary">${this.heading || m}</slot></span>
+        <span class="label"><slot name="summary">${this.heading || g}</slot></span>
       </summary>
-      <div part="content" class="content"><slot></slot></div>
+      <div part="content" class="content">
+        <div class="inner"><slot></slot></div>
+      </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);
+l([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "open");
+l([
+  h({ type: String })
+], n.prototype, "heading");
+l([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "plain");
+l([
+  v()
+], n.prototype, "folding");
+b("kt-collapsible", n);
 export {
-  r as KtCollapsible
+  n as KtCollapsible
 };
 //# sourceMappingURL=kt-collapsible.js.map