kanto-ds 1.5.2 → 1.6.0

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

@@ -0,0 +1,241 @@
+import { css as D, nothing as m, html as g } from "lit";
+import { property as w, state as x, query as $ } from "lit/decorators.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { d as P } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { u as S, t as I } from "../../../chunks/events-r51msXNf.js";
+import { F as q, f as E } from "../../../chunks/floating-B33g-M_1.js";
+import { K as f } from "../../../chunks/segmented-field-BBXR4XFL.js";
+import { d as y, p as u, t as v, c as b, f as Y } from "../../../chunks/kt-calendar-CtwOby1R.js";
+import { d as K, e as L, t as M } from "../../../chunks/typed-date-CPAUNHzr.js";
+import { s as l } from "../../../chunks/index-TWJzttLX.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../feedback/kt-tooltip/kt-tooltip.js";
+var N = Object.defineProperty, c = (h, e, t, n) => {
+  for (var a = void 0, o = h.length - 1, i; o >= 0; o--)
+    (i = h[o]) && (a = i(e, t, a) || a);
+  return a && N(e, t, a), a;
+};
+class d extends f {
+  constructor() {
+    super(...arguments), this.calendar = !1, this.open = !1, this.placement = "bottom", this.panelId = S("kt-date-input-panel"), this.floating = new q(this, {
+      panel: () => this.shadowRoot?.querySelector(".panel"),
+      anchor: () => this.shadowRoot?.querySelector(".field"),
+      onPlace: (e) => {
+        this.placement = e === "top" ? "top" : "bottom";
+      }
+    }), this.onDocumentPointerDown = (e) => {
+      e.composedPath().includes(this) || this.close(!1);
+    };
+  }
+  static {
+    this.styles = [
+      f.styles,
+      E,
+      D`
+      :host {
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--field-height) - 12px);
+        height: calc(var(--field-height) - 12px);
+        margin-right: -4px;
+        padding: 0;
+        color: var(--text-muted);
+        background: none;
+        border: none;
+        border-radius: calc(var(--radius-input) - 2px);
+        cursor: pointer;
+        transition:
+          background-color var(--duration-instant),
+          color var(--duration-instant);
+      }
+      .trigger:hover:not(:disabled),
+      .trigger[aria-expanded='true'] {
+        color: var(--text-body);
+        background: var(--color-dark-22);
+      }
+      .trigger:disabled {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      .trigger: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(--surface-popover);
+        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);
+      }
+    `
+    ];
+  }
+  // --- Segments ---
+  items() {
+    const e = l(), { order: t, separator: n } = K(this.resolvedLocale), a = Number(this.texts.month) || 0, o = this.texts.year?.length === 4 ? Number(this.texts.year) : 2e3, i = a >= 1 && a <= 12 ? y(o, a) : 31, r = {
+      day: {
+        key: "day",
+        label: e.segmentDay,
+        placeholder: e.placeholderDay,
+        spec: { min: 1, max: i, length: 2 }
+      },
+      month: {
+        key: "month",
+        label: e.segmentMonth,
+        placeholder: e.placeholderMonth,
+        spec: { min: 1, max: 12, length: 2 }
+      },
+      year: {
+        key: "year",
+        label: e.segmentYear,
+        placeholder: e.placeholderYear,
+        spec: { min: 1, max: 9999, length: 4 }
+      }
+    }, s = [];
+    return t.forEach((p, k) => {
+      k > 0 && s.push({ literal: n }), s.push(r[p]);
+    }), s;
+  }
+  fill(e) {
+    const t = u(e);
+    return t ? {
+      day: String(t.day).padStart(2, "0"),
+      month: String(t.month).padStart(2, "0"),
+      year: String(t.year).padStart(4, "0")
+    } : { day: "", month: "", year: "" };
+  }
+  read(e) {
+    const { day: t = "", month: n = "", year: a = "" } = e;
+    if (!t || !n || a.length < 4) return { value: null, error: "" };
+    const o = v(), i = {
+      value: null,
+      error: l().dateInvalid(L(this.resolvedLocale, o))
+    }, r = { year: Number(a), month: Number(n), day: Number(t) };
+    if (r.month < 1 || r.month > 12 || r.day < 1 || r.day > y(r.year, r.month)) return i;
+    const s = u(this.min), p = u(this.max);
+    return s && b(r, s) < 0 || p && b(r, p) > 0 ? { value: null, error: l().dateOutOfRange } : { value: Y(r), error: "" };
+  }
+  /** A year left at two digits is written out: 98 is 1998, 30 is 2030. */
+  completeOnBlur(e, t) {
+    if (e.key !== "year" || t.length === 0 || t.length > 2) return null;
+    const n = M(t, v().year);
+    return n === null ? null : String(n).padStart(4, "0");
+  }
+  requiredMessage() {
+    return l().dateRequired;
+  }
+  get expanded() {
+    return this.open;
+  }
+  // --- The calendar ---
+  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") && I(this.open, document, "pointerdown", this.onDocumentPointerDown), this.floating.sync(this.open);
+  }
+  async toggleCalendar() {
+    if (this.open) {
+      this.close(!0);
+      return;
+    }
+    this.inactive || (this.open = !0, await this.updateComplete, this.calendarElement?.focus());
+  }
+  close(e) {
+    this.open && (this.open = !1, e && this.focus());
+  }
+  onCalendarChange(e) {
+    e.stopPropagation(), this.commitValue(e.detail.value), this.close(!0);
+  }
+  onPanelKeyDown(e) {
+    e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.close(!0));
+  }
+  renderAfter() {
+    if (!this.calendar) return m;
+    const e = l();
+    return g`<button
+        part="trigger"
+        type="button"
+        class="trigger"
+        aria-label=${e.openCalendar}
+        aria-haspopup="dialog"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.panelId}
+        ?disabled=${this.inactive}
+        @click=${() => {
+      this.toggleCalendar();
+    }}
+      >
+        <kt-icon name="calendar" size="18"></kt-icon>
+      </button>
+      <div
+        part="panel"
+        id=${this.panelId}
+        popover="manual"
+        class=${C({
+      panel: !0,
+      floating: !0,
+      open: this.open,
+      top: this.placement === "top"
+    })}
+        role="dialog"
+        aria-modal="false"
+        aria-label=${e.selectDate}
+        @keydown=${this.onPanelKeyDown}
+      >
+        ${this.open ? g`<kt-calendar
+                .value=${this.value}
+                min=${this.min}
+                max=${this.max}
+                locale=${this.locale}
+                label=${this.label}
+                @kt-change=${this.onCalendarChange}
+              ></kt-calendar>` : m}
+      </div>`;
+  }
+}
+c([
+  w({ type: Boolean, reflect: !0 })
+], d.prototype, "calendar");
+c([
+  x()
+], d.prototype, "open");
+c([
+  x()
+], d.prototype, "placement");
+c([
+  $("kt-calendar")
+], d.prototype, "calendarElement");
+P("kt-date-input", d);
+export {
+  d as KtDateInput
+};
+//# sourceMappingURL=kt-date-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-date-input.js","sources":["../../../../src/components/forms/kt-date-input/kt-date-input.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 { defineElement } from '#internal/kt-element';\nimport { toggleListener, uniqueId } from '#internal/events';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport { KtSegmentedField, type FieldItem, type Segment } from '#internal/segmented-field';\nimport { compareDates, daysInMonth, formatDate, parseDate, today } from '#internal/date';\nimport { dateLayout, exampleDate, typedYear } from '#internal/typed-date';\nimport { strings } from '#internal/strings';\nimport '../kt-calendar/kt-calendar.js';\nimport type { KtCalendar } from '../kt-calendar/kt-calendar.js';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-tooltip/kt-tooltip.js';\n\n/**\n * A date typed into its parts: day, month and year, each its own segment.\n *\n * The segments come in the order the reader's language writes a date —\n * `25/09/2026` in London, `09/25/2026` in New York, `25.09.2026` in Berlin —\n * and the focus moves on as each fills, so a date is eight keystrokes. The\n * arrows step a segment, a day never past its month's end. The value is ISO\n * 8601, `2026-09-25`, and `null` until the date is complete.\n *\n * With `calendar`, a button at the end opens a `<kt-calendar>` to pick from.\n *\n * @element kt-date-input\n *\n * @csspart field - The field.\n * @csspart segment - A day, month or year segment.\n * @csspart trigger - The calendar button, with `calendar`.\n * @csspart panel - The calendar popup, with `calendar`.\n *\n * @fires kt-change - The date became complete, changed, or stopped being one.\n *   `detail: { value }` — the ISO date or `null`.\n *\n * @example\n * ```html\n * <kt-date-input label=\"Date of birth\" name=\"born\" max=\"2026-12-31\"></kt-date-input>\n * <kt-date-input label=\"Due date\" calendar value=\"2026-09-25\"></kt-date-input>\n * ```\n */\nexport class KtDateInput extends KtSegmentedField {\n  static override styles = [\n    KtSegmentedField.styles,\n    floatingStyles,\n    css`\n      :host {\n        position: relative;\n      }\n\n      .trigger {\n        display: inline-flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: calc(var(--field-height) - 12px);\n        height: calc(var(--field-height) - 12px);\n        margin-right: -4px;\n        padding: 0;\n        color: var(--text-muted);\n        background: none;\n        border: none;\n        border-radius: calc(var(--radius-input) - 2px);\n        cursor: pointer;\n        transition:\n          background-color var(--duration-instant),\n          color var(--duration-instant);\n      }\n      .trigger:hover:not(:disabled),\n      .trigger[aria-expanded='true'] {\n        color: var(--text-body);\n        background: var(--color-dark-22);\n      }\n      .trigger:disabled {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      .trigger: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(--surface-popover);\n        border-radius: var(--radius-input);\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  ];\n\n  /** Adds a button that opens a calendar to pick the date from. */\n  @property({ type: Boolean, reflect: true })\n  calendar = false;\n\n  @state() private open = false;\n  @state() private placement: 'bottom' | 'top' = 'bottom';\n\n  @query('kt-calendar')\n  private calendarElement?: KtCalendar;\n\n  private readonly panelId = uniqueId('kt-date-input-panel');\n\n  private floating = new FloatingController(this, {\n    panel: () => this.shadowRoot?.querySelector<HTMLElement>('.panel'),\n    anchor: () => this.shadowRoot?.querySelector('.field'),\n    onPlace: (side) => {\n      this.placement = side === 'top' ? 'top' : 'bottom';\n    },\n  });\n\n  // --- Segments ---\n\n  protected override items(): FieldItem[] {\n    const s = strings();\n    const { order, separator } = dateLayout(this.resolvedLocale);\n    const month = Number(this.texts['month']) || 0;\n    const year = this.texts['year']?.length === 4 ? Number(this.texts['year']) : 2000;\n    // A day stops at its month's end once the month is known; a leap year\n    // until the year is.\n    const lastDay = month >= 1 && month <= 12 ? daysInMonth(year, month) : 31;\n\n    const segments = {\n      day: {\n        key: 'day',\n        label: s.segmentDay,\n        placeholder: s.placeholderDay,\n        spec: { min: 1, max: lastDay, length: 2 },\n      },\n      month: {\n        key: 'month',\n        label: s.segmentMonth,\n        placeholder: s.placeholderMonth,\n        spec: { min: 1, max: 12, length: 2 },\n      },\n      year: {\n        key: 'year',\n        label: s.segmentYear,\n        placeholder: s.placeholderYear,\n        spec: { min: 1, max: 9999, length: 4 },\n      },\n    };\n\n    const items: FieldItem[] = [];\n    order.forEach((part, index) => {\n      if (index > 0) items.push({ literal: separator });\n      items.push(segments[part]);\n    });\n    return items;\n  }\n\n  protected override fill(value: string | null): Record<string, string> {\n    const date = parseDate(value);\n    if (!date) return { day: '', month: '', year: '' };\n    return {\n      day: String(date.day).padStart(2, '0'),\n      month: String(date.month).padStart(2, '0'),\n      year: String(date.year).padStart(4, '0'),\n    };\n  }\n\n  protected override read(texts: Record<string, string>): { value: string | null; error: string } {\n    const { day = '', month = '', year = '' } = texts;\n    // A year still being typed is not a year yet: four digits, or two written\n    // out when the focus leaves them.\n    if (!day || !month || year.length < 4) return { value: null, error: '' };\n\n    const now = today();\n    const invalid = {\n      value: null,\n      error: strings().dateInvalid(exampleDate(this.resolvedLocale, now)),\n    };\n    const date = { year: Number(year), month: Number(month), day: Number(day) };\n    if (date.month < 1 || date.month > 12 || date.day < 1) return invalid;\n    if (date.day > daysInMonth(date.year, date.month)) return invalid;\n\n    const min = parseDate(this.min);\n    const max = parseDate(this.max);\n    if ((min && compareDates(date, min) < 0) || (max && compareDates(date, max) > 0)) {\n      return { value: null, error: strings().dateOutOfRange };\n    }\n    return { value: formatDate(date), error: '' };\n  }\n\n  /** A year left at two digits is written out: 98 is 1998, 30 is 2030. */\n  protected override completeOnBlur(segment: Segment, text: string): string | null {\n    if (segment.key !== 'year' || text.length === 0 || text.length > 2) return null;\n    const year = typedYear(text, today().year);\n    return year === null ? null : String(year).padStart(4, '0');\n  }\n\n  protected override requiredMessage(): string {\n    return strings().dateRequired;\n  }\n\n  protected override get expanded(): boolean {\n    return this.open;\n  }\n\n  // --- The calendar ---\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    if (changed.has('open')) {\n      toggleListener(this.open, document, 'pointerdown', this.onDocumentPointerDown);\n    }\n    this.floating.sync(this.open);\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (!event.composedPath().includes(this)) this.close(false);\n  };\n\n  private async toggleCalendar(): Promise<void> {\n    if (this.open) {\n      this.close(true);\n      return;\n    }\n    if (this.inactive) return;\n    this.open = true;\n    await this.updateComplete;\n    this.calendarElement?.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 onCalendarChange(event: CustomEvent<{ value: string }>): void {\n    // The calendar's own event stops here; the field reports its value.\n    event.stopPropagation();\n    this.commitValue(event.detail.value);\n    this.close(true);\n  }\n\n  private onPanelKeyDown(event: KeyboardEvent): void {\n    // The calendar keeps Escape while it shows its year and month panel.\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close(true);\n    }\n  }\n\n  protected override renderAfter(): TemplateResult | typeof nothing {\n    if (!this.calendar) return nothing;\n    const s = strings();\n    return html`<button\n        part=\"trigger\"\n        type=\"button\"\n        class=\"trigger\"\n        aria-label=${s.openCalendar}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=${this.panelId}\n        ?disabled=${this.inactive}\n        @click=${() => void this.toggleCalendar()}\n      >\n        <kt-icon name=\"calendar\" size=\"18\"></kt-icon>\n      </button>\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=${s.selectDate}\n        @keydown=${this.onPanelKeyDown}\n      >\n        ${\n          this.open\n            ? html`<kt-calendar\n                .value=${this.value}\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  }\n}\n\ndefineElement('kt-date-input', KtDateInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-date-input': KtDateInput;\n  }\n}\n"],"names":["KtDateInput","KtSegmentedField","uniqueId","FloatingController","side","event","floatingStyles","css","s","strings","order","separator","dateLayout","month","year","lastDay","daysInMonth","segments","items","part","index","value","date","parseDate","texts","day","now","today","invalid","exampleDate","min","max","compareDates","formatDate","segment","text","typedYear","changed","toggleListener","returnFocus","nothing","html","classMap","__decorateClass","property","state","query","defineElement"],"mappings":";;;;;;;;;;;;;;;;;AA0CO,MAAMA,UAAoBC,EAAiB;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GAwEL,KAAA,WAAW,IAEF,KAAQ,OAAO,IACf,KAAQ,YAA8B,UAK/C,KAAiB,UAAUC,EAAS,qBAAqB,GAEzD,KAAQ,WAAW,IAAIC,EAAmB,MAAM;AAAA,MAC9C,OAAO,MAAM,KAAK,YAAY,cAA2B,QAAQ;AAAA,MACjE,QAAQ,MAAM,KAAK,YAAY,cAAc,QAAQ;AAAA,MACrD,SAAS,CAACC,MAAS;AACjB,aAAK,YAAYA,MAAS,QAAQ,QAAQ;AAAA,MAC5C;AAAA,IAAA,CACD,GAyGD,KAAQ,wBAAwB,CAACC,MAAuB;AACtD,MAAKA,EAAM,eAAe,SAAS,IAAI,KAAG,KAAK,MAAM,EAAK;AAAA,IAC5D;AAAA,EAAA;AAAA,EAlMA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBJ,EAAiB;AAAA,MACjBK;AAAA,MACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAgEF;AAAA;AAAA,EAwBmB,QAAqB;AACtC,UAAMC,IAAIC,EAAA,GACJ,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAW,KAAK,cAAc,GACrDC,IAAQ,OAAO,KAAK,MAAM,KAAQ,KAAK,GACvCC,IAAO,KAAK,MAAM,MAAS,WAAW,IAAI,OAAO,KAAK,MAAM,IAAO,IAAI,KAGvEC,IAAUF,KAAS,KAAKA,KAAS,KAAKG,EAAYF,GAAMD,CAAK,IAAI,IAEjEI,IAAW;AAAA,MACf,KAAK;AAAA,QACH,KAAK;AAAA,QACL,OAAOT,EAAE;AAAA,QACT,aAAaA,EAAE;AAAA,QACf,MAAM,EAAE,KAAK,GAAG,KAAKO,GAAS,QAAQ,EAAA;AAAA,MAAE;AAAA,MAE1C,OAAO;AAAA,QACL,KAAK;AAAA,QACL,OAAOP,EAAE;AAAA,QACT,aAAaA,EAAE;AAAA,QACf,MAAM,EAAE,KAAK,GAAG,KAAK,IAAI,QAAQ,EAAA;AAAA,MAAE;AAAA,MAErC,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,OAAOA,EAAE;AAAA,QACT,aAAaA,EAAE;AAAA,QACf,MAAM,EAAE,KAAK,GAAG,KAAK,MAAM,QAAQ,EAAA;AAAA,MAAE;AAAA,IACvC,GAGIU,IAAqB,CAAA;AAC3B,WAAAR,EAAM,QAAQ,CAACS,GAAMC,MAAU;AAC7B,MAAIA,IAAQ,KAAGF,EAAM,KAAK,EAAE,SAASP,GAAW,GAChDO,EAAM,KAAKD,EAASE,CAAI,CAAC;AAAA,IAC3B,CAAC,GACMD;AAAA,EACT;AAAA,EAEmB,KAAKG,GAA8C;AACpE,UAAMC,IAAOC,EAAUF,CAAK;AAC5B,WAAKC,IACE;AAAA,MACL,KAAK,OAAOA,EAAK,GAAG,EAAE,SAAS,GAAG,GAAG;AAAA,MACrC,OAAO,OAAOA,EAAK,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,MACzC,MAAM,OAAOA,EAAK,IAAI,EAAE,SAAS,GAAG,GAAG;AAAA,IAAA,IAJvB,EAAE,KAAK,IAAI,OAAO,IAAI,MAAM,GAAA;AAAA,EAMhD;AAAA,EAEmB,KAAKE,GAAwE;AAC9F,UAAM,EAAE,KAAAC,IAAM,IAAI,OAAAZ,IAAQ,IAAI,MAAAC,IAAO,OAAOU;AAG5C,QAAI,CAACC,KAAO,CAACZ,KAASC,EAAK,SAAS,EAAG,QAAO,EAAE,OAAO,MAAM,OAAO,GAAA;AAEpE,UAAMY,IAAMC,EAAA,GACNC,IAAU;AAAA,MACd,OAAO;AAAA,MACP,OAAOnB,IAAU,YAAYoB,EAAY,KAAK,gBAAgBH,CAAG,CAAC;AAAA,IAAA,GAE9DJ,IAAO,EAAE,MAAM,OAAOR,CAAI,GAAG,OAAO,OAAOD,CAAK,GAAG,KAAK,OAAOY,CAAG,EAAA;AAExE,QADIH,EAAK,QAAQ,KAAKA,EAAK,QAAQ,MAAMA,EAAK,MAAM,KAChDA,EAAK,MAAMN,EAAYM,EAAK,MAAMA,EAAK,KAAK,EAAG,QAAOM;AAE1D,UAAME,IAAMP,EAAU,KAAK,GAAG,GACxBQ,IAAMR,EAAU,KAAK,GAAG;AAC9B,WAAKO,KAAOE,EAAaV,GAAMQ,CAAG,IAAI,KAAOC,KAAOC,EAAaV,GAAMS,CAAG,IAAI,IACrE,EAAE,OAAO,MAAM,OAAOtB,EAAA,EAAU,eAAA,IAElC,EAAE,OAAOwB,EAAWX,CAAI,GAAG,OAAO,GAAA;AAAA,EAC3C;AAAA;AAAA,EAGmB,eAAeY,GAAkBC,GAA6B;AAC/E,QAAID,EAAQ,QAAQ,UAAUC,EAAK,WAAW,KAAKA,EAAK,SAAS,EAAG,QAAO;AAC3E,UAAMrB,IAAOsB,EAAUD,GAAMR,EAAA,EAAQ,IAAI;AACzC,WAAOb,MAAS,OAAO,OAAO,OAAOA,CAAI,EAAE,SAAS,GAAG,GAAG;AAAA,EAC5D;AAAA,EAEmB,kBAA0B;AAC3C,WAAOL,IAAU;AAAA,EACnB;AAAA,EAEA,IAAuB,WAAoB;AACzC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAIS,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,eAAe,KAAK,qBAAqB;AAAA,EACxE;AAAA;AAAA,EAGS,QAAQ4B,GAA+B;AAC9C,IAAIA,EAAQ,IAAI,MAAM,KACpBC,EAAe,KAAK,MAAM,UAAU,eAAe,KAAK,qBAAqB,GAE/E,KAAK,SAAS,KAAK,KAAK,IAAI;AAAA,EAC9B;AAAA,EAMA,MAAc,iBAAgC;AAC5C,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,EAAI;AACf;AAAA,IACF;AACA,IAAI,KAAK,aACT,KAAK,OAAO,IACZ,MAAM,KAAK,gBACX,KAAK,iBAAiB,MAAA;AAAA,EACxB;AAAA,EAEQ,MAAMC,GAA4B;AACxC,IAAK,KAAK,SACV,KAAK,OAAO,IACRA,UAAkB,MAAA;AAAA,EACxB;AAAA,EAEQ,iBAAiBlC,GAA6C;AAEpE,IAAAA,EAAM,gBAAA,GACN,KAAK,YAAYA,EAAM,OAAO,KAAK,GACnC,KAAK,MAAM,EAAI;AAAA,EACjB;AAAA,EAEQ,eAAeA,GAA4B;AAEjD,IAAIA,EAAM,QAAQ,aAChBA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACN,KAAK,MAAM,EAAI;AAAA,EAEnB;AAAA,EAEmB,cAA+C;AAChE,QAAI,CAAC,KAAK,SAAU,QAAOmC;AAC3B,UAAMhC,IAAIC,EAAA;AACV,WAAOgC;AAAA;AAAA;AAAA;AAAA,qBAIUjC,EAAE,YAAY;AAAA;AAAA,wBAEX,KAAK,OAAO,SAAS,OAAO;AAAA,wBAC5B,KAAK,OAAO;AAAA,oBAChB,KAAK,QAAQ;AAAA,iBAChB,MAAA;AAAM,MAAK,KAAK,eAAA;AAAA,KAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMpC,KAAK,OAAO;AAAA;AAAA,gBAETkC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM,KAAK;AAAA,MACX,KAAK,KAAK,cAAc;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,qBAGWlC,EAAE,UAAU;AAAA,mBACd,KAAK,cAAc;AAAA;AAAA,UAG5B,KAAK,OACDiC;AAAA,yBACW,KAAK,KAAK;AAAA,sBACb,KAAK,GAAG;AAAA,sBACR,KAAK,GAAG;AAAA,yBACL,KAAK,MAAM;AAAA,wBACZ,KAAK,KAAK;AAAA,6BACL,KAAK,gBAAgB;AAAA,iCAEpCD,CACN;AAAA;AAAA,EAEN;AACF;AA3MEG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvE/B5C,EAwEX,WAAA,UAAA;AAEiB2C,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1EI7C,EA0EM,WAAA,MAAA;AACA2C,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA3EI7C,EA2EM,WAAA,WAAA;AAGT2C,EAAA;AAAA,EADPG,EAAM,aAAa;AAAA,GA7ET9C,EA8EH,WAAA,iBAAA;AAuMV+C,EAAc,iBAAiB/C,CAAW;"}

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

@@ -2,7 +2,13 @@ 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';
+import '../../feedback/kt-tooltip/kt-tooltip.js';
 export type KtDatePickerSize = 'small' | 'medium' | 'large';
+/** A ready-made period offered beside the calendar: a label and an ISO interval. */
+export interface KtDatePreset {
+    readonly label: string;
+    readonly value: string;
+}
 /**
  * A date field with a calendar, for one day or a period.
  *
@@ -11,14 +17,22 @@ export type KtDatePickerSize = 'small' | 'medium' | 'large';
  * 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 field takes a date typed the way the reader writes it — `25/09/2026` in
+ * London, `9/25/2026` in New York, `25 sept.` in Paris, ISO anywhere — on Enter
+ * or when it is left. What does not read as a date is flagged, and the value
+ * it had is kept.
+ *
  * 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 field - The field.
+ * @csspart input - The text the date is typed into.
+ * @csspart trigger - The button that opens the calendar.
  * @csspart panel - The calendar popup.
+ * @csspart presets - The column of ready-made periods, with `range`.
  * @csspart calendar - The `<kt-calendar>` inside it.
  *
  * @fires kt-change - A date or a whole period was chosen, or the value cleared.
@@ -33,12 +47,20 @@ export type KtDatePickerSize = 'small' | 'medium' | 'large';
 export declare class KtDatePicker extends KtElement {
     static readonly formAssociated = true;
     static styles: import("lit").CSSResultGroup[];
-    private trigger?;
+    private input?;
     private calendar?;
     private internals;
     private defaultValue;
     private readonly panelId;
     private open;
+    /** What is typed, while it differs from the value shown. */
+    private text;
+    private editing;
+    /** Why the typed text was turned down, if it was. */
+    private typedError;
+    private focused;
+    /** Set at each opening on a narrow screen: one month, the periods above it. */
+    private compact;
     private placement;
     private floating;
     /** ISO date, or `start/end` interval with `range`. `null` when empty. */
@@ -68,6 +90,12 @@ export declare class KtDatePicker extends KtElement {
     required: boolean;
     /** Shows a button that empties the field once it holds a value. */
     clearable: boolean;
+    /**
+     * Ready-made periods offered beside the calendar, with `range`. Unset: the
+     * periods a dashboard asks for most — today, the last 7 and 30 days, this
+     * month and last, this year. An empty list hides the column.
+     */
+    presets: readonly KtDatePreset[] | undefined;
     /** Error message. A non-empty value puts the field in its error state. */
     error: string;
     connectedCallback(): void;
@@ -89,12 +117,28 @@ export declare class KtDatePicker extends KtElement {
     private onDocumentPointerDown;
     /** Tabbing out of the calendar closes it; moving within it does not. */
     private onFocusOut;
+    /** Below this width, a period's two months and their periods do not fit. */
+    private static readonly WIDE_ENOUGH;
     private show;
     private close;
     private toggle;
+    /** A click in the text opens the calendar, leaving the focus to type. */
+    private openForTyping;
     private onCalendarChange;
+    /** A preset, or today: committed at once, the calendar closed. */
+    private apply;
+    /** Whether any of a period falls outside min and max. */
+    private outOfBounds;
+    private renderPresets;
     private clear;
-    private onTriggerKeyDown;
+    private onInput;
+    /**
+     * Reads what was typed into the value. Text that is not a date, or is a date
+     * outside min and max, is flagged and the value kept; an empty field empties
+     * the value.
+     */
+    private commitTyped;
+    private onInputKeyDown;
     private onPanelKeyDown;
     render(): TemplateResult;
 }