@editora/ui-core 0.1.9 → 0.1.10

package/dist/time-picker.cjs.js

@@ -0,0 +1,284 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),x=require("./calendar-a8735e40.js"),a=require("./date-time-utils-5cf58cd0.js");require("./scroll-lock-48793569.js");const E=`
+  <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>
+`,k=`
+  <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>
+`,w=`
+  <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>
+`,S=`
+  :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;
+    }
+  }
+`,C=`
+  .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 p(_){return String(_).padStart(2,"0")}function m(_,t,e,i){const n=p(_),s=p(t);return i?`${n}:${s}:${p(e)}`:`${n}:${s}`}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._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=()=>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 x.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 n=t;return e&&a.compareTimes(n,e)<0&&(n=e),i&&a.compareTimes(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=a.lockBodyScroll())}_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=a.computePopoverPosition(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=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),n=this._is12h(),s=this._withSeconds(),r=n?i.hours%12||12:i.hours,o=this._minuteStep(),u=this._secondStep(),l=Array.from({length:n?12:24},(b,h)=>{const d=n?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=`
+      <div class="pickers" data-seconds="${s?"true":"false"}" data-ampm="${n?"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>
+        ${s?`<div class="picker"><label>${e.second}</label><select data-segment="seconds">${f}</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>${C}</style>
+      ${t?'<div class="sheet-backdrop" data-action="backdrop"></div>':""}
+      <section class="${t?"sheet":"panel"}" part="${t?"sheet":"popover"}">
+        ${y}
+        <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(r=>Number(r.value)).filter(r=>Number.isFinite(r));if(!i.length)return;let n=i[0],s=Math.abs(n-e);for(let r=1;r<i.length;r+=1){const o=i[r],u=Math.abs(o-e);u<s&&(n=o,s=u)}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"]'),r=this._overlay.querySelector('select[data-segment="meridiem"]'),o=this._isDisabled()||this._isReadonly();if(this._overlay.querySelectorAll(".action").forEach(l=>{l.disabled=o}),i){const l=this._is12h()?e.hours%12||12:e.hours;this._setClosestOptionValue(i,l),i.disabled=o}n&&(this._setClosestOptionValue(n,e.minutes),n.disabled=o),s&&(this._setClosestOptionValue(s,e.seconds),s.disabled=o),r&&(r.value=e.meridiem,r.disabled=o),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 r=Number(e.value),o=i?Number(i.value):0;if(this._is12h()&&n){const l=n.value==="pm"?"pm":"am";l==="pm"&&s<12&&(s+=12),l==="am"&&s===12&&(s=0)}const u=m(s,r,o,this._withSeconds());this._pending=this._clampToBounds(u),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=a.parseTimeInput(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),r=n%60,o=m(s,r,e.seconds,this._withSeconds());this._pending=this._clampToBounds(o),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=new Date,r=m(s.getHours(),s.getMinutes(),s.getSeconds(),this._withSeconds());this._pending=this._clampToBounds(r),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,r=this.getAttribute("name")||"",o=this._allowInput()?this._draft:this._formatDisplay(this._value),u=this._isInlineMode(),l=this._isDisabled(),c=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!==o&&(this._inputEl.value=o),this._inputEl.placeholder=this._withSeconds()?c.timePlaceholderSeconds:c.timePlaceholder,this._inputEl.readOnly=!this._allowInput()||this._isReadonly(),this._inputEl.disabled=l,this._inputEl.required=this.hasAttribute("required")),this._clearBtn&&(this._clearBtn.hidden=!(this._clearable()&&s),this._clearBtn.disabled=l||this._isReadonly(),this._clearBtn.setAttribute("aria-label",c.clear)),this._toggleBtn&&(this._toggleBtn.hidden=u,this._toggleBtn.disabled=l||this._isReadonly(),this._toggleBtn.setAttribute("aria-label",c.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=!r,this._hiddenInputEl.name=r,this._hiddenInputEl.value=this._value||""),!u&&this._open&&this._syncOverlayState()}render(){this._hasView||(this.setContent(`
+        <style>${S}</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">${E}</span>
+            <input class="input" part="input" />
+            <button type="button" class="btn" part="clear" data-action="clear">${k}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${w}</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",v);exports.UITimePicker=v;