kanto-ds 1.3.0 → 1.4.0

package/dist/components/forms/kt-radio-group/kt-radio-group.d.ts

@@ -0,0 +1,103 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtRadioGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * One option of a `<kt-radio-group>`.
+ *
+ * It draws itself and carries `role="radio"`; the group owns the selection,
+ * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing
+ * useful.
+ *
+ * @element kt-radio
+ *
+ * @slot - The label.
+ *
+ * @csspart base - The `role="radio"` row.
+ * @csspart circle - The drawn circle.
+ */
+export declare class KtRadio extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Submitted by the group when this option is chosen. */
+    value: string;
+    disabled: boolean;
+    /** Set by the group. */
+    checked: boolean;
+    /** Set by the group: whether this option holds the group's one tab stop. */
+    tabbable: boolean;
+    /** Set by the group while it reports an error. */
+    invalid: boolean;
+    /** Set by the group while the whole group is disabled. */
+    groupDisabled: boolean;
+    private get inactive();
+    focus(options?: FocusOptions): void;
+    render(): TemplateResult;
+}
+/**
+ * One choice among a few, all visible at once.
+ *
+ * Reach for it over `<kt-select>` when there are few enough options to show
+ * them all — seeing every option is the point — and over
+ * `<kt-segmented-control>` when the options need a sentence each, or the
+ * choice belongs in a form rather than a toolbar.
+ *
+ * Native radios cannot form a group across shadow roots, so this is the ARIA
+ * radio group pattern: one tab stop for the whole group, arrow keys move and
+ * select, disabled options are skipped.
+ *
+ * @element kt-radio-group
+ *
+ * @slot - The `<kt-radio>` options.
+ *
+ * @csspart base - The `role="radiogroup"` container.
+ *
+ * @fires kt-change - An option was chosen. `detail: { value }`.
+ *
+ * @example
+ * ```html
+ * <kt-radio-group label="Billing" name="billing" value="monthly">
+ *   <kt-radio value="monthly">Monthly</kt-radio>
+ *   <kt-radio value="yearly">Yearly — two months free</kt-radio>
+ * </kt-radio-group>
+ * ```
+ */
+export declare class KtRadioGroup extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private radios;
+    private internals;
+    private defaultValue;
+    /** The chosen option's value, or `null`. */
+    value: string | null;
+    name: string;
+    /** Accessible name of the group. */
+    label: string;
+    disabled: boolean;
+    required: boolean;
+    orientation: KtRadioGroupOrientation;
+    /** Error message. A non-empty value puts the group in its error state. */
+    error: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    private enabled;
+    /**
+     * Pushes the group's state down; the radios are the display, not the truth.
+     * The tab stop sits on the chosen option, or the first enabled one.
+     */
+    private syncRadios;
+    private choose;
+    private onClick;
+    /** Arrows move and select, wrapping; Space selects the focused option. */
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-radio': KtRadio;
+        'kt-radio-group': KtRadioGroup;
+    }
+}

package/dist/components/forms/kt-radio-group/kt-radio-group.js

@@ -0,0 +1,265 @@
+import { css as b, nothing as d, html as p } from "lit";
+import { property as a, queryAssignedElements as y } from "lit/decorators.js";
+import { K as h, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as m, s as k, b as w } from "../../../chunks/form-control-CxjBTt1c.js";
+import { s as f } from "../../../chunks/index-DSSLJirw.js";
+var x = Object.defineProperty, i = (c, e, r, s) => {
+  for (var t = void 0, o = c.length - 1, u; o >= 0; o--)
+    (u = c[o]) && (t = u(e, r, t) || t);
+  return t && x(e, r, t), t;
+};
+class l extends h {
+  constructor() {
+    super(...arguments), this.value = "", this.disabled = !1, this.checked = !1, this.tabbable = !1, this.invalid = !1, this.groupDisabled = !1;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      b`
+      :host {
+        display: block;
+        --radio-size: calc(var(--button-height) * 0.45);
+      }
+
+      .radio {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        outline: none;
+        cursor: pointer;
+      }
+
+      .circle {
+        position: relative;
+        flex: none;
+        width: var(--radio-size);
+        height: var(--radio-size);
+        margin-top: calc((1lh - var(--radio-size)) / 2);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-full);
+        transition: border-color var(--duration-instant);
+      }
+
+      /* The dot: a fill inset by a third of the circle. */
+      .circle::after {
+        content: '';
+        position: absolute;
+        inset: 22%;
+        border-radius: var(--radius-full);
+        background-color: var(--color-primary-base);
+        transform: scale(0);
+        transition: transform var(--duration-fast);
+      }
+
+      .radio:hover .circle {
+        border-color: var(--text-muted);
+      }
+
+      .radio:focus-visible .circle {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .radio[aria-checked='true'] .circle {
+        border-color: var(--color-primary-base);
+      }
+      .radio[aria-checked='true'] .circle::after {
+        transform: scale(1);
+      }
+
+      :host([invalid]) .circle {
+        border-color: var(--color-danger-base);
+      }
+
+      :host([disabled]) .radio,
+      :host([group-disabled]) .radio {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      :host([disabled]) .circle,
+      :host([group-disabled]) .circle {
+        background-color: var(--color-dark-22);
+        border-color: var(--color-dark-24);
+      }
+      :host([disabled]) .circle::after,
+      :host([group-disabled]) .circle::after {
+        background-color: var(--text-disabled);
+      }
+    `
+    ];
+  }
+  get inactive() {
+    return this.disabled || this.groupDisabled;
+  }
+  focus(e) {
+    this.shadowRoot?.querySelector(".radio")?.focus(e);
+  }
+  render() {
+    return p`<div
+      part="base"
+      class="radio"
+      role="radio"
+      aria-checked=${this.checked ? "true" : "false"}
+      aria-disabled=${this.inactive ? "true" : d}
+      tabindex=${this.tabbable && !this.inactive ? 0 : -1}
+    >
+      <span part="circle" class="circle"></span>
+      <span class="text"><slot></slot></span>
+    </div>`;
+  }
+}
+i([
+  a({ type: String, reflect: !0 })
+], l.prototype, "value");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "checked");
+i([
+  a({ type: Boolean, attribute: !1 })
+], l.prototype, "tabbable");
+i([
+  a({ type: Boolean, reflect: !0 })
+], l.prototype, "invalid");
+i([
+  a({ type: Boolean, reflect: !0, attribute: "group-disabled" })
+], l.prototype, "groupDisabled");
+class n extends h {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.value = null, this.name = "", this.label = "", this.disabled = !1, this.required = !1, this.orientation = "vertical", this.error = "", this.syncRadios = () => {
+      const e = this.enabled(), s = e.find((t) => t.value === this.value) ?? e[0];
+      for (const t of this.radios)
+        t.checked = t.value === this.value, t.tabbable = t === s, t.invalid = !!this.error, t.groupDisabled = this.disabled;
+    }, this.onClick = (e) => {
+      const r = e.composedPath().find((s) => s instanceof l);
+      !r || !this.enabled().includes(r) || (this.choose(r), r.focus());
+    }, this.onKeyDown = (e) => {
+      const r = this.enabled();
+      if (r.length === 0) return;
+      const s = e.composedPath().find((u) => u instanceof l), t = s ? r.indexOf(s) : -1;
+      let o;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight")
+        o = r[(t + 1) % r.length];
+      else if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+        o = r[(t - 1 + r.length) % r.length];
+      else if (e.key === " " && s && t >= 0)
+        o = s;
+      else
+        return;
+      e.preventDefault(), o && (this.choose(o), this.updateComplete.then(() => o.focus()));
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      b`
+      :host {
+        display: block;
+      }
+
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+      }
+
+      :host([orientation='horizontal']) .group {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--gap-card);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= m(this), this.defaultValue = this.value, this.addEventListener("click", this.onClick), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.onClick), this.removeEventListener("keydown", this.onKeyDown);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      k(this.internals, this.value);
+      const r = this.required && this.value === null;
+      w(
+        this.internals,
+        { valueMissing: r, customError: !!this.error },
+        this.error || (r ? f().selectOption : "")
+      );
+    }
+  }
+  updated() {
+    this.syncRadios();
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.radios.find((r) => r.tabbable)?.focus(e);
+  }
+  enabled() {
+    return this.disabled ? [] : this.radios.filter((e) => !e.disabled);
+  }
+  choose(e) {
+    e.value !== this.value && (this.value = e.value, g(this, "kt-change", { value: this.value }));
+  }
+  render() {
+    return p`${this.error ? p`<span id="error-message" class="visually-hidden">${this.error}</span>` : d}
+      <div
+        part="base"
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || f().options}
+        aria-orientation=${this.orientation}
+        aria-required=${this.required ? "true" : d}
+        aria-invalid=${this.error ? "true" : d}
+        aria-disabled=${this.disabled ? "true" : d}
+        aria-describedby=${this.error ? "error-message" : d}
+      >
+        <slot @slotchange=${this.syncRadios}></slot>
+      </div>`;
+  }
+}
+i([
+  y({ selector: "kt-radio" })
+], n.prototype, "radios");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "value");
+i([
+  a({ type: String })
+], n.prototype, "name");
+i([
+  a({ type: String })
+], n.prototype, "label");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "required");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "orientation");
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "error");
+v("kt-radio", l);
+v("kt-radio-group", n);
+export {
+  l as KtRadio,
+  n as KtRadioGroup
+};
+//# sourceMappingURL=kt-radio-group.js.map

package/dist/components/forms/kt-radio-group/kt-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-radio-group.js","sources":["../../../../src/components/forms/kt-radio-group/kt-radio-group.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\n\nexport type KtRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * One option of a `<kt-radio-group>`.\n *\n * It draws itself and carries `role=\"radio\"`; the group owns the selection,\n * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\n * useful.\n *\n * @element kt-radio\n *\n * @slot - The label.\n *\n * @csspart base - The `role=\"radio\"` row.\n * @csspart circle - The drawn circle.\n */\nexport class KtRadio extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --radio-size: calc(var(--button-height) * 0.45);\n      }\n\n      .radio {\n        display: inline-flex;\n        align-items: flex-start;\n        gap: var(--gap-button);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        outline: none;\n        cursor: pointer;\n      }\n\n      .circle {\n        position: relative;\n        flex: none;\n        width: var(--radio-size);\n        height: var(--radio-size);\n        margin-top: calc((1lh - var(--radio-size)) / 2);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-full);\n        transition: border-color var(--duration-instant);\n      }\n\n      /* The dot: a fill inset by a third of the circle. */\n      .circle::after {\n        content: '';\n        position: absolute;\n        inset: 22%;\n        border-radius: var(--radius-full);\n        background-color: var(--color-primary-base);\n        transform: scale(0);\n        transition: transform var(--duration-fast);\n      }\n\n      .radio:hover .circle {\n        border-color: var(--text-muted);\n      }\n\n      .radio:focus-visible .circle {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .radio[aria-checked='true'] .circle {\n        border-color: var(--color-primary-base);\n      }\n      .radio[aria-checked='true'] .circle::after {\n        transform: scale(1);\n      }\n\n      :host([invalid]) .circle {\n        border-color: var(--color-danger-base);\n      }\n\n      :host([disabled]) .radio,\n      :host([group-disabled]) .radio {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      :host([disabled]) .circle,\n      :host([group-disabled]) .circle {\n        background-color: var(--color-dark-22);\n        border-color: var(--color-dark-24);\n      }\n      :host([disabled]) .circle::after,\n      :host([group-disabled]) .circle::after {\n        background-color: var(--text-disabled);\n      }\n    `,\n  ];\n\n  /** Submitted by the group when this option is chosen. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Set by the group. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Set by the group: whether this option holds the group's one tab stop. */\n  @property({ type: Boolean, attribute: false })\n  tabbable = false;\n\n  /** Set by the group while it reports an error. */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /** Set by the group while the whole group is disabled. */\n  @property({ type: Boolean, reflect: true, attribute: 'group-disabled' })\n  groupDisabled = false;\n\n  private get inactive(): boolean {\n    return this.disabled || this.groupDisabled;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.radio')?.focus(options);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=\"radio\"\n      role=\"radio\"\n      aria-checked=${this.checked ? 'true' : 'false'}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      tabindex=${this.tabbable && !this.inactive ? 0 : -1}\n    >\n      <span part=\"circle\" class=\"circle\"></span>\n      <span class=\"text\"><slot></slot></span>\n    </div>`;\n  }\n}\n\n/**\n * One choice among a few, all visible at once.\n *\n * Reach for it over `<kt-select>` when there are few enough options to show\n * them all — seeing every option is the point — and over\n * `<kt-segmented-control>` when the options need a sentence each, or the\n * choice belongs in a form rather than a toolbar.\n *\n * Native radios cannot form a group across shadow roots, so this is the ARIA\n * radio group pattern: one tab stop for the whole group, arrow keys move and\n * select, disabled options are skipped.\n *\n * @element kt-radio-group\n *\n * @slot - The `<kt-radio>` options.\n *\n * @csspart base - The `role=\"radiogroup\"` container.\n *\n * @fires kt-change - An option was chosen. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-radio-group label=\"Billing\" name=\"billing\" value=\"monthly\">\n *   <kt-radio value=\"monthly\">Monthly</kt-radio>\n *   <kt-radio value=\"yearly\">Yearly — two months free</kt-radio>\n * </kt-radio-group>\n * ```\n */\nexport class KtRadioGroup extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .group {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      :host([orientation='horizontal']) .group {\n        flex-direction: row;\n        flex-wrap: wrap;\n        column-gap: var(--gap-card);\n      }\n    `,\n  ];\n\n  @queryAssignedElements({ selector: 'kt-radio' })\n  private radios!: KtRadio[];\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | null = null;\n\n  /** The chosen option's value, or `null`. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name of the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  orientation: KtRadioGroupOrientation = 'vertical';\n\n  /** Error message. A non-empty value puts the group in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    // On the host: the radios are slotted light-DOM children.\n    this.addEventListener('click', this.onClick);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.onClick);\n    this.removeEventListener('keydown', this.onKeyDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value);\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().selectOption : ''),\n      );\n    }\n  }\n\n  override updated(): void {\n    this.syncRadios();\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.radios.find((radio) => radio.tabbable)?.focus(options);\n  }\n\n  private enabled(): KtRadio[] {\n    return this.disabled ? [] : this.radios.filter((radio) => !radio.disabled);\n  }\n\n  /**\n   * Pushes the group's state down; the radios are the display, not the truth.\n   * The tab stop sits on the chosen option, or the first enabled one.\n   */\n  private syncRadios = (): void => {\n    const enabled = this.enabled();\n    const chosen = enabled.find((radio) => radio.value === this.value);\n    const tabStop = chosen ?? enabled[0];\n\n    for (const radio of this.radios) {\n      radio.checked = radio.value === this.value;\n      radio.tabbable = radio === tabStop;\n      radio.invalid = Boolean(this.error);\n      radio.groupDisabled = this.disabled;\n    }\n  };\n\n  private choose(radio: KtRadio): void {\n    if (radio.value === this.value) return;\n    this.value = radio.value;\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private onClick = (event: Event): void => {\n    const radio = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    if (!radio || !this.enabled().includes(radio)) return;\n    this.choose(radio);\n    radio.focus();\n  };\n\n  /** Arrows move and select, wrapping; Space selects the focused option. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    const enabled = this.enabled();\n    if (enabled.length === 0) return;\n\n    const focused = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    const from = focused ? enabled.indexOf(focused) : -1;\n\n    let target: KtRadio | undefined;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      target = enabled[(from + 1) % enabled.length];\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      target = enabled[(from - 1 + enabled.length) % enabled.length];\n    } else if (event.key === ' ' && focused && from >= 0) {\n      target = focused;\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n    if (!target) return;\n    this.choose(target);\n    void this.updateComplete.then(() => target.focus());\n  };\n\n  override render(): TemplateResult {\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        part=\"base\"\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || strings().options}\n        aria-orientation=${this.orientation}\n        aria-required=${this.required ? 'true' : nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-describedby=${this.error ? 'error-message' : nothing}\n      >\n        <slot @slotchange=${this.syncRadios}></slot>\n      </div>`;\n  }\n}\n\ndefineElement('kt-radio', KtRadio);\ndefineElement('kt-radio-group', KtRadioGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-radio': KtRadio;\n    'kt-radio-group': KtRadioGroup;\n  }\n}\n"],"names":["KtRadio","KtElement","css","options","html","nothing","__decorateClass","property","KtRadioGroup","enabled","tabStop","radio","event","node","focused","from","target","attachFormInternals","changed","setFormValue","missing","setValidity","strings","state","emit","queryAssignedElements","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-select/kt-select.js

@@ -1,11 +1,11 @@
 import { css as y, nothing as n, html as d } from "lit";
 import { state as m, property as o } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
-import { K as v, d as x } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as v, d as x } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { u as w, e as f } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as k, s as $, b as I } from "../../../chunks/form-control-CxjBTt1c.js";
 import { a as D, f as b, l as L, n as S, o as g } from "../../../chunks/listbox-Sm3nvsC6.js";
-import { s as l } from "../../../chunks/index-fzPIgxe2.js";
+import { s as l } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
 var E = Object.defineProperty, i = (c, e, s, a) => {
   for (var r = void 0, p = c.length - 1, u; p >= 0; p--)

package/dist/components/forms/kt-textarea/kt-textarea.js

@@ -2,10 +2,10 @@ import { css as m, nothing as i, html as l } from "lit";
 import { query as f, property as a } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { live as g } from "lit/directives/live.js";
-import { K as c, d as b } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as c, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as y, s as v, b as x } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as w } from "../../../chunks/index-fzPIgxe2.js";
+import { s as w } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
 var $ = Object.defineProperty, r = (n, e, o, k) => {
   for (var s = void 0, h = n.length - 1, d; h >= 0; h--)

package/dist/components/forms/kt-toggle/kt-toggle.js

@@ -1,6 +1,6 @@
 import { css as d, nothing as h, html as u } from "lit";
 import { property as r } from "lit/decorators.js";
-import { K as n, d as b } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as n, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as m, s as g } from "../../../chunks/form-control-CxjBTt1c.js";
 var k = Object.defineProperty, s = (i, t, l, v) => {

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

@@ -1,8 +1,8 @@
 import { css as d, nothing as f, html as s } from "lit";
 import { property as c } from "lit/decorators.js";
-import { K as p, d as u } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as p, d as u } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as b } from "../../../chunks/index-fzPIgxe2.js";
+import { s as b } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
 var v = Object.defineProperty, m = (o, t, e, a) => {
   for (var r = void 0, i = o.length - 1, l; i >= 0; i--)

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

@@ -1,8 +1,8 @@
 import { css as c, nothing as u, html as m } from "lit";
 import { state as b, property as n } from "lit/decorators.js";
-import { K as d, d as f } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as d, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as h } from "../../../chunks/index-fzPIgxe2.js";
+import { s as h } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-button/kt-button.js";
 var g = Object.defineProperty, a = (r, o, s, v) => {
   for (var e = void 0, i = r.length - 1, l; i >= 0; i--)

package/dist/components/navigation/kt-page-header/kt-page-header.js

@@ -1,6 +1,6 @@
 import { css as c, html as t, nothing as l } from "lit";
 import { property as s } from "lit/decorators.js";
-import { K as h, d as g } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as h, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var f = Object.defineProperty, o = (a, r, p, v) => {
   for (var e = void 0, n = a.length - 1, d; n >= 0; n--)
     (d = a[n]) && (e = d(r, p, e) || e);

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js

@@ -1,10 +1,10 @@
 import { css as b, nothing as c, html as p } from "lit";
 import { queryAll as v, property as n } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
-import { K as f, d as g } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as f, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as x, s as y, b as k } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as $ } from "../../../chunks/index-fzPIgxe2.js";
+import { s as $ } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
 var w = Object.defineProperty, s = (u, t, i, o) => {
   for (var e = void 0, r = u.length - 1, l; r >= 0; r--)

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-mdd5cXZX.js";
+import { K as b, d as k } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as w } from "../../../chunks/index-fzPIgxe2.js";
+import { s as w } from "../../../chunks/index-DSSLJirw.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-mdd5cXZX.js";
+import { K as c, d as v } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as m } from "../../../chunks/events-Bjl5Zmmq.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-mdd5cXZX.js";
+import { K as u, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as v } from "../../../chunks/events-Bjl5Zmmq.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,17 +1,18 @@
 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-mdd5cXZX.js";
+import { K as d, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
-import { KtToggleButton as v } from "../kt-toggle-button/kt-toggle-button.js";
-var f = Object.defineProperty, s = (n, t, e, r) => {
+import { s as v } from "../../../chunks/index-DSSLJirw.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--)
     (u = n[a]) && (o = u(t, e, o) || o);
-  return o && f(t, e, o), o;
+  return o && m(t, e, o), o;
 };
 class i extends d {
   constructor() {
     super(...arguments), this.multiple = !1, this.orientation = "horizontal", this.label = "", this.value = null, this.onButtonClick = (t) => {
-      const e = t.composedPath().find((r) => r instanceof v);
+      const e = t.composedPath().find((r) => r instanceof f);
       if (!(!e || e.disabled) && this.buttons?.includes(e)) {
         if (this.multiple) {
           const r = Array.isArray(this.value) ? this.value : [];
@@ -101,7 +102,12 @@ class i extends d {
       t.managed = !0, t.selected = this.isSelected(t.value);
   }
   render() {
-    return h`<div part="base" class="group" role="group" aria-label=${this.label || "Options"}>
+    return h`<div
+      part="base"
+      class="group"
+      role="group"
+      aria-label=${this.label || v().options}
+    >
       <slot @slotchange=${this.syncButtons}></slot>
     </div>`;
   }

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

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

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-mdd5cXZX.js";
+import { K as p, d as u } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-icon/kt-icon.js";
 var h = Object.defineProperty, i = (a, o, t, y) => {

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

@@ -1,9 +1,9 @@
 import { css as h, nothing as c, html as p } from "lit";
 import { query as m, property as o } from "lit/decorators.js";
-import { K as g, d as y } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as g, d as y } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
 import { o as u, c as b, i as v } from "../../../chunks/dialog-CPIfFIlF.js";
-import { s as r } from "../../../chunks/index-fzPIgxe2.js";
+import { s as r } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-button/kt-button.js";
 var k = Object.defineProperty, a = (n, e, l, x) => {
   for (var i = void 0, s = n.length - 1, d; s >= 0; s--)