kanto-ds 1.4.0 → 1.5.2

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

@@ -1,27 +1,28 @@
-import { css as h, html as l } from "lit";
-import { state as c, property as n } from "lit/decorators.js";
+import { css as h, html as c } from "lit";
+import { state as b, query as u, 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-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--)
-    (p = r[o]) && (e = p(t, a, e) || e);
-  return e && u(t, a, e), e;
+import { K as l, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { u as m } from "../../../chunks/events-r51msXNf.js";
+import { p as w } from "../../../chunks/position-Cx_ZH5zh.js";
+var y = Object.defineProperty, o = (r, e, s, d) => {
+  for (var t = void 0, a = r.length - 1, p; a >= 0; a--)
+    (p = r[a]) && (t = p(e, s, t) || t);
+  return t && y(e, s, t), t;
 };
-const m = "kt-tooltip-description";
-class i extends d {
+const g = "kt-tooltip-description";
+class i extends l {
   constructor() {
-    super(...arguments), this.descriptionId = f("kt-tooltip"), this.visible = !1, this.text = "", this.placement = "top", this.disabled = !1, this.show = () => {
+    super(...arguments), this.descriptionId = m("kt-tooltip"), this.visible = !1, this.text = "", this.placement = "top", this.open = !1, this.disabled = !1, this.show = () => {
       !this.disabled && this.text && (this.visible = !0);
     }, this.hide = () => {
       this.visible = !1;
-    }, this.onKeyDown = (t) => {
-      t.key === "Escape" && this.visible && (t.stopPropagation(), this.visible = !1);
+    }, this.onKeyDown = (e) => {
+      e.key === "Escape" && this.visible && (e.stopPropagation(), this.visible = !1);
     };
   }
   static {
     this.styles = [
-      d.styles,
+      l.styles,
       h`
       :host {
         position: relative;
@@ -30,47 +31,54 @@ class i extends d {
         justify-content: center;
       }
 
+      /* A popover in the top layer, placed in viewport coordinates from
+         the trigger: no ancestor's overflow can clip it, and it takes no
+         room in the page — a bubble by the right edge used to widen the
+         document. */
       .bubble {
-        position: absolute;
+        position: fixed;
+        inset: auto;
         z-index: var(--z-tooltip);
         max-width: 260px;
+        margin: 0;
         padding: var(--padding-chip);
+        overflow: visible;
         /* Inverted against the page, so the bubble reads as floating in
            both themes — the raw ramp step this used to name is pure white
            under data-theme="light". */
         color: var(--text-inverted);
         font: var(--font-code-regular);
-        white-space: nowrap;
+        /* As wide as a short label, and wrapped at max-width for a sentence:
+           a positioned box beside a small trigger would otherwise shrink to
+           one word per line. */
+        width: max-content;
+        overflow-wrap: anywhere;
         background: var(--surface-inverted);
+        border: none;
         border-radius: var(--radius-input);
+        display: none;
         opacity: 0;
         pointer-events: none;
-        transition: opacity 150ms var(--easing-standard);
+        /* The discrete display and overlay transitions keep the fade-out
+           once the popover closes. */
+        transition:
+          opacity var(--duration-fast) var(--easing-standard),
+          display var(--duration-fast) allow-discrete,
+          overlay var(--duration-fast) allow-discrete;
+      }
+
+      .bubble:popover-open {
+        display: block;
       }
 
       .bubble.visible {
         opacity: 1;
       }
 
-      .top {
-        bottom: calc(100% + 6px);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .bottom {
-        top: calc(100% + 6px);
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .left {
-        top: 50%;
-        right: calc(100% + 6px);
-        transform: translateY(-50%);
-      }
-      .right {
-        top: 50%;
-        left: calc(100% + 6px);
-        transform: translateY(-50%);
+      @starting-style {
+        .bubble.visible {
+          opacity: 0;
+        }
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -85,10 +93,39 @@ class i extends d {
     super.connectedCallback(), this.addEventListener("pointerenter", this.show), this.addEventListener("pointerleave", this.hide), this.addEventListener("focusin", this.show), this.addEventListener("focusout", this.hide), this.addEventListener("keydown", this.onKeyDown);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("pointerenter", this.show), this.removeEventListener("pointerleave", this.hide), this.removeEventListener("focusin", this.show), this.removeEventListener("focusout", this.hide), this.removeEventListener("keydown", this.onKeyDown), this.description?.remove();
+    super.disconnectedCallback(), this.removeEventListener("pointerenter", this.show), this.removeEventListener("pointerleave", this.hide), this.removeEventListener("focusin", this.show), this.removeEventListener("focusout", this.hide), this.removeEventListener("keydown", this.onKeyDown), this.description?.remove(), this.visible = !1, this.closeBubble();
+  }
+  willUpdate(e) {
+    e.has("text") && this.syncDescription();
   }
-  willUpdate(t) {
-    t.has("text") && this.syncDescription();
+  /** Hovered, focused or held open — and something to say. */
+  get shown() {
+    return (this.visible || this.open) && !this.disabled && !!this.text;
+  }
+  // Untyped: `visible` is private, so not among the keys PropertyValues<this> knows.
+  updated(e) {
+    ["visible", "open", "text", "disabled"].some((s) => e.has(s)) && (this.shown ? this.openBubble() : this.closeBubble());
+  }
+  /**
+   * Opens the bubble in the top layer, then places it: it has to be open to be
+   * measured. Where popovers are missing — a test DOM — it stays in place.
+   */
+  openBubble() {
+    const e = this.bubble;
+    if (typeof e.showPopover != "function") return;
+    e.matches(":popover-open") || e.showPopover();
+    const s = this.getBoundingClientRect(), { x: d, y: t } = w(
+      s,
+      e.getBoundingClientRect(),
+      { width: window.innerWidth, height: window.innerHeight },
+      this.placement
+    );
+    e.style.left = `${d}px`, e.style.top = `${t}px`, window.addEventListener("scroll", this.hide, { capture: !0, passive: !0 }), window.addEventListener("resize", this.hide);
+  }
+  closeBubble() {
+    window.removeEventListener("scroll", this.hide, { capture: !0 }), window.removeEventListener("resize", this.hide);
+    const e = this.bubble;
+    typeof e?.hidePopover == "function" && e.matches(":popover-open") && e.hidePopover();
   }
   /**
    * `aria-describedby` cannot reach across a shadow boundary: an id inside this
@@ -104,34 +141,41 @@ class i extends d {
       this.description?.remove(), this.description = void 0;
       return;
     }
-    this.description || (this.description = document.createElement("span"), this.description.id = this.descriptionId, this.description.slot = m, this.append(this.description)), this.description.textContent = this.text;
-    for (const t of this.children)
-      t !== this.description && t.setAttribute("aria-describedby", this.descriptionId);
+    this.description || (this.description = document.createElement("span"), this.description.id = this.descriptionId, this.description.slot = g, this.append(this.description)), this.description.textContent = this.text;
+    for (const e of this.children)
+      e !== this.description && e.setAttribute("aria-describedby", this.descriptionId);
   }
   render() {
-    return l`<slot @slotchange=${this.syncDescription}></slot>
+    return c`<slot @slotchange=${this.syncDescription}></slot>
       <span
         part="bubble"
-        class=${v({ bubble: !0, [this.placement]: !0, visible: this.visible })}
+        popover="manual"
+        class=${v({ bubble: !0, visible: this.shown })}
         role="tooltip"
-        aria-hidden=${this.visible ? "false" : "true"}
+        aria-hidden=${this.shown ? "false" : "true"}
         >${this.text}</span
       >`;
   }
 }
-s([
-  c()
+o([
+  b()
 ], i.prototype, "visible");
-s([
+o([
+  u(".bubble")
+], i.prototype, "bubble");
+o([
   n({ type: String })
 ], i.prototype, "text");
-s([
+o([
   n({ type: String, reflect: !0 })
 ], i.prototype, "placement");
-s([
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "open");
+o([
   n({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");
-b("kt-tooltip", i);
+f("kt-tooltip", i);
 export {
   i as KtTooltip
 };

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

@@ -1 +1 @@
-{"version":3,"file":"kt-tooltip.js","sources":["../../../../src/components/feedback/kt-tooltip/kt-tooltip.ts"],"sourcesContent":["import { css, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { uniqueId } from '#internal/events';\n\nexport type KtTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Marks the description node so it is never assigned to the default slot. */\nconst DESCRIPTION_SLOT = 'kt-tooltip-description';\n\n/**\n * A short label that appears on hover or focus.\n *\n * Wrap the thing it describes:\n *\n * ```html\n * <kt-tooltip text=\"Refresh the data\">\n *   <kt-button icon=\"refresh-cw\" label=\"Refresh\"></kt-button>\n * </kt-tooltip>\n * ```\n *\n * A tooltip is a *description*, never the only name of a control. If the\n * trigger has no visible text, give it its own `label` too — a tooltip that has\n * to be hovered to be read leaves touch and screen-reader users with nothing.\n *\n * @element kt-tooltip\n *\n * @slot - The trigger.\n *\n * @csspart bubble - The tooltip bubble.\n */\nexport class KtTooltip extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .bubble {\n        position: absolute;\n        z-index: var(--z-tooltip);\n        max-width: 260px;\n        padding: var(--padding-chip);\n        /* Inverted against the page, so the bubble reads as floating in\n           both themes — the raw ramp step this used to name is pure white\n           under data-theme=\"light\". */\n        color: var(--text-inverted);\n        font: var(--font-code-regular);\n        white-space: nowrap;\n        background: var(--surface-inverted);\n        border-radius: var(--radius-input);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 150ms var(--easing-standard);\n      }\n\n      .bubble.visible {\n        opacity: 1;\n      }\n\n      .top {\n        bottom: calc(100% + 6px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      .bottom {\n        top: calc(100% + 6px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      .left {\n        top: 50%;\n        right: calc(100% + 6px);\n        transform: translateY(-50%);\n      }\n      .right {\n        top: 50%;\n        left: calc(100% + 6px);\n        transform: translateY(-50%);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .bubble {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  private readonly descriptionId = uniqueId('kt-tooltip');\n  private description: HTMLElement | undefined;\n\n  @state()\n  private visible = false;\n\n  @property({ type: String })\n  text = '';\n\n  @property({ type: String, reflect: true })\n  placement: KtTooltipPlacement = 'top';\n\n  /** Suppresses the tooltip without removing it from the markup. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerenter', this.show);\n    this.addEventListener('pointerleave', this.hide);\n    this.addEventListener('focusin', this.show);\n    this.addEventListener('focusout', this.hide);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerenter', this.show);\n    this.removeEventListener('pointerleave', this.hide);\n    this.removeEventListener('focusin', this.show);\n    this.removeEventListener('focusout', this.hide);\n    this.removeEventListener('keydown', this.onKeyDown);\n    this.description?.remove();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('text')) this.syncDescription();\n  }\n\n  /**\n   * `aria-describedby` cannot reach across a shadow boundary: an id inside this\n   * element's shadow root is invisible to a trigger sitting in the light DOM.\n   *\n   * So the description also exists as a light-DOM node, addressed to a slot\n   * that does not exist — which keeps it out of the rendered output while\n   * leaving it referenceable, since an explicit aria-describedby target is read\n   * even when it is not displayed.\n   */\n  private syncDescription(): void {\n    if (!this.text) {\n      this.description?.remove();\n      this.description = undefined;\n      return;\n    }\n\n    if (!this.description) {\n      this.description = document.createElement('span');\n      this.description.id = this.descriptionId;\n      this.description.slot = DESCRIPTION_SLOT;\n      this.append(this.description);\n    }\n    this.description.textContent = this.text;\n\n    for (const trigger of this.children) {\n      if (trigger !== this.description)\n        trigger.setAttribute('aria-describedby', this.descriptionId);\n    }\n  }\n\n  private show = (): void => {\n    if (!this.disabled && this.text) this.visible = true;\n  };\n\n  private hide = (): void => {\n    this.visible = false;\n  };\n\n  /** WCAG 1.4.13: a pointer-triggered overlay must be dismissible from the keyboard. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.visible) {\n      event.stopPropagation();\n      this.visible = false;\n    }\n  };\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=${this.syncDescription}></slot>\n      <span\n        part=\"bubble\"\n        class=${classMap({ bubble: true, [this.placement]: true, visible: this.visible })}\n        role=\"tooltip\"\n        aria-hidden=${this.visible ? 'false' : 'true'}\n        >${this.text}</span\n      >`;\n  }\n}\n\ndefineElement('kt-tooltip', KtTooltip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-tooltip': KtTooltip;\n  }\n}\n"],"names":["DESCRIPTION_SLOT","KtTooltip","KtElement","uniqueId","event","css","changed","trigger","html","classMap","__decorateClass","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-tooltip.js","sources":["../../../../src/components/feedback/kt-tooltip/kt-tooltip.ts"],"sourcesContent":["import { css, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { uniqueId } from '#internal/events';\nimport { placeFloating } from '#internal/position';\n\nexport type KtTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Marks the description node so it is never assigned to the default slot. */\nconst DESCRIPTION_SLOT = 'kt-tooltip-description';\n\n/**\n * A short label that appears on hover or focus.\n *\n * Wrap the thing it describes:\n *\n * ```html\n * <kt-tooltip text=\"Refresh the data\">\n *   <kt-button icon=\"refresh-cw\" label=\"Refresh\"></kt-button>\n * </kt-tooltip>\n * ```\n *\n * A tooltip is a *description*, never the only name of a control. If the\n * trigger has no visible text, give it its own `label` too — a tooltip that has\n * to be hovered to be read leaves touch and screen-reader users with nothing.\n *\n * @element kt-tooltip\n *\n * @slot - The trigger.\n *\n * @csspart bubble - The tooltip bubble.\n */\nexport class KtTooltip extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      /* A popover in the top layer, placed in viewport coordinates from\n         the trigger: no ancestor's overflow can clip it, and it takes no\n         room in the page — a bubble by the right edge used to widen the\n         document. */\n      .bubble {\n        position: fixed;\n        inset: auto;\n        z-index: var(--z-tooltip);\n        max-width: 260px;\n        margin: 0;\n        padding: var(--padding-chip);\n        overflow: visible;\n        /* Inverted against the page, so the bubble reads as floating in\n           both themes — the raw ramp step this used to name is pure white\n           under data-theme=\"light\". */\n        color: var(--text-inverted);\n        font: var(--font-code-regular);\n        /* As wide as a short label, and wrapped at max-width for a sentence:\n           a positioned box beside a small trigger would otherwise shrink to\n           one word per line. */\n        width: max-content;\n        overflow-wrap: anywhere;\n        background: var(--surface-inverted);\n        border: none;\n        border-radius: var(--radius-input);\n        display: none;\n        opacity: 0;\n        pointer-events: none;\n        /* The discrete display and overlay transitions keep the fade-out\n           once the popover closes. */\n        transition:\n          opacity var(--duration-fast) var(--easing-standard),\n          display var(--duration-fast) allow-discrete,\n          overlay var(--duration-fast) allow-discrete;\n      }\n\n      .bubble:popover-open {\n        display: block;\n      }\n\n      .bubble.visible {\n        opacity: 1;\n      }\n\n      @starting-style {\n        .bubble.visible {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .bubble {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  private readonly descriptionId = uniqueId('kt-tooltip');\n  private description: HTMLElement | undefined;\n\n  @state()\n  private visible = false;\n\n  @query('.bubble')\n  private bubble!: HTMLElement;\n\n  @property({ type: String })\n  text = '';\n\n  /**\n   * The side the bubble prefers. It takes the opposite one when this one has\n   * no room — \"top\" on a trigger at the top of the page shows below it.\n   */\n  @property({ type: String, reflect: true })\n  placement: KtTooltipPlacement = 'top';\n\n  /**\n   * Shows the bubble whatever the pointer and focus do — for a trigger that\n   * cannot take focus itself, like an icon beside a field, whose owner shows\n   * it while the field is focused.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Suppresses the tooltip without removing it from the markup. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerenter', this.show);\n    this.addEventListener('pointerleave', this.hide);\n    this.addEventListener('focusin', this.show);\n    this.addEventListener('focusout', this.hide);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerenter', this.show);\n    this.removeEventListener('pointerleave', this.hide);\n    this.removeEventListener('focusin', this.show);\n    this.removeEventListener('focusout', this.hide);\n    this.removeEventListener('keydown', this.onKeyDown);\n    this.description?.remove();\n    this.visible = false;\n    this.closeBubble();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('text')) this.syncDescription();\n  }\n\n  /** Hovered, focused or held open — and something to say. */\n  private get shown(): boolean {\n    return (this.visible || this.open) && !this.disabled && Boolean(this.text);\n  }\n\n  // Untyped: `visible` is private, so not among the keys PropertyValues<this> knows.\n  override updated(changed: PropertyValues): void {\n    if (!['visible', 'open', 'text', 'disabled'].some((key) => changed.has(key))) return;\n    if (this.shown) this.openBubble();\n    else this.closeBubble();\n  }\n\n  /**\n   * Opens the bubble in the top layer, then places it: it has to be open to be\n   * measured. Where popovers are missing — a test DOM — it stays in place.\n   */\n  private openBubble(): void {\n    const bubble = this.bubble;\n    if (typeof bubble.showPopover !== 'function') return;\n    if (!bubble.matches(':popover-open')) bubble.showPopover();\n\n    const anchor = this.getBoundingClientRect();\n    const { x, y } = placeFloating(\n      anchor,\n      bubble.getBoundingClientRect(),\n      { width: window.innerWidth, height: window.innerHeight },\n      this.placement,\n    );\n    bubble.style.left = `${x}px`;\n    bubble.style.top = `${y}px`;\n    // Fixed to the viewport, the bubble would drift from its trigger.\n    window.addEventListener('scroll', this.hide, { capture: true, passive: true });\n    window.addEventListener('resize', this.hide);\n  }\n\n  private closeBubble(): void {\n    window.removeEventListener('scroll', this.hide, { capture: true });\n    window.removeEventListener('resize', this.hide);\n    const bubble = this.bubble;\n    if (typeof bubble?.hidePopover === 'function' && bubble.matches(':popover-open')) {\n      bubble.hidePopover();\n    }\n  }\n\n  /**\n   * `aria-describedby` cannot reach across a shadow boundary: an id inside this\n   * element's shadow root is invisible to a trigger sitting in the light DOM.\n   *\n   * So the description also exists as a light-DOM node, addressed to a slot\n   * that does not exist — which keeps it out of the rendered output while\n   * leaving it referenceable, since an explicit aria-describedby target is read\n   * even when it is not displayed.\n   */\n  private syncDescription(): void {\n    if (!this.text) {\n      this.description?.remove();\n      this.description = undefined;\n      return;\n    }\n\n    if (!this.description) {\n      this.description = document.createElement('span');\n      this.description.id = this.descriptionId;\n      this.description.slot = DESCRIPTION_SLOT;\n      this.append(this.description);\n    }\n    this.description.textContent = this.text;\n\n    for (const trigger of this.children) {\n      if (trigger !== this.description)\n        trigger.setAttribute('aria-describedby', this.descriptionId);\n    }\n  }\n\n  private show = (): void => {\n    if (!this.disabled && this.text) this.visible = true;\n  };\n\n  private hide = (): void => {\n    this.visible = false;\n  };\n\n  /** WCAG 1.4.13: a pointer-triggered overlay must be dismissible from the keyboard. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.visible) {\n      event.stopPropagation();\n      this.visible = false;\n    }\n  };\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=${this.syncDescription}></slot>\n      <span\n        part=\"bubble\"\n        popover=\"manual\"\n        class=${classMap({ bubble: true, visible: this.shown })}\n        role=\"tooltip\"\n        aria-hidden=${this.shown ? 'false' : 'true'}\n        >${this.text}</span\n      >`;\n  }\n}\n\ndefineElement('kt-tooltip', KtTooltip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-tooltip': KtTooltip;\n  }\n}\n"],"names":["DESCRIPTION_SLOT","KtTooltip","KtElement","uniqueId","event","css","changed","key","bubble","anchor","x","y","placeFloating","trigger","html","classMap","__decorateClass","state","query","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtCalendarView = 'day' | 'month' | 'year';
+/**
+ * A month calendar to pick a day or a period from, shown in the page.
+ *
+ * The same calendar `<kt-date-picker>` opens in its popup, for when the
+ * calendar is the interface rather than a way to fill a field: a booking
+ * page, a dashboard's date filter, a planning view.
+ *
+ * The header's month and year are buttons. The month opens a grid of the
+ * twelve months, the year a grid of twelve years, so reaching a date years
+ * away takes three clicks rather than paging month by month.
+ *
+ * Keyboard, in the day grid (the WAI-ARIA date grid pattern): arrows by day
+ * and week, Home/End to the week's ends, Page Up/Down by month and with Shift
+ * by year, Enter to choose. In the month and year grids: arrows, Page Up/Down
+ * by year or by twelve years, Enter to choose, Escape back to the days.
+ *
+ * @element kt-calendar
+ *
+ * @csspart base - The calendar.
+ * @csspart day - A day cell.
+ *
+ * @fires kt-change - A day, or a whole period, was chosen. `detail: { value }`.
+ *
+ * @example
+ * ```html
+ * <kt-calendar value="2026-09-25"></kt-calendar>
+ * <kt-calendar range value="2026-09-01/2026-09-25" min="2026-01-01"></kt-calendar>
+ * ```
+ */
+export declare class KtCalendar extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private readonly liveId;
+    private focusCell;
+    /** Set while the calendar writes its own value, which should not move it. */
+    private committing;
+    private view;
+    /** First day of the month the day view shows. */
+    private month;
+    /** The day, month or year holding the grid's one tab stop. */
+    private focused;
+    /** In a period: the first end chosen, while the second is pending. */
+    private anchor;
+    /** ISO date, or `start/end` interval with `range`. `null` when empty. */
+    value: string | null;
+    /** Choose a period — two dates — instead of one day. */
+    range: boolean;
+    /** Earliest date that can be chosen, ISO. */
+    min: string;
+    /** Latest date that can be chosen, ISO. */
+    max: string;
+    /**
+     * BCP 47 language tag for names and the first day of the week. Empty: the
+     * page's `lang`, then the browser's language.
+     */
+    locale: string;
+    /** Accessible name of the calendar. Defaults to the strings registry. */
+    label: string;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(): void;
+    /** Focuses the grid's current cell — the chosen day, or today. */
+    focus(): void;
+    private get resolvedLocale();
+    private get selection();
+    private get bounds();
+    private clamp;
+    private isOutOfBounds;
+    /** A month or a year is unavailable only when every day of it is. */
+    private isSpanOutOfBounds;
+    private format;
+    /** Moves the tab stop, and the day view with it when it leaves the month. */
+    private jumpTo;
+    private setView;
+    private chooseDay;
+    private commit;
+    private chooseMonth;
+    private chooseYear;
+    private onDayKeyDown;
+    /** Months and years share one model: a list of cells, three to a row. */
+    private onPickerKeyDown;
+    private renderHeader;
+    private renderDay;
+    private renderDays;
+    /** The month or year grid: twelve cells, three to a row. */
+    private renderPicker;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-calendar': KtCalendar;
+    }
+}

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

@@ -0,0 +1,13 @@
+import "lit";
+import "lit/decorators.js";
+import "lit/directives/class-map.js";
+import "../../../chunks/kt-element-Djx2JcGl.js";
+import "../../../chunks/events-r51msXNf.js";
+import "../../../chunks/locale-C5xLkGx5.js";
+import "../../../chunks/index-STEEvEP7.js";
+import { K as f } from "../../../chunks/kt-calendar-B_hFdD9V.js";
+import "../../core/kt-icon/kt-icon.js";
+export {
+  f as KtCalendar
+};
+//# sourceMappingURL=kt-calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-calendar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -42,6 +42,10 @@ export declare class KtCheckbox extends KtElement {
      */
     indeterminate: boolean;
     disabled: boolean;
+    /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */
+    private formDisabled;
+    /** Whether the control is off, by its own `disabled` or by its form. */
+    private get inactive();
     required: boolean;
     size: KtCheckboxSize;
     name: string;
@@ -54,6 +58,11 @@ export declare class KtCheckbox extends KtElement {
     connectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
     formResetCallback(): void;
+    /**
+     * Called by the platform when the control's disabled state changes — its
+     * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+     */
+    formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: string | null): void;
     focus(options?: FocusOptions): void;
     private onChange;

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

@@ -1,19 +1,19 @@
 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 { query as b, property as i, state as u } from "lit/decorators.js";
+import { live as m } from "lit/directives/live.js";
+import { K as d, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as k } from "../../../chunks/events-r51msXNf.js";
+import { a as v, s as g, b as y } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as x } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
-var x = Object.defineProperty, r = (l, e, o, C) => {
+var C = Object.defineProperty, r = (l, e, o, $) => {
   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;
+  return s && C(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 = "";
+    super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.formDisabled = !1, this.required = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "", this.error = "";
   }
   static {
     this.formAssociated = !0;
@@ -98,11 +98,11 @@ class t extends d {
         border-color: var(--color-danger-base);
       }
 
-      :host([disabled]) label {
+      :host(:disabled) label {
         color: var(--text-disabled);
         cursor: not-allowed;
       }
-      :host([disabled]) .box {
+      :host(:disabled) .box {
         background-color: var(--color-dark-22);
         border-color: var(--color-dark-24);
         color: var(--text-disabled);
@@ -110,23 +110,34 @@ class t extends d {
     `
     ];
   }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= k(this), this.defaultChecked = this.checked;
+    super.connectedCallback(), this.internals ??= v(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);
+      g(this.internals, this.checked ? this.value : null);
       const o = this.required && !this.checked;
-      g(
+      y(
         this.internals,
         { valueMissing: o, customError: !!this.error },
-        this.error || (o ? y().checkRequired : "")
+        this.error || (o ? x().checkRequired : "")
       );
     }
   }
   formResetCallback() {
     this.checked = this.defaultChecked, this.indeterminate = !1;
   }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(e) {
+    this.formDisabled = e;
+  }
   formStateRestoreCallback(e) {
     this.checked = e === this.value;
   }
@@ -135,7 +146,7 @@ class t extends d {
   }
   onChange(e) {
     const o = e.target;
-    this.checked = o.checked, this.indeterminate = !1, f(this, "kt-change", { checked: this.checked });
+    this.checked = o.checked, this.indeterminate = !1, k(this, "kt-change", { checked: this.checked });
   }
   render() {
     const e = this.indeterminate ? "minus" : this.checked ? "check" : "";
@@ -144,9 +155,9 @@ class t extends d {
           <input
             part="input"
             type="checkbox"
-            .checked=${b(this.checked)}
+            .checked=${m(this.checked)}
             .indeterminate=${this.indeterminate}
-            ?disabled=${this.disabled}
+            ?disabled=${this.inactive}
             ?required=${this.required}
             aria-label=${this.label || a}
             aria-invalid=${this.error ? "true" : a}
@@ -162,7 +173,7 @@ class t extends d {
   }
 }
 r([
-  u("input")
+  b("input")
 ], t.prototype, "input");
 r([
   i({ type: Boolean, reflect: !0 })
@@ -173,6 +184,9 @@ r([
 r([
   i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled");
+r([
+  u()
+], t.prototype, "formDisabled");
 r([
   i({ type: Boolean, reflect: !0 })
 ], t.prototype, "required");
@@ -191,7 +205,7 @@ r([
 r([
   i({ type: String, reflect: !0 })
 ], t.prototype, "error");
-m("kt-checkbox", t);
+f("kt-checkbox", t);
 export {
   t as KtCheckbox
 };

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

@@ -1 +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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"}
+{"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, state } 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  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\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  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\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.inactive}\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","disabled","state","options","event","input","emit","icon","html","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}