kanto-ds 1.2.0 → 1.3.0

package/dist/components/core/kt-split-button/kt-split-button.js

@@ -1,21 +1,22 @@
-import { css as f, nothing as c, html as a } from "lit";
-import { query as b, state as g, property as o } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { K as h, d as w } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as x } from "../../../chunks/events-Bjl5Zmmq.js";
-import { f as m, o as k, l as $, n as u } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { css as g, nothing as p, html as a } from "lit";
+import { query as f, state as y, property as o } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { K as h, d as x } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { e as k } from "../../../chunks/events-Bjl5Zmmq.js";
+import { f as m, o as $, l as I, n as u } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { s as v } from "../../../chunks/index-fzPIgxe2.js";
 import "../kt-button/kt-button.js";
 import "../kt-icon/kt-icon.js";
 import "../../overlays/kt-dropdown/kt-dropdown.js";
-var I = Object.defineProperty, i = (n, t, r, l) => {
-  for (var s = void 0, d = n.length - 1, p; d >= 0; d--)
-    (p = n[d]) && (s = p(t, r, s) || s);
-  return s && I(t, r, s), s;
+var C = Object.defineProperty, i = (n, t, r, l) => {
+  for (var s = void 0, d = n.length - 1, c; d >= 0; d--)
+    (c = n[d]) && (s = c(t, r, s) || s);
+  return s && C(t, r, s), s;
 };
-const v = { small: 16, medium: 20, large: 24 };
+const b = { small: 16, medium: 20, large: 24 };
 class e extends h {
   constructor() {
-    super(...arguments), this.activeIndex = -1, this.items = [], this.variant = "primary", this.size = "medium", this.disabled = !1, this.icon = "", this.menuLabel = "More actions", this.preferredPlacement = "bottom", this.emptyText = "No actions", this.onOpen = () => {
+    super(...arguments), this.activeIndex = -1, this.items = [], this.variant = "primary", this.size = "medium", this.disabled = !1, this.icon = "", this.menuLabel = void 0, this.preferredPlacement = "bottom", this.emptyText = void 0, this.onOpen = () => {
       this.moveTo(m(this.items));
     }, this.onClose = () => {
       const t = this.shadowRoot?.activeElement;
@@ -25,7 +26,7 @@ class e extends h {
         ArrowDown: () => u(this.items, this.activeIndex, 1),
         ArrowUp: () => u(this.items, this.activeIndex, -1),
         Home: () => m(this.items),
-        End: () => $(this.items)
+        End: () => I(this.items)
       }[t.key];
       l && (t.preventDefault(), this.moveTo(l()));
     };
@@ -33,7 +34,7 @@ class e extends h {
   static {
     this.styles = [
       h.styles,
-      f`
+      g`
       :host {
         display: inline-flex;
         vertical-align: middle;
@@ -147,7 +148,7 @@ class e extends h {
     t < 0 || (this.activeIndex = t, await this.updateComplete, this.row(t)?.focus());
   }
   choose(t) {
-    t.disabled || (this.hide(), x(this, "kt-select", { value: t.id, item: t }));
+    t.disabled || (this.hide(), k(this, "kt-select", { value: t.id, item: t }));
   }
   /**
    * A click anywhere in the menu stops here. It originates inside this
@@ -168,15 +169,15 @@ class e extends h {
   renderItem(t, r) {
     return a`<button
       part="item"
-      class=${y({ item: !0, danger: t.variant === "danger" })}
+      class=${w({ item: !0, danger: t.variant === "danger" })}
       type="button"
       role="menuitem"
       tabindex=${r === this.activeIndex ? 0 : -1}
-      aria-disabled=${t.disabled ? "true" : c}
+      aria-disabled=${t.disabled ? "true" : p}
       @click=${() => this.choose(t)}
     >
-      ${t.icon ? a`<kt-icon name=${t.icon} size=${v[this.size]}></kt-icon>` : c}
-      ${k(t)}
+      ${t.icon ? a`<kt-icon name=${t.icon} size=${b[this.size]}></kt-icon>` : p}
+      ${$(t)}
     </button>`;
   }
   render() {
@@ -191,7 +192,7 @@ class e extends h {
         size=${this.size}
         ?disabled=${this.disabled}
       >
-        ${this.icon ? a`<kt-icon name=${this.icon} size=${v[this.size]}></kt-icon>` : c}
+        ${this.icon ? a`<kt-icon name=${this.icon} size=${b[this.size]}></kt-icon>` : p}
         <slot></slot>
       </kt-button>
 
@@ -210,26 +211,26 @@ class e extends h {
           variant=${this.variant}
           size=${this.size}
           icon="chevron-down"
-          label=${this.menuLabel}
+          label=${this.menuLabel ?? v().moreActions}
           ?disabled=${this.disabled}
           @click=${this.onCaretClick}
         ></kt-button>
 
         <div slot="panel" part="menu" class="menu" role="menu" @keydown=${this.onMenuKeyDown}>
-          ${this.items.length > 0 ? this.items.map((t, r) => this.renderItem(t, r)) : a`<div class="empty">${this.emptyText}</div>`}
+          ${this.items.length > 0 ? this.items.map((t, r) => this.renderItem(t, r)) : a`<div class="empty">${this.emptyText ?? v().noActions}</div>`}
         </div>
       </kt-dropdown>
     </div>`;
   }
 }
 i([
-  b("kt-dropdown")
+  f("kt-dropdown")
 ], e.prototype, "dropdown");
 i([
-  b(".caret")
+  f(".caret")
 ], e.prototype, "caret");
 i([
-  g()
+  y()
 ], e.prototype, "activeIndex");
 i([
   o({ attribute: !1 })
@@ -255,7 +256,7 @@ i([
 i([
   o({ type: String, attribute: "empty-text" })
 ], e.prototype, "emptyText");
-w("kt-split-button", e);
+x("kt-split-button", e);
 export {
   e as KtSplitButton
 };

package/dist/components/core/kt-split-button/kt-split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-split-button.js","sources":["../../../../src/components/core/kt-split-button/kt-split-button.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 {\n  firstEnabledIndex,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';\nimport type { KtDropdown, KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';\nimport '../kt-button/kt-button.js';\nimport '../kt-icon/kt-icon.js';\nimport '../../overlays/kt-dropdown/kt-dropdown.js';\n\n/** A row of the menu. `danger` tints it, for the one action to think twice about. */\nexport interface KtSplitButtonItem extends KtOption {\n  readonly icon?: string;\n  readonly variant?: 'default' | 'danger';\n}\n\n/** Icon size per button size, matching `<kt-button>`. */\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * One button carrying a menu of related actions.\n *\n * The body runs the action a user wants nine times out of ten and emits a\n * plain `click`; the caret opens the rest. Reach for it when the alternatives\n * are variations on the same action — \"Save and close\", \"Save a copy\" — and\n * for an unrelated set of actions use `<kt-dropdown>` instead, which has no\n * default action to promote.\n *\n * A caret press never reads as a `click` on the host, so a single `click`\n * listener means the primary action and nothing else.\n *\n * @element kt-split-button\n *\n * @slot - The primary action's label.\n *\n * @csspart action - The primary `<kt-button>`.\n * @csspart caret - The `<kt-button>` that opens the menu.\n * @csspart menu - The list of rows.\n * @csspart item - A menu row.\n *\n * @fires kt-select - A menu row was chosen. `detail: { value, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n *\n * @example\n * ```html\n * <kt-split-button>Save</kt-split-button>\n * ```\n * ```js\n * el.items = [\n *   { id: 'close', label: 'Save and close' },\n *   { id: 'discard', label: 'Discard', variant: 'danger' },\n * ];\n * el.addEventListener('kt-select', (e) => run(e.detail.value));\n * ```\n */\nexport class KtSplitButton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n\n      /* A hairline of the page showing through is the seam between the two\n         segments — the same trick the rest of the system uses for elevation,\n         where a border would have been. */\n      .split {\n        display: inline-flex;\n        align-items: stretch;\n        gap: var(--border-width);\n      }\n\n      .action::part(button) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      .caret::part(button) {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .menu {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        max-height: 208px;\n        overflow: auto;\n        scrollbar-width: thin;\n      }\n\n      .item {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n        width: 100%;\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: left;\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      .item:hover {\n        color: var(--text-body);\n        background: var(--surface-hover);\n      }\n\n      /* Inset, so the ring is never clipped by the panel it scrolls inside. */\n      .item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: calc(-1 * var(--outline-width));\n      }\n\n      .item.danger {\n        color: var(--color-danger-text);\n      }\n      .item.danger:hover {\n        color: var(--color-danger-text);\n        background: var(--color-danger-soft);\n      }\n\n      .item[aria-disabled='true'] {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      .item[aria-disabled='true']:hover {\n        color: var(--text-disabled);\n        background: 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('kt-dropdown')\n  private dropdown?: KtDropdown;\n\n  @query('.caret')\n  private caret?: HTMLElement & { focus(): void };\n\n  /** The row the roving tabindex currently sits on. */\n  @state()\n  private activeIndex = -1;\n\n  /** The menu rows. */\n  @property({ attribute: false })\n  items: readonly KtSplitButtonItem[] = [];\n\n  /** Visual variant, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  variant: KtButtonVariant = 'primary';\n\n  /** Height, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  size: KtButtonSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Lucide icon name for the primary segment. */\n  @property({ type: String })\n  icon = '';\n\n  /** Accessible name of the caret, which has no text of its own. */\n  @property({ type: String, attribute: 'menu-label' })\n  menuLabel = 'More actions';\n\n  /** Where to put the menu when there is room on both sides. */\n  @property({ type: String, attribute: 'preferred-placement' })\n  preferredPlacement: KtDropdownPlacement = 'bottom';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No actions';\n\n  /** Whether the menu is showing. */\n  get isOpen(): boolean {\n    return this.dropdown?.isOpen ?? false;\n  }\n\n  /** Opens the menu. */\n  show(): void {\n    this.dropdown?.show();\n  }\n\n  /** Closes it. */\n  hide(): void {\n    this.dropdown?.hide();\n  }\n\n  /** Either. */\n  toggle(): void {\n    this.dropdown?.toggle();\n  }\n\n  /** Moves focus to the primary segment. */\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.action')?.focus(options);\n  }\n\n  private row(index: number): HTMLElement | null {\n    return this.shadowRoot?.querySelectorAll<HTMLElement>('.item')[index] ?? null;\n  }\n\n  /** Lands the roving tabindex on `index` and takes focus there. */\n  private async moveTo(index: number): Promise<void> {\n    if (index < 0) return;\n    this.activeIndex = index;\n    await this.updateComplete;\n    this.row(index)?.focus();\n  }\n\n  private onOpen = (): void => {\n    void this.moveTo(firstEnabledIndex(this.items));\n  };\n\n  /**\n   * Returns focus to the caret, but only when it was inside the menu — an\n   * outside click already moved it somewhere the user chose, and pulling it\n   * back here would undo that.\n   */\n  private onClose = (): void => {\n    const active = this.shadowRoot?.activeElement;\n    this.activeIndex = -1;\n    if (active instanceof HTMLElement && active.classList.contains('item')) this.caret?.focus();\n  };\n\n  private onMenuKeyDown = (event: KeyboardEvent): void => {\n    const moves: Record<string, () => number> = {\n      ArrowDown: () => nextEnabledIndex(this.items, this.activeIndex, 1),\n      ArrowUp: () => nextEnabledIndex(this.items, this.activeIndex, -1),\n      Home: () => firstEnabledIndex(this.items),\n      End: () => lastEnabledIndex(this.items),\n    };\n\n    const move = moves[event.key];\n    if (!move) return;\n\n    event.preventDefault();\n    void this.moveTo(move());\n  };\n\n  private choose(item: KtSplitButtonItem): void {\n    if (item.disabled) return;\n    this.hide();\n    emit(this, 'kt-select', { value: item.id, item });\n  }\n\n  /**\n   * A click anywhere in the menu stops here. It originates inside this\n   * element's shadow root, so without this it would surface on the host as a\n   * `click` and be mistaken for the primary action.\n   */\n  private containClick(event: Event): void {\n    event.stopPropagation();\n  }\n\n  /**\n   * The caret drives the panel itself rather than leaning on the click\n   * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here\n   * keeps the press off the host, and leaving it to bubble would toggle twice.\n   */\n  private onCaretClick(event: Event): void {\n    event.stopPropagation();\n    this.toggle();\n  }\n\n  private renderItem(item: KtSplitButtonItem, index: number): TemplateResult {\n    return html`<button\n      part=\"item\"\n      class=${classMap({ item: true, danger: item.variant === 'danger' })}\n      type=\"button\"\n      role=\"menuitem\"\n      tabindex=${index === this.activeIndex ? 0 : -1}\n      aria-disabled=${item.disabled ? 'true' : nothing}\n      @click=${() => this.choose(item)}\n    >\n      ${\n        item.icon\n          ? html`<kt-icon name=${item.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n          : nothing\n      }\n      ${optionLabel(item)}\n    </button>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<div class=\"split\">\n      <!-- The icon is slotted rather than passed as \\`icon\\`: <kt-button> reads\n           its own text content to decide whether it is icon-only, and a <slot>\n           has none, so setting \\`icon\\` here would collapse it to a square. -->\n      <kt-button\n        part=\"action\"\n        class=\"action\"\n        variant=${this.variant}\n        size=${this.size}\n        ?disabled=${this.disabled}\n      >\n        ${\n          this.icon\n            ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n            : nothing\n        }\n        <slot></slot>\n      </kt-button>\n\n      <kt-dropdown\n        align=\"end\"\n        preferred-placement=${this.preferredPlacement}\n        ?disabled=${this.disabled}\n        @click=${this.containClick}\n        @kt-open=${this.onOpen}\n        @kt-close=${this.onClose}\n      >\n        <kt-button\n          slot=\"trigger\"\n          part=\"caret\"\n          class=\"caret\"\n          variant=${this.variant}\n          size=${this.size}\n          icon=\"chevron-down\"\n          label=${this.menuLabel}\n          ?disabled=${this.disabled}\n          @click=${this.onCaretClick}\n        ></kt-button>\n\n        <div slot=\"panel\" part=\"menu\" class=\"menu\" role=\"menu\" @keydown=${this.onMenuKeyDown}>\n          ${\n            this.items.length > 0\n              ? this.items.map((item, index) => this.renderItem(item, index))\n              : html`<div class=\"empty\">${this.emptyText}</div>`\n          }\n        </div>\n      </kt-dropdown>\n    </div>`;\n  }\n}\n\ndefineElement('kt-split-button', KtSplitButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-split-button': KtSplitButton;\n  }\n}\n"],"names":["ICON_SIZE","KtSplitButton","KtElement","firstEnabledIndex","active","event","move","nextEnabledIndex","lastEnabledIndex","css","options","index","item","emit","html","classMap","nothing","optionLabel","__decorateClass","query","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-split-button.js","sources":["../../../../src/components/core/kt-split-button/kt-split-button.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 {\n  firstEnabledIndex,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport { strings } from '#internal/strings';\nimport type { KtButtonSize, KtButtonVariant } from '../kt-button/kt-button.js';\nimport type { KtDropdown, KtDropdownPlacement } from '../../overlays/kt-dropdown/kt-dropdown.js';\nimport '../kt-button/kt-button.js';\nimport '../kt-icon/kt-icon.js';\nimport '../../overlays/kt-dropdown/kt-dropdown.js';\n\n/** A row of the menu. `danger` tints it, for the one action to think twice about. */\nexport interface KtSplitButtonItem extends KtOption {\n  readonly icon?: string;\n  readonly variant?: 'default' | 'danger';\n}\n\n/** Icon size per button size, matching `<kt-button>`. */\nconst ICON_SIZE: Record<KtButtonSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * One button carrying a menu of related actions.\n *\n * The body runs the action a user wants nine times out of ten and emits a\n * plain `click`; the caret opens the rest. Reach for it when the alternatives\n * are variations on the same action — \"Save and close\", \"Save a copy\" — and\n * for an unrelated set of actions use `<kt-dropdown>` instead, which has no\n * default action to promote.\n *\n * A caret press never reads as a `click` on the host, so a single `click`\n * listener means the primary action and nothing else.\n *\n * @element kt-split-button\n *\n * @slot - The primary action's label.\n *\n * @csspart action - The primary `<kt-button>`.\n * @csspart caret - The `<kt-button>` that opens the menu.\n * @csspart menu - The list of rows.\n * @csspart item - A menu row.\n *\n * @fires kt-select - A menu row was chosen. `detail: { value, item }`.\n * @fires kt-open - The menu opened.\n * @fires kt-close - The menu closed.\n *\n * @example\n * ```html\n * <kt-split-button>Save</kt-split-button>\n * ```\n * ```js\n * el.items = [\n *   { id: 'close', label: 'Save and close' },\n *   { id: 'discard', label: 'Discard', variant: 'danger' },\n * ];\n * el.addEventListener('kt-select', (e) => run(e.detail.value));\n * ```\n */\nexport class KtSplitButton extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n      }\n\n      /* A hairline of the page showing through is the seam between the two\n         segments — the same trick the rest of the system uses for elevation,\n         where a border would have been. */\n      .split {\n        display: inline-flex;\n        align-items: stretch;\n        gap: var(--border-width);\n      }\n\n      .action::part(button) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      .caret::part(button) {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .menu {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        max-height: 208px;\n        overflow: auto;\n        scrollbar-width: thin;\n      }\n\n      .item {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n        width: 100%;\n        padding: var(--padding-expand-item);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: left;\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      .item:hover {\n        color: var(--text-body);\n        background: var(--surface-hover);\n      }\n\n      /* Inset, so the ring is never clipped by the panel it scrolls inside. */\n      .item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: calc(-1 * var(--outline-width));\n      }\n\n      .item.danger {\n        color: var(--color-danger-text);\n      }\n      .item.danger:hover {\n        color: var(--color-danger-text);\n        background: var(--color-danger-soft);\n      }\n\n      .item[aria-disabled='true'] {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      .item[aria-disabled='true']:hover {\n        color: var(--text-disabled);\n        background: 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('kt-dropdown')\n  private dropdown?: KtDropdown;\n\n  @query('.caret')\n  private caret?: HTMLElement & { focus(): void };\n\n  /** The row the roving tabindex currently sits on. */\n  @state()\n  private activeIndex = -1;\n\n  /** The menu rows. */\n  @property({ attribute: false })\n  items: readonly KtSplitButtonItem[] = [];\n\n  /** Visual variant, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  variant: KtButtonVariant = 'primary';\n\n  /** Height, forwarded to both segments. */\n  @property({ type: String, reflect: true })\n  size: KtButtonSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Lucide icon name for the primary segment. */\n  @property({ type: String })\n  icon = '';\n\n  /** Accessible name of the caret, which has no text of its own. */\n  @property({ type: String, attribute: 'menu-label' })\n  menuLabel: string | undefined = undefined;\n\n  /** Where to put the menu when there is room on both sides. */\n  @property({ type: String, attribute: 'preferred-placement' })\n  preferredPlacement: KtDropdownPlacement = 'bottom';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText: string | undefined = undefined;\n\n  /** Whether the menu is showing. */\n  get isOpen(): boolean {\n    return this.dropdown?.isOpen ?? false;\n  }\n\n  /** Opens the menu. */\n  show(): void {\n    this.dropdown?.show();\n  }\n\n  /** Closes it. */\n  hide(): void {\n    this.dropdown?.hide();\n  }\n\n  /** Either. */\n  toggle(): void {\n    this.dropdown?.toggle();\n  }\n\n  /** Moves focus to the primary segment. */\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.action')?.focus(options);\n  }\n\n  private row(index: number): HTMLElement | null {\n    return this.shadowRoot?.querySelectorAll<HTMLElement>('.item')[index] ?? null;\n  }\n\n  /** Lands the roving tabindex on `index` and takes focus there. */\n  private async moveTo(index: number): Promise<void> {\n    if (index < 0) return;\n    this.activeIndex = index;\n    await this.updateComplete;\n    this.row(index)?.focus();\n  }\n\n  private onOpen = (): void => {\n    void this.moveTo(firstEnabledIndex(this.items));\n  };\n\n  /**\n   * Returns focus to the caret, but only when it was inside the menu — an\n   * outside click already moved it somewhere the user chose, and pulling it\n   * back here would undo that.\n   */\n  private onClose = (): void => {\n    const active = this.shadowRoot?.activeElement;\n    this.activeIndex = -1;\n    if (active instanceof HTMLElement && active.classList.contains('item')) this.caret?.focus();\n  };\n\n  private onMenuKeyDown = (event: KeyboardEvent): void => {\n    const moves: Record<string, () => number> = {\n      ArrowDown: () => nextEnabledIndex(this.items, this.activeIndex, 1),\n      ArrowUp: () => nextEnabledIndex(this.items, this.activeIndex, -1),\n      Home: () => firstEnabledIndex(this.items),\n      End: () => lastEnabledIndex(this.items),\n    };\n\n    const move = moves[event.key];\n    if (!move) return;\n\n    event.preventDefault();\n    void this.moveTo(move());\n  };\n\n  private choose(item: KtSplitButtonItem): void {\n    if (item.disabled) return;\n    this.hide();\n    emit(this, 'kt-select', { value: item.id, item });\n  }\n\n  /**\n   * A click anywhere in the menu stops here. It originates inside this\n   * element's shadow root, so without this it would surface on the host as a\n   * `click` and be mistaken for the primary action.\n   */\n  private containClick(event: Event): void {\n    event.stopPropagation();\n  }\n\n  /**\n   * The caret drives the panel itself rather than leaning on the click\n   * reaching `<kt-dropdown>`'s own trigger through the slot: stopping here\n   * keeps the press off the host, and leaving it to bubble would toggle twice.\n   */\n  private onCaretClick(event: Event): void {\n    event.stopPropagation();\n    this.toggle();\n  }\n\n  private renderItem(item: KtSplitButtonItem, index: number): TemplateResult {\n    return html`<button\n      part=\"item\"\n      class=${classMap({ item: true, danger: item.variant === 'danger' })}\n      type=\"button\"\n      role=\"menuitem\"\n      tabindex=${index === this.activeIndex ? 0 : -1}\n      aria-disabled=${item.disabled ? 'true' : nothing}\n      @click=${() => this.choose(item)}\n    >\n      ${\n        item.icon\n          ? html`<kt-icon name=${item.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n          : nothing\n      }\n      ${optionLabel(item)}\n    </button>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<div class=\"split\">\n      <!-- The icon is slotted rather than passed as \\`icon\\`: <kt-button> reads\n           its own text content to decide whether it is icon-only, and a <slot>\n           has none, so setting \\`icon\\` here would collapse it to a square. -->\n      <kt-button\n        part=\"action\"\n        class=\"action\"\n        variant=${this.variant}\n        size=${this.size}\n        ?disabled=${this.disabled}\n      >\n        ${\n          this.icon\n            ? html`<kt-icon name=${this.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n            : nothing\n        }\n        <slot></slot>\n      </kt-button>\n\n      <kt-dropdown\n        align=\"end\"\n        preferred-placement=${this.preferredPlacement}\n        ?disabled=${this.disabled}\n        @click=${this.containClick}\n        @kt-open=${this.onOpen}\n        @kt-close=${this.onClose}\n      >\n        <kt-button\n          slot=\"trigger\"\n          part=\"caret\"\n          class=\"caret\"\n          variant=${this.variant}\n          size=${this.size}\n          icon=\"chevron-down\"\n          label=${this.menuLabel ?? strings().moreActions}\n          ?disabled=${this.disabled}\n          @click=${this.onCaretClick}\n        ></kt-button>\n\n        <div slot=\"panel\" part=\"menu\" class=\"menu\" role=\"menu\" @keydown=${this.onMenuKeyDown}>\n          ${\n            this.items.length > 0\n              ? this.items.map((item, index) => this.renderItem(item, index))\n              : html`<div class=\"empty\">${this.emptyText ?? strings().noActions}</div>`\n          }\n        </div>\n      </kt-dropdown>\n    </div>`;\n  }\n}\n\ndefineElement('kt-split-button', KtSplitButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-split-button': KtSplitButton;\n  }\n}\n"],"names":["ICON_SIZE","KtSplitButton","KtElement","firstEnabledIndex","active","event","move","nextEnabledIndex","lastEnabledIndex","css","options","index","item","emit","html","classMap","nothing","optionLabel","strings","__decorateClass","query","state","property","defineElement"],"mappings":"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"}

package/dist/components/data/kt-chart/kt-chart.d.ts

@@ -87,9 +87,9 @@ export declare class KtChart extends KtElement {
     /** Pins the top of the value axis. */
     max: number | null;
     /** Names the total in the middle of a doughnut. */
-    centerLabel: string;
+    centerLabel: string | undefined;
     /** Names the sum in a stacked chart's tooltip and table. */
-    totalLabel: string;
+    totalLabel: string | undefined;
     /** Accessible name. Say what the chart shows. */
     label: string;
     connectedCallback(): void;