@editora/ui-core 0.2.1 → 0.3.0

package/dist/tabs.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-CbUsP3D6.js"),_=require("./navigate-ChJVIIuS.js"),d=require("./roving-focus-group-BdJ_4Njm.js"),w=`
   :host {
     --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
@@ -497,10 +497,10 @@
     --ui-tabs-muted: #94a3b8;
     --ui-tabs-accent: var(--ui-tabs-active-bg, #93c5fd);
     --ui-tabs-active-text: #dbeafe;
-    --ui-tabs-focus: #93c5fd;
-    --ui-tabs-indicator-bg: color-mix(in srgb, #93c5fd 24%, transparent);
-    --ui-tabs-indicator-border: color-mix(in srgb, #93c5fd 46%, transparent);
-    --ui-tabs-indicator-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
+    --ui-tabs-focus: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 24%, transparent);
+    --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 46%, transparent);
+    --ui-tabs-indicator-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 24%, transparent);
     --ui-tabs-shadow: 0 16px 34px rgba(2, 6, 23, 0.42), 0 32px 54px rgba(2, 6, 23, 0.4);
   }
 
@@ -558,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}`,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`
+`,p="data-ui-tabs-auto-label";function f(h){return String(h).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(h){if(h==null)return!1;const t=String(h).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const A=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._renderedSignature=null,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(()=>{if(!this._isSyncing){if(this._renderedSignature!=null&&this._modelSignature(this._tabsModel())===this._renderedSignature){this._syncSelectionUi();return}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","data-href"]}),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}A.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.children).filter(t=>t.getAttribute("slot")==="tab")}_sourcePanels(){return Array.from(this.children).filter(t=>t.getAttribute("slot")==="panel")}_modelSignature(t){return JSON.stringify(t.map(e=>[e.value,e.label,e.icon,e.disabled]))}_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")),o=`${this._uid}-tab-${e}`,c=`${this._uid}-panel-${e}`,b=t.getAttribute("data-href")||t.getAttribute("href")||"";return{index:e,value:r,label:a,icon:i,disabled:s,tabId:o,panelId:c,href: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(o=>o.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,o)=>!!a[o]?.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),a.href&&_.navigateTo(this,{href:a.href,index:e,value:a.value,label:a.label}))}_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,o)=>{const c=t[o];if(!c)return;const b=o===e;s.setAttribute("aria-selected",b?"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 o=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",c=getComputedStyle(this).direction==="rtl";let b=s.offsetLeft,u=s.offsetTop,n=s.offsetWidth,l=s.offsetHeight;a?(b+=2,u+=2,n=Math.max(0,n-4),l=Math.max(0,l-4)):o==="vertical"?(u+=5,l=Math.max(8,l-10),n=3,b+=c?s.offsetWidth-3-2:2):(b+=8,n=Math.max(12,n-16),l=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${b}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 o=t[s],c=s===e;(!i.id||i.id.startsWith(`${this._uid}-panel-`))&&(i.id=o?.panelId||`${this._uid}-panel-${s}`),i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",c?"0":"-1"),i.setAttribute("aria-hidden",c?"false":"true"),o&&(i.getAttribute("aria-labelledby")===o.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(p)||(i.setAttribute("aria-label",o.label),i.setAttribute(p,""))),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",o=!this.hasAttribute("loop")||g(this.getAttribute("loop")),c=getComputedStyle(this).direction==="rtl",b=Number(r.getAttribute("data-index"));if(!Number.isFinite(b))return;const u=n=>{const l=d.moveRovingFocusIndex(a,b,n,{wrap:o,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"&&!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 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,b,!0))}render(){const t=this._tabsModel(),r=!!this.root.activeElement?.classList?.contains("tab");this._renderedSignature=this._modelSignature(t);const a=this._resolveSelectedIndex(t),i=this._resolveFocusIndex(t,a);this._syncSelectedAttributes(t,a);const s=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",o=(this.getAttribute("aria-label")||"").trim(),c=(this.getAttribute("aria-labelledby")||"").trim(),b=(o?` aria-label="${f(o)}"`:"")+(c?` aria-labelledby="${f(c)}"`:""),u=t.map(n=>{const l=n.index===a,v=n.icon?`<span class="tab-icon" aria-hidden="true">${f(n.icon)}</span>`:"";return`
           <button
             type="button"
             class="tab"
@@ -566,24 +566,24 @@
             id="${n.tabId}"
             role="tab"
             data-index="${n.index}"
-            aria-selected="${u?"true":"false"}"
+            aria-selected="${l?"true":"false"}"
             aria-disabled="${n.disabled?"true":"false"}"
-            tabindex="${n.index===r&&!n.disabled?"0":"-1"}"
+            tabindex="${n.index===i&&!n.disabled?"0":"-1"}"
             ${n.disabled?"disabled":""}
           >
-            ${o}
-            <span class="tab-label">${p(n.label)}</span>
+            ${v}
+            <span class="tab-label">${f(n.label)}</span>
           </button>
         `}).join("");this.setContent(`
-      <style>${_}</style>
+      <style>${w}</style>
       <section class="shell" part="shell">
-        <div class="nav" role="tablist" aria-orientation="${a}"${l} part="nav">
+        <div class="nav" role="tablist" aria-orientation="${s}"${b} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${c}
+          ${u}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>
         </div>
       </section>
       <slot class="source-tabs" name="tab"></slot>
-    `),this._clearCrossRootReferences(),this._syncIndicator(e),this._syncPanels(t,e)}}typeof customElements<"u"&&!customElements.get("ui-tabs")&&customElements.define("ui-tabs",x);exports.UITabs=x;
+    `),this._clearCrossRootReferences(),this._syncIndicator(a),this._syncPanels(t,a),r&&this.root.querySelector(`.tab[data-index="${i}"]`)?.focus({preventScroll:!0})}}typeof customElements<"u"&&!customElements.get("ui-tabs")&&customElements.define("ui-tabs",x);exports.UITabs=x;

package/dist/tabs.esm.js

@@ -1,6 +1,7 @@
-import { E as y } from "./ElementBase-BeZT54Hj.mjs";
-import { s as p, r as _, f as w, g as f, m as A } from "./roving-focus-group-Dbm1Jko_.mjs";
-const k = `
+import { E as y } from "./ElementBase-D5QsC5Vw.mjs";
+import { n as _ } from "./navigate-CXebafwF.mjs";
+import { s as f, r as w, f as A, g as p, m as k } from "./roving-focus-group-Dbm1Jko_.mjs";
+const S = `
   :host {
     --ui-tabs-nav-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
@@ -499,10 +500,10 @@ const k = `
     --ui-tabs-muted: #94a3b8;
     --ui-tabs-accent: var(--ui-tabs-active-bg, #93c5fd);
     --ui-tabs-active-text: #dbeafe;
-    --ui-tabs-focus: #93c5fd;
-    --ui-tabs-indicator-bg: color-mix(in srgb, #93c5fd 24%, transparent);
-    --ui-tabs-indicator-border: color-mix(in srgb, #93c5fd 46%, transparent);
-    --ui-tabs-indicator-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
+    --ui-tabs-focus: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 24%, transparent);
+    --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 46%, transparent);
+    --ui-tabs-indicator-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 24%, transparent);
     --ui-tabs-shadow: 0 16px 34px rgba(2, 6, 23, 0.42), 0 32px 54px rgba(2, 6, 23, 0.4);
   }
 
@@ -561,15 +562,15 @@ const k = `
     }
   }
 `, g = "data-ui-tabs-auto-label";
-function h(d) {
-  return String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function h(v) {
+  return String(v).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function x(d) {
-  if (d == null) return !1;
-  const t = String(d).toLowerCase();
+function x(v) {
+  if (v == null) return !1;
+  const t = String(v).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-const S = /* @__PURE__ */ new Set([
+const I = /* @__PURE__ */ new Set([
   "aria-label",
   "aria-labelledby",
   "orientation",
@@ -584,9 +585,9 @@ const S = /* @__PURE__ */ new Set([
   "elevation",
   "bare"
 ]);
-class I extends y {
+class z 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);
+    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._renderedSignature = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -610,90 +611,101 @@ class I extends y {
   }
   connectedCallback() {
     super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(() => {
-      this._isSyncing || this.requestRender();
+      if (!this._isSyncing) {
+        if (this._renderedSignature != null && this._modelSignature(this._tabsModel()) === this._renderedSignature) {
+          this._syncSelectionUi();
+          return;
+        }
+        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"]
+      attributeFilter: ["slot", "data-label", "data-value", "data-icon", "data-disabled", "disabled", "data-active", "data-href"]
     }), 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, a, r) {
-    if (a !== r) {
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
       if (t === "selected" || t === "value") {
         this._isSyncingSelectionAttributes || this._syncSelectionUi();
         return;
       }
-      S.has(t) && this.isConnected && this.requestRender();
+      I.has(t) && this.isConnected && this.requestRender();
     }
   }
   get selected() {
     return this.getAttribute("selected") || "0";
   }
   set selected(t) {
-    const a = String(t);
-    a ? this.setAttribute("selected", a) : this.removeAttribute("selected");
+    const e = String(t);
+    e ? this.setAttribute("selected", e) : this.removeAttribute("selected");
   }
+  // Direct children only: a slot only takes the host's own children, and a descendant query also
+  // picked up the tabs and panels of a ui-tabs nested inside one of this element's panels.
   _sourceTabs() {
-    return Array.from(this.querySelectorAll('[slot="tab"]'));
+    return Array.from(this.children).filter((t) => t.getAttribute("slot") === "tab");
   }
   _sourcePanels() {
-    return Array.from(this.querySelectorAll('[slot="panel"]'));
+    return Array.from(this.children).filter((t) => t.getAttribute("slot") === "panel");
+  }
+  _modelSignature(t) {
+    return JSON.stringify(t.map((e) => [e.value, e.label, e.icon, e.disabled]));
   }
   _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}`, c = `${this._uid}-panel-${a}`;
-      return { index: a, value: r, label: e, icon: i, disabled: s, tabId: l, panelId: c };
+    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") || x(t.getAttribute("data-disabled")), o = `${this._uid}-tab-${e}`, c = `${this._uid}-panel-${e}`, b = t.getAttribute("data-href") || t.getAttribute("href") || "";
+      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: o, panelId: c, href: b };
     });
   }
   _resolveSelectedIndex(t) {
     if (!t.length) return -1;
-    const a = this.getAttribute("selected"), r = this.getAttribute("value"), e = this._sourceTabs();
+    const e = this.getAttribute("selected"), r = this.getAttribute("value"), a = this._sourceTabs();
     let i = -1;
-    if (a != null && a !== "") {
-      const s = Number(a);
-      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((l) => l.value === a);
+    if (e != null && e !== "") {
+      const s = Number(e);
+      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((o) => o.value === e);
     }
-    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, l) => !!e[l]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
+    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, o) => !!a[o]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
   }
-  _syncSelectedAttributes(t, a) {
-    const r = t[a];
+  _syncSelectedAttributes(t, e) {
+    const r = t[e];
     this._isSyncingSelectionAttributes = !0;
     try {
       if (!r) {
         this.removeAttribute("selected"), this.removeAttribute("value");
         return;
       }
-      this.getAttribute("selected") !== String(a) && this.setAttribute("selected", String(a)), this.getAttribute("value") !== r.value && this.setAttribute("value", r.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, a, r) {
-    const e = a[r];
-    if (!e) return;
+  _emit(t, e, r) {
+    const a = e[r];
+    if (!a) return;
     const i = {
       selected: r,
       index: r,
-      value: e.value,
-      label: e.label,
-      tabId: e.tabId,
-      panelId: e.panelId
+      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, a, r) {
-    const e = t[a];
-    if (!e || e.disabled) return;
-    if (this._resolveSelectedIndex(t) === a) {
-      this._focusTab(a);
+  _setSelectedByIndex(t, e, r) {
+    const a = t[e];
+    if (!a || a.disabled) return;
+    if (this._resolveSelectedIndex(t) === e) {
+      this._focusTab(e);
       return;
     }
-    this._focusIndex = a, this.setAttribute("selected", String(a)), this.setAttribute("value", e.value), r && (this._emit("change", t, a), this._emit("select", t, a));
+    this._focusIndex = e, this.setAttribute("selected", String(e)), this.setAttribute("value", a.value), r && (this._emit("change", t, e), this._emit("select", t, e), a.href && _(this, { href: a.href, index: e, value: a.value, label: a.label }));
   }
   _syncSelectionUi() {
     if (!this.isConnected) return;
@@ -703,58 +715,58 @@ class I extends y {
     }
     const t = this._tabsModel();
     if (!t.length) return;
-    const a = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, a);
-    this._syncSelectedAttributes(t, a);
-    const e = Array.from(this.root.querySelectorAll(".tab"));
-    e.forEach((s, l) => {
-      const c = t[l];
+    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, o) => {
+      const c = t[o];
       if (!c) return;
-      const n = l === a;
-      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);
+      const b = o === e;
+      s.setAttribute("aria-selected", b ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+    }), f(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 a = this.root.querySelector(".nav");
-    if (!a) return;
-    const r = this.getAttribute("variant") || "default", e = r === "indicator";
-    if (!e && !(r === "indicator-line")) {
-      a.removeAttribute("data-indicator-ready"), a.style.removeProperty("--ui-tabs-indicator-x"), a.style.removeProperty("--ui-tabs-indicator-y"), a.style.removeProperty("--ui-tabs-indicator-w"), a.style.removeProperty("--ui-tabs-indicator-h");
+    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) {
-      a.removeAttribute("data-indicator-ready");
+      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;
-    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");
+    const o = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
+    let b = s.offsetLeft, u = s.offsetTop, n = s.offsetWidth, l = s.offsetHeight;
+    a ? (b += 2, u += 2, n = Math.max(0, n - 4), l = Math.max(0, l - 4)) : o === "vertical" ? (u += 5, l = Math.max(8, l - 10), n = 3, b += c ? s.offsetWidth - 3 - 2 : 2) : (b += 8, n = Math.max(12, n - 16), l = 2, u += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${b}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, a) {
-    const r = this._sourcePanels(), e = this.root.querySelector(".panel-wrap");
-    e && (r.length ? e.removeAttribute("hidden") : e.setAttribute("hidden", "")), this._isSyncing = !0;
+  _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 === 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", "");
+        const o = t[s], c = s === e;
+        (!i.id || i.id.startsWith(`${this._uid}-panel-`)) && (i.id = o?.panelId || `${this._uid}-panel-${s}`), i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), o && (i.getAttribute("aria-labelledby") === o.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", o.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
     }
   }
   _enabledIndices(t) {
-    return t.filter((a) => !a.disabled).map((a) => a.index);
+    return t.filter((e) => !e.disabled).map((e) => e.index);
   }
-  _resolveFocusIndex(t, a) {
-    const r = _(t, {
+  _resolveFocusIndex(t, e) {
+    const r = w(t, {
       activeIndex: this._focusIndex,
-      selectedIndex: a,
-      getDisabled: (e) => e.disabled
+      selectedIndex: e,
+      getDisabled: (a) => a.disabled
     });
     return this._focusIndex = r, r;
   }
@@ -763,41 +775,41 @@ class I extends y {
   }
   _focusTab(t) {
     this._focusIndex = t;
-    const a = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
-    p(r, a, { activeAttribute: null }), w(a);
+    const e = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
+    f(r, e, { activeAttribute: null }), A(e);
   }
   _scrollSelectedTabIntoView(t) {
-    const a = this.root.querySelector(".nav"), r = this.root.querySelector(`.tab[data-index="${t}"]`);
-    if (!a || !r) return;
-    const e = this.getAttribute("orientation") !== "vertical", i = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    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: e ? "center" : "nearest"
+      inline: a ? "center" : "nearest"
     });
   }
   _onClick(t) {
     const r = t.target?.closest(".tab");
     if (!r || r.disabled) return;
-    const e = Number(r.getAttribute("data-index"));
-    if (!Number.isFinite(e)) return;
+    const a = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(a)) return;
     const i = this._tabsModel();
-    this._setSelectedByIndex(i, e, !0);
+    this._setSelectedByIndex(i, a, !0);
   }
   _onKeyDown(t) {
     const r = t.target?.closest(".tab");
     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")), c = getComputedStyle(this).direction === "rtl", n = Number(r.getAttribute("data-index"));
-    if (!Number.isFinite(n)) return;
-    const u = (o) => {
-      const b = A(e, n, o, {
-        wrap: l,
-        fallbackIndex: this._resolveFocusIndex(e, this._resolveSelectedIndex(e)),
-        getDisabled: (v) => v.disabled
+    const a = this._tabsModel();
+    if (!a.length) return;
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", o = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", b = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(b)) return;
+    const u = (n) => {
+      const l = k(a, b, n, {
+        wrap: o,
+        fallbackIndex: this._resolveFocusIndex(a, this._resolveSelectedIndex(a)),
+        getDisabled: (d) => d.disabled
       });
-      b != null && (this._focusTab(b), s === "auto" ? this._setSelectedByIndex(e, b, !0) : this._emit("focus", e, b));
+      l != null && (this._focusTab(l), s === "auto" ? this._setSelectedByIndex(a, l, !0) : this._emit("focus", a, l));
     };
     if (i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown") {
       t.preventDefault(), u(1);
@@ -809,25 +821,27 @@ class I extends y {
     }
     if (t.key === "Home") {
       t.preventDefault();
-      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);
+      const n = p(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 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);
+      const n = p(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(e, n, !0));
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, b, !0));
   }
   render() {
-    const t = this._tabsModel(), a = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, a);
+    const t = this._tabsModel(), r = !!this.root.activeElement?.classList?.contains("tab");
+    this._renderedSignature = this._modelSignature(t);
+    const a = this._resolveSelectedIndex(t), i = 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)}"` : ""), c = t.map((n) => {
-      const u = n.index === a, o = n.icon ? `<span class="tab-icon" aria-hidden="true">${h(n.icon)}</span>` : "";
+    const s = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", o = (this.getAttribute("aria-label") || "").trim(), c = (this.getAttribute("aria-labelledby") || "").trim(), b = (o ? ` aria-label="${h(o)}"` : "") + (c ? ` aria-labelledby="${h(c)}"` : ""), u = t.map((n) => {
+      const l = n.index === a, d = n.icon ? `<span class="tab-icon" aria-hidden="true">${h(n.icon)}</span>` : "";
       return `
           <button
             type="button"
@@ -836,32 +850,32 @@ class I extends y {
             id="${n.tabId}"
             role="tab"
             data-index="${n.index}"
-            aria-selected="${u ? "true" : "false"}"
+            aria-selected="${l ? "true" : "false"}"
             aria-disabled="${n.disabled ? "true" : "false"}"
-            tabindex="${n.index === r && !n.disabled ? "0" : "-1"}"
+            tabindex="${n.index === i && !n.disabled ? "0" : "-1"}"
             ${n.disabled ? "disabled" : ""}
           >
-            ${o}
+            ${d}
             <span class="tab-label">${h(n.label)}</span>
           </button>
         `;
     }).join("");
     this.setContent(`
-      <style>${k}</style>
+      <style>${S}</style>
       <section class="shell" part="shell">
-        <div class="nav" role="tablist" aria-orientation="${e}"${l} part="nav">
+        <div class="nav" role="tablist" aria-orientation="${s}"${b} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${c}
+          ${u}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>
         </div>
       </section>
       <slot class="source-tabs" name="tab"></slot>
-    `), this._clearCrossRootReferences(), this._syncIndicator(a), this._syncPanels(t, a);
+    `), this._clearCrossRootReferences(), this._syncIndicator(a), this._syncPanels(t, a), r && this.root.querySelector(`.tab[data-index="${i}"]`)?.focus({ preventScroll: !0 });
   }
 }
-typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", I);
+typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", z);
 export {
-  I as UITabs
+  z as UITabs
 };

package/dist/tags-input.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("./ElementBase-DxbvhLJs.js"),m=require("./control-name-BmoI1m3a.js"),k=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("./ElementBase-CbUsP3D6.js"),m=require("./control-name-BmoI1m3a.js"),k=`
   :host {
     --ui-tags-input-padding: 10px 12px;
     --ui-tags-input-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));

package/dist/tags-input.esm.js

@@ -1,4 +1,4 @@
-import { E } from "./ElementBase-BeZT54Hj.mjs";
+import { E } from "./ElementBase-D5QsC5Vw.mjs";
 import { s as A, a as S } from "./control-name-Bpj7F34X.mjs";
 const k = `
   :host {