@orangelogic/design-system 2.35.0 → 2.36.0

package/library/chunks/tab-group.DyzM7DYO.js

@@ -1,1236 +0,0 @@
-import z from "../components/resize-observer.js";
-import { i as W, n as u, C as B, x as A, c as R } from "./custom-element.fmLrnDZr.js";
-import { c as E } from "./component.styles.DtouHn2g.js";
-import { L } from "./i18n.D33BKrRs.js";
-import { s as D } from "./scroll.DwPiX2Ox.js";
-import { w as m } from "./watch.BCJD77bD.js";
-import { i as U } from "./dom.DDszM5Cy.js";
-import { r as h } from "./state.Dt9F_SuS.js";
-import { t as V } 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.DrU92LJQ.js";
-import M from "../components/dropdown.js";
-import j from "../components/icon-button.js";
-import K from "../components/menu.js";
-import { C as q } from "./menu-item.DqbKJDm0.js";
-import X 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 || {}), y = /* @__PURE__ */ ((t) => (t.Absolute = "absolute", t.DisplayNone = "display-none", t))(y || {});
-const J = 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;
-    opacity: 0;
-    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 Q = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, r = (t, e, o, a) => {
-  for (var n = a > 1 ? void 0 : a ? Y(e, o) : e, c = t.length - 1, s; c >= 0; c--)
-    (s = t[c]) && (n = (a ? s(e, o, n) : s(n)) || n);
-  return a && n && Q(e, o, n), n;
-};
-let i = 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 = y.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((e) => {
-      e.some(
-        (o) => !["aria-labelledby", "aria-controls"].includes(o.attributeName)
-      ) && setTimeout(() => this.setAriaLabels()), e.some((o) => o.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(
-          (o, a) => {
-            o[0].intersectionRatio > 0 && (this.setAriaLabels(), this.setActiveTab(this.getActiveTab() ?? this.tabs[0], {
-              emitEvents: !1
-            }), a.unobserve(o[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(t) {
-    const e = this.getActiveTab();
-    if (!e)
-      return;
-    const o = this.getAllTabs().indexOf(e), a = this.findNextFocusableTab(o, "forward");
-    a && this.setActiveTab(a, t);
-  }
-  /**
-   * Navigate to the previous tab
-   */
-  previousTab(t) {
-    const e = this.getActiveTab();
-    if (!e)
-      return;
-    const o = this.getAllTabs().indexOf(e), a = this.findNextFocusableTab(o, "backward");
-    a && this.setActiveTab(a, t);
-  }
-  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 === 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 e = t.target;
-    let o = e.closest("cx-tab");
-    if (!o) {
-      const n = e.closest("[data-panel]")?.getAttribute("data-panel");
-      o = this.tabs.find((c) => c.panel === n) ?? null;
-    }
-    o?.closest("cx-tab-group") === this && o !== null && (this.setActiveTab(o, { scrollBehavior: "smooth" }), this.isActiveTabHidden = o.hasAttribute("data-hidden"));
-  }
-  handleKeyDown(t) {
-    const e = t.target;
-    let o = e.closest("cx-tab");
-    if (!o) {
-      const n = e.closest("[data-panel]")?.getAttribute("data-panel");
-      o = this.tabs.find((c) => c.panel === n) ?? null;
-    }
-    if (o?.closest("cx-tab-group") === this && (["Enter", " "].includes(t.key) && o !== null && (this.setActiveTab(o, { scrollBehavior: "smooth" }), this.isActiveTabHidden = o.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), e = this.tabs.filter(
-      (n) => !n.hasAttribute("data-hidden")
-    ).length;
-    if (t === -1)
-      return;
-    const o = t - e;
-    if (o < 0)
-      return;
-    const a = this.menu.getAllItems()[o];
-    this.menu.setCurrentItem(a), a.focus();
-  }
-  setActiveTab(t, e) {
-    if (e = {
-      emitEvents: !0,
-      paginateDirection: "forward",
-      scrollBehavior: "auto",
-      ...e
-    }, t && t !== this.activeTab && !t.disabled) {
-      const o = this.activeTab;
-      this.activeTab = t;
-      for (const a of this.tabs)
-        a.active = a === this.activeTab, a.tabIndex = a === this.activeTab ? 0 : -1;
-      for (const a of this.panels)
-        a.active = a.name === this.activeTab?.panel, this.hidePanelVariant === y.Absolute && (a.inert = a.name !== this.activeTab?.panel);
-      if (this.syncIndicator(), this.calculateTabPanelHeight(), !this.activeTab?.hasAttribute("data-hidden") && ["top", "bottom"].includes(this.placement)) {
-        if (U(this.nav, this.activeTab, 10) || !e.paginate)
-          D(
-            this.activeTab,
-            this.nav,
-            "horizontal",
-            e.scrollBehavior
-          );
-        else if (e.paginate) {
-          let a = e.paginateDirection === "forward" ? this.activePaginationIndex + 1 : this.activePaginationIndex - 1;
-          a === this.paginationCount && (a = 0), a < 0 && (a = this.paginationCount - 1), this.nav.scrollTo({
-            behavior: "smooth",
-            left: a * this.nav.clientWidth
-          });
-        }
-      }
-      e.emitEvents && (o && this.emit("cx-tab-hide", { detail: { name: o.panel } }), this.emit("cx-tab-show", { detail: { name: this.activeTab.panel } }));
-    }
-  }
-  setAriaLabels() {
-    for (const t of this.tabs) {
-      const e = this.panels.find((o) => o.name === t.panel);
-      e && (t.setAttribute("aria-controls", e.getAttribute("id")), e.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 e = t.hasAttribute("data-hidden") ? this.dropdownTrigger?.clientWidth ?? 0 : t.clientWidth, o = t.clientHeight, a = 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 = `${e}px`, this.indicator.style.height = "auto", this.indicator.style.translate = a ? `${-1 * s.left}px` : `${s.left}px`;
-        break;
-      case "start":
-      case "end":
-        this.indicator.style.width = "auto", this.indicator.style.height = `${o}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 === y.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight());
-    }), this.allowDropdownOverflow) {
-      const t = new IntersectionObserver(
-        (e) => {
-          t.disconnect();
-          const o = getComputedStyle(this.tabButtons), a = parseFloat(o.paddingLeft || "0") + parseFloat(o.paddingRight || "0"), n = this.container.clientWidth - a, c = this.nav.clientWidth - a, s = this.dropdownTrigger?.clientWidth ?? 0, d = e.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 e.entries()) {
-            const f = g.target, _ = c - this.dropdownOffset, v = f.getBoundingClientRect().width;
-            let b = l === e.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 > i.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 e of this.tabs)
-        t.observe(e);
-    } 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 e = Math.round(this.nav.scrollLeft / t);
-    Math.ceil(this.nav.scrollLeft + t) >= Math.round(this.tabButtons.scrollWidth) && e < this.paginationCount - 1 && (e = this.paginationCount - 1), this.activePaginationIndex = e, 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, e) {
-    let o = null;
-    const a = e === "forward" ? 1 : -1;
-    let n = t + a;
-    for (; t < this.tabs.length; ) {
-      if (o = this.tabs[n] || null, o === null) {
-        e === "forward" ? o = this.focusableTabs[0] : o = this.focusableTabs[this.focusableTabs.length - 1];
-        break;
-      }
-      if (!o.disabled)
-        break;
-      n += a;
-    }
-    return o;
-  }
-  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() {
-    if (this.hidePanelVariant === y.Absolute)
-      this.setupPanelResizeObserver(), this.calculateTabPanelHeight();
-    else {
-      this.cleanupPanelResizeObserver(), this.tabPanelHeight = 0;
-      for (const t of this.panels)
-        t.inert = !1;
-    }
-  }
-  handleTabAlignmentChange() {
-    this.syncTabsAndPanels();
-  }
-  async handleTabsPerPageChange() {
-    await this.updateComplete, this.updatePagination();
-  }
-  /**
-   * 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 e = this.tabs.find((o) => o.panel === t);
-    e && this.setActiveTab(e, { scrollBehavior: "smooth" });
-  }
-  handleNavContainerResize() {
-    const t = this.container.clientWidth, e = this.tabButtons.clientWidth;
-    this.shouldIgnoreAlignment = t < e, 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 e = t.currentTarget, o = Number(e.dataset.index);
-    o === this.activePaginationIndex || Number.isNaN(o) || (this.activePaginationIndex = o, this.nav.scrollTo({
-      behavior: "smooth",
-      left: o * this.nav.clientWidth
-    }));
-  }
-  handlePaginationDotKeyDown(t) {
-    const e = t.target;
-    if (t.key === "Enter" || t.key === " ") {
-      t.preventDefault(), e.click();
-      return;
-    }
-    if (!["ArrowRight", "ArrowLeft"].includes(t.key))
-      return;
-    t.preventDefault(), t.stopPropagation();
-    const o = Array.from(this.allDots), a = o.indexOf(e);
-    if (a === -1)
-      return;
-    const n = t.key === "ArrowRight" ? a + 1 : a - 1;
-    o[n]?.focus();
-  }
-  renderPaginationDot(t) {
-    const e = t + 1;
-    return A`
-      <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", e)}
-        tabindex="0"
-        data-index=${t}
-        @click=${this.handlePaginationDotClick}
-        @keydown=${this.handlePaginationDotKeyDown}
-      ></button>
-    `;
-  }
-  render() {
-    const t = this.localize.dir() === "rtl", e = this.allowDropdownOverflow && this.isActiveTabHidden, o = this.overflowVariant === p.Pagination && this.paginationCount > 1 && Number.isFinite(this.paginationCount);
-    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 !== 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,
-      () => 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=${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,
-      () => A`
-                      <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": e,
-        "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(
-          (a) => a.hasAttribute("data-hidden")
-        ),
-        (a) => A`
-                              <cx-menu-item
-                                class=${x({
-          "tab-group__dropdown__menu-item": !0,
-          "tab-group__dropdown__menu-item--active": a.active
-        })}
-                                aria-active=${a.ariaSelected}
-                                aria-disabled=${a.ariaDisabled}
-                                ?active=${a.active}
-                                ?disabled=${a.disabled}
-                                data-panel=${a.panel}
-                              >
-                                ${a.textContent}
-                              </cx-menu-item>
-                            `
-      )}
-                        </cx-menu>
-                      </cx-dropdown>
-                    `
-    )}
-                </cx-resize-observer>
-              </div>
-            </div>
-            ${P(
-      this.overflowVariant === p.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=${T({ height: this.bodyHeight })}
-          @slotchange=${this.syncTabsAndPanels}
-        ></slot>
-
-
-        ${P(
-      o,
-      () => A`
-              <div class="tab-pagination">
-                ${$(
-        Array.from(
-          { length: this.paginationCount },
-          (a, n) => n
-        ),
-        (a) => this.renderPaginationDot(a)
-      )}
-              </div>
-            `
-    )}
-      </div>
-    `;
-  }
-};
-i.styles = [E, J];
-i.dependencies = {
-  "cx-button": F,
-  "cx-dropdown": M,
-  "cx-icon-button": j,
-  "cx-menu": K,
-  "cx-menu-item": q,
-  "cx-resize-observer": z,
-  "cx-tab": X
-};
-i.MIN_CLAMP_WIDTH = 100;
-r([
-  w(".tab-group")
-], i.prototype, "tabGroup", 2);
-r([
-  w(".tab-group__body")
-], i.prototype, "body", 2);
-r([
-  w(".tab-group__nav-container")
-], i.prototype, "container", 2);
-r([
-  w(".tab-group__nav")
-], i.prototype, "nav", 2);
-r([
-  w(".tab-group__indicator")
-], i.prototype, "indicator", 2);
-r([
-  w(".tab-group__dropdown")
-], i.prototype, "dropdown", 2);
-r([
-  w(".tab-group__dropdown__menu")
-], i.prototype, "menu", 2);
-r([
-  w(".tab-group__tabs")
-], i.prototype, "tabButtons", 2);
-r([
-  w(".tab-group__dropdown__trigger")
-], i.prototype, "dropdownTrigger", 2);
-r([
-  N(".tab-pagination__dot")
-], i.prototype, "allDots", 2);
-r([
-  h()
-], i.prototype, "activeTab", 2);
-r([
-  h()
-], i.prototype, "hasScrollControls", 2);
-r([
-  h()
-], i.prototype, "shouldHideScrollStartButton", 2);
-r([
-  h()
-], i.prototype, "shouldHideScrollEndButton", 2);
-r([
-  h()
-], i.prototype, "dropdownOffset", 2);
-r([
-  h()
-], i.prototype, "tabPanelHeight", 2);
-r([
-  h()
-], i.prototype, "tabAlignmentIndent", 2);
-r([
-  h()
-], i.prototype, "shouldIgnoreAlignment", 2);
-r([
-  h()
-], i.prototype, "shouldShowDropdown", 2);
-r([
-  h()
-], i.prototype, "isActiveTabHidden", 2);
-r([
-  h()
-], i.prototype, "paginationCount", 2);
-r([
-  h()
-], i.prototype, "activePaginationIndex", 2);
-r([
-  h()
-], i.prototype, "tabWidth", 2);
-r([
-  u()
-], i.prototype, "placement", 2);
-r([
-  u()
-], i.prototype, "activation", 2);
-r([
-  u({ attribute: "no-scroll-controls", type: Boolean })
-], i.prototype, "noScrollControls", 2);
-r([
-  u({ attribute: "fixed-scroll-controls", type: Boolean })
-], i.prototype, "fixedScrollControls", 2);
-r([
-  u({ attribute: "use-max-panel-height", type: Boolean })
-], i.prototype, "useMaxPanelHeight", 2);
-r([
-  u({ reflect: !0, type: String })
-], i.prototype, "variant", 2);
-r([
-  u({ attribute: "overflow-variant", reflect: !0, type: String })
-], i.prototype, "overflowVariant", 2);
-r([
-  u({ attribute: "hide-panel-variant", reflect: !0, type: String })
-], i.prototype, "hidePanelVariant", 2);
-r([
-  u({ attribute: "tab-alignment", reflect: !0, type: String })
-], i.prototype, "tabAlignment", 2);
-r([
-  u({ attribute: "dropdown-label", type: String })
-], i.prototype, "dropdownLabel", 2);
-r([
-  u({ attribute: "tabs-per-page", type: Number })
-], i.prototype, "tabsPerPage", 2);
-r([
-  V({ passive: !0 })
-], i.prototype, "handleScrollEnd", 1);
-r([
-  m("noScrollControls", { waitUntilFirstUpdate: !0 })
-], i.prototype, "updateScrollControls", 1);
-r([
-  m("placement", { waitUntilFirstUpdate: !0 })
-], i.prototype, "syncIndicator", 1);
-r([
-  m("variant", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleVariantChange", 1);
-r([
-  m("overflowVariant", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleOverflowVariantChange", 1);
-r([
-  m("dropdownLabel", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleDropdownLabelChange", 1);
-r([
-  m("hidePanelVariant", { waitUntilFirstUpdate: !0 }),
-  m("useMaxPanelHeight", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleAbsoluteHeightChange", 1);
-r([
-  m("tabAlignment", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleTabAlignmentChange", 1);
-r([
-  m("tabsPerPage", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleTabsPerPageChange", 1);
-i = r([
-  R("cx-tab-group")
-], i);
-export {
-  i as C,
-  C as T,
-  p as a,
-  y as b
-};