@editora/ui-core 0.1.9 → 0.1.12

package/dist/time-picker.esm.js

@@ -0,0 +1,686 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+import { r as E } from "./calendar-2c11b824.mjs";
+import { r as k, i as m, s as w, o as b, t as S, v as f, l as C, c as B } from "./date-time-utils-bdceb7af.mjs";
+import "./scroll-lock-9de6d328.mjs";
+const O = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="M10 2.4a7.6 7.6 0 1 1 0 15.2A7.6 7.6 0 0 1 10 2.4Zm0 1.4a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4Zm.7 2.4a.7.7 0 0 0-1.4 0v4.1c0 .2.1.4.2.5l2.6 2.5a.7.7 0 1 0 1-1l-2.4-2.3v-3.8Z" fill="currentColor"/>
+  </svg>
+`, I = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`, A = `
+  <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
+    <path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, D = `
+  :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;
+    --ui-dp-field-error: var(--ui-color-danger, #dc2626);
+    --ui-dp-z: 1600;
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: min(100%, var(--ui-width, 240px));
+    min-inline-size: min(200px, 100%);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-dp-text);
+  }
+
+  .root { display: grid; gap: 6px; }
+  .label { font: 600 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ui-dp-text); }
+  .label[hidden] { display: none; }
+  .required { color: var(--ui-dp-field-error); font-size: 11px; }
+
+  .field {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    min-block-size: 38px;
+    border: 1px solid var(--ui-dp-border);
+    border-radius: var(--ui-dp-radius);
+    background: var(--ui-dp-bg);
+    padding: 0 10px;
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+  }
+
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--ui-dp-accent) 70%, var(--ui-dp-border));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dp-accent) 22%, transparent);
+  }
+
+  .input {
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--ui-dp-text);
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: 8px 0;
+    font: 500 14px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .icon {
+    color: color-mix(in srgb, var(--ui-dp-text) 70%, transparent);
+    inline-size: 16px;
+    block-size: 16px;
+    display: inline-grid;
+    place-items: center;
+  }
+
+  .icon-svg {
+    inline-size: 16px;
+    block-size: 16px;
+    pointer-events: none;
+  }
+
+  .btn {
+    border: 0;
+    background: transparent;
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    color: color-mix(in srgb, var(--ui-dp-text) 72%, transparent);
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
+  }
+  .btn:hover { background: color-mix(in srgb, var(--ui-dp-text) 10%, transparent); color: var(--ui-dp-text); }
+  .btn:active { transform: translateY(1px); }
+  .btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dp-accent) 68%, transparent);
+    outline-offset: 1px;
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn[hidden] { display: none; }
+
+  .hint { color: var(--ui-dp-muted); font-size: 12px; line-height: 1.4; }
+  .error { color: var(--ui-dp-field-error); font-size: 12px; line-height: 1.4; }
+  .hint[hidden], .error[hidden] { display: none; }
+
+  :host([disabled]) .field {
+    opacity: 0.64;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field,
+    .btn {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .field {
+      border-color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .icon,
+    .input {
+      color: CanvasText;
+    }
+
+    .btn {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .btn:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+`, $ = `
+  .overlay { position: fixed; z-index: var(--ui-dp-z, 1600); pointer-events: none; }
+  .panel {
+    pointer-events: auto;
+    min-inline-size: min(300px, calc(100vw - 16px));
+    max-inline-size: min(320px, calc(100vw - 16px));
+    border: 1px solid var(--ui-dp-border, #cbd5e1);
+    border-radius: var(--ui-dp-radius, 12px);
+    background: var(--ui-dp-bg, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    box-shadow: 0 20px 34px rgba(2, 6, 23, 0.16);
+    padding: 10px;
+    display: grid;
+    gap: 10px;
+  }
+  .sheet-wrap { position: fixed; inset: 0; display: grid; align-items: end; z-index: var(--ui-dp-z, 1600); }
+  .sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); }
+  .sheet {
+    position: relative;
+    pointer-events: auto;
+    background: var(--ui-dp-bg, #fff);
+    color: var(--ui-dp-text, #0f172a);
+    border-radius: 16px 16px 0 0;
+    border: 1px solid color-mix(in srgb, var(--ui-dp-border, #cbd5e1) 84%, transparent);
+    box-shadow: 0 -12px 30px rgba(2, 6, 23, 0.2);
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+    max-block-size: min(82vh, 560px);
+    overflow: auto;
+  }
+  .pickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
+  .pickers[data-seconds="false"][data-ampm="false"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pickers[data-seconds="false"][data-ampm="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .picker { display: grid; gap: 4px; }
+  .picker label { font-size: 11px; color: var(--ui-dp-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+  .picker select {
+    min-block-size: 34px;
+    border: 1px solid color-mix(in srgb, var(--ui-dp-border, #cbd5e1) 84%, transparent);
+    border-radius: 8px;
+    padding: 0 8px;
+    background: color-mix(in srgb, var(--ui-dp-bg, #fff) 95%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+    font: 600 13px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  .footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
+  .action {
+    border: 1px solid color-mix(in srgb, var(--ui-dp-border, #cbd5e1) 85%, transparent);
+    background: color-mix(in srgb, var(--ui-dp-bg, #fff) 95%, transparent);
+    color: var(--ui-dp-text, #0f172a);
+    min-block-size: 30px;
+    border-radius: 8px;
+    padding: 0 10px;
+    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    cursor: pointer;
+  }
+  .action[data-tone="primary"] { border-color: color-mix(in srgb, var(--ui-dp-accent, #2563eb) 60%, transparent); background: color-mix(in srgb, var(--ui-dp-accent, #2563eb) 18%, transparent); }
+
+  .action:hover {
+    border-color: color-mix(in srgb, var(--ui-dp-accent, #2563eb) 40%, var(--ui-dp-border, #cbd5e1));
+    background: color-mix(in srgb, var(--ui-dp-accent, #2563eb) 10%, transparent);
+  }
+
+  .action:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-dp-accent, #2563eb) 66%, transparent);
+    outline-offset: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel,
+    .sheet,
+    .action {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .panel,
+    .sheet {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .sheet-backdrop {
+      background: color-mix(in srgb, CanvasText 36%, transparent);
+    }
+
+    .picker label {
+      color: CanvasText;
+    }
+
+    .picker select,
+    .action {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .picker select:focus-visible,
+    .action:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+`;
+function h(p) {
+  return String(p).padStart(2, "0");
+}
+function _(p, t, e, i) {
+  const n = h(p), s = h(t);
+  return i ? `${n}:${s}:${h(e)}` : `${n}:${s}`;
+}
+class M extends x {
+  constructor() {
+    super(...arguments), this._value = null, this._pending = null, this._draft = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = 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 = k(() => 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 = () => 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") || m(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 w(this.getAttribute("mode"));
+  }
+  _isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  _isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  _allowInput() {
+    return m(this.getAttribute("allow-input"), !0);
+  }
+  _clearable() {
+    return m(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(
+      this.getAttribute("locale"),
+      this.getAttribute("translations")
+    );
+  }
+  _normalizeCanonical(t) {
+    if (!t)
+      return null;
+    const e = b(t, !0);
+    return e ? _(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() ? S(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 n = t;
+    return e && f(n, e) < 0 && (n = e), i && f(n, i) > 0 && (n = i), n;
+  }
+  _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.zIndex = "1100", t.style.pointerEvents = "none", t.addEventListener("click", this._onOverlayClickBound), t.addEventListener("change", this._onOverlayChangeBound), document.body.appendChild(t), this._overlay = t, document.addEventListener("pointerdown", this._onDocumentPointerDownBound, !0), document.addEventListener("keydown", this._onDocumentKeyDownBound), window.addEventListener("resize", this._onWindowResizeBound), window.addEventListener("scroll", this._onWindowScrollBound, !0), this._isMobileSheet() && (this._releaseScrollLock = C());
+  }
+  _destroyOverlay() {
+    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));
+  }
+  _positionOverlay() {
+    if (!this._overlay || !this._open || this._isMobileSheet())
+      return;
+    const t = this._fieldEl, e = this._overlay.querySelector(".panel");
+    if (!t || !e)
+      return;
+    const i = B(t.getBoundingClientRect(), e.getBoundingClientRect());
+    e.style.position = "absolute", e.style.top = `${Math.round(i.top)}px`, e.style.left = `${Math.round(i.left)}px`;
+  }
+  _timeParts(t) {
+    const e = b(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), n = this._is12h(), s = this._withSeconds(), o = n ? i.hours % 12 || 12 : i.hours, r = this._minuteStep(), l = this._secondStep(), a = Array.from({ length: n ? 12 : 24 }, (v, c) => {
+      const u = n ? c + 1 : c;
+      return `<option value="${u}" ${u === o ? "selected" : ""}>${h(u)}</option>`;
+    }).join(""), d = Array.from({ length: Math.ceil(60 / r) }, (v, c) => {
+      const u = Math.min(59, c * r);
+      return `<option value="${u}" ${u === i.minutes ? "selected" : ""}>${h(u)}</option>`;
+    }).join(""), y = Array.from({ length: Math.ceil(60 / l) }, (v, c) => {
+      const u = Math.min(59, c * l);
+      return `<option value="${u}" ${u === i.seconds ? "selected" : ""}>${h(u)}</option>`;
+    }).join(""), g = `
+      <div class="pickers" data-seconds="${s ? "true" : "false"}" data-ampm="${n ? "true" : "false"}">
+        <div class="picker"><label>${e.hour}</label><select data-segment="hours">${a}</select></div>
+        <div class="picker"><label>${e.minute}</label><select data-segment="minutes">${d}</select></div>
+        ${s ? `<div class="picker"><label>${e.second}</label><select data-segment="seconds">${y}</select></div>` : ""}
+        ${n ? `<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 `
+      <style>${$}</style>
+      ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
+      <section class="${t ? "sheet" : "panel"}" part="${t ? "sheet" : "popover"}">
+        ${g}
+        <footer class="footer" part="footer">
+          <button type="button" class="action" data-action="now">${e.now}</button>
+          <button type="button" class="action" data-action="clear" part="clear">${e.clear}</button>
+          <button type="button" class="action" data-action="cancel" part="cancel">${e.cancel}</button>
+          <button type="button" class="action" data-action="apply" data-tone="primary" part="apply">${e.apply}</button>
+        </footer>
+      </section>
+    `;
+  }
+  _overlaySignature(t) {
+    return [
+      t ? "sheet" : "popover",
+      this._is12h() ? "12h" : "24h",
+      this._withSeconds() ? "sec" : "nosec",
+      this._minuteStep(),
+      this._secondStep(),
+      this.getAttribute("translations") || ""
+    ].join(":");
+  }
+  _ensureOverlayContent(t) {
+    if (!this._overlay)
+      return;
+    const e = this._overlaySignature(t);
+    this._overlayKey !== e && (this._overlayKey = e, this._overlay.innerHTML = t ? `<div class="sheet-wrap">${this._buildOverlayContent(!0)}</div>` : `<div class="overlay">${this._buildOverlayContent(!1)}</div>`);
+  }
+  _setClosestOptionValue(t, e) {
+    const i = Array.from(t.options).map((o) => Number(o.value)).filter((o) => Number.isFinite(o));
+    if (!i.length)
+      return;
+    let n = i[0], s = Math.abs(n - e);
+    for (let o = 1; o < i.length; o += 1) {
+      const r = i[o], l = Math.abs(r - e);
+      l < s && (n = r, s = l);
+    }
+    t.value = String(n);
+  }
+  _syncOverlayState() {
+    if (!this._overlay)
+      return;
+    const t = this._isMobileSheet();
+    this._ensureOverlayContent(t);
+    const e = this._timeParts(this._pending), i = this._overlay.querySelector('select[data-segment="hours"]'), n = this._overlay.querySelector('select[data-segment="minutes"]'), s = this._overlay.querySelector('select[data-segment="seconds"]'), o = this._overlay.querySelector('select[data-segment="meridiem"]'), r = this._isDisabled() || this._isReadonly();
+    if (this._overlay.querySelectorAll(".action").forEach((a) => {
+      a.disabled = r;
+    }), i) {
+      const a = this._is12h() ? e.hours % 12 || 12 : e.hours;
+      this._setClosestOptionValue(i, a), i.disabled = r;
+    }
+    n && (this._setClosestOptionValue(n, e.minutes), n.disabled = r), s && (this._setClosestOptionValue(s, e.seconds), s.disabled = r), o && (o.value = e.meridiem, o.disabled = r), t || this._schedulePosition.run();
+  }
+  _renderOverlay() {
+    this._syncOverlayState();
+  }
+  _applySegmentsFromOverlay() {
+    if (!this._overlay)
+      return;
+    const t = this._overlay.querySelector('select[data-segment="hours"]'), e = this._overlay.querySelector('select[data-segment="minutes"]'), i = this._overlay.querySelector('select[data-segment="seconds"]'), n = this._overlay.querySelector('select[data-segment="meridiem"]');
+    if (!t || !e)
+      return;
+    let s = Number(t.value);
+    const o = Number(e.value), r = i ? Number(i.value) : 0;
+    if (this._is12h() && n) {
+      const a = n.value === "pm" ? "pm" : "am";
+      a === "pm" && s < 12 && (s += 12), a === "am" && s === 12 && (s = 0);
+    }
+    const l = _(s, o, r, this._withSeconds());
+    this._pending = this._clampToBounds(l), this._emitInput("picker");
+  }
+  _onRootClick(t) {
+    var n;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    if (i) {
+      if (i === "toggle") {
+        this._restoreFocusEl = e, this._setOpen(!this._open, "toggle");
+        return;
+      }
+      i === "clear" && this._commit(null, "clear");
+    }
+  }
+  _onRootInput(t) {
+    const e = t.target;
+    if (!(e instanceof HTMLInputElement) || !e.classList.contains("input") || !this._allowInput())
+      return;
+    this._draft = e.value, this._inlineError = "";
+    const i = this._normalizeCanonical(e.value);
+    this._pending = i, this._emitInput("typing");
+  }
+  _onRootBlur(t) {
+    const e = t.target;
+    if (!(e instanceof HTMLInputElement) || !e.classList.contains("input") || !this._allowInput())
+      return;
+    if (!this._draft.trim()) {
+      this._commit(null, "blur");
+      return;
+    }
+    const i = this._normalizeCanonical(this._draft);
+    if (!i) {
+      this._inlineError = this.getAttribute("error") || this._translations().invalidTime, this._emitInvalid(this._draft, "parse"), this._updateHostState();
+      return;
+    }
+    this._commit(i, "blur");
+  }
+  _stepBy(t) {
+    const e = b(this._pending || this._value || "00:00", !0) || { hours: 0, minutes: 0, seconds: 0 }, i = this._minuteStep() * t, n = ((e.hours * 60 + e.minutes + i) % (24 * 60) + 24 * 60) % (24 * 60), s = Math.floor(n / 60), o = n % 60, r = _(s, o, e.seconds, this._withSeconds());
+    this._pending = this._clampToBounds(r), this._emitInput("keyboard-step"), this._updateHostState();
+  }
+  _onRootKeyDown(t) {
+    const e = t, i = e.target;
+    if (!(!(i instanceof HTMLInputElement) || !i.classList.contains("input"))) {
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), this._stepBy(e.shiftKey ? 5 : 1);
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), this._stepBy(e.shiftKey ? -5 : -1);
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const n = this._normalizeCanonical(this._draft);
+        if (!n && this._draft.trim()) {
+          this._inlineError = this.getAttribute("error") || this._translations().invalidTime, this._emitInvalid(this._draft, "parse"), this._updateHostState();
+          return;
+        }
+        this._commit(n, "enter"), this._isInlineMode() || this._setOpen(!1, "enter");
+        return;
+      }
+      if (e.key === "Escape" && this._open && !this._isInlineMode()) {
+        e.preventDefault(), this._setOpen(!1, "escape");
+        return;
+      }
+      e.key === "ArrowDown" && !this._open && !this._isInlineMode() && (e.preventDefault(), this._setOpen(!0, "keyboard"));
+    }
+  }
+  _onOverlayClick(t) {
+    var n;
+    const e = t.target;
+    if (!e)
+      return;
+    const i = (n = e.closest("[data-action]")) == null ? void 0 : n.getAttribute("data-action");
+    if (i) {
+      if (i === "backdrop") {
+        this._setOpen(!1, "outside");
+        return;
+      }
+      if (i === "cancel") {
+        this._pending = this._value, this._setOpen(!1, "cancel");
+        return;
+      }
+      if (i === "clear") {
+        this._pending = null, this._emitInput("clear"), this._renderOverlay();
+        return;
+      }
+      if (i === "now") {
+        const s = /* @__PURE__ */ new Date(), o = _(s.getHours(), s.getMinutes(), s.getSeconds(), this._withSeconds());
+        this._pending = this._clampToBounds(o), this._emitInput("now"), this._renderOverlay();
+        return;
+      }
+      i === "apply" && (this._commit(this._pending, "apply"), this._setOpen(!1, "apply"));
+    }
+  }
+  _onOverlayChange(t) {
+    const e = t.target;
+    e instanceof HTMLSelectElement && e.matches("select[data-segment]") && this._applySegmentsFromOverlay();
+  }
+  _onDocumentPointerDown(t) {
+    if (!this._open || !this._overlay)
+      return;
+    const e = t.composedPath();
+    e.includes(this) || e.includes(this._overlay) || this._setOpen(!1, "outside");
+  }
+  _onDocumentKeyDown(t) {
+    this._open && t.key === "Escape" && (t.preventDefault(), this._setOpen(!1, "escape"));
+  }
+  _cacheDomRefs() {
+    this._labelEl = this.root.querySelector(".label"), this._labelTextEl = this.root.querySelector(".label-text"), this._requiredEl = this.root.querySelector(".required"), this._fieldEl = this.root.querySelector(".field"), this._inputEl = this.root.querySelector(".input"), this._clearBtn = this.root.querySelector('.btn[data-action="clear"]'), this._toggleBtn = this.root.querySelector('.btn[data-action="toggle"]'), this._hintEl = this.root.querySelector(".hint"), this._errorEl = this.root.querySelector(".error"), this._hiddenInputEl = this.root.querySelector(".hidden-input");
+  }
+  _updateHostState() {
+    if (!this._hasView)
+      return;
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", n = this._inlineError || i, s = !!this._value, o = this.getAttribute("name") || "", r = this._allowInput() ? this._draft : this._formatDisplay(this._value), l = this._isInlineMode(), a = this._isDisabled(), d = this._translations();
+    this._labelEl && (this._labelEl.hidden = !t), this._labelTextEl && (this._labelTextEl.textContent = t), this._requiredEl && (this._requiredEl.hidden = !this.hasAttribute("required")), this._inputEl && (this._inputEl.value !== r && (this._inputEl.value = r), this._inputEl.placeholder = this._withSeconds() ? d.timePlaceholderSeconds : d.timePlaceholder, this._inputEl.readOnly = !this._allowInput() || this._isReadonly(), this._inputEl.disabled = a, this._inputEl.required = this.hasAttribute("required")), this._clearBtn && (this._clearBtn.hidden = !(this._clearable() && s), this._clearBtn.disabled = a || this._isReadonly(), this._clearBtn.setAttribute("aria-label", d.clear)), this._toggleBtn && (this._toggleBtn.hidden = l, this._toggleBtn.disabled = a || this._isReadonly(), this._toggleBtn.setAttribute("aria-label", d.toggleCalendar)), this._hintEl && (this._hintEl.hidden = !e, this._hintEl.textContent = e), this._errorEl && (this._errorEl.hidden = !n, this._errorEl.textContent = n), this._hiddenInputEl && (this._hiddenInputEl.disabled = !o, this._hiddenInputEl.name = o, this._hiddenInputEl.value = this._value || ""), !l && this._open && this._syncOverlayState();
+  }
+  render() {
+    this._hasView || (this.setContent(`
+        <style>${D}</style>
+        <div class="root">
+          <label class="label" part="label">
+            <span class="label-text"></span>
+            <span class="required">*</span>
+          </label>
+          <div class="field" part="field input">
+            <span class="icon" part="icon">${O}</span>
+            <input class="input" part="input" />
+            <button type="button" class="btn" part="clear" data-action="clear">${I}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${A}</button>
+          </div>
+          <div class="hint" part="hint"></div>
+          <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", M);
+export {
+  M as UITimePicker
+};