@orangelogic/design-system 2.0.0-41LXD4-beta-2

package/library/chunks/tab-group.Du-g01Sz.js

@@ -0,0 +1,1216 @@
+import z from "../components/resize-observer.js";
+import { i as W, n as u, C as B, x as y, c as R } from "./custom-element.fmLrnDZr.js";
+import { c as E } from "./component.styles.DtouHn2g.js";
+import { L } from "./i18n.1z3F6PhD.js";
+import { s as D } from "./scroll.DwPiX2Ox.js";
+import { w as m } from "./watch.BCJD77bD.js";
+import { r as h } from "./state.Dt9F_SuS.js";
+import { t as U } from "./event-options.CYHYGOd8.js";
+import { e as w } from "./query.BBf1UFkC.js";
+import { r as N } from "./query-all.i3PyvTUQ.js";
+import { e as x } from "./class-map.DqNfBvJI.js";
+import { i as I } from "./guard.L-Ctqt3S.js";
+import { o as $ } from "./map.D8heArFD.js";
+import { o as T } from "./style-map.lEJHEwk3.js";
+import { n as P } from "./when.Dr1es41R.js";
+import { C as F } from "./button.B0O7Bew9.js";
+import V from "../components/dropdown.js";
+import M from "../components/icon-button.js";
+import j from "../components/menu.js";
+import { C as K } from "./menu-item.BPmX2Da4.js";
+import q from "../components/tab.js";
+var k = /* @__PURE__ */ ((t) => (t.Bottom = "bottom", t.End = "end", t.Start = "start", t.Top = "top", t))(k || {}), C = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "flex-end", t.Start = "flex-start", t))(C || {}), O = /* @__PURE__ */ ((t) => (t.Auto = "auto", t.Manual = "manual", t))(O || {}), H = /* @__PURE__ */ ((t) => (t.Button = "button", t.Default = "default", t))(H || {}), p = /* @__PURE__ */ ((t) => (t.Dropdown = "dropdown", t.Pagination = "pagination", t.Scroll = "scroll", t))(p || {}), A = /* @__PURE__ */ ((t) => (t.Absolute = "absolute", t.DisplayNone = "display-none", t))(A || {});
+const X = W`
+  :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;
+    gap: var(--cx-spacing-small);
+  }
+
+  .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: 3;
+  }
+
+  .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: 3;
+  }
+
+  .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: 3;
+  }
+
+  .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: 3;
+  }
+
+  .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));
+  }
+
+  .tab-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--cx-spacing-small);
+    order: 2;
+  }
+
+  .tab-pagination__dot {
+    display: block;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--cx-border-radius-circle);
+    width: var(--cx-spacing-small);
+    height: var(--cx-spacing-small);
+    background-color: var(--cx-color-neutral-300);
+    padding: 0;
+    margin: 0;
+  }
+
+  .tab-pagination__dot--active {
+    background-color: var(--cx-color-neutral-500);
+  }
+`;
+var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, r = (t, o, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? Q(o, e) : o, c = t.length - 1, s; c >= 0; c--)
+    (s = t[c]) && (n = (i ? s(o, e, n) : s(n)) || n);
+  return i && n && J(o, e, n), n;
+};
+let a = class extends B {
+  constructor() {
+    super(...arguments), this.localize = new L(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.paginationCount = 0, this.activePaginationIndex = 0, this.tabWidth = 0, this.placement = k.Top, this.activation = O.Auto, this.noScrollControls = !1, this.fixedScrollControls = !1, this.useMaxPanelHeight = !1, this.variant = H.Default, this.overflowVariant = p.Scroll, this.hidePanelVariant = A.DisplayNone, this.tabAlignment = C.Start, this.dropdownLabel = "", this.tabsPerPage = 0, 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.updatePagination();
+    }), 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 === A.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()), t.then(() => {
+        new IntersectionObserver(
+          (e, i) => {
+            e[0].intersectionRatio > 0 && (this.setAriaLabels(), this.setActiveTab(this.getActiveTab() ?? this.tabs[0], {
+              emitEvents: !1
+            }), i.unobserve(e[0].target));
+          }
+        ).observe(this.tabGroup);
+      });
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.cleanupPanelResizeObserver(), this.nav && this.resizeObserver?.unobserve(this.nav);
+  }
+  /**
+   * Navigate to the next tab
+   */
+  nextTab() {
+    const t = this.getActiveTab();
+    if (!t)
+      return;
+    const o = this.getAllTabs().indexOf(t), e = this.findNextFocusableTab(o, "forward");
+    e && this.setActiveTab(e);
+  }
+  /**
+   * Navigate to the previous tab
+   */
+  previousTab() {
+    const t = this.getActiveTab();
+    if (!t)
+      return;
+    const o = this.getAllTabs().indexOf(t), e = this.findNextFocusableTab(o, "backward");
+    e && this.setActiveTab(e);
+  }
+  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 === p.Dropdown && !["start", "end"].includes(this.placement);
+  }
+  /**
+   * Get the height of the body
+   */
+  get bodyHeight() {
+    return this.hidePanelVariant === A.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 n = o.closest("[data-panel]")?.getAttribute("data-panel");
+      e = this.tabs.find((c) => c.panel === n) ?? 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 n = o.closest("[data-panel]")?.getAttribute("data-panel");
+      e = this.tabs.find((c) => c.panel === n) ?? 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 n = this.tabs.find((d) => d.matches(":focus")), c = this.localize.dir() === "rtl";
+      let s = null;
+      if (["cx-tab"].includes(String(n?.tagName).toLowerCase())) {
+        switch (t.key) {
+          case "Home":
+            s = this.focusableTabs[0];
+            break;
+          case "End":
+            s = 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 === n);
+              s = 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 === n);
+              s = this.findNextFocusableTab(d, "forward");
+            }
+        }
+        if (!s)
+          return;
+        if (s.tabIndex = 0, s.focus({ preventScroll: !0 }), this.allowDropdownOverflow && this.dropdown !== null && s.hasAttribute("data-hidden") && this.dropdown.show(), this.activation === "auto")
+          this.setActiveTab(s, { scrollBehavior: "smooth" }), this.isActiveTabHidden = s.hasAttribute("data-hidden");
+        else
+          for (const d of this.tabs)
+            d.tabIndex = d === s ? 0 : -1;
+        !s.hasAttribute("data-hidden") && ["top", "bottom"].includes(this.placement) && D(s, this.nav, "horizontal"), t.preventDefault();
+      }
+      if (this.allowDropdownOverflow && this.dropdown?.open) {
+        t.preventDefault();
+        const d = this.menu.getAllItems(), l = d.findIndex(
+          (v) => v.getAttribute("data-panel") === this.activeTab?.panel
+        );
+        let g = -1;
+        const f = this.tabs.filter(
+          (v) => !v.hasAttribute("data-hidden")
+        ).length;
+        let _ = t.key;
+        switch (this.placement === k.Bottom && (_ = _ === "ArrowUp" && "ArrowDown" || _ === "ArrowDown" && "ArrowUp" || _), _) {
+          case "Home":
+            this.dropdown.hide(), this.tabs[0].focus(), g = 0;
+            break;
+          case "ArrowUp":
+            if (l === 0) {
+              this.dropdown.hide();
+              const v = this.tabs.filter((b) => !b.hasAttribute("data-hidden")).at(-1);
+              v && (v.focus(), g = this.tabs.findIndex(
+                (b) => b === v
+              ));
+            } else
+              this.menu.setCurrentItem(d[l - 1]), d[l - 1].focus(), g = f + l - 1;
+            break;
+          case "ArrowDown":
+            l === d.length - 1 ? (this.dropdown.hide(), this.tabs[0].focus(), g = 0) : (this.menu.setCurrentItem(d[l + 1]), d[l + 1].focus(), g = f + l + 1);
+            break;
+        }
+        this.activation === "auto" && g >= 0 && (this.setActiveTab(this.tabs[g], {
+          scrollBehavior: "smooth"
+        }), this.isActiveTabHidden = this.tabs[g].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((n) => n.tabIndex === 0), o = this.tabs.filter(
+      (n) => !n.hasAttribute("data-hidden")
+    ).length;
+    if (t === -1)
+      return;
+    const e = t - o;
+    if (e < 0)
+      return;
+    const i = this.menu.getAllItems()[e];
+    this.menu.setCurrentItem(i), i.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 i of this.tabs)
+        i.active = i === this.activeTab, i.tabIndex = i === this.activeTab ? 0 : -1;
+      for (const i of this.panels)
+        i.active = i.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, i = this.localize.dir() === "rtl", n = this.getAllTabs(), s = n.slice(0, n.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 = i ? `${-1 * s.left}px` : `${s.left}px`;
+        break;
+      case "start":
+      case "end":
+        this.indicator.style.width = "auto", this.indicator.style.height = `${e}px`, this.indicator.style.translate = `0 ${s.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.updatePagination(), this.hidePanelVariant === A.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight());
+    }), this.allowDropdownOverflow) {
+      const t = new IntersectionObserver(
+        (o) => {
+          t.disconnect();
+          const e = getComputedStyle(this.tabButtons), i = parseFloat(e.paddingLeft || "0") + parseFloat(e.paddingRight || "0"), n = this.container.clientWidth - i, c = this.nav.clientWidth - i, s = 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, g] of o.entries()) {
+            const f = g.target, _ = c - this.dropdownOffset, v = f.getBoundingClientRect().width;
+            let b = l === o.length - 1 ? _ : _ - s;
+            if (l === 0 || l === 1)
+              switch (d) {
+                case 1:
+                  b = c;
+                  break;
+                case 2:
+                  b = c / 2;
+                  break;
+                default:
+                  b = (c - s) / 2;
+                  break;
+              }
+            let S = v > b;
+            if (l >= 2 && (S = S && b > a.MIN_CLAMP_WIDTH), !this.shouldShowDropdown && S) {
+              f.style.setProperty("--tab-max-width", `${b}px`), f.removeAttribute("data-hidden"), this.dropdownOffset += b;
+              continue;
+            }
+            this.shouldShowDropdown || v > b ? (f.active && (this.isActiveTabHidden = !0), f.setAttribute("data-hidden", ""), this.shouldShowDropdown = !0) : (f.removeAttribute("data-hidden"), this.dropdownOffset += f.getBoundingClientRect().width);
+          }
+          this.dropdownOffset = Math.floor(this.dropdownOffset), this.dropdownOffset + s > n && (this.dropdownOffset = n - s), this.tabAlignment !== C.Start ? (this.tabAlignmentIndent = n - this.dropdownOffset - (this.shouldShowDropdown ? s : 0), this.tabAlignment === C.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;
+  }
+  updatePagination() {
+    const t = this.nav.clientWidth;
+    if (t <= 0) {
+      this.paginationCount = 0, this.activePaginationIndex = 0, this.tabWidth = 0;
+      return;
+    }
+    this.paginationCount = Math.ceil(this.tabButtons.scrollWidth / t);
+    let o = Math.round(this.nav.scrollLeft / t);
+    Math.ceil(this.nav.scrollLeft + t) >= Math.round(this.tabButtons.scrollWidth) && o < this.paginationCount - 1 && (o = this.paginationCount - 1), this.activePaginationIndex = o, this.tabsPerPage > 0 ? this.tabWidth = t / this.tabsPerPage : this.tabWidth = 0;
+  }
+  /**
+   * Sync the scroll position to the rightmost tab when:
+   * overflow variant is dropdown and the direction is rtl
+   */
+  syncScrollPosition() {
+    this.overflowVariant === p.Dropdown && this.nav && (this.localize.dir() === "rtl" ? this.nav.scrollLeft = this.nav.scrollWidth : this.nav.scrollLeft = 0);
+  }
+  findNextFocusableTab(t, o) {
+    let e = null;
+    const i = o === "forward" ? 1 : -1;
+    let n = t + i;
+    for (; t < this.tabs.length; ) {
+      if (e = this.tabs[n] || null, e === null) {
+        o === "forward" ? e = this.focusableTabs[0] : e = this.focusableTabs[this.focusableTabs.length - 1];
+        break;
+      }
+      if (!e.disabled)
+        break;
+      n += i;
+    }
+    return e;
+  }
+  handleScrollEnd() {
+    this.updateScrollButtons(), this.updatePagination();
+  }
+  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 === A.Absolute ? (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()) : (this.cleanupPanelResizeObserver(), this.tabPanelHeight = 0);
+  }
+  handleTabAlignmentChange() {
+    this.syncTabsAndPanels();
+  }
+  async handleTabsPerPageChange() {
+    await this.updateComplete, this.updatePagination();
+  }
+  /**
+   * Setup ResizeObserver for all panels when keepHiddenHeight is enabled
+   */
+  setupPanelResizeObserver() {
+    if (this.hidePanelVariant !== A.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 === p.Dropdown && (this.syncTabsAndPanels(), this.syncScrollPosition()), this.overflowVariant === p.Pagination && this.updatePagination();
+  }
+  handleIndicatorResize(t) {
+    t.stopPropagation(), this.syncIndicator(), this.updatePagination();
+  }
+  /** Guard for dropdown variant */
+  getDropdownStyle() {
+    const t = this.localize.dir() === "rtl";
+    return T({
+      [t ? "right" : "left"]: `${this.dropdownOffset}px`
+    });
+  }
+  getDropdownPlacement() {
+    const t = this.localize.dir() === "rtl";
+    return `${this.placement === "top" ? "bottom" : "top"}-${t ? "start" : "end"}`;
+  }
+  handlePaginationDotClick(t) {
+    const o = t.currentTarget, e = Number(o.dataset.index);
+    e === this.activePaginationIndex || Number.isNaN(e) || (this.activePaginationIndex = e, this.nav.scrollTo({
+      behavior: "smooth",
+      left: e * this.nav.clientWidth
+    }));
+  }
+  handlePaginationDotKeyDown(t) {
+    const o = t.target;
+    if (t.key === "Enter" || t.key === " ") {
+      t.preventDefault(), o.click();
+      return;
+    }
+    if (!["ArrowRight", "ArrowLeft"].includes(t.key))
+      return;
+    t.preventDefault(), t.stopPropagation();
+    const e = Array.from(this.allDots), i = e.indexOf(o);
+    if (i === -1)
+      return;
+    const n = t.key === "ArrowRight" ? i + 1 : i - 1;
+    e[n]?.focus();
+  }
+  renderPaginationDot(t) {
+    const o = t + 1;
+    return y`
+      <button
+        part="dot${this.activePaginationIndex === t ? " dot--active" : ""}"
+        class=${x({
+      "tab-pagination__dot": !0,
+      "tab-pagination__dot--active": t === this.activePaginationIndex
+    })}
+        role="tab"
+        type="button"
+        aria-selected=${t === this.activePaginationIndex ? "true" : "false"}
+        aria-label=${this.localize.term("slideNum", o)}
+        tabindex="0"
+        data-index=${t}
+        @click=${this.handlePaginationDotClick}
+        @keydown=${this.handlePaginationDotKeyDown}
+      ></button>
+    `;
+  }
+  render() {
+    const t = this.localize.dir() === "rtl", o = this.allowDropdownOverflow && this.isActiveTabHidden, e = this.overflowVariant === p.Pagination && this.paginationCount > 1 && Number.isFinite(this.paginationCount);
+    return y`
+      <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 !== p.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">
+            ${P(
+      this.overflowVariant === p.Scroll && this.hasScrollControls,
+      () => y`
+                <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=${T({
+      justifyContent: this.overflowVariant === p.Dropdown || this.shouldIgnoreAlignment ? "flex-start" : this.tabAlignment,
+      transform: `translateX(${this.tabAlignmentIndent}px)`
+    })}
+              @scrollend=${this.handleScrollEnd}
+            >
+              <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}
+                    style=${T(this.tabWidth > 0 ? {
+      "--width": `${this.tabWidth}px`
+    } : {})}
+                  ></slot>
+                  ${P(
+      this.allowDropdownOverflow,
+      () => y`
+                      <cx-dropdown
+                        class=${x({
+        "tab-group__dropdown": !0
+      })}
+                        style=${I(
+        [t, this.dropdownOffset],
+        () => this.getDropdownStyle()
+      )}
+                        placement=${I(
+        [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
+                        >
+                          ${$(
+        this.tabs.filter(
+          (i) => i.hasAttribute("data-hidden")
+        ),
+        (i) => y`
+                              <cx-menu-item
+                                class=${x({
+          "tab-group__dropdown__menu-item": !0,
+          "tab-group__dropdown__menu-item--active": i.active
+        })}
+                                aria-active=${i.ariaSelected}
+                                aria-disabled=${i.ariaDisabled}
+                                ?active=${i.active}
+                                ?disabled=${i.disabled}
+                                data-panel=${i.panel}
+                              >
+                                ${i.textContent}
+                              </cx-menu-item>
+                            `
+      )}
+                        </cx-menu>
+                      </cx-dropdown>
+                    `
+    )}
+                </cx-resize-observer>
+              </div>
+            </div>
+            ${P(
+      this.overflowVariant === p.Scroll && this.hasScrollControls,
+      () => y`
+                <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=${T({ height: this.bodyHeight })}
+          @slotchange=${this.syncTabsAndPanels}
+        ></slot>
+
+
+        ${P(
+      e,
+      () => y`
+              <div class="tab-pagination">
+                ${$(
+        Array.from(
+          { length: this.paginationCount },
+          (i, n) => n
+        ),
+        (i) => this.renderPaginationDot(i)
+      )}
+              </div>
+            `
+    )}
+      </div>
+    `;
+  }
+};
+a.styles = [E, X];
+a.dependencies = {
+  "cx-button": F,
+  "cx-dropdown": V,
+  "cx-icon-button": M,
+  "cx-menu": j,
+  "cx-menu-item": K,
+  "cx-resize-observer": z,
+  "cx-tab": q
+};
+a.MIN_CLAMP_WIDTH = 100;
+r([
+  w(".tab-group")
+], a.prototype, "tabGroup", 2);
+r([
+  w(".tab-group__body")
+], a.prototype, "body", 2);
+r([
+  w(".tab-group__nav-container")
+], a.prototype, "container", 2);
+r([
+  w(".tab-group__nav")
+], a.prototype, "nav", 2);
+r([
+  w(".tab-group__indicator")
+], a.prototype, "indicator", 2);
+r([
+  w(".tab-group__dropdown")
+], a.prototype, "dropdown", 2);
+r([
+  w(".tab-group__dropdown__menu")
+], a.prototype, "menu", 2);
+r([
+  w(".tab-group__tabs")
+], a.prototype, "tabButtons", 2);
+r([
+  w(".tab-group__dropdown__trigger")
+], a.prototype, "dropdownTrigger", 2);
+r([
+  N(".tab-pagination__dot")
+], a.prototype, "allDots", 2);
+r([
+  h()
+], a.prototype, "activeTab", 2);
+r([
+  h()
+], a.prototype, "hasScrollControls", 2);
+r([
+  h()
+], a.prototype, "shouldHideScrollStartButton", 2);
+r([
+  h()
+], a.prototype, "shouldHideScrollEndButton", 2);
+r([
+  h()
+], a.prototype, "dropdownOffset", 2);
+r([
+  h()
+], a.prototype, "tabPanelHeight", 2);
+r([
+  h()
+], a.prototype, "tabAlignmentIndent", 2);
+r([
+  h()
+], a.prototype, "shouldIgnoreAlignment", 2);
+r([
+  h()
+], a.prototype, "shouldShowDropdown", 2);
+r([
+  h()
+], a.prototype, "isActiveTabHidden", 2);
+r([
+  h()
+], a.prototype, "paginationCount", 2);
+r([
+  h()
+], a.prototype, "activePaginationIndex", 2);
+r([
+  h()
+], a.prototype, "tabWidth", 2);
+r([
+  u()
+], a.prototype, "placement", 2);
+r([
+  u()
+], a.prototype, "activation", 2);
+r([
+  u({ attribute: "no-scroll-controls", type: Boolean })
+], a.prototype, "noScrollControls", 2);
+r([
+  u({ attribute: "fixed-scroll-controls", type: Boolean })
+], a.prototype, "fixedScrollControls", 2);
+r([
+  u({ attribute: "use-max-panel-height", type: Boolean })
+], a.prototype, "useMaxPanelHeight", 2);
+r([
+  u({ reflect: !0, type: String })
+], a.prototype, "variant", 2);
+r([
+  u({ attribute: "overflow-variant", reflect: !0, type: String })
+], a.prototype, "overflowVariant", 2);
+r([
+  u({ attribute: "hide-panel-variant", reflect: !0, type: String })
+], a.prototype, "hidePanelVariant", 2);
+r([
+  u({ attribute: "tab-alignment", reflect: !0, type: String })
+], a.prototype, "tabAlignment", 2);
+r([
+  u({ attribute: "dropdown-label", type: String })
+], a.prototype, "dropdownLabel", 2);
+r([
+  u({ attribute: "tabs-per-page", type: Number })
+], a.prototype, "tabsPerPage", 2);
+r([
+  U({ passive: !0 })
+], a.prototype, "handleScrollEnd", 1);
+r([
+  m("noScrollControls", { waitUntilFirstUpdate: !0 })
+], a.prototype, "updateScrollControls", 1);
+r([
+  m("placement", { waitUntilFirstUpdate: !0 })
+], a.prototype, "syncIndicator", 1);
+r([
+  m("variant", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleVariantChange", 1);
+r([
+  m("overflowVariant", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleOverflowVariantChange", 1);
+r([
+  m("dropdownLabel", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleDropdownLabelChange", 1);
+r([
+  m("hidePanelVariant", { waitUntilFirstUpdate: !0 }),
+  m("useMaxPanelHeight", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleAbsoluteHeightChange", 1);
+r([
+  m("tabAlignment", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleTabAlignmentChange", 1);
+r([
+  m("tabsPerPage", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleTabsPerPageChange", 1);
+a = r([
+  R("cx-tab-group")
+], a);
+export {
+  a as C,
+  C as T,
+  p as a,
+  A as b
+};