@editora/ui-core 0.1.8 → 0.1.10

package/dist/date-field.cjs.js

@@ -0,0 +1,142 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),U=require("./calendar-a8735e40.js"),d=require("./date-time-utils-5cf58cd0.js");require("./scroll-lock-48793569.js");let F=0;const I=`
+  :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-text: var(--ui-color-text, #0f172a);
+    --ui-date-field-muted: var(--ui-color-muted, #64748b);
+    --ui-date-field-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-date-field-danger: var(--ui-color-danger, #dc2626);
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-date-field-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-date-field-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", sans-serif;
+  }
+
+  .required {
+    color: var(--ui-date-field-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-date-field-muted);
+  }
+
+  .error {
+    color: var(--ui-date-field-danger);
+  }
+
+  .shell {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-block-size: 44px;
+    padding: 0 10px;
+    border: var(--ui-date-field-border);
+    border-radius: var(--ui-date-field-radius);
+    background: var(--ui-date-field-bg);
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+    box-sizing: border-box;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .segment {
+    border: none;
+    background: transparent;
+    color: inherit;
+    min-inline-size: 0;
+    padding: 6px 4px;
+    border-radius: 8px;
+    font: 600 15px/1.2 "Inter", "IBM Plex Sans", sans-serif;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+
+  .segment[data-empty="true"] {
+    color: color-mix(in srgb, var(--ui-date-field-text) 38%, transparent);
+  }
+
+  .segment[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-date-field-focus) 16%, transparent);
+  }
+
+  .segment:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-date-field-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .literal {
+    color: color-mix(in srgb, var(--ui-date-field-text) 42%, transparent);
+    font: 600 14px/1 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .segment,
+  :host([readonly]) .segment {
+    cursor: default;
+  }
+`;function T(r,e){return new Date(Date.UTC(r,e,0)).getUTCDate()}function w(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=U.parseISO(r);return e?{year:e.y,month:e.m,day:e.d}:null}function b(r){return{...r,day:Math.min(r.day,T(r.year,r.month))}}function B(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,a=new Date(Date.UTC(r.year,t,1));return b({year:a.getUTCFullYear(),month:a.getUTCMonth()+1,day:r.day})}return b({...r,year:Math.max(1,r.year+i)})}function A(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 V(r){return r==="year"?"YYYY":r==="month"?"MM":"DD"}class _ extends k.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-${++F}`,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["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(){var e,i;this.setContent(`
+      <style>${I}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="shell" part="shell" data-focused="false" data-invalid="false">
+          <div class="segments" part="segments"></div>
+        </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"),(e=this._shellEl)==null||e.addEventListener("focusin",this._onFocusIn),(i=this._shellEl)==null||i.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeDateValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_normalizeDateValue(e){const i=d.normalizeDateIso(e);if(!i)return null;const t=d.normalizeDateIso(this.getAttribute("min")),a=d.normalizeDateIso(this.getAttribute("max"));return d.clampDateIso(i,t,a)}_partsOrFallback(){return g(this._value)||g(d.normalizeDateIso(this.getAttribute("min")))||{year:2026,month:1,day:1}}_segmentOrder(){return A(d.normalizeLocale(this.getAttribute("locale"))).filter(e=>e.type==="segment").map(e=>e.segment)}_moveSegmentFocus(e){const i=this._segmentOrder(),t=i.indexOf(this._activeSegment),a=i[(t+e+i.length)%i.length];this._focusSegment(a)}_focusSegment(e){var i;this._activeSegment=e,this._syncUi(),(i=this._segmentButtons.get(e))==null||i.focus()}_applyParts(e,i){const t=this._normalizeDateValue(w(b(e)));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeDateValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const a=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:a,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){var e;try{(e=this._internals)==null||e.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 a=e==="year"?4:2;if(t.length<a)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=B(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(){var e;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const t=this.getRootNode().host,l=((e=t==null?void 0:t.closest)==null?void 0:e.call(t,"ui-form"))||null||this.closest("ui-form"),o=this.getAttribute("name");l&&typeof l.registerField=="function"&&o&&(this._formUnregister=l.registerField(o,{name:o,getValue:()=>this.value,setValue:u=>this._setValue(u?String(u):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Date is required"}:{valid:!0},setError:u=>{u?this.setAttribute("data-error",u):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){var e;(e=this._shellEl)==null||e.setAttribute("data-focused","true")}_onFocusOut(e){var i,t;(i=this._shellEl)!=null&&i.contains(e.relatedTarget)||(t=this._shellEl)==null||t.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(),a=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),o=this.root.querySelector(".meta"),u=this.root.querySelector(".label"),D=this.root.querySelector(".label-text"),C=this.root.querySelector(".required"),c=this.root.querySelector(".description"),y=`${this._uid}-label`,p=`${this._uid}-description`,v=`${this._uid}-error`;o.hidden=!t&&!a,u.hidden=!t,u.id=t?y:"",D.textContent=t,C.hidden=!this.hasAttribute("required"),c.hidden=!a,c.id=a?p:"",c.textContent=a,this._errorEl.hidden=!l,this._errorEl.id=l?v:"",this._errorEl.textContent=l,this._shellEl.setAttribute("data-invalid",l?"true":"false"),this._shellEl.setAttribute("role","group"),t?this._shellEl.setAttribute("aria-labelledby",y):this._shellEl.removeAttribute("aria-labelledby");const x=[a?p:null,l?v:null].filter(Boolean).join(" ");x?this._shellEl.setAttribute("aria-describedby",x):this._shellEl.removeAttribute("aria-describedby"),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.setAttribute("aria-readonly",this.hasAttribute("readonly")?"true":"false");const h=g(this._value),S=A(d.normalizeLocale(this.getAttribute("locale"))),E=S.filter(s=>s.type==="segment").map(s=>s.segment);E.includes(this._activeSegment)||(this._activeSegment=E[0]||"month");const m=[];if(this._segmentButtons.clear(),S.forEach(s=>{if(s.type==="literal"){const f=document.createElement("span");f.className="literal",f.textContent=s.value,m.push(f);return}const n=document.createElement("button");n.type="button",n.className="segment",n.setAttribute("data-segment",s.segment),n.setAttribute("data-active",this._activeSegment===s.segment?"true":"false"),n.setAttribute("data-empty",h?"false":"true"),n.setAttribute("aria-label",s.segment==="month"?"Month":s.segment==="day"?"Day":"Year"),n.tabIndex=this._activeSegment===s.segment?0:-1,n.disabled=this.hasAttribute("disabled"),n.addEventListener("click",this._onSegmentClick),n.addEventListener("keydown",this._onSegmentKeyDown),h?s.segment==="year"?n.textContent=String(h.year).padStart(4,"0"):s.segment==="month"?n.textContent=String(h.month).padStart(2,"0"):n.textContent=String(h.day).padStart(2,"0"):n.textContent=V(s.segment),this._segmentButtons.set(s.segment,n),m.push(n)}),this._segmentsEl.replaceChildren(...m),i){const s=this._segmentButtons.get(this._activeSegment);try{s==null||s.focus({preventScroll:!0})}catch{s==null||s.focus()}}}}_.formAssociated=!0;typeof customElements<"u"&&!customElements.get("ui-date-field")&&customElements.define("ui-date-field",_);exports.UIDateField=_;

package/dist/date-field.esm.js

@@ -0,0 +1,384 @@
+import { E as F } from "./ElementBase-909688f3.mjs";
+import { p as U } from "./calendar-2c11b824.mjs";
+import { n as h, a as I, b as E } from "./date-time-utils-bdceb7af.mjs";
+import "./scroll-lock-9de6d328.mjs";
+let T = 0;
+const w = `
+  :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-text: var(--ui-color-text, #0f172a);
+    --ui-date-field-muted: var(--ui-color-muted, #64748b);
+    --ui-date-field-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-date-field-danger: var(--ui-color-danger, #dc2626);
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-date-field-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-date-field-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", sans-serif;
+  }
+
+  .required {
+    color: var(--ui-date-field-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-date-field-muted);
+  }
+
+  .error {
+    color: var(--ui-date-field-danger);
+  }
+
+  .shell {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-block-size: 44px;
+    padding: 0 10px;
+    border: var(--ui-date-field-border);
+    border-radius: var(--ui-date-field-radius);
+    background: var(--ui-date-field-bg);
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+    box-sizing: border-box;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .segment {
+    border: none;
+    background: transparent;
+    color: inherit;
+    min-inline-size: 0;
+    padding: 6px 4px;
+    border-radius: 8px;
+    font: 600 15px/1.2 "Inter", "IBM Plex Sans", sans-serif;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+
+  .segment[data-empty="true"] {
+    color: color-mix(in srgb, var(--ui-date-field-text) 38%, transparent);
+  }
+
+  .segment[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-date-field-focus) 16%, transparent);
+  }
+
+  .segment:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-date-field-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .literal {
+    color: color-mix(in srgb, var(--ui-date-field-text) 42%, transparent);
+    font: 600 14px/1 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .segment,
+  :host([readonly]) .segment {
+    cursor: default;
+  }
+`;
+function B(r, e) {
+  return new Date(Date.UTC(r, e, 0)).getUTCDate();
+}
+function V(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 = U(r);
+  return e ? { year: e.y, month: e.m, day: e.d } : null;
+}
+function b(r) {
+  return { ...r, day: Math.min(r.day, B(r.year, r.month)) };
+}
+function M(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, a = new Date(Date.UTC(r.year, t, 1));
+    return b({ year: a.getUTCFullYear(), month: a.getUTCMonth() + 1, day: r.day });
+  }
+  return b({ ...r, year: Math.max(1, r.year + i) });
+}
+function A(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 q(r) {
+  return r === "year" ? "YYYY" : r === "month" ? "MM" : "DD";
+}
+class D extends F {
+  constructor() {
+    super(), this._value = null, this._activeSegment = "month", this._segmentButtons = /* @__PURE__ */ 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-${++T}`, 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 ["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() {
+    var e, i;
+    this.setContent(`
+      <style>${w}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="shell" part="shell" data-focused="false" data-invalid="false">
+          <div class="segments" part="segments"></div>
+        </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"), (e = this._shellEl) == null || e.addEventListener("focusin", this._onFocusIn), (i = this._shellEl) == null || i.addEventListener("focusout", this._onFocusOut), this._value = this._normalizeDateValue(this.getAttribute("value")), this._syncFormValue(), this._syncUi();
+  }
+  _normalizeDateValue(e) {
+    const i = h(e);
+    if (!i)
+      return null;
+    const t = h(this.getAttribute("min")), a = h(this.getAttribute("max"));
+    return I(i, t, a);
+  }
+  _partsOrFallback() {
+    return g(this._value) || g(h(this.getAttribute("min"))) || { year: 2026, month: 1, day: 1 };
+  }
+  _segmentOrder() {
+    return A(E(this.getAttribute("locale"))).filter((e) => e.type === "segment").map((e) => e.segment);
+  }
+  _moveSegmentFocus(e) {
+    const i = this._segmentOrder(), t = i.indexOf(this._activeSegment), a = i[(t + e + i.length) % i.length];
+    this._focusSegment(a);
+  }
+  _focusSegment(e) {
+    var i;
+    this._activeSegment = e, this._syncUi(), (i = this._segmentButtons.get(e)) == null || i.focus();
+  }
+  _applyParts(e, i) {
+    const t = this._normalizeDateValue(V(b(e)));
+    this._setValue(t, i);
+  }
+  _setValue(e, i) {
+    const t = this._normalizeDateValue(e);
+    if (t === this._value) {
+      this._syncFormValue(), this._syncUi();
+      return;
+    }
+    const a = 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: a, source: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _syncFormValue() {
+    var e;
+    try {
+      (e = this._internals) == null || e.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 a = e === "year" ? 4 : 2;
+    if (t.length < a)
+      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 = M(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() {
+    var e;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const t = this.getRootNode().host, l = ((e = t == null ? void 0 : t.closest) == null ? void 0 : e.call(t, "ui-form")) || null || this.closest("ui-form"), o = this.getAttribute("name");
+      l && typeof l.registerField == "function" && o && (this._formUnregister = l.registerField(o, {
+        name: o,
+        getValue: () => this.value,
+        setValue: (u) => this._setValue(u ? String(u) : null, "form"),
+        validate: async () => this.hasAttribute("required") && !this.value ? { valid: !1, message: "Date is required" } : { valid: !0 },
+        setError: (u) => {
+          u ? this.setAttribute("data-error", u) : this.removeAttribute("data-error"), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+  _onFocusIn() {
+    var e;
+    (e = this._shellEl) == null || e.setAttribute("data-focused", "true");
+  }
+  _onFocusOut(e) {
+    var i, t;
+    (i = this._shellEl) != null && i.contains(e.relatedTarget) || (t = this._shellEl) == null || t.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(), a = (this.getAttribute("description") || "").trim(), l = (this.getAttribute("data-error") || "").trim(), o = this.root.querySelector(".meta"), u = this.root.querySelector(".label"), C = this.root.querySelector(".label-text"), k = this.root.querySelector(".required"), c = this.root.querySelector(".description"), _ = `${this._uid}-label`, y = `${this._uid}-description`, p = `${this._uid}-error`;
+    o.hidden = !t && !a, u.hidden = !t, u.id = t ? _ : "", C.textContent = t, k.hidden = !this.hasAttribute("required"), c.hidden = !a, c.id = a ? y : "", c.textContent = a, this._errorEl.hidden = !l, this._errorEl.id = l ? p : "", this._errorEl.textContent = l, this._shellEl.setAttribute("data-invalid", l ? "true" : "false"), this._shellEl.setAttribute("role", "group"), t ? this._shellEl.setAttribute("aria-labelledby", _) : this._shellEl.removeAttribute("aria-labelledby");
+    const v = [a ? y : null, l ? p : null].filter(Boolean).join(" ");
+    v ? this._shellEl.setAttribute("aria-describedby", v) : this._shellEl.removeAttribute("aria-describedby"), 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.setAttribute("aria-readonly", this.hasAttribute("readonly") ? "true" : "false");
+    const d = g(this._value), x = A(E(this.getAttribute("locale"))), S = x.filter((s) => s.type === "segment").map((s) => s.segment);
+    S.includes(this._activeSegment) || (this._activeSegment = S[0] || "month");
+    const m = [];
+    if (this._segmentButtons.clear(), x.forEach((s) => {
+      if (s.type === "literal") {
+        const f = document.createElement("span");
+        f.className = "literal", f.textContent = s.value, m.push(f);
+        return;
+      }
+      const n = document.createElement("button");
+      n.type = "button", n.className = "segment", n.setAttribute("data-segment", s.segment), n.setAttribute("data-active", this._activeSegment === s.segment ? "true" : "false"), n.setAttribute("data-empty", d ? "false" : "true"), n.setAttribute("aria-label", s.segment === "month" ? "Month" : s.segment === "day" ? "Day" : "Year"), n.tabIndex = this._activeSegment === s.segment ? 0 : -1, n.disabled = this.hasAttribute("disabled"), n.addEventListener("click", this._onSegmentClick), n.addEventListener("keydown", this._onSegmentKeyDown), d ? s.segment === "year" ? n.textContent = String(d.year).padStart(4, "0") : s.segment === "month" ? n.textContent = String(d.month).padStart(2, "0") : n.textContent = String(d.day).padStart(2, "0") : n.textContent = q(s.segment), this._segmentButtons.set(s.segment, n), m.push(n);
+    }), this._segmentsEl.replaceChildren(...m), i) {
+      const s = this._segmentButtons.get(this._activeSegment);
+      try {
+        s == null || s.focus({ preventScroll: !0 });
+      } catch {
+        s == null || s.focus();
+      }
+    }
+  }
+}
+D.formAssociated = !0;
+typeof customElements < "u" && !customElements.get("ui-date-field") && customElements.define("ui-date-field", D);
+export {
+  D as UIDateField
+};