kanto-ds 1.7.0 → 1.8.0

package/dist/components/navigation/kt-steps/kt-steps.js

@@ -0,0 +1,244 @@
+import { css as g, nothing as p, html as r } from "lit";
+import { property as l } from "lit/decorators.js";
+import { K as m, d as v } from "../../../chunks/kt-element-COgh6Yr1.js";
+import { e as k } from "../../../chunks/events-r51msXNf.js";
+import { s as f } from "../../../chunks/index-BEWmAE0T.js";
+import "../../core/kt-icon/kt-icon.js";
+var x = Object.defineProperty, c = (d, e, a, n) => {
+  for (var t = void 0, o = d.length - 1, i; o >= 0; o--)
+    (i = d[o]) && (t = i(e, a, t) || t);
+  return t && x(e, a, t), t;
+};
+class s extends m {
+  constructor() {
+    super(...arguments), this.steps = [], this.current = "", this.label = "", this.orientation = "horizontal", this.navigable = !1;
+  }
+  static {
+    this.styles = [
+      m.styles,
+      g`
+      :host {
+        display: block;
+        --kt-steps-marker: calc(28px * var(--density-scale, 1));
+      }
+
+      ol {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      :host([orientation='vertical']) ol {
+        flex-direction: column;
+      }
+
+      /* Across, the steps share the width evenly: a column each, the marker
+         on top and the text centred under it. */
+      li {
+        position: relative;
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      .step {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
+        text-align: center;
+      }
+      :host([orientation='vertical']) li {
+        flex: none;
+        padding-bottom: 24px;
+      }
+      :host([orientation='vertical']) li:last-child {
+        padding-bottom: 0;
+      }
+      :host([orientation='vertical']) .step {
+        flex-direction: row;
+        gap: 12px;
+        align-items: flex-start;
+        text-align: start;
+      }
+
+      /* The line to the next step, from marker to marker through their
+         middle, clear of each: 8px across, 6px down. */
+      .connector {
+        position: absolute;
+        top: calc(var(--kt-steps-marker) / 2 - 1px);
+        left: calc(50% + var(--kt-steps-marker) / 2 + 8px);
+        width: calc(100% - var(--kt-steps-marker) - 16px);
+        height: 2px;
+        background: var(--border-field);
+        border-radius: var(--radius-full);
+      }
+      li[data-state='complete'] .connector {
+        background: var(--color-primary-base);
+      }
+      :host([orientation='vertical']) .connector {
+        top: calc(var(--kt-steps-marker) + 6px);
+        left: calc(var(--kt-steps-marker) / 2 - 1px);
+        width: 2px;
+        height: calc(100% - var(--kt-steps-marker) - 12px);
+      }
+
+      /* A filled circle: the tick when done, the number otherwise. */
+      .marker {
+        display: grid;
+        flex: none;
+        place-items: center;
+        width: var(--kt-steps-marker);
+        height: var(--kt-steps-marker);
+        color: var(--text-body);
+        font: var(--font-normal-small);
+        font-weight: 600;
+        /* A field's border colour: a grey that reads on a card and a page,
+           in both themes. */
+        background: var(--border-field);
+        border-radius: 50%;
+        transition:
+          background-color var(--duration-fast) var(--easing-standard),
+          color var(--duration-fast) var(--easing-standard);
+      }
+      li[data-state='complete'] .marker,
+      li[data-state='current'] .marker {
+        color: var(--color-white);
+        background: var(--color-primary-base);
+      }
+      li[data-state='error'] .marker {
+        color: var(--color-white);
+        background: var(--color-danger-base);
+      }
+      /* Trimmed to the digits' height, so the grid centres the ink, not a
+         line box padded by the font's ascent and descent. */
+      .number {
+        display: block;
+        line-height: 1;
+        font-variant-numeric: tabular-nums;
+        text-box: trim-both cap alphabetic;
+      }
+      /* Lucide's tick sits high in its square; this puts its ink on the
+         marker's middle. */
+      .marker kt-icon[name='check'] {
+        translate: 0 0.5px;
+      }
+
+      .text {
+        display: grid;
+        gap: 2px;
+        min-width: 0;
+        padding: 0 4px;
+      }
+      :host([orientation='vertical']) .text {
+        gap: 0;
+        padding: 0;
+      }
+      .label {
+        color: var(--text-muted);
+        font: var(--font-normal-medium);
+      }
+      /* Down, as tall as the marker, so the label sits on its middle. */
+      :host([orientation='vertical']) .label {
+        display: flex;
+        align-items: center;
+        min-height: var(--kt-steps-marker);
+      }
+      li[data-state='current'] .label,
+      li[data-state='complete'] .label {
+        color: var(--text-body);
+      }
+      li[data-state='error'] .label {
+        color: var(--color-danger-text);
+      }
+      .description {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      button.step {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        font: inherit;
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      button.step:hover .label {
+        color: var(--color-primary-text);
+      }
+      button.step:hover .marker {
+        background: var(--color-primary-hover);
+      }
+      button.step:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 4px;
+      }
+
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    `
+    ];
+  }
+  stateOf(e, a, n) {
+    return e.error ? "error" : a < n ? "complete" : a === n ? "current" : "upcoming";
+  }
+  goTo(e) {
+    this.current = e.id, k(this, "kt-change", { id: e.id });
+  }
+  render() {
+    const e = f(), a = this.steps.findIndex((t) => t.id === this.current), n = {
+      complete: e.stepComplete,
+      current: e.stepCurrent,
+      upcoming: e.stepUpcoming,
+      error: e.stepError
+    };
+    return r`<ol part="list" aria-label=${this.label || p}>
+      ${this.steps.map((t, o) => {
+      const i = this.stateOf(t, o, a), u = i === "complete" ? r`<kt-icon name="check" size="14"></kt-icon>` : i === "error" ? r`<kt-icon name="circle-alert" size="14"></kt-icon>` : r`<span class="number">${o + 1}</span>`, h = r`<span part="marker" class="marker" aria-hidden="true">${u}</span>
+          <span class="text">
+            <span class="label">${t.label}</span>
+            ${t.description ? r`<span class="description">${t.description}</span>` : p}
+            <span class="visually-hidden">${n[i]}</span>
+          </span>`, b = this.navigable && o < a;
+      return r`<li
+          part="step"
+          data-state=${i}
+          aria-current=${o === a ? "step" : p}
+        >
+          ${b ? r`<button class="step" type="button" @click=${() => this.goTo(t)}>
+                  ${h}
+                </button>` : r`<span class="step">${h}</span>`}
+          ${o < this.steps.length - 1 ? r`<span part="connector" class="connector" aria-hidden="true"></span>` : p}
+        </li>`;
+    })}
+    </ol>`;
+  }
+}
+c([
+  l({ attribute: !1 })
+], s.prototype, "steps");
+c([
+  l({ type: String, reflect: !0 })
+], s.prototype, "current");
+c([
+  l({ type: String })
+], s.prototype, "label");
+c([
+  l({ type: String, reflect: !0 })
+], s.prototype, "orientation");
+c([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "navigable");
+v("kt-steps", s);
+export {
+  s as KtSteps
+};
+//# sourceMappingURL=kt-steps.js.map

package/dist/components/navigation/kt-steps/kt-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-steps.js","sources":["../../../../src/components/navigation/kt-steps/kt-steps.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtStep {\n  readonly id: string;\n  readonly label: string;\n  /** A line under the label. */\n  readonly description?: string;\n  /** Something on this step needs fixing — a field it holds failed. */\n  readonly error?: boolean;\n}\n\nexport type KtStepsOrientation = 'horizontal' | 'vertical';\n\ntype StepState = 'complete' | 'current' | 'upcoming' | 'error';\n\n/**\n * The steps of a flow — sign-up, checkout, onboarding — and where the reader\n * is in it.\n *\n * Steps before `current` are complete, `current` is current, the rest are to\n * come — all of them, while `current` names no step; a step with `error` shows as needing attention wherever it is. With\n * `navigable`, a completed step is a button that goes back to it; going\n * forward is the flow's job, not the stepper's.\n *\n * An ordered list: the number is the step's place, `aria-current=\"step\"`\n * marks the current one, and each state is said in words, not only shown.\n *\n * @element kt-steps\n *\n * @csspart list - The `<ol>`.\n * @csspart step - A step.\n * @csspart marker - A step's number, tick or alert.\n * @csspart connector - The line from a step to the next.\n *\n * @fires kt-change - A completed step was picked, with `navigable`. `detail: { id }`.\n *\n * @example\n * ```html\n * <kt-steps label=\"Sign-up\" current=\"billing\"></kt-steps>\n * <script>\n *   steps.steps = [\n *     { id: 'account', label: 'Account' },\n *     { id: 'billing', label: 'Billing', description: 'Card or invoice' },\n *     { id: 'team', label: 'Team' },\n *   ];\n * </script>\n * ```\n */\nexport class KtSteps extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --kt-steps-marker: calc(28px * var(--density-scale, 1));\n      }\n\n      ol {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      :host([orientation='vertical']) ol {\n        flex-direction: column;\n      }\n\n      /* Across, the steps share the width evenly: a column each, the marker\n         on top and the text centred under it. */\n      li {\n        position: relative;\n        flex: 1 1 0;\n        min-width: 0;\n      }\n      .step {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        align-items: center;\n        text-align: center;\n      }\n      :host([orientation='vertical']) li {\n        flex: none;\n        padding-bottom: 24px;\n      }\n      :host([orientation='vertical']) li:last-child {\n        padding-bottom: 0;\n      }\n      :host([orientation='vertical']) .step {\n        flex-direction: row;\n        gap: 12px;\n        align-items: flex-start;\n        text-align: start;\n      }\n\n      /* The line to the next step, from marker to marker through their\n         middle, clear of each: 8px across, 6px down. */\n      .connector {\n        position: absolute;\n        top: calc(var(--kt-steps-marker) / 2 - 1px);\n        left: calc(50% + var(--kt-steps-marker) / 2 + 8px);\n        width: calc(100% - var(--kt-steps-marker) - 16px);\n        height: 2px;\n        background: var(--border-field);\n        border-radius: var(--radius-full);\n      }\n      li[data-state='complete'] .connector {\n        background: var(--color-primary-base);\n      }\n      :host([orientation='vertical']) .connector {\n        top: calc(var(--kt-steps-marker) + 6px);\n        left: calc(var(--kt-steps-marker) / 2 - 1px);\n        width: 2px;\n        height: calc(100% - var(--kt-steps-marker) - 12px);\n      }\n\n      /* A filled circle: the tick when done, the number otherwise. */\n      .marker {\n        display: grid;\n        flex: none;\n        place-items: center;\n        width: var(--kt-steps-marker);\n        height: var(--kt-steps-marker);\n        color: var(--text-body);\n        font: var(--font-normal-small);\n        font-weight: 600;\n        /* A field's border colour: a grey that reads on a card and a page,\n           in both themes. */\n        background: var(--border-field);\n        border-radius: 50%;\n        transition:\n          background-color var(--duration-fast) var(--easing-standard),\n          color var(--duration-fast) var(--easing-standard);\n      }\n      li[data-state='complete'] .marker,\n      li[data-state='current'] .marker {\n        color: var(--color-white);\n        background: var(--color-primary-base);\n      }\n      li[data-state='error'] .marker {\n        color: var(--color-white);\n        background: var(--color-danger-base);\n      }\n      /* Trimmed to the digits' height, so the grid centres the ink, not a\n         line box padded by the font's ascent and descent. */\n      .number {\n        display: block;\n        line-height: 1;\n        font-variant-numeric: tabular-nums;\n        text-box: trim-both cap alphabetic;\n      }\n      /* Lucide's tick sits high in its square; this puts its ink on the\n         marker's middle. */\n      .marker kt-icon[name='check'] {\n        translate: 0 0.5px;\n      }\n\n      .text {\n        display: grid;\n        gap: 2px;\n        min-width: 0;\n        padding: 0 4px;\n      }\n      :host([orientation='vertical']) .text {\n        gap: 0;\n        padding: 0;\n      }\n      .label {\n        color: var(--text-muted);\n        font: var(--font-normal-medium);\n      }\n      /* Down, as tall as the marker, so the label sits on its middle. */\n      :host([orientation='vertical']) .label {\n        display: flex;\n        align-items: center;\n        min-height: var(--kt-steps-marker);\n      }\n      li[data-state='current'] .label,\n      li[data-state='complete'] .label {\n        color: var(--text-body);\n      }\n      li[data-state='error'] .label {\n        color: var(--color-danger-text);\n      }\n      .description {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      button.step {\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        color: inherit;\n        font: inherit;\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n      button.step:hover .label {\n        color: var(--color-primary-text);\n      }\n      button.step:hover .marker {\n        background: var(--color-primary-hover);\n      }\n      button.step:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 4px;\n      }\n\n      .visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  /** The steps, in order. Set as a property. */\n  @property({ attribute: false })\n  steps: readonly KtStep[] = [];\n\n  /** The id of the step the reader is on. */\n  @property({ type: String, reflect: true })\n  current = '';\n\n  /** Accessible name of the list: what the flow is. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, reflect: true })\n  orientation: KtStepsOrientation = 'horizontal';\n\n  /** Completed steps become buttons that go back to them. */\n  @property({ type: Boolean, reflect: true })\n  navigable = false;\n\n  private stateOf(step: KtStep, index: number, currentIndex: number): StepState {\n    if (step.error) return 'error';\n    if (index < currentIndex) return 'complete';\n    return index === currentIndex ? 'current' : 'upcoming';\n  }\n\n  private goTo(step: KtStep): void {\n    this.current = step.id;\n    emit(this, 'kt-change', { id: step.id });\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const currentIndex = this.steps.findIndex((step) => step.id === this.current);\n    const said: Record<StepState, string> = {\n      complete: s.stepComplete,\n      current: s.stepCurrent,\n      upcoming: s.stepUpcoming,\n      error: s.stepError,\n    };\n\n    return html`<ol part=\"list\" aria-label=${this.label || nothing}>\n      ${this.steps.map((step, index) => {\n        const state = this.stateOf(step, index, currentIndex);\n        const marker =\n          state === 'complete'\n            ? html`<kt-icon name=\"check\" size=\"14\"></kt-icon>`\n            : state === 'error'\n              ? html`<kt-icon name=\"circle-alert\" size=\"14\"></kt-icon>`\n              : html`<span class=\"number\">${index + 1}</span>`;\n        const body = html`<span part=\"marker\" class=\"marker\" aria-hidden=\"true\">${marker}</span>\n          <span class=\"text\">\n            <span class=\"label\">${step.label}</span>\n            ${step.description ? html`<span class=\"description\">${step.description}</span>` : nothing}\n            <span class=\"visually-hidden\">${said[state]}</span>\n          </span>`;\n        const back = this.navigable && index < currentIndex;\n\n        return html`<li\n          part=\"step\"\n          data-state=${state}\n          aria-current=${index === currentIndex ? 'step' : nothing}\n        >\n          ${\n            back\n              ? html`<button class=\"step\" type=\"button\" @click=${() => this.goTo(step)}>\n                  ${body}\n                </button>`\n              : html`<span class=\"step\">${body}</span>`\n          }\n          ${index < this.steps.length - 1 ? html`<span part=\"connector\" class=\"connector\" aria-hidden=\"true\"></span>` : nothing}\n        </li>`;\n      })}\n    </ol>`;\n  }\n}\n\ndefineElement('kt-steps', KtSteps);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-steps': KtSteps;\n  }\n}\n"],"names":["KtSteps","KtElement","css","step","index","currentIndex","emit","s","strings","said","html","nothing","state","marker","body","back","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -2,9 +2,9 @@ import { css as y, html as a, nothing as n } from "lit";
 import { property as c, state as x } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { styleMap as $ } from "lit/directives/style-map.js";
-import { K as b, d as k } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as b, d as k } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as g } from "../../../chunks/events-r51msXNf.js";
-import { s as w } from "../../../chunks/index-TWJzttLX.js";
+import { s as w } from "../../../chunks/index-BEWmAE0T.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 var A = Object.defineProperty, d = (p, e, t, o) => {

package/dist/components/navigation/kt-tabs/kt-tabs.js

@@ -1,7 +1,7 @@
 import { css as u, html as l, nothing as p } from "lit";
 import { queryAll as h, property as n } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { K as c, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as c, d as v } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";

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

@@ -1,7 +1,7 @@
 import { css as p, html as c, nothing as n } from "lit";
 import { property as o } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { K as u, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as u, d as g } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as v } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 var m = Object.defineProperty, r = (l, e, i, s) => {

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

@@ -1,8 +1,8 @@
 import { css as c, html as h } from "lit";
 import { queryAssignedElements as g, property as l } from "lit/decorators.js";
-import { K as d, d as b } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as d, d as b } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as p } from "../../../chunks/events-r51msXNf.js";
-import { s as v } from "../../../chunks/index-TWJzttLX.js";
+import { s as v } from "../../../chunks/index-BEWmAE0T.js";
 import { KtToggleButton as f } from "../kt-toggle-button/kt-toggle-button.js";
 var m = Object.defineProperty, s = (n, t, e, r) => {
   for (var o = void 0, a = n.length - 1, u; a >= 0; a--)

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

@@ -1,6 +1,6 @@
 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 { K as p, d as u } from "../../../chunks/kt-element-COgh6Yr1.js";
 import { e as f } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 var h = Object.defineProperty, i = (a, o, t, v) => {

package/dist/components/overlays/kt-command-palette/kt-command-palette.d.ts

@@ -0,0 +1,87 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtCommand } from '#internal/command-search';
+import '../../core/kt-icon/kt-icon.js';
+import '../../core/kt-kbd/kt-kbd.js';
+export type { KtCommand } from '#internal/command-search';
+/**
+ * The palette a product opens on Cmd+K: every action and page, a few
+ * keystrokes away.
+ *
+ * Give it `commands`; it lists them under their groups, narrows them as you
+ * type — every word, in any order, in the label, a keyword or the group,
+ * ignoring case and accents — and runs the one you pick with `kt-select`.
+ * Cmd+K or Ctrl+K opens and closes it from anywhere on the page; `hotkey`
+ * changes the key or, empty, turns it off.
+ *
+ * Built on the native `<dialog>`: the top layer, focus containment and the
+ * inert page come from the platform. The field is a combobox over a listbox,
+ * so a screen reader follows the active command as the arrows move.
+ *
+ * @element kt-command-palette
+ *
+ * @csspart dialog - The `<dialog>`.
+ * @csspart input - The search field.
+ * @csspart list - The scrolling list.
+ * @csspart footer - The keyboard hints.
+ *
+ * @fires kt-select - A command was run. `detail: { id, command }`.
+ * @fires kt-open - It opened.
+ * @fires kt-close - It closed.
+ *
+ * @example
+ * ```html
+ * <kt-command-palette></kt-command-palette>
+ * <script>
+ *   palette.commands = [
+ *     { id: 'new', label: 'New invoice', group: 'Create', shortcut: 'mod i' },
+ *     { id: 'settings', label: 'Open settings', group: 'Navigate', icon: 'settings' },
+ *   ];
+ *   palette.addEventListener('kt-select', (e) => run(e.detail.id));
+ * </script>
+ * ```
+ */
+export declare class KtCommandPalette extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** What it can run. Set as a property: `palette.commands = [...]`. */
+    commands: readonly KtCommand[];
+    open: boolean;
+    /** Placeholder of the search field. Defaults to the translated string. */
+    placeholder: string;
+    /**
+     * The key that opens it with Cmd or Ctrl, from anywhere on the page. Empty
+     * turns the shortcut off — for a page with two palettes, or its own key.
+     */
+    hotkey: string;
+    private query;
+    private activeIndex;
+    private dialog;
+    private input;
+    private readonly listId;
+    /** Where the focus was before opening, to give it back on close. */
+    private returnFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The commands the query keeps, best first. */
+    private get results();
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    private firstEnabled;
+    /** The next enabled command from `from`, one way, wrapping; -1 when none is. */
+    private step;
+    private onDocumentKeyDown;
+    private onInput;
+    private onKeyDown;
+    private run;
+    private onDialogCancel;
+    /** The browser can close the dialog itself; the property follows. */
+    private onDialogClose;
+    private onDialogClick;
+    private optionId;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-command-palette': KtCommandPalette;
+    }
+}