@editora/ui-core 0.1.20 → 0.1.21

package/dist/tabs.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./ElementBase-EV6mVBUV.js"),u=require("./roving-focus-group-BdJ_4Njm.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-EV6mVBUV.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),_=`
   :host {
     --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
@@ -483,7 +483,7 @@
       border-color: Highlight;
     }
   }
-`;function p(v){return String(v).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(v){if(v==null)return!1;const t=String(v).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const _=new Set(["orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","bare"]);class g extends m.ElementBase{constructor(){super(),this._uid=`ui-tabs-${Math.random().toString(36).slice(2,9)}`,this._observer=null,this._resizeObserver=null,this._isSyncing=!1,this._isSyncingSelectionAttributes=!1,this._focusIndex=-1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["selected","value","orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","loop","bare"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-label","data-value","data-icon","data-disabled","disabled","data-active"]}),typeof ResizeObserver<"u"?(this._resizeObserver=new ResizeObserver(()=>this._syncSelectionUi()),this._resizeObserver.observe(this)):window.addEventListener("resize",this._onWindowResize),this._syncSelectionUi()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._resizeObserver?(this._resizeObserver.disconnect(),this._resizeObserver=null):window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="selected"||t==="value"){this._isSyncingSelectionAttributes||this._syncSelectionUi();return}_.has(t)&&this.isConnected&&this.requestRender()}}get selected(){return this.getAttribute("selected")||"0"}set selected(t){const e=String(t);e?this.setAttribute("selected",e):this.removeAttribute("selected")}_sourceTabs(){return Array.from(this.querySelectorAll('[slot="tab"]'))}_sourcePanels(){return Array.from(this.querySelectorAll('[slot="panel"]'))}_tabsModel(){return this._sourceTabs().map((t,e)=>{const i=t.getAttribute("data-value")||t.getAttribute("value")||String(e),a=t.getAttribute("data-label")||t.textContent?.trim()||`Tab ${e+1}`,r=t.getAttribute("data-icon")||"",s=t.hasAttribute("disabled")||f(t.getAttribute("data-disabled")),n=`${this._uid}-tab-${e}`,o=`${this._uid}-panel-${e}`;return{index:e,value:i,label:a,icon:r,disabled:s,tabId:n,panelId:o}})}_resolveSelectedIndex(t){if(!t.length)return-1;const e=this.getAttribute("selected"),i=this.getAttribute("value"),a=this._sourceTabs();let r=-1;if(e!=null&&e!==""){const s=Number(e);Number.isFinite(s)?r=Math.trunc(s):r=t.findIndex(n=>n.value===e)}return r<0&&i&&(r=t.findIndex(s=>s.value===i)),r<0&&(r=t.findIndex((s,n)=>!!a[n]?.hasAttribute("data-active")&&!s.disabled)),(r<0||!t[r]||t[r].disabled)&&(r=t.findIndex(s=>!s.disabled)),r}_syncSelectedAttributes(t,e){const i=t[e];this._isSyncingSelectionAttributes=!0;try{if(!i){this.removeAttribute("selected"),this.removeAttribute("value");return}this.getAttribute("selected")!==String(e)&&this.setAttribute("selected",String(e)),this.getAttribute("value")!==i.value&&this.setAttribute("value",i.value)}finally{this._isSyncingSelectionAttributes=!1}}_emit(t,e,i){const a=e[i];if(!a)return;const r={selected:i,index:i,value:a.value,label:a.label,tabId:a.tabId,panelId:a.panelId};this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0}))}_setSelectedByIndex(t,e,i){const a=t[e];if(!a||a.disabled)return;if(this._resolveSelectedIndex(t)===e){this._focusTab(e);return}this._focusIndex=e,this.setAttribute("selected",String(e)),this.setAttribute("value",a.value),i&&(this._emit("change",t,e),this._emit("select",t,e))}_syncSelectionUi(){if(!this.isConnected)return;if(!this.root.querySelector(".nav")){this.requestRender();return}const t=this._tabsModel();if(!t.length)return;const e=this._resolveSelectedIndex(t),i=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=Array.from(this.root.querySelectorAll(".tab"));a.forEach((s,n)=>{const o=t[n];if(!o)return;const l=n===e;s.setAttribute("aria-selected",l?"true":"false"),s.setAttribute("aria-controls",o.panelId),s.setAttribute("aria-disabled",o.disabled?"true":"false"),o.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),u.syncRovingTabStops(a,a[i]||null,{activeAttribute:null});const r=t[e];this._syncIndicator(e),r?(this.setAttribute("aria-activedescendant",r.tabId),this.setAttribute("aria-controls",r.panelId),this._scrollSelectedTabIntoView(e)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncPanels(t,e)}_syncIndicator(t){const e=this.root.querySelector(".nav");if(!e)return;const i=this.getAttribute("variant")||"default",a=i==="indicator";if(!a&&!(i==="indicator-line")){e.removeAttribute("data-indicator-ready"),e.style.removeProperty("--ui-tabs-indicator-x"),e.style.removeProperty("--ui-tabs-indicator-y"),e.style.removeProperty("--ui-tabs-indicator-w"),e.style.removeProperty("--ui-tabs-indicator-h");return}const s=this.root.querySelector(`.tab[data-index="${t}"]`);if(!s){e.removeAttribute("data-indicator-ready");return}const n=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",o=getComputedStyle(this).direction==="rtl";let l=s.offsetLeft,d=s.offsetTop,c=s.offsetWidth,b=s.offsetHeight;a?(l+=2,d+=2,c=Math.max(0,c-4),b=Math.max(0,b-4)):n==="vertical"?(d+=5,b=Math.max(8,b-10),c=3,l+=o?s.offsetWidth-3-2:2):(l+=8,c=Math.max(12,c-16),b=2,d+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${l}px`),e.style.setProperty("--ui-tabs-indicator-y",`${d}px`),e.style.setProperty("--ui-tabs-indicator-w",`${c}px`),e.style.setProperty("--ui-tabs-indicator-h",`${b}px`),e.setAttribute("data-indicator-ready","true")}_syncPanels(t,e){const i=this._sourcePanels(),a=this.root.querySelector(".panel-wrap");a&&(i.length?a.removeAttribute("hidden"):a.setAttribute("hidden","")),this._isSyncing=!0;try{i.forEach((r,s)=>{const n=t[s],o=s===e;r.id=n?.panelId||`${this._uid}-panel-${s}`,r.setAttribute("role","tabpanel"),r.setAttribute("tabindex",o?"0":"-1"),r.setAttribute("aria-hidden",o?"false":"true"),n&&r.setAttribute("aria-labelledby",n.tabId),o?r.removeAttribute("hidden"):r.setAttribute("hidden","")})}finally{this._isSyncing=!1}}_enabledIndices(t){return t.filter(e=>!e.disabled).map(e=>e.index)}_resolveFocusIndex(t,e){const i=u.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:e,getDisabled:a=>a.disabled});return this._focusIndex=i,i}_onWindowResize(){this._syncSelectionUi()}_focusTab(t){this._focusIndex=t;const e=this.root.querySelector(`.tab[data-index="${t}"]`),i=Array.from(this.root.querySelectorAll(".tab"));u.syncRovingTabStops(i,e,{activeAttribute:null}),u.focusRovingItem(e)}_scrollSelectedTabIntoView(t){const e=this.root.querySelector(".nav"),i=this.root.querySelector(`.tab[data-index="${t}"]`);if(!e||!i)return;const a=this.getAttribute("orientation")!=="vertical",r=typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;typeof i.scrollIntoView=="function"&&i.scrollIntoView({behavior:r?"auto":"smooth",block:"nearest",inline:a?"center":"nearest"})}_onClick(t){const i=t.target?.closest(".tab");if(!i||i.disabled)return;const a=Number(i.getAttribute("data-index"));if(!Number.isFinite(a))return;const r=this._tabsModel();this._setSelectedByIndex(r,a,!0)}_onKeyDown(t){const i=t.target?.closest(".tab");if(!i)return;const a=this._tabsModel();if(!a.length)return;const r=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",s=this.getAttribute("activation")==="manual"?"manual":"auto",n=!this.hasAttribute("loop")||f(this.getAttribute("loop")),o=getComputedStyle(this).direction==="rtl",l=Number(i.getAttribute("data-index"));if(!Number.isFinite(l))return;const d=c=>{const b=u.moveRovingFocusIndex(a,l,c,{wrap:n,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:h=>h.disabled});b!=null&&(this._focusTab(b),s==="auto"?this._setSelectedByIndex(a,b,!0):this._emit("focus",a,b))};if(r==="horizontal"&&(t.key==="ArrowRight"&&!o||t.key==="ArrowLeft"&&o)||r==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),d(1);return}if(r==="horizontal"&&(t.key==="ArrowLeft"&&!o||t.key==="ArrowRight"&&o)||r==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),d(-1);return}if(t.key==="Home"){t.preventDefault();const c=u.getRovingFocusBoundaryIndex(a,"first",b=>b.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}if(t.key==="End"){t.preventDefault();const c=u.getRovingFocusBoundaryIndex(a,"last",b=>b.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,l,!0))}render(){const t=this._tabsModel(),e=this._resolveSelectedIndex(t),i=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",r=t.map(n=>{const o=n.index===e,l=n.icon?`<span class="tab-icon" aria-hidden="true">${p(n.icon)}</span>`:"";return`
+`,p="data-ui-tabs-auto-label";function f(h){return String(h).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(h){if(h==null)return!1;const t=String(h).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const w=new Set(["orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","bare"]);class x extends y.ElementBase{constructor(){super(),this._uid=`ui-tabs-${Math.random().toString(36).slice(2,9)}`,this._observer=null,this._resizeObserver=null,this._isSyncing=!1,this._isSyncingSelectionAttributes=!1,this._focusIndex=-1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["selected","value","orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","loop","bare"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-label","data-value","data-icon","data-disabled","disabled","data-active"]}),typeof ResizeObserver<"u"?(this._resizeObserver=new ResizeObserver(()=>this._syncSelectionUi()),this._resizeObserver.observe(this)):window.addEventListener("resize",this._onWindowResize),this._syncSelectionUi()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._resizeObserver?(this._resizeObserver.disconnect(),this._resizeObserver=null):window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(t==="selected"||t==="value"){this._isSyncingSelectionAttributes||this._syncSelectionUi();return}w.has(t)&&this.isConnected&&this.requestRender()}}get selected(){return this.getAttribute("selected")||"0"}set selected(t){const e=String(t);e?this.setAttribute("selected",e):this.removeAttribute("selected")}_sourceTabs(){return Array.from(this.querySelectorAll('[slot="tab"]'))}_sourcePanels(){return Array.from(this.querySelectorAll('[slot="panel"]'))}_tabsModel(){return this._sourceTabs().map((t,e)=>{const r=t.getAttribute("data-value")||t.getAttribute("value")||String(e),a=t.getAttribute("data-label")||t.textContent?.trim()||`Tab ${e+1}`,i=t.getAttribute("data-icon")||"",s=t.hasAttribute("disabled")||g(t.getAttribute("data-disabled")),n=`${this._uid}-tab-${e}`,o=`${this._uid}-panel-${e}`;return{index:e,value:r,label:a,icon:i,disabled:s,tabId:n,panelId:o}})}_resolveSelectedIndex(t){if(!t.length)return-1;const e=this.getAttribute("selected"),r=this.getAttribute("value"),a=this._sourceTabs();let i=-1;if(e!=null&&e!==""){const s=Number(e);Number.isFinite(s)?i=Math.trunc(s):i=t.findIndex(n=>n.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,n)=>!!a[n]?.hasAttribute("data-active")&&!s.disabled)),(i<0||!t[i]||t[i].disabled)&&(i=t.findIndex(s=>!s.disabled)),i}_syncSelectedAttributes(t,e){const r=t[e];this._isSyncingSelectionAttributes=!0;try{if(!r){this.removeAttribute("selected"),this.removeAttribute("value");return}this.getAttribute("selected")!==String(e)&&this.setAttribute("selected",String(e)),this.getAttribute("value")!==r.value&&this.setAttribute("value",r.value)}finally{this._isSyncingSelectionAttributes=!1}}_emit(t,e,r){const a=e[r];if(!a)return;const i={selected:r,index:r,value:a.value,label:a.label,tabId:a.tabId,panelId:a.panelId};this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_setSelectedByIndex(t,e,r){const a=t[e];if(!a||a.disabled)return;if(this._resolveSelectedIndex(t)===e){this._focusTab(e);return}this._focusIndex=e,this.setAttribute("selected",String(e)),this.setAttribute("value",a.value),r&&(this._emit("change",t,e),this._emit("select",t,e))}_syncSelectionUi(){if(!this.isConnected)return;if(!this.root.querySelector(".nav")){this.requestRender();return}const t=this._tabsModel();if(!t.length)return;const e=this._resolveSelectedIndex(t),r=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=Array.from(this.root.querySelectorAll(".tab"));a.forEach((s,n)=>{const o=t[n];if(!o)return;const l=n===e;s.setAttribute("aria-selected",l?"true":"false"),s.setAttribute("aria-controls",o.panelId),s.setAttribute("aria-disabled",o.disabled?"true":"false"),o.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),d.syncRovingTabStops(a,a[r]||null,{activeAttribute:null});const i=t[e];this._syncIndicator(e),i?(this.setAttribute("aria-activedescendant",i.tabId),this.setAttribute("aria-controls",i.panelId),this._scrollSelectedTabIntoView(e)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncPanels(t,e)}_syncIndicator(t){const e=this.root.querySelector(".nav");if(!e)return;const r=this.getAttribute("variant")||"default",a=r==="indicator";if(!a&&!(r==="indicator-line")){e.removeAttribute("data-indicator-ready"),e.style.removeProperty("--ui-tabs-indicator-x"),e.style.removeProperty("--ui-tabs-indicator-y"),e.style.removeProperty("--ui-tabs-indicator-w"),e.style.removeProperty("--ui-tabs-indicator-h");return}const s=this.root.querySelector(`.tab[data-index="${t}"]`);if(!s){e.removeAttribute("data-indicator-ready");return}const n=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",o=getComputedStyle(this).direction==="rtl";let l=s.offsetLeft,u=s.offsetTop,c=s.offsetWidth,b=s.offsetHeight;a?(l+=2,u+=2,c=Math.max(0,c-4),b=Math.max(0,b-4)):n==="vertical"?(u+=5,b=Math.max(8,b-10),c=3,l+=o?s.offsetWidth-3-2:2):(l+=8,c=Math.max(12,c-16),b=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${l}px`),e.style.setProperty("--ui-tabs-indicator-y",`${u}px`),e.style.setProperty("--ui-tabs-indicator-w",`${c}px`),e.style.setProperty("--ui-tabs-indicator-h",`${b}px`),e.setAttribute("data-indicator-ready","true")}_syncPanels(t,e){const r=this._sourcePanels(),a=this.root.querySelector(".panel-wrap");a&&(r.length?a.removeAttribute("hidden"):a.setAttribute("hidden","")),this._isSyncing=!0;try{r.forEach((i,s)=>{const n=t[s],o=s===e;i.id=n?.panelId||`${this._uid}-panel-${s}`,i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",o?"0":"-1"),i.setAttribute("aria-hidden",o?"false":"true"),n&&(i.getAttribute("aria-labelledby")===n.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(p)||(i.setAttribute("aria-label",n.label),i.setAttribute(p,""))),o?i.removeAttribute("hidden"):i.setAttribute("hidden","")})}finally{this._isSyncing=!1}}_enabledIndices(t){return t.filter(e=>!e.disabled).map(e=>e.index)}_resolveFocusIndex(t,e){const r=d.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:e,getDisabled:a=>a.disabled});return this._focusIndex=r,r}_onWindowResize(){this._syncSelectionUi()}_focusTab(t){this._focusIndex=t;const e=this.root.querySelector(`.tab[data-index="${t}"]`),r=Array.from(this.root.querySelectorAll(".tab"));d.syncRovingTabStops(r,e,{activeAttribute:null}),d.focusRovingItem(e)}_scrollSelectedTabIntoView(t){const e=this.root.querySelector(".nav"),r=this.root.querySelector(`.tab[data-index="${t}"]`);if(!e||!r)return;const a=this.getAttribute("orientation")!=="vertical",i=typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;typeof r.scrollIntoView=="function"&&r.scrollIntoView({behavior:i?"auto":"smooth",block:"nearest",inline:a?"center":"nearest"})}_onClick(t){const r=t.target?.closest(".tab");if(!r||r.disabled)return;const a=Number(r.getAttribute("data-index"));if(!Number.isFinite(a))return;const i=this._tabsModel();this._setSelectedByIndex(i,a,!0)}_onKeyDown(t){const r=t.target?.closest(".tab");if(!r)return;const a=this._tabsModel();if(!a.length)return;const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",s=this.getAttribute("activation")==="manual"?"manual":"auto",n=!this.hasAttribute("loop")||g(this.getAttribute("loop")),o=getComputedStyle(this).direction==="rtl",l=Number(r.getAttribute("data-index"));if(!Number.isFinite(l))return;const u=c=>{const b=d.moveRovingFocusIndex(a,l,c,{wrap:n,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:v=>v.disabled});b!=null&&(this._focusTab(b),s==="auto"?this._setSelectedByIndex(a,b,!0):this._emit("focus",a,b))};if(i==="horizontal"&&(t.key==="ArrowRight"&&!o||t.key==="ArrowLeft"&&o)||i==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),u(1);return}if(i==="horizontal"&&(t.key==="ArrowLeft"&&!o||t.key==="ArrowRight"&&o)||i==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),u(-1);return}if(t.key==="Home"){t.preventDefault();const c=d.getRovingFocusBoundaryIndex(a,"first",b=>b.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}if(t.key==="End"){t.preventDefault();const c=d.getRovingFocusBoundaryIndex(a,"last",b=>b.disabled);if(c<0)return;this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,l,!0))}render(){const t=this._tabsModel(),e=this._resolveSelectedIndex(t),r=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",i=t.map(n=>{const o=n.index===e,l=n.icon?`<span class="tab-icon" aria-hidden="true">${f(n.icon)}</span>`:"";return`
           <button
             type="button"
             class="tab"
@@ -494,22 +494,22 @@
             aria-selected="${o?"true":"false"}"
             aria-controls="${n.panelId}"
             aria-disabled="${n.disabled?"true":"false"}"
-            tabindex="${n.index===i&&!n.disabled?"0":"-1"}"
+            tabindex="${n.index===r&&!n.disabled?"0":"-1"}"
             ${n.disabled?"disabled":""}
           >
             ${l}
-            <span class="tab-label">${p(n.label)}</span>
+            <span class="tab-label">${f(n.label)}</span>
           </button>
         `}).join("");this.setContent(`
-      <style>${y}</style>
+      <style>${_}</style>
       <section class="shell" part="shell">
         <div class="nav" role="tablist" aria-orientation="${a}" part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${r}
+          ${i}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>
         </div>
       </section>
       <slot class="source-tabs" name="tab"></slot>
-    `);const s=t[e];s?(this.setAttribute("aria-activedescendant",s.tabId),this.setAttribute("aria-controls",s.panelId)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncIndicator(e),this._syncPanels(t,e)}}typeof customElements<"u"&&!customElements.get("ui-tabs")&&customElements.define("ui-tabs",g);exports.UITabs=g;
+    `);const s=t[e];s?(this.setAttribute("aria-activedescendant",s.tabId),this.setAttribute("aria-controls",s.panelId)):(this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")),this._syncIndicator(e),this._syncPanels(t,e)}}typeof customElements<"u"&&!customElements.get("ui-tabs")&&customElements.define("ui-tabs",x);exports.UITabs=x;

package/dist/tabs.esm.js

@@ -1,6 +1,6 @@
-import { E as m } from "./ElementBase-YlTLMsGk.mjs";
-import { s as v, r as y, f as _, g as p, m as w } from "./roving-focus-group-Dbm1Jko_.mjs";
-const A = `
+import { E as y } from "./ElementBase-YlTLMsGk.mjs";
+import { s as v, r as _, f as w, g as p, m as A } from "./roving-focus-group-Dbm1Jko_.mjs";
+const k = `
   :host {
     --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
@@ -485,16 +485,16 @@ const A = `
       border-color: Highlight;
     }
   }
-`;
-function f(u) {
+`, f = "data-ui-tabs-auto-label";
+function g(u) {
   return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function g(u) {
+function x(u) {
   if (u == null) return !1;
   const t = String(u).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-const k = /* @__PURE__ */ new Set([
+const S = /* @__PURE__ */ new Set([
   "orientation",
   "activation",
   "headless",
@@ -507,7 +507,7 @@ const k = /* @__PURE__ */ new Set([
   "elevation",
   "bare"
 ]);
-class S extends m {
+class I extends y {
   constructor() {
     super(), this._uid = `ui-tabs-${Math.random().toString(36).slice(2, 9)}`, this._observer = null, this._resizeObserver = null, this._isSyncing = !1, this._isSyncingSelectionAttributes = !1, this._focusIndex = -1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this);
   }
@@ -543,13 +543,13 @@ class S extends m {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this._observer && (this._observer.disconnect(), this._observer = null), this._resizeObserver ? (this._resizeObserver.disconnect(), this._resizeObserver = null) : window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i) {
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
       if (t === "selected" || t === "value") {
         this._isSyncingSelectionAttributes || this._syncSelectionUi();
         return;
       }
-      k.has(t) && this.isConnected && this.requestRender();
+      S.has(t) && this.isConnected && this.requestRender();
     }
   }
   get selected() {
@@ -567,54 +567,54 @@ class S extends m {
   }
   _tabsModel() {
     return this._sourceTabs().map((t, e) => {
-      const i = t.getAttribute("data-value") || t.getAttribute("value") || String(e), a = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${e + 1}`, r = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || g(t.getAttribute("data-disabled")), n = `${this._uid}-tab-${e}`, o = `${this._uid}-panel-${e}`;
-      return { index: e, value: i, label: a, icon: r, disabled: s, tabId: n, panelId: o };
+      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(e), a = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${e + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), n = `${this._uid}-tab-${e}`, o = `${this._uid}-panel-${e}`;
+      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: n, panelId: o };
     });
   }
   _resolveSelectedIndex(t) {
     if (!t.length) return -1;
-    const e = this.getAttribute("selected"), i = this.getAttribute("value"), a = this._sourceTabs();
-    let r = -1;
+    const e = this.getAttribute("selected"), r = this.getAttribute("value"), a = this._sourceTabs();
+    let i = -1;
     if (e != null && e !== "") {
       const s = Number(e);
-      Number.isFinite(s) ? r = Math.trunc(s) : r = t.findIndex((n) => n.value === e);
+      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((n) => n.value === e);
     }
-    return r < 0 && i && (r = t.findIndex((s) => s.value === i)), r < 0 && (r = t.findIndex((s, n) => !!a[n]?.hasAttribute("data-active") && !s.disabled)), (r < 0 || !t[r] || t[r].disabled) && (r = t.findIndex((s) => !s.disabled)), r;
+    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, n) => !!a[n]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
   }
   _syncSelectedAttributes(t, e) {
-    const i = t[e];
+    const r = t[e];
     this._isSyncingSelectionAttributes = !0;
     try {
-      if (!i) {
+      if (!r) {
         this.removeAttribute("selected"), this.removeAttribute("value");
         return;
       }
-      this.getAttribute("selected") !== String(e) && this.setAttribute("selected", String(e)), this.getAttribute("value") !== i.value && this.setAttribute("value", i.value);
+      this.getAttribute("selected") !== String(e) && this.setAttribute("selected", String(e)), this.getAttribute("value") !== r.value && this.setAttribute("value", r.value);
     } finally {
       this._isSyncingSelectionAttributes = !1;
     }
   }
-  _emit(t, e, i) {
-    const a = e[i];
+  _emit(t, e, r) {
+    const a = e[r];
     if (!a) return;
-    const r = {
-      selected: i,
-      index: i,
+    const i = {
+      selected: r,
+      index: r,
       value: a.value,
       label: a.label,
       tabId: a.tabId,
       panelId: a.panelId
     };
-    this.dispatchEvent(new CustomEvent(t, { detail: r, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
   }
-  _setSelectedByIndex(t, e, i) {
+  _setSelectedByIndex(t, e, r) {
     const a = t[e];
     if (!a || a.disabled) return;
     if (this._resolveSelectedIndex(t) === e) {
       this._focusTab(e);
       return;
     }
-    this._focusIndex = e, this.setAttribute("selected", String(e)), this.setAttribute("value", a.value), i && (this._emit("change", t, e), this._emit("select", t, e));
+    this._focusIndex = e, this.setAttribute("selected", String(e)), this.setAttribute("value", a.value), r && (this._emit("change", t, e), this._emit("select", t, e));
   }
   _syncSelectionUi() {
     if (!this.isConnected) return;
@@ -624,7 +624,7 @@ class S extends m {
     }
     const t = this._tabsModel();
     if (!t.length) return;
-    const e = this._resolveSelectedIndex(t), i = this._resolveFocusIndex(t, e);
+    const e = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, e);
     this._syncSelectedAttributes(t, e);
     const a = Array.from(this.root.querySelectorAll(".tab"));
     a.forEach((s, n) => {
@@ -632,15 +632,15 @@ class S extends m {
       if (!o) return;
       const l = n === e;
       s.setAttribute("aria-selected", l ? "true" : "false"), s.setAttribute("aria-controls", o.panelId), s.setAttribute("aria-disabled", o.disabled ? "true" : "false"), o.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
-    }), v(a, a[i] || null, { activeAttribute: null });
-    const r = t[e];
-    this._syncIndicator(e), r ? (this.setAttribute("aria-activedescendant", r.tabId), this.setAttribute("aria-controls", r.panelId), this._scrollSelectedTabIntoView(e)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncPanels(t, e);
+    }), v(a, a[r] || null, { activeAttribute: null });
+    const i = t[e];
+    this._syncIndicator(e), i ? (this.setAttribute("aria-activedescendant", i.tabId), this.setAttribute("aria-controls", i.panelId), this._scrollSelectedTabIntoView(e)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncPanels(t, e);
   }
   _syncIndicator(t) {
     const e = this.root.querySelector(".nav");
     if (!e) return;
-    const i = this.getAttribute("variant") || "default", a = i === "indicator";
-    if (!a && !(i === "indicator-line")) {
+    const r = this.getAttribute("variant") || "default", a = r === "indicator";
+    if (!a && !(r === "indicator-line")) {
       e.removeAttribute("data-indicator-ready"), e.style.removeProperty("--ui-tabs-indicator-x"), e.style.removeProperty("--ui-tabs-indicator-y"), e.style.removeProperty("--ui-tabs-indicator-w"), e.style.removeProperty("--ui-tabs-indicator-h");
       return;
     }
@@ -654,12 +654,12 @@ class S extends m {
     a ? (l += 2, d += 2, c = Math.max(0, c - 4), b = Math.max(0, b - 4)) : n === "vertical" ? (d += 5, b = Math.max(8, b - 10), c = 3, l += o ? s.offsetWidth - 3 - 2 : 2) : (l += 8, c = Math.max(12, c - 16), b = 2, d += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${l}px`), e.style.setProperty("--ui-tabs-indicator-y", `${d}px`), e.style.setProperty("--ui-tabs-indicator-w", `${c}px`), e.style.setProperty("--ui-tabs-indicator-h", `${b}px`), e.setAttribute("data-indicator-ready", "true");
   }
   _syncPanels(t, e) {
-    const i = this._sourcePanels(), a = this.root.querySelector(".panel-wrap");
-    a && (i.length ? a.removeAttribute("hidden") : a.setAttribute("hidden", "")), this._isSyncing = !0;
+    const r = this._sourcePanels(), a = this.root.querySelector(".panel-wrap");
+    a && (r.length ? a.removeAttribute("hidden") : a.setAttribute("hidden", "")), this._isSyncing = !0;
     try {
-      i.forEach((r, s) => {
+      r.forEach((i, s) => {
         const n = t[s], o = s === e;
-        r.id = n?.panelId || `${this._uid}-panel-${s}`, r.setAttribute("role", "tabpanel"), r.setAttribute("tabindex", o ? "0" : "-1"), r.setAttribute("aria-hidden", o ? "false" : "true"), n && r.setAttribute("aria-labelledby", n.tabId), o ? r.removeAttribute("hidden") : r.setAttribute("hidden", "");
+        i.id = n?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", o ? "0" : "-1"), i.setAttribute("aria-hidden", o ? "false" : "true"), n && (i.getAttribute("aria-labelledby") === n.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(f) || (i.setAttribute("aria-label", n.label), i.setAttribute(f, ""))), o ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
@@ -669,59 +669,59 @@ class S extends m {
     return t.filter((e) => !e.disabled).map((e) => e.index);
   }
   _resolveFocusIndex(t, e) {
-    const i = y(t, {
+    const r = _(t, {
       activeIndex: this._focusIndex,
       selectedIndex: e,
       getDisabled: (a) => a.disabled
     });
-    return this._focusIndex = i, i;
+    return this._focusIndex = r, r;
   }
   _onWindowResize() {
     this._syncSelectionUi();
   }
   _focusTab(t) {
     this._focusIndex = t;
-    const e = this.root.querySelector(`.tab[data-index="${t}"]`), i = Array.from(this.root.querySelectorAll(".tab"));
-    v(i, e, { activeAttribute: null }), _(e);
+    const e = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
+    v(r, e, { activeAttribute: null }), w(e);
   }
   _scrollSelectedTabIntoView(t) {
-    const e = this.root.querySelector(".nav"), i = this.root.querySelector(`.tab[data-index="${t}"]`);
-    if (!e || !i) return;
-    const a = this.getAttribute("orientation") !== "vertical", r = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    typeof i.scrollIntoView == "function" && i.scrollIntoView({
-      behavior: r ? "auto" : "smooth",
+    const e = this.root.querySelector(".nav"), r = this.root.querySelector(`.tab[data-index="${t}"]`);
+    if (!e || !r) return;
+    const a = this.getAttribute("orientation") !== "vertical", i = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    typeof r.scrollIntoView == "function" && r.scrollIntoView({
+      behavior: i ? "auto" : "smooth",
       block: "nearest",
       inline: a ? "center" : "nearest"
     });
   }
   _onClick(t) {
-    const i = t.target?.closest(".tab");
-    if (!i || i.disabled) return;
-    const a = Number(i.getAttribute("data-index"));
+    const r = t.target?.closest(".tab");
+    if (!r || r.disabled) return;
+    const a = Number(r.getAttribute("data-index"));
     if (!Number.isFinite(a)) return;
-    const r = this._tabsModel();
-    this._setSelectedByIndex(r, a, !0);
+    const i = this._tabsModel();
+    this._setSelectedByIndex(i, a, !0);
   }
   _onKeyDown(t) {
-    const i = t.target?.closest(".tab");
-    if (!i) return;
+    const r = t.target?.closest(".tab");
+    if (!r) return;
     const a = this._tabsModel();
     if (!a.length) return;
-    const r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", n = !this.hasAttribute("loop") || g(this.getAttribute("loop")), o = getComputedStyle(this).direction === "rtl", l = Number(i.getAttribute("data-index"));
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", n = !this.hasAttribute("loop") || x(this.getAttribute("loop")), o = getComputedStyle(this).direction === "rtl", l = Number(r.getAttribute("data-index"));
     if (!Number.isFinite(l)) return;
     const d = (c) => {
-      const b = w(a, l, c, {
+      const b = A(a, l, c, {
         wrap: n,
         fallbackIndex: this._resolveFocusIndex(a, this._resolveSelectedIndex(a)),
         getDisabled: (h) => h.disabled
       });
       b != null && (this._focusTab(b), s === "auto" ? this._setSelectedByIndex(a, b, !0) : this._emit("focus", a, b));
     };
-    if (r === "horizontal" && (t.key === "ArrowRight" && !o || t.key === "ArrowLeft" && o) || r === "vertical" && t.key === "ArrowDown") {
+    if (i === "horizontal" && (t.key === "ArrowRight" && !o || t.key === "ArrowLeft" && o) || i === "vertical" && t.key === "ArrowDown") {
       t.preventDefault(), d(1);
       return;
     }
-    if (r === "horizontal" && (t.key === "ArrowLeft" && !o || t.key === "ArrowRight" && o) || r === "vertical" && t.key === "ArrowUp") {
+    if (i === "horizontal" && (t.key === "ArrowLeft" && !o || t.key === "ArrowRight" && o) || i === "vertical" && t.key === "ArrowUp") {
       t.preventDefault(), d(-1);
       return;
     }
@@ -742,10 +742,10 @@ class S extends m {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, l, !0));
   }
   render() {
-    const t = this._tabsModel(), e = this._resolveSelectedIndex(t), i = this._resolveFocusIndex(t, e);
+    const t = this._tabsModel(), e = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, e);
     this._syncSelectedAttributes(t, e);
-    const a = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", r = t.map((n) => {
-      const o = n.index === e, l = n.icon ? `<span class="tab-icon" aria-hidden="true">${f(n.icon)}</span>` : "";
+    const a = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = t.map((n) => {
+      const o = n.index === e, l = n.icon ? `<span class="tab-icon" aria-hidden="true">${g(n.icon)}</span>` : "";
       return `
           <button
             type="button"
@@ -757,20 +757,20 @@ class S extends m {
             aria-selected="${o ? "true" : "false"}"
             aria-controls="${n.panelId}"
             aria-disabled="${n.disabled ? "true" : "false"}"
-            tabindex="${n.index === i && !n.disabled ? "0" : "-1"}"
+            tabindex="${n.index === r && !n.disabled ? "0" : "-1"}"
             ${n.disabled ? "disabled" : ""}
           >
             ${l}
-            <span class="tab-label">${f(n.label)}</span>
+            <span class="tab-label">${g(n.label)}</span>
           </button>
         `;
     }).join("");
     this.setContent(`
-      <style>${A}</style>
+      <style>${k}</style>
       <section class="shell" part="shell">
         <div class="nav" role="tablist" aria-orientation="${a}" part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${r}
+          ${i}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>
@@ -782,7 +782,7 @@ class S extends m {
     s ? (this.setAttribute("aria-activedescendant", s.tabId), this.setAttribute("aria-controls", s.panelId)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncIndicator(e), this._syncPanels(t, e);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", S);
+typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", I);
 export {
-  S as UITabs
+  I as UITabs
 };

package/dist/textarea.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-EV6mVBUV.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),y=`
   <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=`
+`,A=`
   :host {
     --ui-textarea-bg: var(--ui-color-surface, #ffffff);
     --ui-textarea-text: var(--ui-color-text, #0f172a);
@@ -308,22 +308,22 @@
       color: CanvasText;
     }
   }
-`;function d(l){return l.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function x(l,t){const e=Number(l);return Number.isFinite(e)?e:t}class p extends v.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=this.getAttribute("maxlength"),i=this.getAttribute("minlength"),r=x(this.getAttribute("rows"),4),a=this.hasAttribute("disabled"),u=this.hasAttribute("readonly"),s=this.hasAttribute("required"),c=this.getAttribute("name")||"",h=this.getAttribute("resize")||"vertical",g=this.getAttribute("validation"),b=this.getAttribute("color"),o=this.getAttribute("radius");this._textarea.placeholder=t,this._textarea.disabled=a,this._textarea.readOnly=u,this._textarea.required=s,this._textarea.rows=Math.max(1,r),this._textarea.name=c,this._textarea.style.resize=h,e&&Number.isFinite(Number(e))?this._textarea.maxLength=Number(e):this._textarea.removeAttribute("maxlength"),i&&Number.isFinite(Number(i))?this._textarea.minLength=Number(i):this._textarea.removeAttribute("minlength"),g==="error"?this._textarea.setAttribute("aria-invalid","true"):this._textarea.removeAttribute("aria-invalid"),b?this.style.setProperty("--ui-textarea-accent",b):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 n=[],m=!!(this.getAttribute("description")||this.querySelector('[slot="description"]')),f=!!(this.getAttribute("data-error")||this.querySelector('[slot="error"]'));m&&n.push(`${this._uid}-description`),f&&n.push(`${this._uid}-error`),(this.hasAttribute("show-count")||this.hasAttribute("maxlength"))&&n.push(`${this._uid}-count`),!!(this.getAttribute("label")||this.querySelector('[slot="label"]'))?this._textarea.setAttribute("aria-labelledby",`${this._uid}-label`):this._textarea.removeAttribute("aria-labelledby"),n.length?this._textarea.setAttribute("aria-describedby",n.join(" ")):this._textarea.removeAttribute("aria-describedby")}_syncDynamicUi(){const t=this._textarea?.value||this.getAttribute("value")||"",e=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?(this._countEl.removeAttribute("hidden"),e&&Number.isFinite(Number(e))?this._countEl.textContent=`${t.length} / ${Number(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=x(this.getAttribute("max-rows"),0);if(e>0){const i=getComputedStyle(this._textarea),r=parseFloat(i.lineHeight||"20")||20,a=parseFloat(i.borderTopWidth||"0")||0,u=parseFloat(i.borderBottomWidth||"0")||0,s=parseFloat(i.paddingTop||"0")||0,c=parseFloat(i.paddingBottom||"0")||0,h=r*e+a+u+s+c;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=x(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")||"",r=this.getAttribute("data-error")||"",a=!!(e||i||this.querySelector('[slot="label"]')||this.querySelector('[slot="description"]')),s=this.hasAttribute("clearable")&&!!t&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");this.setContent(`
-      <style>${y}</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 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>
       <div class="shell" part="shell">
         <div class="meta" part="meta" ${a?"":"hidden"}>
-          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
-          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+          <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>
         </div>
 
         <div class="field" part="field">
           <textarea part="textarea"></textarea>
-          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${s?"":"hidden"}>${_}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o?"":"hidden"}>${y}</button>
         </div>
 
         <div class="footer" part="footer">
-          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(r)}</slot></div>
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${x(s)}</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",p);exports.UITextarea=p;
+    `),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;