kanto-ds 1.3.0 → 1.4.0

package/dist/components/data/kt-meter/kt-meter.js

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

package/dist/components/data/kt-pagination/kt-pagination.js

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

package/dist/components/data/kt-stat/kt-stat.js

@@ -1,6 +1,6 @@
 import { css as h, nothing as l, html as r } from "lit";
 import { property as e } from "lit/decorators.js";
-import { K as c, d as f } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as c, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";

package/dist/components/data/kt-table/kt-table.js

@@ -2,9 +2,9 @@ import { css as k, html as d, nothing as h } from "lit";
 import { state as $, property as n } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { styleMap as f } from "lit/directives/style-map.js";
-import { K as m, d as S } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as m, d as S } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as u } from "../../../chunks/index-fzPIgxe2.js";
+import { s as u } from "../../../chunks/index-DSSLJirw.js";
 import "../kt-pagination/kt-pagination.js";
 var w = Object.defineProperty, a = (o, t, e, s) => {
   for (var i = void 0, c = o.length - 1, l; c >= 0; c--)

package/dist/components/data/kt-timeline/kt-timeline.js

@@ -1,7 +1,7 @@
 import { css as h, html as s, nothing as m } from "lit";
 import { property as a } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
-import { K as c, d as f } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as c, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import "../../core/kt-icon/kt-icon.js";
 var v = Object.defineProperty, i = (l, r, o, n) => {
   for (var e = void 0, p = l.length - 1, d; p >= 0; p--)

package/dist/components/feedback/kt-alert/kt-alert.js

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

package/dist/components/feedback/kt-empty-state/kt-empty-state.js

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

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js

@@ -2,7 +2,7 @@ import { css as v, nothing as p, html as o } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as u, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var f = Object.defineProperty, r = (n, e, i, c) => {
   for (var s = void 0, l = n.length - 1, d; l >= 0; l--)
     (d = n[l]) && (s = d(e, i, s) || s);

package/dist/components/feedback/kt-skeleton/kt-skeleton.js

@@ -2,7 +2,7 @@ import { css as c, html as d } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as f } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as u, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var y = Object.defineProperty, a = (n, i, t, p) => {
   for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
     (l = n[o]) && (e = l(i, t, e) || e);

package/dist/components/feedback/kt-toast/kt-toast.js

@@ -1,8 +1,8 @@
 import { css as u, nothing as n, html as a } from "lit";
 import { state as v, property as e } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as p, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as f } 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-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
 var b = Object.defineProperty, i = (c, o, s, x) => {

package/dist/components/feedback/kt-toast-container/kt-toast-container.js

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

package/dist/components/feedback/kt-tooltip/kt-tooltip.js

@@ -1,7 +1,7 @@
 import { css as h, html as l } from "lit";
 import { state as c, property as n } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.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 { u as f } from "../../../chunks/events-Bjl5Zmmq.js";
 var u = Object.defineProperty, s = (r, t, a, y) => {
   for (var e = void 0, o = r.length - 1, p; o >= 0; o--)

package/dist/components/forms/kt-checkbox/kt-checkbox.d.ts

@@ -0,0 +1,66 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtCheckboxSize = 'small' | 'medium' | 'large';
+/**
+ * A checkbox: a choice that applies when the form is submitted.
+ *
+ * Built on a real `<input type="checkbox">`, laid invisibly over the drawn
+ * box, so the keyboard, the label click, the indeterminate state and what a
+ * screen reader announces all come from the platform rather than a
+ * reimplementation of it.
+ *
+ * For a setting that takes effect the moment it is flipped, use
+ * `<kt-toggle>`; for one choice among several, `<kt-radio-group>`.
+ *
+ * @element kt-checkbox
+ *
+ * @slot - The label, clickable.
+ *
+ * @csspart base - The `<label>` around box and text.
+ * @csspart input - The native checkbox.
+ * @csspart box - The drawn box.
+ *
+ * @fires kt-change - The box was checked or unchecked. `detail: { checked }`.
+ *
+ * @example
+ * ```html
+ * <kt-checkbox name="terms" required>I accept the terms</kt-checkbox>
+ * <kt-checkbox indeterminate>Select all</kt-checkbox>
+ * ```
+ */
+export declare class KtCheckbox extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private input?;
+    private internals;
+    private defaultChecked;
+    checked: boolean;
+    /**
+     * Neither checked nor unchecked — for a "select all" over a partial
+     * selection. Cleared as soon as the user clicks, as on a native checkbox.
+     */
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    size: KtCheckboxSize;
+    name: string;
+    /** Submitted when checked, as for a native checkbox. */
+    value: string;
+    /** Accessible name, when nothing is slotted. */
+    label: string;
+    /** Error message. A non-empty value puts the box in its error state. */
+    error: string;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    private onChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-checkbox': KtCheckbox;
+    }
+}

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

@@ -0,0 +1,198 @@
+import { css as p, nothing as a, html as c } from "lit";
+import { query as u, property as i } from "lit/decorators.js";
+import { live as b } from "lit/directives/live.js";
+import { K as d, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as k, s as v, b as g } from "../../../chunks/form-control-CxjBTt1c.js";
+import { s as y } from "../../../chunks/index-DSSLJirw.js";
+import "../../core/kt-icon/kt-icon.js";
+var x = Object.defineProperty, r = (l, e, o, C) => {
+  for (var s = void 0, n = l.length - 1, h; n >= 0; n--)
+    (h = l[n]) && (s = h(e, o, s) || s);
+  return s && x(e, o, s), s;
+};
+class t extends d {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "", this.error = "";
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      d.styles,
+      p`
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+        /* Sized off the button heights, like the toggle, so a checkbox lines
+           up with the fields and buttons beside it. */
+        --checkbox-size: calc(var(--button-height) * 0.45);
+      }
+      :host([size='small']) {
+        --checkbox-size: calc(var(--button-height-small) * 0.45);
+      }
+      :host([size='large']) {
+        --checkbox-size: calc(var(--button-height-large) * 0.45);
+      }
+
+      label {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        cursor: pointer;
+      }
+
+      .control {
+        position: relative;
+        flex: none;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        /* Centre the box on the first line of text, not the whole block. */
+        margin-top: calc((1lh - var(--checkbox-size)) / 2);
+      }
+
+      input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: inherit;
+      }
+
+      .box {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+        color: var(--color-white);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-sub-menu);
+        transition:
+          background-color var(--duration-instant),
+          border-color var(--duration-instant);
+        pointer-events: none;
+      }
+
+      label:hover .box {
+        border-color: var(--text-muted);
+      }
+
+      input:focus-visible + .box {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      input:checked + .box,
+      input:indeterminate + .box {
+        background-color: var(--color-primary-base);
+        border-color: var(--color-primary-base);
+      }
+
+      .error .box {
+        border-color: var(--color-danger-base);
+      }
+
+      :host([disabled]) label {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      :host([disabled]) .box {
+        background-color: var(--color-dark-22);
+        border-color: var(--color-dark-24);
+        color: var(--text-disabled);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= k(this), this.defaultChecked = this.checked;
+  }
+  willUpdate(e) {
+    if (e.has("checked") || e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      v(this.internals, this.checked ? this.value : null);
+      const o = this.required && !this.checked;
+      g(
+        this.internals,
+        { valueMissing: o, customError: !!this.error },
+        this.error || (o ? y().checkRequired : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked, this.indeterminate = !1;
+  }
+  formStateRestoreCallback(e) {
+    this.checked = e === this.value;
+  }
+  focus(e) {
+    this.input?.focus(e);
+  }
+  onChange(e) {
+    const o = e.target;
+    this.checked = o.checked, this.indeterminate = !1, f(this, "kt-change", { checked: this.checked });
+  }
+  render() {
+    const e = this.indeterminate ? "minus" : this.checked ? "check" : "";
+    return c`${this.error ? c`<span id="error-message" class="visually-hidden">${this.error}</span>` : a}<label part="base" class=${this.error ? "error" : ""}>
+        <span class="control">
+          <input
+            part="input"
+            type="checkbox"
+            .checked=${b(this.checked)}
+            .indeterminate=${this.indeterminate}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-label=${this.label || a}
+            aria-invalid=${this.error ? "true" : a}
+            aria-describedby=${this.error ? "error-message" : a}
+            @change=${this.onChange}
+          />
+          <span part="box" class="box">
+            ${e ? c`<kt-icon name=${e} size="14"></kt-icon>` : a}
+          </span>
+        </span>
+        <span class="text"><slot></slot></span>
+      </label>`;
+  }
+}
+r([
+  u("input")
+], t.prototype, "input");
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "checked");
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate");
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "required");
+r([
+  i({ type: String, reflect: !0 })
+], t.prototype, "size");
+r([
+  i({ type: String })
+], t.prototype, "name");
+r([
+  i({ type: String })
+], t.prototype, "value");
+r([
+  i({ type: String })
+], t.prototype, "label");
+r([
+  i({ type: String, reflect: !0 })
+], t.prototype, "error");
+m("kt-checkbox", t);
+export {
+  t as KtCheckbox
+};
+//# sourceMappingURL=kt-checkbox.js.map

package/dist/components/forms/kt-checkbox/kt-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-checkbox.js","sources":["../../../../src/components/forms/kt-checkbox/kt-checkbox.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.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';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtCheckboxSize = 'small' | 'medium' | 'large';\n\n/**\n * A checkbox: a choice that applies when the form is submitted.\n *\n * Built on a real `<input type=\"checkbox\">`, laid invisibly over the drawn\n * box, so the keyboard, the label click, the indeterminate state and what a\n * screen reader announces all come from the platform rather than a\n * reimplementation of it.\n *\n * For a setting that takes effect the moment it is flipped, use\n * `<kt-toggle>`; for one choice among several, `<kt-radio-group>`.\n *\n * @element kt-checkbox\n *\n * @slot - The label, clickable.\n *\n * @csspart base - The `<label>` around box and text.\n * @csspart input - The native checkbox.\n * @csspart box - The drawn box.\n *\n * @fires kt-change - The box was checked or unchecked. `detail: { checked }`.\n *\n * @example\n * ```html\n * <kt-checkbox name=\"terms\" required>I accept the terms</kt-checkbox>\n * <kt-checkbox indeterminate>Select all</kt-checkbox>\n * ```\n */\nexport class KtCheckbox extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        vertical-align: middle;\n        /* Sized off the button heights, like the toggle, so a checkbox lines\n           up with the fields and buttons beside it. */\n        --checkbox-size: calc(var(--button-height) * 0.45);\n      }\n      :host([size='small']) {\n        --checkbox-size: calc(var(--button-height-small) * 0.45);\n      }\n      :host([size='large']) {\n        --checkbox-size: calc(var(--button-height-large) * 0.45);\n      }\n\n      label {\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        cursor: pointer;\n      }\n\n      .control {\n        position: relative;\n        flex: none;\n        width: var(--checkbox-size);\n        height: var(--checkbox-size);\n        /* Centre the box on the first line of text, not the whole block. */\n        margin-top: calc((1lh - var(--checkbox-size)) / 2);\n      }\n\n      input {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        opacity: 0;\n        cursor: inherit;\n      }\n\n      .box {\n        display: grid;\n        place-items: center;\n        width: 100%;\n        height: 100%;\n        color: var(--color-white);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-sub-menu);\n        transition:\n          background-color var(--duration-instant),\n          border-color var(--duration-instant);\n        pointer-events: none;\n      }\n\n      label:hover .box {\n        border-color: var(--text-muted);\n      }\n\n      input:focus-visible + .box {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      input:checked + .box,\n      input:indeterminate + .box {\n        background-color: var(--color-primary-base);\n        border-color: var(--color-primary-base);\n      }\n\n      .error .box {\n        border-color: var(--color-danger-base);\n      }\n\n      :host([disabled]) label {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      :host([disabled]) .box {\n        background-color: var(--color-dark-22);\n        border-color: var(--color-dark-24);\n        color: var(--text-disabled);\n      }\n    `,\n  ];\n\n  @query('input')\n  private input?: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultChecked = false;\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Neither checked nor unchecked — for a \"select all\" over a partial\n   * selection. Cleared as soon as the user clicks, as on a native checkbox.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\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  size: KtCheckboxSize = 'medium';\n\n  @property({ type: String })\n  name = '';\n\n  /** Submitted when checked, as for a native checkbox. */\n  @property({ type: String })\n  value = 'on';\n\n  /** Accessible name, when nothing is slotted. */\n  @property({ type: String })\n  label = '';\n\n  /** Error message. A non-empty value puts the box 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.defaultChecked = this.checked;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('checked') ||\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      // Unchecked contributes nothing to the submission, not an empty string.\n      setFormValue(this.internals, this.checked ? this.value : null);\n\n      const missing = this.required && !this.checked;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().checkRequired : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n    this.indeterminate = false;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.checked = state === this.value;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  private onChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.indeterminate = false;\n    emit(this, 'kt-change', { checked: this.checked });\n  }\n\n  override render(): TemplateResult {\n    const icon = this.indeterminate ? 'minus' : this.checked ? 'check' : '';\n\n    // The message sits outside the <label>: inside it, it would become part of\n    // the checkbox's name instead of its description.\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }<label part=\"base\" class=${this.error ? 'error' : ''}>\n        <span class=\"control\">\n          <input\n            part=\"input\"\n            type=\"checkbox\"\n            .checked=${live(this.checked)}\n            .indeterminate=${this.indeterminate}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-label=${this.label || nothing}\n            aria-invalid=${this.error ? 'true' : nothing}\n            aria-describedby=${this.error ? 'error-message' : nothing}\n            @change=${this.onChange}\n          />\n          <span part=\"box\" class=\"box\">\n            ${icon ? html`<kt-icon name=${icon} size=\"14\"></kt-icon>` : nothing}\n          </span>\n        </span>\n        <span class=\"text\"><slot></slot></span>\n      </label>`;\n  }\n}\n\ndefineElement('kt-checkbox', KtCheckbox);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-checkbox': KtCheckbox;\n  }\n}\n"],"names":["KtCheckbox","KtElement","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","state","options","event","input","emit","icon","html","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-drag-drop/kt-drag-drop.js

@@ -1,10 +1,10 @@
 import { css as v, nothing as p, html as c } from "lit";
 import { query as y, state as g, property as n } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { K as m, d as x } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as m, d as x } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as k, s as $, b as w } from "../../../chunks/form-control-CxjBTt1c.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";
 import "../../core/kt-button/kt-button.js";
 const u = ["B", "KB", "MB", "GB", "TB"];

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

@@ -1,12 +1,13 @@
-import { css as f, nothing as h, html as r } from "lit";
+import { css as f, nothing as h, html as d } from "lit";
 import { queryAssignedElements as c, state as g, property as a } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as p, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
+import { s as b } from "../../../chunks/index-DSSLJirw.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
-var b = Object.defineProperty, s = (l, e, o, u) => {
-  for (var i = void 0, d = l.length - 1, n; d >= 0; d--)
-    (n = l[d]) && (i = n(e, o, i) || i);
-  return i && b(e, o, i), i;
+var u = Object.defineProperty, s = (r, e, o, v) => {
+  for (var i = void 0, l = r.length - 1, n; l >= 0; l--)
+    (n = r[l]) && (i = n(e, o, i) || i);
+  return i && u(e, o, i), i;
 };
 class t extends p {
   constructor() {
@@ -133,19 +134,19 @@ class t extends p {
   }
   render() {
     const e = !!this.heading || !!this.description;
-    return r`<fieldset part="base" ?disabled=${this.disabled}>
+    return d`<fieldset part="base" ?disabled=${this.disabled}>
       <legend class=${this.heading ? "" : "visually-hidden"}>
-        <slot name="heading">${this.heading || "Form section"}</slot>
+        <slot name="heading">${this.heading || b().formSection}</slot>
       </legend>
 
-      ${e && this.description ? r`<div part="header" class="header">
+      ${e && this.description ? d`<div part="header" class="header">
               <p class="description">${this.description}</p>
             </div>` : h}
 
       <div part="fields" class="fields">
         ${this.loading ? Array.from(
       { length: this.loadingFields },
-      () => r`<div class="placeholder" aria-hidden="true">
+      () => d`<div class="placeholder" aria-hidden="true">
                     <kt-skeleton width="30%" height="14px"></kt-skeleton>
                     <kt-skeleton variant="rect" height="40px"></kt-skeleton>
                   </div>`

package/dist/components/forms/kt-form/kt-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-form.js","sources":["../../../../src/components/forms/kt-form/kt-form.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\n/** Anything the panel can switch off along with itself. */\ninterface Disableable extends HTMLElement {\n  disabled?: boolean;\n}\n\n/**\n * A panel grouping related fields.\n *\n * It sits one step above the page on `--surface-form`, so the fields inside —\n * filled at `--surface-field` — read as wells recessed into it rather than as\n * boxes floating on it.\n *\n * **Put it inside your own `<form>`.** It renders a `<fieldset>`, not a form:\n * Kanto fields are form-associated custom elements, and a control finds its\n * form by walking its *own* tree. A `<form>` inside this element's shadow root\n * would not own anything slotted into it, and `new FormData(form)` would come\n * back empty. The `<form>` above stays in charge of submission, validation and\n * reset; this owns the grouping and the look.\n *\n * @element kt-form\n *\n * @slot - The fields.\n * @slot heading - Replaces the `heading` attribute, for markup.\n * @slot footer - Actions, right-aligned. Hidden when empty.\n *\n * @csspart base - The `<fieldset>`.\n * @csspart header - The heading and description.\n * @csspart fields - The field column.\n * @csspart footer - The action row.\n *\n * @example\n * ```html\n * <form>\n *   <kt-form heading=\"Identity\" description=\"How we address you.\">\n *     <kt-label-input label=\"Company\" required>\n *       <kt-input name=\"company\" required></kt-input>\n *     </kt-label-input>\n *     <kt-button slot=\"footer\" type=\"submit\">Save</kt-button>\n *   </kt-form>\n * </form>\n * ```\n */\nexport class KtForm extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      fieldset {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n        margin: 0;\n        padding: var(--padding-card);\n        background-color: var(--surface-form);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n\n      .header {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      /* A legend is the accessible name for the group, so it stays in the\n         accessibility tree even when there is nothing to show. */\n      legend {\n        padding: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      legend.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      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .fields {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      /* Collapsed from JS: a wrapper around a <slot> always has the slot as a\n         child, so :has(*) cannot tell an empty slot from a filled one. */\n      .footer.empty {\n        display: none;\n      }\n\n      /* While loading, the real fields stay in the DOM — and keep their state\n         — but step aside for the placeholders. */\n      :host([loading]) ::slotted(*) {\n        display: none;\n      }\n\n      :host([disabled]) fieldset {\n        opacity: 0.6;\n      }\n    `,\n  ];\n\n  @queryAssignedElements()\n  private fields!: HTMLElement[];\n\n  @state()\n  private hasFooter = false;\n\n  /** Group heading. Also the fieldset's accessible name. */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Replaces the fields with placeholders. */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /** Switches off every field in the panel. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** How many placeholder fields `loading` draws. */\n  @property({ type: Number, attribute: 'loading-fields' })\n  loadingFields = 3;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) this.syncDisabled();\n  }\n\n  /**\n   * A native `<fieldset disabled>` switches off its descendants, but slotted\n   * fields are not descendants of the fieldset in their own tree — the shadow\n   * boundary sits between them — so the platform never reaches them. Walk the\n   * slotted controls and set it directly.\n   */\n  /**\n   * The initial `slotchange` is queued as a microtask and can land after the\n   * first render has settled, so read the slots once directly as well.\n   */\n  override firstUpdated(): void {\n    this.readSlots();\n    this.syncDisabled();\n  }\n\n  private readSlots(): void {\n    this.hasFooter = hasAssignedContent(\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n    );\n  }\n\n  private onFooterSlotChange(): void {\n    this.readSlots();\n  }\n\n  private syncDisabled(): void {\n    for (const field of this.fields ?? []) {\n      if ('disabled' in field) (field as Disableable).disabled = this.disabled;\n      for (const nested of field.querySelectorAll<Disableable>('*')) {\n        if ('disabled' in nested) nested.disabled = this.disabled;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    const hasHeader = Boolean(this.heading) || Boolean(this.description);\n\n    return html`<fieldset part=\"base\" ?disabled=${this.disabled}>\n      <legend class=${this.heading ? '' : 'visually-hidden'}>\n        <slot name=\"heading\">${this.heading || 'Form section'}</slot>\n      </legend>\n\n      ${\n        hasHeader && this.description\n          ? html`<div part=\"header\" class=\"header\">\n              <p class=\"description\">${this.description}</p>\n            </div>`\n          : nothing\n      }\n\n      <div part=\"fields\" class=\"fields\">\n        ${\n          this.loading\n            ? Array.from(\n                { length: this.loadingFields },\n                () =>\n                  html`<div class=\"placeholder\" aria-hidden=\"true\">\n                    <kt-skeleton width=\"30%\" height=\"14px\"></kt-skeleton>\n                    <kt-skeleton variant=\"rect\" height=\"40px\"></kt-skeleton>\n                  </div>`,\n              )\n            : nothing\n        }\n        <slot @slotchange=${this.syncDisabled}></slot>\n      </div>\n\n      <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n        <slot name=\"footer\" @slotchange=${this.onFooterSlotChange}></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndefineElement('kt-form', KtForm);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-form': KtForm;\n  }\n}\n"],"names":["KtForm","KtElement","css","changed","hasAssignedContent","field","nested","hasHeader","html","nothing","__decorateClass","queryAssignedElements","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-form.js","sources":["../../../../src/components/forms/kt-form/kt-form.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { hasAssignedContent } from '#internal/slots';\nimport { strings } from '#internal/strings';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\n/** Anything the panel can switch off along with itself. */\ninterface Disableable extends HTMLElement {\n  disabled?: boolean;\n}\n\n/**\n * A panel grouping related fields.\n *\n * It sits one step above the page on `--surface-form`, so the fields inside —\n * filled at `--surface-field` — read as wells recessed into it rather than as\n * boxes floating on it.\n *\n * **Put it inside your own `<form>`.** It renders a `<fieldset>`, not a form:\n * Kanto fields are form-associated custom elements, and a control finds its\n * form by walking its *own* tree. A `<form>` inside this element's shadow root\n * would not own anything slotted into it, and `new FormData(form)` would come\n * back empty. The `<form>` above stays in charge of submission, validation and\n * reset; this owns the grouping and the look.\n *\n * @element kt-form\n *\n * @slot - The fields.\n * @slot heading - Replaces the `heading` attribute, for markup.\n * @slot footer - Actions, right-aligned. Hidden when empty.\n *\n * @csspart base - The `<fieldset>`.\n * @csspart header - The heading and description.\n * @csspart fields - The field column.\n * @csspart footer - The action row.\n *\n * @example\n * ```html\n * <form>\n *   <kt-form heading=\"Identity\" description=\"How we address you.\">\n *     <kt-label-input label=\"Company\" required>\n *       <kt-input name=\"company\" required></kt-input>\n *     </kt-label-input>\n *     <kt-button slot=\"footer\" type=\"submit\">Save</kt-button>\n *   </kt-form>\n * </form>\n * ```\n */\nexport class KtForm extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      fieldset {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n        margin: 0;\n        padding: var(--padding-card);\n        background-color: var(--surface-form);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n\n      .header {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      /* A legend is the accessible name for the group, so it stays in the\n         accessibility tree even when there is nothing to show. */\n      legend {\n        padding: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      legend.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      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .fields {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      /* Collapsed from JS: a wrapper around a <slot> always has the slot as a\n         child, so :has(*) cannot tell an empty slot from a filled one. */\n      .footer.empty {\n        display: none;\n      }\n\n      /* While loading, the real fields stay in the DOM — and keep their state\n         — but step aside for the placeholders. */\n      :host([loading]) ::slotted(*) {\n        display: none;\n      }\n\n      :host([disabled]) fieldset {\n        opacity: 0.6;\n      }\n    `,\n  ];\n\n  @queryAssignedElements()\n  private fields!: HTMLElement[];\n\n  @state()\n  private hasFooter = false;\n\n  /** Group heading. Also the fieldset's accessible name. */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Replaces the fields with placeholders. */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /** Switches off every field in the panel. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** How many placeholder fields `loading` draws. */\n  @property({ type: Number, attribute: 'loading-fields' })\n  loadingFields = 3;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) this.syncDisabled();\n  }\n\n  /**\n   * A native `<fieldset disabled>` switches off its descendants, but slotted\n   * fields are not descendants of the fieldset in their own tree — the shadow\n   * boundary sits between them — so the platform never reaches them. Walk the\n   * slotted controls and set it directly.\n   */\n  /**\n   * The initial `slotchange` is queued as a microtask and can land after the\n   * first render has settled, so read the slots once directly as well.\n   */\n  override firstUpdated(): void {\n    this.readSlots();\n    this.syncDisabled();\n  }\n\n  private readSlots(): void {\n    this.hasFooter = hasAssignedContent(\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n    );\n  }\n\n  private onFooterSlotChange(): void {\n    this.readSlots();\n  }\n\n  private syncDisabled(): void {\n    for (const field of this.fields ?? []) {\n      if ('disabled' in field) (field as Disableable).disabled = this.disabled;\n      for (const nested of field.querySelectorAll<Disableable>('*')) {\n        if ('disabled' in nested) nested.disabled = this.disabled;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    const hasHeader = Boolean(this.heading) || Boolean(this.description);\n\n    return html`<fieldset part=\"base\" ?disabled=${this.disabled}>\n      <legend class=${this.heading ? '' : 'visually-hidden'}>\n        <slot name=\"heading\">${this.heading || strings().formSection}</slot>\n      </legend>\n\n      ${\n        hasHeader && this.description\n          ? html`<div part=\"header\" class=\"header\">\n              <p class=\"description\">${this.description}</p>\n            </div>`\n          : nothing\n      }\n\n      <div part=\"fields\" class=\"fields\">\n        ${\n          this.loading\n            ? Array.from(\n                { length: this.loadingFields },\n                () =>\n                  html`<div class=\"placeholder\" aria-hidden=\"true\">\n                    <kt-skeleton width=\"30%\" height=\"14px\"></kt-skeleton>\n                    <kt-skeleton variant=\"rect\" height=\"40px\"></kt-skeleton>\n                  </div>`,\n              )\n            : nothing\n        }\n        <slot @slotchange=${this.syncDisabled}></slot>\n      </div>\n\n      <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n        <slot name=\"footer\" @slotchange=${this.onFooterSlotChange}></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndefineElement('kt-form', KtForm);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-form': KtForm;\n  }\n}\n"],"names":["KtForm","KtElement","css","changed","hasAssignedContent","field","nested","hasHeader","html","strings","nothing","__decorateClass","queryAssignedElements","state","property","defineElement"],"mappings":"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"}

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

@@ -2,10 +2,10 @@ import { css as w, nothing as n, html as l } from "lit";
 import { query as x, state as y, property as a } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { live as $ } from "lit/directives/live.js";
-import { K as b, d as C } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as b, d as C } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as k, s as g, b as P } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as d } from "../../../chunks/index-fzPIgxe2.js";
+import { s as d } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
 const O = [
   { id: "us", name: "United States", dialCode: "1", format: "123-456-7890" },

package/dist/components/forms/kt-input-menu/kt-input-menu.js

@@ -2,11 +2,11 @@ import { css as g, nothing as a, html as h } from "lit";
 import { query as x, state as f, property as n } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { live as w } from "lit/directives/live.js";
-import { K as m, d as k } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { K as m, d as k } from "../../../chunks/kt-element-E-tfJpGQ.js";
 import { u as $, e as c } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as I, s as q, b as D } from "../../../chunks/form-control-CxjBTt1c.js";
 import { a as O, b as E, o as y, f as v, l as L, n as C } 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 P = Object.defineProperty, i = (d, t, o, r) => {
   for (var s = void 0, u = d.length - 1, b; u >= 0; u--)

package/dist/components/forms/kt-label-input/kt-label-input.js

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