kanto-ds 1.2.0 → 1.4.0

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

@@ -1,28 +1,29 @@
-import { css as g, nothing as n, html as a } from "lit";
-import { state as u, property as e } from "lit/decorators.js";
-import { K as h, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+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-E-tfJpGQ.js";
+import { e as f } from "../../../chunks/events-Bjl5Zmmq.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 f = Object.defineProperty, i = (c, o, s, w) => {
+var b = Object.defineProperty, i = (c, o, s, x) => {
   for (var r = void 0, d = c.length - 1, l; d >= 0; d--)
     (l = c[d]) && (r = l(o, s, r) || r);
-  return r && f(o, s, r), r;
+  return r && b(o, s, r), r;
 };
-const b = {
+const w = {
   success: { icon: "circle-check", progress: "success" },
   information: { icon: "info", progress: "info" },
   warning: { icon: "triangle-alert", progress: "warning" },
   error: { icon: "circle-alert", progress: "danger" }
-}, p = 50;
-class t extends h {
+}, g = 50;
+class t extends p {
   constructor() {
     super(...arguments), this.remaining = 0, this.variant = "information", this.heading = "", this.description = "", this.dismissible = !1, this.duration = 0;
   }
   static {
     this.styles = [
-      h.styles,
-      g`
+      p.styles,
+      u`
       :host {
         display: block;
       }
@@ -155,8 +156,8 @@ class t extends h {
   /** Runs the countdown from whatever `remaining` currently is. */
   tick() {
     this.timer = setInterval(() => {
-      this.remaining -= p, !(this.remaining > 0) && (this.stopCountdown(), this.close());
-    }, p);
+      this.remaining -= g, !(this.remaining > 0) && (this.stopCountdown(), this.close());
+    }, g);
   }
   stopCountdown() {
     this.timer !== void 0 && clearInterval(this.timer), this.timer = void 0;
@@ -171,10 +172,10 @@ class t extends h {
   }
   /** Asks to be removed. The container is what actually removes it. */
   close() {
-    this.stopCountdown(), m(this, "kt-toast-close");
+    this.stopCountdown(), f(this, "kt-toast-close");
   }
   render() {
-    const o = b[this.variant], s = this.duration > 0;
+    const o = w[this.variant], s = this.duration > 0;
     return a`<div
       part="base"
       class="toast"
@@ -189,7 +190,12 @@ class t extends h {
         </div>
       </div>
 
-      ${this.dismissible ? a`<button part="close" class="close" aria-label="Close" @click=${this.close}>
+      ${this.dismissible ? a`<button
+              part="close"
+              class="close"
+              aria-label=${h().close}
+              @click=${this.close}
+            >
               <kt-icon name="x" size="18"></kt-icon>
             </button>` : n}
       ${s ? a`<div class="countdown">
@@ -200,14 +206,14 @@ class t extends h {
                 animated
                 .value=${this.remaining}
                 .max=${this.duration}
-                label="Time remaining"
+                label=${h().timeRemaining}
               ></kt-progress-bar>
             </div>` : n}
     </div>`;
   }
 }
 i([
-  u()
+  v()
 ], t.prototype, "remaining");
 i([
   e({ type: String, reflect: !0 })
@@ -224,7 +230,7 @@ i([
 i([
   e({ type: Number })
 ], t.prototype, "duration");
-v("kt-toast", t);
+m("kt-toast", t);
 export {
   t as KtToast
 };

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

@@ -1 +1 @@
-{"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' | 'information' | 'warning' | 'error';\n\ninterface VariantMeta {\n  readonly icon: string;\n  readonly progress: 'success' | 'info' | 'warning' | 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n  success: { icon: 'circle-check', progress: 'success' },\n  information: { icon: 'info', progress: 'info' },\n  warning: { icon: 'triangle-alert', progress: 'warning' },\n  error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. */\nconst TICK_MS = 50;\n\n/**\n * A transient notification.\n *\n * The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n *\n * @element kt-toast\n *\n * @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n *\n * @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n *   dismiss button. `<kt-toast-container>` listens for this.\n */\nexport class KtToast extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .toast {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-form);\n        max-width: 480px;\n        padding: var(--padding-form);\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        backdrop-filter: blur(10px);\n      }\n\n      /* A wash of the variant's hue over the card surface, rather than a\n         solid fill: the text stays on a neutral background and keeps its\n         contrast. */\n      :host([variant='success']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='information']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='warning']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='error']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n          var(--surface-card);\n      }\n\n      :host([variant='success']) .heading {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .heading {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .heading {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .heading {\n        color: var(--color-danger-text);\n      }\n\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .icon {\n        color: var(--color-danger-text);\n      }\n\n      .body {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n      }\n\n      .content {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        font: var(--font-normal-regular);\n      }\n\n      .close {\n        display: flex;\n        align-items: center;\n        padding: 4px;\n        color: currentcolor;\n        background: transparent;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .countdown {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `,\n  ];\n\n  private timer: ReturnType<typeof setInterval> | undefined;\n\n  @state()\n  private remaining = 0;\n\n  @property({ type: String, reflect: true })\n  variant: KtToastVariant = 'information';\n\n  /**\n   * The toast's title.\n   *\n   * Named `heading` because every element already has a `title`, and shadowing\n   * it would turn the toast into its own tooltip.\n   */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /**\n   * Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n   * keeps the toast until something removes it.\n   */\n  @property({ type: Number })\n  duration = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.startCountdown();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopCountdown();\n  }\n\n  private startCountdown(): void {\n    this.stopCountdown();\n    if (this.duration <= 0) return;\n\n    this.remaining = this.duration;\n    this.tick();\n  }\n\n  /** Runs the countdown from whatever `remaining` currently is. */\n  private tick(): void {\n    this.timer = setInterval(() => {\n      this.remaining -= TICK_MS;\n      if (this.remaining > 0) return;\n\n      this.stopCountdown();\n      this.close();\n    }, TICK_MS);\n  }\n\n  private stopCountdown(): void {\n    if (this.timer !== undefined) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  /** Pauses the countdown. The container calls this while the pointer is over the stack. */\n  pause(): void {\n    if (this.timer !== undefined) this.stopCountdown();\n  }\n\n  /** Resumes a paused countdown from where it stopped. */\n  resume(): void {\n    if (this.duration <= 0 || this.timer !== undefined || this.remaining <= 0) return;\n    this.tick();\n  }\n\n  /** Asks to be removed. The container is what actually removes it. */\n  close(): void {\n    this.stopCountdown();\n    emit(this, 'kt-toast-close');\n  }\n\n  override render(): TemplateResult {\n    const meta = META[this.variant];\n    const showCountdown = this.duration > 0;\n\n    return html`<div\n      part=\"base\"\n      class=\"toast\"\n      role=${this.variant === 'error' ? 'alert' : 'status'}\n      aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n    >\n      <div class=\"body\">\n        <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n        <div class=\"content\">\n          ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n        </div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button part=\"close\" class=\"close\" aria-label=\"Close\" @click=${this.close}>\n              <kt-icon name=\"x\" size=\"18\"></kt-icon>\n            </button>`\n          : nothing\n      }\n      ${\n        showCountdown\n          ? html`<div class=\"countdown\">\n              <kt-progress-bar\n                size=\"small\"\n                variant=${meta.progress}\n                striped\n                animated\n                .value=${this.remaining}\n                .max=${this.duration}\n                label=\"Time remaining\"\n              ></kt-progress-bar>\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast': KtToast;\n  }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","__decorateClass","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' | 'information' | 'warning' | 'error';\n\ninterface VariantMeta {\n  readonly icon: string;\n  readonly progress: 'success' | 'info' | 'warning' | 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n  success: { icon: 'circle-check', progress: 'success' },\n  information: { icon: 'info', progress: 'info' },\n  warning: { icon: 'triangle-alert', progress: 'warning' },\n  error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. */\nconst TICK_MS = 50;\n\n/**\n * A transient notification.\n *\n * The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n *\n * @element kt-toast\n *\n * @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n *\n * @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n *   dismiss button. `<kt-toast-container>` listens for this.\n */\nexport class KtToast extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .toast {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-form);\n        max-width: 480px;\n        padding: var(--padding-form);\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        backdrop-filter: blur(10px);\n      }\n\n      /* A wash of the variant's hue over the card surface, rather than a\n         solid fill: the text stays on a neutral background and keeps its\n         contrast. */\n      :host([variant='success']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='information']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='warning']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='error']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n          var(--surface-card);\n      }\n\n      :host([variant='success']) .heading {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .heading {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .heading {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .heading {\n        color: var(--color-danger-text);\n      }\n\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .icon {\n        color: var(--color-danger-text);\n      }\n\n      .body {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n      }\n\n      .content {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        font: var(--font-normal-regular);\n      }\n\n      .close {\n        display: flex;\n        align-items: center;\n        padding: 4px;\n        color: currentcolor;\n        background: transparent;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .countdown {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `,\n  ];\n\n  private timer: ReturnType<typeof setInterval> | undefined;\n\n  @state()\n  private remaining = 0;\n\n  @property({ type: String, reflect: true })\n  variant: KtToastVariant = 'information';\n\n  /**\n   * The toast's title.\n   *\n   * Named `heading` because every element already has a `title`, and shadowing\n   * it would turn the toast into its own tooltip.\n   */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /**\n   * Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n   * keeps the toast until something removes it.\n   */\n  @property({ type: Number })\n  duration = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.startCountdown();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopCountdown();\n  }\n\n  private startCountdown(): void {\n    this.stopCountdown();\n    if (this.duration <= 0) return;\n\n    this.remaining = this.duration;\n    this.tick();\n  }\n\n  /** Runs the countdown from whatever `remaining` currently is. */\n  private tick(): void {\n    this.timer = setInterval(() => {\n      this.remaining -= TICK_MS;\n      if (this.remaining > 0) return;\n\n      this.stopCountdown();\n      this.close();\n    }, TICK_MS);\n  }\n\n  private stopCountdown(): void {\n    if (this.timer !== undefined) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  /** Pauses the countdown. The container calls this while the pointer is over the stack. */\n  pause(): void {\n    if (this.timer !== undefined) this.stopCountdown();\n  }\n\n  /** Resumes a paused countdown from where it stopped. */\n  resume(): void {\n    if (this.duration <= 0 || this.timer !== undefined || this.remaining <= 0) return;\n    this.tick();\n  }\n\n  /** Asks to be removed. The container is what actually removes it. */\n  close(): void {\n    this.stopCountdown();\n    emit(this, 'kt-toast-close');\n  }\n\n  override render(): TemplateResult {\n    const meta = META[this.variant];\n    const showCountdown = this.duration > 0;\n\n    return html`<div\n      part=\"base\"\n      class=\"toast\"\n      role=${this.variant === 'error' ? 'alert' : 'status'}\n      aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n    >\n      <div class=\"body\">\n        <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n        <div class=\"content\">\n          ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n        </div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=${strings().close}\n              @click=${this.close}\n            >\n              <kt-icon name=\"x\" size=\"18\"></kt-icon>\n            </button>`\n          : nothing\n      }\n      ${\n        showCountdown\n          ? html`<div class=\"countdown\">\n              <kt-progress-bar\n                size=\"small\"\n                variant=${meta.progress}\n                striped\n                animated\n                .value=${this.remaining}\n                .max=${this.duration}\n                label=${strings().timeRemaining}\n              ></kt-progress-bar>\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast': KtToast;\n  }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":"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"}

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-B_jjQDhg.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-B_jjQDhg.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.d.ts

@@ -35,9 +35,9 @@ export declare class KtDragDrop extends KtElement {
      * Named `heading`, not `title`: an element already has a `title`, and
      * reusing it would put the prompt in a native tooltip on the whole zone.
      */
-    heading: string;
+    heading: string | undefined;
     /** The clickable-looking part of the prompt. */
-    linkText: string;
+    linkText: string | undefined;
     /** Optional hint, e.g. `800×400px`. */
     recommendedSize: string;
     multiple: boolean;