@editora/ui-core 0.1.21 → 0.1.23

package/dist/switch.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-EV6mVBUV.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-DxbvhLJs.js"),g=`
   :host {
     --ui-switch-width: 44px;
     --ui-switch-height: 24px;
@@ -6,15 +6,15 @@
     --ui-switch-radius: 999px;
     --ui-switch-gap: 12px;
     --ui-switch-track-bg: var(--ui-color-surface-alt, #e2e8f0);
-    --ui-switch-track-hover: color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #64748b));
+    --ui-switch-track-hover: color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #526175));
     --ui-switch-track-border: var(--ui-color-border, #cbd5e1);
     --ui-switch-thumb-bg: var(--ui-color-surface, #ffffff);
-    --ui-switch-thumb-color: var(--ui-color-muted, #64748b);
+    --ui-switch-thumb-color: var(--ui-color-muted, #526175);
     --ui-switch-label: var(--ui-color-text, #0f172a);
-    --ui-switch-description: var(--ui-color-muted, #64748b);
+    --ui-switch-description: var(--ui-color-muted, #526175);
     --ui-switch-accent: var(--ui-switch-checked-bg, var(--ui-color-primary, #2563eb));
     --ui-switch-accent-hover: color-mix(in srgb, var(--ui-switch-accent) 86%, #0f172a);
-    --ui-switch-accent-contrast: var(--ui-color-primary-foreground, #ffffff);
+    --ui-switch-accent-contrast: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     --ui-switch-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-switch-shadow: none;
     --ui-switch-thumb-shadow: none;
@@ -306,11 +306,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-switch-accent: var(--ui-color-success, #16a34a);
+    --ui-switch-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-switch-accent: var(--ui-color-warning, #d97706);
+    --ui-switch-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -372,23 +372,21 @@
       background: HighlightText;
     }
   }
-`,l=new Set(["label","description"]);function u(s){if(s==null)return!1;const t=String(s).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function d(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(s){for(const t of s)if(t instanceof HTMLElement&&t.matches('a,button,input,select,textarea,[contenteditable="true"],[data-ui-switch-no-toggle]'))return!0;return!1}class b extends w.ElementBase{constructor(){super(),this._control=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["checked","disabled","headless","loading","size","variant","tone","shape","elevation","label","description","name","value","required","tabindex","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("slotchange",this._onSlotChange),this._syncAria()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(l.has(t)){super.attributeChangedCallback(t,i,e);return}this._syncAria()}}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")||this.hasAttribute("loading")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}toggle(t){if(this.disabled)return;const i=typeof t=="boolean"?t:!this.checked;if(i===this.checked){this._syncAria();return}this.checked=i,this._syncAria();const e={checked:i,value:this.getAttribute("value")||"on",name:this.getAttribute("name")||"",required:u(this.getAttribute("required"))};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_syncAria(){const t=this.checked,i=this.disabled,e=this.hasAttribute("loading"),r=u(this.getAttribute("required"));this.setAttribute("role","switch"),this.setAttribute("aria-checked",t?"true":"false"),this.setAttribute("aria-disabled",i?"true":"false"),this.setAttribute("aria-busy",e?"true":"false"),r?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required");const o=this.getAttribute("data-ui-switch-tabindex");i?(o==null&&this.setAttribute("data-ui-switch-tabindex",this.getAttribute("tabindex")||""),this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1")):o!=null?(o?this.setAttribute("tabindex",o):this.removeAttribute("tabindex"),this.removeAttribute("data-ui-switch-tabindex")):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this._control&&(this._control.disabled=i)}_onClick(t){if(this.disabled)return;const i=t.composedPath();if(!i.some(a=>a instanceof HTMLElement&&a.classList.contains("control"))&&f(i))return;const r=t.target;r instanceof HTMLElement&&r.closest(".shell")&&(this.toggle(),this.focus({preventScroll:!0}))}_onKeyDown(t){if(this.disabled||t.defaultPrevented)return;const i=t.target;if(i instanceof HTMLElement&&i!==this&&!i.closest(".control"))return;const e=getComputedStyle(this).direction==="rtl";if(t.key===" "||t.key==="Enter"){t.preventDefault(),this.toggle();return}if(t.key==="ArrowLeft"){t.preventDefault(),this.toggle(e);return}if(t.key==="ArrowRight"){t.preventDefault(),this.toggle(!e);return}if(t.key==="Home"){t.preventDefault(),this.toggle(!1);return}t.key==="End"&&(t.preventDefault(),this.toggle(!0))}_onSlotChange(){this.requestRender()}render(){const t=this.checked,i=this.disabled,e=(this.getAttribute("label")||"").trim(),r=(this.getAttribute("description")||"").trim(),o=Array.from(this.childNodes).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType!==Node.ELEMENT_NODE?!1:!n.getAttribute("slot")),a=!!this.querySelector('[slot="description"]'),c=!!e||o,h=!!r||a,p=c||h;this.setContent(`
+`,l=new Set(["label","description"]);function u(s){if(s==null)return!1;const t=String(s).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function d(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(s){for(const t of s)if(t instanceof HTMLElement&&t.matches('a,button,input,select,textarea,[contenteditable="true"],[data-ui-switch-no-toggle]'))return!0;return!1}class b extends w.ElementBase{constructor(){super(),this._control=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["checked","disabled","headless","loading","size","variant","tone","shape","elevation","label","description","name","value","required","tabindex","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("slotchange",this._onSlotChange),this._syncAria()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(t,i,e){if(i!==e){if(l.has(t)){super.attributeChangedCallback(t,i,e);return}this._syncAria()}}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")||this.hasAttribute("loading")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}toggle(t){if(this.disabled)return;const i=typeof t=="boolean"?t:!this.checked;if(i===this.checked){this._syncAria();return}this.checked=i,this._syncAria();const e={checked:i,value:this.getAttribute("value")||"on",name:this.getAttribute("name")||"",required:u(this.getAttribute("required"))};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_syncAria(){const t=this.checked,i=this.disabled,e=this.hasAttribute("loading"),r=u(this.getAttribute("required"));this.setAttribute("role","switch"),this.setAttribute("aria-checked",t?"true":"false"),this.setAttribute("aria-disabled",i?"true":"false"),this.setAttribute("aria-busy",e?"true":"false"),r?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required");const o=this.getAttribute("data-ui-switch-tabindex");i?(o==null&&this.setAttribute("data-ui-switch-tabindex",this.getAttribute("tabindex")||""),this.getAttribute("tabindex")!=="-1"&&this.setAttribute("tabindex","-1")):o!=null?(o?this.setAttribute("tabindex",o):this.removeAttribute("tabindex"),this.removeAttribute("data-ui-switch-tabindex")):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this._control&&this._control.toggleAttribute("data-disabled",i)}_onClick(t){if(this.disabled)return;const i=t.composedPath();if(!i.some(a=>a instanceof HTMLElement&&a.classList.contains("control"))&&f(i))return;const r=t.target;r instanceof HTMLElement&&r.closest(".shell")&&(this.toggle(),this.focus({preventScroll:!0}))}_onKeyDown(t){if(this.disabled||t.defaultPrevented)return;const i=t.target;if(i instanceof HTMLElement&&i!==this&&!i.closest(".control"))return;const e=getComputedStyle(this).direction==="rtl";if(t.key===" "||t.key==="Enter"){t.preventDefault(),this.toggle();return}if(t.key==="ArrowLeft"){t.preventDefault(),this.toggle(e);return}if(t.key==="ArrowRight"){t.preventDefault(),this.toggle(!e);return}if(t.key==="Home"){t.preventDefault(),this.toggle(!1);return}t.key==="End"&&(t.preventDefault(),this.toggle(!0))}_onSlotChange(){this.requestRender()}render(){const t=this.checked,i=this.disabled,e=(this.getAttribute("label")||"").trim(),r=(this.getAttribute("description")||"").trim(),o=Array.from(this.childNodes).some(n=>n.nodeType===Node.TEXT_NODE?!!n.textContent?.trim():n.nodeType!==Node.ELEMENT_NODE?!1:!n.getAttribute("slot")),a=!!this.querySelector('[slot="description"]'),c=!!e||o,h=!!r||a,p=c||h;this.setContent(`
       <style>${g}</style>
       <span class="shell" part="shell">
-        <button
-          type="button"
+        <span
           class="control"
           part="control"
           aria-hidden="true"
-          tabindex="-1"
-          ${i?"disabled":""}
+          ${i?"data-disabled":""}
         >
           <span class="thumb" part="thumb">
             <span class="spinner" aria-hidden="true"></span>
             <span class="thumb-icon icon-on" aria-hidden="true">✓</span>
             <span class="thumb-icon icon-off" aria-hidden="true">•</span>
           </span>
-        </button>
+        </span>
         <span class="label-wrap" part="label-wrap" ${p?"":"hidden"}>
           <span class="label" part="label" ${c?"":"hidden"}><slot>${d(e)}</slot></span>
           <span class="description" part="description" ${h?"":"hidden"}><slot name="description">${d(r)}</slot></span>

package/dist/switch.esm.js

@@ -1,4 +1,4 @@
-import { E as p } from "./ElementBase-YlTLMsGk.mjs";
+import { E as p } from "./ElementBase-BeZT54Hj.mjs";
 const w = `
   :host {
     --ui-switch-width: 44px;
@@ -7,15 +7,15 @@ const w = `
     --ui-switch-radius: 999px;
     --ui-switch-gap: 12px;
     --ui-switch-track-bg: var(--ui-color-surface-alt, #e2e8f0);
-    --ui-switch-track-hover: color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #64748b));
+    --ui-switch-track-hover: color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #526175));
     --ui-switch-track-border: var(--ui-color-border, #cbd5e1);
     --ui-switch-thumb-bg: var(--ui-color-surface, #ffffff);
-    --ui-switch-thumb-color: var(--ui-color-muted, #64748b);
+    --ui-switch-thumb-color: var(--ui-color-muted, #526175);
     --ui-switch-label: var(--ui-color-text, #0f172a);
-    --ui-switch-description: var(--ui-color-muted, #64748b);
+    --ui-switch-description: var(--ui-color-muted, #526175);
     --ui-switch-accent: var(--ui-switch-checked-bg, var(--ui-color-primary, #2563eb));
     --ui-switch-accent-hover: color-mix(in srgb, var(--ui-switch-accent) 86%, #0f172a);
-    --ui-switch-accent-contrast: var(--ui-color-primary-foreground, #ffffff);
+    --ui-switch-accent-contrast: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
     --ui-switch-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-switch-shadow: none;
     --ui-switch-thumb-shadow: none;
@@ -307,11 +307,11 @@ const w = `
   }
 
   :host([tone="success"]) {
-    --ui-switch-accent: var(--ui-color-success, #16a34a);
+    --ui-switch-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-switch-accent: var(--ui-color-warning, #d97706);
+    --ui-switch-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -461,7 +461,7 @@ class f extends p {
     const t = this.checked, i = this.disabled, e = this.hasAttribute("loading"), r = u(this.getAttribute("required"));
     this.setAttribute("role", "switch"), this.setAttribute("aria-checked", t ? "true" : "false"), this.setAttribute("aria-disabled", i ? "true" : "false"), this.setAttribute("aria-busy", e ? "true" : "false"), r ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
     const o = this.getAttribute("data-ui-switch-tabindex");
-    i ? (o == null && this.setAttribute("data-ui-switch-tabindex", this.getAttribute("tabindex") || ""), this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1")) : o != null ? (o ? this.setAttribute("tabindex", o) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-switch-tabindex")) : this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this._control && (this._control.disabled = i);
+    i ? (o == null && this.setAttribute("data-ui-switch-tabindex", this.getAttribute("tabindex") || ""), this.getAttribute("tabindex") !== "-1" && this.setAttribute("tabindex", "-1")) : o != null ? (o ? this.setAttribute("tabindex", o) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-switch-tabindex")) : this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this._control && this._control.toggleAttribute("data-disabled", i);
   }
   _onClick(t) {
     if (this.disabled) return;
@@ -504,20 +504,18 @@ class f extends p {
     this.setContent(`
       <style>${w}</style>
       <span class="shell" part="shell">
-        <button
-          type="button"
+        <span
           class="control"
           part="control"
           aria-hidden="true"
-          tabindex="-1"
-          ${i ? "disabled" : ""}
+          ${i ? "data-disabled" : ""}
         >
           <span class="thumb" part="thumb">
             <span class="spinner" aria-hidden="true"></span>
             <span class="thumb-icon icon-on" aria-hidden="true">✓</span>
             <span class="thumb-icon icon-off" aria-hidden="true">•</span>
           </span>
-        </button>
+        </span>
         <span class="label-wrap" part="label-wrap" ${b ? "" : "hidden"}>
           <span class="label" part="label" ${c ? "" : "hidden"}><slot>${d(e)}</slot></span>
           <span class="description" part="description" ${h ? "" : "hidden"}><slot name="description">${d(r)}</slot></span>

package/dist/table.cjs.js

@@ -1,12 +1,15 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-EV6mVBUV.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-DxbvhLJs.js"),y=`
   :host {
     display: block;
+    /* A wide table scrolls inside its own frame. Without this a grid or flex parent grows to the table's width. */
+    min-inline-size: 0;
+    max-inline-size: 100%;
     color-scheme: light dark;
     --ui-table-radius: 14px;
     --ui-table-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
     --ui-table-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
     --ui-table-text: var(--ui-color-text, #0f172a);
-    --ui-table-muted: var(--ui-color-muted, #64748b);
+    --ui-table-muted: var(--ui-color-muted, #526175);
     --ui-table-accent: var(--ui-color-primary, #2563eb);
     --ui-table-shadow: none;
     --ui-table-empty-color: var(--ui-table-muted);
@@ -83,7 +86,7 @@
   ui-table:not([headless]) > table thead th {
     text-align: left;
     padding: 12px 14px;
-    color: var(--ui-table-muted, var(--ui-color-muted, #64748b));
+    color: var(--ui-table-muted, var(--ui-color-muted, #526175));
     font-weight: 600;
     letter-spacing: 0.01em;
     background: linear-gradient(
@@ -152,7 +155,7 @@
     font-size: 12px;
     line-height: 1;
     font-weight: 700;
-    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #64748b)) 76%, transparent);
+    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #526175)) 76%, transparent);
     letter-spacing: 0;
   }
 
@@ -177,7 +180,7 @@
   }
 
   ui-table[loading]:not([headless]) > table tbody {
-    opacity: 0.55;
+    opacity: 0.65;
     pointer-events: none;
   }
 
@@ -203,10 +206,10 @@
       border-color: Highlight;
     }
   }
-`;function f(){if(typeof document>"u")return;const i="ui-table-light-dom-style",t=document.getElementById(i);if(t){t.textContent!==h&&(t.textContent=h);return}const s=document.createElement("style");s.id=i,s.textContent=h,document.head.appendChild(s)}typeof document<"u"&&f();function d(i){return i?(i.textContent||"").replace(/\s+/g," ").trim():""}function _(i){const t=i.replace(/,/g,"");if(/^-?\d+(\.\d+)?$/.test(t))return Number(t);const s=Date.parse(i);return!Number.isNaN(s)&&/[-/]/.test(i)?s:i.toLowerCase()}class m extends p.ElementBase{constructor(){super(),this._table=null,this._observer=null,this._sortColumnIndex=-1,this._sortDirection="asc",this._selectedRows=new Set,this._isSyncing=!1,this._syncRaf=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["headless","empty-text","sortable","selectable","multi-select"]}connectedCallback(){super.connectedCallback(),f(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this._queueSyncStructure()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0})}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._syncRaf&&(cancelAnimationFrame(this._syncRaf),this._syncRaf=0),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}attributeChangedCallback(t,s,e){if(s!==e){if(t==="headless"){this.requestRender();return}if(t==="empty-text"){this._syncEmptyText();return}this.isConnected&&this._queueSyncStructure()}}render(){if(this.hasAttribute("headless")){this.setContent("<slot></slot>"),this._syncStructure();return}const t=this.getAttribute("empty-text")||"No table data available.";this.setContent(`
+`;function f(){if(typeof document>"u")return;const i="ui-table-light-dom-style",t=document.getElementById(i);if(t){t.textContent!==h&&(t.textContent=h);return}const s=document.createElement("style");s.id=i,s.textContent=h,document.head.appendChild(s)}typeof document<"u"&&f();function c(i){return i?(i.textContent||"").replace(/\s+/g," ").trim():""}function _(i){const t=i.replace(/,/g,"");if(/^-?\d+(\.\d+)?$/.test(t))return Number(t);const s=Date.parse(i);return!Number.isNaN(s)&&/[-/]/.test(i)?s:i.toLowerCase()}class m extends p.ElementBase{constructor(){super(),this._table=null,this._observer=null,this._sortColumnIndex=-1,this._sortDirection="asc",this._selectedRows=new Set,this._isSyncing=!1,this._syncRaf=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["headless","empty-text","sortable","selectable","multi-select"]}connectedCallback(){super.connectedCallback(),f(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this._queueSyncStructure()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0})}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._syncRaf&&(cancelAnimationFrame(this._syncRaf),this._syncRaf=0),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}attributeChangedCallback(t,s,e){if(s!==e){if(t==="headless"){this.requestRender();return}if(t==="empty-text"){this._syncEmptyText();return}this.isConnected&&this._queueSyncStructure()}}render(){if(this.hasAttribute("headless")){this.setContent("<slot></slot>"),this._syncStructure();return}const t=this.getAttribute("empty-text")||"No table data available.";this.setContent(`
       <style>${y}</style>
       <div class="frame" part="frame">
         <slot></slot>
         <div class="empty" part="empty" hidden>${t}</div>
       </div>
-    `),this._syncStructure()}_findTable(){return this.querySelector("table")}_queueSyncStructure(){this.isConnected&&(this._syncRaf||(this._syncRaf=requestAnimationFrame(()=>{this._syncRaf=0,this._syncStructure()})))}_syncStructure(){if(!this._isSyncing){this._isSyncing=!0;try{this._table=this._findTable();const t=this.root.querySelector(".empty");if(this._syncEmptyText(),!this._table){t&&t.removeAttribute("hidden"),this._selectedRows.clear();return}t&&t.setAttribute("hidden",""),this._table.hasAttribute("data-ui-table")||this._table.setAttribute("data-ui-table","true"),this._table.hasAttribute("role")||this._table.setAttribute("role","table"),this._syncHeaderState(),this._syncRowSelectionState()}finally{this._isSyncing=!1}}}_syncEmptyText(){const t=this.root.querySelector(".empty");t&&(t.textContent=this.getAttribute("empty-text")||"No table data available.")}_headerCells(){if(!this._table)return[];const t=this._table.tHead?.rows[0];if(t)return Array.from(t.cells).filter(e=>e.tagName.toLowerCase()==="th");const s=this._table.querySelectorAll("th");return Array.from(s)}_syncHeaderState(){const t=this.hasAttribute("sortable");this._headerCells().forEach((e,r)=>{t?(e.setAttribute("data-sortable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0")):(e.removeAttribute("data-sortable"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex")),r===this._sortColumnIndex&&t?e.setAttribute("aria-sort",this._sortDirection==="asc"?"ascending":"descending"):t?e.setAttribute("aria-sort","none"):e.removeAttribute("aria-sort")})}_syncRowSelectionState(){const t=this.hasAttribute("selectable"),s=this._bodyRows();for(const e of Array.from(this._selectedRows))s.includes(e)||this._selectedRows.delete(e);s.forEach(e=>{t?(e.setAttribute("aria-selected",this._selectedRows.has(e)?"true":"false"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),this._selectedRows.has(e)?e.setAttribute("data-selected","true"):e.removeAttribute("data-selected")):(e.removeAttribute("aria-selected"),e.removeAttribute("data-selected"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex"))})}_bodyRows(){if(!this._table)return[];const t=this._table.tBodies[0];return t?Array.from(t.rows):[]}_sortByColumn(t,s){if(!this._table)return;const e=this._table.tBodies[0];if(!e)return;this._sortColumnIndex===t?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortColumnIndex=t,this._sortDirection="asc"),Array.from(e.rows).map((a,l)=>({row:a,rowIndex:l,value:_(d(a.cells[t]))})).sort((a,l)=>{const b=a.value,u=l.value;let c=0;return typeof b=="number"&&typeof u=="number"?c=b-u:c=String(b).localeCompare(String(u),void 0,{numeric:!0,sensitivity:"base"}),c===0&&(c=a.rowIndex-l.rowIndex),this._sortDirection==="asc"?c:-c}).map(a=>a.row).forEach(a=>e.appendChild(a)),this._syncHeaderState(),this._syncRowSelectionState();const o=s.getAttribute("data-key")||d(s)||`column-${t+1}`;this.dispatchEvent(new CustomEvent("sort-change",{detail:{columnIndex:t,key:o,direction:this._sortDirection},bubbles:!0}))}_rowValues(t){const s=this._headerCells(),e=Array.from(t.cells),r={};return e.forEach((n,o)=>{const a=s[o],l=(a?.getAttribute("data-key")||d(a||void 0)||`col_${o+1}`).toLowerCase().replace(/[^a-z0-9_]+/g,"_").replace(/^_+|_+$/g,"");r[l||`col_${o+1}`]=d(n)}),r}_toggleRowSelection(t){const s=this.hasAttribute("multi-select"),e=this._selectedRows.has(t);s||this._selectedRows.clear(),e&&s?this._selectedRows.delete(t):this._selectedRows.add(t),this._syncRowSelectionState();const r=this._bodyRows(),n=r.flatMap((a,l)=>this._selectedRows.has(a)?[l]:[]),o=r.filter(a=>this._selectedRows.has(a)).map(a=>this._rowValues(a));this.dispatchEvent(new CustomEvent("row-select",{detail:{index:r.indexOf(t),selected:this._selectedRows.has(t),indices:n,rows:o},bubbles:!0}))}_onClick(t){if(!this._table)return;const s=t.target;if(this.hasAttribute("sortable")){const e=s.closest("th");if(e&&this._table.contains(e)){const n=this._headerCells().indexOf(e);if(n>=0){this._sortByColumn(n,e);return}}}if(this.hasAttribute("selectable")){const e=s.closest("tbody tr");e&&this._table.contains(e)&&this._toggleRowSelection(e)}}_onKeyDown(t){if(!this._table)return;const s=t.key;if(s!=="Enter"&&s!==" ")return;const e=t.target;if(this.hasAttribute("sortable")){const r=e.closest("th");if(r&&this._table.contains(r)){const o=this._headerCells().indexOf(r);if(o>=0){t.preventDefault(),this._sortByColumn(o,r);return}}}if(this.hasAttribute("selectable")){const r=e.closest("tbody tr");r&&this._table.contains(r)&&(t.preventDefault(),this._toggleRowSelection(r))}}shouldRenderOnAttributeChange(t,s,e){return!1}}typeof customElements<"u"&&!customElements.get("ui-table")&&customElements.define("ui-table",m);exports.UITable=m;
+    `),this._syncStructure()}_findTable(){return this.querySelector("table")}_queueSyncStructure(){this.isConnected&&(this._syncRaf||(this._syncRaf=requestAnimationFrame(()=>{this._syncRaf=0,this._syncStructure()})))}_syncStructure(){if(!this._isSyncing){this._isSyncing=!0;try{this._table=this._findTable();const t=this.root.querySelector(".empty");if(this._syncEmptyText(),!this._table){t&&t.removeAttribute("hidden"),this._selectedRows.clear();return}t&&t.setAttribute("hidden",""),this._table.hasAttribute("data-ui-table")||this._table.setAttribute("data-ui-table","true"),this._table.hasAttribute("role")||this._table.setAttribute("role","table"),this._syncHeaderState(),this._syncRowSelectionState()}finally{this._isSyncing=!1}}}_syncEmptyText(){const t=this.root.querySelector(".empty");t&&(t.textContent=this.getAttribute("empty-text")||"No table data available.")}_headerCells(){if(!this._table)return[];const t=this._table.tHead?.rows[0];if(t)return Array.from(t.cells).filter(e=>e.tagName.toLowerCase()==="th");const s=this._table.querySelectorAll("th");return Array.from(s)}_syncHeaderState(){const t=this.hasAttribute("sortable");this._headerCells().forEach((e,r)=>{t?(e.setAttribute("data-sortable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0")):(e.removeAttribute("data-sortable"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex")),r===this._sortColumnIndex&&t?e.setAttribute("aria-sort",this._sortDirection==="asc"?"ascending":"descending"):t?e.setAttribute("aria-sort","none"):e.removeAttribute("aria-sort")})}_syncRowSelectionState(){const t=this.hasAttribute("selectable"),s=this._bodyRows();for(const e of Array.from(this._selectedRows))s.includes(e)||this._selectedRows.delete(e);s.forEach(e=>{t?(e.setAttribute("aria-selected",this._selectedRows.has(e)?"true":"false"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),this._selectedRows.has(e)?e.setAttribute("data-selected","true"):e.removeAttribute("data-selected")):(e.removeAttribute("aria-selected"),e.removeAttribute("data-selected"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex"))})}_bodyRows(){if(!this._table)return[];const t=this._table.tBodies[0];return t?Array.from(t.rows):[]}_sortByColumn(t,s){if(!this._table)return;const e=this._table.tBodies[0];if(!e)return;this._sortColumnIndex===t?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortColumnIndex=t,this._sortDirection="asc"),Array.from(e.rows).map((a,l)=>({row:a,rowIndex:l,value:_(c(a.cells[t]))})).sort((a,l)=>{const b=a.value,u=l.value;let d=0;return typeof b=="number"&&typeof u=="number"?d=b-u:d=String(b).localeCompare(String(u),void 0,{numeric:!0,sensitivity:"base"}),d===0&&(d=a.rowIndex-l.rowIndex),this._sortDirection==="asc"?d:-d}).map(a=>a.row).forEach(a=>e.appendChild(a)),this._syncHeaderState(),this._syncRowSelectionState();const o=s.getAttribute("data-key")||c(s)||`column-${t+1}`;this.dispatchEvent(new CustomEvent("sort-change",{detail:{columnIndex:t,key:o,direction:this._sortDirection},bubbles:!0}))}_rowValues(t){const s=this._headerCells(),e=Array.from(t.cells),r={};return e.forEach((n,o)=>{const a=s[o],l=(a?.getAttribute("data-key")||c(a||void 0)||`col_${o+1}`).toLowerCase().replace(/[^a-z0-9_]+/g,"_").replace(/^_+|_+$/g,"");r[l||`col_${o+1}`]=c(n)}),r}_toggleRowSelection(t){const s=this.hasAttribute("multi-select"),e=this._selectedRows.has(t);s||this._selectedRows.clear(),e&&s?this._selectedRows.delete(t):this._selectedRows.add(t),this._syncRowSelectionState();const r=this._bodyRows(),n=r.flatMap((a,l)=>this._selectedRows.has(a)?[l]:[]),o=r.filter(a=>this._selectedRows.has(a)).map(a=>this._rowValues(a));this.dispatchEvent(new CustomEvent("row-select",{detail:{index:r.indexOf(t),selected:this._selectedRows.has(t),indices:n,rows:o},bubbles:!0}))}_onClick(t){if(!this._table)return;const s=t.target;if(this.hasAttribute("sortable")){const e=s.closest("th");if(e&&this._table.contains(e)){const n=this._headerCells().indexOf(e);if(n>=0){this._sortByColumn(n,e);return}}}if(this.hasAttribute("selectable")){const e=s.closest("tbody tr");e&&this._table.contains(e)&&this._toggleRowSelection(e)}}_onKeyDown(t){if(!this._table)return;const s=t.key;if(s!=="Enter"&&s!==" ")return;const e=t.target;if(this.hasAttribute("sortable")){const r=e.closest("th");if(r&&this._table.contains(r)){const o=this._headerCells().indexOf(r);if(o>=0){t.preventDefault(),this._sortByColumn(o,r);return}}}if(this.hasAttribute("selectable")){const r=e.closest("tbody tr");r&&this._table.contains(r)&&(t.preventDefault(),this._toggleRowSelection(r))}}shouldRenderOnAttributeChange(t,s,e){return!1}}typeof customElements<"u"&&!customElements.get("ui-table")&&customElements.define("ui-table",m);exports.UITable=m;

package/dist/table.esm.js

@@ -1,13 +1,16 @@
-import { E as m } from "./ElementBase-YlTLMsGk.mjs";
+import { E as m } from "./ElementBase-BeZT54Hj.mjs";
 const p = `
   :host {
     display: block;
+    /* A wide table scrolls inside its own frame. Without this a grid or flex parent grows to the table's width. */
+    min-inline-size: 0;
+    max-inline-size: 100%;
     color-scheme: light dark;
     --ui-table-radius: 14px;
     --ui-table-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
     --ui-table-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
     --ui-table-text: var(--ui-color-text, #0f172a);
-    --ui-table-muted: var(--ui-color-muted, #64748b);
+    --ui-table-muted: var(--ui-color-muted, #526175);
     --ui-table-accent: var(--ui-color-primary, #2563eb);
     --ui-table-shadow: none;
     --ui-table-empty-color: var(--ui-table-muted);
@@ -84,7 +87,7 @@ const p = `
   ui-table:not([headless]) > table thead th {
     text-align: left;
     padding: 12px 14px;
-    color: var(--ui-table-muted, var(--ui-color-muted, #64748b));
+    color: var(--ui-table-muted, var(--ui-color-muted, #526175));
     font-weight: 600;
     letter-spacing: 0.01em;
     background: linear-gradient(
@@ -153,7 +156,7 @@ const p = `
     font-size: 12px;
     line-height: 1;
     font-weight: 700;
-    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #64748b)) 76%, transparent);
+    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #526175)) 76%, transparent);
     letter-spacing: 0;
   }
 
@@ -178,7 +181,7 @@ const p = `
   }
 
   ui-table[loading]:not([headless]) > table tbody {
-    opacity: 0.55;
+    opacity: 0.65;
     pointer-events: none;
   }
 
@@ -212,18 +215,18 @@ function f() {
     t.textContent !== h && (t.textContent = h);
     return;
   }
-  const r = document.createElement("style");
-  r.id = i, r.textContent = h, document.head.appendChild(r);
+  const s = document.createElement("style");
+  s.id = i, s.textContent = h, document.head.appendChild(s);
 }
 typeof document < "u" && f();
-function d(i) {
+function c(i) {
   return i ? (i.textContent || "").replace(/\s+/g, " ").trim() : "";
 }
 function y(i) {
   const t = i.replace(/,/g, "");
   if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
-  const r = Date.parse(i);
-  return !Number.isNaN(r) && /[-/]/.test(i) ? r : i.toLowerCase();
+  const s = Date.parse(i);
+  return !Number.isNaN(s) && /[-/]/.test(i) ? s : i.toLowerCase();
 }
 class _ extends m {
   constructor() {
@@ -244,8 +247,8 @@ class _ extends m {
   disconnectedCallback() {
     this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this._syncRaf && (cancelAnimationFrame(this._syncRaf), this._syncRaf = 0), this._observer && (this._observer.disconnect(), this._observer = null), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, r, e) {
-    if (r !== e) {
+  attributeChangedCallback(t, s, e) {
+    if (s !== e) {
       if (t === "headless") {
         this.requestRender();
         return;
@@ -304,20 +307,20 @@ class _ extends m {
     const t = this._table.tHead?.rows[0];
     if (t)
       return Array.from(t.cells).filter((e) => e.tagName.toLowerCase() === "th");
-    const r = this._table.querySelectorAll("th");
-    return Array.from(r);
+    const s = this._table.querySelectorAll("th");
+    return Array.from(s);
   }
   _syncHeaderState() {
     const t = this.hasAttribute("sortable");
-    this._headerCells().forEach((e, s) => {
-      t ? (e.setAttribute("data-sortable", "true"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0")) : (e.removeAttribute("data-sortable"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex")), s === this._sortColumnIndex && t ? e.setAttribute("aria-sort", this._sortDirection === "asc" ? "ascending" : "descending") : t ? e.setAttribute("aria-sort", "none") : e.removeAttribute("aria-sort");
+    this._headerCells().forEach((e, r) => {
+      t ? (e.setAttribute("data-sortable", "true"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0")) : (e.removeAttribute("data-sortable"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex")), r === this._sortColumnIndex && t ? e.setAttribute("aria-sort", this._sortDirection === "asc" ? "ascending" : "descending") : t ? e.setAttribute("aria-sort", "none") : e.removeAttribute("aria-sort");
     });
   }
   _syncRowSelectionState() {
-    const t = this.hasAttribute("selectable"), r = this._bodyRows();
+    const t = this.hasAttribute("selectable"), s = this._bodyRows();
     for (const e of Array.from(this._selectedRows))
-      r.includes(e) || this._selectedRows.delete(e);
-    r.forEach((e) => {
+      s.includes(e) || this._selectedRows.delete(e);
+    s.forEach((e) => {
       t ? (e.setAttribute("aria-selected", this._selectedRows.has(e) ? "true" : "false"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), this._selectedRows.has(e) ? e.setAttribute("data-selected", "true") : e.removeAttribute("data-selected")) : (e.removeAttribute("aria-selected"), e.removeAttribute("data-selected"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex"));
     });
   }
@@ -326,20 +329,20 @@ class _ extends m {
     const t = this._table.tBodies[0];
     return t ? Array.from(t.rows) : [];
   }
-  _sortByColumn(t, r) {
+  _sortByColumn(t, s) {
     if (!this._table) return;
     const e = this._table.tBodies[0];
     if (!e) return;
     this._sortColumnIndex === t ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortColumnIndex = t, this._sortDirection = "asc"), Array.from(e.rows).map((a, l) => ({
       row: a,
       rowIndex: l,
-      value: y(d(a.cells[t]))
+      value: y(c(a.cells[t]))
     })).sort((a, l) => {
       const b = a.value, u = l.value;
-      let c = 0;
-      return typeof b == "number" && typeof u == "number" ? c = b - u : c = String(b).localeCompare(String(u), void 0, { numeric: !0, sensitivity: "base" }), c === 0 && (c = a.rowIndex - l.rowIndex), this._sortDirection === "asc" ? c : -c;
+      let d = 0;
+      return typeof b == "number" && typeof u == "number" ? d = b - u : d = String(b).localeCompare(String(u), void 0, { numeric: !0, sensitivity: "base" }), d === 0 && (d = a.rowIndex - l.rowIndex), this._sortDirection === "asc" ? d : -d;
     }).map((a) => a.row).forEach((a) => e.appendChild(a)), this._syncHeaderState(), this._syncRowSelectionState();
-    const o = r.getAttribute("data-key") || d(r) || `column-${t + 1}`;
+    const o = s.getAttribute("data-key") || c(s) || `column-${t + 1}`;
     this.dispatchEvent(
       new CustomEvent("sort-change", {
         detail: {
@@ -352,20 +355,20 @@ class _ extends m {
     );
   }
   _rowValues(t) {
-    const r = this._headerCells(), e = Array.from(t.cells), s = {};
+    const s = this._headerCells(), e = Array.from(t.cells), r = {};
     return e.forEach((n, o) => {
-      const a = r[o], l = (a?.getAttribute("data-key") || d(a || void 0) || `col_${o + 1}`).toLowerCase().replace(/[^a-z0-9_]+/g, "_").replace(/^_+|_+$/g, "");
-      s[l || `col_${o + 1}`] = d(n);
-    }), s;
+      const a = s[o], l = (a?.getAttribute("data-key") || c(a || void 0) || `col_${o + 1}`).toLowerCase().replace(/[^a-z0-9_]+/g, "_").replace(/^_+|_+$/g, "");
+      r[l || `col_${o + 1}`] = c(n);
+    }), r;
   }
   _toggleRowSelection(t) {
-    const r = this.hasAttribute("multi-select"), e = this._selectedRows.has(t);
-    r || this._selectedRows.clear(), e && r ? this._selectedRows.delete(t) : this._selectedRows.add(t), this._syncRowSelectionState();
-    const s = this._bodyRows(), n = s.flatMap((a, l) => this._selectedRows.has(a) ? [l] : []), o = s.filter((a) => this._selectedRows.has(a)).map((a) => this._rowValues(a));
+    const s = this.hasAttribute("multi-select"), e = this._selectedRows.has(t);
+    s || this._selectedRows.clear(), e && s ? this._selectedRows.delete(t) : this._selectedRows.add(t), this._syncRowSelectionState();
+    const r = this._bodyRows(), n = r.flatMap((a, l) => this._selectedRows.has(a) ? [l] : []), o = r.filter((a) => this._selectedRows.has(a)).map((a) => this._rowValues(a));
     this.dispatchEvent(
       new CustomEvent("row-select", {
         detail: {
-          index: s.indexOf(t),
+          index: r.indexOf(t),
           selected: this._selectedRows.has(t),
           indices: n,
           rows: o
@@ -376,9 +379,9 @@ class _ extends m {
   }
   _onClick(t) {
     if (!this._table) return;
-    const r = t.target;
+    const s = t.target;
     if (this.hasAttribute("sortable")) {
-      const e = r.closest("th");
+      const e = s.closest("th");
       if (e && this._table.contains(e)) {
         const n = this._headerCells().indexOf(e);
         if (n >= 0) {
@@ -388,31 +391,31 @@ class _ extends m {
       }
     }
     if (this.hasAttribute("selectable")) {
-      const e = r.closest("tbody tr");
+      const e = s.closest("tbody tr");
       e && this._table.contains(e) && this._toggleRowSelection(e);
     }
   }
   _onKeyDown(t) {
     if (!this._table) return;
-    const r = t.key;
-    if (r !== "Enter" && r !== " ") return;
+    const s = t.key;
+    if (s !== "Enter" && s !== " ") return;
     const e = t.target;
     if (this.hasAttribute("sortable")) {
-      const s = e.closest("th");
-      if (s && this._table.contains(s)) {
-        const o = this._headerCells().indexOf(s);
+      const r = e.closest("th");
+      if (r && this._table.contains(r)) {
+        const o = this._headerCells().indexOf(r);
         if (o >= 0) {
-          t.preventDefault(), this._sortByColumn(o, s);
+          t.preventDefault(), this._sortByColumn(o, r);
           return;
         }
       }
     }
     if (this.hasAttribute("selectable")) {
-      const s = e.closest("tbody tr");
-      s && this._table.contains(s) && (t.preventDefault(), this._toggleRowSelection(s));
+      const r = e.closest("tbody tr");
+      r && this._table.contains(r) && (t.preventDefault(), this._toggleRowSelection(r));
     }
   }
-  shouldRenderOnAttributeChange(t, r, e) {
+  shouldRenderOnAttributeChange(t, s, e) {
     return !1;
   }
 }

package/dist/tabs.cjs.js

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