@editora/ui-core 0.1.21 → 0.1.23

package/dist/textarea.cjs.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),g=require("./control-name-BmoI1m3a.js"),z=`
   <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
     <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   </svg>
-`,A=`
+`,w=`
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
-    --ui-textarea-muted: var(--ui-color-muted, #64748b);
+    --ui-textarea-muted: var(--ui-color-muted, #526175);
     --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
     --ui-textarea-danger: var(--ui-color-danger, #dc2626);
-    --ui-textarea-success: var(--ui-color-success, #16a34a);
+    --ui-textarea-success: var(--ui-color-success, #15803d);
     --ui-textarea-radius: 12px;
     --ui-textarea-padding-x: 12px;
     --ui-textarea-padding-y: 10px;
@@ -229,11 +229,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-textarea-accent: var(--ui-color-success, #16a34a);
+    --ui-textarea-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-textarea-accent: var(--ui-color-warning, #d97706);
+    --ui-textarea-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -308,8 +308,8 @@
       color: CanvasText;
     }
   }
-`;function x(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(r,t){const e=Number(r);return Number.isFinite(e)?e:t}const z=2147483647;function c(r){if(!r)return null;const t=Number(r);return!Number.isFinite(t)||t<0||t>z?null:Math.trunc(t)}class g extends _.ElementBase{constructor(){super(),this._uid=`ui-textarea-${Math.random().toString(36).slice(2,9)}`,this._textarea=null,this._clearBtn=null,this._countEl=null,this._debounceTimer=null,this._formUnregister=null,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onClear=this._onClear.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","rows","readonly","autofocus","resize","name","required","variant","color","radius","label","description","autosize","max-rows","show-count","density","tone","headless","data-error"]}connectedCallback(){super.connectedCallback(),this._tryRegisterWithForm()}disconnectedCallback(){this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="name"&&this._tryRegisterWithForm(),t==="value"&&this._textarea){const a=i||"";this._textarea.value!==a&&(this._textarea.value=a),this._syncDynamicUi(),this._applyAutosize();return}if(new Set(["placeholder","disabled","maxlength","minlength","rows","readonly","required","resize","name","validation","show-count","clearable","autosize","max-rows","variant","size","density","tone","headless","color","radius","autofocus"]).has(t)){this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),t==="autofocus"&&this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()});return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}_tryRegisterWithForm(){try{const t=this.closest?.("ui-form"),e=this.getAttribute("name");if(!t||typeof t.registerField!="function"||!e)return;this._formUnregister=t.registerField(e,{name:e,getValue:()=>this.value,setValue:i=>{this.value=i},validate:async()=>this._textarea?{valid:this._textarea.checkValidity(),message:this._textarea.validationMessage||void 0}:{valid:!0},setError:i=>{i?(this.setAttribute("validation","error"),this.setAttribute("data-error",i)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}})}catch{}}_detachListeners(){this._textarea&&(this._textarea.removeEventListener("input",this._onInput),this._textarea.removeEventListener("change",this._onChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClear),this._clearBtn=null}_syncControlAttrs(){if(!this._textarea)return;const t=this.getAttribute("placeholder")||"",e=c(this.getAttribute("maxlength")),i=c(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),a=this.hasAttribute("disabled"),u=this.hasAttribute("readonly"),o=this.hasAttribute("required"),d=this.getAttribute("name")||"",h=this.getAttribute("resize")||"vertical",m=this.getAttribute("validation"),p=this.getAttribute("color"),n=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=a,this._textarea.readOnly=u,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=d,this._textarea.style.resize=h,e!==null?this._textarea.maxLength=e:this._textarea.removeAttribute("maxlength"),i!==null?this._textarea.minLength=i:this._textarea.removeAttribute("minlength"),m==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),p?this.style.setProperty("--ui-textarea-accent",p):this.style.removeProperty("--ui-textarea-accent"),n&&n!=="none"&&n!=="large"&&n!=="full"?this.style.setProperty("--ui-textarea-radius",n):this.style.removeProperty("--ui-textarea-radius");const l=[],f=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),v=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));f&&l.push(`${this._uid}-description`),v&&l.push(`${this._uid}-error`),(this.hasAttribute("show-count")||c(this.getAttribute("maxlength"))!==null)&&l.push(`${this._uid}-count`),!!(this.getAttribute("label")||this.querySelector('[slot="label"]'))?this._textarea.setAttribute("aria-labelledby",`${this._uid}-label`):this._textarea.removeAttribute("aria-labelledby"),l.length?this._textarea.setAttribute("aria-describedby",l.join(" ")):this._textarea.removeAttribute("aria-describedby")}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=c(this.getAttribute("maxlength")),i=this.hasAttribute("clearable");this._clearBtn&&(i&&t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")),this._countEl&&(this.hasAttribute("show-count")||e!==null?(this._countEl.removeAttribute("hidden"),e!==null?this._countEl.textContent=`${t.length} / ${e}`:this._countEl.textContent=`${t.length}`):this._countEl.setAttribute("hidden",""))}_applyAutosize(){if(!this._textarea)return;if(!this.hasAttribute("autosize")){this._textarea.style.height="",this._textarea.style.overflowY="";return}this._textarea.style.height="auto";const t=this._textarea.scrollHeight,e=b(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),s=parseFloat(i.lineHeight||"20")||20,a=parseFloat(i.borderTopWidth||"0")||0,u=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,d=parseFloat(i.paddingBottom||"0")||0,h=s*e+a+u+o+d;this._textarea.style.height=`${Math.min(t,h)}px`,this._textarea.style.overflowY=t>h?"auto":"hidden";return}this._textarea.style.height=`${t}px`,this._textarea.style.overflowY="hidden"}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e,length:e.length,name:this.getAttribute("name")||""},bubbles:!0,composed:!0}))}_onInput(t){const e=t.target.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",e);const i=b(this.getAttribute("debounce"),0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emit("debounced-input",e),this._debounceTimer=null},i)):this._emit("debounced-input",e)}_onChange(t){const e=t.target.value;this._emit("change",e)}_onClear(t){t.preventDefault(),!(this.hasAttribute("disabled")||this.hasAttribute("readonly"))&&(this.value="",this._textarea&&(this._textarea.value="",this._textarea.focus()),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",""),this._emit("change",""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})))}render(){const t=this.getAttribute("value")||"",e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",s=this.getAttribute("data-error")||"",a=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),o=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
-      <style>${A}</style>
+`;function x(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(r,t){const e=Number(r);return Number.isFinite(e)?e:t}const C=2147483647;function h(r){if(!r)return null;const t=Number(r);return!Number.isFinite(t)||t<0||t>C?null:Math.trunc(t)}class m extends A.ElementBase{constructor(){super(),this._uid=`ui-textarea-${Math.random().toString(36).slice(2,9)}`,this._textarea=null,this._clearBtn=null,this._countEl=null,this._debounceTimer=null,this._formUnregister=null,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this),this._onClear=this._onClear.bind(this)}static get observedAttributes(){return["value","placeholder","disabled","clearable","size","validation","debounce","maxlength","minlength","rows","readonly","autofocus","resize","name","required","variant","color","radius","label","aria-label","aria-description","aria-describedby","description","autosize","max-rows","show-count","density","tone","headless","data-error"]}connectedCallback(){super.connectedCallback(),this._tryRegisterWithForm()}disconnectedCallback(){this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e===i)return;if(t==="name"&&this._tryRegisterWithForm(),t==="value"&&this._textarea){const a=i||"";this._textarea.value!==a&&(this._textarea.value=a),this._syncDynamicUi(),this._applyAutosize();return}if(new Set(["placeholder","disabled","maxlength","minlength","rows","readonly","required","resize","name","validation","show-count","clearable","autosize","max-rows","variant","size","density","tone","headless","color","radius","autofocus","aria-label","aria-description","aria-describedby"]).has(t)){this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),t==="autofocus"&&this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()});return}this.isConnected&&this.requestRender()}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t||"")}_tryRegisterWithForm(){try{const t=this.closest?.("ui-form"),e=this.getAttribute("name");if(!t||typeof t.registerField!="function"||!e)return;this._formUnregister=t.registerField(e,{name:e,getValue:()=>this.value,setValue:i=>{this.value=i},validate:async()=>this._textarea?{valid:this._textarea.checkValidity(),message:this._textarea.validationMessage||void 0}:{valid:!0},setError:i=>{i?(this.setAttribute("validation","error"),this.setAttribute("data-error",i)):(this.removeAttribute("validation"),this.removeAttribute("data-error"))}})}catch{}}_detachListeners(){this._textarea&&(this._textarea.removeEventListener("input",this._onInput),this._textarea.removeEventListener("change",this._onChange)),this._clearBtn&&this._clearBtn.removeEventListener("click",this._onClear),this._clearBtn=null}_syncControlAttrs(){if(!this._textarea)return;const t=this.getAttribute("placeholder")||"",e=h(this.getAttribute("maxlength")),i=h(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),a=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),o=this.hasAttribute("required"),d=this.getAttribute("name")||"",u=this.getAttribute("resize")||"vertical",f=this.getAttribute("validation"),p=this.getAttribute("color"),n=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=a,this._textarea.readOnly=l,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=d,this._textarea.style.resize=u,e!==null?this._textarea.maxLength=e:this._textarea.removeAttribute("maxlength"),i!==null?this._textarea.minLength=i:this._textarea.removeAttribute("minlength"),f==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),p?this.style.setProperty("--ui-textarea-accent",p):this.style.removeProperty("--ui-textarea-accent"),n&&n!=="none"&&n!=="large"&&n!=="full"?this.style.setProperty("--ui-textarea-radius",n):this.style.removeProperty("--ui-textarea-radius");const c=[],v=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),_=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));v&&c.push(`${this._uid}-description`),_&&c.push(`${this._uid}-error`),(this.hasAttribute("show-count")||h(this.getAttribute("maxlength"))!==null)&&c.push(`${this._uid}-count`);const y=!!(this.getAttribute("label")||this.querySelector('[slot="label"]'));g.syncControlName(this._textarea,this,y?`${this._uid}-label`:null),g.syncControlDescription(this._textarea,this,this._uid,c)}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=h(this.getAttribute("maxlength")),i=this.hasAttribute("clearable");this._clearBtn&&(i&&t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden","")),this._countEl&&(this.hasAttribute("show-count")||e!==null?(this._countEl.removeAttribute("hidden"),e!==null?this._countEl.textContent=`${t.length} / ${e}`:this._countEl.textContent=`${t.length}`):this._countEl.setAttribute("hidden",""))}_applyAutosize(){if(!this._textarea)return;if(!this.hasAttribute("autosize")){this._textarea.style.height="",this._textarea.style.overflowY="";return}this._textarea.style.height="auto";const t=this._textarea.scrollHeight,e=b(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),s=parseFloat(i.lineHeight||"20")||20,a=parseFloat(i.borderTopWidth||"0")||0,l=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,d=parseFloat(i.paddingBottom||"0")||0,u=s*e+a+l+o+d;this._textarea.style.height=`${Math.min(t,u)}px`,this._textarea.style.overflowY=t>u?"auto":"hidden";return}this._textarea.style.height=`${t}px`,this._textarea.style.overflowY="hidden"}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e,length:e.length,name:this.getAttribute("name")||""},bubbles:!0,composed:!0}))}_onInput(t){const e=t.target.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",e);const i=b(this.getAttribute("debounce"),0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emit("debounced-input",e),this._debounceTimer=null},i)):this._emit("debounced-input",e)}_onChange(t){const e=t.target.value;this._emit("change",e)}_onClear(t){t.preventDefault(),!(this.hasAttribute("disabled")||this.hasAttribute("readonly"))&&(this.value="",this._textarea&&(this._textarea.value="",this._textarea.focus()),this._syncDynamicUi(),this._applyAutosize(),this._emit("input",""),this._emit("change",""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})))}render(){const t=this.getAttribute("value")||"",e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",s=this.getAttribute("data-error")||"",a=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),o=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
+      <style>${w}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${a?"":"hidden"}>
           <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
@@ -318,7 +318,7 @@
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${y}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${z}</button>
         </div>
 
         <div class="footer" part="footer">
@@ -326,4 +326,4 @@
           <div id="${this._uid}-count" class="count" part="count" hidden></div>
         </div>
       </div>
-    `),this._detachListeners(),this._textarea=this.root.querySelector("textarea"),this._clearBtn=this.root.querySelector(".clear-btn"),this._countEl=this.root.querySelector(".count"),this._textarea&&(this._textarea.value=t,this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),this._textarea.addEventListener("input",this._onInput),this._textarea.addEventListener("change",this._onChange),this._clearBtn?.addEventListener("click",this._onClear),this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"}}typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",g);exports.UITextarea=g;
+    `),this._detachListeners(),this._textarea=this.root.querySelector("textarea"),this._clearBtn=this.root.querySelector(".clear-btn"),this._countEl=this.root.querySelector(".count"),this._textarea&&(this._textarea.value=t,this._syncControlAttrs(),this._syncDynamicUi(),this._applyAutosize(),this._textarea.addEventListener("input",this._onInput),this._textarea.addEventListener("change",this._onChange),this._clearBtn?.addEventListener("click",this._onClear),this.hasAttribute("autofocus")&&queueMicrotask(()=>{this._textarea?.focus()}))}shouldRenderOnAttributeChange(t,e,i){return t==="label"||t==="description"||t==="data-error"}}typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",m);exports.UITextarea=m;

package/dist/textarea.esm.js

@@ -1,18 +1,19 @@
-import { E as v } from "./ElementBase-YlTLMsGk.mjs";
-const _ = `
+import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
+import { s as y, a as A } from "./control-name-Bpj7F34X.mjs";
+const z = `
   <svg viewBox="0 0 20 20" 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>
-`, y = `
+`, w = `
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
-    --ui-textarea-muted: var(--ui-color-muted, #64748b);
+    --ui-textarea-muted: var(--ui-color-muted, #526175);
     --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
     --ui-textarea-danger: var(--ui-color-danger, #dc2626);
-    --ui-textarea-success: var(--ui-color-success, #16a34a);
+    --ui-textarea-success: var(--ui-color-success, #15803d);
     --ui-textarea-radius: 12px;
     --ui-textarea-padding-x: 12px;
     --ui-textarea-padding-y: 10px;
@@ -230,11 +231,11 @@ const _ = `
   }
 
   :host([tone="success"]) {
-    --ui-textarea-accent: var(--ui-color-success, #16a34a);
+    --ui-textarea-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-textarea-accent: var(--ui-color-warning, #d97706);
+    --ui-textarea-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -317,13 +318,13 @@ function b(r, t) {
   const e = Number(r);
   return Number.isFinite(e) ? e : t;
 }
-const A = 2147483647;
+const C = 2147483647;
 function c(r) {
   if (!r) return null;
   const t = Number(r);
-  return !Number.isFinite(t) || t < 0 || t > A ? null : Math.trunc(t);
+  return !Number.isFinite(t) || t < 0 || t > C ? null : Math.trunc(t);
 }
-class z extends v {
+class k extends _ {
   constructor() {
     super(), this._uid = `ui-textarea-${Math.random().toString(36).slice(2, 9)}`, this._textarea = null, this._clearBtn = null, this._countEl = null, this._debounceTimer = null, this._formUnregister = null, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this), this._onClear = this._onClear.bind(this);
   }
@@ -348,6 +349,9 @@ class z extends v {
       "color",
       "radius",
       "label",
+      "aria-label",
+      "aria-description",
+      "aria-describedby",
       "description",
       "autosize",
       "max-rows",
@@ -393,7 +397,10 @@ class z extends v {
       "headless",
       "color",
       "radius",
-      "autofocus"
+      "autofocus",
+      "aria-label",
+      "aria-description",
+      "aria-describedby"
     ])).has(t)) {
       this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), t === "autofocus" && this.hasAttribute("autofocus") && queueMicrotask(() => {
         this._textarea?.focus();
@@ -431,10 +438,12 @@ class z extends v {
   }
   _syncControlAttrs() {
     if (!this._textarea) return;
-    const t = this.getAttribute("placeholder") || "", e = c(this.getAttribute("maxlength")), i = c(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), u = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", h = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
-    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = u, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = h, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
-    const l = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    m && l.push(`${this._uid}-description`), f && l.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && l.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), l.length ? this._textarea.setAttribute("aria-describedby", l.join(" ")) : this._textarea.removeAttribute("aria-describedby");
+    const t = this.getAttribute("placeholder") || "", e = c(this.getAttribute("maxlength")), i = c(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", u = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = u, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
+    const h = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    m && h.push(`${this._uid}-description`), f && h.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && h.push(`${this._uid}-count`);
+    const v = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
+    y(this._textarea, this, v ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, h);
   }
   _syncDynamicUi() {
     const t = this._textarea?.value || this.getAttribute("value") || "", e = c(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
@@ -449,8 +458,8 @@ class z extends v {
     this._textarea.style.height = "auto";
     const t = this._textarea.scrollHeight, e = b(this.getAttribute("max-rows"), 0);
     if (e > 0) {
-      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, u = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, h = s * e + a + u + o + d;
-      this._textarea.style.height = `${Math.min(t, h)}px`, this._textarea.style.overflowY = t > h ? "auto" : "hidden";
+      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, u = s * e + a + l + o + d;
+      this._textarea.style.height = `${Math.min(t, u)}px`, this._textarea.style.overflowY = t > u ? "auto" : "hidden";
       return;
     }
     this._textarea.style.height = `${t}px`, this._textarea.style.overflowY = "hidden";
@@ -486,7 +495,7 @@ class z extends v {
   render() {
     const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("data-error") || "", a = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
     this.setContent(`
-      <style>${y}</style>
+      <style>${w}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${a ? "" : "hidden"}>
           <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
@@ -495,7 +504,7 @@ class z extends v {
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${_}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${z}</button>
         </div>
 
         <div class="footer" part="footer">
@@ -511,7 +520,7 @@ class z extends v {
     return t === "label" || t === "description" || t === "data-error";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", z);
+typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", k);
 export {
-  z as UITextarea
+  k as UITextarea
 };

package/dist/theme.d.ts

@@ -125,9 +125,27 @@ export interface ThemeTokens {
     };
 }
 export declare const baselineAccentPalettes: Record<AccentPaletteName, Record<ThemeMode, AccentPaletteTokens>>;
+/**
+ * The text colour for a solid fill: the preferred one when it reads at 4.5:1 (WCAG AA), otherwise
+ * whichever of white and near-black reads better. Radix's own "contrast" colour for the bright steps
+ * (blue #0090ff, gray #8d8d8d) is white, which is only about 3.3:1 on them.
+ */
+/**
+ * The text colour on a solid fill follows the fill. A theme that sets `colors.primary` but not
+ * `colors.foregroundOnPrimary` would otherwise keep the baseline's dark amber text colour, which is
+ * unreadable on most other fills. With `base` (merging a patch into the current tokens) a primary that
+ * changes while the foreground is left as it was (or is just spread along from the old tokens) gets a
+ * foreground that reads on the new primary, keeping the old one when it still does. A foreground the
+ * patch changes on purpose is left alone.
+ */
+export declare function deriveForegroundOnPrimary(patch?: Partial<ThemeTokens>, base?: Partial<ThemeTokens>): {
+    foregroundOnPrimary?: string;
+};
+export declare function readableForeground(background: string, preferred: string): string;
 export declare const baselineLightTokens: ThemeTokens;
 export declare const baselineDarkTokens: ThemeTokens;
 export declare const defaultTokens: ThemeTokens;
+export declare function deriveThemeSurfaces(overrides?: Partial<ThemeTokens>): NonNullable<ThemeTokens['surfaces']>;
 export declare function createThemeTokens(overrides?: Partial<ThemeTokens>, options?: {
     accentPalette?: AccentPaletteName;
     mode?: ThemeMode;

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE;YAAE,EAAE,CAAC,EAAE,MAAM,CAAC;YAAC,EAAE,CAAC,EAAE,MAAM,CAAC;YAAC,EAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACjD,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,aAAa,CAAC,EAAE,UAAU,CAAC;KAC5B,CAAC;IACF,MAAM,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnG,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,aAAa,CAAC,EAAE,UAAU,CAAC;QAC3B,GAAG,CAAC,EAAE,UAAU,CAAC;QACjB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,QAAQ,CAAC,EAAE,UAAU,CAAC;QACtB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,cAAc,CAAC,EAAE,UAAU,CAAC;QAC5B,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,CAAC,EAAE,UAAU,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,WAAW,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAgCD,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,mBAAmB,CAAC,CA+VpG,CAAC;AAsmBF,eAAO,MAAM,mBAAmB,EAAE,WAgKjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,WAiFhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAAiC,CAAC;AAS9D,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,WAAW,CA6GlJ;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,GAAE,SAAmB,GAAG,WAAW,CAsBhJ;AAmBD,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,QAGhD;AAmHD,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAwD,QA0BrG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/time-field.cjs.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-EV6mVBUV.js"),c=require("./date-time-utils-Dmost5Ee.js");let T=0;const B=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js"),c=require("./date-time-utils-y3AvNvGe.js");let V=0;const I=`
   :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);
     --ui-time-field-radius: var(--ui-radius, 12px);
     --ui-time-field-bg: var(--ui-color-surface, #ffffff);
     --ui-time-field-text: var(--ui-color-text, #0f172a);
-    --ui-time-field-muted: var(--ui-color-muted, #64748b);
+    --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-time-field-danger: var(--ui-color-danger, #dc2626);
     display: block;
@@ -127,8 +127,8 @@
   :host([readonly]) .segment {
     cursor: default;
   }
-`;function b(l,e){return c.parseTimeInput(l||"")||null}function p(l){return{hour:l.hours%12||12,meridiem:l.hours>=12?"PM":"AM"}}function E(l,e){return e==="AM"?l===12?0:l:l===12?12:l+12}function V(l){return l==="meridiem"?"AM":l==="hour"?"HH":l==="minute"?"MM":"SS"}const g=class g extends C.ElementBase{constructor(){super(),this._value=null,this._activeSegment="hour",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={hour:"",minute:"",second:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-time-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","format","seconds","label","description","data-error","required","disabled","readonly","name","locale"]}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._normalizeTimeValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
-      <style>${B}</style>
+`;function b(l,e){return c.parseTimeInput(l||"")||null}function p(l){return{hour:l.hours%12||12,meridiem:l.hours>=12?"PM":"AM"}}function k(l,e){return e==="AM"?l===12?0:l:l===12?12:l+12}function q(l){return l==="meridiem"?"AM":l==="hour"?"HH":l==="minute"?"MM":"SS"}const g=class g extends B.ElementBase{constructor(){super(),this._value=null,this._activeSegment="hour",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={hour:"",minute:"",second:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-time-field-${++V}`,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","format","seconds","label","description","data-error","required","disabled","readonly","name","locale"]}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._normalizeTimeValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){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>
@@ -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._normalizeTimeValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_showSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"").toLowerCase()==="12h"}_normalizeTimeValue(e){const i=c.parseTimeInput(e||"");if(!i)return null;const t=c.formatTime(i,this._showSeconds()),s=this.getAttribute("min"),r=this.getAttribute("max");return c.clampTime(t,s,r)}_partsOrFallback(){return b(this._value,this._showSeconds())||b(this.getAttribute("min"),this._showSeconds())||{hours:9,minutes:0,seconds:0}}_order(){const e=["hour","minute"];return this._showSeconds()&&e.push("second"),this._is12h()&&e.push("meridiem"),e}_focusSegment(e){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.hour="",this._bufferBySegment.minute="",this._bufferBySegment.second="",this._bufferTimer=null},900)}_applyParts(e,i){const t=this._normalizeTimeValue(c.formatTime(e,this._showSeconds()));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeTimeValue(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{}}_increment(e,i){const t=this._partsOrFallback();if(e==="meridiem"){t.hours=(t.hours+12)%24,this._applyParts(t,"keyboard");return}const a=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,d={hours:Math.floor(a/3600),minutes:Math.floor(a%3600/60),seconds:a%60};this._applyParts(d,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const s=this._partsOrFallback(),r=Number(t);if(Number.isFinite(r)){if(e==="hour")if(this._is12h()){const{meridiem:a}=p(s),d=Math.min(Math.max(r,1),12);s.hours=E(d,a)}else s.hours=Math.min(Math.max(r,0),23);else e==="minute"?s.minutes=Math.min(Math.max(r,0),59):s.seconds=Math.min(Math.max(r,0),59);this._applyParts(s,"keyboard"),this._moveSegmentFocus(1)}}_onSegmentClick(e){const i=e.currentTarget.getAttribute("data-segment");i&&this._focusSegment(i)}_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(),this._increment(i,e.key==="ArrowUp"?1:-1);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}if(i==="meridiem"&&/^[ap]$/i.test(e.key)){e.preventDefault();const t=this._partsOrFallback(),s=e.key.toLowerCase()==="a"?"AM":"PM",r=p(t).hour;t.hours=E(r,s),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(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"),r=this.getAttribute("name");s&&typeof s.registerField=="function"&&r&&(this._formUnregister=s.registerField(r,{name:r,getValue:()=>this.value,setValue:a=>this._setValue(a?String(a):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Time is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):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(),r=(this.getAttribute("data-error")||"").trim(),a=this.root.querySelector(".meta"),d=this.root.querySelector(".label"),k=this.root.querySelector(".label-text"),w=this.root.querySelector(".required"),f=this.root.querySelector(".description"),y=`${this._uid}-label`,v=`${this._uid}-description`,x=`${this._uid}-error`;a.hidden=!t&&!s,d.hidden=!t,d.id=t?y:"",k.textContent=t,w.hidden=!this.hasAttribute("required"),f.hidden=!s,f.id=s?v:"",f.textContent=s,this._errorEl.hidden=!r,this._errorEl.id=r?x:"",this._errorEl.textContent=r,this._shellEl.setAttribute("data-invalid",r?"true":"false"),this._shellEl.setAttribute("role","group"),t?this._shellEl.setAttribute("aria-labelledby",y):this._shellEl.removeAttribute("aria-labelledby");const S=[s?v:null,r?x:null].filter(Boolean).join(" ");S?this._shellEl.setAttribute("aria-describedby",S):this._shellEl.removeAttribute("aria-describedby"),this._shellEl.setAttribute("aria-invalid",r?"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 u=b(this._value,this._showSeconds()),F=this._order(),_=[];this._segmentButtons.clear();const A=u?p(u):null;if(F.forEach((o,M)=>{if(M>0){const h=document.createElement("span");h.className="literal",h.textContent=o==="meridiem"?" ":":",_.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",u?"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),!u)n.textContent=V(o);else if(o==="hour"){const h=this._is12h()?A.hour:u.hours;n.textContent=String(h).padStart(2,"0")}else o==="minute"?n.textContent=String(u.minutes).padStart(2,"0"):o==="second"?n.textContent=String(u.seconds).padStart(2,"0"):n.textContent=A.meridiem;this._segmentButtons.set(o,n),_.push(n)}),this._segmentsEl.replaceChildren(..._),i){const o=this._segmentButtons.get(this._activeSegment);try{o?.focus({preventScroll:!0})}catch{o?.focus()}}}};g.formAssociated=!0;let m=g;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",m);exports.UITimeField=m;
+    `),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._normalizeTimeValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_showSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"").toLowerCase()==="12h"}_normalizeTimeValue(e){const i=c.parseTimeInput(e||"");if(!i)return null;const t=c.formatTime(i,this._showSeconds()),s=this.getAttribute("min"),r=this.getAttribute("max");return c.clampTime(t,s,r)}_partsOrFallback(){return b(this._value,this._showSeconds())||b(this.getAttribute("min"),this._showSeconds())||{hours:9,minutes:0,seconds:0}}_order(){const e=["hour","minute"];return this._showSeconds()&&e.push("second"),this._is12h()&&e.push("meridiem"),e}_focusSegment(e){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.hour="",this._bufferBySegment.minute="",this._bufferBySegment.second="",this._bufferTimer=null},900)}_applyParts(e,i){const t=this._normalizeTimeValue(c.formatTime(e,this._showSeconds()));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeTimeValue(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{}}_increment(e,i){const t=this._partsOrFallback();if(e==="meridiem"){t.hours=(t.hours+12)%24,this._applyParts(t,"keyboard");return}const a=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,d={hours:Math.floor(a/3600),minutes:Math.floor(a%3600/60),seconds:a%60};this._applyParts(d,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const s=this._partsOrFallback(),r=Number(t);if(Number.isFinite(r)){if(e==="hour")if(this._is12h()){const{meridiem:a}=p(s),d=Math.min(Math.max(r,1),12);s.hours=k(d,a)}else s.hours=Math.min(Math.max(r,0),23);else e==="minute"?s.minutes=Math.min(Math.max(r,0),59):s.seconds=Math.min(Math.max(r,0),59);this._applyParts(s,"keyboard"),this._moveSegmentFocus(1)}}_onSegmentClick(e){const i=e.currentTarget.getAttribute("data-segment");i&&this._focusSegment(i)}_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(),this._increment(i,e.key==="ArrowUp"?1:-1);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}if(i==="meridiem"&&/^[ap]$/i.test(e.key)){e.preventDefault();const t=this._partsOrFallback(),s=e.key.toLowerCase()==="a"?"AM":"PM",r=p(t).hour;t.hours=k(r,s),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(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"),r=this.getAttribute("name");s&&typeof s.registerField=="function"&&r&&(this._formUnregister=s.registerField(r,{name:r,getValue:()=>this.value,setValue:a=>this._setValue(a?String(a):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Time is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):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(),r=(this.getAttribute("data-error")||"").trim(),a=this.root.querySelector(".meta"),d=this.root.querySelector(".label"),w=this.root.querySelector(".label-text"),F=this.root.querySelector(".required"),f=this.root.querySelector(".description"),v=`${this._uid}-label`,y=`${this._uid}-description`,x=`${this._uid}-error`;a.hidden=!t&&!s,d.hidden=!t,d.id=t?v:"",w.textContent=t,F.hidden=!this.hasAttribute("required"),f.hidden=!s,f.id=s?y:"",f.textContent=s,this._errorEl.hidden=!r,this._errorEl.id=r?x:"",this._errorEl.textContent=r,this._shellEl.setAttribute("data-invalid",r?"true":"false"),this._shellEl.setAttribute("role","group"),E.syncControlName(this._shellEl,this,t?v:null);const S=[s?y:null,r?x:null].filter(Boolean).join(" ");E.syncControlDescription(this._shellEl,this,this._uid,S?S.split(" "):[]),this._shellEl.setAttribute("aria-invalid",r?"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 u=b(this._value,this._showSeconds()),C=this._order(),_=[];this._segmentButtons.clear();const A=u?p(u):null;if(C.forEach((o,M)=>{if(M>0){const h=document.createElement("span");h.className="literal",h.textContent=o==="meridiem"?" ":":",_.push(h)}const n=document.createElement("button");n.type="button",n.className="segment",n.setAttribute("data-segment",o),n.setAttribute("data-active",this._activeSegment===o?"true":"false"),n.setAttribute("data-empty",u?"false":"true");const T=o==="hour"?"Hour":o==="minute"?"Minute":o==="second"?"Second":"AM or PM";if(n.tabIndex=this._activeSegment===o?0:-1,n.disabled=this.hasAttribute("disabled"),n.addEventListener("click",this._onSegmentClick),n.addEventListener("keydown",this._onSegmentKeyDown),!u)n.textContent=q(o);else if(o==="hour"){const h=this._is12h()?A.hour:u.hours;n.textContent=String(h).padStart(2,"0")}else o==="minute"?n.textContent=String(u.minutes).padStart(2,"0"):o==="second"?n.textContent=String(u.seconds).padStart(2,"0"):n.textContent=A.meridiem;n.setAttribute("aria-label",`${T} ${n.textContent||""}`.trim()),this._segmentButtons.set(o,n),_.push(n)}),this._segmentsEl.replaceChildren(..._),i){const o=this._segmentButtons.get(this._activeSegment);try{o?.focus({preventScroll:!0})}catch{o?.focus()}}}};g.formAssociated=!0;let m=g;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",m);exports.UITimeField=m;

package/dist/time-field.esm.js

@@ -1,14 +1,15 @@
-import { E as V } from "./ElementBase-YlTLMsGk.mjs";
-import { q as k, u as A, v as B } from "./date-time-utils-y1N2gvG2.mjs";
-let T = 0;
-const I = `
+import { E as B } from "./ElementBase-BeZT54Hj.mjs";
+import { s as T, a as I } from "./control-name-Bpj7F34X.mjs";
+import { q as k, u as A, v as q } from "./date-time-utils-BTlxnz5j.mjs";
+let U = 0;
+const z = `
   :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);
     --ui-time-field-radius: var(--ui-radius, 12px);
     --ui-time-field-bg: var(--ui-color-surface, #ffffff);
     --ui-time-field-text: var(--ui-color-text, #0f172a);
-    --ui-time-field-muted: var(--ui-color-muted, #64748b);
+    --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-time-field-danger: var(--ui-color-danger, #dc2626);
     display: block;
@@ -140,12 +141,12 @@ function _(l) {
 function E(l, e) {
   return e === "AM" ? l === 12 ? 0 : l : l === 12 ? 12 : l + 12;
 }
-function q(l) {
+function P(l) {
   return l === "meridiem" ? "AM" : l === "hour" ? "HH" : l === "minute" ? "MM" : "SS";
 }
-const p = class p extends V {
+const p = class p extends B {
   constructor() {
-    super(), this._value = null, this._activeSegment = "hour", this._segmentButtons = /* @__PURE__ */ new Map(), this._segmentsEl = null, this._shellEl = null, this._errorEl = null, this._formUnregister = null, this._bufferBySegment = { hour: "", minute: "", second: "" }, this._bufferTimer = null, this._internals = null, this._uid = `ui-time-field-${++T}`, this._defaultValue = null;
+    super(), this._value = null, this._activeSegment = "hour", this._segmentButtons = /* @__PURE__ */ new Map(), this._segmentsEl = null, this._shellEl = null, this._errorEl = null, this._formUnregister = null, this._bufferBySegment = { hour: "", minute: "", second: "" }, this._bufferTimer = null, this._internals = null, this._uid = `ui-time-field-${++U}`, this._defaultValue = null;
     try {
       this._internals = typeof this.attachInternals == "function" ? this.attachInternals() : null;
     } catch {
@@ -154,7 +155,7 @@ const p = class p extends V {
     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", "format", "seconds", "label", "description", "data-error", "required", "disabled", "readonly", "name", "locale"];
+    return ["aria-label", "aria-description", "aria-describedby", "value", "min", "max", "format", "seconds", "label", "description", "data-error", "required", "disabled", "readonly", "name", "locale"];
   }
   get value() {
     return this._value || "";
@@ -182,7 +183,7 @@ const p = class p extends V {
   }
   render() {
     this.setContent(`
-      <style>${I}</style>
+      <style>${z}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
@@ -205,7 +206,7 @@ const p = class p extends V {
     const i = k(e || "");
     if (!i) return null;
     const t = A(i, this._showSeconds()), s = this.getAttribute("min"), r = this.getAttribute("max");
-    return B(t, s, r);
+    return q(t, s, r);
   }
   _partsOrFallback() {
     return f(this._value, this._showSeconds()) || f(this.getAttribute("min"), this._showSeconds()) || { hours: 9, minutes: 0, seconds: 0 };
@@ -336,10 +337,10 @@ const p = class p extends V {
   }
   _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(), r = (this.getAttribute("data-error") || "").trim(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, y = `${this._uid}-description`, v = `${this._uid}-error`;
-    a.hidden = !t && !s, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !s, c.id = s ? y : "", c.textContent = s, this._errorEl.hidden = !r, this._errorEl.id = r ? v : "", this._errorEl.textContent = r, this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("role", "group"), t ? this._shellEl.setAttribute("aria-labelledby", g) : this._shellEl.removeAttribute("aria-labelledby");
-    const x = [s ? y : null, r ? v : null].filter(Boolean).join(" ");
-    x ? this._shellEl.setAttribute("aria-describedby", x) : this._shellEl.removeAttribute("aria-describedby"), this._shellEl.setAttribute("aria-invalid", r ? "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 e = this.root.activeElement, i = !!e && this._segmentsEl.contains(e), t = (this.getAttribute("label") || "").trim(), s = (this.getAttribute("description") || "").trim(), r = (this.getAttribute("data-error") || "").trim(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, v = `${this._uid}-description`, y = `${this._uid}-error`;
+    a.hidden = !t && !s, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !s, c.id = s ? v : "", c.textContent = s, this._errorEl.hidden = !r, this._errorEl.id = r ? y : "", this._errorEl.textContent = r, this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("role", "group"), T(this._shellEl, this, t ? g : null);
+    const x = [s ? v : null, r ? y : null].filter(Boolean).join(" ");
+    I(this._shellEl, this, this._uid, x ? x.split(" ") : []), this._shellEl.setAttribute("aria-invalid", r ? "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 u = f(this._value, this._showSeconds()), C = this._order(), m = [];
     this._segmentButtons.clear();
     const S = u ? _(u) : null;
@@ -349,13 +350,15 @@ const p = class p extends V {
         d.className = "literal", d.textContent = n === "meridiem" ? " " : ":", m.push(d);
       }
       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", u ? "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), !u)
-        o.textContent = q(n);
+      o.type = "button", o.className = "segment", o.setAttribute("data-segment", n), o.setAttribute("data-active", this._activeSegment === n ? "true" : "false"), o.setAttribute("data-empty", u ? "false" : "true");
+      const V = n === "hour" ? "Hour" : n === "minute" ? "Minute" : n === "second" ? "Second" : "AM or PM";
+      if (o.tabIndex = this._activeSegment === n ? 0 : -1, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", this._onSegmentClick), o.addEventListener("keydown", this._onSegmentKeyDown), !u)
+        o.textContent = P(n);
       else if (n === "hour") {
         const d = this._is12h() ? S.hour : u.hours;
         o.textContent = String(d).padStart(2, "0");
       } else n === "minute" ? o.textContent = String(u.minutes).padStart(2, "0") : n === "second" ? o.textContent = String(u.seconds).padStart(2, "0") : o.textContent = S.meridiem;
-      this._segmentButtons.set(n, o), m.push(o);
+      o.setAttribute("aria-label", `${V} ${o.textContent || ""}`.trim()), this._segmentButtons.set(n, o), m.push(o);
     }), this._segmentsEl.replaceChildren(...m), i) {
       const n = this._segmentButtons.get(this._activeSegment);
       try {

package/dist/time-picker.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-EV6mVBUV.js"),E=require("./dismissable-layer-DNfrKA20.js"),k=require("./calendar-Dkof-FTK.js"),a=require("./date-time-utils-Dmost5Ee.js"),w=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-DxbvhLJs.js"),E=require("./dismissable-layer-DNfrKA20.js"),k=require("./calendar-D-mXMgqc.js"),a=require("./date-time-utils-y3AvNvGe.js"),w=`
   <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>
@@ -15,7 +15,7 @@
     --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-dp-text: var(--ui-color-text, #0f172a);
-    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-radius: 12px;
     --ui-dp-field-error: var(--ui-color-danger, #dc2626);
@@ -144,7 +144,7 @@
     --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-dp-text: var(--ui-color-text, #0f172a);
-    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-radius: 12px;
   }
@@ -182,7 +182,7 @@
   .pickers[data-seconds="false"][data-ampm="false"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pickers[data-seconds="false"][data-ampm="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .picker { display: grid; gap: 4px; }
-  .picker label { font-size: 11px; color: var(--ui-dp-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+  .picker label { font-size: 11px; color: var(--ui-dp-muted, #526175); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
   .picker select {
     min-block-size: 34px;
     border: 1px solid color-mix(in srgb, var(--ui-dp-border, #cbd5e1) 84%, transparent);

package/dist/time-picker.esm.js

@@ -1,7 +1,7 @@
-import { E } from "./ElementBase-YlTLMsGk.mjs";
+import { E } from "./ElementBase-BeZT54Hj.mjs";
 import { c as k } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as w } from "./calendar-DLY4acgn.mjs";
-import { r as S, e as C, i as b, s as B, q as f, t as O, w as y, l as I, c as A } from "./date-time-utils-y1N2gvG2.mjs";
+import { r as w } from "./calendar-B3PUKHQm.mjs";
+import { r as S, e as C, i as b, s as B, q as f, t as O, w as y, l as I, c as A } from "./date-time-utils-BTlxnz5j.mjs";
 const D = `
   <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"/>
@@ -19,7 +19,7 @@ const D = `
     --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-dp-text: var(--ui-color-text, #0f172a);
-    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-radius: 12px;
     --ui-dp-field-error: var(--ui-color-danger, #dc2626);
@@ -148,7 +148,7 @@ const D = `
     --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
     --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-dp-text: var(--ui-color-text, #0f172a);
-    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-radius: 12px;
   }
@@ -186,7 +186,7 @@ const D = `
   .pickers[data-seconds="false"][data-ampm="false"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pickers[data-seconds="false"][data-ampm="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .picker { display: grid; gap: 4px; }
-  .picker label { font-size: 11px; color: var(--ui-dp-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+  .picker label { font-size: 11px; color: var(--ui-dp-muted, #526175); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
   .picker select {
     min-block-size: 34px;
     border: 1px solid color-mix(in srgb, var(--ui-dp-border, #cbd5e1) 84%, transparent);

package/dist/timeline.cjs.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-EV6mVBUV.js"),m=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-DxbvhLJs.js"),m=`
   :host {
     --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
     --ui-timeline-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
     --ui-timeline-text: var(--ui-color-text, #0f172a);
-    --ui-timeline-muted: var(--ui-color-muted, #64748b);
+    --ui-timeline-muted: var(--ui-color-muted, #526175);
     --ui-timeline-accent: var(--ui-color-primary, #2563eb);
     --ui-timeline-indicator-duration: 1.8s;
 
@@ -181,7 +181,7 @@
       background: Highlight;
     }
   }
-`,o={default:"var(--ui-color-primary, #2563eb)",info:"var(--ui-color-info, #0891b2)",success:"var(--ui-color-success, #16a34a)",warning:"var(--ui-color-warning, #d97706)",danger:"var(--ui-color-danger, #dc2626)"};function a(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function u(n){if(!n)return[];try{const t=JSON.parse(n);return Array.isArray(t)?t.map(e=>{if(!e||typeof e!="object")return null;const r=String(e.title||"").trim();return r?{title:r,description:e.description?String(e.description):void 0,time:e.time?String(e.time):void 0,tone:e.tone,active:!!e.active}:null}).filter(Boolean):[]}catch{return[]}}class s extends d.ElementBase{static get observedAttributes(){return["items","variant","headless"]}render(){const t=u(this.getAttribute("items")),e=t.some(i=>i.active),r=t.length?t.map((i,l)=>{const c=o[i.tone||"default"]||o.default;return`
+`,o={default:"var(--ui-color-primary, #2563eb)",info:"var(--ui-color-info, #0e7490)",success:"var(--ui-color-success, #15803d)",warning:"var(--ui-color-warning, #b45309)",danger:"var(--ui-color-danger, #dc2626)"};function a(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function u(n){if(!n)return[];try{const t=JSON.parse(n);return Array.isArray(t)?t.map(e=>{if(!e||typeof e!="object")return null;const r=String(e.title||"").trim();return r?{title:r,description:e.description?String(e.description):void 0,time:e.time?String(e.time):void 0,tone:e.tone,active:!!e.active}:null}).filter(Boolean):[]}catch{return[]}}class s extends d.ElementBase{static get observedAttributes(){return["items","variant","headless"]}render(){const t=u(this.getAttribute("items")),e=t.some(i=>i.active),r=t.length?t.map((i,l)=>{const c=o[i.tone||"default"]||o.default;return`
               <li class="item" part="item" data-active="${(e?!!i.active:l===0)?"true":"false"}">
                 <div class="rail"><span class="dot" style="--dot:${c}"></span></div>
                 <article class="content">

package/dist/timeline.esm.js

@@ -1,10 +1,10 @@
-import { E as c } from "./ElementBase-YlTLMsGk.mjs";
+import { E as c } from "./ElementBase-BeZT54Hj.mjs";
 const d = `
   :host {
     --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
     --ui-timeline-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
     --ui-timeline-text: var(--ui-color-text, #0f172a);
-    --ui-timeline-muted: var(--ui-color-muted, #64748b);
+    --ui-timeline-muted: var(--ui-color-muted, #526175);
     --ui-timeline-accent: var(--ui-color-primary, #2563eb);
     --ui-timeline-indicator-duration: 1.8s;
 
@@ -184,9 +184,9 @@ const d = `
   }
 `, o = {
   default: "var(--ui-color-primary, #2563eb)",
-  info: "var(--ui-color-info, #0891b2)",
-  success: "var(--ui-color-success, #16a34a)",
-  warning: "var(--ui-color-warning, #d97706)",
+  info: "var(--ui-color-info, #0e7490)",
+  success: "var(--ui-color-success, #15803d)",
+  warning: "var(--ui-color-warning, #b45309)",
   danger: "var(--ui-color-danger, #dc2626)"
 };
 function a(n) {