@editora/ui-core 0.1.25 → 0.2.1

package/dist/tabs.esm.js

@@ -8,7 +8,9 @@ const k = `
     --ui-tabs-text: var(--ui-color-text, #0f172a);
     --ui-tabs-muted: var(--ui-color-muted, #526175);
     --ui-tabs-accent: var(--ui-tabs-active-bg, var(--ui-color-primary, #2563eb));
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    /* The accent as text: readable on the surface, unlike the accent fill itself (light amber, for one). */
+    --ui-tabs-accent-text: var(--ui-color-accent-text, var(--ui-tabs-accent));
+    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-tabs-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-tabs-indicator-bg: color-mix(in srgb, var(--ui-tabs-accent) 16%, transparent);
     --ui-tabs-indicator-border: color-mix(in srgb, var(--ui-tabs-accent) 32%, transparent);
@@ -97,7 +99,7 @@ const k = `
 
   .tab:hover {
     background: color-mix(in srgb, var(--ui-tabs-accent) 10%, transparent);
-    color: color-mix(in srgb, var(--ui-tabs-accent) 82%, #0f172a 18%);
+    color: color-mix(in srgb, var(--ui-tabs-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   .tab[aria-selected="true"] {
@@ -108,7 +110,7 @@ const k = `
 
   .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 {
@@ -214,6 +216,23 @@ const k = `
     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;
@@ -301,7 +320,7 @@ const k = `
     --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
     --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 76%, #0f172a 24%);
     --ui-tabs-muted: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 94%, transparent);
-    --ui-tabs-active-text: color-mix(in srgb, var(--ui-tabs-accent) 78%, #0f172a 22%);
+    --ui-tabs-active-text: var(--ui-tabs-accent-text);
     --ui-tabs-focus: color-mix(in srgb, var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff)) 72%, var(--ui-tabs-accent));
   }
 
@@ -311,7 +330,7 @@ const k = `
   }
 
   :host([variant="solid"]) .tab[aria-selected="true"] {
-    background: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
+    background: var(--ui-color-surface, #ffffff);
     border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
     color: var(--ui-tabs-active-text);
   }
@@ -344,30 +363,83 @@ const k = `
     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 {
@@ -436,14 +508,17 @@ const k = `
 
   :host([tone="success"]) {
     --ui-tabs-accent: var(--ui-color-success, #15803d);
+    --ui-tabs-accent-text: var(--ui-color-success-text, var(--ui-tabs-accent));
   }
 
   :host([tone="warning"]) {
     --ui-tabs-accent: var(--ui-color-warning, #b45309);
+    --ui-tabs-accent-text: var(--ui-color-warning-text, var(--ui-tabs-accent));
   }
 
   :host([tone="danger"]) {
     --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+    --ui-tabs-accent-text: var(--ui-color-danger-text, var(--ui-tabs-accent));
   }
 
   :host([headless]) .nav,
@@ -486,7 +561,7 @@ const k = `
     }
   }
 `, g = "data-ui-tabs-auto-label";
-function v(d) {
+function h(d) {
   return String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function x(d) {
@@ -547,8 +622,8 @@ class I extends y {
   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) {
+  attributeChangedCallback(t, a, r) {
+    if (a !== r) {
       if (t === "selected" || t === "value") {
         this._isSyncingSelectionAttributes || this._syncSelectionUi();
         return;
@@ -560,8 +635,8 @@ class I extends y {
     return this.getAttribute("selected") || "0";
   }
   set selected(t) {
-    const e = String(t);
-    e ? this.setAttribute("selected", e) : this.removeAttribute("selected");
+    const a = String(t);
+    a ? this.setAttribute("selected", a) : this.removeAttribute("selected");
   }
   _sourceTabs() {
     return Array.from(this.querySelectorAll('[slot="tab"]'));
@@ -570,55 +645,55 @@ class I extends y {
     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") || x(t.getAttribute("data-disabled")), b = `${this._uid}-tab-${e}`, c = `${this._uid}-panel-${e}`;
-      return { index: e, value: r, label: a, icon: i, disabled: s, tabId: b, panelId: c };
+    return this._sourceTabs().map((t, a) => {
+      const r = t.getAttribute("data-value") || t.getAttribute("value") || String(a), e = t.getAttribute("data-label") || t.textContent?.trim() || `Tab ${a + 1}`, i = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || x(t.getAttribute("data-disabled")), l = `${this._uid}-tab-${a}`, c = `${this._uid}-panel-${a}`;
+      return { index: a, value: r, label: e, icon: i, disabled: s, tabId: l, panelId: c };
     });
   }
   _resolveSelectedIndex(t) {
     if (!t.length) return -1;
-    const e = this.getAttribute("selected"), r = this.getAttribute("value"), a = this._sourceTabs();
+    const a = this.getAttribute("selected"), r = this.getAttribute("value"), e = this._sourceTabs();
     let i = -1;
-    if (e != null && e !== "") {
-      const s = Number(e);
-      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((b) => b.value === e);
+    if (a != null && a !== "") {
+      const s = Number(a);
+      Number.isFinite(s) ? i = Math.trunc(s) : i = t.findIndex((l) => l.value === a);
     }
-    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, b) => !!a[b]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
+    return i < 0 && r && (i = t.findIndex((s) => s.value === r)), i < 0 && (i = t.findIndex((s, l) => !!e[l]?.hasAttribute("data-active") && !s.disabled)), (i < 0 || !t[i] || t[i].disabled) && (i = t.findIndex((s) => !s.disabled)), i;
   }
-  _syncSelectedAttributes(t, e) {
-    const r = t[e];
+  _syncSelectedAttributes(t, a) {
+    const r = t[a];
     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);
+      this.getAttribute("selected") !== String(a) && this.setAttribute("selected", String(a)), 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;
+  _emit(t, a, r) {
+    const e = a[r];
+    if (!e) return;
     const i = {
       selected: r,
       index: r,
-      value: a.value,
-      label: a.label,
-      tabId: a.tabId,
-      panelId: a.panelId
+      value: e.value,
+      label: e.label,
+      tabId: e.tabId,
+      panelId: e.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);
+  _setSelectedByIndex(t, a, r) {
+    const e = t[a];
+    if (!e || e.disabled) return;
+    if (this._resolveSelectedIndex(t) === a) {
+      this._focusTab(a);
       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));
+    this._focusIndex = a, this.setAttribute("selected", String(a)), this.setAttribute("value", e.value), r && (this._emit("change", t, a), this._emit("select", t, a));
   }
   _syncSelectionUi() {
     if (!this.isConnected) return;
@@ -628,58 +703,58 @@ class I extends y {
     }
     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, b) => {
-      const c = t[b];
+    const a = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, a);
+    this._syncSelectedAttributes(t, a);
+    const e = Array.from(this.root.querySelectorAll(".tab"));
+    e.forEach((s, l) => {
+      const c = t[l];
       if (!c) return;
-      const o = b === e;
-      s.setAttribute("aria-selected", o ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
-    }), p(a, a[r] || null, { activeAttribute: null });
-    const i = t[e];
-    this._syncIndicator(e), this._clearCrossRootReferences(), i && this._scrollSelectedTabIntoView(e), this._syncPanels(t, e);
+      const n = l === a;
+      s.setAttribute("aria-selected", n ? "true" : "false"), s.setAttribute("aria-disabled", c.disabled ? "true" : "false"), c.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+    }), p(e, e[r] || null, { activeAttribute: null });
+    const i = t[a];
+    this._syncIndicator(a), this._clearCrossRootReferences(), i && this._scrollSelectedTabIntoView(a), this._syncPanels(t, a);
   }
   _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");
+    const a = this.root.querySelector(".nav");
+    if (!a) return;
+    const r = this.getAttribute("variant") || "default", e = r === "indicator";
+    if (!e && !(r === "indicator-line")) {
+      a.removeAttribute("data-indicator-ready"), a.style.removeProperty("--ui-tabs-indicator-x"), a.style.removeProperty("--ui-tabs-indicator-y"), a.style.removeProperty("--ui-tabs-indicator-w"), a.style.removeProperty("--ui-tabs-indicator-h");
       return;
     }
     const s = this.root.querySelector(`.tab[data-index="${t}"]`);
     if (!s) {
-      e.removeAttribute("data-indicator-ready");
+      a.removeAttribute("data-indicator-ready");
       return;
     }
-    const b = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
-    let o = s.offsetLeft, u = s.offsetTop, n = s.offsetWidth, l = s.offsetHeight;
-    a ? (o += 2, u += 2, n = Math.max(0, n - 4), l = Math.max(0, l - 4)) : b === "vertical" ? (u += 5, l = Math.max(8, l - 10), n = 3, o += c ? s.offsetWidth - 3 - 2 : 2) : (o += 8, n = Math.max(12, n - 16), l = 2, u += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${o}px`), e.style.setProperty("--ui-tabs-indicator-y", `${u}px`), e.style.setProperty("--ui-tabs-indicator-w", `${n}px`), e.style.setProperty("--ui-tabs-indicator-h", `${l}px`), e.setAttribute("data-indicator-ready", "true");
+    const l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", c = getComputedStyle(this).direction === "rtl";
+    let n = s.offsetLeft, u = s.offsetTop, o = s.offsetWidth, b = s.offsetHeight;
+    e ? (n += 2, u += 2, o = Math.max(0, o - 4), b = Math.max(0, b - 4)) : l === "vertical" ? (u += 5, b = Math.max(8, b - 10), o = 3, n += c ? s.offsetWidth - 3 - 2 : 2) : (n += 8, o = Math.max(12, o - 16), b = 2, u += s.offsetHeight - 2 - 2), a.style.setProperty("--ui-tabs-indicator-x", `${n}px`), a.style.setProperty("--ui-tabs-indicator-y", `${u}px`), a.style.setProperty("--ui-tabs-indicator-w", `${o}px`), a.style.setProperty("--ui-tabs-indicator-h", `${b}px`), a.setAttribute("data-indicator-ready", "true");
   }
   _clearCrossRootReferences() {
     this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls");
   }
-  _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;
+  _syncPanels(t, a) {
+    const r = this._sourcePanels(), e = this.root.querySelector(".panel-wrap");
+    e && (r.length ? e.removeAttribute("hidden") : e.setAttribute("hidden", "")), this._isSyncing = !0;
     try {
       r.forEach((i, s) => {
-        const b = t[s], c = s === e;
-        i.id = b?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), b && (i.getAttribute("aria-labelledby") === b.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", b.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
+        const l = t[s], c = s === a;
+        i.id = l?.panelId || `${this._uid}-panel-${s}`, i.setAttribute("role", "tabpanel"), i.setAttribute("tabindex", c ? "0" : "-1"), i.setAttribute("aria-hidden", c ? "false" : "true"), l && (i.getAttribute("aria-labelledby") === l.tabId && i.removeAttribute("aria-labelledby"), i.hasAttribute("aria-labelledby") || i.hasAttribute("aria-label") && !i.hasAttribute(g) || (i.setAttribute("aria-label", l.label), i.setAttribute(g, ""))), c ? i.removeAttribute("hidden") : i.setAttribute("hidden", "");
       });
     } finally {
       this._isSyncing = !1;
     }
   }
   _enabledIndices(t) {
-    return t.filter((e) => !e.disabled).map((e) => e.index);
+    return t.filter((a) => !a.disabled).map((a) => a.index);
   }
-  _resolveFocusIndex(t, e) {
+  _resolveFocusIndex(t, a) {
     const r = _(t, {
       activeIndex: this._focusIndex,
-      selectedIndex: e,
-      getDisabled: (a) => a.disabled
+      selectedIndex: a,
+      getDisabled: (e) => e.disabled
     });
     return this._focusIndex = r, r;
   }
@@ -688,41 +763,41 @@ class I extends y {
   }
   _focusTab(t) {
     this._focusIndex = t;
-    const e = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
-    p(r, e, { activeAttribute: null }), w(e);
+    const a = this.root.querySelector(`.tab[data-index="${t}"]`), r = Array.from(this.root.querySelectorAll(".tab"));
+    p(r, a, { activeAttribute: null }), w(a);
   }
   _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;
+    const a = this.root.querySelector(".nav"), r = this.root.querySelector(`.tab[data-index="${t}"]`);
+    if (!a || !r) return;
+    const e = this.getAttribute("orientation") !== "vertical", i = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     typeof r.scrollIntoView == "function" && r.scrollIntoView({
       behavior: i ? "auto" : "smooth",
       block: "nearest",
-      inline: a ? "center" : "nearest"
+      inline: e ? "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 e = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(e)) return;
     const i = this._tabsModel();
-    this._setSelectedByIndex(i, a, !0);
+    this._setSelectedByIndex(i, e, !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", b = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", o = Number(r.getAttribute("data-index"));
-    if (!Number.isFinite(o)) return;
-    const u = (n) => {
-      const l = A(a, o, n, {
-        wrap: b,
-        fallbackIndex: this._resolveFocusIndex(a, this._resolveSelectedIndex(a)),
-        getDisabled: (h) => h.disabled
+    const e = this._tabsModel();
+    if (!e.length) return;
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", l = !this.hasAttribute("loop") || x(this.getAttribute("loop")), c = getComputedStyle(this).direction === "rtl", n = Number(r.getAttribute("data-index"));
+    if (!Number.isFinite(n)) return;
+    const u = (o) => {
+      const b = A(e, n, o, {
+        wrap: l,
+        fallbackIndex: this._resolveFocusIndex(e, this._resolveSelectedIndex(e)),
+        getDisabled: (v) => v.disabled
       });
-      l != null && (this._focusTab(l), s === "auto" ? this._setSelectedByIndex(a, l, !0) : this._emit("focus", a, l));
+      b != null && (this._focusTab(b), s === "auto" ? this._setSelectedByIndex(e, b, !0) : this._emit("focus", e, b));
     };
     if (i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown") {
       t.preventDefault(), u(1);
@@ -734,47 +809,47 @@ class I extends y {
     }
     if (t.key === "Home") {
       t.preventDefault();
-      const n = f(a, "first", (l) => l.disabled);
-      if (n < 0) return;
-      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
+      const o = f(e, "first", (b) => b.disabled);
+      if (o < 0) return;
+      this._focusTab(o), s === "auto" ? this._setSelectedByIndex(e, o, !0) : this._emit("focus", e, o);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const n = f(a, "last", (l) => l.disabled);
-      if (n < 0) return;
-      this._focusTab(n), s === "auto" ? this._setSelectedByIndex(a, n, !0) : this._emit("focus", a, n);
+      const o = f(e, "last", (b) => b.disabled);
+      if (o < 0) return;
+      this._focusTab(o), s === "auto" ? this._setSelectedByIndex(e, o, !0) : this._emit("focus", e, o);
       return;
     }
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(a, o, !0));
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._setSelectedByIndex(e, 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(), b = (i ? ` aria-label="${v(i)}"` : "") + (s ? ` aria-labelledby="${v(s)}"` : ""), c = t.map((o) => {
-      const u = o.index === e, n = o.icon ? `<span class="tab-icon" aria-hidden="true">${v(o.icon)}</span>` : "";
+    const t = this._tabsModel(), a = this._resolveSelectedIndex(t), r = this._resolveFocusIndex(t, a);
+    this._syncSelectedAttributes(t, a);
+    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = (this.getAttribute("aria-label") || "").trim(), s = (this.getAttribute("aria-labelledby") || "").trim(), l = (i ? ` aria-label="${h(i)}"` : "") + (s ? ` aria-labelledby="${h(s)}"` : ""), c = t.map((n) => {
+      const u = n.index === a, o = n.icon ? `<span class="tab-icon" aria-hidden="true">${h(n.icon)}</span>` : "";
       return `
           <button
             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">${v(o.label)}</span>
+            ${o}
+            <span class="tab-label">${h(n.label)}</span>
           </button>
         `;
     }).join("");
     this.setContent(`
       <style>${k}</style>
       <section class="shell" part="shell">
-        <div class="nav" role="tablist" aria-orientation="${a}"${b} part="nav">
+        <div class="nav" role="tablist" aria-orientation="${e}"${l} part="nav">
           <span class="indicator" part="indicator" aria-hidden="true"></span>
           ${c}
         </div>
@@ -783,7 +858,7 @@ class I extends y {
         </div>
       </section>
       <slot class="source-tabs" name="tab"></slot>
-    `), this._clearCrossRootReferences(), this._syncIndicator(e), this._syncPanels(t, e);
+    `), this._clearCrossRootReferences(), this._syncIndicator(a), this._syncPanels(t, a);
   }
 }
 typeof customElements < "u" && !customElements.get("ui-tabs") && customElements.define("ui-tabs", I);