@editora/ui-core 0.1.8 → 0.1.10

package/dist/tabs.esm.js

@@ -0,0 +1,808 @@
+import { E as m } from "./ElementBase-909688f3.mjs";
+import { s as v, r as y, f as _, g as p, m as w } from "./roving-focus-group-4350c9a7.mjs";
+const A = `
+  :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-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);
+    --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);
+    --ui-tabs-indicator-shadow: none;
+    --ui-tabs-indicator-transition: 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
+
+    --ui-tabs-shell-gap: 12px;
+    --ui-tabs-nav-padding: 8px;
+    --ui-tabs-nav-gap: 8px;
+    --ui-tabs-tab-radius: 10px;
+    --ui-tabs-tab-min-h: 38px;
+    --ui-tabs-tab-pad-x: 14px;
+    --ui-tabs-tab-font-size: 13px;
+    --ui-tabs-radius: 12px;
+    --ui-tabs-panel-padding: 14px;
+
+    --ui-tabs-shadow: none;
+    --ui-tabs-elevation: none;
+    --ui-tabs-transition: 170ms cubic-bezier(0.22, 0.8, 0.2, 1);
+
+    color-scheme: light dark;
+    display: block;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-tabs-shell-gap);
+    color: var(--ui-tabs-text);
+  }
+
+  .nav {
+    min-inline-size: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--ui-tabs-nav-gap);
+    padding: var(--ui-tabs-nav-padding);
+    border: 1px solid var(--ui-tabs-border);
+    border-radius: var(--ui-tabs-radius);
+    background: var(--ui-tabs-nav-bg);
+    box-shadow: var(--ui-tabs-elevation);
+    position: relative;
+    isolation: isolate;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    overscroll-behavior-x: contain;
+  }
+
+  .nav::-webkit-scrollbar {
+    block-size: 6px;
+  }
+
+  .nav::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--ui-tabs-border) 70%, transparent);
+    border-radius: 999px;
+  }
+
+  .tab {
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--ui-tabs-muted);
+    border-radius: var(--ui-tabs-tab-radius);
+    min-block-size: var(--ui-tabs-tab-min-h);
+    padding-inline: var(--ui-tabs-tab-pad-x);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font: 600 var(--ui-tabs-tab-font-size)/1.25 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.005em;
+    cursor: pointer;
+    white-space: nowrap;
+    flex: 0 0 auto;
+    position: relative;
+    z-index: 1;
+    transition:
+      background-color var(--ui-tabs-transition),
+      border-color var(--ui-tabs-transition),
+      color var(--ui-tabs-transition),
+      box-shadow var(--ui-tabs-transition),
+      transform var(--ui-tabs-transition);
+  }
+
+  .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%);
+  }
+
+  .tab[aria-selected="true"] {
+    color: var(--ui-tabs-active-text);
+    background: color-mix(in srgb, var(--ui-tabs-accent) 14%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 34%, transparent);
+  }
+
+  .tab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tabs-focus) 28%, transparent);
+  }
+
+  .tab:active {
+    transform: translateY(0.5px);
+  }
+
+  .tab[disabled] {
+    opacity: 0.48;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .tab[disabled]:hover {
+    background: transparent;
+    color: var(--ui-tabs-muted);
+  }
+
+  .tab-icon {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .indicator {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: var(--ui-tabs-indicator-w, 0px);
+    block-size: var(--ui-tabs-indicator-h, 0px);
+    transform: translate(var(--ui-tabs-indicator-x, 0px), var(--ui-tabs-indicator-y, 0px));
+    border-radius: max(4px, calc(var(--ui-tabs-tab-radius) - 2px));
+    background: var(--ui-tabs-indicator-bg);
+    border: 1px solid var(--ui-tabs-indicator-border);
+    box-shadow: var(--ui-tabs-indicator-shadow);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
+    transition:
+      transform var(--ui-tabs-indicator-transition),
+      inline-size var(--ui-tabs-indicator-transition),
+      block-size var(--ui-tabs-indicator-transition),
+      opacity 120ms ease;
+  }
+
+  :host([variant="indicator"]) .tab[aria-selected="true"],
+  :host([variant="indicator-line"]) .tab[aria-selected="true"] {
+    background: transparent;
+    border-color: transparent;
+    color: var(--ui-tabs-active-text);
+  }
+
+  :host([variant="indicator"]) .tab:hover,
+  :host([variant="indicator-line"]) .tab:hover {
+    background: transparent;
+  }
+
+  :host([variant="indicator"]) .nav[data-indicator-ready="true"] .indicator,
+  :host([variant="indicator-line"]) .nav[data-indicator-ready="true"] .indicator {
+    opacity: 1;
+  }
+
+  :host([variant="indicator-line"]) .indicator {
+    background: var(--ui-tabs-accent);
+    border: none;
+    box-shadow: none;
+    border-radius: 999px;
+  }
+
+  .panel-wrap {
+    min-inline-size: 0;
+    border: 1px solid var(--ui-tabs-border);
+    border-radius: var(--ui-tabs-radius);
+    background: var(--ui-tabs-panel-bg);
+    box-shadow: var(--ui-tabs-elevation);
+    padding: var(--ui-tabs-panel-padding);
+  }
+
+  .panel-wrap[hidden] {
+    display: none;
+  }
+
+  .source-tabs {
+    display: none;
+  }
+
+  :host([orientation="vertical"]) .shell {
+    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  :host([orientation="vertical"]) .nav {
+    flex-direction: column;
+    overflow-x: visible;
+    overflow-y: auto;
+    max-block-size: min(70vh, 520px);
+  }
+
+  :host([orientation="vertical"][stretched]) .tab {
+    inline-size: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([stretched]:not([orientation="vertical"])) .tab {
+    flex: 1;
+  }
+
+  :host([size="sm"]) {
+    --ui-tabs-nav-padding: 6px;
+    --ui-tabs-nav-gap: 6px;
+    --ui-tabs-tab-min-h: 32px;
+    --ui-tabs-tab-pad-x: 11px;
+    --ui-tabs-tab-font-size: 12px;
+    --ui-tabs-tab-radius: 8px;
+    --ui-tabs-radius: 10px;
+    --ui-tabs-panel-padding: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-tabs-nav-padding: 10px;
+    --ui-tabs-nav-gap: 10px;
+    --ui-tabs-tab-min-h: 42px;
+    --ui-tabs-tab-pad-x: 16px;
+    --ui-tabs-tab-font-size: 14px;
+    --ui-tabs-tab-radius: 12px;
+    --ui-tabs-radius: 14px;
+    --ui-tabs-panel-padding: 16px;
+  }
+
+  :host([density="compact"]) {
+    --ui-tabs-shell-gap: 8px;
+    --ui-tabs-nav-padding: 4px;
+    --ui-tabs-nav-gap: 4px;
+    --ui-tabs-tab-min-h: 30px;
+    --ui-tabs-tab-pad-x: 10px;
+    --ui-tabs-tab-font-size: 12px;
+    --ui-tabs-panel-padding: 10px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-tabs-shell-gap: 14px;
+    --ui-tabs-nav-padding: 10px;
+    --ui-tabs-nav-gap: 10px;
+    --ui-tabs-tab-min-h: 42px;
+    --ui-tabs-tab-pad-x: 16px;
+    --ui-tabs-tab-font-size: 14px;
+    --ui-tabs-panel-padding: 16px;
+  }
+
+  :host([shape="square"]) {
+    --ui-tabs-tab-radius: 6px;
+    --ui-tabs-radius: 8px;
+  }
+
+  :host([shape="rounded"]) {
+    --ui-tabs-tab-radius: 8px;
+    --ui-tabs-radius: 10px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-tabs-tab-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-tabs-elevation: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-tabs-elevation: 0 2px 4px rgba(15, 23, 42, 0.1), 0 18px 36px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([variant="soft"]) {
+    --ui-tabs-nav-bg: color-mix(in srgb, var(--ui-tabs-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-tabs-panel-bg: color-mix(in srgb, var(--ui-tabs-accent) 4%, var(--ui-color-surface, #ffffff));
+    --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 22%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="outline"]) {
+    --ui-tabs-nav-bg: transparent;
+    --ui-tabs-panel-bg: var(--ui-color-surface, #ffffff);
+    --ui-tabs-border: color-mix(in srgb, var(--ui-tabs-accent) 42%, var(--ui-color-border, #cbd5e1));
+    --ui-tabs-elevation: none;
+  }
+
+  :host([variant="outline"]) .tab[aria-selected="true"] {
+    background: color-mix(in srgb, var(--ui-tabs-accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 56%, var(--ui-tabs-border));
+  }
+
+  :host([variant="solid"]) {
+    --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-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));
+  }
+
+  :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);
+  }
+
+  :host([variant="solid"]) .tab[aria-selected="true"] {
+    background: var(--ui-color-primary-foreground, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 44%, var(--ui-tabs-border));
+    color: var(--ui-tabs-active-text);
+  }
+
+  :host([variant="ghost"]) .nav,
+  :host([variant="ghost"]) .panel-wrap {
+    border-color: transparent;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([variant="ghost"]) .nav {
+    padding-inline: 0;
+  }
+
+  :host([variant="ghost"]) .tab {
+    border-color: transparent;
+  }
+
+  :host([variant="ghost"]) .tab[aria-selected="true"] {
+    background: color-mix(in srgb, var(--ui-tabs-accent) 14%, transparent);
+    border-color: transparent;
+  }
+
+  :host([variant="glass"]) .nav,
+  :host([variant="glass"]) .panel-wrap {
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 72%, transparent);
+    border-color: color-mix(in srgb, var(--ui-tabs-border) 70%, transparent);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+  }
+
+  :host([variant="underline"]) .nav,
+  :host([variant="line"]) .nav {
+    border-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    box-shadow: none;
+    padding-inline: 0;
+    background: transparent;
+  }
+
+  :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;
+  }
+
+  :host([variant="underline"]) .tab[aria-selected="true"],
+  :host([variant="line"]) .tab[aria-selected="true"] {
+    background: transparent;
+    border-bottom-color: var(--ui-tabs-accent);
+  }
+
+  :host([variant="segmented"]) .nav {
+    background: color-mix(in srgb, var(--ui-color-surface-alt, #e2e8f0) 72%, var(--ui-color-surface, #ffffff));
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="segmented"]) .tab[aria-selected="true"] {
+    background: var(--ui-color-surface, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 28%, var(--ui-color-border, #cbd5e1));
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([variant="cards"]) .nav,
+  :host([variant="cards"]) .panel-wrap {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+  }
+
+  :host([variant="cards"]) .nav {
+    gap: 10px;
+  }
+
+  :host([variant="cards"]) .tab {
+    border-color: color-mix(in srgb, var(--ui-tabs-border) 80%, transparent);
+    background: var(--ui-tabs-nav-bg);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  }
+
+  :host([variant="cards"]) .tab[aria-selected="true"] {
+    border-color: color-mix(in srgb, var(--ui-tabs-accent) 38%, var(--ui-tabs-border));
+    box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-tabs-accent) 18%, transparent);
+  }
+
+  :host([variant="minimal"]) .nav,
+  :host([variant="minimal"]) .panel-wrap,
+  :host([bare]) .nav,
+  :host([bare]) .panel-wrap {
+    border-color: transparent;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([bare]) .nav,
+  :host([variant="minimal"]) .nav {
+    padding-inline: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-tabs-nav-bg: #111827;
+    --ui-tabs-panel-bg: #0f172a;
+    --ui-tabs-border: #334155;
+    --ui-tabs-text: #e2e8f0;
+    --ui-tabs-muted: #94a3b8;
+    --ui-tabs-accent: var(--ui-tabs-active-bg, #93c5fd);
+    --ui-tabs-active-text: #dbeafe;
+    --ui-tabs-focus: #93c5fd;
+    --ui-tabs-indicator-bg: color-mix(in srgb, #93c5fd 24%, transparent);
+    --ui-tabs-indicator-border: color-mix(in srgb, #93c5fd 46%, transparent);
+    --ui-tabs-indicator-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
+    --ui-tabs-shadow: 0 16px 34px rgba(2, 6, 23, 0.42), 0 32px 54px rgba(2, 6, 23, 0.4);
+  }
+
+  :host([tone="success"]) {
+    --ui-tabs-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-tabs-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-tabs-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([headless]) .nav,
+  :host([headless]) .panel-wrap {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab,
+    .nav {
+      transition: none !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .nav,
+    .panel-wrap {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-tabs-nav-bg: Canvas;
+      --ui-tabs-panel-bg: Canvas;
+      --ui-tabs-border: CanvasText;
+      --ui-tabs-text: CanvasText;
+      --ui-tabs-muted: CanvasText;
+      --ui-tabs-accent: Highlight;
+      --ui-tabs-focus: Highlight;
+      --ui-tabs-elevation: none;
+    }
+
+    .tab[aria-selected="true"] {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+  }
+`;
+function f(u) {
+  return String(u).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function g(u) {
+  if (u == null)
+    return !1;
+  const t = String(u).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+const k = /* @__PURE__ */ new Set([
+  "orientation",
+  "activation",
+  "headless",
+  "variant",
+  "size",
+  "density",
+  "tone",
+  "stretched",
+  "shape",
+  "elevation",
+  "bare"
+]);
+class S extends m {
+  constructor() {
+    super(), this._uid = `ui-tabs-${Math.random().toString(36).slice(2, 9)}`, this._observer = null, this._resizeObserver = null, this._isSyncing = !1, this._isSyncingSelectionAttributes = !1, this._focusIndex = -1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "selected",
+      "value",
+      "orientation",
+      "activation",
+      "headless",
+      "variant",
+      "size",
+      "density",
+      "tone",
+      "stretched",
+      "shape",
+      "elevation",
+      "loop",
+      "bare"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(() => {
+      this._isSyncing || this.requestRender();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0,
+      attributeFilter: ["slot", "data-label", "data-value", "data-icon", "data-disabled", "disabled", "data-active"]
+    }), typeof ResizeObserver < "u" ? (this._resizeObserver = new ResizeObserver(() => this._syncSelectionUi()), this._resizeObserver.observe(this)) : window.addEventListener("resize", this._onWindowResize), this._syncSelectionUi();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this._observer && (this._observer.disconnect(), this._observer = null), this._resizeObserver ? (this._resizeObserver.disconnect(), this._resizeObserver = null) : window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "selected" || t === "value") {
+        this._isSyncingSelectionAttributes || this._syncSelectionUi();
+        return;
+      }
+      k.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) => {
+      var b;
+      const i = t.getAttribute("data-value") || t.getAttribute("value") || String(e), a = t.getAttribute("data-label") || ((b = t.textContent) == null ? void 0 : b.trim()) || `Tab ${e + 1}`, r = t.getAttribute("data-icon") || "", s = t.hasAttribute("disabled") || g(t.getAttribute("data-disabled")), n = `${this._uid}-tab-${e}`, o = `${this._uid}-panel-${e}`;
+      return { index: e, value: i, label: a, icon: r, disabled: s, tabId: n, panelId: o };
+    });
+  }
+  _resolveSelectedIndex(t) {
+    if (!t.length)
+      return -1;
+    const e = this.getAttribute("selected"), i = this.getAttribute("value"), a = this._sourceTabs();
+    let r = -1;
+    if (e != null && e !== "") {
+      const s = Number(e);
+      Number.isFinite(s) ? r = Math.trunc(s) : r = t.findIndex((n) => n.value === e);
+    }
+    return r < 0 && i && (r = t.findIndex((s) => s.value === i)), r < 0 && (r = t.findIndex((s, n) => {
+      var o;
+      return !!((o = a[n]) != null && o.hasAttribute("data-active")) && !s.disabled;
+    })), (r < 0 || !t[r] || t[r].disabled) && (r = t.findIndex((s) => !s.disabled)), r;
+  }
+  _syncSelectedAttributes(t, e) {
+    const i = t[e];
+    this._isSyncingSelectionAttributes = !0;
+    try {
+      if (!i) {
+        this.removeAttribute("selected"), this.removeAttribute("value");
+        return;
+      }
+      this.getAttribute("selected") !== String(e) && this.setAttribute("selected", String(e)), this.getAttribute("value") !== i.value && this.setAttribute("value", i.value);
+    } finally {
+      this._isSyncingSelectionAttributes = !1;
+    }
+  }
+  _emit(t, e, i) {
+    const a = e[i];
+    if (!a)
+      return;
+    const r = {
+      selected: i,
+      index: i,
+      value: a.value,
+      label: a.label,
+      tabId: a.tabId,
+      panelId: a.panelId
+    };
+    this.dispatchEvent(new CustomEvent(t, { detail: r, bubbles: !0, composed: !0 }));
+  }
+  _setSelectedByIndex(t, e, i) {
+    const a = t[e];
+    if (!a || a.disabled)
+      return;
+    if (this._resolveSelectedIndex(t) === e) {
+      this._focusTab(e);
+      return;
+    }
+    this._focusIndex = e, this.setAttribute("selected", String(e)), this.setAttribute("value", a.value), i && (this._emit("change", t, e), this._emit("select", t, e));
+  }
+  _syncSelectionUi() {
+    if (!this.isConnected)
+      return;
+    if (!this.root.querySelector(".nav")) {
+      this.requestRender();
+      return;
+    }
+    const t = this._tabsModel();
+    if (!t.length)
+      return;
+    const e = this._resolveSelectedIndex(t), i = this._resolveFocusIndex(t, e);
+    this._syncSelectedAttributes(t, e);
+    const a = Array.from(this.root.querySelectorAll(".tab"));
+    a.forEach((s, n) => {
+      const o = t[n];
+      if (!o)
+        return;
+      const b = n === e;
+      s.setAttribute("aria-selected", b ? "true" : "false"), s.setAttribute("aria-controls", o.panelId), s.setAttribute("aria-disabled", o.disabled ? "true" : "false"), o.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled");
+    }), v(a, a[i] || null, { activeAttribute: null });
+    const r = t[e];
+    this._syncIndicator(e), r ? (this.setAttribute("aria-activedescendant", r.tabId), this.setAttribute("aria-controls", r.panelId), this._scrollSelectedTabIntoView(e)) : (this.removeAttribute("aria-activedescendant"), this.removeAttribute("aria-controls")), this._syncPanels(t, e);
+  }
+  _syncIndicator(t) {
+    const e = this.root.querySelector(".nav");
+    if (!e)
+      return;
+    const i = this.getAttribute("variant") || "default", a = i === "indicator";
+    if (!a && !(i === "indicator-line")) {
+      e.removeAttribute("data-indicator-ready"), e.style.removeProperty("--ui-tabs-indicator-x"), e.style.removeProperty("--ui-tabs-indicator-y"), e.style.removeProperty("--ui-tabs-indicator-w"), e.style.removeProperty("--ui-tabs-indicator-h");
+      return;
+    }
+    const s = this.root.querySelector(`.tab[data-index="${t}"]`);
+    if (!s) {
+      e.removeAttribute("data-indicator-ready");
+      return;
+    }
+    const n = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", o = getComputedStyle(this).direction === "rtl";
+    let b = s.offsetLeft, d = s.offsetTop, c = s.offsetWidth, l = s.offsetHeight;
+    a ? (b += 2, d += 2, c = Math.max(0, c - 2 * 2), l = Math.max(0, l - 2 * 2)) : n === "vertical" ? (d += 5, l = Math.max(8, l - 5 * 2), c = 3, b += o ? s.offsetWidth - 3 - 2 : 2) : (b += 8, c = Math.max(12, c - 8 * 2), l = 2, d += s.offsetHeight - 2 - 2), e.style.setProperty("--ui-tabs-indicator-x", `${b}px`), e.style.setProperty("--ui-tabs-indicator-y", `${d}px`), e.style.setProperty("--ui-tabs-indicator-w", `${c}px`), e.style.setProperty("--ui-tabs-indicator-h", `${l}px`), e.setAttribute("data-indicator-ready", "true");
+  }
+  _syncPanels(t, e) {
+    const i = this._sourcePanels(), a = this.root.querySelector(".panel-wrap");
+    a && (i.length ? a.removeAttribute("hidden") : a.setAttribute("hidden", "")), this._isSyncing = !0;
+    try {
+      i.forEach((r, s) => {
+        const n = t[s], o = s === e;
+        r.id = (n == null ? void 0 : n.panelId) || `${this._uid}-panel-${s}`, r.setAttribute("role", "tabpanel"), r.setAttribute("tabindex", o ? "0" : "-1"), r.setAttribute("aria-hidden", o ? "false" : "true"), n && r.setAttribute("aria-labelledby", n.tabId), o ? r.removeAttribute("hidden") : r.setAttribute("hidden", "");
+      });
+    } finally {
+      this._isSyncing = !1;
+    }
+  }
+  _enabledIndices(t) {
+    return t.filter((e) => !e.disabled).map((e) => e.index);
+  }
+  _resolveFocusIndex(t, e) {
+    const i = y(t, {
+      activeIndex: this._focusIndex,
+      selectedIndex: e,
+      getDisabled: (a) => a.disabled
+    });
+    return this._focusIndex = i, i;
+  }
+  _onWindowResize() {
+    this._syncSelectionUi();
+  }
+  _focusTab(t) {
+    this._focusIndex = t;
+    const e = this.root.querySelector(`.tab[data-index="${t}"]`), i = Array.from(this.root.querySelectorAll(".tab"));
+    v(i, e, { activeAttribute: null }), _(e);
+  }
+  _scrollSelectedTabIntoView(t) {
+    const e = this.root.querySelector(".nav"), i = this.root.querySelector(`.tab[data-index="${t}"]`);
+    if (!e || !i)
+      return;
+    const a = this.getAttribute("orientation") !== "vertical", r = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    typeof i.scrollIntoView == "function" && i.scrollIntoView({
+      behavior: r ? "auto" : "smooth",
+      block: "nearest",
+      inline: a ? "center" : "nearest"
+    });
+  }
+  _onClick(t) {
+    const e = t.target, i = e == null ? void 0 : e.closest(".tab");
+    if (!i || i.disabled)
+      return;
+    const a = Number(i.getAttribute("data-index"));
+    if (!Number.isFinite(a))
+      return;
+    const r = this._tabsModel();
+    this._setSelectedByIndex(r, a, !0);
+  }
+  _onKeyDown(t) {
+    const e = t.target, i = e == null ? void 0 : e.closest(".tab");
+    if (!i)
+      return;
+    const a = this._tabsModel();
+    if (!a.length)
+      return;
+    const r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", s = this.getAttribute("activation") === "manual" ? "manual" : "auto", n = !this.hasAttribute("loop") || g(this.getAttribute("loop")), o = getComputedStyle(this).direction === "rtl", b = Number(i.getAttribute("data-index"));
+    if (!Number.isFinite(b))
+      return;
+    const d = (c) => {
+      const l = w(a, b, c, {
+        wrap: n,
+        fallbackIndex: this._resolveFocusIndex(a, this._resolveSelectedIndex(a)),
+        getDisabled: (h) => h.disabled
+      });
+      l != null && (this._focusTab(l), s === "auto" ? this._setSelectedByIndex(a, l, !0) : this._emit("focus", a, l));
+    };
+    if (r === "horizontal" && (t.key === "ArrowRight" && !o || t.key === "ArrowLeft" && o) || r === "vertical" && t.key === "ArrowDown") {
+      t.preventDefault(), d(1);
+      return;
+    }
+    if (r === "horizontal" && (t.key === "ArrowLeft" && !o || t.key === "ArrowRight" && o) || r === "vertical" && t.key === "ArrowUp") {
+      t.preventDefault(), d(-1);
+      return;
+    }
+    if (t.key === "Home") {
+      t.preventDefault();
+      const c = p(a, "first", (l) => l.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 = p(a, "last", (l) => l.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, b, !0));
+  }
+  render() {
+    const t = this._tabsModel(), e = this._resolveSelectedIndex(t), i = this._resolveFocusIndex(t, e);
+    this._syncSelectedAttributes(t, e);
+    const a = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", r = t.map((n) => {
+      const o = n.index === e, b = n.icon ? `<span class="tab-icon" aria-hidden="true">${f(n.icon)}</span>` : "";
+      return `
+          <button
+            type="button"
+            class="tab"
+            part="tab"
+            id="${n.tabId}"
+            role="tab"
+            data-index="${n.index}"
+            aria-selected="${o ? "true" : "false"}"
+            aria-controls="${n.panelId}"
+            aria-disabled="${n.disabled ? "true" : "false"}"
+            tabindex="${n.index === i && !n.disabled ? "0" : "-1"}"
+            ${n.disabled ? "disabled" : ""}
+          >
+            ${b}
+            <span class="tab-label">${f(n.label)}</span>
+          </button>
+        `;
+    }).join("");
+    this.setContent(`
+      <style>${A}</style>
+      <section class="shell" part="shell">
+        <div class="nav" role="tablist" aria-orientation="${a}" part="nav">
+          <span class="indicator" part="indicator" aria-hidden="true"></span>
+          ${r}
+        </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", S);
+export {
+  S as UITabs
+};