@editora/ui-core 0.1.10 → 0.1.13

package/dist/stepper.cjs.js

@@ -20,7 +20,7 @@
     border: 1px solid var(--ui-stepper-border);
     border-radius: var(--ui-stepper-radius);
     background: var(--ui-stepper-bg);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
     padding: 10px;
   }
 
@@ -63,8 +63,8 @@
   }
 
   .trigger:hover {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 34%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 8%, transparent);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 20%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent);
   }
 
   .trigger:focus-visible {
@@ -95,9 +95,8 @@
     position: absolute;
     inset: -5px;
     border-radius: inherit;
-    border: 1px solid color-mix(in srgb, var(--ui-stepper-accent) 56%, transparent);
-    opacity: 0.45;
-    animation: ui-stepper-current-pulse var(--ui-stepper-indicator-duration) ease-out infinite;
+    border: 1px solid color-mix(in srgb, var(--ui-stepper-accent) 34%, transparent);
+    opacity: 0.18;
     pointer-events: none;
   }
 
@@ -141,19 +140,19 @@
   }
 
   .item[data-state="current"] .trigger {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 46%, transparent);
-    background: color-mix(in srgb, var(--ui-stepper-accent) 13%, transparent);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 7%, transparent);
   }
 
   .item[data-state="current"] .index,
   .item[data-state="complete"] .index {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 44%, transparent);
-    background: color-mix(in srgb, var(--ui-stepper-accent) 18%, transparent);
-    color: color-mix(in srgb, var(--ui-stepper-accent) 86%, #0f172a 14%);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 10%, transparent);
+    color: color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%);
   }
 
   .item[data-state="complete"] .connector {
-    background: color-mix(in srgb, var(--ui-stepper-accent) 52%, transparent);
+    background: color-mix(in srgb, var(--ui-stepper-accent) 32%, transparent);
   }
 
   .item[data-state="current"] .connector::after {
@@ -163,11 +162,10 @@
     background: linear-gradient(
       90deg,
       transparent 0%,
-      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      color-mix(in srgb, var(--ui-stepper-accent) 24%, transparent) 50%,
       transparent 100%
     );
-    transform: translateX(-100%);
-    animation: ui-stepper-connector-flow var(--ui-stepper-indicator-duration) linear infinite;
+    opacity: 0.45;
     pointer-events: none;
   }
 
@@ -175,11 +173,9 @@
     background: linear-gradient(
       180deg,
       transparent 0%,
-      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      color-mix(in srgb, var(--ui-stepper-accent) 24%, transparent) 50%,
       transparent 100%
     );
-    transform: translateY(-100%);
-    animation-name: ui-stepper-connector-flow-vertical;
   }
 
   .item[data-state="error"] .trigger {
@@ -224,33 +220,6 @@
     }
   }
 
-  @keyframes ui-stepper-current-pulse {
-    0% {
-      transform: scale(0.9);
-      opacity: 0.45;
-    }
-    70% {
-      transform: scale(1.2);
-      opacity: 0;
-    }
-    100% {
-      transform: scale(1.2);
-      opacity: 0;
-    }
-  }
-
-  @keyframes ui-stepper-connector-flow {
-    to {
-      transform: translateX(100%);
-    }
-  }
-
-  @keyframes ui-stepper-connector-flow-vertical {
-    to {
-      transform: translateY(100%);
-    }
-  }
-
   @media (prefers-contrast: more) {
     :host {
       --ui-stepper-border: color-mix(in srgb, var(--ui-stepper-text) 70%, transparent);
@@ -310,24 +279,24 @@
       border-color: CanvasText;
     }
   }
-`;function u(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function m(o){if(!o)return[];try{const t=JSON.parse(o);return Array.isArray(t)?t.filter(e=>e&&typeof e=="object"):[]}catch{return[]}}function d(o){if(o==null)return!1;const t=String(o).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}class b extends g.ElementBase{constructor(){super(),this._observer=null,this._isSyncingValueAttribute=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["steps","value","orientation","variant","size","clickable","linear","headless","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this.hasAttribute("steps")||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-value","data-label","data-description","data-optional","data-disabled","data-state","disabled"]})}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(t==="value"){this._isSyncingValueAttribute||this._syncValueUi();return}if(t==="aria-label"){const s=this.root.querySelector(".frame");if(s){s.setAttribute("aria-label",r||"Stepper");return}}this.isConnected&&this.requestRender()}}_fromSlots(){return Array.from(this.querySelectorAll('[slot="step"], [data-step]')).map((e,r)=>{var p;const s=e.getAttribute("data-value")||String(r+1),i=e.getAttribute("data-label")||e.getAttribute("title")||((p=e.textContent)==null?void 0:p.trim())||`Step ${r+1}`,a=e.getAttribute("data-description")||"",l=d(e.getAttribute("data-optional")),n=e.hasAttribute("disabled")||d(e.getAttribute("data-disabled")),c=e.getAttribute("data-state");return{index:r,value:s,label:i,description:a,optional:l,disabled:n,state:c==="complete"||c==="error"||c==="warning"?c:"default"}})}_fromAttr(){return m(this.getAttribute("steps")).map((t,e)=>{const r=t.state==="complete"||t.state==="error"||t.state==="warning"?t.state:"default";return{index:e,value:t.value!=null?String(t.value):String(e+1),label:t.label!=null?String(t.label):`Step ${e+1}`,description:t.description!=null?String(t.description):"",optional:!!t.optional,disabled:!!t.disabled,state:r}})}_steps(){const t=this._fromAttr();return t.length?t:this._fromSlots()}_activeIndex(t){if(!t.length)return-1;const e=this.getAttribute("value")||"";if(e){const s=t.findIndex(i=>i.value===e);if(s>=0)return s}const r=t.find(s=>!s.disabled)||t[0];return r&&this.getAttribute("value")!==r.value&&this.setAttribute("value",r.value),t.findIndex(s=>s.value===r.value)}get value(){return this.getAttribute("value")||""}set value(t){const e=String(t||"");e?this.setAttribute("value",e):this.removeAttribute("value")}goTo(t){const e=this._steps();if(!e.length)return!1;const r=this._activeIndex(e),s=typeof t=="number"?t:e.findIndex(i=>i.value===String(t));return!Number.isInteger(s)||s<0||s>=e.length?!1:this._selectIndex(e,r,s,"api")}next(){const t=this._steps(),e=this._activeIndex(t);if(e<0)return!1;const r=Math.min(t.length-1,e+1);return this._selectIndex(t,e,r,"next")}prev(){const t=this._steps(),e=this._activeIndex(t);if(e<0)return!1;const r=Math.max(0,e-1);return this._selectIndex(t,e,r,"prev")}_selectIndex(t,e,r,s){if(r===e)return!0;const i=t[r];if(!i||i.disabled||this.hasAttribute("linear")&&r>e+1)return!1;const a=t[e],l=new CustomEvent("before-change",{detail:{currentIndex:e,nextIndex:r,currentValue:(a==null?void 0:a.value)||"",nextValue:i.value,trigger:s},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(l))return!1;this.value=i.value;const n={index:r,value:i.value,label:i.label,trigger:s};return this.dispatchEvent(new CustomEvent("input",{detail:n,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("select",{detail:n,bubbles:!0,composed:!0})),!0}_onClick(t){const e=t.target,r=e==null?void 0:e.closest(".trigger");if(!r||!this.hasAttribute("clickable")&&!this.hasAttribute("linear"))return;const s=Number(r.getAttribute("data-index"));if(!Number.isInteger(s))return;const i=this._steps(),a=this._activeIndex(i);this._selectIndex(i,a,s,"click")}_moveFocus(t,e){const r=Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));if(!r.length)return;const s=r.indexOf(t);if(s<0)return;const i=(s+e+r.length)%r.length;r[i].focus()}_onKeyDown(t){const e=t.target,r=e==null?void 0:e.closest(".trigger");if(!r)return;const s=this.getAttribute("orientation")==="vertical",i=!s&&getComputedStyle(this).direction==="rtl",a=s?"ArrowDown":i?"ArrowLeft":"ArrowRight",l=s?"ArrowUp":i?"ArrowRight":"ArrowLeft";if(t.key===a){t.preventDefault(),this._moveFocus(r,1);return}if(t.key===l){t.preventDefault(),this._moveFocus(r,-1);return}if(t.key==="Home"||t.key==="End"){const n=Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));if(!n.length)return;t.preventDefault(),(t.key==="Home"?n[0]:n[n.length-1]).focus();return}(t.key===" "||t.key==="Enter")&&(t.preventDefault(),r.click())}_syncValueUi(){if(!this.isConnected)return;if(!this.root.querySelector(".list")){this.requestRender();return}const t=this._steps();if(!t.length)return;this._isSyncingValueAttribute=!0;let e=-1;try{e=this._activeIndex(t)}finally{this._isSyncingValueAttribute=!1}Array.from(this.root.querySelectorAll(".item")).forEach((s,i)=>{const a=t[i];if(!a)return;const l=a.state!=="default"?a.state:i<e?"complete":i===e?"current":"upcoming";s.setAttribute("data-state",l),s.setAttribute("data-active",i===e?"true":"false");const n=s.querySelector(".trigger");n&&n.setAttribute("aria-current",i===e?"step":"false");const c=s.querySelector(".index");c&&(c.textContent=i<e?"✓":String(i+1))})}render(){const t=this._steps(),e=this._activeIndex(t),r=this.getAttribute("aria-label")||"Stepper",s=t.map((i,a)=>`
-          <li class="item" part="item" data-state="${i.state!=="default"?i.state:a<e?"complete":a===e?"current":"upcoming"}" data-active="${a===e?"true":"false"}">
+`;function u(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function h(o){if(!o)return[];try{const e=JSON.parse(o);return Array.isArray(e)?e.filter(t=>t&&typeof t=="object"):[]}catch{return[]}}function d(o){if(o==null)return!1;const e=String(o).toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}class b extends g.ElementBase{constructor(){super(),this._observer=null,this._isSyncingValueAttribute=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["steps","value","orientation","variant","size","clickable","linear","headless","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this.hasAttribute("steps")||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-value","data-label","data-description","data-optional","data-disabled","data-state","disabled"]})}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="value"){this._isSyncingValueAttribute||this._syncValueUi();return}if(e==="aria-label"){const s=this.root.querySelector(".frame");if(s){s.setAttribute("aria-label",r||"Stepper");return}}this.isConnected&&this.requestRender()}}_fromSlots(){return Array.from(this.querySelectorAll('[slot="step"], [data-step]')).map((t,r)=>{var p;const s=t.getAttribute("data-value")||String(r+1),i=t.getAttribute("data-label")||t.getAttribute("title")||((p=t.textContent)==null?void 0:p.trim())||`Step ${r+1}`,a=t.getAttribute("data-description")||"",l=d(t.getAttribute("data-optional")),n=t.hasAttribute("disabled")||d(t.getAttribute("data-disabled")),c=t.getAttribute("data-state");return{index:r,value:s,label:i,description:a,optional:l,disabled:n,state:c==="complete"||c==="error"||c==="warning"?c:"default"}})}_fromAttr(){return h(this.getAttribute("steps")).map((e,t)=>{const r=e.state==="complete"||e.state==="error"||e.state==="warning"?e.state:"default";return{index:t,value:e.value!=null?String(e.value):String(t+1),label:e.label!=null?String(e.label):`Step ${t+1}`,description:e.description!=null?String(e.description):"",optional:!!e.optional,disabled:!!e.disabled,state:r}})}_steps(){const e=this._fromAttr();return e.length?e:this._fromSlots()}_activeIndex(e){if(!e.length)return-1;const t=this.getAttribute("value")||"";if(t){const s=e.findIndex(i=>i.value===t);if(s>=0)return s}const r=e.find(s=>!s.disabled)||e[0];return r&&this.getAttribute("value")!==r.value&&this.setAttribute("value",r.value),e.findIndex(s=>s.value===r.value)}get value(){return this.getAttribute("value")||""}set value(e){const t=String(e||"");t?this.setAttribute("value",t):this.removeAttribute("value")}goTo(e){const t=this._steps();if(!t.length)return!1;const r=this._activeIndex(t),s=typeof e=="number"?e:t.findIndex(i=>i.value===String(e));return!Number.isInteger(s)||s<0||s>=t.length?!1:this._selectIndex(t,r,s,"api")}next(){const e=this._steps(),t=this._activeIndex(e);if(t<0)return!1;const r=Math.min(e.length-1,t+1);return this._selectIndex(e,t,r,"next")}prev(){const e=this._steps(),t=this._activeIndex(e);if(t<0)return!1;const r=Math.max(0,t-1);return this._selectIndex(e,t,r,"prev")}_selectIndex(e,t,r,s){if(r===t)return!0;const i=e[r];if(!i||i.disabled||this.hasAttribute("linear")&&r>t+1)return!1;const a=e[t],l=new CustomEvent("before-change",{detail:{currentIndex:t,nextIndex:r,currentValue:(a==null?void 0:a.value)||"",nextValue:i.value,trigger:s},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(l))return!1;this.value=i.value;const n={index:r,value:i.value,label:i.label,trigger:s};return this.dispatchEvent(new CustomEvent("input",{detail:n,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("select",{detail:n,bubbles:!0,composed:!0})),!0}_onClick(e){const t=e.target,r=t==null?void 0:t.closest(".trigger");if(!r||!this.hasAttribute("clickable")&&!this.hasAttribute("linear"))return;const s=Number(r.getAttribute("data-index"));if(!Number.isInteger(s))return;const i=this._steps(),a=this._activeIndex(i);this._selectIndex(i,a,s,"click")}_moveFocus(e,t){const r=Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));if(!r.length)return;const s=r.indexOf(e);if(s<0)return;const i=(s+t+r.length)%r.length;r[i].focus()}_onKeyDown(e){const t=e.target,r=t==null?void 0:t.closest(".trigger");if(!r)return;const s=this.getAttribute("orientation")==="vertical",i=!s&&getComputedStyle(this).direction==="rtl",a=s?"ArrowDown":i?"ArrowLeft":"ArrowRight",l=s?"ArrowUp":i?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(r,1);return}if(e.key===l){e.preventDefault(),this._moveFocus(r,-1);return}if(e.key==="Home"||e.key==="End"){const n=Array.from(this.root.querySelectorAll(".trigger:not([disabled])"));if(!n.length)return;e.preventDefault(),(e.key==="Home"?n[0]:n[n.length-1]).focus();return}(e.key===" "||e.key==="Enter")&&(e.preventDefault(),r.click())}_syncValueUi(){if(!this.isConnected)return;if(!this.root.querySelector(".list")){this.requestRender();return}const e=this._steps();if(!e.length)return;this._isSyncingValueAttribute=!0;let t=-1;try{t=this._activeIndex(e)}finally{this._isSyncingValueAttribute=!1}Array.from(this.root.querySelectorAll(".item")).forEach((s,i)=>{const a=e[i];if(!a)return;const l=a.state!=="default"?a.state:i<t?"complete":i===t?"current":"upcoming";s.setAttribute("data-state",l),s.setAttribute("data-active",i===t?"true":"false");const n=s.querySelector(".trigger");n&&n.setAttribute("aria-current",i===t?"step":"false");const c=s.querySelector(".index");c&&(c.textContent=i<t?"✓":String(i+1))})}render(){const e=this._steps(),t=this._activeIndex(e),r=this.getAttribute("aria-label")||"Stepper",s=e.map((i,a)=>`
+          <li class="item" part="item" data-state="${i.state!=="default"?i.state:a<t?"complete":a===t?"current":"upcoming"}" data-active="${a===t?"true":"false"}">
             <button
               type="button"
               class="trigger"
               part="trigger"
               data-index="${a}"
-              aria-current="${a===e?"step":"false"}"
+              aria-current="${a===t?"step":"false"}"
               aria-disabled="${i.disabled?"true":"false"}"
               ${i.disabled?"disabled":""}
             >
-              <span class="index" part="index">${a<e?"✓":a+1}</span>
+              <span class="index" part="index">${a<t?"✓":a+1}</span>
               <span class="meta" part="meta">
                 <span class="label">${u(i.label)}${i.optional?" (optional)":""}</span>
                 ${i.description?`<span class="description">${u(i.description)}</span>`:""}
               </span>
             </button>
-            ${a<t.length-1?'<span class="connector" part="connector"></span>':""}
+            ${a<e.length-1?'<span class="connector" part="connector"></span>':""}
           </li>
         `).join("");this.setContent(`
       <style>${f}</style>

package/dist/stepper.esm.js

@@ -21,7 +21,7 @@ const g = `
     border: 1px solid var(--ui-stepper-border);
     border-radius: var(--ui-stepper-radius);
     background: var(--ui-stepper-bg);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
     padding: 10px;
   }
 
@@ -64,8 +64,8 @@ const g = `
   }
 
   .trigger:hover {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 34%, var(--ui-stepper-border));
-    background: color-mix(in srgb, var(--ui-stepper-accent) 8%, transparent);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 20%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 4%, transparent);
   }
 
   .trigger:focus-visible {
@@ -96,9 +96,8 @@ const g = `
     position: absolute;
     inset: -5px;
     border-radius: inherit;
-    border: 1px solid color-mix(in srgb, var(--ui-stepper-accent) 56%, transparent);
-    opacity: 0.45;
-    animation: ui-stepper-current-pulse var(--ui-stepper-indicator-duration) ease-out infinite;
+    border: 1px solid color-mix(in srgb, var(--ui-stepper-accent) 34%, transparent);
+    opacity: 0.18;
     pointer-events: none;
   }
 
@@ -142,19 +141,19 @@ const g = `
   }
 
   .item[data-state="current"] .trigger {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 46%, transparent);
-    background: color-mix(in srgb, var(--ui-stepper-accent) 13%, transparent);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 7%, transparent);
   }
 
   .item[data-state="current"] .index,
   .item[data-state="complete"] .index {
-    border-color: color-mix(in srgb, var(--ui-stepper-accent) 44%, transparent);
-    background: color-mix(in srgb, var(--ui-stepper-accent) 18%, transparent);
-    color: color-mix(in srgb, var(--ui-stepper-accent) 86%, #0f172a 14%);
+    border-color: color-mix(in srgb, var(--ui-stepper-accent) 28%, var(--ui-stepper-border));
+    background: color-mix(in srgb, var(--ui-stepper-accent) 10%, transparent);
+    color: color-mix(in srgb, var(--ui-stepper-accent) 68%, #0f172a 32%);
   }
 
   .item[data-state="complete"] .connector {
-    background: color-mix(in srgb, var(--ui-stepper-accent) 52%, transparent);
+    background: color-mix(in srgb, var(--ui-stepper-accent) 32%, transparent);
   }
 
   .item[data-state="current"] .connector::after {
@@ -164,11 +163,10 @@ const g = `
     background: linear-gradient(
       90deg,
       transparent 0%,
-      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      color-mix(in srgb, var(--ui-stepper-accent) 24%, transparent) 50%,
       transparent 100%
     );
-    transform: translateX(-100%);
-    animation: ui-stepper-connector-flow var(--ui-stepper-indicator-duration) linear infinite;
+    opacity: 0.45;
     pointer-events: none;
   }
 
@@ -176,11 +174,9 @@ const g = `
     background: linear-gradient(
       180deg,
       transparent 0%,
-      color-mix(in srgb, var(--ui-stepper-accent) 48%, transparent) 50%,
+      color-mix(in srgb, var(--ui-stepper-accent) 24%, transparent) 50%,
       transparent 100%
     );
-    transform: translateY(-100%);
-    animation-name: ui-stepper-connector-flow-vertical;
   }
 
   .item[data-state="error"] .trigger {
@@ -225,33 +221,6 @@ const g = `
     }
   }
 
-  @keyframes ui-stepper-current-pulse {
-    0% {
-      transform: scale(0.9);
-      opacity: 0.45;
-    }
-    70% {
-      transform: scale(1.2);
-      opacity: 0;
-    }
-    100% {
-      transform: scale(1.2);
-      opacity: 0;
-    }
-  }
-
-  @keyframes ui-stepper-connector-flow {
-    to {
-      transform: translateX(100%);
-    }
-  }
-
-  @keyframes ui-stepper-connector-flow-vertical {
-    to {
-      transform: translateY(100%);
-    }
-  }
-
   @media (prefers-contrast: more) {
     :host {
       --ui-stepper-border: color-mix(in srgb, var(--ui-stepper-text) 70%, transparent);
@@ -331,7 +300,7 @@ function d(o) {
   const t = String(o).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-class m extends b {
+class h extends b {
   constructor() {
     super(), this._observer = null, this._isSyncingValueAttribute = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
   }
@@ -572,7 +541,7 @@ class m extends b {
     `);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-stepper") && customElements.define("ui-stepper", m);
+typeof customElements < "u" && !customElements.get("ui-stepper") && customElements.define("ui-stepper", h);
 export {
-  m as UIStepper
+  h as UIStepper
 };

package/dist/time-field.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),c=require("./date-time-utils-5cf58cd0.js");require("./calendar-a8735e40.js");require("./scroll-lock-48793569.js");let M=0;const C=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),c=require("./date-time-utils-378ecc21.js");require("./calendar-a8735e40.js");require("./scroll-lock-d7b0df21.js");let M=0;const C=`
   :host {
     --ui-time-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
     --ui-time-field-border: 1px solid var(--ui-time-field-border-color);

package/dist/time-field.esm.js

@@ -1,7 +1,7 @@
 import { E as M } from "./ElementBase-909688f3.mjs";
-import { o as A, q as x, u as T } from "./date-time-utils-bdceb7af.mjs";
+import { q as A, u as x, v as T } from "./date-time-utils-a8b17ea7.mjs";
 import "./calendar-2c11b824.mjs";
-import "./scroll-lock-9de6d328.mjs";
+import "./scroll-lock-31da444f.mjs";
 let V = 0;
 const B = `
   :host {
@@ -356,26 +356,26 @@ class E extends M {
     const d = f(this._value, this._showSeconds()), F = this._order(), m = [];
     this._segmentButtons.clear();
     const v = d ? _(d) : null;
-    if (F.forEach((o, C) => {
+    if (F.forEach((n, C) => {
       if (C > 0) {
         const h = document.createElement("span");
-        h.className = "literal", h.textContent = o === "meridiem" ? " " : ":", m.push(h);
+        h.className = "literal", h.textContent = n === "meridiem" ? " " : ":", m.push(h);
       }
-      const n = document.createElement("button");
-      if (n.type = "button", n.className = "segment", n.setAttribute("data-segment", o), n.setAttribute("data-active", this._activeSegment === o ? "true" : "false"), n.setAttribute("data-empty", d ? "false" : "true"), n.setAttribute("aria-label", o === "hour" ? "Hour" : o === "minute" ? "Minute" : o === "second" ? "Second" : "AM or PM"), n.tabIndex = this._activeSegment === o ? 0 : -1, n.disabled = this.hasAttribute("disabled"), n.addEventListener("click", this._onSegmentClick), n.addEventListener("keydown", this._onSegmentKeyDown), !d)
-        n.textContent = I(o);
-      else if (o === "hour") {
+      const o = document.createElement("button");
+      if (o.type = "button", o.className = "segment", o.setAttribute("data-segment", n), o.setAttribute("data-active", this._activeSegment === n ? "true" : "false"), o.setAttribute("data-empty", d ? "false" : "true"), o.setAttribute("aria-label", n === "hour" ? "Hour" : n === "minute" ? "Minute" : n === "second" ? "Second" : "AM or PM"), o.tabIndex = this._activeSegment === n ? 0 : -1, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", this._onSegmentClick), o.addEventListener("keydown", this._onSegmentKeyDown), !d)
+        o.textContent = I(n);
+      else if (n === "hour") {
         const h = this._is12h() ? v.hour : d.hours;
-        n.textContent = String(h).padStart(2, "0");
+        o.textContent = String(h).padStart(2, "0");
       } else
-        o === "minute" ? n.textContent = String(d.minutes).padStart(2, "0") : o === "second" ? n.textContent = String(d.seconds).padStart(2, "0") : n.textContent = v.meridiem;
-      this._segmentButtons.set(o, n), m.push(n);
+        n === "minute" ? o.textContent = String(d.minutes).padStart(2, "0") : n === "second" ? o.textContent = String(d.seconds).padStart(2, "0") : o.textContent = v.meridiem;
+      this._segmentButtons.set(n, o), m.push(o);
     }), this._segmentsEl.replaceChildren(...m), i) {
-      const o = this._segmentButtons.get(this._activeSegment);
+      const n = this._segmentButtons.get(this._activeSegment);
       try {
-        o == null || o.focus({ preventScroll: !0 });
+        n == null || n.focus({ preventScroll: !0 });
       } catch {
-        o == null || o.focus();
+        n == null || n.focus();
       }
     }
   }

package/dist/time-picker.cjs.js

@@ -1,16 +1,16 @@
-"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=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),x=require("./dismissable-layer-193e3bed.js"),E=require("./calendar-a8735e40.js"),a=require("./date-time-utils-378ecc21.js");require("./scroll-lock-d7b0df21.js");const k=`
   <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=`
+`,w=`
   <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=`
+`,S=`
   <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=`
+`,C=`
   :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);
@@ -139,7 +139,7 @@
       outline-color: Highlight;
     }
   }
-`,C=`
+`,B=`
   .overlay { position: fixed; z-index: var(--ui-dp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -245,15 +245,15 @@
       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"}">
+`;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=`
+      <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>
-        ${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>`:""}
+        ${n?`<div class="picker"><label>${e.second}</label><select data-segment="seconds">${f}</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`
-      <style>${C}</style>
+      <style>${B}</style>
       ${t?'<div class="sheet-backdrop" data-action="backdrop"></div>':""}
       <section class="${t?"sheet":"panel"}" part="${t?"sheet":"popover"}">
         ${y}
@@ -264,18 +264,18 @@
           <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>
+    `}_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 s=i[0],n=Math.abs(s-e);for(let r=1;r<i.length;r+=1){const o=i[r],u=Math.abs(o-e);u<n&&(s=o,n=u)}t.value=String(s)}_syncOverlayState(){if(!this._overlay)return;this._syncOverlayHostZIndex();const t=this._isMobileSheet();this._ensureOverlayContent(t),this._syncDismissableLayer();const e=this._timeParts(this._pending),i=this._overlay.querySelector('select[data-segment="hours"]'),s=this._overlay.querySelector('select[data-segment="minutes"]'),n=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}s&&(this._setClosestOptionValue(s,e.minutes),s.disabled=o),n&&(this._setClosestOptionValue(n,e.seconds),n.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"]'),s=this._overlay.querySelector('select[data-segment="meridiem"]');if(!t||!e)return;let n=Number(t.value);const r=Number(e.value),o=i?Number(i.value):0;if(this._is12h()&&s){const l=s.value==="pm"?"pm":"am";l==="pm"&&n<12&&(n+=12),l==="am"&&n===12&&(n=0)}const u=m(n,r,o,this._withSeconds());this._pending=this._clampToBounds(u),this._emitInput("picker")}_onRootClick(t){var s;const e=t.target;if(!e)return;const i=(s=e.closest("[data-action]"))==null?void 0:s.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,s=((e.hours*60+e.minutes+i)%(24*60)+24*60)%(24*60),n=Math.floor(s/60),r=s%60,o=m(n,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 s=this._normalizeCanonical(this._draft);if(!s&&this._draft.trim()){this._inlineError=this.getAttribute("error")||this._translations().invalidTime,this._emitInvalid(this._draft,"parse"),this._updateHostState();return}this._commit(s,"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 s;const e=t.target;if(!e)return;const i=(s=e.closest("[data-action]"))==null?void 0:s.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 n=new Date,r=m(n.getHours(),n.getMinutes(),n.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")||"",s=this._inlineError||i,n=!!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()&&n),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=!s,this._errorEl.textContent=s),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>${C}</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>
+            <span class="icon" part="icon">${k}</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>
+            <button type="button" class="btn" part="clear" data-action="clear">${w}</button>
+            <button type="button" class="btn" part="toggle" data-action="toggle">${S}</button>
           </div>
           <div class="hint" part="hint"></div>
           <div class="error" part="error" role="alert"></div>