kanto-ds 1.3.0 → 1.5.1

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-mdd5cXZX.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

@@ -0,0 +1,75 @@
+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;
+    /** 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;
+    /** 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;
+    /**
+     * 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;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-checkbox': KtCheckbox;
+    }
+}

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

@@ -0,0 +1,212 @@
+import { css as p, nothing as a, html as c } from "lit";
+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 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 && 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.formDisabled = !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);
+      }
+    `
+    ];
+  }
+  /** 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 ??= v(this), this.defaultChecked = this.checked;
+  }
+  willUpdate(e) {
+    if (e.has("checked") || e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      g(this.internals, this.checked ? this.value : null);
+      const o = this.required && !this.checked;
+      y(
+        this.internals,
+        { valueMissing: o, customError: !!this.error },
+        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;
+  }
+  focus(e) {
+    this.input?.focus(e);
+  }
+  onChange(e) {
+    const o = e.target;
+    this.checked = o.checked, this.indeterminate = !1, k(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=${m(this.checked)}
+            .indeterminate=${this.indeterminate}
+            ?disabled=${this.inactive}
+            ?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([
+  b("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([
+  u()
+], t.prototype, "formDisabled");
+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");
+f("kt-checkbox", t);
+export {
+  t as KtCheckbox
+};
+//# sourceMappingURL=kt-checkbox.js.map