@orangelogic/design-system 2.19.0-pr77202.21

package/library/chunks/tab-group.3F6gRchD.js

@@ -0,0 +1,1071 @@
+import $ from "../components/resize-observer.js";
+import { i as z, n as g, C as B, x as A, c as R } from "./custom-element.fmLrnDZr.js";
+import { c as L } from "./component.styles.DtouHn2g.js";
+import { L as W } from "./i18n.C6c6_pqI.js";
+import { s as D } from "./scroll.DwPiX2Ox.js";
+import { w as _ } from "./watch.BCJD77bD.js";
+import { r as f } from "./state.Dt9F_SuS.js";
+import { t as E } from "./event-options.CYHYGOd8.js";
+import { e as m } from "./query.BBf1UFkC.js";
+import { e as x } from "./class-map.DqNfBvJI.js";
+import { i as O } from "./guard.L-Ctqt3S.js";
+import { o as U } from "./map.D8heArFD.js";
+import { o as C } from "./style-map.lEJHEwk3.js";
+import { n as k } from "./when.Dr1es41R.js";
+import { C as V } from "./button.G_W-dK6b.js";
+import F from "../components/dropdown.js";
+import M from "../components/icon-button.js";
+import N from "../components/menu.js";
+import { C as j } from "./menu-item.HK2A6RqD.js";
+import q from "../components/tab.js";
+var P = /* @__PURE__ */ ((t) => (t.Bottom = "bottom", t.End = "end", t.Start = "start", t.Top = "top", t))(P || {}), S = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "flex-end", t.Start = "flex-start", t))(S || {}), H = /* @__PURE__ */ ((t) => (t.Auto = "auto", t.Manual = "manual", t))(H || {}), I = /* @__PURE__ */ ((t) => (t.Button = "button", t.Default = "default", t))(I || {}), v = /* @__PURE__ */ ((t) => (t.Dropdown = "dropdown", t.Scroll = "scroll", t))(v || {}), y = /* @__PURE__ */ ((t) => (t.Absolute = "absolute", t.DisplayNone = "display-none", t))(y || {});
+const K = z`
+  :host {
+    --indicator-color: var(--cx-color-primary);
+    --track-color: var(--cx-color-neutral-200);
+    --track-width: 2px;
+
+    display: block;
+    isolation: isolate;
+  }
+
+  ::slotted(cx-tab[data-hidden]) {
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .tab-group--button .tab-group__tabs {
+    background-color: var(--cx-color-neutral-100);
+    border-radius: 12px;
+    padding: var(--cx-spacing-2x-small);
+    flex: 0 0 auto;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition:
+      var(--cx-transition-fast) translate ease,
+      var(--cx-transition-fast) width ease;
+  }
+
+  .tab-group__dropdown {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    height: 100%;
+    display: flex;
+    padding: var(--cx-spacing-2x-small);
+  }
+
+  .tab-group__dropdown__trigger {
+    --color: var(--tab-color, var(--cx-color-neutral-700));
+    --background-color: var(--tab-background-color, transparent);
+    --color-focus: var(--tab-active-color, var(--cx-color-primary));
+    --background-color-focus: var(--tab-active-background-color, transparent);
+    --cx-button-text-transform: none;
+    max-width: var(--tab-dropdown-trigger-max-width, 150px);
+    height: 100%;
+    flex: 1;
+  }
+
+  .tab-group__dropdown__trigger::part(base) {
+    height: 100%;
+  }
+
+  .tab-group__dropdown__trigger--active {
+    --color: var(--tab-active-color, var(--cx-color-neutral-600));
+    --background-color: var(--tab-active-background-color, transparent);
+  }
+
+  .tab-group__dropdown__trigger--hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .tab-group__dropdown__menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cx-spacing-3x-small);
+  }
+
+  .tab-group__dropdown__menu--reverse {
+    flex-direction: column-reverse;
+  }
+
+  .tab-group__dropdown__menu-item {
+    --label-color: var(--tab-color, var(--cx-color-neutral-700));
+    --cx-menu-item-background-color: var(--tab-background-color, transparent);
+    --cx-menu-item-background-color-hover: var(
+      --tab-background-color,
+      var(--cx-color-neutral-100)
+    );
+    --cx-menu-item-background-color-active: var(
+      --tab-active-background-color,
+      var(--cx-menu-item-background-color-hover)
+    );
+    --cx-menu-item-background-color-active-hover: var(
+      --tab-active-background-color,
+      var(--cx-color-neutral-200)
+    );
+  }
+
+  .tab-group__dropdown__menu-item:hover:not(
+      .tab-group__dropdown__menu-item--active
+    ) {
+    --label-color: var(--cx-color-neutral-800);
+  }
+
+  .tab-group__dropdown__menu-item--active {
+    --label-color: var(--tab-active-color, var(--cx-color-neutral-600));
+  }
+
+  .tab-group__dropdown__menu-item::part(base) {
+    padding: var(--cx-spacing-3x-small) var(--cx-spacing-x-small);
+    min-height: 40px;
+  }
+
+  .tab-group__dropdown__menu-item::part(checked-icon),
+  .tab-group__dropdown__menu-item::part(submenu-icon) {
+    display: none;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 var(--cx-spacing-x-large);
+  }
+
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
+    visibility: hidden;
+  }
+
+  .tab-group__body {
+    display: block;
+  }
+
+  :host([use-max-panel-height]) .tab-group__body {
+    overflow: auto;
+  }
+
+  :host([hide-panel-variant='absolute']) .tab-group__body {
+    position: relative;
+    contain: layout size;
+  }
+
+  :host([hide-panel-variant='absolute']) ::slotted(cx-tab-panel) {
+    display: block;
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  :host([hide-panel-variant='absolute']) ::slotted(cx-tab-panel:not([active])) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--cx-spacing-x-large);
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--start {
+    left: auto;
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--end {
+    left: 0;
+    right: auto;
+  }
+
+  .tab-group__nav {
+    justify-content: flex-start;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  .tab-group--top.tab-group--has-hidden-tabs .tab-group__nav {
+    overflow-x: hidden;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    position: relative;
+    flex-direction: row;
+  }
+
+  .tab-group--top.tab-group--rtl .tab-group__tabs {
+    flex-direction: row-reverse;
+  }
+
+  .tab-group--default.tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(cx-tab-panel) {
+    --padding: var(--tab-panel-padding, var(--cx-spacing-medium) 0);
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  .tab-group--bottom.tab-group--has-hidden-tabs .tab-group__nav {
+    overflow-x: hidden;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    position: relative;
+    flex-direction: row;
+  }
+
+  .tab-group--bottom.tab-group--rtl .tab-group__tabs {
+    flex-direction: row-reverse;
+  }
+
+  .tab-group--default.tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(cx-tab-panel) {
+    --padding: var(--tab-panel-padding, var(--cx-spacing-medium) 0);
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--default.tab-group--start .tab-group__tabs {
+    border-inline-end: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--default.tab-group--start .tab-group__indicator {
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(cx-tab-panel) {
+    --padding: var(--tab-panel-padding, 0 var(--cx-spacing-medium));
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  .tab-group--default.tab-group--end .tab-group__tabs {
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--default.tab-group--end .tab-group__indicator {
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(cx-tab-panel) {
+    --padding: var(--tab-panel-padding, 0 var(--cx-spacing-medium));
+  }
+`;
+var X = Object.defineProperty, J = Object.getOwnPropertyDescriptor, r = (t, o, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? J(o, e) : o, c = t.length - 1, n; c >= 0; c--)
+    (n = t[c]) && (i = (s ? n(o, e, i) : n(i)) || i);
+  return s && i && X(o, e, i), i;
+};
+let a = class extends B {
+  constructor() {
+    super(...arguments), this.localize = new W(this), this.tabs = [], this.focusableTabs = [], this.panels = [], this.hasScrollControls = !1, this.shouldHideScrollStartButton = !1, this.shouldHideScrollEndButton = !1, this.dropdownOffset = 0, this.tabPanelHeight = 0, this.tabAlignmentIndent = 0, this.shouldIgnoreAlignment = !1, this.shouldShowDropdown = !1, this.isActiveTabHidden = !1, this.placement = P.Top, this.activation = H.Auto, this.noScrollControls = !1, this.fixedScrollControls = !1, this.useMaxPanelHeight = !1, this.variant = I.Default, this.overflowVariant = v.Scroll, this.hidePanelVariant = y.DisplayNone, this.tabAlignment = S.Start, this.dropdownLabel = "", this.scrollOffset = 1;
+  }
+  connectedCallback() {
+    const t = Promise.all([
+      customElements.whenDefined("cx-tab"),
+      customElements.whenDefined("cx-tab-panel")
+    ]);
+    super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
+      this.repositionIndicator(), this.updateScrollControls();
+    }), this.mutationObserver = new MutationObserver((o) => {
+      o.some(
+        (e) => !["aria-labelledby", "aria-controls"].includes(e.attributeName)
+      ) && setTimeout(() => this.setAriaLabels()), o.some((e) => e.attributeName === "disabled") && this.syncTabsAndPanels();
+    }), this.updateComplete.then(() => {
+      this.syncTabsAndPanels(), this.syncScrollPosition(), this.mutationObserver.observe(this, {
+        attributes: !0,
+        childList: !0,
+        subtree: !0
+      }), this.resizeObserver.observe(this.nav), this.hidePanelVariant === y.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()), t.then(() => {
+        new IntersectionObserver(
+          (e, s) => {
+            e[0].intersectionRatio > 0 && (this.setAriaLabels(), this.setActiveTab(this.getActiveTab() ?? this.tabs[0], {
+              emitEvents: !1
+            }), s.unobserve(e[0].target));
+          }
+        ).observe(this.tabGroup);
+      });
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.cleanupPanelResizeObserver(), this.nav && this.resizeObserver?.unobserve(this.nav);
+  }
+  getAllTabs() {
+    return this.shadowRoot.querySelector('slot[name="nav"]').assignedElements();
+  }
+  getAllPanels() {
+    return [...this.body.assignedElements()].filter(
+      (t) => t.tagName.toLowerCase() === "cx-tab-panel"
+    );
+  }
+  getActiveTab() {
+    return this.tabs.find((t) => t.active);
+  }
+  /**
+   * If dropdown overflow but placement is start and end, count as scroll overflow
+   */
+  get allowDropdownOverflow() {
+    return this.overflowVariant === v.Dropdown && !["start", "end"].includes(this.placement);
+  }
+  /**
+   * Get the height of the body
+   */
+  get bodyHeight() {
+    return this.hidePanelVariant === y.Absolute && this.tabPanelHeight > 0 ? `${this.tabPanelHeight}px` : "";
+  }
+  /**
+   * Get caret direction based on placement
+   */
+  get caretDirection() {
+    return this.placement === "bottom" ? "up" : "down";
+  }
+  handleClick(t) {
+    const o = t.target;
+    let e = o.closest("cx-tab");
+    if (!e) {
+      const i = o.closest("[data-panel]")?.getAttribute("data-panel");
+      e = this.tabs.find((c) => c.panel === i) ?? null;
+    }
+    e?.closest("cx-tab-group") === this && e !== null && (this.setActiveTab(e, { scrollBehavior: "smooth" }), this.isActiveTabHidden = e.hasAttribute("data-hidden"));
+  }
+  handleKeyDown(t) {
+    const o = t.target;
+    let e = o.closest("cx-tab");
+    if (!e) {
+      const i = o.closest("[data-panel]")?.getAttribute("data-panel");
+      e = this.tabs.find((c) => c.panel === i) ?? null;
+    }
+    if (e?.closest("cx-tab-group") === this && (["Enter", " "].includes(t.key) && e !== null && (this.setActiveTab(e, { scrollBehavior: "smooth" }), this.isActiveTabHidden = e.hasAttribute("data-hidden"), t.preventDefault()), [
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End"
+    ].includes(t.key))) {
+      const i = this.tabs.find((d) => d.matches(":focus")), c = this.localize.dir() === "rtl";
+      let n = null;
+      if (i?.tagName.toLowerCase() === "cx-tab") {
+        switch (t.key) {
+          case "Home":
+            n = this.focusableTabs[0];
+            break;
+          case "End":
+            n = this.focusableTabs[this.focusableTabs.length - 1];
+            break;
+          default:
+            if (["top", "bottom"].includes(this.placement) && t.key === (c ? "ArrowRight" : "ArrowLeft") || ["start", "end"].includes(this.placement) && t.key === "ArrowUp") {
+              const d = this.tabs.findIndex((l) => l === i);
+              n = this.findNextFocusableTab(d, "backward");
+            } else if (["top", "bottom"].includes(this.placement) && t.key === (c ? "ArrowLeft" : "ArrowRight") || ["start", "end"].includes(this.placement) && t.key === "ArrowDown") {
+              const d = this.tabs.findIndex((l) => l === i);
+              n = this.findNextFocusableTab(d, "forward");
+            }
+        }
+        if (!n)
+          return;
+        if (n.tabIndex = 0, n.focus({ preventScroll: !0 }), this.allowDropdownOverflow && this.dropdown !== null && n.hasAttribute("data-hidden") && this.dropdown.show(), this.activation === "auto")
+          this.setActiveTab(n, { scrollBehavior: "smooth" }), this.isActiveTabHidden = n.hasAttribute("data-hidden");
+        else
+          for (const d of this.tabs)
+            d.tabIndex = d === n ? 0 : -1;
+        !n.hasAttribute("data-hidden") && ["top", "bottom"].includes(this.placement) && D(n, this.nav, "horizontal"), t.preventDefault();
+      }
+      if (this.allowDropdownOverflow && this.dropdown?.open) {
+        t.preventDefault();
+        const d = this.menu.getAllItems(), l = d.findIndex(
+          (u) => u.getAttribute("data-panel") === this.activeTab?.panel
+        );
+        let b = -1;
+        const p = this.tabs.filter(
+          (u) => !u.hasAttribute("data-hidden")
+        ).length;
+        let w = t.key;
+        switch (this.placement === P.Bottom && (w = w === "ArrowUp" && "ArrowDown" || w === "ArrowDown" && "ArrowUp" || w), w) {
+          case "Home":
+            this.dropdown.hide(), this.tabs[0].focus(), b = 0;
+            break;
+          case "ArrowUp":
+            if (l === 0) {
+              this.dropdown.hide();
+              const u = this.tabs.filter((h) => !h.hasAttribute("data-hidden")).at(-1);
+              u && (u.focus(), b = this.tabs.findIndex(
+                (h) => h === u
+              ));
+            } else
+              this.menu.setCurrentItem(d[l - 1]), d[l - 1].focus(), b = p + l - 1;
+            break;
+          case "ArrowDown":
+            l === d.length - 1 ? (this.dropdown.hide(), this.tabs[0].focus(), b = 0) : (this.menu.setCurrentItem(d[l + 1]), d[l + 1].focus(), b = p + l + 1);
+            break;
+        }
+        this.activation === "auto" && b >= 0 && (this.setActiveTab(this.tabs[b], {
+          scrollBehavior: "smooth"
+        }), this.isActiveTabHidden = this.tabs[b].hasAttribute("data-hidden"));
+      }
+    }
+  }
+  handleScrollToStart() {
+    this.nav.scroll({
+      behavior: "smooth",
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft + this.nav.clientWidth : this.nav.scrollLeft - this.nav.clientWidth
+    });
+  }
+  handleScrollToEnd() {
+    this.nav.scroll({
+      behavior: "smooth",
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft - this.nav.clientWidth : this.nav.scrollLeft + this.nav.clientWidth
+    });
+  }
+  handleDropdownAfterShow() {
+    this.dropdown.focusOnTrigger();
+    const t = this.tabs.findIndex((i) => i.tabIndex === 0), o = this.tabs.filter(
+      (i) => !i.hasAttribute("data-hidden")
+    ).length;
+    if (t === -1)
+      return;
+    const e = t - o;
+    if (e < 0)
+      return;
+    const s = this.menu.getAllItems()[e];
+    this.menu.setCurrentItem(s), s.focus();
+  }
+  setActiveTab(t, o) {
+    if (o = {
+      emitEvents: !0,
+      scrollBehavior: "auto",
+      ...o
+    }, t && t !== this.activeTab && !t.disabled) {
+      const e = this.activeTab;
+      this.activeTab = t;
+      for (const s of this.tabs)
+        s.active = s === this.activeTab, s.tabIndex = s === this.activeTab ? 0 : -1;
+      for (const s of this.panels)
+        s.active = s.name === this.activeTab?.panel;
+      this.syncIndicator(), this.calculateTabPanelHeight(), !this.activeTab?.hasAttribute("data-hidden") && ["top", "bottom"].includes(this.placement) && D(
+        this.activeTab,
+        this.nav,
+        "horizontal",
+        o.scrollBehavior
+      ), o.emitEvents && (e && this.emit("cx-tab-hide", { detail: { name: e.panel } }), this.emit("cx-tab-show", { detail: { name: this.activeTab.panel } }));
+    }
+  }
+  setAriaLabels() {
+    for (const t of this.tabs) {
+      const o = this.panels.find((e) => e.name === t.panel);
+      o && (t.setAttribute("aria-controls", o.getAttribute("id")), o.setAttribute("aria-labelledby", t.getAttribute("id")));
+    }
+  }
+  repositionIndicator() {
+    let t = this.getActiveTab();
+    if (t?.hasAttribute("data-hidden") && (t = this.tabs.find((d) => d.hasAttribute("data-hidden"))), !t)
+      return;
+    const o = t.hasAttribute("data-hidden") ? this.dropdownTrigger?.clientWidth ?? 0 : t.clientWidth, e = t.clientHeight, s = this.localize.dir() === "rtl", i = this.getAllTabs(), n = i.slice(0, i.indexOf(t)).reduce(
+      (d, l) => ({
+        left: d.left + l.clientWidth,
+        top: d.top + l.clientHeight
+      }),
+      { left: 0, top: 0 }
+    );
+    switch (this.placement) {
+      case "top":
+      case "bottom":
+        this.indicator.style.width = `${o}px`, this.indicator.style.height = "auto", this.indicator.style.translate = s ? `${-1 * n.left}px` : `${n.left}px`;
+        break;
+      case "start":
+      case "end":
+        this.indicator.style.width = "auto", this.indicator.style.height = `${e}px`, this.indicator.style.translate = `0 ${n.top}px`;
+        break;
+    }
+  }
+  /**
+   * This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+   */
+  syncTabsAndPanels() {
+    if (this.tabs = this.getAllTabs(), this.focusableTabs = this.tabs.filter((t) => !t.disabled), this.panels = this.getAllPanels(), this.syncIndicator(), this.updateComplete.then(() => {
+      this.updateScrollControls(), this.hidePanelVariant === y.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight());
+    }), this.allowDropdownOverflow) {
+      const t = new IntersectionObserver(
+        (o) => {
+          t.disconnect();
+          const e = getComputedStyle(this.tabButtons), s = parseFloat(e.paddingLeft || "0") + parseFloat(e.paddingRight || "0"), i = this.container.clientWidth - s, c = this.nav.clientWidth - s, n = this.dropdownTrigger?.clientWidth ?? 0, d = o.length;
+          this.dropdownOffset = 0, this.isActiveTabHidden = !1, this.shouldShowDropdown = !1, this.tabs.forEach((l) => {
+            l.style.setProperty("--tab-max-width", "unset"), l.offsetWidth;
+          });
+          for (const [l, b] of o.entries()) {
+            const p = b.target, w = c - this.dropdownOffset, u = p.getBoundingClientRect().width;
+            let h = l === o.length - 1 ? w : w - n;
+            if (l === 0 || l === 1)
+              switch (d) {
+                case 1:
+                  h = c;
+                  break;
+                case 2:
+                  h = c / 2;
+                  break;
+                default:
+                  h = (c - n) / 2;
+                  break;
+              }
+            let T = u > h;
+            if (l >= 2 && (T = T && h > a.MIN_CLAMP_WIDTH), !this.shouldShowDropdown && T) {
+              p.style.setProperty("--tab-max-width", `${h}px`), p.removeAttribute("data-hidden"), this.dropdownOffset += h;
+              continue;
+            }
+            this.shouldShowDropdown || u > h ? (p.active && (this.isActiveTabHidden = !0), p.setAttribute("data-hidden", ""), this.shouldShowDropdown = !0) : (p.removeAttribute("data-hidden"), this.dropdownOffset += p.getBoundingClientRect().width);
+          }
+          this.dropdownOffset = Math.floor(this.dropdownOffset), this.dropdownOffset + n > i && (this.dropdownOffset = i - n), this.tabAlignment !== S.Start ? (this.tabAlignmentIndent = i - this.dropdownOffset - (this.shouldShowDropdown ? n : 0), this.tabAlignment === S.Center && (this.tabAlignmentIndent = Math.floor(this.tabAlignmentIndent / 2))) : this.tabAlignmentIndent = 0;
+        },
+        {
+          root: this.nav,
+          threshold: 1
+        }
+      );
+      for (const o of this.tabs)
+        t.observe(o);
+    } else
+      for (const t of this.tabs)
+        t.removeAttribute("data-hidden");
+  }
+  /**
+   * Calculate the highest tab height
+   */
+  calculateTabPanelHeight() {
+    if (this.useMaxPanelHeight) {
+      this.tabPanelHeight = 0;
+      for (const t of this.panels)
+        this.tabPanelHeight = Math.max(this.tabPanelHeight, t.clientHeight);
+    } else
+      this.tabPanelHeight = this.panels.filter((t) => t.active)?.[0]?.clientHeight ?? 0;
+  }
+  /**
+   * Sync the scroll position to the rightmost tab when:
+   * overflow variant is dropdown and the direction is rtl
+   */
+  syncScrollPosition() {
+    this.overflowVariant === v.Dropdown && this.nav && (this.localize.dir() === "rtl" ? this.nav.scrollLeft = this.nav.scrollWidth : this.nav.scrollLeft = 0);
+  }
+  findNextFocusableTab(t, o) {
+    let e = null;
+    const s = o === "forward" ? 1 : -1;
+    let i = t + s;
+    for (; t < this.tabs.length; ) {
+      if (e = this.tabs[i] || null, e === null) {
+        o === "forward" ? e = this.focusableTabs[0] : e = this.focusableTabs[this.focusableTabs.length - 1];
+        break;
+      }
+      if (!e.disabled)
+        break;
+      i += s;
+    }
+    return e;
+  }
+  updateScrollButtons() {
+    this.hasScrollControls && !this.fixedScrollControls && (this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset, this.shouldHideScrollEndButton = this.isScrolledToEnd());
+  }
+  isScrolledToEnd() {
+    return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset;
+  }
+  scrollFromStart() {
+    return this.localize.dir() === "rtl" ? -this.nav.scrollLeft : this.nav.scrollLeft;
+  }
+  updateScrollControls() {
+    this.noScrollControls ? this.hasScrollControls = !1 : this.hasScrollControls = ["top", "bottom"].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1, this.updateScrollButtons();
+  }
+  syncIndicator() {
+    this.getActiveTab() ? (this.indicator.style.display = "block", this.repositionIndicator()) : this.indicator.style.display = "none";
+  }
+  handleVariantChange() {
+    for (const t of this.tabs)
+      t.requestUpdate();
+  }
+  handleOverflowVariantChange() {
+    this.tabAlignmentIndent = 0, this.syncTabsAndPanels();
+  }
+  handleDropdownLabelChange() {
+    this.syncTabsAndPanels();
+  }
+  handleAbsoluteHeightChange() {
+    this.hidePanelVariant === y.Absolute ? (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()) : (this.cleanupPanelResizeObserver(), this.tabPanelHeight = 0);
+  }
+  handleTabAlignmentChange() {
+    this.syncTabsAndPanels();
+  }
+  /**
+   * Setup ResizeObserver for all panels when keepHiddenHeight is enabled
+   */
+  setupPanelResizeObserver() {
+    if (this.hidePanelVariant !== y.Absolute) {
+      this.cleanupPanelResizeObserver();
+      return;
+    }
+    this.cleanupPanelResizeObserver(), this.panelResizeObserver = new ResizeObserver(() => {
+      this.calculateTabPanelHeight();
+    });
+    for (const t of this.panels)
+      this.panelResizeObserver.observe(t);
+  }
+  /**
+   * Clean up panel ResizeObserver
+   */
+  cleanupPanelResizeObserver() {
+    this.panelResizeObserver && (this.panelResizeObserver.disconnect(), this.panelResizeObserver = void 0);
+  }
+  /** Shows the specified tab panel. */
+  show(t) {
+    const o = this.tabs.find((e) => e.panel === t);
+    o && this.setActiveTab(o, { scrollBehavior: "smooth" });
+  }
+  handleNavContainerResize() {
+    const t = this.container.clientWidth, o = this.tabButtons.clientWidth;
+    this.shouldIgnoreAlignment = t < o, this.overflowVariant === v.Dropdown && (this.syncTabsAndPanels(), this.syncScrollPosition());
+  }
+  handleIndicatorResize(t) {
+    t.stopPropagation(), this.syncIndicator();
+  }
+  /** Guard for dropdown variant */
+  getDropdownStyle() {
+    const t = this.localize.dir() === "rtl";
+    return C({
+      [t ? "right" : "left"]: `${this.dropdownOffset}px`
+    });
+  }
+  getDropdownPlacement() {
+    const t = this.localize.dir() === "rtl";
+    return `${this.placement === "top" ? "bottom" : "top"}-${t ? "start" : "end"}`;
+  }
+  render() {
+    const t = this.localize.dir() === "rtl", o = this.allowDropdownOverflow && this.isActiveTabHidden;
+    return A`
+      <div
+        part="base"
+        class=${x({
+      "tab-group": !0,
+      "tab-group--bottom": this.placement === "bottom",
+      "tab-group--end": this.placement === "end",
+      "tab-group--has-hidden-tabs": this.allowDropdownOverflow && this.shouldShowDropdown,
+      "tab-group--has-scroll-controls": this.hasScrollControls && this.overflowVariant !== v.Dropdown,
+      "tab-group--rtl": t,
+      "tab-group--start": this.placement === "start",
+      "tab-group--top": this.placement === "top",
+      [`tab-group--${this.variant}`]: !0
+    })}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <cx-resize-observer @cx-resize=${this.handleNavContainerResize}>
+          <div class="tab-group__nav-container" part="nav">
+            ${k(
+      this.overflowVariant === v.Scroll && this.hasScrollControls,
+      () => A`
+                <cx-icon-button
+                  part="scroll-button scroll-button--start"
+                  exportparts="base:scroll-button__base"
+                  class=${x({
+        "tab-group__scroll-button": !0,
+        "tab-group__scroll-button--start": !0,
+        "tab-group__scroll-button--start--hidden": this.shouldHideScrollStartButton
+      })}
+                  name=${t ? "chevron_right" : "chevron_left"}
+                  tabindex="-1"
+                  aria-hidden="true"
+                  label=${this.localize.term("scrollToStart")}
+                  @click=${this.handleScrollToStart}
+                ></cx-icon-button>
+              `
+    )}
+            <div
+              part="tab-group"
+              class="tab-group__nav"
+              style=${C({
+      justifyContent: this.overflowVariant === v.Dropdown || this.shouldIgnoreAlignment ? "flex-start" : this.tabAlignment,
+      transform: `translateX(${this.tabAlignmentIndent}px)`
+    })}
+              @scrollend=${this.updateScrollButtons}
+            >
+              <div part="tabs" class="tab-group__tabs" role="tablist">
+                <div
+                  part="active-tab-indicator"
+                  class="tab-group__indicator"
+                ></div>
+                <cx-resize-observer @cx-resize=${this.handleIndicatorResize}>
+                  <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+                  ${k(
+      this.allowDropdownOverflow,
+      () => A`
+                      <cx-dropdown
+                        class=${x({
+        "tab-group__dropdown": !0
+      })}
+                        style=${O(
+        [t, this.dropdownOffset],
+        () => this.getDropdownStyle()
+      )}
+                        placement=${O(
+        [this.placement, t],
+        () => this.getDropdownPlacement()
+      )}
+                        hoist
+                        ?disabled=${!this.shouldShowDropdown}
+                        ignored-keys="ArrowUp ArrowDown Home"
+                        @cx-after-show=${this.handleDropdownAfterShow}
+                      >
+                        <cx-button
+                          slot="trigger"
+                          tabindex="-1"
+                          variant="custom"
+                          caret
+                          caret-direction=${this.caretDirection}
+                          class=${x({
+        "tab-group__dropdown__trigger": !0,
+        "tab-group__dropdown__trigger--active": o,
+        "tab-group__dropdown__trigger--hidden": !this.shouldShowDropdown
+      })}
+                        >
+                          ${this.dropdownLabel}
+                        </cx-button>
+                        <cx-menu
+                          class=${x({
+        "tab-group__dropdown__menu": !0,
+        "tab-group__dropdown__menu--reverse": this.placement === "bottom"
+      })}
+                          ignored-keys="ArrowUp ArrowDown Home"
+                          bubble-keydown
+                        >
+                          ${U(
+        this.tabs.filter(
+          (e) => e.hasAttribute("data-hidden")
+        ),
+        (e) => A`
+                              <cx-menu-item
+                                class=${x({
+          "tab-group__dropdown__menu-item": !0,
+          "tab-group__dropdown__menu-item--active": e.active
+        })}
+                                aria-active=${e.ariaSelected}
+                                aria-disabled=${e.ariaDisabled}
+                                ?active=${e.active}
+                                ?disabled=${e.disabled}
+                                data-panel=${e.panel}
+                              >
+                                ${e.textContent}
+                              </cx-menu-item>
+                            `
+      )}
+                        </cx-menu>
+                      </cx-dropdown>
+                    `
+    )}
+                </cx-resize-observer>
+              </div>
+            </div>
+            ${k(
+      this.overflowVariant === v.Scroll && this.hasScrollControls,
+      () => A`
+                <cx-icon-button
+                  part="scroll-button scroll-button--end"
+                  exportparts="base:scroll-button__base"
+                  class=${x({
+        "tab-group__scroll-button": !0,
+        "tab-group__scroll-button--end": !0,
+        "tab-group__scroll-button--end--hidden": this.shouldHideScrollEndButton
+      })}
+                  name=${t ? "chevron_left" : "chevron_right"}
+                  tabindex="-1"
+                  aria-hidden="true"
+                  label=${this.localize.term("scrollToEnd")}
+                  @click=${this.handleScrollToEnd}
+                ></cx-icon-button>
+              `
+    )}
+          </div>
+        </cx-resize-observer>
+
+        <slot
+          part="body"
+          class="tab-group__body"
+          style=${C({ height: this.bodyHeight })}
+          @slotchange=${this.syncTabsAndPanels}
+        ></slot>
+      </div>
+    `;
+  }
+};
+a.styles = [L, K];
+a.dependencies = {
+  "cx-button": V,
+  "cx-dropdown": F,
+  "cx-icon-button": M,
+  "cx-menu": N,
+  "cx-menu-item": j,
+  "cx-resize-observer": $,
+  "cx-tab": q
+};
+a.MIN_CLAMP_WIDTH = 100;
+r([
+  m(".tab-group")
+], a.prototype, "tabGroup", 2);
+r([
+  m(".tab-group__body")
+], a.prototype, "body", 2);
+r([
+  m(".tab-group__nav-container")
+], a.prototype, "container", 2);
+r([
+  m(".tab-group__nav")
+], a.prototype, "nav", 2);
+r([
+  m(".tab-group__indicator")
+], a.prototype, "indicator", 2);
+r([
+  m(".tab-group__dropdown")
+], a.prototype, "dropdown", 2);
+r([
+  m(".tab-group__dropdown__menu")
+], a.prototype, "menu", 2);
+r([
+  m(".tab-group__tabs")
+], a.prototype, "tabButtons", 2);
+r([
+  m(".tab-group__dropdown__trigger")
+], a.prototype, "dropdownTrigger", 2);
+r([
+  f()
+], a.prototype, "activeTab", 2);
+r([
+  f()
+], a.prototype, "hasScrollControls", 2);
+r([
+  f()
+], a.prototype, "shouldHideScrollStartButton", 2);
+r([
+  f()
+], a.prototype, "shouldHideScrollEndButton", 2);
+r([
+  f()
+], a.prototype, "dropdownOffset", 2);
+r([
+  f()
+], a.prototype, "tabPanelHeight", 2);
+r([
+  f()
+], a.prototype, "tabAlignmentIndent", 2);
+r([
+  f()
+], a.prototype, "shouldIgnoreAlignment", 2);
+r([
+  f()
+], a.prototype, "shouldShowDropdown", 2);
+r([
+  f()
+], a.prototype, "isActiveTabHidden", 2);
+r([
+  g()
+], a.prototype, "placement", 2);
+r([
+  g()
+], a.prototype, "activation", 2);
+r([
+  g({ attribute: "no-scroll-controls", type: Boolean })
+], a.prototype, "noScrollControls", 2);
+r([
+  g({ attribute: "fixed-scroll-controls", type: Boolean })
+], a.prototype, "fixedScrollControls", 2);
+r([
+  g({ attribute: "use-max-panel-height", type: Boolean })
+], a.prototype, "useMaxPanelHeight", 2);
+r([
+  g({ reflect: !0, type: String })
+], a.prototype, "variant", 2);
+r([
+  g({ attribute: "overflow-variant", reflect: !0, type: String })
+], a.prototype, "overflowVariant", 2);
+r([
+  g({ attribute: "hide-panel-variant", reflect: !0, type: String })
+], a.prototype, "hidePanelVariant", 2);
+r([
+  g({ attribute: "tab-alignment", reflect: !0, type: String })
+], a.prototype, "tabAlignment", 2);
+r([
+  g({ attribute: "dropdown-label", type: String })
+], a.prototype, "dropdownLabel", 2);
+r([
+  E({ passive: !0 })
+], a.prototype, "updateScrollButtons", 1);
+r([
+  _("noScrollControls", { waitUntilFirstUpdate: !0 })
+], a.prototype, "updateScrollControls", 1);
+r([
+  _("placement", { waitUntilFirstUpdate: !0 })
+], a.prototype, "syncIndicator", 1);
+r([
+  _("variant", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleVariantChange", 1);
+r([
+  _("overflowVariant", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleOverflowVariantChange", 1);
+r([
+  _("dropdownLabel", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleDropdownLabelChange", 1);
+r([
+  _("hidePanelVariant", { waitUntilFirstUpdate: !0 }),
+  _("useMaxPanelHeight", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleAbsoluteHeightChange", 1);
+r([
+  _("tabAlignment", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleTabAlignmentChange", 1);
+a = r([
+  R("cx-tab-group")
+], a);
+export {
+  a as C,
+  S as T,
+  v as a,
+  y as b
+};