@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/chunks/{tab-group.05PY0smt.js → tab-group.0Po0eoxR.js}

@@ -1,11 +1,11 @@
 import In from "../components/resize-observer.js";
 import { n as wt, C as Fn } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as Ln } from "./component.styles.DMSLciL5.js";
+import { c as Ln } from "./component.styles.CRO4Odto.js";
 import { c as $n } from "./custom-element.L4WJXn1j.js";
-import { L as Nn } from "./i18n.C0iakJkV.js";
+import { L as Nn } from "./i18n.BFqTRDCA.js";
 import { s as Zi } from "./scroll.xtO5yojm.js";
-import { w as ft } from "./watch.q1sEjPWL.js";
-import { i as Bn } from "./dom.BQVKDNd8.js";
+import { w as ft } from "./watch.BCJD77bD.js";
+import { i as Bn } from "./dom.BslZF2Y_.js";
 import { s as Wn } from "./parse.Cu5nBDTb.js";
 import { i as Vn, x as $t } from "./lit-element.jLBm65_O.js";
 import { r as at } from "./state.CSDxrqLd.js";
@@ -17,9 +17,9 @@ import { i as Ji } from "./guard.D4axKaMo.js";
 import { o as tr } from "./map.D8heArFD.js";
 import { o as Ue } from "./style-map.llVFPd__.js";
 import { n as Pe } from "./when.Dr1es41R.js";
-import { C as Yn } from "./button.KnE3mcyM.js";
+import { C as Yn } from "./button.CauAHfdl.js";
 import Xn from "../components/dropdown.js";
-import qn from "../components/icon-button.js";
+import { C as qn } from "./icon-button.rKe0N4VB.js";
 import Gn from "../components/menu.js";
 import Kn from "../components/menu-item.js";
 import jn from "../components/tab.js";
@@ -2321,434 +2321,7 @@ Ft.create("cubic", "0.65, 0, 0.35, 1");
 Ft.create("expo", "0.87, 0, 0.13, 1");
 Ft.create("quad", "0.45, 0, 0.55, 1");
 Ft.create("linear", "0.42, 0, 0.58, 1");
-const Co = Vn`
-  :host {
-    --indicator-color: var(--cx-color-primary);
-    --indicator-width: 2px;
-    --track-color: var(--cx-color-neutral-200);
-    --track-width: 1px;
-
-    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--button .tab-group__indicator {
-    --indicator-width: 0;
-  }
-
-  .tab-group__indicator {
-    position: absolute;
-    transition:
-      var(--cx-transition-fast) translate ease,
-      var(--cx-transition-fast) width ease;
-  }
-
-  .tab-group--timeline .tab-group__indicator {
-    display: none !important;
-  }
-
-  .tab-group__dropdown {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    height: 100%;
-    display: flex;
-  }
-
-  .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__nav-container {
-    padding: var(--tab-group-nav-padding, 0);
-  }
-
-  .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;
-    border-bottom: solid var(--track-width) var(--track-color);
-  }
-
-  .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;
-  }
-
-  .tab-group--top .tab-group__indicator {
-    bottom: 0;
-    border-bottom: solid var(--indicator-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));
-  }
-
-  /*
-   * Bottom
-   */
-
-  .tab-group--bottom {
-    flex-direction: column;
-  }
-
-  .tab-group--bottom .tab-group__nav-container {
-    order: 3;
-    border-top: solid var(--track-width) var(--track-color);
-  }
-
-  .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;
-  }
-
-  .tab-group--bottom .tab-group__indicator {
-    top: 0;
-    border-top: solid var(--indicator-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(--indicator-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(--indicator-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;
-    border-inline-start: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--end .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-  }
-
-  .tab-group--end .tab-group__indicator {
-    left: calc(-1 * var(--indicator-width));
-  }
-
-  .tab-group--default.tab-group--end .tab-group__indicator {
-    border-inline-start: solid var(--indicator-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);
-  }
-
-  .timeline-line {
-    --offset: var(--min-tab-width);
-    --horizontal-padding: var(--cx-spacing-small);
-
-    position: absolute;
-    top: 18px;
-    left: calc(var(--offset) / 2 + var(--horizontal-padding));
-    transform: translateY(-50%);
-    width: calc(100% - var(--offset) - 2 * var(--horizontal-padding));
-    height: 2px;
-    background-color: var(--cx-color-neutral-300);
-    display: block;
-  }
-`;
+const Co = Vn`:host{--indicator-color:var(--cx-color-primary);--indicator-width:2px;--track-color:var(--cx-color-neutral-200);--track-width:1px;isolation:isolate;display:block}::slotted(cx-tab[data-hidden]){visibility:hidden!important;pointer-events:none!important}.tab-group{border-radius:0;display:flex}.tab-group__tabs{display:flex;position:relative}.tab-group--button .tab-group__tabs{background-color:var(--cx-color-neutral-100);padding:var(--cx-spacing-2x-small);border-radius:12px;flex:none}.tab-group--button .tab-group__indicator{--indicator-width:0}.tab-group__indicator{transition:var(--cx-transition-fast) translate ease, var(--cx-transition-fast) width ease;position:absolute}.tab-group--timeline .tab-group__indicator{display:none!important}.tab-group__dropdown{z-index:1;height:100%;display:flex;position:absolute;top:0}.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);flex:1;height:100%}.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{gap:var(--cx-spacing-3x-small);flex-direction:column;display:flex}.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__nav-container{padding:var(--tab-group-nav-padding,0)}.tab-group--has-scroll-controls .tab-group__nav-container{padding:0 var(--cx-spacing-x-large);position:relative}.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{contain:layout size;position:relative}:host([hide-panel-variant=absolute]) ::slotted(cx-tab-panel){width:100%;display:block;top:0;left:0;position:absolute!important}:host([hide-panel-variant=absolute]) ::slotted(cx-tab-panel:not([active])){visibility:hidden;opacity:0;pointer-events:none}.tab-group__scroll-button{width:var(--cx-spacing-x-large);justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0}.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}.tab-group--top{gap:var(--cx-spacing-small);flex-direction:column}.tab-group--top .tab-group__nav-container{border-bottom:solid var(--track-width) var(--track-color);order:1}.tab-group--top .tab-group__nav{scrollbar-width:none;display:flex;overflow-x:auto}.tab-group--top.tab-group--has-hidden-tabs .tab-group__nav{overflow-x:hidden}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex-direction:row;position:relative}.tab-group--top.tab-group--rtl .tab-group__tabs{flex-direction:row-reverse}.tab-group--default.tab-group--top .tab-group__tabs{flex:auto}.tab-group--top .tab-group__indicator{border-bottom:solid var(--indicator-width) var(--indicator-color);bottom:0}.tab-group--top .tab-group__body{order:3}.tab-group--top ::slotted(cx-tab-panel){--padding:var(--tab-panel-padding,var(--cx-spacing-medium))}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{border-top:solid var(--track-width) var(--track-color);order:3}.tab-group--bottom .tab-group__nav{scrollbar-width:none;display:flex;overflow-x:auto}.tab-group--bottom.tab-group--has-hidden-tabs .tab-group__nav{overflow-x:hidden}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex-direction:row;position:relative}.tab-group--bottom.tab-group--rtl .tab-group__tabs{flex-direction:row-reverse}.tab-group--default.tab-group--bottom .tab-group__tabs{flex:auto}.tab-group--bottom .tab-group__indicator{border-top:solid var(--indicator-width) var(--indicator-color);top:0}.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)}.tab-group--start{flex-direction:row}.tab-group--start .tab-group__nav-container{order:1}.tab-group--start .tab-group__tabs{flex-direction:column;flex:none}.tab-group--start .tab-group__indicator{right:calc(-1 * var(--indicator-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(--indicator-width) var(--indicator-color)}.tab-group--start .tab-group__body{flex:auto;order:3}.tab-group--start ::slotted(cx-tab-panel){--padding:var(--tab-panel-padding,0 var(--cx-spacing-medium))}.tab-group--end{flex-direction:row}.tab-group--end .tab-group__nav-container{border-inline-start:solid var(--track-width) var(--track-color);order:3}.tab-group--end .tab-group__tabs{flex-direction:column;flex:none}.tab-group--end .tab-group__indicator{left:calc(-1 * var(--indicator-width))}.tab-group--default.tab-group--end .tab-group__indicator{border-inline-start:solid var(--indicator-width) var(--indicator-color)}.tab-group--end .tab-group__body{flex:auto;order:1}.tab-group--end ::slotted(cx-tab-panel){--padding:var(--tab-panel-padding,0 var(--cx-spacing-medium))}.tab-pagination{justify-content:center;gap:var(--cx-spacing-small);flex-wrap:wrap;order:2;display:flex}.tab-pagination__dot{cursor:pointer;border-radius:var(--cx-border-radius-circle);width:var(--cx-spacing-small);height:var(--cx-spacing-small);background:0 0;background-color:var(--cx-color-neutral-300);border:0;margin:0;padding:0;display:block}.tab-pagination__dot--active{background-color:var(--cx-color-neutral-500)}.timeline-line{--offset:var(--min-tab-width);--horizontal-padding:var(--cx-spacing-small);top:18px;left:calc(var(--offset) / 2 + var(--horizontal-padding));width:calc(100% - var(--offset) - 2 * var(--horizontal-padding));background-color:var(--cx-color-neutral-300);height:2px;display:block;position:absolute;transform:translateY(-50%)}`;
 var ko = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, k = (o, t, e, i) => {
   for (var r = i > 1 ? void 0 : i ? Oo(t, e) : t, n = o.length - 1, s; n >= 0; n--)
     (s = o[n]) && (r = (i ? s(t, e, r) : s(r)) || r);
@@ -3237,30 +2810,14 @@ let A = class extends Fn {
   }
   renderPaginationDot(o) {
     const t = o + 1;
-    return $t`
-      <button
-        part="dot${this.activePaginationIndex === o ? " dot--active" : ""}"
-        class=${Nt({
+    return $t`<button part="dot${this.activePaginationIndex === o ? " dot--active" : ""}" class=${Nt({
       "tab-pagination__dot": !0,
       "tab-pagination__dot--active": o === this.activePaginationIndex
-    })}
-        role="tab"
-        type="button"
-        aria-selected=${o === this.activePaginationIndex ? "true" : "false"}
-        aria-label=${this.localize.term("slideNum", t)}
-        tabindex="0"
-        data-index=${o}
-        @click=${this.handlePaginationDotClick}
-        @keydown=${this.handlePaginationDotKeyDown}
-      ></button>
-    `;
+    })} role="tab" type="button" aria-selected=${o === this.activePaginationIndex ? "true" : "false"} aria-label=${this.localize.term("slideNum", t)} tabindex="0" data-index=${o} @click=${this.handlePaginationDotClick} @keydown=${this.handlePaginationDotKeyDown}></button>`;
   }
   render() {
     const o = this.localize.dir() === "rtl", t = this.allowDropdownOverflow && this.isActiveTabHidden, e = this.overflowVariant === Tt.Pagination && this.paginationCount > 1 && Number.isFinite(this.paginationCount);
-    return $t`
-      <div
-        part="base"
-        class=${Nt({
+    return $t`<div part="base" class=${Nt({
       "tab-group": !0,
       "tab-group--bottom": this.placement === "bottom",
       "tab-group--end": this.placement === "end",
@@ -3270,173 +2827,65 @@ let A = class extends Fn {
       "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">
-            ${Pe(
+    })} @click=${this.handleClick} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleNavContainerResize}><div class="tab-group__nav-container" part="nav">${Pe(
       this.overflowVariant === Tt.Scroll && this.hasScrollControls,
-      () => $t`
-                <cx-icon-button
-                  part="scroll-button scroll-button--start"
-                  exportparts="base:scroll-button__base"
-                  class=${Nt({
+      () => $t`<cx-icon-button part="scroll-button scroll-button--start" exportparts="base:scroll-button__base" class=${Nt({
         "tab-group__scroll-button": !0,
         "tab-group__scroll-button--start": !0,
         "tab-group__scroll-button--start--hidden": this.shouldHideScrollStartButton
-      })}
-                  name=${o ? "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=${Ue({
+      })} name=${o ? "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=${Ue({
       "--min-tab-width": `${this.minTabWidth}px`,
       justifyContent: this.overflowVariant === Tt.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>
-                ${Pe(
+    })} @scrollend=${this.handleScrollEnd}><div part="tabs" class="tab-group__tabs" role="tablist"><div part="active-tab-indicator" class="tab-group__indicator"></div>${Pe(
       this.variant === ue.Timeline && this.clampedTabsPerPage > 1,
       () => $t`<div class="timeline-line"></div>`
-    )}
-                <cx-resize-observer @cx-resize=${this.handleIndicatorResize}>
-                  <slot
-                    name="nav"
-                    @slotchange=${this.syncTabsAndPanels}
-                    style=${Ue(this.tabWidth > 0 ? {
+    )}<cx-resize-observer @cx-resize=${this.handleIndicatorResize}><slot name="nav" @slotchange=${this.syncTabsAndPanels} style=${Ue(this.tabWidth > 0 ? {
       "--width": `${this.tabWidth}px`
-    } : {})}
-                  ></slot>
-                  ${Pe(
+    } : {})}></slot>${Pe(
       this.allowDropdownOverflow,
-      () => $t`
-                      <cx-dropdown
-                        class=${Nt({
+      () => $t`<cx-dropdown class=${Nt({
         "tab-group__dropdown": !0
-      })}
-                        style=${Ji(
+      })} style=${Ji(
         [o, this.dropdownOffset],
         () => this.getDropdownStyle()
-      )}
-                        placement=${Ji(
+      )} placement=${Ji(
         [this.placement, o],
         () => 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=${Nt({
+      )} 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=${Nt({
         "tab-group__dropdown__trigger": !0,
         "tab-group__dropdown__trigger--active": t,
         "tab-group__dropdown__trigger--hidden": !this.shouldShowDropdown
-      })}
-                        >
-                          ${this.dropdownLabel}
-                        </cx-button>
-                        <cx-menu
-                          class=${Nt({
+      })}>${this.dropdownLabel}</cx-button><cx-menu class=${Nt({
         "tab-group__dropdown__menu": !0,
         "tab-group__dropdown__menu--reverse": this.placement === "bottom"
-      })}
-                          ignored-keys="ArrowUp ArrowDown Home"
-                          bubble-keydown
-                        >
-                          ${tr(
+      })} ignored-keys="ArrowUp ArrowDown Home" bubble-keydown>${tr(
         this.tabs.filter(
           (i) => i.hasAttribute("data-hidden")
         ),
-        (i) => $t`
-                              <cx-menu-item
-                                class=${Nt({
+        (i) => $t`<cx-menu-item class=${Nt({
           "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>
-            ${Pe(
+        })} 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>${Pe(
       this.overflowVariant === Tt.Scroll && this.hasScrollControls,
-      () => $t`
-                <cx-icon-button
-                  part="scroll-button scroll-button--end"
-                  exportparts="base:scroll-button__base"
-                  class=${Nt({
+      () => $t`<cx-icon-button part="scroll-button scroll-button--end" exportparts="base:scroll-button__base" class=${Nt({
         "tab-group__scroll-button": !0,
         "tab-group__scroll-button--end": !0,
         "tab-group__scroll-button--end--hidden": this.shouldHideScrollEndButton
-      })}
-                  name=${o ? "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=${Ue({ height: this.bodyHeight })}
-          @slotchange=${this.syncTabsAndPanels}
-        ></slot>
-
-
-        ${Pe(
+      })} name=${o ? "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=${Ue({ height: this.bodyHeight })} @slotchange=${this.syncTabsAndPanels}></slot>${Pe(
       e,
-      () => $t`
-              <div class="tab-pagination">
-                ${tr(
+      () => $t`<div class="tab-pagination">${tr(
         Array.from(
           { length: this.paginationCount },
           (i, r) => r
         ),
         (i) => this.renderPaginationDot(i)
-      )}
-              </div>
-            `
-    )}
-      </div>
-    `;
+      )}</div>`
+    )}</div>`;
   }
 };
 A.styles = [Ln, Co];