@editora/ui-core 0.1.24 → 0.2.0

package/dist/date-field.cjs.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const U=require("./ElementBase-DxbvhLJs.js"),C=require("./control-name-BmoI1m3a.js"),I=require("./calendar-D-mXMgqc.js"),u=require("./date-time-utils-y3AvNvGe.js");let w=0;const B=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const U=require("./ElementBase-DxbvhLJs.js"),C=require("./control-name-BmoI1m3a.js"),I=require("./calendar-o273O28D.js"),u=require("./date-time-utils-DdigV4hs.js");let w=0;const B=`
   :host {
     --ui-date-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
     --ui-date-field-border: 1px solid var(--ui-date-field-border-color);
-    --ui-date-field-radius: var(--ui-radius, 12px);
-    --ui-date-field-bg: var(--ui-color-surface, #ffffff);
+    --ui-date-field-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-date-field-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-date-field-text: var(--ui-color-text, #0f172a);
     --ui-date-field-muted: var(--ui-color-muted, #526175);
     --ui-date-field-focus: var(--ui-color-focus-ring, #2563eb);
@@ -63,7 +63,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: 4px;
-    min-block-size: 44px;
+    min-block-size: var(--ui-control-height-2, 32px);
     padding: 0 10px;
     border: var(--ui-date-field-border);
     border-radius: var(--ui-date-field-radius);
@@ -74,12 +74,12 @@
 
   .shell[data-focused="true"] {
     border-color: color-mix(in srgb, var(--ui-date-field-focus) 58%, var(--ui-date-field-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-date-field-focus) 22%, transparent);
+    box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-date-field-focus));
   }
 
   .shell[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-date-field-danger) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-date-field-danger) 18%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-date-field-danger) 45%, transparent);
   }
 
   .segment {
@@ -127,7 +127,7 @@
   :host([readonly]) .segment {
     cursor: default;
   }
-`;function V(r,e){return new Date(Date.UTC(r,e,0)).getUTCDate()}function q(r){return`${String(r.year).padStart(4,"0")}-${String(r.month).padStart(2,"0")}-${String(r.day).padStart(2,"0")}`}function g(r){if(!r)return null;const e=I.parseISO(r);return e?{year:e.y,month:e.m,day:e.d}:null}function b(r){return{...r,day:Math.min(r.day,V(r.year,r.month))}}function z(r,e,i){if(e==="day"){const t=new Date(Date.UTC(r.year,r.month-1,r.day));return t.setUTCDate(t.getUTCDate()+i),{year:t.getUTCFullYear(),month:t.getUTCMonth()+1,day:t.getUTCDate()}}if(e==="month"){const t=r.month-1+i,s=new Date(Date.UTC(r.year,t,1));return b({year:s.getUTCFullYear(),month:s.getUTCMonth()+1,day:r.day})}return b({...r,year:Math.max(1,r.year+i)})}function D(r){try{return new Intl.DateTimeFormat(r,{year:"numeric",month:"2-digit",day:"2-digit",timeZone:"UTC"}).formatToParts(new Date(Date.UTC(2026,10,21))).map(i=>i.type==="month"||i.type==="day"||i.type==="year"?{type:"segment",segment:i.type}:i.type==="literal"?{type:"literal",value:i.value}:null).filter(Boolean)}catch{return[{type:"segment",segment:"month"},{type:"literal",value:"/"},{type:"segment",segment:"day"},{type:"literal",value:"/"},{type:"segment",segment:"year"}]}}function M(r){return r==="year"?"YYYY":r==="month"?"MM":"DD"}const _=class _ extends U.ElementBase{constructor(){super(),this._value=null,this._activeSegment="month",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={month:"",day:"",year:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-date-field-${++w}`,this._defaultValue=null;try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onSegmentKeyDown=this._onSegmentKeyDown.bind(this),this._onSegmentClick=this._onSegmentClick.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["aria-label","aria-description","aria-describedby","value","min","max","locale","label","description","data-error","required","disabled","readonly","name"]}get value(){return this._value||""}set value(e){this._setValue(e||null,"api")}clearValue(){this._setValue(null,"clear")}formResetCallback(){this._setValue(this._defaultValue,"form")}connectedCallback(){super.connectedCallback(),this._defaultValue==null&&(this._defaultValue=this.getAttribute("value")),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._bufferTimer!=null&&(window.clearTimeout(this._bufferTimer),this._bufferTimer=null),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(e==="value"&&(this._value=this._normalizeDateValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+`;function V(r,e){return new Date(Date.UTC(r,e,0)).getUTCDate()}function q(r){return`${String(r.year).padStart(4,"0")}-${String(r.month).padStart(2,"0")}-${String(r.day).padStart(2,"0")}`}function g(r){if(!r)return null;const e=I.parseISO(r);return e?{year:e.y,month:e.m,day:e.d}:null}function _(r){return{...r,day:Math.min(r.day,V(r.year,r.month))}}function z(r,e,i){if(e==="day"){const t=new Date(Date.UTC(r.year,r.month-1,r.day));return t.setUTCDate(t.getUTCDate()+i),{year:t.getUTCFullYear(),month:t.getUTCMonth()+1,day:t.getUTCDate()}}if(e==="month"){const t=r.month-1+i,s=new Date(Date.UTC(r.year,t,1));return _({year:s.getUTCFullYear(),month:s.getUTCMonth()+1,day:r.day})}return _({...r,year:Math.max(1,r.year+i)})}function D(r){try{return new Intl.DateTimeFormat(r,{year:"numeric",month:"2-digit",day:"2-digit",timeZone:"UTC"}).formatToParts(new Date(Date.UTC(2026,10,21))).map(i=>i.type==="month"||i.type==="day"||i.type==="year"?{type:"segment",segment:i.type}:i.type==="literal"?{type:"literal",value:i.value}:null).filter(Boolean)}catch{return[{type:"segment",segment:"month"},{type:"literal",value:"/"},{type:"segment",segment:"day"},{type:"literal",value:"/"},{type:"segment",segment:"year"}]}}function M(r){return r==="year"?"YYYY":r==="month"?"MM":"DD"}const b=class b extends U.ElementBase{constructor(){super(),this._value=null,this._activeSegment="month",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={month:"",day:"",year:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-date-field-${++w}`,this._defaultValue=null;try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onSegmentKeyDown=this._onSegmentKeyDown.bind(this),this._onSegmentClick=this._onSegmentClick.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["aria-label","aria-description","aria-describedby","value","min","max","locale","label","description","data-error","required","disabled","readonly","name"]}get value(){return this._value||""}set value(e){this._setValue(e||null,"api")}clearValue(){this._setValue(null,"clear")}formResetCallback(){this._setValue(this._defaultValue,"form")}connectedCallback(){super.connectedCallback(),this._defaultValue==null&&(this._defaultValue=this.getAttribute("value")),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._bufferTimer!=null&&(window.clearTimeout(this._bufferTimer),this._bufferTimer=null),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(e==="value"&&(this._value=this._normalizeDateValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
       <style>${B}</style>
       <div class="root">
         <div class="meta" hidden>
@@ -139,4 +139,4 @@
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeDateValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_normalizeDateValue(e){const i=u.normalizeDateIso(e);if(!i)return null;const t=u.normalizeDateIso(this.getAttribute("min")),s=u.normalizeDateIso(this.getAttribute("max"));return u.clampDateIso(i,t,s)}_partsOrFallback(){return g(this._value)||g(u.normalizeDateIso(this.getAttribute("min")))||{year:2026,month:1,day:1}}_segmentOrder(){return D(u.normalizeLocale(this.getAttribute("locale"))).filter(e=>e.type==="segment").map(e=>e.segment)}_moveSegmentFocus(e){const i=this._segmentOrder(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_focusSegment(e){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_applyParts(e,i){const t=this._normalizeDateValue(q(b(e)));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeDateValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const s=this._value;this._value=t,t?this.setAttribute("value",t):this.removeAttribute("value"),this._syncFormValue(),this._syncUi(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t,previousValue:s,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){try{this._internals?.setFormValue(this.value||"")}catch{}}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.month="",this._bufferBySegment.day="",this._bufferBySegment.year="",this._bufferTimer=null},900)}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(e==="year"?-4:-2);this._setBuffer(e,t);const s=e==="year"?4:2;if(t.length<s)return;const l=this._partsOrFallback(),o=Number(t);Number.isFinite(o)&&(e==="month"&&(l.month=Math.min(Math.max(o,1),12)),e==="day"&&(l.day=Math.min(Math.max(o,1),31)),e==="year"&&(l.year=Math.min(Math.max(o,1),9999)),this._applyParts(l,"keyboard"),e!=="year"&&this._moveSegmentFocus(1))}_onSegmentClick(e){const t=e.currentTarget.getAttribute("data-segment");t&&this._focusSegment(t)}_onSegmentKeyDown(e){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=e.currentTarget.getAttribute("data-segment");if(i){if(e.key==="ArrowLeft"){e.preventDefault(),this._moveSegmentFocus(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this._moveSegmentFocus(1);return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault();const t=z(this._partsOrFallback(),i,e.key==="ArrowUp"?1:-1);this._applyParts(t,"keyboard");return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}/^\d$/.test(e.key)&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),l=this.getAttribute("name");s&&typeof s.registerField=="function"&&l&&(this._formUnregister=s.registerField(l,{name:l,getValue:()=>this.value,setValue:o=>this._setValue(o?String(o):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Date is required"}:{valid:!0},setError:o=>{o?this.setAttribute("data-error",o):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){this._shellEl?.setAttribute("data-focused","true")}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||this._shellEl?.setAttribute("data-focused","false")}_syncUi(){if(!this._segmentsEl||!this._shellEl||!this._errorEl)return;const e=this.root.activeElement,i=!!e&&this._segmentsEl.contains(e),t=(this.getAttribute("label")||"").trim(),s=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),o=this.root.querySelector(".meta"),y=this.root.querySelector(".label"),k=this.root.querySelector(".label-text"),F=this.root.querySelector(".required"),c=this.root.querySelector(".description"),p=`${this._uid}-label`,v=`${this._uid}-description`,x=`${this._uid}-error`;o.hidden=!t&&!s,y.hidden=!t,y.id=t?p:"",k.textContent=t,F.hidden=!this.hasAttribute("required"),c.hidden=!s,c.id=s?v:"",c.textContent=s,this._errorEl.hidden=!l,this._errorEl.id=l?x:"",this._errorEl.textContent=l,this._shellEl.setAttribute("data-invalid",l?"true":"false"),this._shellEl.setAttribute("role","group"),C.syncControlName(this._shellEl,this,t?p:null);const S=[s?v:null,l?x:null].filter(Boolean).join(" ");C.syncControlDescription(this._shellEl,this,this._uid,S?S.split(" "):[]),this._shellEl.setAttribute("aria-invalid",l?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.removeAttribute("aria-readonly");const d=g(this._value),E=D(u.normalizeLocale(this.getAttribute("locale"))),A=E.filter(n=>n.type==="segment").map(n=>n.segment);A.includes(this._activeSegment)||(this._activeSegment=A[0]||"month");const m=[];if(this._segmentButtons.clear(),E.forEach(n=>{if(n.type==="literal"){const f=document.createElement("span");f.className="literal",f.textContent=n.value,m.push(f);return}const a=document.createElement("button");a.type="button",a.className="segment",a.setAttribute("data-segment",n.segment),a.setAttribute("data-active",this._activeSegment===n.segment?"true":"false"),a.setAttribute("data-empty",d?"false":"true");const T=n.segment==="month"?"Month":n.segment==="day"?"Day":"Year";a.tabIndex=this._activeSegment===n.segment?0:-1,a.disabled=this.hasAttribute("disabled"),a.addEventListener("click",this._onSegmentClick),a.addEventListener("keydown",this._onSegmentKeyDown),d?n.segment==="year"?a.textContent=String(d.year).padStart(4,"0"):n.segment==="month"?a.textContent=String(d.month).padStart(2,"0"):a.textContent=String(d.day).padStart(2,"0"):a.textContent=M(n.segment),a.setAttribute("aria-label",`${T} ${a.textContent||""}`.trim()),this._segmentButtons.set(n.segment,a),m.push(a)}),this._segmentsEl.replaceChildren(...m),i){const n=this._segmentButtons.get(this._activeSegment);try{n?.focus({preventScroll:!0})}catch{n?.focus()}}}};_.formAssociated=!0;let h=_;typeof customElements<"u"&&!customElements.get("ui-date-field")&&customElements.define("ui-date-field",h);exports.UIDateField=h;
+    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeDateValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_normalizeDateValue(e){const i=u.normalizeDateIso(e);if(!i)return null;const t=u.normalizeDateIso(this.getAttribute("min")),s=u.normalizeDateIso(this.getAttribute("max"));return u.clampDateIso(i,t,s)}_partsOrFallback(){return g(this._value)||g(u.normalizeDateIso(this.getAttribute("min")))||{year:2026,month:1,day:1}}_segmentOrder(){return D(u.normalizeLocale(this.getAttribute("locale"))).filter(e=>e.type==="segment").map(e=>e.segment)}_moveSegmentFocus(e){const i=this._segmentOrder(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_focusSegment(e){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_applyParts(e,i){const t=this._normalizeDateValue(q(_(e)));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeDateValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const s=this._value;this._value=t,t?this.setAttribute("value",t):this.removeAttribute("value"),this._syncFormValue(),this._syncUi(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t,previousValue:s,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){try{this._internals?.setFormValue(this.value||"")}catch{}}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.month="",this._bufferBySegment.day="",this._bufferBySegment.year="",this._bufferTimer=null},900)}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(e==="year"?-4:-2);this._setBuffer(e,t);const s=e==="year"?4:2;if(t.length<s)return;const l=this._partsOrFallback(),o=Number(t);Number.isFinite(o)&&(e==="month"&&(l.month=Math.min(Math.max(o,1),12)),e==="day"&&(l.day=Math.min(Math.max(o,1),31)),e==="year"&&(l.year=Math.min(Math.max(o,1),9999)),this._applyParts(l,"keyboard"),e!=="year"&&this._moveSegmentFocus(1))}_onSegmentClick(e){const t=e.currentTarget.getAttribute("data-segment");t&&this._focusSegment(t)}_onSegmentKeyDown(e){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=e.currentTarget.getAttribute("data-segment");if(i){if(e.key==="ArrowLeft"){e.preventDefault(),this._moveSegmentFocus(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this._moveSegmentFocus(1);return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault();const t=z(this._partsOrFallback(),i,e.key==="ArrowUp"?1:-1);this._applyParts(t,"keyboard");return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}/^\d$/.test(e.key)&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),l=this.getAttribute("name");s&&typeof s.registerField=="function"&&l&&(this._formUnregister=s.registerField(l,{name:l,getValue:()=>this.value,setValue:o=>this._setValue(o?String(o):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Date is required"}:{valid:!0},setError:o=>{o?this.setAttribute("data-error",o):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){this._shellEl?.setAttribute("data-focused","true")}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||this._shellEl?.setAttribute("data-focused","false")}_syncUi(){if(!this._segmentsEl||!this._shellEl||!this._errorEl)return;const e=this.root.activeElement,i=!!e&&this._segmentsEl.contains(e),t=(this.getAttribute("label")||"").trim(),s=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),o=this.root.querySelector(".meta"),y=this.root.querySelector(".label"),k=this.root.querySelector(".label-text"),F=this.root.querySelector(".required"),c=this.root.querySelector(".description"),p=`${this._uid}-label`,v=`${this._uid}-description`,x=`${this._uid}-error`;o.hidden=!t&&!s,y.hidden=!t,y.id=t?p:"",k.textContent=t,F.hidden=!this.hasAttribute("required"),c.hidden=!s,c.id=s?v:"",c.textContent=s,this._errorEl.hidden=!l,this._errorEl.id=l?x:"",this._errorEl.textContent=l,this._shellEl.setAttribute("data-invalid",l?"true":"false"),this._shellEl.setAttribute("role","group"),C.syncControlName(this._shellEl,this,t?p:null);const S=[s?v:null,l?x:null].filter(Boolean).join(" ");C.syncControlDescription(this._shellEl,this,this._uid,S?S.split(" "):[]),this._shellEl.setAttribute("aria-invalid",l?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.removeAttribute("aria-readonly");const d=g(this._value),E=D(u.normalizeLocale(this.getAttribute("locale"))),A=E.filter(n=>n.type==="segment").map(n=>n.segment);A.includes(this._activeSegment)||(this._activeSegment=A[0]||"month");const m=[];if(this._segmentButtons.clear(),E.forEach(n=>{if(n.type==="literal"){const f=document.createElement("span");f.className="literal",f.textContent=n.value,m.push(f);return}const a=document.createElement("button");a.type="button",a.className="segment",a.setAttribute("data-segment",n.segment),a.setAttribute("data-active",this._activeSegment===n.segment?"true":"false"),a.setAttribute("data-empty",d?"false":"true");const T=n.segment==="month"?"Month":n.segment==="day"?"Day":"Year";a.tabIndex=this._activeSegment===n.segment?0:-1,a.disabled=this.hasAttribute("disabled"),a.addEventListener("click",this._onSegmentClick),a.addEventListener("keydown",this._onSegmentKeyDown),d?n.segment==="year"?a.textContent=String(d.year).padStart(4,"0"):n.segment==="month"?a.textContent=String(d.month).padStart(2,"0"):a.textContent=String(d.day).padStart(2,"0"):a.textContent=M(n.segment),a.setAttribute("aria-label",`${T} ${a.textContent||""}`.trim()),this._segmentButtons.set(n.segment,a),m.push(a)}),this._segmentsEl.replaceChildren(...m),i){const n=this._segmentButtons.get(this._activeSegment);try{n?.focus({preventScroll:!0})}catch{n?.focus()}}}};b.formAssociated=!0;let h=b;typeof customElements<"u"&&!customElements.get("ui-date-field")&&customElements.define("ui-date-field",h);exports.UIDateField=h;

package/dist/date-field.esm.js

@@ -1,14 +1,14 @@
 import { E as U } from "./ElementBase-BeZT54Hj.mjs";
 import { s as w, a as I } from "./control-name-Bpj7F34X.mjs";
-import { p as B } from "./calendar-B3PUKHQm.mjs";
-import { n as d, a as V, b as C } from "./date-time-utils-BTlxnz5j.mjs";
+import { p as B } from "./calendar-DmxiZrR7.mjs";
+import { n as d, a as V, b as C } from "./date-time-utils-B4hAkt36.mjs";
 let M = 0;
 const q = `
   :host {
     --ui-date-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
     --ui-date-field-border: 1px solid var(--ui-date-field-border-color);
-    --ui-date-field-radius: var(--ui-radius, 12px);
-    --ui-date-field-bg: var(--ui-color-surface, #ffffff);
+    --ui-date-field-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-date-field-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-date-field-text: var(--ui-color-text, #0f172a);
     --ui-date-field-muted: var(--ui-color-muted, #526175);
     --ui-date-field-focus: var(--ui-color-focus-ring, #2563eb);
@@ -68,7 +68,7 @@ const q = `
     align-items: center;
     flex-wrap: wrap;
     gap: 4px;
-    min-block-size: 44px;
+    min-block-size: var(--ui-control-height-2, 32px);
     padding: 0 10px;
     border: var(--ui-date-field-border);
     border-radius: var(--ui-date-field-radius);
@@ -79,12 +79,12 @@ const q = `
 
   .shell[data-focused="true"] {
     border-color: color-mix(in srgb, var(--ui-date-field-focus) 58%, var(--ui-date-field-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-date-field-focus) 22%, transparent);
+    box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-date-field-focus));
   }
 
   .shell[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-date-field-danger) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-date-field-danger) 18%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-date-field-danger) 45%, transparent);
   }
 
   .segment {

package/dist/date-picker.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-DxbvhLJs.js"),z=require("./control-name-BmoI1m3a.js"),q=require("./dismissable-layer-DNfrKA20.js"),A=require("./calendar-D-mXMgqc.js"),s=require("./date-time-utils-y3AvNvGe.js");let M=0;const E=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./ElementBase-DxbvhLJs.js"),z=require("./control-name-BmoI1m3a.js"),q=require("./dismissable-layer-DNfrKA20.js"),A=require("./calendar-o273O28D.js"),s=require("./date-time-utils-DdigV4hs.js");let M=0;const E=`
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h.5A2.5 2.5 0 0 1 18 6.5v9A2.5 2.5 0 0 1 15.5 18h-11A2.5 2.5 0 0 1 2 15.5v-9A2.5 2.5 0 0 1 4.5 4H5V3a1 1 0 0 1 1-1Zm10 7H4v6.5c0 .276.224.5.5.5h11a.5.5 0 0 0 .5-.5V9ZM4.5 6a.5.5 0 0 0-.5.5V7h12v-.5a.5.5 0 0 0-.5-.5h-11Z" fill="currentColor"/>
   </svg>
@@ -18,17 +18,17 @@
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-dp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-success: var(--ui-color-success, #15803d);
-    --ui-dp-radius: 12px;
+    --ui-dp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dp-panel-radius: calc(var(--ui-dp-radius) + 2px);
     --ui-dp-shadow: none;
     --ui-dp-z: 1600;
     --ui-dp-gap: 12px;
-    --ui-dp-hit: 42px;
+    --ui-dp-hit: var(--ui-control-height-2, 32px);
     --ui-dp-field-bg: var(--ui-dp-bg);
     --ui-dp-field-border: var(--ui-dp-border);
     --ui-dp-field-focus: color-mix(in srgb, var(--ui-dp-accent) 72%, transparent);
@@ -55,11 +55,14 @@
   }
 
   :host([size="sm"]) {
-    --ui-dp-hit: 38px;
+    --ui-dp-action-size: 24px;
+    --ui-dp-action-bleed: -1px;
+    --ui-dp-hit: var(--ui-control-height-1, 24px);
   }
 
   :host([size="lg"]) {
-    --ui-dp-hit: 48px;
+    --ui-dp-action-size: 28px;
+    --ui-dp-hit: var(--ui-control-height-3, 40px);
   }
 
   .root {
@@ -83,6 +86,7 @@
   }
 
   .field {
+    box-sizing: border-box;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     align-items: center;
@@ -97,23 +101,27 @@
   }
 
   .field[data-open="true"] {
-    border-color: var(--ui-dp-field-focus);
-    box-shadow: 0 0 0 3px var(--ui-dp-focus-ring), 0 10px 24px rgba(2, 6, 23, 0.12);
+    border-color: var(--ui-ring-color, var(--ui-dp-accent));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-dp-accent));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .field:focus-within {
-    border-color: var(--ui-dp-field-focus);
-    box-shadow: 0 0 0 3px var(--ui-dp-focus-ring), 0 4px 14px rgba(2, 6, 23, 0.09);
+    border-color: var(--ui-ring-color, var(--ui-dp-accent));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-dp-accent));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .field[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-dp-field-error) 68%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dp-field-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dp-field-error);
   }
 
   .field[data-state="success"]:not([data-invalid="true"]) {
     border-color: color-mix(in srgb, var(--ui-dp-success) 56%, var(--ui-dp-border));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dp-success) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dp-success);
   }
 
   .field[data-state="loading"] {
@@ -141,22 +149,23 @@
     border: 0;
     background: transparent;
     color: var(--ui-dp-text);
-    padding: 8px 0;
+    padding: 0;
     outline: none;
     font: 500 14px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.005em;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-dp-text) 44%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-dp-text) 62%, transparent));
   }
 
   .btn {
     border: 0;
     background: transparent;
     color: color-mix(in srgb, var(--ui-dp-text) 74%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-dp-action-size, 24px);
+    block-size: var(--ui-dp-action-size, 24px);
+    margin-block: var(--ui-dp-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -389,12 +398,12 @@
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-dp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-success: var(--ui-color-success, #15803d);
-    --ui-dp-radius: 12px;
+    --ui-dp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dp-panel-radius: calc(var(--ui-dp-radius) + 2px);
     --ui-dp-field-error: var(--ui-color-danger, #dc2626);
     --ui-dp-focus-ring: color-mix(in srgb, var(--ui-dp-accent) 26%, transparent);

package/dist/date-picker.esm.js

@@ -1,8 +1,8 @@
 import { E as V } from "./ElementBase-BeZT54Hj.mjs";
 import { s as q, a as M } from "./control-name-Bpj7F34X.mjs";
 import { c as $ } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as R, c as S } from "./calendar-B3PUKHQm.mjs";
-import { r as F, e as T, n as g, i as y, s as H, b as U, p as L, a as O, f as Y, l as E, c as K, d as W } from "./date-time-utils-BTlxnz5j.mjs";
+import { r as R, c as S } from "./calendar-DmxiZrR7.mjs";
+import { r as F, e as T, n as g, i as y, s as H, b as U, p as L, a as O, f as Y, l as E, c as K, d as W } from "./date-time-utils-B4hAkt36.mjs";
 let N = 0;
 const Z = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
@@ -24,17 +24,17 @@ const Z = `
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-dp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-success: var(--ui-color-success, #15803d);
-    --ui-dp-radius: 12px;
+    --ui-dp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dp-panel-radius: calc(var(--ui-dp-radius) + 2px);
     --ui-dp-shadow: none;
     --ui-dp-z: 1600;
     --ui-dp-gap: 12px;
-    --ui-dp-hit: 42px;
+    --ui-dp-hit: var(--ui-control-height-2, 32px);
     --ui-dp-field-bg: var(--ui-dp-bg);
     --ui-dp-field-border: var(--ui-dp-border);
     --ui-dp-field-focus: color-mix(in srgb, var(--ui-dp-accent) 72%, transparent);
@@ -61,11 +61,14 @@ const Z = `
   }
 
   :host([size="sm"]) {
-    --ui-dp-hit: 38px;
+    --ui-dp-action-size: 24px;
+    --ui-dp-action-bleed: -1px;
+    --ui-dp-hit: var(--ui-control-height-1, 24px);
   }
 
   :host([size="lg"]) {
-    --ui-dp-hit: 48px;
+    --ui-dp-action-size: 28px;
+    --ui-dp-hit: var(--ui-control-height-3, 40px);
   }
 
   .root {
@@ -89,6 +92,7 @@ const Z = `
   }
 
   .field {
+    box-sizing: border-box;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     align-items: center;
@@ -103,23 +107,27 @@ const Z = `
   }
 
   .field[data-open="true"] {
-    border-color: var(--ui-dp-field-focus);
-    box-shadow: 0 0 0 3px var(--ui-dp-focus-ring), 0 10px 24px rgba(2, 6, 23, 0.12);
+    border-color: var(--ui-ring-color, var(--ui-dp-accent));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-dp-accent));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .field:focus-within {
-    border-color: var(--ui-dp-field-focus);
-    box-shadow: 0 0 0 3px var(--ui-dp-focus-ring), 0 4px 14px rgba(2, 6, 23, 0.09);
+    border-color: var(--ui-ring-color, var(--ui-dp-accent));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-dp-accent));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .field[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-dp-field-error) 68%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dp-field-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dp-field-error);
   }
 
   .field[data-state="success"]:not([data-invalid="true"]) {
     border-color: color-mix(in srgb, var(--ui-dp-success) 56%, var(--ui-dp-border));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dp-success) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dp-success);
   }
 
   .field[data-state="loading"] {
@@ -147,22 +155,23 @@ const Z = `
     border: 0;
     background: transparent;
     color: var(--ui-dp-text);
-    padding: 8px 0;
+    padding: 0;
     outline: none;
     font: 500 14px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.005em;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-dp-text) 44%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-dp-text) 62%, transparent));
   }
 
   .btn {
     border: 0;
     background: transparent;
     color: color-mix(in srgb, var(--ui-dp-text) 74%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-dp-action-size, 24px);
+    block-size: var(--ui-dp-action-size, 24px);
+    margin-block: var(--ui-dp-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -395,12 +404,12 @@ const Z = `
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-dp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-success: var(--ui-color-success, #15803d);
-    --ui-dp-radius: 12px;
+    --ui-dp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dp-panel-radius: calc(var(--ui-dp-radius) + 2px);
     --ui-dp-field-error: var(--ui-color-danger, #dc2626);
     --ui-dp-focus-ring: color-mix(in srgb, var(--ui-dp-accent) 26%, transparent);
@@ -616,8 +625,8 @@ class X extends V {
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
       if (e === "value" && !this._syncing && (this._value = this._clampToBounds(g(i)), this._pendingValue = this._value, this._draftInput = this._formatDisplay(this._value), this._inlineError = "", this._syncValueAttribute(this._value)), e === "open" && !this._syncing && (this._open = this.hasAttribute("open"), this._syncOverlay(this._open ? "api" : "outside")), e === "mode" && this._syncOverlay("attribute"), e === "disabled" && this.hasAttribute("disabled") && this._setOpen(!1, "outside"), (e === "min" || e === "max") && !this._syncing) {
-        const r = this._clampToBounds(this._value), n = this._clampToBounds(this._pendingValue);
-        this._value = r, this._pendingValue = n, this._draftInput = this._formatDisplay(this._allowInput() ? n : r), this._syncValueAttribute(r);
+        const r = this._clampToBounds(this._value), s = this._clampToBounds(this._pendingValue);
+        this._value = r, this._pendingValue = s, this._draftInput = this._formatDisplay(this._allowInput() ? s : r), this._syncValueAttribute(r);
       }
       if (e === "state" && this._state() === "loading" && this._setOpen(!1, "outside"), !!this.isConnected) {
         if (!this._hasView) {
@@ -805,14 +814,14 @@ class X extends V {
     if (!e || !t) return;
     const i = e.getBoundingClientRect();
     t.style.setProperty("--ui-dp-panel-width", `${Math.round(i.width)}px`);
-    const r = t.getBoundingClientRect(), n = t.getAttribute("data-placement"), s = K(
+    const r = t.getBoundingClientRect(), s = t.getAttribute("data-placement"), n = K(
       i,
       r,
       8,
       8,
-      n === "top" ? "top" : n === "bottom" ? "bottom" : null
+      s === "top" ? "top" : s === "bottom" ? "bottom" : null
     );
-    t.style.position = "absolute", t.style.top = `${Math.round(s.top)}px`, t.style.left = `${Math.round(s.left)}px`, t.setAttribute("data-placement", s.placement);
+    t.style.position = "absolute", t.style.top = `${Math.round(n.top)}px`, t.style.left = `${Math.round(n.left)}px`, t.setAttribute("data-placement", n.placement);
   }
   _parseAndValidate(e) {
     return W(e, this._locale());
@@ -823,11 +832,11 @@ class X extends V {
     this._value = i, this._pendingValue = i, this._draftInput = this._formatDisplay(i), this._inlineError = "", this._syncValueAttribute(i), this._emitInput(t), this._emitChange(t), this._updateHostState();
   }
   _renderPanelInner(e) {
-    const t = this._translations(), i = (this.getAttribute("label") || "").trim(), r = !!i || e, n = !this._closeOnSelect() || e, s = e ? "sheet" : "panel", o = e ? "true" : "false";
+    const t = this._translations(), i = (this.getAttribute("label") || "").trim(), r = !!i || e, s = !this._closeOnSelect() || e, n = e ? "sheet" : "panel", o = e ? "true" : "false";
     return `
       <style>${Q}</style>
       ${e ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
-      <section class="${s}" id="${this._panelId}" part="${e ? "sheet" : "popover"}" role="dialog" aria-modal="${o}" aria-labelledby="${this._panelTitleId}" aria-label="${v(t.datePickerPanel)}">
+      <section class="${n}" id="${this._panelId}" part="${e ? "sheet" : "popover"}" role="dialog" aria-modal="${o}" aria-labelledby="${this._panelTitleId}" aria-label="${v(t.datePickerPanel)}">
         <header class="header" part="header" ${r ? "" : "hidden"}>
           <p class="title" id="${this._panelTitleId}" ${i ? "" : "hidden"}>${v(i)}</p>
           ${e ? `<button type="button" class="action" data-action="cancel">${v(t.cancel)}</button>` : ""}
@@ -836,7 +845,7 @@ class X extends V {
         <footer class="footer" part="footer">
           <button type="button" class="action" data-action="today" part="presets">${v(t.today)}</button>
           <button type="button" class="action" data-action="clear" part="clear">${v(t.clear)}</button>
-          ${n ? `<button type="button" class="action" data-tone="primary" data-action="apply" part="apply">${v(t.apply)}</button>` : ""}
+          ${s ? `<button type="button" class="action" data-tone="primary" data-action="apply" part="apply">${v(t.apply)}</button>` : ""}
         </footer>
       </section>
     `;
@@ -850,8 +859,8 @@ class X extends V {
       e.getAttribute(a) !== u && e.setAttribute(a, u);
     }, i = (a, u) => {
       u ? e.hasAttribute(a) || e.setAttribute(a, "") : e.hasAttribute(a) && e.removeAttribute(a);
-    }, { min: r, max: n } = this._resolvedBounds();
-    t("selection", "single"), t("value", this._pendingValue), t("min", r), t("max", n), t("locale", this.getAttribute("locale")), t("translations", this.getAttribute("translations")), t("week-start", this.getAttribute("week-start"));
+    }, { min: r, max: s } = this._resolvedBounds();
+    t("selection", "single"), t("value", this._pendingValue), t("min", r), t("max", s), t("locale", this.getAttribute("locale")), t("translations", this.getAttribute("translations")), t("week-start", this.getAttribute("week-start"));
     const o = this.getAttribute("size") || "sm";
     t("size", o === "lg" ? "md" : "sm"), t("variant", this.getAttribute("variant")), t("outside-click", this.getAttribute("outside-click")), t("events", this.getAttribute("events")), t("events-max", this.getAttribute("events-max")), t("events-display", this.getAttribute("events-display"));
     const d = e.classList.contains("inline-calendar");
@@ -869,19 +878,19 @@ class X extends V {
     e && !this._releaseScrollLock ? this._releaseScrollLock = E() : !e && this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null), this._ensureOverlayContent(e);
     const t = this._overlay.querySelector(".title"), i = this._overlay.querySelector(".panel, .sheet");
     this._syncDismissableLayer();
-    const r = this._overlay.querySelector(".header"), n = this._overlay.querySelector(".footer"), s = this._translations();
-    if (i && (i.dataset.bare = this._isBare() ? "true" : "false"), n && (n.hidden = !this._showFooter()), r && (r.hidden = !(this.getAttribute("label") || "").trim() && !e), t) {
+    const r = this._overlay.querySelector(".header"), s = this._overlay.querySelector(".footer"), n = this._translations();
+    if (i && (i.dataset.bare = this._isBare() ? "true" : "false"), s && (s.hidden = !this._showFooter()), r && (r.hidden = !(this.getAttribute("label") || "").trim() && !e), t) {
       const c = (this.getAttribute("label") || "").trim();
       t.textContent = c, t.hidden = !c;
     }
     const o = this._overlay.querySelector('[data-action="today"]');
-    o && (o.textContent = s.today);
+    o && (o.textContent = n.today);
     const d = this._overlay.querySelector('[data-action="clear"]');
-    d && (d.textContent = s.clear);
+    d && (d.textContent = n.clear);
     const a = this._overlay.querySelector('[data-action="cancel"]');
-    a && (a.textContent = s.cancel);
+    a && (a.textContent = n.cancel);
     const u = this._overlay.querySelector('[data-action="apply"]');
-    u && (u.textContent = s.apply);
+    u && (u.textContent = n.apply);
     const m = this._overlay.querySelector('[data-action="apply"]');
     m && (m.hidden = this._closeOnSelect() && !e);
     const h = this._overlay.querySelectorAll(".action"), x = this._isInteractionBlocked();
@@ -948,9 +957,9 @@ class X extends V {
       }
       if (r === "today") {
         e.preventDefault();
-        const n = this._todayIso(), s = this._parseAndValidate(n);
-        if (!s) return;
-        const { min: o, max: d } = this._resolvedBounds(), a = O(s, o, d);
+        const s = this._todayIso(), n = this._parseAndValidate(s);
+        if (!n) return;
+        const { min: o, max: d } = this._resolvedBounds(), a = O(n, o, d);
         if (!a) return;
         this._pendingValue = a, this._emitInput("today"), this._closeOnSelect() && !this._isInlineMode() ? (this._commit(a, "today"), this._setOpen(!1, "today")) : this._updateHostState();
         return;
@@ -1011,9 +1020,9 @@ class X extends V {
         return;
       }
       if (r === "today") {
-        const n = this._parseAndValidate(this._todayIso());
-        if (!n) return;
-        const { min: s, max: o } = this._resolvedBounds(), d = O(n, s, o);
+        const s = this._parseAndValidate(this._todayIso());
+        if (!s) return;
+        const { min: n, max: o } = this._resolvedBounds(), d = O(s, n, o);
         if (!d) return;
         this._pendingValue = d, this._emitInput("today"), this._closeOnSelect() ? (this._commit(d, "today"), this._setOpen(!1, "today")) : this._renderOverlay();
         return;
@@ -1037,21 +1046,21 @@ class X extends V {
     if (t.type === "select")
       r = g(t.detail?.value || null);
     else if (t.type === "change") {
-      const s = t.detail?.value;
-      typeof s == "string" && (r = g(s));
+      const n = t.detail?.value;
+      typeof n == "string" && (r = g(n));
     }
     if (!r) return;
-    const n = this._clampToBounds(r);
-    n && (this._pendingValue = n, this._emitInput("calendar"), this._closeOnSelect() ? (this._commit(n, "calendar"), this._isInlineMode() || this._setOpen(!1, "calendar")) : this._updateHostState());
+    const s = this._clampToBounds(r);
+    s && (this._pendingValue = s, this._emitInput("calendar"), this._closeOnSelect() ? (this._commit(s, "calendar"), this._isInlineMode() || this._setOpen(!1, "calendar")) : this._updateHostState());
   }
   _updateHostState() {
     if (!this._hasView) return;
-    const e = this.getAttribute("label") || "", t = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", r = this._inlineError || i, n = this._placeholder(), s = this._translations(), o = !!(this._value || this._pendingValue), d = this.getAttribute("name") || "", a = this._isInlineMode(), u = r ? "error" : this._state(), m = this._allowInput() ? this._draftInput : this._formatDisplay(this._pendingValue || this._value), h = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), f = this.root.querySelector(".required"), c = this.root.querySelector(".field"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), _ = this.root.querySelector('.btn[data-action="toggle"]'), b = this.root.querySelector(".hint"), k = this.root.querySelector(".error"), w = this.root.querySelector(".hidden-input"), p = this.root.querySelector(".inline-panel"), B = this.root.querySelector('.inline-panel [data-action="today"]'), D = this.root.querySelector('.inline-panel [data-action="clear"]'), z = this.root.querySelector('.inline-panel [data-action="apply"]'), P = this.root.querySelector(".inline-panel .footer");
-    if (h && (h.hidden = !e, h.id = this._labelId, h.setAttribute("for", this._inputId)), x && (x.textContent = e), f && (f.hidden = !this.hasAttribute("required")), c && (c.dataset.invalid = r ? "true" : "false", c.dataset.open = this._open && !a ? "true" : "false", c.dataset.state = u, c.setAttribute("aria-disabled", this._isInteractionBlocked() ? "true" : "false")), l && (l.value !== m && (l.value = m), l.id = this._inputId, l.placeholder = n, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", a ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", r ? "true" : "false"), q(l, this, e ? this._labelId : null, n)), I && (I.hidden = !(this._clearable() && o), I.disabled = this._isInteractionBlocked(), I.setAttribute("aria-label", s.clearDate)), _ && (_.hidden = a, _.disabled = this._isInteractionBlocked(), _.setAttribute("aria-expanded", a ? "false" : String(this._open)), _.setAttribute("aria-controls", this._panelId), _.setAttribute("aria-label", s.toggleCalendar)), b && (b.id = this._hintId, b.hidden = !t, b.textContent = t), k && (k.id = this._errorId, k.hidden = !r, k.textContent = r), l) {
+    const e = this.getAttribute("label") || "", t = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", r = this._inlineError || i, s = this._placeholder(), n = this._translations(), o = !!(this._value || this._pendingValue), d = this.getAttribute("name") || "", a = this._isInlineMode(), u = r ? "error" : this._state(), m = this._allowInput() ? this._draftInput : this._formatDisplay(this._pendingValue || this._value), h = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), f = this.root.querySelector(".required"), c = this.root.querySelector(".field"), l = this.root.querySelector(".input"), I = this.root.querySelector('.btn[data-action="clear"]'), _ = this.root.querySelector('.btn[data-action="toggle"]'), b = this.root.querySelector(".hint"), k = this.root.querySelector(".error"), w = this.root.querySelector(".hidden-input"), p = this.root.querySelector(".inline-panel"), B = this.root.querySelector('.inline-panel [data-action="today"]'), D = this.root.querySelector('.inline-panel [data-action="clear"]'), z = this.root.querySelector('.inline-panel [data-action="apply"]'), P = this.root.querySelector(".inline-panel .footer");
+    if (h && (h.hidden = !e, h.id = this._labelId, h.setAttribute("for", this._inputId)), x && (x.textContent = e), f && (f.hidden = !this.hasAttribute("required")), c && (c.dataset.invalid = r ? "true" : "false", c.dataset.open = this._open && !a ? "true" : "false", c.dataset.state = u, c.setAttribute("aria-disabled", this._isInteractionBlocked() ? "true" : "false")), l && (l.value !== m && (l.value = m), l.id = this._inputId, l.placeholder = s, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", a ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", r ? "true" : "false"), q(l, this, e ? this._labelId : null, s)), I && (I.hidden = !(this._clearable() && o), I.disabled = this._isInteractionBlocked(), I.setAttribute("aria-label", n.clearDate)), _ && (_.hidden = a, _.disabled = this._isInteractionBlocked(), _.setAttribute("aria-expanded", a ? "false" : String(this._open)), _.setAttribute("aria-controls", this._panelId), _.setAttribute("aria-label", n.toggleCalendar)), b && (b.id = this._hintId, b.hidden = !t, b.textContent = t), k && (k.id = this._errorId, k.hidden = !r, k.textContent = r), l) {
       const A = [];
       t && b && !b.hidden && A.push(this._hintId), r && A.push(this._errorId), M(l, this, this._uid, A);
     }
-    if (w && (w.disabled = !d, w.name = d, w.value = this._value || ""), p && (p.hidden = !a, p.id = this._panelId, p.dataset.bare = this._isBare() ? "true" : "false", p.setAttribute("role", "dialog"), p.setAttribute("aria-modal", "false"), p.setAttribute("aria-label", e || s.selectDate)), P && (P.hidden = !this._showFooter()), B && (B.textContent = s.today), D && (D.textContent = s.clear), z && (z.textContent = s.apply), a) {
+    if (w && (w.disabled = !d, w.name = d, w.value = this._value || ""), p && (p.hidden = !a, p.id = this._panelId, p.dataset.bare = this._isBare() ? "true" : "false", p.setAttribute("role", "dialog"), p.setAttribute("aria-modal", "false"), p.setAttribute("aria-label", e || n.selectDate)), P && (P.hidden = !this._showFooter()), B && (B.textContent = n.today), D && (D.textContent = n.clear), z && (z.textContent = n.apply), a) {
       this._scheduleInlineCalendarSync(), this._destroyOverlay();
       return;
     }