@editora/ui-core 0.2.2 → 0.3.0

package/dist/textarea.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),g=require("./control-name-BmoI1m3a.js"),w=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-CbUsP3D6.js"),C=require("./number-attribute-C4Rrl7d3.js"),z=require("./form-control-B90_3kYN.js"),m=require("./control-name-BmoI1m3a.js"),k=`
   <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>
-`,z=`
+`,E=`
   :host {
     --ui-textarea-bg: var(--base-input-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -50,6 +50,28 @@
     color: var(--ui-textarea-text);
   }
 
+  /* description-position="below": the hint goes under the field (DOM order, and so what a
+     screen reader reads, stays label, description, field). */
+  :host([description-position="below"]) .meta:not([hidden]) {
+    display: contents;
+  }
+
+  :host([description-position="below"]) .label {
+    order: 0;
+  }
+
+  :host([description-position="below"]) .field {
+    order: 1;
+  }
+
+  :host([description-position="below"]) .description {
+    order: 2;
+  }
+
+  :host([description-position="below"]) .footer {
+    order: 3;
+  }
+
   .description {
     font-size: 12px;
     line-height: 1.3;
@@ -220,8 +242,8 @@
     --ui-textarea-text: #e2e8f0;
     --ui-textarea-muted: #93a4bd;
     --ui-textarea-border: #334155;
-    --ui-textarea-accent: #93c5fd;
-    --ui-textarea-focus: #93c5fd;
+    --ui-textarea-accent: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-textarea-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-textarea-shadow:
       0 12px 32px rgba(2, 6, 23, 0.46),
       0 24px 56px rgba(2, 6, 23, 0.42);
@@ -307,22 +329,22 @@
       color: CanvasText;
     }
   }
-`;function x(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(a,t){const e=Number(a);return Number.isFinite(e)?e:t}const C=2147483647;function d(a){if(!a)return null;const t=Number(a);return!Number.isFinite(t)||t<0||t>C?null:Math.trunc(t)}class v 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 r=i||"";this._textarea.value!==r&&(this._textarea.value=r),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=d(this.getAttribute("maxlength")),i=d(this.getAttribute("minlength")),s=b(this.getAttribute("rows"),4),r=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),o=this.hasAttribute("required"),h=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=r,this._textarea.readOnly=l,this._textarea.required=o,this._textarea.rows=Math.max(1,s),this._textarea.name=h,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=[],m=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),_=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));m&&c.push(`${this._uid}-description`),_&&c.push(`${this._uid}-error`),(this.hasAttribute("show-count")||d(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=d(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,r=parseFloat(i.borderTopWidth||"0")||0,l=parseFloat(i.borderBottomWidth||"0")||0,o=parseFloat(i.paddingTop||"0")||0,h=parseFloat(i.paddingBottom||"0")||0,u=s*e+r+l+o+h;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")||"",r=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),o=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
-      <style>${z}</style>
+`;function b(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}const p=C.numberAttribute,T=2147483647;function d(n){if(!n)return null;const t=Number(n);return!Number.isFinite(t)||t<0||t>T?null:Math.trunc(t)}const g=class g extends w.ElementBase{constructor(){super(),this._formControl=new z.FormControl(this,{getValue:()=>this.value,getValidity:()=>({control:this._textarea}),defaultAttribute:"value",onFormDisabled:t=>{this._textarea&&(this._textarea.disabled=t||this.hasAttribute("disabled"))}}),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"]}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(t){this._formControl.formDisabledCallback(t)}get form(){return this._formControl.form}connectedCallback(){super.connectedCallback(),this._formControl.connect(),this._tryRegisterWithForm()}disconnectedCallback(){this._formControl.disconnect(),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 r=i||"";this._textarea.value!==r&&(this._textarea.value=r),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=d(this.getAttribute("maxlength")),i=d(this.getAttribute("minlength")),a=p(this.getAttribute("rows"),4),r=this.hasAttribute("disabled"),l=this.hasAttribute("readonly"),s=this.hasAttribute("required"),x=this.getAttribute("name")||"",u=this.getAttribute("resize")||"vertical",v=this.getAttribute("validation"),f=this.getAttribute("color"),o=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=r||this._formControl.disabledByForm,this._textarea.readOnly=l,this._textarea.required=s,this._textarea.rows=Math.max(1,a),this._textarea.name=x,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"),v==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),f?this.style.setProperty("--ui-textarea-accent",f):this.style.removeProperty("--ui-textarea-accent"),o&&o!=="none"&&o!=="large"&&o!=="full"?this.style.setProperty("--ui-textarea-radius",o):this.style.removeProperty("--ui-textarea-radius");const c=[],_=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),y=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));_&&c.push(`${this._uid}-description`),y&&c.push(`${this._uid}-error`),(this.hasAttribute("show-count")||d(this.getAttribute("maxlength"))!==null)&&c.push(`${this._uid}-count`);const A=!!(this.getAttribute("label")||this.querySelector('[slot="label"]'));m.syncControlName(this._textarea,this,A?`${this._uid}-label`:null),m.syncControlDescription(this._textarea,this,this._uid,c)}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=d(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=p(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),a=parseFloat(i.lineHeight||"20")||20,r=parseFloat(i.borderTopWidth||"0")||0,l=parseFloat(i.borderBottomWidth||"0")||0,s=parseFloat(i.paddingTop||"0")||0,x=parseFloat(i.paddingBottom||"0")||0,u=a*e+r+l+s+x;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=p(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")||"",a=this.getAttribute("data-error")||"",r=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),s=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
+      <style>${E}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${r?"":"hidden"}>
-          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
-          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${x(i)}</slot></div>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${b(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${b(i)}</slot></div>
         </div>
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${w}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${s?"":"hidden"}>${k}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${b(a)}</slot></div>
           <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",v);exports.UITextarea=v;
+    `),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"}};g.formAssociated=!0;let h=g;typeof customElements<"u"&&!customElements.get("ui-textarea")&&customElements.define("ui-textarea",h);exports.UITextarea=h;

package/dist/textarea.esm.js

@@ -1,10 +1,12 @@
-import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
-import { s as y, a as A } from "./control-name-Bpj7F34X.mjs";
-const w = `
+import { E as A } from "./ElementBase-D5QsC5Vw.mjs";
+import { n as w } from "./number-attribute-BAF07JrU.mjs";
+import { F as C } from "./form-control-D9wWUMBl.mjs";
+import { s as z, a as k } from "./control-name-Bpj7F34X.mjs";
+const E = `
   <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>
-`, z = `
+`, B = `
   :host {
     --ui-textarea-bg: var(--base-input-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -52,6 +54,28 @@ const w = `
     color: var(--ui-textarea-text);
   }
 
+  /* description-position="below": the hint goes under the field (DOM order, and so what a
+     screen reader reads, stays label, description, field). */
+  :host([description-position="below"]) .meta:not([hidden]) {
+    display: contents;
+  }
+
+  :host([description-position="below"]) .label {
+    order: 0;
+  }
+
+  :host([description-position="below"]) .field {
+    order: 1;
+  }
+
+  :host([description-position="below"]) .description {
+    order: 2;
+  }
+
+  :host([description-position="below"]) .footer {
+    order: 3;
+  }
+
   .description {
     font-size: 12px;
     line-height: 1.3;
@@ -222,8 +246,8 @@ const w = `
     --ui-textarea-text: #e2e8f0;
     --ui-textarea-muted: #93a4bd;
     --ui-textarea-border: #334155;
-    --ui-textarea-accent: #93c5fd;
-    --ui-textarea-focus: #93c5fd;
+    --ui-textarea-accent: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-textarea-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-textarea-shadow:
       0 12px 32px rgba(2, 6, 23, 0.46),
       0 24px 56px rgba(2, 6, 23, 0.42);
@@ -310,22 +334,25 @@ const w = `
     }
   }
 `;
-function x(a) {
-  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function x(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function b(a, t) {
-  const e = Number(a);
-  return Number.isFinite(e) ? e : t;
+const b = w, T = 2147483647;
+function d(n) {
+  if (!n) return null;
+  const t = Number(n);
+  return !Number.isFinite(t) || t < 0 || t > T ? null : Math.trunc(t);
 }
-const C = 2147483647;
-function d(a) {
-  if (!a) return null;
-  const t = Number(a);
-  return !Number.isFinite(t) || t < 0 || t > C ? null : Math.trunc(t);
-}
-class k extends _ {
+const g = class g extends A {
   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);
+    super(), this._formControl = new C(this, {
+      getValue: () => this.value,
+      getValidity: () => ({ control: this._textarea }),
+      defaultAttribute: "value",
+      onFormDisabled: (t) => {
+        this._textarea && (this._textarea.disabled = t || this.hasAttribute("disabled"));
+      }
+    }), 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 [
@@ -361,11 +388,21 @@ class k extends _ {
       "data-error"
     ];
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(t) {
+    this._formControl.formDisabledCallback(t);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this._tryRegisterWithForm();
+    super.connectedCallback(), this._formControl.connect(), this._tryRegisterWithForm();
   }
   disconnectedCallback() {
-    this._detachListeners(), this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this._formControl.disconnect(), 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;
@@ -437,12 +474,12 @@ class k extends _ {
   }
   _syncControlAttrs() {
     if (!this._textarea) return;
-    const t = this.getAttribute("placeholder") || "", e = d(this.getAttribute("maxlength")), i = d(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), r = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), h = 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 = r, this._textarea.readOnly = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = h, 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 c = [], v = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    v && c.push(`${this._uid}-description`), f && c.push(`${this._uid}-error`), (this.hasAttribute("show-count") || d(this.getAttribute("maxlength")) !== null) && c.push(`${this._uid}-count`);
-    const m = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
-    y(this._textarea, this, m ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, c);
+    const t = this.getAttribute("placeholder") || "", e = d(this.getAttribute("maxlength")), i = d(this.getAttribute("minlength")), a = b(this.getAttribute("rows"), 4), r = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), s = this.hasAttribute("required"), h = this.getAttribute("name") || "", u = this.getAttribute("resize") || "vertical", m = this.getAttribute("validation"), f = this.getAttribute("color"), o = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = r || this._formControl.disabledByForm, this._textarea.readOnly = l, this._textarea.required = s, this._textarea.rows = Math.max(1, a), this._textarea.name = h, 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"), m === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), f ? this.style.setProperty("--ui-textarea-accent", f) : this.style.removeProperty("--ui-textarea-accent"), o && o !== "none" && o !== "large" && o !== "full" ? this.style.setProperty("--ui-textarea-radius", o) : 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") || d(this.getAttribute("maxlength")) !== null) && c.push(`${this._uid}-count`);
+    const y = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
+    z(this._textarea, this, y ? `${this._uid}-label` : null), k(this._textarea, this, this._uid, c);
   }
   _syncDynamicUi() {
     const t = this._textarea?.value || this.getAttribute("value") || "", e = d(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
@@ -457,7 +494,7 @@ class k extends _ {
     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, r = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, h = parseFloat(i.paddingBottom || "0") || 0, u = s * e + r + l + o + h;
+      const i = getComputedStyle(this._textarea), a = parseFloat(i.lineHeight || "20") || 20, r = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, s = parseFloat(i.paddingTop || "0") || 0, h = parseFloat(i.paddingBottom || "0") || 0, u = a * e + r + l + s + h;
       this._textarea.style.height = `${Math.min(t, u)}px`, this._textarea.style.overflowY = t > u ? "auto" : "hidden";
       return;
     }
@@ -492,9 +529,9 @@ class k extends _ {
     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") || "", r = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
+    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", a = this.getAttribute("data-error") || "", r = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), s = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
     this.setContent(`
-      <style>${z}</style>
+      <style>${B}</style>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${r ? "" : "hidden"}>
           <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
@@ -503,11 +540,11 @@ class k extends _ {
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${w}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${s ? "" : "hidden"}>${E}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(a)}</slot></div>
           <div id="${this._uid}-count" class="count" part="count" hidden></div>
         </div>
       </div>
@@ -518,8 +555,10 @@ class k extends _ {
   shouldRenderOnAttributeChange(t, e, i) {
     return t === "label" || t === "description" || t === "data-error";
   }
-}
-typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", k);
+};
+g.formAssociated = !0;
+let p = g;
+typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", p);
 export {
-  k as UITextarea
+  p as UITextarea
 };

package/dist/theme.d.ts

@@ -68,6 +68,12 @@ export interface ThemeTokens {
         xl?: string;
         xxl?: string;
     };
+    /**
+     * App-wide density. Rescales the shared control tokens (--ui-control-height-*, -padding-inline-*,
+     * -font-size-*) that buttons, inputs, selects, tabs and the other controls size themselves from,
+     * and the --ui-density-gap spacing. A component's own `density` attribute still overrides it.
+     */
+    density?: 'compact' | 'default' | 'comfortable';
     spaceScale?: ThemeScale;
     typography?: {
         family?: string;

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/time-field.cjs.js

@@ -1,4 +1,4 @@
-"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-C-4eHTyy.js");let V=0;const I=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-CbUsP3D6.js"),E=require("./control-name-BmoI1m3a.js"),c=require("./date-time-utils-D3hQQ5Om.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);

package/dist/time-field.esm.js

@@ -1,6 +1,6 @@
-import { E as B } from "./ElementBase-BeZT54Hj.mjs";
+import { E as B } from "./ElementBase-D5QsC5Vw.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-zAx4ghvC.mjs";
+import { q as k, u as A, v as q } from "./date-time-utils-CJUksWj3.mjs";
 let U = 0;
 const z = `
   :host {

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-DxbvhLJs.js"),E=require("./dismissable-layer-DNfrKA20.js"),k=require("./calendar-CzpWDxLc.js"),a=require("./date-time-utils-C-4eHTyy.js"),w=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-CbUsP3D6.js"),E=require("./dismissable-layer-DNfrKA20.js"),k=require("./calendar-BsVqtpjM.js"),a=require("./date-time-utils-D3hQQ5Om.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>

package/dist/time-picker.esm.js

@@ -1,7 +1,7 @@
-import { E } from "./ElementBase-BeZT54Hj.mjs";
+import { E } from "./ElementBase-D5QsC5Vw.mjs";
 import { c as k } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as w } from "./calendar-DkSDFg33.mjs";
-import { r as S, e as C, i as b, s as B, q as v, t as O, w as y, l as I, c as A } from "./date-time-utils-zAx4ghvC.mjs";
+import { r as w } from "./calendar-CFafqZVA.mjs";
+import { r as S, e as C, i as b, s as B, q as v, t as O, w as y, l as I, c as A } from "./date-time-utils-CJUksWj3.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"/>

package/dist/timeline.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-DxbvhLJs.js"),u=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./ElementBase-CbUsP3D6.js"),u=`
   :host {
     --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
     --ui-timeline-border: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
@@ -111,7 +111,7 @@
     --ui-timeline-border: #334155;
     --ui-timeline-text: #e2e8f0;
     --ui-timeline-muted: #93a4bd;
-    --ui-timeline-accent: #93c5fd;
+    --ui-timeline-accent: var(--ui-color-accent-on-dark, #93c5fd);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/timeline.esm.js

@@ -1,4 +1,4 @@
-import { E as c } from "./ElementBase-BeZT54Hj.mjs";
+import { E as c } from "./ElementBase-D5QsC5Vw.mjs";
 const d = `
   :host {
     --ui-timeline-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
@@ -112,7 +112,7 @@ const d = `
     --ui-timeline-border: #334155;
     --ui-timeline-text: #e2e8f0;
     --ui-timeline-muted: #93a4bd;
-    --ui-timeline-accent: #93c5fd;
+    --ui-timeline-accent: var(--ui-color-accent-on-dark, #93c5fd);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/toast.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),c=3200,d=170,h=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-CbUsP3D6.js"),c=require("./number-attribute-C4Rrl7d3.js"),d=3200,h=170,m=`
   :host {
     display: block;
     color-scheme: light dark;
@@ -210,8 +210,8 @@
       border: 1px solid CanvasText;
     }
   }
-`;let p=0;function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(i){const t=String(i||"").toLowerCase();return t==="success"||t==="warning"||t==="error"||t==="loading"||t==="neutral"?t:"info"}function f(i){const t=Number(i);return Number.isFinite(t)?Math.max(0,Math.trunc(t)):c}function b(i){const t=String(i||"polite").toLowerCase();return t==="off"||t==="assertive"?t:"polite"}class l extends u.ElementBase{constructor(){super(),this._toasts=[],this._timerMap=new Map,this._exitMap=new Map,this._onRootClick=this._handleRootClick.bind(this),this._onRootMouseEnter=this._handleRootMouseEnter.bind(this),this._onRootMouseLeave=this._handleRootMouseLeave.bind(this),this._onRootFocusIn=this._handleRootFocusIn.bind(this),this._onRootFocusOut=this._handleRootFocusOut.bind(this)}static get observedAttributes(){return["headless","position","max-visible"]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite"),this.setAttribute("role","region"),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this._clearAllTimers(),super.disconnectedCallback()}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}show(t,e={}){const o=++p,s=g(e.type),r=f(e.duration),a=b(e.ariaLive),n={id:o,message:String(t??""),duration:r,tone:s,ariaLive:a,createdAt:Date.now(),closing:!1};return this._toasts.push(n),this._trimVisibleToasts(),this.requestRender(),this.dispatchEvent(new CustomEvent("show",{detail:{id:o,message:n.message,type:s},bubbles:!0})),this._scheduleAutoHide(o,r),o}hide(t){const e=this._toasts.find(r=>r.id===t);if(!e||e.closing)return;e.closing=!0,this._clearToastTimer(t),this.requestRender();const o=this._exitMap.get(t);o&&clearTimeout(o);const s=setTimeout(()=>{this._exitMap.delete(t);const r=this._toasts.length;this._toasts=this._toasts.filter(a=>a.id!==t),this._toasts.length!==r&&(this.requestRender(),this.dispatchEvent(new CustomEvent("hide",{detail:{id:t},bubbles:!0})))},d);this._exitMap.set(t,s)}_maxVisible(){const t=Number(this.getAttribute("max-visible"));return Number.isFinite(t)?Math.max(1,Math.trunc(t)):5}_trimVisibleToasts(){const t=this._toasts.filter(s=>!s.closing),e=this._maxVisible();if(t.length<=e)return;[...t].sort((s,r)=>s.createdAt-r.createdAt).slice(0,t.length-e).forEach(s=>this.hide(s.id))}_scheduleAutoHide(t,e){if(this._clearToastTimer(t),e<=0)return;const o=Date.now(),s=setTimeout(()=>{this._timerMap.delete(t),this.hide(t)},e);this._timerMap.set(t,{timeout:s,startedAt:o,remaining:e,paused:!1})}_pauseToast(t){const e=this._timerMap.get(t);if(!e||e.paused)return;clearTimeout(e.timeout);const o=Date.now()-e.startedAt;e.remaining=Math.max(0,e.remaining-o),e.paused=!0,this._timerMap.set(t,e)}_resumeToast(t){const e=this._timerMap.get(t);if(!e||!e.paused)return;const o=Math.max(0,e.remaining);this._scheduleAutoHide(t,o)}_clearToastTimer(t){const e=this._timerMap.get(t);e&&(clearTimeout(e.timeout),this._timerMap.delete(t));const o=this._exitMap.get(t);o&&(clearTimeout(o),this._exitMap.delete(t))}_clearAllTimers(){for(const t of this._timerMap.values())clearTimeout(t.timeout);this._timerMap.clear();for(const t of this._exitMap.values())clearTimeout(t);this._exitMap.clear()}_closestToastId(t){const o=(t instanceof HTMLElement?t:null)?.closest(".toast[data-toast-id]");if(!o)return null;const s=Number(o.getAttribute("data-toast-id"));return Number.isFinite(s)?s:null}_handleRootClick(t){const e=t.target;if(!e)return;const o=e.closest("button.close[data-toast-id]");if(!o)return;t.preventDefault();const s=Number(o.getAttribute("data-toast-id"));Number.isNaN(s)||this.hide(s)}_handleRootMouseEnter(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootMouseLeave(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.target?.closest(".toast[data-toast-id]"),s=t.relatedTarget;s&&o?.contains(s)||this._resumeToast(e)}_handleRootFocusIn(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootFocusOut(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.relatedTarget,s=t.target?.closest(".toast[data-toast-id]");o&&s?.contains(o)||this._resumeToast(e)}render(){this.setContent(`
-      <style>${h}</style>
+`;let p=0;function g(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(i){const t=String(i||"").toLowerCase();return t==="success"||t==="warning"||t==="error"||t==="loading"||t==="neutral"?t:"info"}function f(i){const t=Number(i);return Number.isFinite(t)?Math.max(0,Math.trunc(t)):d}function v(i){const t=String(i||"polite").toLowerCase();return t==="off"||t==="assertive"?t:"polite"}class l extends u.ElementBase{constructor(){super(),this._toasts=[],this._timerMap=new Map,this._exitMap=new Map,this._onRootClick=this._handleRootClick.bind(this),this._onRootMouseEnter=this._handleRootMouseEnter.bind(this),this._onRootMouseLeave=this._handleRootMouseLeave.bind(this),this._onRootFocusIn=this._handleRootFocusIn.bind(this),this._onRootFocusOut=this._handleRootFocusOut.bind(this)}static get observedAttributes(){return["headless","position","max-visible"]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-live","polite"),this.setAttribute("role","region"),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.addEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("mouseenter",this._onRootMouseEnter,!0),this.root.removeEventListener("mouseleave",this._onRootMouseLeave,!0),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this._clearAllTimers(),super.disconnectedCallback()}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}show(t,e={}){const o=++p,s=b(e.type),r=f(e.duration),a=v(e.ariaLive),n={id:o,message:String(t??""),duration:r,tone:s,ariaLive:a,createdAt:Date.now(),closing:!1};return this._toasts.push(n),this._trimVisibleToasts(),this.requestRender(),this.dispatchEvent(new CustomEvent("show",{detail:{id:o,message:n.message,type:s},bubbles:!0})),this._scheduleAutoHide(o,r),o}hide(t){const e=this._toasts.find(r=>r.id===t);if(!e||e.closing)return;e.closing=!0,this._clearToastTimer(t),this.requestRender();const o=this._exitMap.get(t);o&&clearTimeout(o);const s=setTimeout(()=>{this._exitMap.delete(t);const r=this._toasts.length;this._toasts=this._toasts.filter(a=>a.id!==t),this._toasts.length!==r&&(this.requestRender(),this.dispatchEvent(new CustomEvent("hide",{detail:{id:t},bubbles:!0})))},h);this._exitMap.set(t,s)}_maxVisible(){const t=c.numberAttribute(this.getAttribute("max-visible"),5);return Number.isFinite(t)?Math.max(1,Math.trunc(t)):5}_trimVisibleToasts(){const t=this._toasts.filter(s=>!s.closing),e=this._maxVisible();if(t.length<=e)return;[...t].sort((s,r)=>s.createdAt-r.createdAt).slice(0,t.length-e).forEach(s=>this.hide(s.id))}_scheduleAutoHide(t,e){if(this._clearToastTimer(t),e<=0)return;const o=Date.now(),s=setTimeout(()=>{this._timerMap.delete(t),this.hide(t)},e);this._timerMap.set(t,{timeout:s,startedAt:o,remaining:e,paused:!1})}_pauseToast(t){const e=this._timerMap.get(t);if(!e||e.paused)return;clearTimeout(e.timeout);const o=Date.now()-e.startedAt;e.remaining=Math.max(0,e.remaining-o),e.paused=!0,this._timerMap.set(t,e)}_resumeToast(t){const e=this._timerMap.get(t);if(!e||!e.paused)return;const o=Math.max(0,e.remaining);this._scheduleAutoHide(t,o)}_clearToastTimer(t){const e=this._timerMap.get(t);e&&(clearTimeout(e.timeout),this._timerMap.delete(t));const o=this._exitMap.get(t);o&&(clearTimeout(o),this._exitMap.delete(t))}_clearAllTimers(){for(const t of this._timerMap.values())clearTimeout(t.timeout);this._timerMap.clear();for(const t of this._exitMap.values())clearTimeout(t);this._exitMap.clear()}_closestToastId(t){const o=(t instanceof HTMLElement?t:null)?.closest(".toast[data-toast-id]");if(!o)return null;const s=Number(o.getAttribute("data-toast-id"));return Number.isFinite(s)?s:null}_handleRootClick(t){const e=t.target;if(!e)return;const o=e.closest("button.close[data-toast-id]");if(!o)return;t.preventDefault();const s=Number(o.getAttribute("data-toast-id"));Number.isNaN(s)||this.hide(s)}_handleRootMouseEnter(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootMouseLeave(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.target?.closest(".toast[data-toast-id]"),s=t.relatedTarget;s&&o?.contains(s)||this._resumeToast(e)}_handleRootFocusIn(t){const e=this._closestToastId(t.target);e!=null&&this._pauseToast(e)}_handleRootFocusOut(t){const e=this._closestToastId(t.target);if(e==null)return;const o=t.relatedTarget,s=t.target?.closest(".toast[data-toast-id]");o&&s?.contains(o)||this._resumeToast(e)}render(){this.setContent(`
+      <style>${m}</style>
       <div class="toast-list" aria-live="polite" part="list">
         ${this._toasts.map(t=>{const e=t.ariaLive==="assertive"||t.tone==="error"?"alert":"status",o=t.duration>0?'<span class="meta" part="meta">Auto-dismiss</span>':'<span class="meta" part="meta">Persistent</span>';return`
             <div
@@ -223,7 +223,7 @@
               aria-live="${t.ariaLive}"
               tabindex="0"
             >
-              <span class="message" part="message">${m(t.message)}</span>
+              <span class="message" part="message">${g(t.message)}</span>
               ${o}
               <button class="close" part="close" data-toast-id="${t.id}" aria-label="Close notification" type="button">
                 <span aria-hidden="true">&times;</span>

package/dist/toast.esm.js

@@ -1,5 +1,6 @@
-import { E as l } from "./ElementBase-BeZT54Hj.mjs";
-const u = 3200, c = 170, d = `
+import { E as l } from "./ElementBase-D5QsC5Vw.mjs";
+import { n as u } from "./number-attribute-BAF07JrU.mjs";
+const c = 3200, d = 170, h = `
   :host {
     display: block;
     color-scheme: light dark;
@@ -212,23 +213,23 @@ const u = 3200, c = 170, d = `
     }
   }
 `;
-let h = 0;
-function p(i) {
+let p = 0;
+function m(i) {
   return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function m(i) {
+function g(i) {
   const t = String(i || "").toLowerCase();
   return t === "success" || t === "warning" || t === "error" || t === "loading" || t === "neutral" ? t : "info";
 }
-function g(i) {
+function f(i) {
   const t = Number(i);
-  return Number.isFinite(t) ? Math.max(0, Math.trunc(t)) : u;
+  return Number.isFinite(t) ? Math.max(0, Math.trunc(t)) : c;
 }
-function f(i) {
+function b(i) {
   const t = String(i || "polite").toLowerCase();
   return t === "off" || t === "assertive" ? t : "polite";
 }
-class b extends l {
+class v extends l {
   constructor() {
     super(), this._toasts = [], this._timerMap = /* @__PURE__ */ new Map(), this._exitMap = /* @__PURE__ */ new Map(), this._onRootClick = this._handleRootClick.bind(this), this._onRootMouseEnter = this._handleRootMouseEnter.bind(this), this._onRootMouseLeave = this._handleRootMouseLeave.bind(this), this._onRootFocusIn = this._handleRootFocusIn.bind(this), this._onRootFocusOut = this._handleRootFocusOut.bind(this);
   }
@@ -248,7 +249,7 @@ class b extends l {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   show(t, e = {}) {
-    const o = ++h, s = m(e.type), r = g(e.duration), a = f(e.ariaLive), n = {
+    const o = ++p, s = g(e.type), r = f(e.duration), a = b(e.ariaLive), n = {
       id: o,
       message: String(t ?? ""),
       duration: r,
@@ -269,11 +270,11 @@ class b extends l {
       this._exitMap.delete(t);
       const r = this._toasts.length;
       this._toasts = this._toasts.filter((a) => a.id !== t), this._toasts.length !== r && (this.requestRender(), this.dispatchEvent(new CustomEvent("hide", { detail: { id: t }, bubbles: !0 })));
-    }, c);
+    }, d);
     this._exitMap.set(t, s);
   }
   _maxVisible() {
-    const t = Number(this.getAttribute("max-visible"));
+    const t = u(this.getAttribute("max-visible"), 5);
     return Number.isFinite(t) ? Math.max(1, Math.trunc(t)) : 5;
   }
   _trimVisibleToasts() {
@@ -350,7 +351,7 @@ class b extends l {
   }
   render() {
     this.setContent(`
-      <style>${d}</style>
+      <style>${h}</style>
       <div class="toast-list" aria-live="polite" part="list">
         ${this._toasts.map((t) => {
       const e = t.ariaLive === "assertive" || t.tone === "error" ? "alert" : "status", o = t.duration > 0 ? '<span class="meta" part="meta">Auto-dismiss</span>' : '<span class="meta" part="meta">Persistent</span>';
@@ -364,7 +365,7 @@ class b extends l {
               aria-live="${t.ariaLive}"
               tabindex="0"
             >
-              <span class="message" part="message">${p(t.message)}</span>
+              <span class="message" part="message">${m(t.message)}</span>
               ${o}
               <button class="close" part="close" data-toast-id="${t.id}" aria-label="Close notification" type="button">
                 <span aria-hidden="true">&times;</span>
@@ -379,7 +380,7 @@ class b extends l {
     return e === o ? !1 : t === "headless" || t === "position" || t === "max-visible";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-toast") && customElements.define("ui-toast", b);
+typeof customElements < "u" && !customElements.get("ui-toast") && customElements.define("ui-toast", v);
 export {
-  b as UIToast
+  v as UIToast
 };

package/dist/toggle-group.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-DxbvhLJs.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-CbUsP3D6.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),y=`
   :host {
     --ui-toggle-group-gap: 4px;
     --ui-toggle-group-padding: 0px;

package/dist/toggle-group.esm.js

@@ -1,4 +1,4 @@
-import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
+import { E as _ } from "./ElementBase-D5QsC5Vw.mjs";
 import { r as v, s as p, g as m, f, m as x } from "./roving-focus-group-Dbm1Jko_.mjs";
 const w = `
   :host {

package/dist/toggle.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-DxbvhLJs.js"),c=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-CbUsP3D6.js"),c=`
   :host {
     --ui-toggle-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-toggle-border: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
@@ -146,9 +146,9 @@
     --ui-toggle-bg: #0f172a;
     --ui-toggle-color: #e2e8f0;
     --ui-toggle-border: #334155;
-    --ui-toggle-active-bg: #93c5fd;
+    --ui-toggle-active-bg: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-toggle-active-color: #0f172a;
-    --ui-toggle-focus: #93c5fd;
+    --ui-toggle-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-toggle-shadow:
       0 10px 24px rgba(2, 6, 23, 0.38),
       0 24px 50px rgba(2, 6, 23, 0.34);