@editora/ui-core 0.2.0 → 0.2.1

package/dist/tabs.cjs.js

@@ -6,7 +6,9 @@
     --ui-tabs-text: var(--ui-color-text, #0f172a);
     --ui-tabs-muted: var(--ui-color-muted, #526175);
     --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    /* The accent as text: readable on the surface, unlike the accent fill itself (light amber, for one). */
+    --ui-tabs-accent-text: var(--ui-color-accent-text, var(--ui-tabs-accent));
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-tabs-accent) 16%, transparent);
     --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-tabs-accent) 32%, transparent);
@@ -95,7 +97,7 @@
 
   .tab:hover {
     background: color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    color: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .tab[aria-selected="true"] {
@@ -316,7 +318,7 @@
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
     --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 94%, transparent);
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
+    --ui-tabs-active-text: var(--ui-tabs-accent-text);
     --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
@@ -326,7 +328,7 @@
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
+    background: var(--ui-color-surface, #ffffff);
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -504,14 +506,17 @@
 
   :host([tone="success"]) {
     --ui-tabs-accent: var(--ui-color-success, #15803d);
+    --ui-tabs-accent-text: var(--ui-color-success-text, var(--ui-tabs-accent));
   }
 
   :host([tone="warning"]) {
     --ui-tabs-accent: var(--ui-color-warning, #b45309);
+    --ui-tabs-accent-text: var(--ui-color-warning-text, var(--ui-tabs-accent));
   }
 
   :host([tone="danger"]) {
     --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+    --ui-tabs-accent-text: var(--ui-color-danger-text, var(--ui-tabs-accent));
   }
 
   :host([headless]) .nav,
@@ -553,7 +558,7 @@
       border-color: Highlight;
     }
   }
-`,f="data-ui-tabs-auto-label";function p(v){return String(v).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(v){if(v==null)return!1;const t=String(v).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const w=new Set(["aria-label","aria-labelledby","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","aria-label","aria-labelledby"]}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")),l=`${this._uid}-tab-${e}`,b=`${this._uid}-panel-${e}`;return{index:e,value:r,label:a,icon:i,disabled:s,tabId:l,panelId:b}})}_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(l=>l.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,l)=>!!a[l]?.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,l)=>{const b=t[l];if(!b)return;const n=l===e;s.setAttribute("aria-selected",n?"true":"false"),s.setAttribute("aria-disabled",b.disabled?"true":"false"),b.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),d.syncRovingTabStops(a,a[r]||null,{activeAttribute:null});const i=t[e];this._syncIndicator(e),this._clearCrossRootReferences(),i&&this._scrollSelectedTabIntoView(e),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 l=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",b=getComputedStyle(this).direction==="rtl";let n=s.offsetLeft,u=s.offsetTop,o=s.offsetWidth,c=s.offsetHeight;a?(n+=2,u+=2,o=Math.max(0,o-4),c=Math.max(0,c-4)):l==="vertical"?(u+=5,c=Math.max(8,c-10),o=3,n+=b?s.offsetWidth-3-2:2):(n+=8,o=Math.max(12,o-16),c=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${n}px`),e.style.setProperty("--ui-tabs-indicator-y",`${u}px`),e.style.setProperty("--ui-tabs-indicator-w",`${o}px`),e.style.setProperty("--ui-tabs-indicator-h",`${c}px`),e.setAttribute("data-indicator-ready","true")}_clearCrossRootReferences(){this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")}_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 l=t[s],b=s===e;i.id=l?.panelId||`${this._uid}-panel-${s}`,i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",b?"0":"-1"),i.setAttribute("aria-hidden",b?"false":"true"),l&&(i.getAttribute("aria-labelledby")===l.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(f)||(i.setAttribute("aria-label",l.label),i.setAttribute(f,""))),b?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",l=!this.hasAttribute("loop")||g(this.getAttribute("loop")),b=getComputedStyle(this).direction==="rtl",n=Number(r.getAttribute("data-index"));if(!Number.isFinite(n))return;const u=o=>{const c=d.moveRovingFocusIndex(a,n,o,{wrap:l,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:h=>h.disabled});c!=null&&(this._focusTab(c),s==="auto"?this._setSelectedByIndex(a,c,!0):this._emit("focus",a,c))};if(i==="horizontal"&&(t.key==="ArrowRight"&&!b||t.key==="ArrowLeft"&&b)||i==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),u(1);return}if(i==="horizontal"&&(t.key==="ArrowLeft"&&!b||t.key==="ArrowRight"&&b)||i==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),u(-1);return}if(t.key==="Home"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"first",c=>c.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}if(t.key==="End"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"last",c=>c.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,n,!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=(this.getAttribute("aria-label")||"").trim(),s=(this.getAttribute("aria-labelledby")||"").trim(),l=(i?` aria-label="${p(i)}"`:"")+(s?` aria-labelledby="${p(s)}"`:""),b=t.map(n=>{const u=n.index===e,o=n.icon?`<span class="tab-icon" aria-hidden="true">${p(n.icon)}</span>`:"";return`
+`,f="data-ui-tabs-auto-label";function p(v){return String(v).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(v){if(v==null)return!1;const t=String(v).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const w=new Set(["aria-label","aria-labelledby","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","aria-label","aria-labelledby"]}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")),l=`${this._uid}-tab-${e}`,c=`${this._uid}-panel-${e}`;return{index:e,value:r,label:a,icon:i,disabled:s,tabId:l,panelId:c}})}_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(l=>l.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,l)=>!!a[l]?.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,l)=>{const c=t[l];if(!c)return;const n=l===e;s.setAttribute("aria-selected",n?"true":"false"),s.setAttribute("aria-disabled",c.disabled?"true":"false"),c.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),d.syncRovingTabStops(a,a[r]||null,{activeAttribute:null});const i=t[e];this._syncIndicator(e),this._clearCrossRootReferences(),i&&this._scrollSelectedTabIntoView(e),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 l=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",c=getComputedStyle(this).direction==="rtl";let n=s.offsetLeft,u=s.offsetTop,o=s.offsetWidth,b=s.offsetHeight;a?(n+=2,u+=2,o=Math.max(0,o-4),b=Math.max(0,b-4)):l==="vertical"?(u+=5,b=Math.max(8,b-10),o=3,n+=c?s.offsetWidth-3-2:2):(n+=8,o=Math.max(12,o-16),b=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${n}px`),e.style.setProperty("--ui-tabs-indicator-y",`${u}px`),e.style.setProperty("--ui-tabs-indicator-w",`${o}px`),e.style.setProperty("--ui-tabs-indicator-h",`${b}px`),e.setAttribute("data-indicator-ready","true")}_clearCrossRootReferences(){this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")}_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 l=t[s],c=s===e;i.id=l?.panelId||`${this._uid}-panel-${s}`,i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",c?"0":"-1"),i.setAttribute("aria-hidden",c?"false":"true"),l&&(i.getAttribute("aria-labelledby")===l.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(f)||(i.setAttribute("aria-label",l.label),i.setAttribute(f,""))),c?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",l=!this.hasAttribute("loop")||g(this.getAttribute("loop")),c=getComputedStyle(this).direction==="rtl",n=Number(r.getAttribute("data-index"));if(!Number.isFinite(n))return;const u=o=>{const b=d.moveRovingFocusIndex(a,n,o,{wrap:l,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(i==="horizontal"&&(t.key==="ArrowRight"&&!c||t.key==="ArrowLeft"&&c)||i==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),u(1);return}if(i==="horizontal"&&(t.key==="ArrowLeft"&&!c||t.key==="ArrowRight"&&c)||i==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),u(-1);return}if(t.key==="Home"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"first",b=>b.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}if(t.key==="End"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"last",b=>b.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,n,!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=(this.getAttribute("aria-label")||"").trim(),s=(this.getAttribute("aria-labelledby")||"").trim(),l=(i?` aria-label="${p(i)}"`:"")+(s?` aria-labelledby="${p(s)}"`:""),c=t.map(n=>{const u=n.index===e,o=n.icon?`<span class="tab-icon" aria-hidden="true">${p(n.icon)}</span>`:"";return`
           <button
             type="button"
             class="tab"
@@ -574,7 +579,7 @@
       <section class="shell" part="shell">
         <div class="nav" role="tablist" aria-orientation="${a}"${l} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${b}
+          ${c}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>

package/dist/tabs.esm.js

@@ -8,7 +8,9 @@ const k = `
     --ui-tabs-text: var(--ui-color-text, #0f172a);
     --ui-tabs-muted: var(--ui-color-muted, #526175);
     --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    /* The accent as text: readable on the surface, unlike the accent fill itself (light amber, for one). */
+    --ui-tabs-accent-text: var(--ui-color-accent-text, var(--ui-tabs-accent));
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-tabs-accent) 16%, transparent);
     --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-tabs-accent) 32%, transparent);
@@ -97,7 +99,7 @@ const k = `
 
   .tab:hover {
     background: color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    color: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .tab[aria-selected="true"] {
@@ -318,7 +320,7 @@ const k = `
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
     --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 94%, transparent);
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
+    --ui-tabs-active-text: var(--ui-tabs-accent-text);
     --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
@@ -328,7 +330,7 @@ const k = `
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
+    background: var(--ui-color-surface, #ffffff);
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -506,14 +508,17 @@ const k = `
 
   :host([tone="success"]) {
     --ui-tabs-accent: var(--ui-color-success, #15803d);
+    --ui-tabs-accent-text: var(--ui-color-success-text, var(--ui-tabs-accent));
   }
 
   :host([tone="warning"]) {
     --ui-tabs-accent: var(--ui-color-warning, #b45309);
+    --ui-tabs-accent-text: var(--ui-color-warning-text, var(--ui-tabs-accent));
   }
 
   :host([tone="danger"]) {
     --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+    --ui-tabs-accent-text: var(--ui-color-danger-text, var(--ui-tabs-accent));
   }
 
   :host([headless]) .nav,
@@ -641,8 +646,8 @@ class I extends y {
   }
   _tabsModel() {
     return this._sourceTabs().map((t, a) => {
-      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(a), e = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${a + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), l = `${this._uid}-tab-${a}`, b = `${this._uid}-panel-${a}`;
-      return { index: a, value: r, label: e, icon: i, disabled: s, tabId: l, panelId: b };
+      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(a), e = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${a + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), l = `${this._uid}-tab-${a}`, c = `${this._uid}-panel-${a}`;
+      return { index: a, value: r, label: e, icon: i, disabled: s, tabId: l, panelId: c };
     });
   }
   _resolveSelectedIndex(t) {
@@ -702,10 +707,10 @@ class I extends y {
     this._syncSelectedAttributes(t, a);
     const e = Array.from(this.root.querySelectorAll(".tab"));
     e.forEach((s, l) => {
-      const b = t[l];
-      if (!b) return;
+      const c = t[l];
+      if (!c) return;
       const n = l === a;
-      s.setAttribute("aria-selected", n ? "true" : "false"), s.setAttribute("aria-disabled", b.disabled ? "true" : "false"), b.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+      s.setAttribute("aria-selected", n ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
     }), p(e, e[r] || null, { activeAttribute: null });
     const i = t[a];
     this._syncIndicator(a), this._clearCrossRootReferences(), i && this._scrollSelectedTabIntoView(a), this._syncPanels(t, a);
@@ -723,9 +728,9 @@ class I extends y {
       a.removeAttribute("data-indicator-ready");
       return;
     }
-    const l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", b = getComputedStyle(this).direction === "rtl";
-    let n = s.offsetLeft, u = s.offsetTop, o = s.offsetWidth, c = s.offsetHeight;
-    e ? (n += 2, u += 2, o = Math.max(0, o - 4), c = Math.max(0, c - 4)) : l === "vertical" ? (u += 5, c = Math.max(8, c - 10), o = 3, n += b ? s.offsetWidth - 3 - 2 : 2) : (n += 8, o = Math.max(12, o - 16), c = 2, u += s.offsetHeight - 2 - 2), a.style.setProperty("--ui-tabs-indicator-x", `${n}px`), a.style.setProperty("--ui-tabs-indicator-y", `${u}px`), a.style.setProperty("--ui-tabs-indicator-w", `${o}px`), a.style.setProperty("--ui-tabs-indicator-h", `${c}px`), a.setAttribute("data-indicator-ready", "true");
+    const l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
+    let n = s.offsetLeft, u = s.offsetTop, o = s.offsetWidth, b = s.offsetHeight;
+    e ? (n += 2, u += 2, o = Math.max(0, o - 4), b = Math.max(0, b - 4)) : l === "vertical" ? (u += 5, b = Math.max(8, b - 10), o = 3, n += c ? s.offsetWidth - 3 - 2 : 2) : (n += 8, o = Math.max(12, o - 16), b = 2, u += s.offsetHeight - 2 - 2), a.style.setProperty("--ui-tabs-indicator-x", `${n}px`), a.style.setProperty("--ui-tabs-indicator-y", `${u}px`), a.style.setProperty("--ui-tabs-indicator-w", `${o}px`), a.style.setProperty("--ui-tabs-indicator-h", `${b}px`), a.setAttribute("data-indicator-ready", "true");
   }
   _clearCrossRootReferences() {
     this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls");
@@ -735,8 +740,8 @@ class I extends y {
     e && (r.length ? e.removeAttribute("hidden") : e.setAttribute("hidden", "")), this._isSyncing = !0;
     try {
       r.forEach((i, s) => {
-        const l = t[s], b = s === a;
-        i.id = l?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", b ? "0" : "-1"), i.setAttribute("aria-hidden", b ? "false" : "true"), l && (i.getAttribute("aria-labelledby") === l.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", l.label), i.setAttribute(g, ""))), b ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
+        const l = t[s], c = s === a;
+        i.id = l?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), l && (i.getAttribute("aria-labelledby") === l.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", l.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
@@ -784,34 +789,34 @@ class I extends y {
     if (!r) return;
     const e = this._tabsModel();
     if (!e.length) return;
-    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", l = !this.hasAttribute("loop") || x(this.getAttribute("loop")), b = getComputedStyle(this).direction === "rtl", n = Number(r.getAttribute("data-index"));
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", l = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", n = Number(r.getAttribute("data-index"));
     if (!Number.isFinite(n)) return;
     const u = (o) => {
-      const c = A(e, n, o, {
+      const b = A(e, n, o, {
         wrap: l,
         fallbackIndex: this._resolveFocusIndex(e, this._resolveSelectedIndex(e)),
         getDisabled: (v) => v.disabled
       });
-      c != null && (this._focusTab(c), s === "auto" ? this._setSelectedByIndex(e, c, !0) : this._emit("focus", e, c));
+      b != null && (this._focusTab(b), s === "auto" ? this._setSelectedByIndex(e, b, !0) : this._emit("focus", e, b));
     };
-    if (i === "horizontal" && (t.key === "ArrowRight" && !b || t.key === "ArrowLeft" && b) || i === "vertical" && t.key === "ArrowDown") {
+    if (i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown") {
       t.preventDefault(), u(1);
       return;
     }
-    if (i === "horizontal" && (t.key === "ArrowLeft" && !b || t.key === "ArrowRight" && b) || i === "vertical" && t.key === "ArrowUp") {
+    if (i === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || i === "vertical" && t.key === "ArrowUp") {
       t.preventDefault(), u(-1);
       return;
     }
     if (t.key === "Home") {
       t.preventDefault();
-      const o = f(e, "first", (c) => c.disabled);
+      const o = f(e, "first", (b) => b.disabled);
       if (o < 0) return;
       this._focusTab(o), s === "auto" ? this._setSelectedByIndex(e, o, !0) : this._emit("focus", e, o);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const o = f(e, "last", (c) => c.disabled);
+      const o = f(e, "last", (b) => b.disabled);
       if (o < 0) return;
       this._focusTab(o), s === "auto" ? this._setSelectedByIndex(e, o, !0) : this._emit("focus", e, o);
       return;
@@ -821,7 +826,7 @@ class I extends y {
   render() {
     const t = this._tabsModel(), a = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, a);
     this._syncSelectedAttributes(t, a);
-    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = (this.getAttribute("aria-label") || "").trim(), s = (this.getAttribute("aria-labelledby") || "").trim(), l = (i ? ` aria-label="${h(i)}"` : "") + (s ? ` aria-labelledby="${h(s)}"` : ""), b = t.map((n) => {
+    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = (this.getAttribute("aria-label") || "").trim(), s = (this.getAttribute("aria-labelledby") || "").trim(), l = (i ? ` aria-label="${h(i)}"` : "") + (s ? ` aria-labelledby="${h(s)}"` : ""), c = t.map((n) => {
       const u = n.index === a, o = n.icon ? `<span class="tab-icon" aria-hidden="true">${h(n.icon)}</span>` : "";
       return `
           <button
@@ -846,7 +851,7 @@ class I extends y {
       <section class="shell" part="shell">
         <div class="nav" role="tablist" aria-orientation="${e}"${l} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${b}
+          ${c}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>

package/dist/tags-input.cjs.js

@@ -8,9 +8,9 @@
     --ui-tags-input-text: var(--ui-color-text, #0f172a);
     --ui-tags-input-muted: var(--ui-color-muted, #526175);
     --ui-tags-input-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-tags-input-danger: var(--ui-color-danger, #dc2626);
+    --ui-tags-input-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     --ui-tags-input-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
-    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tags-input-chip-remove-bg: color-mix(in srgb, currentColor 8%, transparent);
     --ui-tags-input-min-height: var(--ui-control-height-2, 32px);
     --ui-tags-input-font-size: var(--ui-control-font-size-2, 14px);

package/dist/tags-input.esm.js

@@ -10,9 +10,9 @@ const k = `
     --ui-tags-input-text: var(--ui-color-text, #0f172a);
     --ui-tags-input-muted: var(--ui-color-muted, #526175);
     --ui-tags-input-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-tags-input-danger: var(--ui-color-danger, #dc2626);
+    --ui-tags-input-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     --ui-tags-input-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
-    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-tags-input-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tags-input-chip-remove-bg: color-mix(in srgb, currentColor 8%, transparent);
     --ui-tags-input-min-height: var(--ui-control-height-2, 32px);
     --ui-tags-input-font-size: var(--ui-control-font-size-2, 14px);

package/dist/textarea.cjs.js

@@ -10,8 +10,8 @@
     --ui-textarea-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
-    --ui-textarea-danger: var(--ui-color-danger, #dc2626);
-    --ui-textarea-success: var(--ui-color-success, #15803d);
+    --ui-textarea-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-textarea-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
     --ui-textarea-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
     --ui-textarea-padding-y: 6px;

package/dist/textarea.esm.js

@@ -12,8 +12,8 @@ const w = `
     --ui-textarea-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-textarea-accent: var(--ui-color-primary, #2563eb);
-    --ui-textarea-danger: var(--ui-color-danger, #dc2626);
-    --ui-textarea-success: var(--ui-color-success, #15803d);
+    --ui-textarea-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-textarea-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
     --ui-textarea-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
     --ui-textarea-padding-y: 6px;
@@ -310,17 +310,17 @@ const w = `
     }
   }
 `;
-function x(r) {
-  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function x(a) {
+  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function b(r, t) {
-  const e = Number(r);
+function b(a, t) {
+  const e = Number(a);
   return Number.isFinite(e) ? e : t;
 }
 const C = 2147483647;
-function d(r) {
-  if (!r) return null;
-  const t = Number(r);
+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 _ {
@@ -370,8 +370,8 @@ class k extends _ {
   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();
+      const r = i || "";
+      this._textarea.value !== r && (this._textarea.value = r), this._syncDynamicUi(), this._applyAutosize();
       return;
     }
     if ((/* @__PURE__ */ new Set([
@@ -437,8 +437,8 @@ 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), a = 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 = a, 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 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"]'));
@@ -457,7 +457,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, a = 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 + a + l + o + h;
+      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;
     }
@@ -492,11 +492,11 @@ 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") || "", a = !!(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") || "", 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>
       <div class="shell" part="shell">
-        <div class="meta" part="meta" ${a ? "" : "hidden"}>
+        <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>
         </div>

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-DdigV4hs.js");let V=0;const I=`
+"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=`
   :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);
@@ -7,7 +7,7 @@
     --ui-time-field-text: var(--ui-color-text, #0f172a);
     --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    --ui-time-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;

package/dist/time-field.esm.js

@@ -1,6 +1,6 @@
 import { E as B } from "./ElementBase-BeZT54Hj.mjs";
 import { s as T, a as I } from "./control-name-Bpj7F34X.mjs";
-import { q as k, u as A, v as q } from "./date-time-utils-B4hAkt36.mjs";
+import { q as k, u as A, v as q } from "./date-time-utils-zAx4ghvC.mjs";
 let U = 0;
 const z = `
   :host {
@@ -11,7 +11,7 @@ const z = `
     --ui-time-field-text: var(--ui-color-text, #0f172a);
     --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    --ui-time-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -205,8 +205,8 @@ const p = class p extends B {
   _normalizeTimeValue(e) {
     const i = k(e || "");
     if (!i) return null;
-    const t = A(i, this._showSeconds()), s = this.getAttribute("min"), r = this.getAttribute("max");
-    return q(t, s, r);
+    const t = A(i, this._showSeconds()), r = this.getAttribute("min"), s = this.getAttribute("max");
+    return q(t, r, s);
   }
   _partsOrFallback() {
     return f(this._value, this._showSeconds()) || f(this.getAttribute("min"), this._showSeconds()) || { hours: 9, minutes: 0, seconds: 0 };
@@ -219,8 +219,8 @@ const p = class p extends B {
     this._activeSegment = e, this._syncUi(), this._segmentButtons.get(e)?.focus();
   }
   _moveSegmentFocus(e) {
-    const i = this._order(), t = i.indexOf(this._activeSegment), s = i[(t + e + i.length) % i.length];
-    this._focusSegment(s);
+    const i = this._order(), t = i.indexOf(this._activeSegment), r = i[(t + e + i.length) % i.length];
+    this._focusSegment(r);
   }
   _setBuffer(e, i) {
     this._bufferBySegment[e] = i, this._bufferTimer != null && window.clearTimeout(this._bufferTimer), this._bufferTimer = window.setTimeout(() => {
@@ -237,10 +237,10 @@ const p = class p extends B {
       this._syncFormValue(), this._syncUi();
       return;
     }
-    const s = this._value;
+    const r = this._value;
     this._value = t, t ? this.setAttribute("value", t) : this.removeAttribute("value"), this._syncFormValue(), this._syncUi(), this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { value: t, previousValue: s, source: i },
+        detail: { value: t, previousValue: r, source: i },
         bubbles: !0,
         composed: !0
       })
@@ -268,16 +268,16 @@ const p = class p extends B {
   _applyNumericInput(e, i) {
     const t = `${this._bufferBySegment[e]}${i}`.slice(-2);
     if (this._setBuffer(e, t), t.length < 2) return;
-    const s = this._partsOrFallback(), r = Number(t);
-    if (Number.isFinite(r)) {
+    const r = this._partsOrFallback(), s = Number(t);
+    if (Number.isFinite(s)) {
       if (e === "hour")
         if (this._is12h()) {
-          const { meridiem: a } = _(s), h = Math.min(Math.max(r, 1), 12);
-          s.hours = E(h, a);
+          const { meridiem: a } = _(r), h = Math.min(Math.max(s, 1), 12);
+          r.hours = E(h, a);
         } else
-          s.hours = Math.min(Math.max(r, 0), 23);
-      else e === "minute" ? s.minutes = Math.min(Math.max(r, 0), 59) : s.seconds = Math.min(Math.max(r, 0), 59);
-      this._applyParts(s, "keyboard"), this._moveSegmentFocus(1);
+          r.hours = Math.min(Math.max(s, 0), 23);
+      else e === "minute" ? r.minutes = Math.min(Math.max(s, 0), 59) : r.seconds = Math.min(Math.max(s, 0), 59);
+      this._applyParts(r, "keyboard"), this._moveSegmentFocus(1);
     }
   }
   _onSegmentClick(e) {
@@ -306,8 +306,8 @@ const p = class p extends B {
       }
       if (i === "meridiem" && /^[ap]$/i.test(e.key)) {
         e.preventDefault();
-        const t = this._partsOrFallback(), s = e.key.toLowerCase() === "a" ? "AM" : "PM", r = _(t).hour;
-        t.hours = E(r, s), this._applyParts(t, "keyboard");
+        const t = this._partsOrFallback(), r = e.key.toLowerCase() === "a" ? "AM" : "PM", s = _(t).hour;
+        t.hours = E(s, r), this._applyParts(t, "keyboard");
         return;
       }
       /^\d$/.test(e.key) && i !== "meridiem" && (e.preventDefault(), this._applyNumericInput(i, e.key));
@@ -316,9 +316,9 @@ const p = class p extends B {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), r = this.getAttribute("name");
-      s && typeof s.registerField == "function" && r && (this._formUnregister = s.registerField(r, {
-        name: r,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      r && typeof r.registerField == "function" && s && (this._formUnregister = r.registerField(s, {
+        name: s,
         getValue: () => this.value,
         setValue: (a) => this._setValue(a ? String(a) : null, "form"),
         validate: async () => this.hasAttribute("required") && !this.value ? { valid: !1, message: "Time is required" } : { valid: !0 },
@@ -337,10 +337,10 @@ const p = class p extends B {
   }
   _syncUi() {
     if (!this._segmentsEl || !this._shellEl || !this._errorEl) return;
-    const e = this.root.activeElement, i = !!e && this._segmentsEl.contains(e), t = (this.getAttribute("label") || "").trim(), s = (this.getAttribute("description") || "").trim(), r = (this.getAttribute("data-error") || "").trim(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, v = `${this._uid}-description`, y = `${this._uid}-error`;
-    a.hidden = !t && !s, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !s, c.id = s ? v : "", c.textContent = s, this._errorEl.hidden = !r, this._errorEl.id = r ? y : "", this._errorEl.textContent = r, this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("role", "group"), T(this._shellEl, this, t ? g : null);
-    const x = [s ? v : null, r ? y : null].filter(Boolean).join(" ");
-    I(this._shellEl, this, this._uid, x ? x.split(" ") : []), this._shellEl.setAttribute("aria-invalid", r ? "true" : "false"), this._shellEl.setAttribute("aria-required", this.hasAttribute("required") ? "true" : "false"), this._shellEl.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false"), this._shellEl.removeAttribute("aria-readonly");
+    const e = this.root.activeElement, i = !!e && this._segmentsEl.contains(e), t = (this.getAttribute("label") || "").trim(), r = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, v = `${this._uid}-description`, y = `${this._uid}-error`;
+    a.hidden = !t && !r, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !r, c.id = r ? v : "", c.textContent = r, this._errorEl.hidden = !s, this._errorEl.id = s ? y : "", this._errorEl.textContent = s, this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("role", "group"), T(this._shellEl, this, t ? g : null);
+    const x = [r ? v : null, s ? y : null].filter(Boolean).join(" ");
+    I(this._shellEl, this, this._uid, x ? x.split(" ") : []), this._shellEl.setAttribute("aria-invalid", s ? "true" : "false"), this._shellEl.setAttribute("aria-required", this.hasAttribute("required") ? "true" : "false"), this._shellEl.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false"), this._shellEl.removeAttribute("aria-readonly");
     const u = f(this._value, this._showSeconds()), C = this._order(), m = [];
     this._segmentButtons.clear();
     const S = u ? _(u) : null;

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-o273O28D.js"),a=require("./date-time-utils-DdigV4hs.js"),w=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-DxbvhLJs.js"),E=require("./dismissable-layer-DNfrKA20.js"),k=require("./calendar-CzpWDxLc.js"),a=require("./date-time-utils-C-4eHTyy.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>
@@ -18,7 +18,7 @@
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dp-accent: var(--ui-color-primary, #2563eb);
     --ui-dp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
-    --ui-dp-field-error: var(--ui-color-danger, #dc2626);
+    --ui-dp-field-error: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     --ui-dp-z: 1600;
     color-scheme: light dark;
     display: inline-grid;