@editora/ui-core 0.1.20 → 0.1.22

package/dist/tabs.cjs.js

@@ -1,10 +1,10 @@
-"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);
     --ui-tabs-border: var(--ui-color-border, #cbd5e1);
     --ui-tabs-text: var(--ui-color-text, #0f172a);
-    --ui-tabs-muted: var(--ui-color-muted, #64748b);
+    --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%);
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
@@ -298,18 +298,18 @@
     --ui-tabs-nav-bg: var(--ui-tabs-accent);
     --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, #ffffff) 80%, transparent);
+    --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-focus: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 72%, var(--ui-tabs-accent));
+    --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
   :host([variant="solid"]) .tab:hover {
-    background: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 14%, transparent);
-    color: var(--ui-color-primary-foreground, #ffffff);
+    background: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 14%, transparent);
+    color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, #ffffff);
+    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -433,11 +433,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-tabs-accent: var(--ui-color-success, #16a34a);
+    --ui-tabs-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-tabs-accent: var(--ui-color-warning, #d97706);
+    --ui-tabs-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -483,33 +483,32 @@
       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`
+`,f="data-ui-tabs-auto-label";function p(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(["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")),c=`${this._uid}-tab-${e}`,b=`${this._uid}-panel-${e}`;return{index:e,value:r,label:a,icon:i,disabled:s,tabId:c,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(c=>c.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,c)=>!!a[c]?.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,c)=>{const b=t[c];if(!b)return;const o=c===e;s.setAttribute("aria-selected",o?"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 c=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",b=getComputedStyle(this).direction==="rtl";let o=s.offsetLeft,u=s.offsetTop,n=s.offsetWidth,l=s.offsetHeight;a?(o+=2,u+=2,n=Math.max(0,n-4),l=Math.max(0,l-4)):c==="vertical"?(u+=5,l=Math.max(8,l-10),n=3,o+=b?s.offsetWidth-3-2:2):(o+=8,n=Math.max(12,n-16),l=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${o}px`),e.style.setProperty("--ui-tabs-indicator-y",`${u}px`),e.style.setProperty("--ui-tabs-indicator-w",`${n}px`),e.style.setProperty("--ui-tabs-indicator-h",`${l}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 c=t[s],b=s===e;i.id=c?.panelId||`${this._uid}-panel-${s}`,i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",b?"0":"-1"),i.setAttribute("aria-hidden",b?"false":"true"),c&&(i.getAttribute("aria-labelledby")===c.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(f)||(i.setAttribute("aria-label",c.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",c=!this.hasAttribute("loop")||g(this.getAttribute("loop")),b=getComputedStyle(this).direction==="rtl",o=Number(r.getAttribute("data-index"));if(!Number.isFinite(o))return;const u=n=>{const l=d.moveRovingFocusIndex(a,o,n,{wrap:c,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:v=>v.disabled});l!=null&&(this._focusTab(l),s==="auto"?this._setSelectedByIndex(a,l,!0):this._emit("focus",a,l))};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 n=d.getRovingFocusBoundaryIndex(a,"first",l=>l.disabled);if(n<0)return;this._focusTab(n),s==="auto"?this._setSelectedByIndex(a,n,!0):this._emit("focus",a,n);return}if(t.key==="End"){t.preventDefault();const n=d.getRovingFocusBoundaryIndex(a,"last",l=>l.disabled);if(n<0)return;this._focusTab(n),s==="auto"?this._setSelectedByIndex(a,n,!0):this._emit("focus",a,n);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,o,!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(),c=(i?` aria-label="${p(i)}"`:"")+(s?` aria-labelledby="${p(s)}"`:""),b=t.map(o=>{const u=o.index===e,n=o.icon?`<span class="tab-icon" aria-hidden="true">${p(o.icon)}</span>`:"";return`
           <button
             type="button"
             class="tab"
             part="tab"
-            id="${n.tabId}"
+            id="${o.tabId}"
             role="tab"
-            data-index="${n.index}"
-            aria-selected="${o?"true":"false"}"
-            aria-controls="${n.panelId}"
-            aria-disabled="${n.disabled?"true":"false"}"
-            tabindex="${n.index===i&&!n.disabled?"0":"-1"}"
-            ${n.disabled?"disabled":""}
+            data-index="${o.index}"
+            aria-selected="${u?"true":"false"}"
+            aria-disabled="${o.disabled?"true":"false"}"
+            tabindex="${o.index===r&&!o.disabled?"0":"-1"}"
+            ${o.disabled?"disabled":""}
           >
-            ${l}
-            <span class="tab-label">${p(n.label)}</span>
+            ${n}
+            <span class="tab-label">${p(o.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">
+        <div class="nav" role="tablist" aria-orientation="${a}"${c} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${r}
+          ${b}
         </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;
+    `),this._clearCrossRootReferences(),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,12 +1,12 @@
-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 p, r as _, f as w, g as f, 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);
     --ui-tabs-border: var(--ui-color-border, #cbd5e1);
     --ui-tabs-text: var(--ui-color-text, #0f172a);
-    --ui-tabs-muted: var(--ui-color-muted, #64748b);
+    --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%);
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
@@ -300,18 +300,18 @@ const A = `
     --ui-tabs-nav-bg: var(--ui-tabs-accent);
     --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, #ffffff) 80%, transparent);
+    --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-focus: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 72%, var(--ui-tabs-accent));
+    --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
   :host([variant="solid"]) .tab:hover {
-    background: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 14%, transparent);
-    color: var(--ui-color-primary-foreground, #ffffff);
+    background: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 14%, transparent);
+    color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, #ffffff);
+    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -435,11 +435,11 @@ const A = `
   }
 
   :host([tone="success"]) {
-    --ui-tabs-accent: var(--ui-color-success, #16a34a);
+    --ui-tabs-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-tabs-accent: var(--ui-color-warning, #d97706);
+    --ui-tabs-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -485,16 +485,18 @@ const A = `
       border-color: Highlight;
     }
   }
-`;
-function f(u) {
-  return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+`, g = "data-ui-tabs-auto-label";
+function v(d) {
+  return String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function g(u) {
-  if (u == null) return !1;
-  const t = String(u).toLowerCase();
+function x(d) {
+  if (d == null) return !1;
+  const t = String(d).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-const k = /* @__PURE__ */ new Set([
+const S = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
   "orientation",
   "activation",
   "headless",
@@ -507,7 +509,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);
   }
@@ -526,7 +528,9 @@ class S extends m {
       "shape",
       "elevation",
       "loop",
-      "bare"
+      "bare",
+      "aria-label",
+      "aria-labelledby"
     ];
   }
   connectedCallback() {
@@ -543,13 +547,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 +571,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")), b = `${this._uid}-tab-${e}`, c = `${this._uid}-panel-${e}`;
+      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: b, panelId: c };
     });
   }
   _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((b) => b.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, b) => !!a[b]?.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,23 +628,23 @@ 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) => {
-      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");
-    }), 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);
+    a.forEach((s, b) => {
+      const c = t[b];
+      if (!c) return;
+      const o = b === e;
+      s.setAttribute("aria-selected", o ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+    }), p(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 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;
     }
@@ -649,17 +653,20 @@ class S extends m {
       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");
+    const b = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
+    let o = s.offsetLeft, u = s.offsetTop, n = s.offsetWidth, l = s.offsetHeight;
+    a ? (o += 2, u += 2, n = Math.max(0, n - 4), l = Math.max(0, l - 4)) : b === "vertical" ? (u += 5, l = Math.max(8, l - 10), n = 3, o += c ? s.offsetWidth - 3 - 2 : 2) : (o += 8, n = Math.max(12, n - 16), l = 2, u += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${o}px`), e.style.setProperty("--ui-tabs-indicator-y", `${u}px`), e.style.setProperty("--ui-tabs-indicator-w", `${n}px`), e.style.setProperty("--ui-tabs-indicator-h", `${l}px`), e.setAttribute("data-indicator-ready", "true");
+  }
+  _clearCrossRootReferences() {
+    this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls");
   }
   _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) => {
-        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", "");
+      r.forEach((i, s) => {
+        const b = t[s], c = s === e;
+        i.id = b?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), b && (i.getAttribute("aria-labelledby") === b.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", b.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
@@ -669,120 +676,117 @@ 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"));
+    p(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"));
-    if (!Number.isFinite(l)) return;
-    const d = (c) => {
-      const b = w(a, l, c, {
-        wrap: n,
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", b = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", o = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(o)) return;
+    const u = (n) => {
+      const l = A(a, o, n, {
+        wrap: b,
         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));
+      l != null && (this._focusTab(l), s === "auto" ? this._setSelectedByIndex(a, l, !0) : this._emit("focus", a, l));
     };
-    if (r === "horizontal" && (t.key === "ArrowRight" && !o || t.key === "ArrowLeft" && o) || r === "vertical" && t.key === "ArrowDown") {
-      t.preventDefault(), d(1);
+    if (i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown") {
+      t.preventDefault(), u(1);
       return;
     }
-    if (r === "horizontal" && (t.key === "ArrowLeft" && !o || t.key === "ArrowRight" && o) || r === "vertical" && t.key === "ArrowUp") {
-      t.preventDefault(), d(-1);
+    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 c = p(a, "first", (b) => b.disabled);
-      if (c < 0) return;
-      this._focusTab(c), s === "auto" ? this._setSelectedByIndex(a, c, !0) : this._emit("focus", a, c);
+      const n = f(a, "first", (l) => l.disabled);
+      if (n < 0) return;
+      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const c = p(a, "last", (b) => b.disabled);
-      if (c < 0) return;
-      this._focusTab(c), s === "auto" ? this._setSelectedByIndex(a, c, !0) : this._emit("focus", a, c);
+      const n = f(a, "last", (l) => l.disabled);
+      if (n < 0) return;
+      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
       return;
     }
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, l, !0));
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, o, !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 = (this.getAttribute("aria-label") || "").trim(), s = (this.getAttribute("aria-labelledby") || "").trim(), b = (i ? ` aria-label="${v(i)}"` : "") + (s ? ` aria-labelledby="${v(s)}"` : ""), c = t.map((o) => {
+      const u = o.index === e, n = o.icon ? `<span class="tab-icon" aria-hidden="true">${v(o.icon)}</span>` : "";
       return `
           <button
             type="button"
             class="tab"
             part="tab"
-            id="${n.tabId}"
+            id="${o.tabId}"
             role="tab"
-            data-index="${n.index}"
-            aria-selected="${o ? "true" : "false"}"
-            aria-controls="${n.panelId}"
-            aria-disabled="${n.disabled ? "true" : "false"}"
-            tabindex="${n.index === i && !n.disabled ? "0" : "-1"}"
-            ${n.disabled ? "disabled" : ""}
+            data-index="${o.index}"
+            aria-selected="${u ? "true" : "false"}"
+            aria-disabled="${o.disabled ? "true" : "false"}"
+            tabindex="${o.index === r && !o.disabled ? "0" : "-1"}"
+            ${o.disabled ? "disabled" : ""}
           >
-            ${l}
-            <span class="tab-label">${f(n.label)}</span>
+            ${n}
+            <span class="tab-label">${v(o.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">
+        <div class="nav" role="tablist" aria-orientation="${a}"${b} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${r}
+          ${c}
         </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);
+    `), this._clearCrossRootReferences(), 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
 };