kanto-ds 1.4.0 → 1.5.2

package/dist/components/forms/kt-date-picker/kt-date-picker.d.ts

@@ -0,0 +1,105 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-calendar/kt-calendar.js';
+import '../../core/kt-icon/kt-icon.js';
+export type KtDatePickerSize = 'small' | 'medium' | 'large';
+/**
+ * A date field with a calendar, for one day or a period.
+ *
+ * The value is ISO 8601 text, the format a server and a `<input type="date">`
+ * already speak: `2026-09-25`, or `2026-09-01/2026-09-25` for a period. What
+ * the field shows is the same date formatted for the reader's language, and
+ * the calendar starts its weeks on the day their region does.
+ *
+ * The popup is a `<kt-calendar>`, with its keyboard model and its month and
+ * year views: the WAI-ARIA date picker dialog pattern, where Escape closes the
+ * dialog and hands focus back to the field, and tabbing out closes it too.
+ *
+ * @element kt-date-picker
+ *
+ * @csspart trigger - The field.
+ * @csspart panel - The calendar popup.
+ * @csspart calendar - The `<kt-calendar>` inside it.
+ *
+ * @fires kt-change - A date or a whole period was chosen, or the value cleared.
+ *   `detail: { value }` — the ISO date or interval, or `null`.
+ *
+ * @example
+ * ```html
+ * <kt-date-picker label="Due date" name="due" min="2026-01-01"></kt-date-picker>
+ * <kt-date-picker range label="Report period" value="2026-09-01/2026-09-25"></kt-date-picker>
+ * ```
+ */
+export declare class KtDatePicker extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private trigger?;
+    private calendar?;
+    private internals;
+    private defaultValue;
+    private readonly panelId;
+    private open;
+    private placement;
+    private floating;
+    /** 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;
+    name: string;
+    /** Accessible name, when no `<kt-label-input>` wraps the field. */
+    label: string;
+    /** Shown while empty. Defaults to the strings registry. */
+    placeholder: string | undefined;
+    /**
+     * BCP 47 language tag for formatting and for the first day of the week.
+     * Empty: the page's `lang`, then the browser's language.
+     */
+    locale: string;
+    size: KtDatePickerSize;
+    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;
+    /** Shows a button that empties the field once it holds a value. */
+    clearable: boolean;
+    /** Error message. A non-empty value puts the field in its error state. */
+    error: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): 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 get resolvedLocale();
+    private get selection();
+    private isComplete;
+    private display;
+    private onDocumentPointerDown;
+    /** Tabbing out of the calendar closes it; moving within it does not. */
+    private onFocusOut;
+    private show;
+    private close;
+    private toggle;
+    private onCalendarChange;
+    private clear;
+    private onTriggerKeyDown;
+    private onPanelKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-date-picker': KtDatePicker;
+    }
+}

package/dist/components/forms/kt-date-picker/kt-date-picker.js

@@ -0,0 +1,382 @@
+import { css as w, nothing as n, html as d } from "lit";
+import { query as k, state as g, property as o } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { K as m, d as $ } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { u as x, t as v, e as b } from "../../../chunks/events-r51msXNf.js";
+import { a as D, s as C, b as P } from "../../../chunks/form-control-B74_EHtG.js";
+import { F as S, f as R } from "../../../chunks/floating-B7_Dahpn.js";
+import { r as q, d as z } from "../../../chunks/locale-C5xLkGx5.js";
+import { s as l } from "../../../chunks/index-STEEvEP7.js";
+import { p as F, a as y, c as K, t as u } from "../../../chunks/kt-calendar-B_hFdD9V.js";
+import "../../core/kt-icon/kt-icon.js";
+var B = Object.defineProperty, a = (p, e, t, i) => {
+  for (var s = void 0, c = p.length - 1, f; c >= 0; c--)
+    (f = p[c]) && (s = f(e, t, s) || s);
+  return s && B(e, t, s), s;
+};
+class r extends m {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.panelId = x("kt-date-picker-panel"), this.open = !1, this.placement = "bottom", this.floating = new S(this, {
+      panel: () => this.shadowRoot?.querySelector(".panel"),
+      anchor: () => this.shadowRoot?.querySelector(".trigger"),
+      onPlace: (e) => {
+        this.placement = e === "top" ? "top" : "bottom";
+      }
+    }), this.value = null, this.range = !1, this.min = "", this.max = "", this.name = "", this.label = "", this.placeholder = void 0, this.locale = "", this.size = "medium", this.disabled = !1, this.formDisabled = !1, this.required = !1, this.clearable = !0, this.error = "", this.onDocumentPointerDown = (e) => {
+      this.open && !e.composedPath().includes(this) && this.close(!1);
+    }, this.onFocusOut = (e) => {
+      const t = e.relatedTarget;
+      !this.open || !t || this.contains(t) || this.shadowRoot?.contains(t) || e.composedPath().includes(t) || this.calendar?.shadowRoot?.contains(t) || this.close(!1);
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      m.styles,
+      R,
+      w`
+      :host {
+        position: relative;
+        display: block;
+        --field-height: var(--button-height);
+        --day-size: 36px;
+      }
+      :host([size='small']) {
+        --field-height: var(--button-height-small);
+      }
+      :host([size='large']) {
+        --field-height: var(--button-height-large);
+      }
+
+      .field {
+        position: relative;
+      }
+
+      .trigger {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: var(--gap-element);
+        width: 100%;
+        height: var(--field-height);
+        padding: 0 var(--button-padding-x);
+        color: var(--text-body);
+        font: var(--font-input);
+        text-align: left;
+        background-color: var(--color-dark-20);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-input);
+        outline: var(--outline-width) solid transparent;
+        cursor: pointer;
+        transition:
+          background-color var(--duration-instant),
+          outline-color var(--duration-instant);
+      }
+      .trigger:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .trigger:focus-visible,
+      .open .trigger {
+        background-color: var(--color-dark-12);
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+      .error .trigger,
+      .error .trigger:hover {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+      :host(:disabled) .trigger {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+        cursor: not-allowed;
+      }
+
+      .value {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .placeholder {
+        color: var(--text-muted);
+      }
+
+      .icons {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--gap-element);
+        color: var(--text-muted);
+      }
+      /* Room for the clear button, which sits over the field, not inside the
+         trigger: a button inside a button is not a thing assistive
+         technology can operate. */
+      .clearable .icons {
+        padding-left: calc(18px + var(--gap-element));
+      }
+      .clear {
+        position: absolute;
+        top: 50%;
+        /* Just left of the calendar icon, in the room .icons keeps for it. */
+        right: calc(var(--button-padding-x) + 18px + var(--gap-element));
+        display: inline-flex;
+        padding: 0;
+        color: var(--text-muted);
+        background: none;
+        border: none;
+        border-radius: var(--radius-sub-menu);
+        cursor: pointer;
+        transform: translateY(-50%);
+      }
+      .clear:hover {
+        color: var(--text-body);
+      }
+      .clear:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      /* Placed from the field by FloatingController. */
+      .panel {
+        box-sizing: border-box;
+        padding: var(--padding-expand);
+        background: var(--color-dark-20);
+        border-radius: var(--radius-input);
+
+        visibility: hidden;
+        opacity: 0;
+        transform: translateY(-6px);
+        pointer-events: none;
+        transition:
+          opacity var(--duration-fast) var(--easing-standard),
+          transform var(--duration-fast) var(--easing-standard),
+          visibility 0s linear var(--duration-fast);
+      }
+      .panel.top:not(.open) {
+        transform: translateY(6px);
+      }
+      .panel.open {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+        transition:
+          opacity var(--duration-fast) var(--easing-standard),
+          transform var(--duration-fast) var(--easing-standard);
+      }
+
+      .panel kt-calendar {
+        display: block;
+      }
+    `
+    ];
+  }
+  /** 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 ??= D(this), this.defaultValue = this.value, v(this.open, document, "pointerdown", this.onDocumentPointerDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
+  }
+  // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.
+  updated(e) {
+    e.has("open") && v(this.open, document, "pointerdown", this.onDocumentPointerDown), this.floating.sync(this.open);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("range") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      const t = this.isComplete();
+      C(this.internals, t ? this.value : null);
+      const i = this.required && !t;
+      P(
+        this.internals,
+        { valueMissing: i, customError: !!this.error },
+        this.error || (i ? l().dateRequired : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue, this.close(!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.value = e;
+  }
+  focus(e) {
+    this.trigger?.focus(e);
+  }
+  // --- Reading the value ---
+  get resolvedLocale() {
+    return q(this.locale);
+  }
+  get selection() {
+    return this.range ? F(this.value) : { start: y(this.value), end: y(this.value) };
+  }
+  isComplete() {
+    const { start: e, end: t } = this.selection;
+    return e !== null && t !== null && K(e, t) <= 0;
+  }
+  display() {
+    const { start: e, end: t } = this.selection;
+    if (!e || !t) return null;
+    const i = z(this.resolvedLocale, { dateStyle: "medium" });
+    return this.range ? i.formatRange(u(e), u(t)) : i.format(u(e));
+  }
+  async show() {
+    this.inactive || this.open || (this.open = !0, await this.updateComplete, this.calendar?.focus());
+  }
+  close(e) {
+    this.open && (this.open = !1, e && this.focus());
+  }
+  toggle() {
+    this.open ? this.close(!1) : this.show();
+  }
+  // --- Choosing ---
+  onCalendarChange(e) {
+    e.stopPropagation(), this.value = e.detail.value, this.close(!0), b(this, "kt-change", { value: this.value });
+  }
+  clear() {
+    this.value = null, b(this, "kt-change", { value: null }), this.focus();
+  }
+  // --- Keyboard ---
+  onTriggerKeyDown(e) {
+    (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show());
+  }
+  onPanelKeyDown(e) {
+    e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.close(!0));
+  }
+  // --- Rendering ---
+  render() {
+    const e = this.display(), t = this.placeholder ?? (this.range ? l().selectPeriod : l().selectDate), i = this.clearable && this.value !== null && !this.inactive;
+    return d`${this.error ? d`<span id="error-message" class="visually-hidden">${this.error}</span>` : n}
+      <div
+        class=${h({
+      field: !0,
+      open: this.open,
+      error: !!this.error,
+      clearable: i
+    })}
+        @focusout=${this.onFocusOut}
+      >
+        <button
+          part="trigger"
+          type="button"
+          class="trigger"
+          aria-haspopup="dialog"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.panelId}
+          aria-label=${this.label ? `${this.label}${e ? `, ${e}` : ""}` : n}
+          aria-invalid=${this.error ? "true" : n}
+          aria-describedby=${this.error ? "error-message" : n}
+          ?disabled=${this.inactive}
+          @click=${this.toggle}
+          @keydown=${this.onTriggerKeyDown}
+        >
+          <span class=${h({ value: !0, placeholder: !e })}>
+            ${e ?? t}
+          </span>
+          <span class="icons"><kt-icon name="calendar" size="18"></kt-icon></span>
+        </button>
+        ${i ? d`<button
+                type="button"
+                class="clear"
+                aria-label=${l().clear}
+                @click=${this.clear}
+              >
+                <kt-icon name="x" size="18"></kt-icon>
+              </button>` : n}
+
+        <div
+          part="panel"
+          id=${this.panelId}
+          popover="manual"
+          class=${h({
+      panel: !0,
+      floating: !0,
+      open: this.open,
+      top: this.placement === "top"
+    })}
+          role="dialog"
+          aria-modal="false"
+          aria-label=${this.range ? l().selectPeriod : l().selectDate}
+          @keydown=${this.onPanelKeyDown}
+        >
+          ${this.open ? d`<kt-calendar
+                  part="calendar"
+                  .value=${this.value}
+                  ?range=${this.range}
+                  min=${this.min}
+                  max=${this.max}
+                  locale=${this.locale}
+                  label=${this.label}
+                  @kt-change=${this.onCalendarChange}
+                ></kt-calendar>` : n}
+        </div>
+      </div>`;
+  }
+}
+a([
+  k(".trigger")
+], r.prototype, "trigger");
+a([
+  k("kt-calendar")
+], r.prototype, "calendar");
+a([
+  g()
+], r.prototype, "open");
+a([
+  g()
+], r.prototype, "placement");
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "value");
+a([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "range");
+a([
+  o({ type: String })
+], r.prototype, "min");
+a([
+  o({ type: String })
+], r.prototype, "max");
+a([
+  o({ type: String })
+], r.prototype, "name");
+a([
+  o({ type: String })
+], r.prototype, "label");
+a([
+  o({ type: String })
+], r.prototype, "placeholder");
+a([
+  o({ type: String })
+], r.prototype, "locale");
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "size");
+a([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+a([
+  g()
+], r.prototype, "formDisabled");
+a([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "required");
+a([
+  o({ type: Boolean })
+], r.prototype, "clearable");
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "error");
+$("kt-date-picker", r);
+export {
+  r as KtDatePicker
+};
+//# sourceMappingURL=kt-date-picker.js.map

package/dist/components/forms/kt-date-picker/kt-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-date-picker.js","sources":["../../../../src/components/forms/kt-date-picker/kt-date-picker.ts"],"sourcesContent":["import { css, html, nothing, 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 { emit, toggleListener, uniqueId } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport { dateFormat, resolveLocale } from '#internal/locale';\nimport { strings } from '#internal/strings';\nimport { compareDates, parseDate, parseRange, toLocalDate, type PlainDate } from '#internal/date';\nimport '../kt-calendar/kt-calendar.js';\nimport type { KtCalendar } from '../kt-calendar/kt-calendar.js';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtDatePickerSize = 'small' | 'medium' | 'large';\n\n/**\n * A date field with a calendar, for one day or a period.\n *\n * The value is ISO 8601 text, the format a server and a `<input type=\"date\">`\n * already speak: `2026-09-25`, or `2026-09-01/2026-09-25` for a period. What\n * the field shows is the same date formatted for the reader's language, and\n * the calendar starts its weeks on the day their region does.\n *\n * The popup is a `<kt-calendar>`, with its keyboard model and its month and\n * year views: the WAI-ARIA date picker dialog pattern, where Escape closes the\n * dialog and hands focus back to the field, and tabbing out closes it too.\n *\n * @element kt-date-picker\n *\n * @csspart trigger - The field.\n * @csspart panel - The calendar popup.\n * @csspart calendar - The `<kt-calendar>` inside it.\n *\n * @fires kt-change - A date or a whole period was chosen, or the value cleared.\n *   `detail: { value }` — the ISO date or interval, or `null`.\n *\n * @example\n * ```html\n * <kt-date-picker label=\"Due date\" name=\"due\" min=\"2026-01-01\"></kt-date-picker>\n * <kt-date-picker range label=\"Report period\" value=\"2026-09-01/2026-09-25\"></kt-date-picker>\n * ```\n */\nexport class KtDatePicker extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    floatingStyles,\n    css`\n      :host {\n        position: relative;\n        display: block;\n        --field-height: var(--button-height);\n        --day-size: 36px;\n      }\n      :host([size='small']) {\n        --field-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --field-height: var(--button-height-large);\n      }\n\n      .field {\n        position: relative;\n      }\n\n      .trigger {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        align-items: center;\n        gap: var(--gap-element);\n        width: 100%;\n        height: var(--field-height);\n        padding: 0 var(--button-padding-x);\n        color: var(--text-body);\n        font: var(--font-input);\n        text-align: left;\n        background-color: var(--color-dark-20);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-input);\n        outline: var(--outline-width) solid transparent;\n        cursor: pointer;\n        transition:\n          background-color var(--duration-instant),\n          outline-color var(--duration-instant);\n      }\n      .trigger:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .trigger:focus-visible,\n      .open .trigger {\n        background-color: var(--color-dark-12);\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n      .error .trigger,\n      .error .trigger:hover {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      :host(:disabled) .trigger {\n        color: var(--text-disabled);\n        background-color: var(--color-dark-14);\n        cursor: not-allowed;\n      }\n\n      .value {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n      .placeholder {\n        color: var(--text-muted);\n      }\n\n      .icons {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-element);\n        color: var(--text-muted);\n      }\n      /* Room for the clear button, which sits over the field, not inside the\n         trigger: a button inside a button is not a thing assistive\n         technology can operate. */\n      .clearable .icons {\n        padding-left: calc(18px + var(--gap-element));\n      }\n      .clear {\n        position: absolute;\n        top: 50%;\n        /* Just left of the calendar icon, in the room .icons keeps for it. */\n        right: calc(var(--button-padding-x) + 18px + var(--gap-element));\n        display: inline-flex;\n        padding: 0;\n        color: var(--text-muted);\n        background: none;\n        border: none;\n        border-radius: var(--radius-sub-menu);\n        cursor: pointer;\n        transform: translateY(-50%);\n      }\n      .clear:hover {\n        color: var(--text-body);\n      }\n      .clear:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      /* Placed from the field by FloatingController. */\n      .panel {\n        box-sizing: border-box;\n        padding: var(--padding-expand);\n        background: var(--color-dark-20);\n        border-radius: var(--radius-input);\n\n        visibility: hidden;\n        opacity: 0;\n        transform: translateY(-6px);\n        pointer-events: none;\n        transition:\n          opacity var(--duration-fast) var(--easing-standard),\n          transform var(--duration-fast) var(--easing-standard),\n          visibility 0s linear var(--duration-fast);\n      }\n      .panel.top:not(.open) {\n        transform: translateY(6px);\n      }\n      .panel.open {\n        visibility: visible;\n        opacity: 1;\n        transform: translateY(0);\n        pointer-events: auto;\n        transition:\n          opacity var(--duration-fast) var(--easing-standard),\n          transform var(--duration-fast) var(--easing-standard);\n      }\n\n      .panel kt-calendar {\n        display: block;\n      }\n    `,\n  ];\n\n  @query('.trigger')\n  private trigger?: HTMLButtonElement;\n\n  @query('kt-calendar')\n  private calendar?: KtCalendar;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | null = null;\n  private readonly panelId = uniqueId('kt-date-picker-panel');\n\n  @state() private open = false;\n  @state() private placement: 'bottom' | 'top' = 'bottom';\n\n  private floating = new FloatingController(this, {\n    panel: () => this.shadowRoot?.querySelector<HTMLElement>('.panel'),\n    anchor: () => this.shadowRoot?.querySelector('.trigger'),\n    onPlace: (side) => {\n      this.placement = side === 'top' ? 'top' : 'bottom';\n    },\n  });\n\n  /** ISO date, or `start/end` interval with `range`. `null` when empty. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  /** Choose a period — two dates — instead of one day. */\n  @property({ type: Boolean, reflect: true })\n  range = false;\n\n  /** Earliest date that can be chosen, ISO. */\n  @property({ type: String })\n  min = '';\n\n  /** Latest date that can be chosen, ISO. */\n  @property({ type: String })\n  max = '';\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name, when no `<kt-label-input>` wraps the field. */\n  @property({ type: String })\n  label = '';\n\n  /** Shown while empty. Defaults to the strings registry. */\n  @property({ type: String })\n  placeholder: string | undefined = undefined;\n\n  /**\n   * BCP 47 language tag for formatting and for the first day of the week.\n   * Empty: the page's `lang`, then the browser's language.\n   */\n  @property({ type: String })\n  locale = '';\n\n  @property({ type: String, reflect: true })\n  size: KtDatePickerSize = 'medium';\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  /** Shows a button that empties the field once it holds a value. */\n  @property({ type: Boolean })\n  clearable = true;\n\n  /** Error message. A non-empty value puts the field in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    // Back on the document if it was reconnected while open.\n    toggleListener(this.open, document, 'pointerdown', this.onDocumentPointerDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.\n  override updated(changed: PropertyValues): void {\n    // Only an open list closes on an outside click, so only an open one listens.\n    if (changed.has('open')) {\n      toggleListener(this.open, document, 'pointerdown', this.onDocumentPointerDown);\n    }\n    this.floating.sync(this.open);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('range') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      const complete = this.isComplete();\n      setFormValue(this.internals, complete ? this.value : null);\n\n      const missing = this.required && !complete;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().dateRequired : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.close(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.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.trigger?.focus(options);\n  }\n\n  // --- Reading the value ---\n\n  private get resolvedLocale(): string {\n    return resolveLocale(this.locale);\n  }\n\n  private get selection(): { start: PlainDate | null; end: PlainDate | null } {\n    return this.range\n      ? parseRange(this.value)\n      : { start: parseDate(this.value), end: parseDate(this.value) };\n  }\n\n  private isComplete(): boolean {\n    const { start, end } = this.selection;\n    return start !== null && end !== null && compareDates(start, end) <= 0;\n  }\n\n  private display(): string | null {\n    const { start, end } = this.selection;\n    if (!start || !end) return null;\n    const format = dateFormat(this.resolvedLocale, { dateStyle: 'medium' });\n    if (!this.range) return format.format(toLocalDate(start));\n    return format.formatRange(toLocalDate(start), toLocalDate(end));\n  }\n\n  // --- Opening and closing ---\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (this.open && !event.composedPath().includes(this)) this.close(false);\n  };\n\n  /** Tabbing out of the calendar closes it; moving within it does not. */\n  private onFocusOut = (event: FocusEvent): void => {\n    const next = event.relatedTarget as Node | null;\n    if (!this.open || !next) return;\n    if (this.contains(next) || this.shadowRoot?.contains(next)) return;\n    // Focus moving into the calendar's own shadow root is still inside.\n    if (event.composedPath().includes(next)) return;\n    if (this.calendar?.shadowRoot?.contains(next)) return;\n    this.close(false);\n  };\n\n  private async show(): Promise<void> {\n    if (this.inactive || this.open) return;\n    this.open = true;\n\n    // The calendar is rendered fresh on each opening — on the chosen day,\n    // in its day view — and takes focus once it is there.\n    await this.updateComplete;\n    this.calendar?.focus();\n  }\n\n  private close(returnFocus: boolean): void {\n    if (!this.open) return;\n    this.open = false;\n    if (returnFocus) this.focus();\n  }\n\n  private toggle(): void {\n    if (this.open) this.close(false);\n    else void this.show();\n  }\n\n  // --- Choosing ---\n\n  private onCalendarChange(event: CustomEvent<{ value: string }>): void {\n    // The calendar's own event stops here; the picker reports its value.\n    event.stopPropagation();\n    this.value = event.detail.value;\n    this.close(true);\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private clear(): void {\n    this.value = null;\n    emit(this, 'kt-change', { value: null });\n    this.focus();\n  }\n\n  // --- Keyboard ---\n\n  private onTriggerKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      void this.show();\n    }\n  }\n\n  private onPanelKeyDown(event: KeyboardEvent): void {\n    // The calendar keeps Escape for itself while it shows months or years.\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close(true);\n    }\n  }\n\n  // --- Rendering ---\n\n  override render(): TemplateResult {\n    const shown = this.display();\n    const placeholder =\n      this.placeholder ?? (this.range ? strings().selectPeriod : strings().selectDate);\n    const showClear = this.clearable && this.value !== null && !this.inactive;\n\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        class=${classMap({\n          field: true,\n          open: this.open,\n          error: Boolean(this.error),\n          clearable: showClear,\n        })}\n        @focusout=${this.onFocusOut}\n      >\n        <button\n          part=\"trigger\"\n          type=\"button\"\n          class=\"trigger\"\n          aria-haspopup=\"dialog\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=${this.panelId}\n          aria-label=${this.label ? `${this.label}${shown ? `, ${shown}` : ''}` : nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          aria-describedby=${this.error ? 'error-message' : nothing}\n          ?disabled=${this.inactive}\n          @click=${this.toggle}\n          @keydown=${this.onTriggerKeyDown}\n        >\n          <span class=${classMap({ value: true, placeholder: !shown })}>\n            ${shown ?? placeholder}\n          </span>\n          <span class=\"icons\"><kt-icon name=\"calendar\" size=\"18\"></kt-icon></span>\n        </button>\n        ${\n          showClear\n            ? html`<button\n                type=\"button\"\n                class=\"clear\"\n                aria-label=${strings().clear}\n                @click=${this.clear}\n              >\n                <kt-icon name=\"x\" size=\"18\"></kt-icon>\n              </button>`\n            : nothing\n        }\n\n        <div\n          part=\"panel\"\n          id=${this.panelId}\n          popover=\"manual\"\n          class=${classMap({\n            panel: true,\n            floating: true,\n            open: this.open,\n            top: this.placement === 'top',\n          })}\n          role=\"dialog\"\n          aria-modal=\"false\"\n          aria-label=${this.range ? strings().selectPeriod : strings().selectDate}\n          @keydown=${this.onPanelKeyDown}\n        >\n          ${\n            this.open\n              ? html`<kt-calendar\n                  part=\"calendar\"\n                  .value=${this.value}\n                  ?range=${this.range}\n                  min=${this.min}\n                  max=${this.max}\n                  locale=${this.locale}\n                  label=${this.label}\n                  @kt-change=${this.onCalendarChange}\n                ></kt-calendar>`\n              : nothing\n          }\n        </div>\n      </div>`;\n  }\n}\n\ndefineElement('kt-date-picker', KtDatePicker);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-date-picker': KtDatePicker;\n  }\n}\n"],"names":["KtDatePicker","KtElement","uniqueId","FloatingController","side","event","next","floatingStyles","css","attachFormInternals","toggleListener","changed","complete","setFormValue","missing","setValidity","strings","disabled","state","options","resolveLocale","parseRange","parseDate","start","end","compareDates","format","dateFormat","toLocalDate","returnFocus","emit","shown","placeholder","showClear","html","nothing","classMap","__decorateClass","query","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-drag-drop/kt-drag-drop.d.ts

@@ -46,6 +46,10 @@ export declare class KtDragDrop extends KtElement {
     /** Largest accepted file, in bytes. Zero means no limit. */
     maxSize: number;
     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();
     /** The files are submitted under this name, as by `<input type="file">`. */
     name: string;
     required: boolean;
@@ -53,6 +57,11 @@ export declare class KtDragDrop extends KtElement {
     willUpdate(changed: PropertyValues): void;
     private syncFormValue;
     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 | File | FormData | null): void;
     /** The files currently held, newest last. */
     get selectedFiles(): readonly File[];