@editora/ui-core 0.1.25 → 0.2.1

package/dist/switch.cjs.js

@@ -1,23 +1,23 @@
 "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;
+    --ui-switch-width: 36px;
+    --ui-switch-height: 20px;
     --ui-switch-padding: 2px;
     --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, #526175));
-    --ui-switch-track-border: var(--ui-color-border, #cbd5e1);
-    --ui-switch-thumb-bg: var(--ui-color-surface, #ffffff);
+    --ui-switch-track-bg: var(--ui-color-fill-active, #cbd5e1);
+    --ui-switch-track-hover: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #526175)));
+    --ui-switch-track-border: transparent;
+    --ui-switch-thumb-bg: #ffffff;
     --ui-switch-thumb-color: var(--ui-color-muted, #526175);
     --ui-switch-label: var(--ui-color-text, #0f172a);
     --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-hover: color-mix(in srgb, var(--ui-switch-accent) 88%, var(--ui-color-text-strong, #0f172a));
     --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;
+    --ui-switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
     --ui-switch-elevation: none;
     --ui-switch-transition: 170ms cubic-bezier(0.22, 0.8, 0.2, 1);
     --ui-switch-thumb-shift: calc(var(--ui-switch-width) - var(--ui-switch-height));
@@ -107,8 +107,8 @@
   }
 
   .icon-off {
-    opacity: 1;
-    transform: scale(1);
+    opacity: 0;
+    transform: scale(0.86);
   }
 
   .spinner {
@@ -136,9 +136,8 @@
 
   .label {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.35;
-    letter-spacing: -0.005em;
   }
 
   .description {
@@ -155,12 +154,12 @@
 
   :host([checked]) .control {
     background: var(--ui-switch-accent);
-    border-color: color-mix(in srgb, var(--ui-switch-accent) 76%, #0f172a);
+    border-color: transparent;
   }
 
   :host([checked]) .thumb {
     transform: translate(var(--ui-switch-thumb-shift), -50%);
-    color: var(--ui-switch-accent);
+    color: var(--ui-color-accent-text, var(--ui-switch-accent));
   }
 
   :host([checked]) .icon-on {
@@ -191,9 +190,8 @@
 
   :host(:focus-visible) .control,
   .control:focus-visible {
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-switch-focus) 28%, transparent),
-      var(--ui-switch-elevation);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-switch-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   :host([disabled]) .shell,
@@ -224,8 +222,8 @@
   }
 
   :host([size="sm"]) {
-    --ui-switch-width: 36px;
-    --ui-switch-height: 20px;
+    --ui-switch-width: 28px;
+    --ui-switch-height: 16px;
     --ui-switch-padding: 2px;
     --ui-switch-gap: 10px;
   }
@@ -239,9 +237,9 @@
   }
 
   :host([size="lg"]) {
-    --ui-switch-width: 52px;
-    --ui-switch-height: 28px;
-    --ui-switch-padding: 3px;
+    --ui-switch-width: 44px;
+    --ui-switch-height: 24px;
+    --ui-switch-padding: 2px;
     --ui-switch-gap: 12px;
   }
 

package/dist/switch.esm.js

@@ -1,24 +1,24 @@
 import { E as p } from "./ElementBase-BeZT54Hj.mjs";
 const w = `
   :host {
-    --ui-switch-width: 44px;
-    --ui-switch-height: 24px;
+    --ui-switch-width: 36px;
+    --ui-switch-height: 20px;
     --ui-switch-padding: 2px;
     --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, #526175));
-    --ui-switch-track-border: var(--ui-color-border, #cbd5e1);
-    --ui-switch-thumb-bg: var(--ui-color-surface, #ffffff);
+    --ui-switch-track-bg: var(--ui-color-fill-active, #cbd5e1);
+    --ui-switch-track-hover: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-switch-track-bg) 84%, var(--ui-color-muted, #526175)));
+    --ui-switch-track-border: transparent;
+    --ui-switch-thumb-bg: #ffffff;
     --ui-switch-thumb-color: var(--ui-color-muted, #526175);
     --ui-switch-label: var(--ui-color-text, #0f172a);
     --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-hover: color-mix(in srgb, var(--ui-switch-accent) 88%, var(--ui-color-text-strong, #0f172a));
     --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;
+    --ui-switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
     --ui-switch-elevation: none;
     --ui-switch-transition: 170ms cubic-bezier(0.22, 0.8, 0.2, 1);
     --ui-switch-thumb-shift: calc(var(--ui-switch-width) - var(--ui-switch-height));
@@ -108,8 +108,8 @@ const w = `
   }
 
   .icon-off {
-    opacity: 1;
-    transform: scale(1);
+    opacity: 0;
+    transform: scale(0.86);
   }
 
   .spinner {
@@ -137,9 +137,8 @@ const w = `
 
   .label {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.35;
-    letter-spacing: -0.005em;
   }
 
   .description {
@@ -156,12 +155,12 @@ const w = `
 
   :host([checked]) .control {
     background: var(--ui-switch-accent);
-    border-color: color-mix(in srgb, var(--ui-switch-accent) 76%, #0f172a);
+    border-color: transparent;
   }
 
   :host([checked]) .thumb {
     transform: translate(var(--ui-switch-thumb-shift), -50%);
-    color: var(--ui-switch-accent);
+    color: var(--ui-color-accent-text, var(--ui-switch-accent));
   }
 
   :host([checked]) .icon-on {
@@ -192,9 +191,8 @@ const w = `
 
   :host(:focus-visible) .control,
   .control:focus-visible {
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-switch-focus) 28%, transparent),
-      var(--ui-switch-elevation);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-switch-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   :host([disabled]) .shell,
@@ -225,8 +223,8 @@ const w = `
   }
 
   :host([size="sm"]) {
-    --ui-switch-width: 36px;
-    --ui-switch-height: 20px;
+    --ui-switch-width: 28px;
+    --ui-switch-height: 16px;
     --ui-switch-padding: 2px;
     --ui-switch-gap: 10px;
   }
@@ -240,9 +238,9 @@ const w = `
   }
 
   :host([size="lg"]) {
-    --ui-switch-width: 52px;
-    --ui-switch-height: 28px;
-    --ui-switch-padding: 3px;
+    --ui-switch-width: 44px;
+    --ui-switch-height: 24px;
+    --ui-switch-padding: 2px;
     --ui-switch-gap: 12px;
   }
 

package/dist/table.cjs.js

@@ -5,9 +5,9 @@
     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-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-table-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent));
+    --ui-table-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-table-text: var(--ui-color-text, #0f172a);
     --ui-table-muted: var(--ui-color-muted, #526175);
     --ui-table-accent: var(--ui-color-primary, #2563eb);
@@ -206,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 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(`
+`;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(`
       <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:_(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;
+    `),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,n)=>({row:a,rowIndex:n,value:_(d(a.cells[t]))})).sort((a,n)=>{const b=a.value,u=n.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-n.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((l,o)=>{const a=s[o],n=(a?.getAttribute("data-key")||d(a||void 0)||`col_${o+1}`).toLowerCase().replace(/[^a-z0-9_]+/g,"_").replace(/^_+|_+$/g,"");r[n||`col_${o+1}`]=d(l)}),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(),l=r.flatMap((a,n)=>this._selectedRows.has(a)?[n]:[]),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:l,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 l=this._headerCells().indexOf(e);if(l>=0){this._sortByColumn(l,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

@@ -6,9 +6,9 @@ const p = `
     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-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-table-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent));
+    --ui-table-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-table-text: var(--ui-color-text, #0f172a);
     --ui-table-muted: var(--ui-color-muted, #526175);
     --ui-table-accent: var(--ui-color-primary, #2563eb);
@@ -219,7 +219,7 @@ function f() {
   s.id = i, s.textContent = h, document.head.appendChild(s);
 }
 typeof document < "u" && f();
-function c(i) {
+function d(i) {
   return i ? (i.textContent || "").replace(/\s+/g, " ").trim() : "";
 }
 function y(i) {
@@ -333,16 +333,16 @@ class _ extends m {
     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) => ({
+    this._sortColumnIndex === t ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortColumnIndex = t, this._sortDirection = "asc"), Array.from(e.rows).map((a, n) => ({
       row: a,
-      rowIndex: l,
-      value: y(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;
+      rowIndex: n,
+      value: y(d(a.cells[t]))
+    })).sort((a, n) => {
+      const b = a.value, u = n.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 - n.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") || c(s) || `column-${t + 1}`;
+    const o = s.getAttribute("data-key") || d(s) || `column-${t + 1}`;
     this.dispatchEvent(
       new CustomEvent("sort-change", {
         detail: {
@@ -356,21 +356,21 @@ class _ extends m {
   }
   _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);
+    return e.forEach((l, o) => {
+      const a = s[o], n = (a?.getAttribute("data-key") || d(a || void 0) || `col_${o + 1}`).toLowerCase().replace(/[^a-z0-9_]+/g, "_").replace(/^_+|_+$/g, "");
+      r[n || `col_${o + 1}`] = d(l);
     }), 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));
+    const r = this._bodyRows(), l = r.flatMap((a, n) => this._selectedRows.has(a) ? [n] : []), 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,
+          indices: l,
           rows: o
         },
         bubbles: !0
@@ -383,9 +383,9 @@ class _ extends m {
     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);
+        const l = this._headerCells().indexOf(e);
+        if (l >= 0) {
+          this._sortByColumn(l, e);
           return;
         }
       }

package/dist/tabs.cjs.js

@@ -6,7 +6,9 @@
     --ui-tabs-text: var(--ui-color-text, #0f172a);
     --ui-tabs-muted: var(--ui-color-muted, #526175);
     --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    /* The accent as text: readable on the surface, unlike the accent fill itself (light amber, for one). */
+    --ui-tabs-accent-text: var(--ui-color-accent-text, var(--ui-tabs-accent));
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-tabs-accent) 16%, transparent);
     --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-tabs-accent) 32%, transparent);
@@ -95,7 +97,7 @@
 
   .tab:hover {
     background: color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    color: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .tab[aria-selected="true"] {
@@ -106,7 +108,7 @@
 
   .tab:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tabs-focus) 28%, transparent);
+    box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-tabs-focus));
   }
 
   .tab:active {
@@ -212,6 +214,23 @@
     flex: 1;
   }
 
+  :host(:not([variant])),
+  :host([variant="default"]),
+  :host([variant="underline"]),
+  :host([variant="line"]) {
+    --ui-tabs-shell-gap: 4px;
+    --ui-tabs-nav-padding: 0px;
+    --ui-tabs-nav-gap: 4px;
+    --ui-tabs-tab-radius: var(--ui-radius, 6px);
+    --ui-tabs-tab-min-h: 36px;
+    --ui-tabs-tab-pad-x: 12px;
+    --ui-tabs-tab-font-size: 14px;
+    --ui-tabs-panel-padding: 12px;
+    --ui-tabs-muted: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
+    --ui-tabs-active-text: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-tabs-line: var(--ui-color-accent-solid, var(--ui-tabs-accent));
+  }
+
   :host([size="sm"]) {
     --ui-tabs-nav-padding: 6px;
     --ui-tabs-nav-gap: 6px;
@@ -299,7 +318,7 @@
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
     --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 94%, transparent);
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
+    --ui-tabs-active-text: var(--ui-tabs-accent-text);
     --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
@@ -309,7 +328,7 @@
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
+    background: var(--ui-color-surface, #ffffff);
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -342,30 +361,83 @@
     backdrop-filter: blur(10px);
   }
 
+  /* The default look is a line: a hairline under the tabs and a 2px accent line under the selected one. */
+  :host(:not([variant])) .nav,
+  :host([variant="default"]) .nav,
   :host([variant="underline"]) .nav,
   :host([variant="line"]) .nav {
+    border: 0;
     border-radius: 0;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    box-shadow: none;
-    padding-inline: 0;
+    padding: 0;
     background: transparent;
+    box-shadow: inset 0 -1px 0 var(--ui-color-line-subtle, var(--ui-tabs-border));
   }
 
+  :host(:not([variant])) .tab,
+  :host([variant="default"]) .tab,
   :host([variant="underline"]) .tab,
   :host([variant="line"]) .tab {
-    border-radius: 0;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 2px solid transparent;
+    border: 0;
+    gap: 6px;
+    font-weight: 500;
+  }
+
+  :host(:not([variant])) .tab::after,
+  :host([variant="default"]) .tab::after,
+  :host([variant="underline"]) .tab::after,
+  :host([variant="line"]) .tab::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: 2px;
+    border-radius: 1px;
+    background: transparent;
+    transition: background-color var(--ui-tabs-transition);
   }
 
+  :host(:not([variant])) .tab:hover,
+  :host([variant="default"]) .tab:hover,
+  :host([variant="underline"]) .tab:hover,
+  :host([variant="line"]) .tab:hover {
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent));
+    color: var(--ui-color-text-strong, var(--ui-tabs-active-text));
+  }
+
+  :host(:not([variant])) .tab[aria-selected="true"],
+  :host([variant="default"]) .tab[aria-selected="true"],
   :host([variant="underline"]) .tab[aria-selected="true"],
   :host([variant="line"]) .tab[aria-selected="true"] {
     background: transparent;
-    border-bottom-color: var(--ui-tabs-accent);
+    border: 0;
+    color: var(--ui-tabs-active-text);
+  }
+
+  :host(:not([variant])) .tab[aria-selected="true"]::after,
+  :host([variant="default"]) .tab[aria-selected="true"]::after,
+  :host([variant="underline"]) .tab[aria-selected="true"]::after,
+  :host([variant="line"]) .tab[aria-selected="true"]::after {
+    background: var(--ui-tabs-line);
+  }
+
+  :host(:not([variant])) .tab:focus-visible,
+  :host([variant="default"]) .tab:focus-visible,
+  :host([variant="underline"]) .tab:focus-visible,
+  :host([variant="line"]) .tab:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-tabs-focus));
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+
+  :host(:not([variant])) .panel-wrap,
+  :host([variant="default"]) .panel-wrap,
+  :host([variant="underline"]) .panel-wrap,
+  :host([variant="line"]) .panel-wrap {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    padding-inline: 2px;
   }
 
   :host([variant="segmented"]) .nav {
@@ -434,14 +506,17 @@
 
   :host([tone="success"]) {
     --ui-tabs-accent: var(--ui-color-success, #15803d);
+    --ui-tabs-accent-text: var(--ui-color-success-text, var(--ui-tabs-accent));
   }
 
   :host([tone="warning"]) {
     --ui-tabs-accent: var(--ui-color-warning, #b45309);
+    --ui-tabs-accent-text: var(--ui-color-warning-text, var(--ui-tabs-accent));
   }
 
   :host([tone="danger"]) {
     --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+    --ui-tabs-accent-text: var(--ui-color-danger-text, var(--ui-tabs-accent));
   }
 
   :host([headless]) .nav,
@@ -483,28 +558,28 @@
       border-color: Highlight;
     }
   }
-`,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`
+`,f="data-ui-tabs-auto-label";function p(v){return String(v).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(v){if(v==null)return!1;const t=String(v).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}const w=new Set(["aria-label","aria-labelledby","orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","bare"]);class x extends y.ElementBase{constructor(){super(),this._uid=`ui-tabs-${Math.random().toString(36).slice(2,9)}`,this._observer=null,this._resizeObserver=null,this._isSyncing=!1,this._isSyncingSelectionAttributes=!1,this._focusIndex=-1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["selected","value","orientation","activation","headless","variant","size","density","tone","stretched","shape","elevation","loop","bare","aria-label","aria-labelledby"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot","data-label","data-value","data-icon","data-disabled","disabled","data-active"]}),typeof ResizeObserver<"u"?(this._resizeObserver=new ResizeObserver(()=>this._syncSelectionUi()),this._resizeObserver.observe(this)):window.addEventListener("resize",this._onWindowResize),this._syncSelectionUi()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this._observer&&(this._observer.disconnect(),this._observer=null),this._resizeObserver?(this._resizeObserver.disconnect(),this._resizeObserver=null):window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(t==="selected"||t==="value"){this._isSyncingSelectionAttributes||this._syncSelectionUi();return}w.has(t)&&this.isConnected&&this.requestRender()}}get selected(){return this.getAttribute("selected")||"0"}set selected(t){const e=String(t);e?this.setAttribute("selected",e):this.removeAttribute("selected")}_sourceTabs(){return Array.from(this.querySelectorAll('[slot="tab"]'))}_sourcePanels(){return Array.from(this.querySelectorAll('[slot="panel"]'))}_tabsModel(){return this._sourceTabs().map((t,e)=>{const r=t.getAttribute("data-value")||t.getAttribute("value")||String(e),a=t.getAttribute("data-label")||t.textContent?.trim()||`Tab ${e+1}`,i=t.getAttribute("data-icon")||"",s=t.hasAttribute("disabled")||g(t.getAttribute("data-disabled")),l=`${this._uid}-tab-${e}`,c=`${this._uid}-panel-${e}`;return{index:e,value:r,label:a,icon:i,disabled:s,tabId:l,panelId:c}})}_resolveSelectedIndex(t){if(!t.length)return-1;const e=this.getAttribute("selected"),r=this.getAttribute("value"),a=this._sourceTabs();let i=-1;if(e!=null&&e!==""){const s=Number(e);Number.isFinite(s)?i=Math.trunc(s):i=t.findIndex(l=>l.value===e)}return i<0&&r&&(i=t.findIndex(s=>s.value===r)),i<0&&(i=t.findIndex((s,l)=>!!a[l]?.hasAttribute("data-active")&&!s.disabled)),(i<0||!t[i]||t[i].disabled)&&(i=t.findIndex(s=>!s.disabled)),i}_syncSelectedAttributes(t,e){const r=t[e];this._isSyncingSelectionAttributes=!0;try{if(!r){this.removeAttribute("selected"),this.removeAttribute("value");return}this.getAttribute("selected")!==String(e)&&this.setAttribute("selected",String(e)),this.getAttribute("value")!==r.value&&this.setAttribute("value",r.value)}finally{this._isSyncingSelectionAttributes=!1}}_emit(t,e,r){const a=e[r];if(!a)return;const i={selected:r,index:r,value:a.value,label:a.label,tabId:a.tabId,panelId:a.panelId};this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}_setSelectedByIndex(t,e,r){const a=t[e];if(!a||a.disabled)return;if(this._resolveSelectedIndex(t)===e){this._focusTab(e);return}this._focusIndex=e,this.setAttribute("selected",String(e)),this.setAttribute("value",a.value),r&&(this._emit("change",t,e),this._emit("select",t,e))}_syncSelectionUi(){if(!this.isConnected)return;if(!this.root.querySelector(".nav")){this.requestRender();return}const t=this._tabsModel();if(!t.length)return;const e=this._resolveSelectedIndex(t),r=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=Array.from(this.root.querySelectorAll(".tab"));a.forEach((s,l)=>{const c=t[l];if(!c)return;const n=l===e;s.setAttribute("aria-selected",n?"true":"false"),s.setAttribute("aria-disabled",c.disabled?"true":"false"),c.disabled?s.setAttribute("disabled",""):s.removeAttribute("disabled")}),d.syncRovingTabStops(a,a[r]||null,{activeAttribute:null});const i=t[e];this._syncIndicator(e),this._clearCrossRootReferences(),i&&this._scrollSelectedTabIntoView(e),this._syncPanels(t,e)}_syncIndicator(t){const e=this.root.querySelector(".nav");if(!e)return;const r=this.getAttribute("variant")||"default",a=r==="indicator";if(!a&&!(r==="indicator-line")){e.removeAttribute("data-indicator-ready"),e.style.removeProperty("--ui-tabs-indicator-x"),e.style.removeProperty("--ui-tabs-indicator-y"),e.style.removeProperty("--ui-tabs-indicator-w"),e.style.removeProperty("--ui-tabs-indicator-h");return}const s=this.root.querySelector(`.tab[data-index="${t}"]`);if(!s){e.removeAttribute("data-indicator-ready");return}const l=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",c=getComputedStyle(this).direction==="rtl";let n=s.offsetLeft,u=s.offsetTop,o=s.offsetWidth,b=s.offsetHeight;a?(n+=2,u+=2,o=Math.max(0,o-4),b=Math.max(0,b-4)):l==="vertical"?(u+=5,b=Math.max(8,b-10),o=3,n+=c?s.offsetWidth-3-2:2):(n+=8,o=Math.max(12,o-16),b=2,u+=s.offsetHeight-2-2),e.style.setProperty("--ui-tabs-indicator-x",`${n}px`),e.style.setProperty("--ui-tabs-indicator-y",`${u}px`),e.style.setProperty("--ui-tabs-indicator-w",`${o}px`),e.style.setProperty("--ui-tabs-indicator-h",`${b}px`),e.setAttribute("data-indicator-ready","true")}_clearCrossRootReferences(){this.removeAttribute("aria-activedescendant"),this.removeAttribute("aria-controls")}_syncPanels(t,e){const r=this._sourcePanels(),a=this.root.querySelector(".panel-wrap");a&&(r.length?a.removeAttribute("hidden"):a.setAttribute("hidden","")),this._isSyncing=!0;try{r.forEach((i,s)=>{const l=t[s],c=s===e;i.id=l?.panelId||`${this._uid}-panel-${s}`,i.setAttribute("role","tabpanel"),i.setAttribute("tabindex",c?"0":"-1"),i.setAttribute("aria-hidden",c?"false":"true"),l&&(i.getAttribute("aria-labelledby")===l.tabId&&i.removeAttribute("aria-labelledby"),i.hasAttribute("aria-labelledby")||i.hasAttribute("aria-label")&&!i.hasAttribute(f)||(i.setAttribute("aria-label",l.label),i.setAttribute(f,""))),c?i.removeAttribute("hidden"):i.setAttribute("hidden","")})}finally{this._isSyncing=!1}}_enabledIndices(t){return t.filter(e=>!e.disabled).map(e=>e.index)}_resolveFocusIndex(t,e){const r=d.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:e,getDisabled:a=>a.disabled});return this._focusIndex=r,r}_onWindowResize(){this._syncSelectionUi()}_focusTab(t){this._focusIndex=t;const e=this.root.querySelector(`.tab[data-index="${t}"]`),r=Array.from(this.root.querySelectorAll(".tab"));d.syncRovingTabStops(r,e,{activeAttribute:null}),d.focusRovingItem(e)}_scrollSelectedTabIntoView(t){const e=this.root.querySelector(".nav"),r=this.root.querySelector(`.tab[data-index="${t}"]`);if(!e||!r)return;const a=this.getAttribute("orientation")!=="vertical",i=typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;typeof r.scrollIntoView=="function"&&r.scrollIntoView({behavior:i?"auto":"smooth",block:"nearest",inline:a?"center":"nearest"})}_onClick(t){const r=t.target?.closest(".tab");if(!r||r.disabled)return;const a=Number(r.getAttribute("data-index"));if(!Number.isFinite(a))return;const i=this._tabsModel();this._setSelectedByIndex(i,a,!0)}_onKeyDown(t){const r=t.target?.closest(".tab");if(!r)return;const a=this._tabsModel();if(!a.length)return;const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",s=this.getAttribute("activation")==="manual"?"manual":"auto",l=!this.hasAttribute("loop")||g(this.getAttribute("loop")),c=getComputedStyle(this).direction==="rtl",n=Number(r.getAttribute("data-index"));if(!Number.isFinite(n))return;const u=o=>{const b=d.moveRovingFocusIndex(a,n,o,{wrap:l,fallbackIndex:this._resolveFocusIndex(a,this._resolveSelectedIndex(a)),getDisabled:h=>h.disabled});b!=null&&(this._focusTab(b),s==="auto"?this._setSelectedByIndex(a,b,!0):this._emit("focus",a,b))};if(i==="horizontal"&&(t.key==="ArrowRight"&&!c||t.key==="ArrowLeft"&&c)||i==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),u(1);return}if(i==="horizontal"&&(t.key==="ArrowLeft"&&!c||t.key==="ArrowRight"&&c)||i==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),u(-1);return}if(t.key==="Home"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"first",b=>b.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}if(t.key==="End"){t.preventDefault();const o=d.getRovingFocusBoundaryIndex(a,"last",b=>b.disabled);if(o<0)return;this._focusTab(o),s==="auto"?this._setSelectedByIndex(a,o,!0):this._emit("focus",a,o);return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._setSelectedByIndex(a,n,!0))}render(){const t=this._tabsModel(),e=this._resolveSelectedIndex(t),r=this._resolveFocusIndex(t,e);this._syncSelectedAttributes(t,e);const a=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",i=(this.getAttribute("aria-label")||"").trim(),s=(this.getAttribute("aria-labelledby")||"").trim(),l=(i?` aria-label="${p(i)}"`:"")+(s?` aria-labelledby="${p(s)}"`:""),c=t.map(n=>{const u=n.index===e,o=n.icon?`<span class="tab-icon" aria-hidden="true">${p(n.icon)}</span>`:"";return`
           <button
             type="button"
             class="tab"
             part="tab"
-            id="${o.tabId}"
+            id="${n.tabId}"
             role="tab"
-            data-index="${o.index}"
+            data-index="${n.index}"
             aria-selected="${u?"true":"false"}"
-            aria-disabled="${o.disabled?"true":"false"}"
-            tabindex="${o.index===r&&!o.disabled?"0":"-1"}"
-            ${o.disabled?"disabled":""}
+            aria-disabled="${n.disabled?"true":"false"}"
+            tabindex="${n.index===r&&!n.disabled?"0":"-1"}"
+            ${n.disabled?"disabled":""}
           >
-            ${n}
-            <span class="tab-label">${p(o.label)}</span>
+            ${o}
+            <span class="tab-label">${p(n.label)}</span>
           </button>
         `}).join("");this.setContent(`
       <style>${_}</style>
       <section class="shell" part="shell">
-        <div class="nav" role="tablist" aria-orientation="${a}"${c} part="nav">
+        <div class="nav" role="tablist" aria-orientation="${a}"${l} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
-          ${b}
+          ${c}
         </div>
         <div class="panel-wrap" part="panel-wrap" aria-live="polite">
           <slot name="panel"></slot>