@editora/ui-core 0.1.25 → 0.2.1

package/dist/{calendar-B3PUKHQm.mjs → calendar-DkSDFg33.mjs}

@@ -170,37 +170,38 @@ function Le(r, e) {
 function Be(r, e) {
   const t = Pe(r), n = `${t}::${e || ""}`, a = se.get(n);
   if (a) return a;
-  const i = Ee[t], s = Le(e, t), d = { ...i, ...s };
-  return se.set(n, d), d;
+  const i = Ee[t], s = Le(e, t), l = { ...i, ...s };
+  return se.set(n, l), l;
 }
 const Fe = `
   :host {
-    --ui-calendar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-calendar-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-calendar-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-calendar-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-calendar-text: var(--ui-color-text, #0f172a);
     --ui-calendar-muted: var(--ui-color-muted, #526175);
     --ui-calendar-accent: var(--ui-color-primary, #2563eb);
 
-    --ui-calendar-radius: 14px;
+    --ui-calendar-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-calendar-shadow: none;
     --ui-calendar-gap: 10px;
-    --ui-calendar-day-radius: 10px;
-    --ui-calendar-day-hover-bg: color-mix(in srgb, var(--ui-calendar-accent) 10%, transparent);
-    --ui-calendar-selected-bg: color-mix(in srgb, var(--ui-calendar-accent) 14%, transparent);
-    --ui-calendar-selected-border: color-mix(in srgb, var(--ui-calendar-accent) 44%, transparent);
+    --ui-calendar-day-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-calendar-day-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-calendar-accent) 10%, transparent));
+    --ui-calendar-selected-bg: var(--ui-calendar-accent);
+    --ui-calendar-selected-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-calendar-selected-border: var(--ui-calendar-accent);
     --ui-calendar-today-ring: color-mix(in srgb, var(--ui-calendar-accent) 56%, transparent);
     --ui-calendar-range-bg: color-mix(in srgb, var(--ui-calendar-accent) 9%, transparent);
     --ui-calendar-range-edge: color-mix(in srgb, var(--ui-calendar-accent) 20%, transparent);
     --ui-calendar-disabled-opacity: 0.45;
 
-    --ui-calendar-day-height: 52px;
+    --ui-calendar-day-height: 40px;
     --ui-calendar-day-font-size: 12px;
     --ui-calendar-weekday-font-size: 11px;
     --ui-calendar-title-font-size: 14px;
     --ui-calendar-day-padding-block: 6px;
     --ui-calendar-day-padding-inline: 6px;
     --ui-calendar-frame-padding: 12px;
-    --ui-calendar-week-gap: 6px;
+    --ui-calendar-week-gap: 2px;
     --ui-calendar-control-height: 30px;
 
     display: block;
@@ -439,7 +440,7 @@ const Fe = `
     border: 1px solid color-mix(in srgb, var(--ui-calendar-border) 84%, transparent);
     border-radius: 12px;
     background: color-mix(in srgb, var(--ui-calendar-bg) 96%, transparent);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+    box-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.1));
     padding: 10px;
     display: grid;
     gap: 8px;
@@ -476,6 +477,7 @@ const Fe = `
   .picker-month[data-active="true"] {
     border-color: var(--ui-calendar-selected-border);
     background: var(--ui-calendar-selected-bg);
+    color: var(--ui-calendar-selected-color);
   }
 
   .grid-wrap {
@@ -526,11 +528,11 @@ const Fe = `
   }
 
   .day {
-    border: 1px solid color-mix(in srgb, var(--ui-calendar-border) 78%, transparent);
+    border: 1px solid transparent;
     border-radius: var(--ui-calendar-day-radius);
     min-block-size: var(--ui-calendar-day-height);
     padding: var(--ui-calendar-day-padding-block) var(--ui-calendar-day-padding-inline);
-    background: color-mix(in srgb, var(--ui-calendar-bg) 98%, transparent);
+    background: transparent;
     color: var(--ui-calendar-text);
     display: grid;
     align-content: center;
@@ -544,13 +546,11 @@ const Fe = `
   }
 
   .day:hover {
-    border-color: color-mix(in srgb, var(--ui-calendar-accent) 34%, var(--ui-calendar-border));
     background: var(--ui-calendar-day-hover-bg);
   }
 
   .day[data-outside="true"] {
-    color: color-mix(in srgb, var(--ui-calendar-muted) 88%, transparent);
-    background: color-mix(in srgb, var(--ui-calendar-bg) 92%, transparent);
+    color: var(--ui-calendar-muted);
   }
 
   .day[data-today="true"] {
@@ -560,17 +560,19 @@ const Fe = `
   .day[data-selected="true"] {
     border-color: var(--ui-calendar-selected-border);
     background: var(--ui-calendar-selected-bg);
+    color: var(--ui-calendar-selected-color);
   }
 
   .day[data-range="true"] {
     background: var(--ui-calendar-range-bg);
-    border-color: color-mix(in srgb, var(--ui-calendar-accent) 26%, var(--ui-calendar-border));
+    border-color: transparent;
     border-radius: 0;
   }
 
   .day[data-range-start="true"],
   .day[data-range-end="true"] {
-    background: var(--ui-calendar-range-edge);
+    background: var(--ui-calendar-selected-bg);
+    color: var(--ui-calendar-selected-color);
     border-color: var(--ui-calendar-selected-border);
     border-radius: var(--ui-calendar-day-radius);
   }
@@ -601,7 +603,7 @@ const Fe = `
 
   .day-number {
     font-size: var(--ui-calendar-day-font-size);
-    font-weight: 650;
+    font-weight: 500;
     line-height: 1;
     justify-self: center;
   }
@@ -639,6 +641,14 @@ const Fe = `
     text-overflow: ellipsis;
   }
 
+  /* Events are drawn over the day button: on a selected (solid) day they follow its text colour. */
+  .day-cell[data-selected="true"] .event-badge,
+  .day-cell[data-selected="true"] .event-count {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-calendar-selected-color) 60%, transparent);
+    color: var(--ui-calendar-selected-color);
+  }
+
   .event-count {
     inline-size: 16px;
     block-size: 16px;
@@ -667,7 +677,7 @@ const Fe = `
     border-radius: 8px;
     border: 1px solid color-mix(in srgb, var(--ui-calendar-border) 80%, transparent);
     background: color-mix(in srgb, var(--ui-calendar-bg) 98%, #ffffff 2%);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
+    box-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.14));
     color: var(--ui-calendar-text);
     font: 500 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     /* Not drawn at all until its day is hovered or focused, so a hidden tooltip near an edge cannot widen the page. */
@@ -852,7 +862,7 @@ const Fe = `
     from { background-position: 120% 0; }
     to { background-position: -120% 0; }
   }
-`, q = {
+`, K = {
   default: "var(--ui-color-primary, #2563eb)",
   info: "var(--ui-color-info, #0e7490)",
   success: "var(--ui-color-success, #15803d)",
@@ -909,23 +919,23 @@ function He(r, e) {
   const t = c(r);
   return t ? b(P(t, e)) : r;
 }
-function de(r, e) {
+function le(r, e) {
   return { y: r, m: e, d: 1 };
 }
 function Ne(r, e) {
   return { y: r, m: e, d: F(r, e) };
 }
-function le(r) {
+function de(r) {
   const e = c(r);
   return e ? B(e).getUTCDay() : 0;
 }
-function W(r, e) {
+function J(r, e) {
   if (r == null || r === "") return e;
   const t = Number(r);
   return Number.isFinite(t) ? Math.trunc(t) : e;
 }
 function ce(r, e) {
-  const t = W(r, e);
+  const t = J(r, e);
   return t < 1 ? e : t;
 }
 function Ye(r, e) {
@@ -936,7 +946,7 @@ function Ye(r, e) {
 function m(r) {
   return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function K(r, e, t) {
+function W(r, e, t) {
   return w(r, e) >= 0 && w(r, t) <= 0;
 }
 function $(r, e) {
@@ -1038,16 +1048,16 @@ class Je extends Te {
       i -= 12, a += 1;
     let s = !1;
     if (String(a) !== (this.getAttribute("year") || "") && (this.setAttribute("year", String(a)), s = !0), String(i) !== (this.getAttribute("month") || "") && (this.setAttribute("month", String(i)), s = !0), s) {
-      const d = { year: a, month: i, source: n };
+      const l = { year: a, month: i, source: n };
       this.dispatchEvent(
         new CustomEvent("month-change", {
-          detail: d,
+          detail: l,
           bubbles: !0,
           composed: !0
         })
       ), this.dispatchEvent(
         new CustomEvent("ui-month-change", {
-          detail: d,
+          detail: l,
           bubbles: !0,
           composed: !0
         })
@@ -1075,7 +1085,7 @@ class Je extends Te {
     }
   }
   _resolvedView() {
-    const e = /* @__PURE__ */ new Date(), t = W(this.getAttribute("year"), e.getFullYear()), n = W(this.getAttribute("month"), e.getMonth() + 1);
+    const e = /* @__PURE__ */ new Date(), t = J(this.getAttribute("year"), e.getFullYear()), n = J(this.getAttribute("month"), e.getMonth() + 1);
     return {
       year: t,
       month: O(n, 1, 12)
@@ -1094,7 +1104,7 @@ class Je extends Te {
     return e ? b(e) : null;
   }
   _monthHasAllowedDay(e, t, n, a) {
-    const i = b(de(e, t)), s = b(Ne(e, t));
+    const i = b(le(e, t)), s = b(Ne(e, t));
     return !(n && w(s, n) < 0 || a && w(i, a) > 0);
   }
   _resolveSelectionMode() {
@@ -1174,7 +1184,7 @@ class Je extends Te {
         if (!Array.isArray(i))
           n = { mode: e, values: [] };
         else {
-          const s = pe(i.map((d) => String(d || "")));
+          const s = pe(i.map((l) => String(l || "")));
           n = { mode: e, values: s };
         }
       } catch {
@@ -1184,7 +1194,7 @@ class Je extends Te {
     }
     if (e === "range") {
       try {
-        const i = JSON.parse(t), s = i && typeof i == "object" ? String(i.start || "") : "", d = i && typeof i == "object" ? String(i.end || "") : "", o = c(s), p = c(d), u = o ? b(o) : null, h = p ? b(p) : null;
+        const i = JSON.parse(t), s = i && typeof i == "object" ? String(i.start || "") : "", l = i && typeof i == "object" ? String(i.end || "") : "", o = c(s), p = c(l), u = o ? b(o) : null, h = p ? b(p) : null;
         if (u && h) {
           const f = $(u, h);
           n = { mode: e, start: f.start, end: f.end };
@@ -1247,8 +1257,8 @@ class Je extends Te {
     if (!c(e)) return;
     const a = this._resolveSelectionMode(), { minIso: i, maxIso: s } = this._resolveBounds();
     if (this._isDateOutOfBounds(e, i, s)) return;
-    const d = this._isReadonly();
-    if (this._isInteractionDisabled() || d) return;
+    const l = this._isReadonly();
+    if (this._isInteractionDisabled() || l) return;
     let o = this._normalizeValueForMode(a);
     if (a === "single")
       o = { mode: a, value: e };
@@ -1258,18 +1268,18 @@ class Je extends Te {
     } else {
       const h = this._normalizeValueForMode("range"), f = h.start, _ = h.end;
       if (t) {
-        const l = this._rangeKeyboardAnchor || f || this._focusedIso || e;
-        if (!c(l))
+        const d = this._rangeKeyboardAnchor || f || this._focusedIso || e;
+        if (!c(d))
           this._rangeKeyboardAnchor = e, o = { mode: a, start: e, end: null };
         else {
-          const v = $(l, e);
-          o = { mode: a, start: v.start, end: v.end };
+          const g = $(d, e);
+          o = { mode: a, start: g.start, end: g.end };
         }
       } else if (!f || f && _)
         this._rangeKeyboardAnchor = e, o = { mode: a, start: e, end: null };
       else if (f && !_) {
-        const l = $(f, e);
-        o = { mode: a, start: l.start, end: l.end };
+        const d = $(f, e);
+        o = { mode: a, start: d.start, end: d.end };
       }
     }
     const p = this.getAttribute("value"), u = this._serializeSelection(o);
@@ -1300,8 +1310,8 @@ class Je extends Te {
   _weekdayLabels(e, t) {
     const n = [], a = new Intl.DateTimeFormat(e, { weekday: "short", timeZone: "UTC" });
     for (let i = 0; i < 7; i += 1) {
-      const s = (t + i) % 7, d = new Date(Date.UTC(2024, 0, 7 + s));
-      n.push(a.format(d));
+      const s = (t + i) % 7, l = new Date(Date.UTC(2024, 0, 7 + s));
+      n.push(a.format(l));
     }
     return n;
   }
@@ -1329,10 +1339,10 @@ class Je extends Te {
         const n = [];
         t.forEach((a) => {
           if (!a || typeof a != "object") return;
-          const i = String(a.date || "").trim(), s = c(i), d = s ? b(s) : "";
-          if (!d) return;
+          const i = String(a.date || "").trim(), s = c(i), l = s ? b(s) : "";
+          if (!l) return;
           const o = String(a.tone || "default"), p = o === "success" || o === "warning" || o === "danger" || o === "info" ? o : "default", u = a.title != null ? String(a.title) : void 0;
-          n.push({ date: d, title: u, tone: p });
+          n.push({ date: l, title: u, tone: p });
         }), this._eventsParsedCache = n, n.forEach((a) => {
           this._eventsByDateCache.has(a.date) || this._eventsByDateCache.set(a.date, []), this._eventsByDateCache.get(a.date).push(a);
         });
@@ -1340,20 +1350,20 @@ class Je extends Te {
       }
   }
   _buildCells(e, t, n, a, i, s) {
-    const d = b(de(e, t)), p = (le(d) - n + 7) % 7, u = c(d);
+    const l = b(le(e, t)), p = (de(l) - n + 7) % 7, u = c(l);
     if (!u) return [];
     const h = B(u);
     h.setUTCDate(h.getUTCDate() - p);
     const f = [];
     for (let _ = 0; _ < 42; _ += 1) {
       _ > 0 && h.setUTCDate(h.getUTCDate() + 1);
-      const l = fe(h), v = b(l), D = l.y !== e || l.m !== t, y = this._isDateBlocked(v, D, a, i);
+      const d = fe(h), g = b(d), D = d.y !== e || d.m !== t, y = this._isDateBlocked(g, D, a, i);
       f.push({
-        iso: v,
-        parts: l,
+        iso: g,
+        parts: d,
         outside: D,
         disabled: y,
-        today: v === s
+        today: g === s
       });
     }
     return f;
@@ -1368,8 +1378,8 @@ class Je extends Te {
     };
     let s = i(this._focusedIso);
     if (s || (t.mode === "single" && (s = i(t.value)), !s && t.mode === "range" && (s = i(t.end || t.start)), !s && t.mode === "multiple" && (s = i(t.values[0])), s || (s = i(n)), s)) return s;
-    const d = e.find((o) => !o.disabled);
-    return d ? d.iso : e[0]?.iso || "";
+    const l = e.find((o) => !o.disabled);
+    return l ? l.iso : e[0]?.iso || "";
   }
   _focusDateButton(e) {
     if (!e || this.root.activeElement?.getAttribute("data-date") === e) return;
@@ -1390,7 +1400,7 @@ class Je extends Te {
     a && (this.goToMonth(a.y, a.m, "keyboard"), this._focusedIso = n, this._shouldRefocus = !0, this.requestRender());
   }
   _focusWeekBoundary(e, t, n) {
-    const i = (le(e) - n + 7) % 7, s = t === "start" ? -i : 6 - i;
+    const i = (de(e) - n + 7) % 7, s = t === "start" ? -i : 6 - i;
     this._moveFocusByDays(e, s, !1);
   }
   _onPointerOver(e) {
@@ -1401,8 +1411,8 @@ class Je extends Te {
     if (!a) return;
     const i = a.getAttribute("data-date") || "";
     if (!c(i)) return;
-    const s = a.getAttribute("data-outside") === "true", { minIso: d, maxIso: o } = this._resolveBounds();
-    this._isDateBlocked(i, s, d, o) || this._hoverIso !== i && (this._hoverIso = i, this.requestRender());
+    const s = a.getAttribute("data-outside") === "true", { minIso: l, maxIso: o } = this._resolveBounds();
+    this._isDateBlocked(i, s, l, o) || this._hoverIso !== i && (this._hoverIso = i, this.requestRender());
   }
   _onMouseLeave() {
     this._hoverIso != null && (this._hoverIso = null, this.requestRender());
@@ -1422,16 +1432,16 @@ class Je extends Te {
   _onClick(e) {
     const t = e.target;
     if (!t) return;
-    const n = t.closest("[data-action]"), a = n?.getAttribute("data-action") || "", { year: i, month: s } = this._resolvedView(), d = this._todayIso(), o = c(d);
+    const n = t.closest("[data-action]"), a = n?.getAttribute("data-action") || "", { year: i, month: s } = this._resolvedView(), l = this._todayIso(), o = c(l);
     if (a === "prev-month" || a === "next-month") {
       if (this._isInteractionDisabled()) return;
-      const l = a === "prev-month" ? -1 : 1, D = (this._focusedIso ? c(this._focusedIso) : null) || { y: i, m: s, d: 1 }, y = P(D, l);
+      const d = a === "prev-month" ? -1 : 1, D = (this._focusedIso ? c(this._focusedIso) : null) || { y: i, m: s, d: 1 }, y = P(D, d);
       this.goToMonth(y.y, y.m, "pointer"), this._focusedIso = b({ y: y.y, m: y.m, d: O(D.d, 1, F(y.y, y.m)) }), this._shouldRefocus = !0, this.requestRender();
       return;
     }
     if (a === "today") {
       if (this._isInteractionDisabled()) return;
-      this.goToMonth(o.y, o.m, "pointer"), this._focusedIso = d, this._shouldRefocus = !0, this._isReadonly() ? this.requestRender() : this._applySelection(d, !1, "pointer");
+      this.goToMonth(o.y, o.m, "pointer"), this._focusedIso = l, this._shouldRefocus = !0, this._isReadonly() ? this.requestRender() : this._applySelection(l, !1, "pointer");
       return;
     }
     if (a === "toggle-monthyear") {
@@ -1440,15 +1450,15 @@ class Je extends Te {
     }
     if (a === "picker-prev-year" || a === "picker-next-year") {
       if (this._isInteractionDisabled()) return;
-      const l = a === "picker-prev-year" ? -1 : 1;
-      this.goToMonth(i + l, s, "pointer"), this._pickerOpen = !0, this._shouldRefocus = !0, this.requestRender();
+      const d = a === "picker-prev-year" ? -1 : 1;
+      this.goToMonth(i + d, s, "pointer"), this._pickerOpen = !0, this._shouldRefocus = !0, this.requestRender();
       return;
     }
     if (a === "pick-month") {
       if (this._isInteractionDisabled()) return;
-      const l = Number(n?.getAttribute("data-month") || "");
-      if (!Number.isInteger(l) || l < 1 || l > 12) return;
-      this.goToMonth(i, l, "pointer"), this._pickerOpen = !1, this._shouldRefocus = !0, this.requestRender();
+      const d = Number(n?.getAttribute("data-month") || "");
+      if (!Number.isInteger(d) || d < 1 || d > 12) return;
+      this.goToMonth(i, d, "pointer"), this._pickerOpen = !1, this._shouldRefocus = !0, this.requestRender();
       return;
     }
     const p = t.closest(".day");
@@ -1458,11 +1468,11 @@ class Je extends Te {
     const h = p.getAttribute("data-outside") === "true", { minIso: f, maxIso: _ } = this._resolveBounds();
     if (!this._isDateBlocked(u, h, f, _)) {
       if (h) {
-        const l = this._resolveOutsideClickMode();
-        if (l === "none") return;
-        if (l === "navigate") {
-          const v = c(u);
-          this.goToMonth(v.y, v.m, "pointer");
+        const d = this._resolveOutsideClickMode();
+        if (d === "none") return;
+        if (d === "navigate") {
+          const g = c(u);
+          this.goToMonth(g.y, g.m, "pointer");
         }
       }
       if (this._isReadonly()) {
@@ -1481,21 +1491,21 @@ class Je extends Te {
     if (!n) return;
     const a = n.getAttribute("data-date") || "";
     if (!c(a)) return;
-    const i = ue(this.getAttribute("week-start"), this._resolveLocale()), s = this._direction() === "rtl", d = e.shiftKey;
+    const i = ue(this.getAttribute("week-start"), this._resolveLocale()), s = this._direction() === "rtl", l = e.shiftKey;
     if (e.key === "ArrowRight") {
-      e.preventDefault(), this._moveFocusByDays(a, s ? -1 : 1, d);
+      e.preventDefault(), this._moveFocusByDays(a, s ? -1 : 1, l);
       return;
     }
     if (e.key === "ArrowLeft") {
-      e.preventDefault(), this._moveFocusByDays(a, s ? 1 : -1, d);
+      e.preventDefault(), this._moveFocusByDays(a, s ? 1 : -1, l);
       return;
     }
     if (e.key === "ArrowDown") {
-      e.preventDefault(), this._moveFocusByDays(a, 7, d);
+      e.preventDefault(), this._moveFocusByDays(a, 7, l);
       return;
     }
     if (e.key === "ArrowUp") {
-      e.preventDefault(), this._moveFocusByDays(a, -7, d);
+      e.preventDefault(), this._moveFocusByDays(a, -7, l);
       return;
     }
     if (e.key === "Home") {
@@ -1526,63 +1536,63 @@ class Je extends Te {
     }
   }
   render() {
-    const e = this._resolveLocale(), t = this._translations(), n = ue(this.getAttribute("week-start"), e), { year: a, month: i } = this._resolvedView(), s = this._resolveSelectionMode(), { minIso: d, maxIso: o } = this._resolveBounds(), p = this._todayIso(), u = this._resolveEventsDisplay(), h = this._eventsMax(), f = this._resolveCalendarSize(), _ = this._resolveTone(), l = this._resolveState(), v = this._isInteractionDisabled(), D = this._resolveLabel();
-    _ ? this.setAttribute("tone", _) : this.removeAttribute("tone"), l !== "idle" ? this.setAttribute("state", l) : this.removeAttribute("state"), l === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy"), this._ensureEventsCache();
-    const y = this._normalizeValueForMode(s), J = this._buildCells(a, i, n, d, o, p);
-    this._focusedIso = this._resolveFocusIso(J, y, p);
-    const U = this._monthLabel(a, i, e), Z = P({ y: a, m: i, d: 1 }, -1), X = P({ y: a, m: i, d: 1 }, 1), ge = this._monthHasAllowedDay(Z.y, Z.m, d, o), ve = this._monthHasAllowedDay(X.y, X.m, d, o), be = this._weekdayLabels(e, n), G = s === "range" ? y : null, S = G?.start || null, M = G?.end || null, me = s === "multiple" ? new Set(y.values) : null;
+    const e = this._resolveLocale(), t = this._translations(), n = ue(this.getAttribute("week-start"), e), { year: a, month: i } = this._resolvedView(), s = this._resolveSelectionMode(), { minIso: l, maxIso: o } = this._resolveBounds(), p = this._todayIso(), u = this._resolveEventsDisplay(), h = this._eventsMax(), f = this._resolveCalendarSize(), _ = this._resolveTone(), d = this._resolveState(), g = this._isInteractionDisabled(), D = this._resolveLabel();
+    _ ? this.setAttribute("tone", _) : this.removeAttribute("tone"), d !== "idle" ? this.setAttribute("state", d) : this.removeAttribute("state"), d === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy"), this._ensureEventsCache();
+    const y = this._normalizeValueForMode(s), Z = this._buildCells(a, i, n, l, o, p);
+    this._focusedIso = this._resolveFocusIso(Z, y, p);
+    const U = this._monthLabel(a, i, e), X = P({ y: a, m: i, d: 1 }, -1), G = P({ y: a, m: i, d: 1 }, 1), ve = this._monthHasAllowedDay(X.y, X.m, l, o), ge = this._monthHasAllowedDay(G.y, G.m, l, o), be = this._weekdayLabels(e, n), Q = s === "range" ? y : null, S = Q?.start || null, M = Q?.end || null, me = s === "multiple" ? new Set(y.values) : null;
     let H = null, N = null;
     if (s === "range" && S && !M && this._hoverIso && c(this._hoverIso)) {
       const x = $(S, this._hoverIso);
       H = x.start, N = x.end;
     }
-    const Q = [];
+    const ee = [];
     for (let x = 0; x < 6; x += 1) {
-      const I = J.slice(x * 7, x * 7 + 7).map((g) => {
-        const k = this._eventsByDateCache.get(g.iso) || [], De = this._dayAriaLabel(g.iso, e);
+      const I = Z.slice(x * 7, x * 7 + 7).map((v) => {
+        const k = this._eventsByDateCache.get(v.iso) || [], De = this._dayAriaLabel(v.iso, e);
         let A = !1;
-        s === "single" ? A = y.value === g.iso : s === "multiple" ? A = me?.has(g.iso) || !1 : S && M && (A = K(g.iso, S, M));
-        const T = !!(S && M && K(g.iso, S, M)), Y = !!(S && g.iso === S), j = !!(M && g.iso === M), Se = !!(H && N && K(g.iso, H, N)), Me = !g.disabled && g.iso === this._focusedIso ? 0 : -1;
+        s === "single" ? A = y.value === v.iso : s === "multiple" ? A = me?.has(v.iso) || !1 : S && M && (A = W(v.iso, S, M));
+        const T = !!(S && M && W(v.iso, S, M)), Y = !!(S && v.iso === S), j = !!(M && v.iso === M), Se = !!(H && N && W(v.iso, H, N)), Me = !v.disabled && v.iso === this._focusedIso ? 0 : -1;
         let C = "";
-        k.length > 0 && (u === "count" ? C = `<span class="event-count" part="event-more" style="--event-tone:${q[k[0].tone || "default"]}">${k.length}</span>` : u === "badges" ? C = k.slice(0, h).map((z) => {
-          const V = m(z.title || t.event);
-          return `<span class="event-badge" part="event-dot" style="--event-tone:${q[z.tone || "default"]}" title="${V}">${V}</span>`;
-        }).join("") : C = k.slice(0, h).map((z) => `<span class="event-dot" part="event-dot" style="--event-tone:${q[z.tone || "default"]}"></span>`).join(""), k.length > h && u !== "count" && (C += `<span class="event-more" part="event-more">+${k.length - h}</span>`));
-        const ae = `ui-calendar-tip-${g.iso}`, ne = k.length ? k.map((R) => m(R.title || t.event)).join("<br/>") : "", re = ne.length > 0, Ce = C ? `<span class="events" part="events" aria-hidden="true">${C}</span>` : "", Ie = re ? `<span class="tooltip" part="tooltip" id="${ae}">${ne}</span>` : "", ie = A || T || Y || j, Ae = T || Y || j ? "day range" : "day";
+        k.length > 0 && (u === "count" ? C = `<span class="event-count" part="event-more" style="--event-tone:${K[k[0].tone || "default"]}">${k.length}</span>` : u === "badges" ? C = k.slice(0, h).map((z) => {
+          const q = m(z.title || t.event);
+          return `<span class="event-badge" part="event-dot" style="--event-tone:${K[z.tone || "default"]}" title="${q}">${q}</span>`;
+        }).join("") : C = k.slice(0, h).map((z) => `<span class="event-dot" part="event-dot" style="--event-tone:${K[z.tone || "default"]}"></span>`).join(""), k.length > h && u !== "count" && (C += `<span class="event-more" part="event-more">+${k.length - h}</span>`));
+        const ne = `ui-calendar-tip-${v.iso}`, re = k.length ? k.map((R) => m(R.title || t.event)).join("<br/>") : "", ie = re.length > 0, Ce = C ? `<span class="events" part="events" aria-hidden="true">${C}</span>` : "", Ie = ie ? `<span class="tooltip" part="tooltip" id="${ne}">${re}</span>` : "", V = A || T || Y || j, Ae = T || Y || j ? "day range" : "day";
         return `
-            <div class="day-cell" part="day-cell"${C ? ` data-events="${u}"` : ""}>
+            <div class="day-cell" part="day-cell"${C ? ` data-events="${u}"` : ""}${V ? ' data-selected="true"' : ""}>
             <button
               type="button"
               class="day"
               part="${Ae}"
               role="gridcell"
-              data-date="${g.iso}"
-              data-outside="${g.outside ? "true" : "false"}"
-              data-disabled="${g.disabled ? "true" : "false"}"
-              data-today="${g.today ? "true" : "false"}"
-              data-selected="${ie ? "true" : "false"}"
+              data-date="${v.iso}"
+              data-outside="${v.outside ? "true" : "false"}"
+              data-disabled="${v.disabled ? "true" : "false"}"
+              data-today="${v.today ? "true" : "false"}"
+              data-selected="${V ? "true" : "false"}"
               data-range="${T ? "true" : "false"}"
               data-range-start="${Y ? "true" : "false"}"
               data-range-end="${j ? "true" : "false"}"
               data-range-preview="${!T && Se ? "true" : "false"}"
-              aria-selected="${ie ? "true" : "false"}"
-              aria-disabled="${g.disabled ? "true" : "false"}"
-              ${g.today ? 'aria-current="date"' : ""}
+              aria-selected="${V ? "true" : "false"}"
+              aria-disabled="${v.disabled ? "true" : "false"}"
+              ${v.today ? 'aria-current="date"' : ""}
               aria-label="${m(De)}"
-              ${re ? `aria-describedby="${ae}"` : ""}
+              ${ie ? `aria-describedby="${ne}"` : ""}
               tabindex="${Me}"
             >
-              <span class="day-number" part="day-number">${g.parts.d}</span>
+              <span class="day-number" part="day-number">${v.parts.d}</span>
             </button>
             ${Ce}
             ${Ie}
             </div>
           `;
       }).join("");
-      Q.push(`<div class="week" role="row">${I}</div>`);
+      ee.push(`<div class="week" role="row">${I}</div>`);
     }
-    const ye = this._monthPickerLabels(e).map((x, te) => {
-      const I = te + 1;
+    const ye = this._monthPickerLabels(e).map((x, ae) => {
+      const I = ae + 1;
       return `
         <button
           type="button"
@@ -1591,30 +1601,30 @@ class Je extends Te {
           data-action="pick-month"
           data-month="${I}"
           data-active="${I === i ? "true" : "false"}"
-          ${v ? "disabled" : ""}
+          ${g ? "disabled" : ""}
         >
           ${x}
         </button>
       `;
-    }).join(""), _e = be.map((x) => `<span class="weekday" part="weekday" role="columnheader">${m(x)}</span>`).join(""), xe = this._showTodayButton() ? `<button type="button" class="today-btn" part="today" data-action="today" ${v ? "disabled" : ""}>${m(t.today)}</button>` : "", ee = l === "loading" ? t.syncingSchedule : l === "error" ? t.unableToSyncEvents : l === "success" ? t.scheduleSynced : "";
+    }).join(""), _e = be.map((x) => `<span class="weekday" part="weekday" role="columnheader">${m(x)}</span>`).join(""), xe = this._showTodayButton() ? `<button type="button" class="today-btn" part="today" data-action="today" ${g ? "disabled" : ""}>${m(t.today)}</button>` : "", te = d === "loading" ? t.syncingSchedule : d === "error" ? t.unableToSyncEvents : d === "success" ? t.scheduleSynced : "";
     this.setContent(`
       <style>${Fe}</style>
       <section
         class="frame"
         part="frame"
         data-size="${f}"
-        data-state="${l}"
-        aria-disabled="${v ? "true" : "false"}"
+        data-state="${d}"
+        aria-disabled="${g ? "true" : "false"}"
         aria-label="${m(D)}"
       >
         <div class="live-region" aria-live="polite" aria-atomic="true">${m(U)}</div>
 
         <header class="header" part="header">
           <div class="nav" part="nav">
-            <button type="button" class="nav-btn" part="prev" data-action="prev-month" ${!ge || v ? "disabled" : ""} aria-label="${m(t.previousMonth)}">
+            <button type="button" class="nav-btn" part="prev" data-action="prev-month" ${!ve || g ? "disabled" : ""} aria-label="${m(t.previousMonth)}">
               <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M14.7 6.3a1 1 0 0 1 0 1.4L10.41 12l4.29 4.3a1 1 0 1 1-1.42 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.42 0Z" fill="currentColor"/></svg>
             </button>
-            <button type="button" class="nav-btn" part="next" data-action="next-month" ${!ve || v ? "disabled" : ""} aria-label="${m(t.nextMonth)}">
+            <button type="button" class="nav-btn" part="next" data-action="next-month" ${!ge || g ? "disabled" : ""} aria-label="${m(t.nextMonth)}">
               <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M9.3 17.7a1 1 0 0 1 0-1.4L13.59 12 9.3 7.7a1 1 0 0 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0Z" fill="currentColor"/></svg>
             </button>
           </div>
@@ -1625,7 +1635,7 @@ class Je extends Te {
               class="title-btn"
               part="title monthyear"
               data-action="toggle-monthyear"
-              ${v ? "disabled" : ""}
+              ${g ? "disabled" : ""}
               aria-expanded="${this._pickerOpen ? "true" : "false"}"
               aria-label="${m(`${U}, ${t.chooseMonthYear}`)}"
             >
@@ -1634,9 +1644,9 @@ class Je extends Te {
             </button>
             <section class="monthyear-pop" part="monthyear" ${this._pickerOpen ? "" : "hidden"}>
               <div class="picker-header">
-                <button type="button" class="picker-year-btn" part="prev" data-action="picker-prev-year" ${v ? "disabled" : ""} aria-label="${m(t.previousYear)}">-</button>
+                <button type="button" class="picker-year-btn" part="prev" data-action="picker-prev-year" ${g ? "disabled" : ""} aria-label="${m(t.previousYear)}">-</button>
                 <span class="picker-year">${a}</span>
-                <button type="button" class="picker-year-btn" part="next" data-action="picker-next-year" ${v ? "disabled" : ""} aria-label="${m(t.nextYear)}">+</button>
+                <button type="button" class="picker-year-btn" part="next" data-action="picker-next-year" ${g ? "disabled" : ""} aria-label="${m(t.nextYear)}">+</button>
               </div>
               <div class="picker-months">${ye}</div>
             </section>
@@ -1647,14 +1657,14 @@ class Je extends Te {
           </div>
         </header>
 
-        <div class="status" part="status" ${ee ? "" : "hidden"}>
+        <div class="status" part="status" ${te ? "" : "hidden"}>
           <span class="status-dot" aria-hidden="true"></span>
-          <span>${m(ee)}</span>
+          <span>${m(te)}</span>
         </div>
 
         <div class="grid-wrap" part="grid" role="grid" aria-label="${m(D)}">
           <div class="weekdays" role="row">${_e}</div>
-          ${Q.join("")}
+          ${ee.join("")}
         </div>
       </section>
     `);
@@ -1676,5 +1686,5 @@ export {
   Ne as e,
   c as p,
   Be as r,
-  de as s
+  le as s
 };

package/dist/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-D-mXMgqc.js");exports.UICalendar=e.UICalendar;exports.addDaysISO=e.addDaysISO;exports.addMonthsISO=e.addMonthsISO;exports.compareISO=e.compareISO;exports.endOfMonth=e.endOfMonth;exports.parseISO=e.parseISO;exports.startOfMonth=e.startOfMonth;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-CzpWDxLc.js");exports.UICalendar=e.UICalendar;exports.addDaysISO=e.addDaysISO;exports.addMonthsISO=e.addMonthsISO;exports.compareISO=e.compareISO;exports.endOfMonth=e.endOfMonth;exports.parseISO=e.parseISO;exports.startOfMonth=e.startOfMonth;

package/dist/calendar.esm.js

@@ -1,4 +1,4 @@
-import { U as d, a as e, b as o, c as r, e as t, p as O, s as n } from "./calendar-B3PUKHQm.mjs";
+import { U as d, a as e, b as o, c as r, e as t, p as O, s as n } from "./calendar-DkSDFg33.mjs";
 export {
   d as UICalendar,
   e as addDaysISO,