kanto-ds 1.5.2 → 1.6.0

package/dist/chunks/kt-calendar-CtwOby1R.js

@@ -0,0 +1,780 @@
+import { css as P, html as l, nothing as D } from "lit";
+import { state as T, property as b } from "lit/decorators.js";
+import { classMap as A } from "lit/directives/class-map.js";
+import { K as M, d as O } from "./kt-element-T0VbIBNp.js";
+import { u as z, e as E } from "./events-r51msXNf.js";
+import { r as K, d as R } from "./locale-C5xLkGx5.js";
+import { s as Y } from "./index-TWJzttLX.js";
+import "../components/core/kt-icon/kt-icon.js";
+const j = /^(\d{4})-(\d{2})-(\d{2})$/;
+function $(a, t) {
+  return new Date(Date.UTC(a, t, 0)).getUTCDate();
+}
+function x(a) {
+  const t = j.exec(a?.trim() ?? "");
+  if (!t) return null;
+  const [e, r, o] = [Number(t[1]), Number(t[2]), Number(t[3])];
+  return r < 1 || r > 12 || o < 1 || o > $(e, r) ? null : { year: e, month: r, day: o };
+}
+function S(a) {
+  const t = (e, r = 2) => String(e).padStart(r, "0");
+  return `${t(a.year, 4)}-${t(a.month)}-${t(a.day)}`;
+}
+function H(a) {
+  const [t, e] = (a ?? "").split("/");
+  return { start: x(t), end: x(e) };
+}
+function L(a, t) {
+  return `${S(a)}/${S(t)}`;
+}
+function c(a, t) {
+  return a.year - t.year || a.month - t.month || a.day - t.day;
+}
+function y(a, t) {
+  return a !== null && t !== null && c(a, t) === 0;
+}
+function _(a, t, e) {
+  const [r, o] = c(t, e) <= 0 ? [t, e] : [e, t];
+  return c(a, r) >= 0 && c(a, o) <= 0;
+}
+function I(a) {
+  const t = new Date(a);
+  return { year: t.getUTCFullYear(), month: t.getUTCMonth() + 1, day: t.getUTCDate() };
+}
+function g(a, t) {
+  return I(Date.UTC(a.year, a.month - 1, a.day + t));
+}
+function m(a, t) {
+  const e = a.year * 12 + (a.month - 1) + t, r = Math.floor(e / 12), o = e % 12 + 1;
+  return { year: r, month: o, day: Math.min(a.day, $(r, o)) };
+}
+function B(a) {
+  const t = new Date(Date.UTC(a.year, a.month - 1, a.day)).getUTCDay();
+  return t === 0 ? 7 : t;
+}
+function C(a, t) {
+  return g(a, -((B(a) - t + 7) % 7));
+}
+function q(a, t, e) {
+  let r = C({ year: a, month: t, day: 1 }, e);
+  const o = [];
+  for (let i = 0; i < 6; i += 1) {
+    const h = [];
+    for (let f = 0; f < 7; f += 1)
+      h.push(r), r = g(r, 1);
+    o.push(h);
+  }
+  return o;
+}
+function k() {
+  const a = /* @__PURE__ */ new Date();
+  return { year: a.getFullYear(), month: a.getMonth() + 1, day: a.getDate() };
+}
+function N(a) {
+  return new Date(a.year, a.month - 1, a.day, 12);
+}
+function U(a) {
+  try {
+    const t = new Intl.Locale(a), e = t.getWeekInfo?.().firstDay ?? t.weekInfo?.firstDay;
+    return e && e >= 1 && e <= 7 ? e : 1;
+  } catch {
+    return 1;
+  }
+}
+var V = Object.defineProperty, u = (a, t, e, r) => {
+  for (var o = void 0, i = a.length - 1, h; i >= 0; i--)
+    (h = a[i]) && (o = h(t, e, o) || o);
+  return o && V(t, e, o), o;
+};
+const W = 120, F = 50, G = 1e3;
+class d extends M {
+  constructor() {
+    super(...arguments), this.liveId = z("kt-calendar-live"), this.focusCell = !1, this.focusYear = !1, this.typed = "", this.typedAt = 0, this.committing = !1, this.view = "day", this.month = { ...k(), day: 1 }, this.focused = k(), this.anchor = null, this.value = null, this.range = !1, this.min = "", this.max = "", this.locale = "", this.months = 1, this.label = "";
+  }
+  static {
+    this.styles = [
+      M.styles,
+      P`
+      :host {
+        display: inline-block;
+        --day-size: 32px;
+      }
+
+      .calendar {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        width: calc(var(--day-size) * 7);
+      }
+      /* Two months side by side, for a period that spans a month's end. */
+      .calendar.two {
+        width: calc(var(--day-size) * 14 + var(--month-gap));
+      }
+      :host {
+        --month-gap: 24px;
+      }
+      .months {
+        display: flex;
+        gap: var(--month-gap);
+        height: 100%;
+      }
+      .months > table {
+        flex: 1;
+      }
+      .two .header {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--month-gap);
+      }
+      .two .header .title {
+        justify-self: start;
+      }
+      .second {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .second-title {
+        padding-left: 8px;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        text-transform: capitalize;
+      }
+      td.blank {
+        pointer-events: none;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-element);
+      }
+      .navs {
+        display: flex;
+        gap: 2px;
+      }
+
+      .nav,
+      .title {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--day-size);
+        padding: 0;
+        color: var(--text-muted);
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      .nav {
+        width: var(--day-size);
+      }
+      /* The month and year as one control: it is one place in time. */
+      /* A faint veil of the text colour at rest, so the title reads as a
+         button that opens something rather than as a heading — the same
+         lightness of touch on white and on the dark ramp. */
+      .title {
+        gap: 4px;
+        padding: 0 6px 0 10px;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        text-transform: capitalize;
+        background: color-mix(in srgb, var(--text-body) 6%, transparent);
+        transition: background-color var(--duration-instant);
+      }
+      .title kt-icon {
+        color: var(--text-muted);
+        transition: transform var(--duration-fast) var(--easing-standard);
+      }
+      .title[aria-expanded='true'] kt-icon {
+        transform: scaleY(-1);
+      }
+      .nav:hover {
+        color: var(--text-body);
+        background: var(--color-dark-22);
+      }
+      .title:hover,
+      .title[aria-expanded='true'] {
+        background: color-mix(in srgb, var(--text-body) 11%, transparent);
+      }
+      .nav:focus-visible,
+      .title:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      /* One height for every view, so the calendar does not shrink under the
+         pointer when it switches from days to months or years. */
+      .body {
+        height: calc(var(--day-size) * 7 + 16px);
+      }
+      table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: separate;
+        border-spacing: 0 2px;
+      }
+      /* The months keep a cell's height and sit at the top, beside the
+         years, rather than stretching into tall blocks. */
+      table.wide {
+        align-self: start;
+        border-spacing: 2px;
+      }
+      th {
+        padding-bottom: 4px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-weight: 600;
+      }
+      th abbr {
+        text-decoration: none;
+      }
+
+      .cell {
+        position: relative;
+        height: var(--day-size);
+        padding: 0;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        border-radius: var(--radius-input);
+        outline: none;
+        cursor: pointer;
+      }
+      .cell:hover {
+        background: var(--color-dark-22);
+      }
+      .cell:focus-visible {
+        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);
+      }
+      /* Months and years sit three to a row, sharing the height the days use. */
+      .wide .cell {
+        height: 40px;
+        text-transform: capitalize;
+      }
+      .cell.outside {
+        color: var(--text-muted);
+      }
+      /* Today: a dot under the number, which a selection's fill keeps. */
+      .cell.current::after {
+        content: '';
+        position: absolute;
+        bottom: 3px;
+        left: 50%;
+        width: 4px;
+        height: 4px;
+        margin-left: -2px;
+        background: currentColor;
+        border-radius: var(--radius-full);
+      }
+
+      /* A period reads as one band: the days between are tinted and squared
+         off, and only its two ends are rounded. */
+      /* A clear band, not a wash: the -soft tint faded on a white popup. */
+      .cell.in-range {
+        background: color-mix(in srgb, var(--color-primary-base) 18%, transparent);
+        border-radius: 0;
+      }
+      .cell.range-start {
+        border-radius: var(--radius-input) 0 0 var(--radius-input);
+      }
+      .cell.range-end {
+        border-radius: 0 var(--radius-input) var(--radius-input) 0;
+      }
+      .cell.range-start.range-end {
+        border-radius: var(--radius-input);
+      }
+      .cell.selected {
+        color: var(--color-white);
+        background: var(--color-primary-base);
+      }
+
+      /* The month and year panel: the years scroll beside the months. */
+      .month-year {
+        display: grid;
+        grid-template-columns: 72px 1fr;
+        gap: var(--gap-element);
+        height: 100%;
+      }
+      .years {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding-right: 6px;
+        overflow-y: auto;
+        border-right: var(--border-width) solid var(--divider-popover);
+        outline: none;
+        scrollbar-width: thin;
+      }
+      .year {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--day-size);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        font-variant-numeric: tabular-nums;
+        border-radius: var(--radius-input);
+        outline: none;
+        cursor: pointer;
+      }
+      .year:hover {
+        background: var(--color-dark-22);
+      }
+      .year:focus-visible {
+        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);
+      }
+      /* Where the list is, not what is chosen: tinted, so the one solid
+         fill in the panel stays the chosen month. */
+      .year[aria-selected='true'] {
+        color: var(--color-primary-text);
+        font-weight: 600;
+        background: var(--color-primary-soft);
+      }
+
+      .cell[aria-disabled='true'] {
+        color: var(--text-disabled);
+        background: none;
+        text-decoration: line-through;
+        cursor: not-allowed;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.jumpTo(this.clamp(this.selection.start ?? k()), !1);
+  }
+  willUpdate(t) {
+    if (t.has("value") && !this.committing && this.hasUpdated) {
+      this.anchor = null;
+      const e = this.selection.start;
+      e && this.jumpTo(this.clamp(e), !1);
+    }
+    this.committing = !1;
+  }
+  updated() {
+    this.view === "month" && this.revealYear(this.focusYear), this.focusYear = !1, this.focusCell && (this.focusCell = !1, this.shadowRoot?.querySelector('.cell[tabindex="0"]')?.focus());
+  }
+  /**
+   * Keeps the chosen year in sight in its list — centred when the panel
+   * opens — and focuses it when asked. The list scrolls itself; the page
+   * never does.
+   */
+  revealYear(t) {
+    const e = this.shadowRoot?.querySelector(".years"), r = e?.querySelector('[aria-selected="true"]');
+    if (!e || !r) return;
+    const o = r.offsetTop - e.offsetTop;
+    t ? (e.scrollTop = o - (e.clientHeight - r.offsetHeight) / 2, r.focus({ preventScroll: !0 })) : o < e.scrollTop ? e.scrollTop = o : o + r.offsetHeight > e.scrollTop + e.clientHeight && (e.scrollTop = o + r.offsetHeight - e.clientHeight);
+  }
+  /** Focuses the grid's current cell — the chosen day, or today. */
+  focus() {
+    this.focusCell = !0, this.requestUpdate();
+  }
+  // --- Reading the value ---
+  get resolvedLocale() {
+    return K(this.locale);
+  }
+  get selection() {
+    return this.range ? H(this.value) : { start: x(this.value), end: x(this.value) };
+  }
+  get bounds() {
+    return { min: x(this.min), max: x(this.max) };
+  }
+  clamp(t) {
+    const { min: e, max: r } = this.bounds;
+    return e && c(t, e) < 0 ? e : r && c(t, r) > 0 ? r : t;
+  }
+  isOutOfBounds(t) {
+    const { min: e, max: r } = this.bounds;
+    return e !== null && c(t, e) < 0 || r !== null && c(t, r) > 0;
+  }
+  /** A month or a year is unavailable only when every day of it is. */
+  isSpanOutOfBounds(t, e) {
+    const { min: r, max: o } = this.bounds;
+    return o !== null && c(t, o) > 0 || r !== null && c(e, r) < 0;
+  }
+  format(t, e) {
+    return R(this.resolvedLocale, t).format(N(e));
+  }
+  // --- Moving ---
+  get monthSpan() {
+    return this.months === 2 ? 2 : 1;
+  }
+  /**
+   * Moves the tab stop, and the day view with it only when the date leaves
+   * the months on screen — moving across two months does not page.
+   */
+  jumpTo(t, e = !0) {
+    this.focused = t;
+    const r = (t.year - this.month.year) * 12 + (t.month - this.month.month);
+    r < 0 ? this.month = { year: t.year, month: t.month, day: 1 } : r >= this.monthSpan && (this.month = m({ year: t.year, month: t.month, day: 1 }, 1 - this.monthSpan)), this.focusCell = e;
+  }
+  /** The header's arrows: the whole view, and the tab stop with it, by a month. */
+  page(t) {
+    this.month = m(this.month, t), this.focused = m(this.focused, t);
+  }
+  setView(t) {
+    this.view = t, t === "month" ? (this.focused = { ...this.month, day: this.focused.day }, this.focusYear = !0) : this.focusCell = !0;
+  }
+  /** The years the list offers: the bounds, or a span around today. */
+  get yearRange() {
+    const { min: t, max: e } = this.bounds, r = k().year;
+    return { first: t?.year ?? r - W, last: e?.year ?? r + F };
+  }
+  // --- Choosing ---
+  chooseDay(t) {
+    if (this.isOutOfBounds(t)) return;
+    if (this.focused = t, !this.range) {
+      this.commit(S(t));
+      return;
+    }
+    if (!this.anchor) {
+      this.anchor = t;
+      return;
+    }
+    const [e, r] = c(this.anchor, t) <= 0 ? [this.anchor, t] : [t, this.anchor];
+    this.anchor = null, this.commit(L(e, r));
+  }
+  commit(t) {
+    this.committing = !0, this.value = t, E(this, "kt-change", { value: t });
+  }
+  chooseMonth(t) {
+    const e = Math.min(this.focused.day, $(this.focused.year, t));
+    this.jumpTo(this.clamp({ year: this.focused.year, month: t, day: e })), this.setView("day");
+  }
+  /** Shows a year's months, staying in the panel. */
+  chooseYear(t, e = !0) {
+    const { first: r, last: o } = this.yearRange, i = Math.min(Math.max(t, r), o), h = Math.min(this.focused.day, $(i, this.focused.month));
+    this.focused = { year: i, month: this.focused.month, day: h }, this.focusYear = e;
+  }
+  onYearKeyDown(t) {
+    const { year: e } = this.focused, { first: r, last: o } = this.yearRange;
+    if (/^\d$/.test(t.key)) {
+      const i = Date.now();
+      this.typed = i - this.typedAt > G ? t.key : this.typed + t.key, this.typedAt = i, this.typed.length === 4 && (this.chooseYear(Number(this.typed)), this.typed = ""), t.preventDefault();
+      return;
+    }
+    switch (t.key) {
+      case "ArrowUp":
+        this.chooseYear(e - 1);
+        break;
+      case "ArrowDown":
+        this.chooseYear(e + 1);
+        break;
+      case "PageUp":
+        this.chooseYear(e - 10);
+        break;
+      case "PageDown":
+        this.chooseYear(e + 10);
+        break;
+      case "Home":
+        this.chooseYear(r);
+        break;
+      case "End":
+        this.chooseYear(o);
+        break;
+      case "Enter":
+      case " ":
+        this.focusCell = !0, this.requestUpdate();
+        break;
+      case "Escape":
+        t.stopPropagation(), this.setView("day");
+        break;
+      default:
+        return;
+    }
+    t.preventDefault();
+  }
+  // --- Keyboard ---
+  onDayKeyDown(t) {
+    const e = U(this.resolvedLocale), r = this.focused;
+    let o;
+    switch (t.key) {
+      case "ArrowLeft":
+        o = g(r, -1);
+        break;
+      case "ArrowRight":
+        o = g(r, 1);
+        break;
+      case "ArrowUp":
+        o = g(r, -7);
+        break;
+      case "ArrowDown":
+        o = g(r, 7);
+        break;
+      case "Home":
+        o = C(r, e);
+        break;
+      case "End":
+        o = g(C(r, e), 6);
+        break;
+      case "PageUp":
+        o = m(r, t.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        o = m(r, t.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.chooseDay(r);
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), this.jumpTo(o);
+  }
+  /** The months, three to a row; crossing a year end moves the year list too. */
+  onPickerKeyDown(t) {
+    const e = (o) => m(this.focused, o);
+    let r;
+    switch (t.key) {
+      case "ArrowLeft":
+        r = e(-1);
+        break;
+      case "ArrowRight":
+        r = e(1);
+        break;
+      case "ArrowUp":
+        r = e(-3);
+        break;
+      case "ArrowDown":
+        r = e(3);
+        break;
+      case "PageUp":
+        r = e(-12);
+        break;
+      case "PageDown":
+        r = e(12);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.chooseMonth(this.focused.month);
+        return;
+      case "Escape":
+        t.preventDefault(), t.stopPropagation(), this.setView("day");
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), this.focused = r, this.focusCell = !0;
+  }
+  // --- Rendering ---
+  renderHeader() {
+    const t = Y(), e = this.view === "month", r = e ? this.focused : this.month, o = l`<div class="navs">
+      <button type="button" class="nav" aria-label=${t.previousMonth} @click=${() => this.page(-1)}>
+        <kt-icon name="chevron-left" size="18"></kt-icon>
+      </button>
+      <button type="button" class="nav" aria-label=${t.nextMonth} @click=${() => this.page(1)}>
+        <kt-icon name="chevron-right" size="18"></kt-icon>
+      </button>
+    </div>`;
+    return l`<div class="header">
+      <button
+        type="button"
+        class="title"
+        aria-expanded=${e ? "true" : "false"}
+        @click=${() => this.setView(e ? "day" : "month")}
+      >
+        ${this.format({ month: "long", year: "numeric" }, r)}
+        <kt-icon name="chevron-down" size="16"></kt-icon>
+      </button>
+      ${e ? D : this.monthSpan === 2 ? l`<div class="second">
+                <span class="second-title" aria-hidden="true"
+                  >${this.format({ month: "long", year: "numeric" }, m(this.month, 1))}</span
+                >
+                ${o}
+              </div>` : o}
+    </div>`;
+  }
+  renderDay(t, e) {
+    const r = t.month !== e.month;
+    if (r && this.monthSpan === 2) return l`<td class="blank" role="gridcell"></td>`;
+    const { start: o, end: i } = this.selection, h = this.anchor ?? o, f = this.anchor ? this.focused : i, [v, s] = h && f && c(h, f) > 0 ? [f, h] : [h, f], n = this.range ? y(t, v) || y(t, s) : y(t, o), p = this.range && v !== null && s !== null && _(t, v, s), w = y(t, k());
+    return l`<td
+      part="day"
+      role="gridcell"
+      class=${A({
+      cell: !0,
+      outside: r,
+      current: w,
+      selected: n,
+      "in-range": p,
+      "range-start": p && y(t, v),
+      "range-end": p && y(t, s)
+    })}
+      data-date=${S(t)}
+      tabindex=${y(t, this.focused) ? 0 : -1}
+      aria-selected=${n ? "true" : "false"}
+      aria-disabled=${this.isOutOfBounds(t) ? "true" : D}
+      aria-current=${w ? "date" : D}
+      aria-label=${this.format({ dateStyle: "full" }, t)}
+      @click=${() => this.chooseDay(t)}
+      @pointerenter=${() => {
+      this.anchor && (this.focused = t);
+    }}
+    >
+      ${t.day}
+    </td>`;
+  }
+  renderDays() {
+    const t = Array.from(
+      { length: this.monthSpan },
+      (e, r) => this.renderMonth(m(this.month, r))
+    );
+    return this.monthSpan === 2 ? l`<div class="months">${t}</div>` : t[0];
+  }
+  renderMonth(t) {
+    const e = q(t.year, t.month, U(this.resolvedLocale));
+    return l`<table
+      role="grid"
+      aria-label=${this.format({ month: "long", year: "numeric" }, t)}
+      @keydown=${this.onDayKeyDown}
+    >
+      <thead>
+        <tr>
+          ${e[0].map(
+      (r) => l`<th scope="col">
+                <abbr title=${this.format({ weekday: "long" }, r)}
+                  >${this.format({ weekday: "short" }, r)}</abbr
+                >
+              </th>`
+    )}
+        </tr>
+      </thead>
+      <tbody>
+        ${e.map(
+      (r) => l`<tr>
+              ${r.map((o) => this.renderDay(o, t))}
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  /** The panel the title opens: the years, and the twelve months of one. */
+  renderPicker() {
+    const t = Y(), { year: e } = this.focused, r = k(), { first: o, last: i } = this.yearRange, h = Array.from({ length: i - o + 1 }, (s, n) => o + n), f = Array.from({ length: 12 }, (s, n) => {
+      const p = n + 1, w = { year: e, month: p, day: 1 };
+      return {
+        month: p,
+        label: this.format({ month: "short" }, w),
+        fullLabel: this.format({ month: "long", year: "numeric" }, w),
+        selected: p === this.month.month && e === this.month.year,
+        current: p === r.month && e === r.year,
+        disabled: this.isSpanOutOfBounds(w, {
+          year: e,
+          month: p,
+          day: $(e, p)
+        })
+      };
+    }), v = [0, 3, 6, 9].map((s) => f.slice(s, s + 3));
+    return l`<div class="month-year">
+      <div class="years" role="listbox" aria-label=${t.chooseYear} @keydown=${this.onYearKeyDown}>
+        ${h.map(
+      (s) => l`<div
+              class="year"
+              role="option"
+              data-year=${s}
+              aria-selected=${s === e ? "true" : "false"}
+              tabindex=${s === e ? 0 : -1}
+              @click=${() => this.chooseYear(s)}
+            >
+              ${s}
+            </div>`
+    )}
+      </div>
+
+      <table role="grid" class="wide" aria-label=${t.chooseMonth} @keydown=${this.onPickerKeyDown}>
+        <tbody>
+          ${v.map(
+      (s) => l`<tr>
+                ${s.map(
+        (n) => l`<td
+                      role="gridcell"
+                      class=${A({
+          cell: !0,
+          selected: n.selected,
+          current: n.current
+        })}
+                      data-key=${`${e}-${n.month}`}
+                      tabindex=${n.month === this.focused.month ? 0 : -1}
+                      aria-selected=${n.selected ? "true" : "false"}
+                      aria-disabled=${n.disabled ? "true" : D}
+                      aria-label=${n.fullLabel}
+                      @click=${() => {
+          n.disabled || this.chooseMonth(n.month);
+        }}
+                    >
+                      ${n.label}
+                    </td>`
+      )}
+              </tr>`
+    )}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  render() {
+    const t = Y(), e = this.view === "day" ? this.format({ month: "long", year: "numeric" }, this.month) : String(this.focused.year);
+    return l`<div
+      part="base"
+      class=${A({ calendar: !0, two: this.monthSpan === 2 })}
+      role="group"
+      aria-label=${this.label || (this.range ? t.selectPeriod : t.selectDate)}
+    >
+      <span id=${this.liveId} class="visually-hidden" aria-live="polite">${e}</span>
+      ${this.renderHeader()}
+      <div class="body">${this.view === "day" ? this.renderDays() : this.renderPicker()}</div>
+    </div>`;
+  }
+}
+u([
+  T()
+], d.prototype, "view");
+u([
+  T()
+], d.prototype, "month");
+u([
+  T()
+], d.prototype, "focused");
+u([
+  T()
+], d.prototype, "anchor");
+u([
+  b({ type: String, reflect: !0 })
+], d.prototype, "value");
+u([
+  b({ type: Boolean, reflect: !0 })
+], d.prototype, "range");
+u([
+  b({ type: String })
+], d.prototype, "min");
+u([
+  b({ type: String })
+], d.prototype, "max");
+u([
+  b({ type: String })
+], d.prototype, "locale");
+u([
+  b({ type: Number, reflect: !0 })
+], d.prototype, "months");
+u([
+  b({ type: String })
+], d.prototype, "label");
+O("kt-calendar", d);
+export {
+  d as K,
+  H as a,
+  N as b,
+  c,
+  $ as d,
+  L as e,
+  S as f,
+  m as g,
+  g as h,
+  x as p,
+  k as t
+};
+//# sourceMappingURL=kt-calendar-CtwOby1R.js.map