@editora/ui-core 0.1.17 → 0.1.19

package/dist/date-time-picker.esm.js

@@ -1,7 +1,7 @@
 import { E as W } from "./ElementBase-909688f3.mjs";
 import { c as Y } from "./dismissable-layer-9c7e6b58.mjs";
 import { r as J } from "./calendar-2c11b824.mjs";
-import { r as G, e as Q, i as v, s as X, b as tt, f as et, t as it, n as R, d as st, p as F, o as N, a as nt, m as E, j as Z, k as j, q as y, l as rt, c as at } from "./date-time-utils-a2c7af25.mjs";
+import { r as G, e as Q, i as v, s as X, b as tt, f as et, t as it, n as R, d as st, p as F, o as N, a as rt, m as E, j as Z, k as j, q as y, l as nt, c as at } from "./date-time-utils-a2c7af25.mjs";
 import "./scroll-lock-31da444f.mjs";
 import "./positioner-e9770c66.mjs";
 let ot = 0;
@@ -288,6 +288,22 @@ const lt = `
     }
   }
 `, pt = `
+  .ui-date-time-picker-overlay-host {
+    --ui-dtp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-dtp-surface: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, var(--ui-color-surface-alt, #f8fafc))
+    );
+    --ui-dtp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dtp-accent: var(--ui-color-primary, #2563eb);
+    --ui-dtp-panel-radius: 14px;
+    --ui-dtp-shadow: none;
+    --ui-dtp-duration: 160ms;
+    --ui-dtp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
   .overlay { position: fixed; z-index: var(--ui-dtp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -589,8 +605,8 @@ class ht extends W {
     const s = new Date(t);
     if (!Number.isFinite(s.getTime()))
       return null;
-    const a = s.getFullYear(), o = String(s.getMonth() + 1).padStart(2, "0"), n = String(s.getDate()).padStart(2, "0");
-    return `${a}-${o}-${n}`;
+    const a = s.getFullYear(), o = String(s.getMonth() + 1).padStart(2, "0"), r = String(s.getDate()).padStart(2, "0");
+    return `${a}-${o}-${r}`;
   }
   _syncOpenAttribute(t) {
     this._syncing = !0;
@@ -649,15 +665,15 @@ class ht extends W {
   _clampState(t) {
     if (!t.date)
       return { date: null, time: t.time };
-    const e = this._minDate(), i = this._maxDate(), s = nt(t.date, e, i), a = t.time || "00:00";
-    let o = this._minDateTime(), n = this._maxDateTime();
-    if (o && n && E(o, n) > 0) {
-      const b = o;
-      o = n, n = b;
+    const e = this._minDate(), i = this._maxDate(), s = rt(t.date, e, i), a = t.time || "00:00";
+    let o = this._minDateTime(), r = this._maxDateTime();
+    if (o && r && E(o, r) > 0) {
+      const f = o;
+      o = r, r = f;
     }
-    let r = Z(s, a) || `${s}T00:00`;
-    o && E(r, o) < 0 && (r = o), n && E(r, n) > 0 && (r = n);
-    const d = j(r);
+    let n = Z(s, a) || `${s}T00:00`;
+    o && E(n, o) < 0 && (n = o), r && E(n, r) > 0 && (n = r);
+    const d = j(n);
     return d ? { date: d.date, time: d.time } : { date: s, time: a };
   }
   _commit(t, e) {
@@ -701,7 +717,7 @@ class ht extends W {
     if (this._overlay || typeof document > "u")
       return;
     const t = document.createElement("div");
-    t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), t.addEventListener("change", this._onOverlayCalendarBound), t.addEventListener("select", this._onOverlayCalendarBound), document.body.appendChild(t), this._overlay = t, this._syncOverlayHostZIndex(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, { passive: !0, capture: !0 }), this._isMobileSheet() && (this._releaseScrollLock = rt());
+    t.className = "ui-date-time-picker-overlay-host", t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), t.addEventListener("change", this._onOverlayCalendarBound), t.addEventListener("select", this._onOverlayCalendarBound), document.body.appendChild(t), this._overlay = t, this._syncOverlayHostZIndex(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, { passive: !0, capture: !0 }), this._isMobileSheet() && (this._releaseScrollLock = nt());
   }
   _syncOverlayHostZIndex() {
     if (!this._overlay || typeof window > "u")
@@ -743,21 +759,21 @@ class ht extends W {
     e.style.position = "absolute", e.style.top = `${Math.round(s.top)}px`, e.style.left = `${Math.round(s.left)}px`, e.setAttribute("data-placement", s.placement);
   }
   _timeOptions() {
-    const t = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (o, n) => {
-      const r = n + 1, d = t.hours % 12 || 12;
-      return `<option value="${r}" ${r === d ? "selected" : ""}>${p(r)}</option>`;
-    }).join("") : Array.from({ length: 24 }, (o, n) => `<option value="${n}" ${n === t.hours ? "selected" : ""}>${p(n)}</option>`).join(""), s = Array.from({ length: Math.ceil(60 / e) }, (o, n) => {
-      const r = Math.min(59, n * e);
-      return `<option value="${r}" ${r === t.minutes ? "selected" : ""}>${p(r)}</option>`;
+    const t = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (o, r) => {
+      const n = r + 1, d = t.hours % 12 || 12;
+      return `<option value="${n}" ${n === d ? "selected" : ""}>${p(n)}</option>`;
+    }).join("") : Array.from({ length: 24 }, (o, r) => `<option value="${r}" ${r === t.hours ? "selected" : ""}>${p(r)}</option>`).join(""), s = Array.from({ length: Math.ceil(60 / e) }, (o, r) => {
+      const n = Math.min(59, r * e);
+      return `<option value="${n}" ${n === t.minutes ? "selected" : ""}>${p(n)}</option>`;
     }).join(""), a = t.hours >= 12 ? "pm" : "am";
     return { hours: i, minutes: s, meridiem: a };
   }
   _renderSurfaceInner(t, e = !1) {
-    const i = this._translations(), s = this._timeOptions(), a = (this.getAttribute("label") || "").trim(), o = c(a), n = c(a || i.selectDate), r = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
+    const i = this._translations(), s = this._timeOptions(), a = (this.getAttribute("label") || "").trim(), o = c(a), r = c(a || i.selectDate), n = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
       <header class="head">
         <div>
           <p class="head-title" ${a ? "" : "hidden"}>${o}</p>
-          <p class="head-meta">${c(r || i.selectDate)}</p>
+          <p class="head-meta">${c(n || i.selectDate)}</p>
         </div>
       </header>
       <div class="content">
@@ -781,18 +797,18 @@ class ht extends W {
     return e ? d : `
       <style>${pt}</style>
       ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
-      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${n}" part="${t ? "sheet" : "popover"}">${d}</section>
+      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${r}" part="${t ? "sheet" : "popover"}">${d}</section>
     `;
   }
   _syncCalendar(t) {
-    const e = (n, r) => {
-      if (r == null || r === "") {
-        t.hasAttribute(n) && t.removeAttribute(n);
+    const e = (r, n) => {
+      if (n == null || n === "") {
+        t.hasAttribute(r) && t.removeAttribute(r);
         return;
       }
-      t.getAttribute(n) !== r && t.setAttribute(n, r);
-    }, i = (n, r) => {
-      r ? e(n, "") : e(n, null);
+      t.getAttribute(r) !== n && t.setAttribute(r, n);
+    }, i = (r, n) => {
+      n ? e(r, "") : e(r, null);
     };
     e("selection", "single"), e("value", this._pending.date), e("min", this.getAttribute("min")), e("max", this.getAttribute("max")), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
     const a = this.getAttribute("size") || "sm", o = t.classList.contains("dt-calendar-inline");
@@ -819,8 +835,8 @@ class ht extends W {
       return;
     let s = i[0], a = Math.abs(s - e);
     for (let o = 1; o < i.length; o += 1) {
-      const n = i[o], r = Math.abs(n - e);
-      r < a && (s = n, a = r);
+      const r = i[o], n = Math.abs(r - e);
+      n < a && (s = r, a = n);
     }
     t.value = String(s);
   }
@@ -839,14 +855,14 @@ class ht extends W {
     }
     const o = this._overlay.querySelector(".head-meta");
     o && (o.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : e.selectDate);
-    const n = this._overlay.querySelector(".dt-calendar");
-    n && this._syncCalendar(n);
-    const r = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, d = this._overlay.querySelector('select[data-segment="hours"]'), b = this._overlay.querySelector('select[data-segment="minutes"]'), m = this._overlay.querySelector('select[data-segment="meridiem"]');
+    const r = this._overlay.querySelector(".dt-calendar");
+    r && this._syncCalendar(r);
+    const n = y(this._pending.time || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, d = this._overlay.querySelector('select[data-segment="hours"]'), f = this._overlay.querySelector('select[data-segment="minutes"]'), m = this._overlay.querySelector('select[data-segment="meridiem"]');
     if (d) {
-      const l = this._is12h() ? r.hours % 12 || 12 : r.hours;
+      const l = this._is12h() ? n.hours % 12 || 12 : n.hours;
       this._setClosestOptionValue(d, l), d.disabled = this._isInteractionBlocked() || this._isReadonly();
     }
-    b && (this._setClosestOptionValue(b, r.minutes), b.disabled = this._isInteractionBlocked() || this._isReadonly()), m && (m.value = r.hours >= 12 ? "pm" : "am", m.disabled = this._isInteractionBlocked() || this._isReadonly());
+    f && (this._setClosestOptionValue(f, n.minutes), f.disabled = this._isInteractionBlocked() || this._isReadonly()), m && (m.value = n.hours >= 12 ? "pm" : "am", m.disabled = this._isInteractionBlocked() || this._isReadonly());
     const S = this._isInteractionBlocked() || this._isReadonly();
     this._overlay.querySelectorAll(".action").forEach((l) => {
       l.disabled = S;
@@ -862,14 +878,14 @@ class ht extends W {
     const a = Number(e.value), o = Number(i.value);
     if (!Number.isFinite(a) || !Number.isFinite(o))
       return;
-    let n = a;
+    let r = a;
     if (this._is12h()) {
-      const r = (s == null ? void 0 : s.value) === "pm" ? "pm" : "am";
-      r === "pm" && n < 12 && (n += 12), r === "am" && n === 12 && (n = 0);
+      const n = (s == null ? void 0 : s.value) === "pm" ? "pm" : "am";
+      n === "pm" && r < 12 && (r += 12), n === "am" && r === 12 && (r = 0);
     }
     this._pending = this._clampState({
       date: this._pending.date,
-      time: `${p(n)}:${p(o)}`
+      time: `${p(r)}:${p(o)}`
     }), this._emitInput("time");
   }
   _onRootClick(t) {
@@ -888,8 +904,8 @@ class ht extends W {
         return;
       }
       if (this._isInlineMode() && i === "now") {
-        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), n = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${n}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
-        this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._updateHostState();
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), r = String(a.getDate()).padStart(2, "0"), n = `${a.getFullYear()}-${o}-${r}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        this._pending = this._clampState({ date: n, time: d }), this._emitInput("now"), this._updateHostState();
         return;
       }
       if (this._isInlineMode() && i === "cancel") {
@@ -977,8 +993,8 @@ class ht extends W {
         return;
       }
       if (i === "now") {
-        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), n = String(a.getDate()).padStart(2, "0"), r = `${a.getFullYear()}-${o}-${n}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
-        this._pending = this._clampState({ date: r, time: d }), this._emitInput("now"), this._renderOverlay();
+        const a = /* @__PURE__ */ new Date(), o = String(a.getMonth() + 1).padStart(2, "0"), r = String(a.getDate()).padStart(2, "0"), n = `${a.getFullYear()}-${o}-${r}`, d = `${p(a.getHours())}:${p(a.getMinutes())}`;
+        this._pending = this._clampState({ date: n, time: d }), this._emitInput("now"), this._renderOverlay();
         return;
       }
       i === "apply" && (this._commit(this._pending, "apply"), this._setOpen(!1, "apply"));
@@ -1015,19 +1031,19 @@ class ht extends W {
   _updateHostState() {
     if (!this._hasView)
       return;
-    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", s = this._inlineError || i, a = !!x(this._value), o = this.getAttribute("name") || "", n = this._allowInput() ? this._draft : this._formatDisplay(this._value), r = this._isInlineMode(), d = this._translations(), b = s ? "error" : this._state();
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", s = this._inlineError || i, a = !!x(this._value), o = this.getAttribute("name") || "", r = this._allowInput() ? this._draft : this._formatDisplay(this._value), n = this._isInlineMode(), d = this._translations(), f = s ? "error" : this._state();
     this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), D = this.root.querySelector(".required"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), f = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), w = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
-    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), D && (D.hidden = !this.hasAttribute("required")), l && (l.value !== n && (l.value = n), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", r ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", s ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), I && (I.hidden = !(this._clearable() && a), I.setAttribute("aria-label", d.clear), I.disabled = this._isInteractionBlocked()), f && (f.hidden = r, f.setAttribute("aria-label", d.toggleCalendar), f.setAttribute("aria-expanded", r ? "false" : String(this._open)), f.setAttribute("aria-controls", this._panelId), f.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), w && (w.id = this._errorId, w.hidden = !s, w.textContent = s), l) {
+    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), D = this.root.querySelector(".required"), l = this.root.querySelector(".input"), w = this.root.querySelector('.btn[data-action="clear"]'), b = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), I = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), D && (D.hidden = !this.hasAttribute("required")), l && (l.value !== r && (l.value = r), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", n ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", s ? "true" : "false"), t ? l.setAttribute("aria-labelledby", this._labelId) : l.removeAttribute("aria-labelledby")), w && (w.hidden = !(this._clearable() && a), w.setAttribute("aria-label", d.clear), w.disabled = this._isInteractionBlocked()), b && (b.hidden = n, b.setAttribute("aria-label", d.toggleCalendar), b.setAttribute("aria-expanded", n ? "false" : String(this._open)), b.setAttribute("aria-controls", this._panelId), b.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), I && (I.id = this._errorId, I.hidden = !s, I.textContent = s), l) {
       const _ = [];
       e && g && !g.hidden && _.push(this._hintId), s && _.push(this._errorId), _.length ? l.setAttribute("aria-describedby", _.join(" ")) : l.removeAttribute("aria-describedby");
     }
     k && (k.disabled = !o, k.name = o, k.value = x(this._value) || "");
     const A = this.root.querySelector(".field");
-    A && (A.dataset.open = this._open && !r ? "true" : "false", A.dataset.invalid = s ? "true" : "false", A.dataset.state = b);
+    A && (A.dataset.open = this._open && !n ? "true" : "false", A.dataset.invalid = s ? "true" : "false", A.dataset.state = f);
     const u = this.root.querySelector(".inline-panel");
     if (u) {
-      u.hidden = !r, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);
+      u.hidden = !n, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);
       const _ = u.querySelector(".panel-title");
       _ && (_.textContent = t, _.hidden = !t);
       const $ = u.querySelector(".head-title");
@@ -1053,7 +1069,7 @@ class ht extends W {
         L.disabled = this._isInteractionBlocked() || this._isReadonly();
       });
     }
-    !r && this._open && this._syncOverlayState(), r && this._destroyOverlay();
+    !n && this._open && this._syncOverlayState(), n && this._destroyOverlay();
   }
   render() {
     if (!this._hasView) {

package/dist/time-picker.cjs.js

@@ -140,6 +140,14 @@
     }
   }
 `,B=`
+  .ui-time-picker-overlay-host {
+    --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-accent: var(--ui-color-primary, #2563eb);
+    --ui-dp-radius: 12px;
+  }
   .overlay { position: fixed; z-index: var(--ui-dp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -245,11 +253,11 @@
       outline-color: Highlight;
     }
   }
-`;function p(_){return String(_).padStart(2,"0")}function m(_,t,e,i){const s=p(_),n=p(t);return i?`${s}:${n}:${p(e)}`:`${s}:${n}`}class v extends g.ElementBase{constructor(){super(...arguments),this._value=null,this._pending=null,this._draft="",this._inlineError="",this._open=!1,this._syncing=!1,this._overlay=null,this._dismissableLayer=null,this._releaseScrollLock=null,this._isInitialized=!1,this._hasView=!1,this._restoreFocusEl=null,this._overlayKey=null,this._fieldEl=null,this._labelEl=null,this._labelTextEl=null,this._requiredEl=null,this._inputEl=null,this._clearBtn=null,this._toggleBtn=null,this._hintEl=null,this._errorEl=null,this._hiddenInputEl=null,this._schedulePosition=a.rafThrottle(()=>this._positionOverlay()),this._onRootClickBound=t=>this._onRootClick(t),this._onRootInputBound=t=>this._onRootInput(t),this._onRootBlurBound=t=>this._onRootBlur(t),this._onRootKeyDownBound=t=>this._onRootKeyDown(t),this._onOverlayClickBound=t=>this._onOverlayClick(t),this._onOverlayChangeBound=t=>this._onOverlayChange(t),this._onDocumentPointerDownBound=t=>this._onDocumentPointerDown(t),this._onDocumentKeyDownBound=t=>this._onDocumentKeyDown(t),this._onWindowResizeBound=()=>this._schedulePosition.run(),this._onWindowScrollBound=t=>{a.eventOriginatesWithin(t,[this._overlay])||this._schedulePosition.run()}}static get observedAttributes(){return["open","default-open","value","default-value","format","step","seconds","step-seconds","min","max","disabled","readonly","required","name","clearable","allow-input","mode","label","hint","error","translations","locale","variant"]}connectedCallback(){if(super.connectedCallback(),this.root.addEventListener("click",this._onRootClickBound),this.root.addEventListener("input",this._onRootInputBound),this.root.addEventListener("focusout",this._onRootBlurBound),this.root.addEventListener("keydown",this._onRootKeyDownBound),this._hasView&&!this._inputEl&&this._cacheDomRefs(),!this._isInitialized){const t=this._normalizeCanonical(this.getAttribute("value")||this.getAttribute("default-value"));this._value=t,this._pending=t,this._draft=this._formatDisplay(t),this._open=this.hasAttribute("open")||a.isTruthyAttr(this.getAttribute("default-open")),this._isInitialized=!0}this._open&&!this._isInlineMode()&&this._ensureOverlay()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("input",this._onRootInputBound),this.root.removeEventListener("focusout",this._onRootBlurBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this._destroyOverlay(),this._fieldEl=null,this._labelEl=null,this._labelTextEl=null,this._requiredEl=null,this._inputEl=null,this._clearBtn=null,this._toggleBtn=null,this._hintEl=null,this._errorEl=null,this._hiddenInputEl=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="value"&&!this._syncing&&(this._value=this._normalizeCanonical(i),this._pending=this._value,this._draft=this._formatDisplay(this._value),this._inlineError=""),t==="open"&&!this._syncing&&(this._open=this.hasAttribute("open"),this._syncOverlay("attribute")),t==="mode"&&this._syncOverlay("attribute"),t==="disabled"&&this.hasAttribute("disabled")&&this._setOpen(!1,"outside"),!!this.isConnected)){if(!this._hasView){this.requestRender();return}this._updateHostState()}}_isInlineMode(){return(this.getAttribute("mode")||"popover")==="inline"}_isMobileSheet(){return a.shouldUseMobileSheet(this.getAttribute("mode"))}_isDisabled(){return this.hasAttribute("disabled")}_isReadonly(){return this.hasAttribute("readonly")}_allowInput(){return a.isTruthyAttr(this.getAttribute("allow-input"),!0)}_clearable(){return a.isTruthyAttr(this.getAttribute("clearable"),!0)}_withSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"24h")==="12h"}_minuteStep(){const t=Number(this.getAttribute("step")||5),e=5;return!Number.isFinite(t)||t<1?e:Math.min(60,Math.trunc(t))}_secondStep(){const t=Number(this.getAttribute("step-seconds")||1);return!Number.isFinite(t)||t<1?1:Math.min(60,Math.trunc(t))}_translations(){return E.resolveDateTimeTranslations(this.getAttribute("locale"),this.getAttribute("translations"))}_normalizeCanonical(t){if(!t)return null;const e=a.parseTimeInput(t,!0);return e?m(e.hours,e.minutes,e.seconds,this._withSeconds()):null}_minTime(){return this._normalizeCanonical(this.getAttribute("min"))}_maxTime(){return this._normalizeCanonical(this.getAttribute("max"))}_formatDisplay(t){return t?this._is12h()?a.to12hDisplay(t,this.getAttribute("locale")||"en-US"):t:""}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_syncValueAttribute(t){this._syncing=!0;try{t?this.getAttribute("value")!==t&&this.setAttribute("value",t):this.hasAttribute("value")&&this.removeAttribute("value")}finally{this._syncing=!1}}_emitInput(t){const e={mode:"time",value:this._pending,source:t};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0}))}_emitChange(t){const e={mode:"time",value:this._value,source:t};this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_emitInvalid(t,e){this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0}))}_clampToBounds(t){if(!t)return null;const e=this._minTime(),i=this._maxTime();let s=t;return e&&a.compareTimes(s,e)<0&&(s=e),i&&a.compareTimes(s,i)>0&&(s=i),s}_commit(t,e){if(this._isDisabled()||this._isReadonly())return;const i=this._clampToBounds(this._normalizeCanonical(t));this._value=i,this._pending=i,this._draft=this._formatDisplay(i),this._inlineError="",this._syncValueAttribute(i),this._emitInput(e),this._emitChange(e),this._updateHostState()}_setOpen(t,e){this._isDisabled()||this._open!==t&&(this._open=t,this._syncOpenAttribute(t),this._syncOverlay(e),this._updateHostState(),this.dispatchEvent(new CustomEvent(t?"open":"close",{bubbles:!0,composed:!0})))}_syncOverlay(t){if(this._isInlineMode()){this._destroyOverlay();return}if(this._open){this._ensureOverlay(),this._syncOverlayState();return}this._destroyOverlay();const e=this._restoreFocusEl;if(this._restoreFocusEl=null,e&&e.isConnected)try{e.focus()}catch{}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.pointerEvents="none",t.addEventListener("click",this._onOverlayClickBound),t.addEventListener("change",this._onOverlayChangeBound),document.body.appendChild(t),this._overlay=t,this._syncOverlayHostZIndex(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,{passive:!0,capture:!0}),this._isMobileSheet()&&(this._releaseScrollLock=a.lockBodyScroll())}_syncOverlayHostZIndex(){if(!this._overlay||typeof window>"u")return;const t=window.getComputedStyle(this).getPropertyValue("--ui-dp-z").trim();this._overlay.style.zIndex=t||"1600"}_destroyOverlay(){var t;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,this._overlay&&(this._schedulePosition.cancel(),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound),window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0),this._overlay.removeEventListener("click",this._onOverlayClickBound),this._overlay.removeEventListener("change",this._onOverlayChangeBound),this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayKey=null,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_syncDismissableLayer(){var e;if((e=this._dismissableLayer)==null||e.destroy(),this._dismissableLayer=null,!this._open||!this._overlay)return;const t=this._overlay.querySelector(".panel, .sheet");t&&(this._dismissableLayer=x.createDismissableLayer({node:t,trigger:this._fieldEl,closeOnEscape:!0,closeOnPointerOutside:!0,closeOnFocusOutside:!1,onBeforeDismiss:i=>i==="escape-key"?(this._setOpen(!1,"escape"),!1):(i==="outside-pointer"&&this._setOpen(!1,"outside"),!1)}))}_positionOverlay(){if(!this._overlay||!this._open||this._isMobileSheet())return;const t=this._fieldEl,e=this._overlay.querySelector(".panel");if(!t||!e)return;const i=e.getAttribute("data-placement"),s=a.computePopoverPosition(t.getBoundingClientRect(),e.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);e.style.position="absolute",e.style.top=`${Math.round(s.top)}px`,e.style.left=`${Math.round(s.left)}px`,e.setAttribute("data-placement",s.placement)}_timeParts(t){const e=a.parseTimeInput(t||"00:00",!0)||{hours:0,minutes:0,seconds:0},i=e.hours>=12?"pm":"am";return{hours:e.hours,minutes:e.minutes,seconds:e.seconds,meridiem:i}}_buildOverlayContent(t){const e=this._translations(),i=this._timeParts(this._pending),s=this._is12h(),n=this._withSeconds(),r=s?i.hours%12||12:i.hours,o=this._minuteStep(),u=this._secondStep(),l=Array.from({length:s?12:24},(b,h)=>{const d=s?h+1:h;return`<option value="${d}" ${d===r?"selected":""}>${p(d)}</option>`}).join(""),c=Array.from({length:Math.ceil(60/o)},(b,h)=>{const d=Math.min(59,h*o);return`<option value="${d}" ${d===i.minutes?"selected":""}>${p(d)}</option>`}).join(""),f=Array.from({length:Math.ceil(60/u)},(b,h)=>{const d=Math.min(59,h*u);return`<option value="${d}" ${d===i.seconds?"selected":""}>${p(d)}</option>`}).join(""),y=`
+`;function p(_){return String(_).padStart(2,"0")}function m(_,t,e,i){const s=p(_),n=p(t);return i?`${s}:${n}:${p(e)}`:`${s}:${n}`}class f extends g.ElementBase{constructor(){super(...arguments),this._value=null,this._pending=null,this._draft="",this._inlineError="",this._open=!1,this._syncing=!1,this._overlay=null,this._dismissableLayer=null,this._releaseScrollLock=null,this._isInitialized=!1,this._hasView=!1,this._restoreFocusEl=null,this._overlayKey=null,this._fieldEl=null,this._labelEl=null,this._labelTextEl=null,this._requiredEl=null,this._inputEl=null,this._clearBtn=null,this._toggleBtn=null,this._hintEl=null,this._errorEl=null,this._hiddenInputEl=null,this._schedulePosition=a.rafThrottle(()=>this._positionOverlay()),this._onRootClickBound=t=>this._onRootClick(t),this._onRootInputBound=t=>this._onRootInput(t),this._onRootBlurBound=t=>this._onRootBlur(t),this._onRootKeyDownBound=t=>this._onRootKeyDown(t),this._onOverlayClickBound=t=>this._onOverlayClick(t),this._onOverlayChangeBound=t=>this._onOverlayChange(t),this._onDocumentPointerDownBound=t=>this._onDocumentPointerDown(t),this._onDocumentKeyDownBound=t=>this._onDocumentKeyDown(t),this._onWindowResizeBound=()=>this._schedulePosition.run(),this._onWindowScrollBound=t=>{a.eventOriginatesWithin(t,[this._overlay])||this._schedulePosition.run()}}static get observedAttributes(){return["open","default-open","value","default-value","format","step","seconds","step-seconds","min","max","disabled","readonly","required","name","clearable","allow-input","mode","label","hint","error","translations","locale","variant"]}connectedCallback(){if(super.connectedCallback(),this.root.addEventListener("click",this._onRootClickBound),this.root.addEventListener("input",this._onRootInputBound),this.root.addEventListener("focusout",this._onRootBlurBound),this.root.addEventListener("keydown",this._onRootKeyDownBound),this._hasView&&!this._inputEl&&this._cacheDomRefs(),!this._isInitialized){const t=this._normalizeCanonical(this.getAttribute("value")||this.getAttribute("default-value"));this._value=t,this._pending=t,this._draft=this._formatDisplay(t),this._open=this.hasAttribute("open")||a.isTruthyAttr(this.getAttribute("default-open")),this._isInitialized=!0}this._open&&!this._isInlineMode()&&this._ensureOverlay()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("input",this._onRootInputBound),this.root.removeEventListener("focusout",this._onRootBlurBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this._destroyOverlay(),this._fieldEl=null,this._labelEl=null,this._labelTextEl=null,this._requiredEl=null,this._inputEl=null,this._clearBtn=null,this._toggleBtn=null,this._hintEl=null,this._errorEl=null,this._hiddenInputEl=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="value"&&!this._syncing&&(this._value=this._normalizeCanonical(i),this._pending=this._value,this._draft=this._formatDisplay(this._value),this._inlineError=""),t==="open"&&!this._syncing&&(this._open=this.hasAttribute("open"),this._syncOverlay("attribute")),t==="mode"&&this._syncOverlay("attribute"),t==="disabled"&&this.hasAttribute("disabled")&&this._setOpen(!1,"outside"),!!this.isConnected)){if(!this._hasView){this.requestRender();return}this._updateHostState()}}_isInlineMode(){return(this.getAttribute("mode")||"popover")==="inline"}_isMobileSheet(){return a.shouldUseMobileSheet(this.getAttribute("mode"))}_isDisabled(){return this.hasAttribute("disabled")}_isReadonly(){return this.hasAttribute("readonly")}_allowInput(){return a.isTruthyAttr(this.getAttribute("allow-input"),!0)}_clearable(){return a.isTruthyAttr(this.getAttribute("clearable"),!0)}_withSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"24h")==="12h"}_minuteStep(){const t=Number(this.getAttribute("step")||5),e=5;return!Number.isFinite(t)||t<1?e:Math.min(60,Math.trunc(t))}_secondStep(){const t=Number(this.getAttribute("step-seconds")||1);return!Number.isFinite(t)||t<1?1:Math.min(60,Math.trunc(t))}_translations(){return E.resolveDateTimeTranslations(this.getAttribute("locale"),this.getAttribute("translations"))}_normalizeCanonical(t){if(!t)return null;const e=a.parseTimeInput(t,!0);return e?m(e.hours,e.minutes,e.seconds,this._withSeconds()):null}_minTime(){return this._normalizeCanonical(this.getAttribute("min"))}_maxTime(){return this._normalizeCanonical(this.getAttribute("max"))}_formatDisplay(t){return t?this._is12h()?a.to12hDisplay(t,this.getAttribute("locale")||"en-US"):t:""}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_syncValueAttribute(t){this._syncing=!0;try{t?this.getAttribute("value")!==t&&this.setAttribute("value",t):this.hasAttribute("value")&&this.removeAttribute("value")}finally{this._syncing=!1}}_emitInput(t){const e={mode:"time",value:this._pending,source:t};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0}))}_emitChange(t){const e={mode:"time",value:this._value,source:t};this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_emitInvalid(t,e){this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0}))}_clampToBounds(t){if(!t)return null;const e=this._minTime(),i=this._maxTime();let s=t;return e&&a.compareTimes(s,e)<0&&(s=e),i&&a.compareTimes(s,i)>0&&(s=i),s}_commit(t,e){if(this._isDisabled()||this._isReadonly())return;const i=this._clampToBounds(this._normalizeCanonical(t));this._value=i,this._pending=i,this._draft=this._formatDisplay(i),this._inlineError="",this._syncValueAttribute(i),this._emitInput(e),this._emitChange(e),this._updateHostState()}_setOpen(t,e){this._isDisabled()||this._open!==t&&(this._open=t,this._syncOpenAttribute(t),this._syncOverlay(e),this._updateHostState(),this.dispatchEvent(new CustomEvent(t?"open":"close",{bubbles:!0,composed:!0})))}_syncOverlay(t){if(this._isInlineMode()){this._destroyOverlay();return}if(this._open){this._ensureOverlay(),this._syncOverlayState();return}this._destroyOverlay();const e=this._restoreFocusEl;if(this._restoreFocusEl=null,e&&e.isConnected)try{e.focus()}catch{}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.className="ui-time-picker-overlay-host",t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.pointerEvents="none",t.addEventListener("click",this._onOverlayClickBound),t.addEventListener("change",this._onOverlayChangeBound),document.body.appendChild(t),this._overlay=t,this._syncOverlayHostZIndex(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,{passive:!0,capture:!0}),this._isMobileSheet()&&(this._releaseScrollLock=a.lockBodyScroll())}_syncOverlayHostZIndex(){if(!this._overlay||typeof window>"u")return;const t=window.getComputedStyle(this).getPropertyValue("--ui-dp-z").trim();this._overlay.style.zIndex=t||"1600"}_destroyOverlay(){var t;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,this._overlay&&(this._schedulePosition.cancel(),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound),window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0),this._overlay.removeEventListener("click",this._onOverlayClickBound),this._overlay.removeEventListener("change",this._onOverlayChangeBound),this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayKey=null,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_syncDismissableLayer(){var e;if((e=this._dismissableLayer)==null||e.destroy(),this._dismissableLayer=null,!this._open||!this._overlay)return;const t=this._overlay.querySelector(".panel, .sheet");t&&(this._dismissableLayer=x.createDismissableLayer({node:t,trigger:this._fieldEl,closeOnEscape:!0,closeOnPointerOutside:!0,closeOnFocusOutside:!1,onBeforeDismiss:i=>i==="escape-key"?(this._setOpen(!1,"escape"),!1):(i==="outside-pointer"&&this._setOpen(!1,"outside"),!1)}))}_positionOverlay(){if(!this._overlay||!this._open||this._isMobileSheet())return;const t=this._fieldEl,e=this._overlay.querySelector(".panel");if(!t||!e)return;const i=e.getAttribute("data-placement"),s=a.computePopoverPosition(t.getBoundingClientRect(),e.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);e.style.position="absolute",e.style.top=`${Math.round(s.top)}px`,e.style.left=`${Math.round(s.left)}px`,e.setAttribute("data-placement",s.placement)}_timeParts(t){const e=a.parseTimeInput(t||"00:00",!0)||{hours:0,minutes:0,seconds:0},i=e.hours>=12?"pm":"am";return{hours:e.hours,minutes:e.minutes,seconds:e.seconds,meridiem:i}}_buildOverlayContent(t){const e=this._translations(),i=this._timeParts(this._pending),s=this._is12h(),n=this._withSeconds(),r=s?i.hours%12||12:i.hours,o=this._minuteStep(),u=this._secondStep(),l=Array.from({length:s?12:24},(b,h)=>{const d=s?h+1:h;return`<option value="${d}" ${d===r?"selected":""}>${p(d)}</option>`}).join(""),c=Array.from({length:Math.ceil(60/o)},(b,h)=>{const d=Math.min(59,h*o);return`<option value="${d}" ${d===i.minutes?"selected":""}>${p(d)}</option>`}).join(""),v=Array.from({length:Math.ceil(60/u)},(b,h)=>{const d=Math.min(59,h*u);return`<option value="${d}" ${d===i.seconds?"selected":""}>${p(d)}</option>`}).join(""),y=`
       <div class="pickers" data-seconds="${n?"true":"false"}" data-ampm="${s?"true":"false"}">
         <div class="picker"><label>${e.hour}</label><select data-segment="hours">${l}</select></div>
         <div class="picker"><label>${e.minute}</label><select data-segment="minutes">${c}</select></div>
-        ${n?`<div class="picker"><label>${e.second}</label><select data-segment="seconds">${f}</select></div>`:""}
+        ${n?`<div class="picker"><label>${e.second}</label><select data-segment="seconds">${v}</select></div>`:""}
         ${s?`<div class="picker"><label>${e.meridiem}</label><select data-segment="meridiem"><option value="am" ${i.meridiem==="am"?"selected":""}>${e.am}</option><option value="pm" ${i.meridiem==="pm"?"selected":""}>${e.pm}</option></select></div>`:""}
       </div>
     `;return`
@@ -281,4 +289,4 @@
           <div class="error" part="error" role="alert"></div>
           <input class="hidden-input" type="hidden" disabled />
         </div>
-      `,{force:!0}),this._cacheDomRefs(),this._hasView=!0),this._updateHostState()}shouldRenderOnAttributeChange(t,e,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-time-picker")&&customElements.define("ui-time-picker",v);exports.UITimePicker=v;
+      `,{force:!0}),this._cacheDomRefs(),this._hasView=!0),this._updateHostState()}shouldRenderOnAttributeChange(t,e,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-time-picker")&&customElements.define("ui-time-picker",f);exports.UITimePicker=f;

package/dist/time-picker.esm.js

@@ -146,6 +146,14 @@ const A = `
     }
   }
 `, z = `
+  .ui-time-picker-overlay-host {
+    --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-accent: var(--ui-color-primary, #2563eb);
+    --ui-dp-radius: 12px;
+  }
   .overlay { position: fixed; z-index: var(--ui-dp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -428,7 +436,7 @@ class L extends x {
     if (this._overlay || typeof document > "u")
       return;
     const t = document.createElement("div");
-    t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), document.body.appendChild(t), this._overlay = t, this._syncOverlayHostZIndex(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, { passive: !0, capture: !0 }), this._isMobileSheet() && (this._releaseScrollLock = O());
+    t.className = "ui-time-picker-overlay-host", t.style.position = "fixed", t.style.left = "0", t.style.top = "0", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), document.body.appendChild(t), this._overlay = t, this._syncOverlayHostZIndex(), document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, { passive: !0, capture: !0 }), this._isMobileSheet() && (this._releaseScrollLock = O());
   }
   _syncOverlayHostZIndex() {
     if (!this._overlay || typeof window > "u")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/ui-core",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Framework-agnostic Web Components and primitives for the Editora UI ecosystem",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -54,7 +54,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@editora/icons": "^0.1.9"
+    "@editora/icons": "^0.1.10"
   },
   "keywords": [
     "editora",