@patternfly/elements 4.1.0 → 4.2.0

package/pf-tabs/pf-tabs.js

@@ -16,7 +16,302 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { TabExpandEvent, context } from './context.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n[part="tabs-container"] {\n  width: var(--pf-c-tabs--Width, auto);\n  padding-inline-end: var(--pf-c-tabs--inset, 0);\n  padding-inline-start: var(--pf-c-tabs--inset, 0);\n}\n\n[part="tabs-container"]::before {\n  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);\n  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);\n}\n\n:host([box]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Bottom: auto;\n}\n\n:host([box]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderRightWidth: 0;\n}\n\n:host([box]) button:nth-of-type(2)::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host([box]) pf-tab[aria-selected="true"] + pf-tab {\n  --pf-c-tabs__link--before--Left: 0;\n}\n\n:host([box="light"]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);\n  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([vertical]) [part="tabs-container"] {\n  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));\n  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */\n  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--before--Left: 0;\n  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Right: auto;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0;\n  overflow: visible;\n}\n\n:host([vertical]) [part="tabs"] {\n  position: relative;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);\n}\n\n:host([vertical]) [part="tabs"]::before {\n  position: absolute;\n  right: auto;\n  border-style: solid;\n  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([vertical]) ::slotted(pf-tab:first-of-type) {\n  margin-block-start: var(--pf-c-tabs--inset, 0);\n}\n\n:host([vertical]) ::slotted(pf-tab:last-of-type) {\n  margin-block-end: var(--pf-c-tabs--inset, 0);\n}\n\n:host([box][vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));\n  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */\n  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */\n}\n\n:host([box][vertical]) [part="tabs"]::before {\n  right: 0;\n  left: auto;\n}\n\n:host([box][vertical]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {\n  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n[part="tabs"] {\n  display: var(--pf-c-tabs__list--Display, flex);\n}\n\nbutton {\n  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));\n  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));\n  transition:\n    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),\n    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);\n  --pf-icon--size: 16px;\n}\n\nbutton:hover {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));\n}\n\nbutton::before {\n  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);\n}\n\nbutton:nth-of-type(1) {\n  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:nth-of-type(2) {\n  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:disabled {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:not[vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: 0;\n  --pf-c-tabs--m-vertical--inset: 0;\n  --pf-c-tabs--m-vertical--m-box--inset: 0;\n}\n\n:host([fill]) [part="tabs"] {\n  flex-basis: 100%;\n}\n\n:host([fill]) ::slotted(pf-tab) {\n  flex-grow: 1;\n}\n\n:host([fill]) ::slotted(pf-tab:first-of-type) {\n  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;\n}\n\n:host([fill]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;\n}\n\n:host([border-bottom="false"]) [part="tabs-container"] {\n  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
+const styles = css `:host {
+  display: block;
+}
+
+[part="tabs-container"] {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+[part="tabs-container"]::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-style: solid;
+}
+
+:host button {
+  opacity: 1;
+}
+
+:host button:nth-of-type(1) {
+  margin-inline-end: 0;
+  translate: 0 0;
+}
+
+:host button:nth-of-type(2) {
+  margin-inline-start: 0;
+  translate: 0 0;
+}
+
+[part="tabs"],
+[part="panels"] {
+  display: block;
+}
+
+[part="tabs"] {
+  scrollbar-width: none;
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+[part="tabs-container"]::before,
+[part="tabs"]::before,
+button::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-style: solid;
+}
+
+[part="tabs"]::before,
+button::before {
+  top: 0;
+}
+
+button,
+[part="tabs"]::before {
+  border: 0;
+}
+
+button {
+  flex: none;
+  line-height: 1;
+  opacity: 0;
+}
+
+button::before {
+  border-block-start-width: 0;
+}
+
+button:nth-of-type(1) {
+  translate: -100% 0;
+}
+
+button:nth-of-type(2) {
+  translate: 100% 0;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+
+[part="tabs-container"] {
+  /** Width of the tabs container */
+  width: var(--pf-c-tabs--Width, auto);
+  /** Inset spacing for tabs */
+  padding-inline-end: var(--pf-c-tabs--inset, 0);
+  /** Inset spacing for tabs */
+  padding-inline-start: var(--pf-c-tabs--inset, 0);
+}
+
+[part="tabs-container"]::before {
+  /** Border color for tabs container pseudo-element */
+  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  /** Top border width */
+  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);
+  /** Right border width */
+  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);
+  /** Bottom border width */
+  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Left border width */
+  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);
+}
+
+:host([box]) [part="tabs-container"] {
+  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));
+  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));
+  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-tabs__link--after--Top: 0;
+  --pf-c-tabs__link--after--Bottom: auto;
+}
+
+:host([box]) ::slotted(pf-tab:last-of-type) {
+  --pf-c-tabs__link--before--BorderRightWidth: 0;
+}
+
+:host([box]) button:nth-of-type(2)::before {
+  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
+}
+
+:host([box]) pf-tab[aria-selected="true"] + pf-tab {
+  --pf-c-tabs__link--before--Left: 0;
+}
+
+:host([box="light"]) [part="tabs-container"] {
+  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);
+  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
+  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
+}
+
+:host([vertical]) [part="tabs-container"] {
+  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);
+  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));
+  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */
+  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));
+  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));
+  --pf-c-tabs__link--before--Left: 0;
+  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */
+  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-tabs__link--after--Top: 0;
+  --pf-c-tabs__link--after--Right: auto;
+
+  display: inline-flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0;
+  overflow: visible;
+}
+
+:host([vertical]) [part="tabs"] {
+  position: relative;
+  flex-direction: column;
+  flex-grow: 1;
+  /** Maximum width for vertical tabs */
+  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);
+}
+
+:host([vertical]) [part="tabs"]::before {
+  position: absolute;
+  right: auto;
+  border-style: solid;
+  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Top border width for vertical tabs */
+  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);
+  /** Right border width for vertical tabs */
+  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);
+  /** Bottom border width for vertical tabs */
+  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);
+  /** Left border width for vertical tabs */
+  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+}
+
+:host([vertical]) ::slotted(pf-tab:first-of-type) {
+  margin-block-start: var(--pf-c-tabs--inset, 0);
+}
+
+:host([vertical]) ::slotted(pf-tab:last-of-type) {
+  margin-block-end: var(--pf-c-tabs--inset, 0);
+}
+
+:host([box][vertical]) [part="tabs-container"] {
+  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));
+  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */
+  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */
+  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */
+}
+
+:host([box][vertical]) [part="tabs"]::before {
+  right: 0;
+  left: auto;
+}
+
+:host([box][vertical]) ::slotted(pf-tab:last-of-type) {
+  --pf-c-tabs__link--before--BorderBottomWidth: 0;
+  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+}
+
+:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {
+  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
+  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));
+  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+}
+
+:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {
+  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+}
+
+[part="tabs"] {
+  /** Display type for the tabs list */
+  display: var(--pf-c-tabs__list--Display, flex);
+}
+
+button {
+  /** Width of the scroll buttons */
+  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));
+  /** Color of the scroll buttons */
+  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));
+  /** Background color of the scroll buttons */
+  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
+  /** Outline offset for scroll buttons */
+  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));
+  transition:
+    /** Transition duration for margin changes */
+    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),
+    /** Transition duration for transform changes */
+    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);
+  --pf-icon--size: 16px;
+}
+
+button:hover {
+  /** Hover color for scroll buttons */
+  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));
+}
+
+button::before {
+  /** Border color for scroll button pseudo-elements */
+  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));
+  /** Right border width for scroll button pseudo-elements */
+  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);
+  /** Bottom border width for scroll button pseudo-elements */
+  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
+  /** Left border width for scroll button pseudo-elements */
+  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);
+}
+
+button:nth-of-type(1) {
+  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);
+}
+
+button:nth-of-type(2) {
+  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
+  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);
+}
+
+button:disabled {
+  /** Color for disabled scroll buttons */
+  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));
+}
+
+:host(:not[vertical]) [part="tabs-container"] {
+  --pf-c-tabs--inset: 0;
+  --pf-c-tabs--m-vertical--inset: 0;
+  --pf-c-tabs--m-vertical--m-box--inset: 0;
+}
+
+:host([fill]) [part="tabs"] {
+  flex-basis: 100%;
+}
+
+:host([fill]) ::slotted(pf-tab) {
+  flex-grow: 1;
+}
+
+:host([fill]) ::slotted(pf-tab:first-of-type) {
+  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;
+}
+
+:host([fill]) ::slotted(pf-tab:last-of-type) {
+  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;
+}
+
+:host([border-bottom="false"]) [part="tabs-container"] {
+  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */
+  --pf-c-tabs__link--before--BorderBottomWidth: 0;
+}
+`;
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 let PfTabs = class PfTabs extends LitElement {
     constructor() {
@@ -121,8 +416,10 @@ let PfTabs = class PfTabs extends LitElement {
     }
     render() {
         return html `
+      <!-- outer container -->
       <div part="container"
            class="${classMap({ overflow: __classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons })}">
+        <!-- tabs container -->
         <div part="tabs-container">${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
           <button id="previousTab" tabindex="-1"
               aria-label="${this.labelScrollLeft}"
@@ -130,7 +427,9 @@ let PfTabs = class PfTabs extends LitElement {
               @click="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_scrollLeft)}">
             <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
           </button>`}
+          <!-- tablist -->
           <div id="tabs" part="tabs" role="tablist">
+            <!-- Must contain one or more \`<pf-tab>\` -->
             <slot name="tab" @slotchange="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onSlotChange)}" @scroll="${__classPrivateFieldGet(this, _PfTabs_overflow, "f").onScroll}"></slot>
           </div>
           ${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
@@ -141,6 +440,12 @@ let PfTabs = class PfTabs extends LitElement {
             <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>
           </button>`}
         </div>
+        <!--
+          slot:
+            summary: Must contain one or more \`<pf-panel>\`
+          part:
+            summary: panels
+        -->
         <slot part="panels"></slot>
       </div>
     `;
@@ -183,7 +488,7 @@ _PfTabs_onExpand = function _PfTabs_onExpand(event) {
 };
 PfTabs.styles = [styles];
 PfTabs.scrollTimeoutDelay = 150;
-PfTabs.version = "4.1.0";
+PfTabs.version = "4.2.0";
 __decorate([
     property({ reflect: false, attribute: 'label-scroll-left' })
 ], PfTabs.prototype, "labelScrollLeft", void 0);

package/pf-tabs/pf-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { provide } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';\n\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, TabExpandEvent, context } from './context.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-tabs.css';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n * @cssprop     {<length>} [--pf-c-tabs--Width=auto]\n * @cssprop     {<length>} [--pf-c-tabs--inset=0]\n * @cssprop     {<color>}   [--pf-c-tabs--before--BorderColor=#d2d2d2]\n * @cssprop     {<length>}  [--pf-c-tabs--before--BorderTopWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--before--BorderRightWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--before--BorderBottomWidth=1px]\n * @cssprop     {<length>}  [--pf-c-tabs--before---BorderLeftWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--MaxWidth=15.625rem]\n * @cssprop     {<color>}   [--pf-c-tabs--m-vertical__list--before--BorderColor=#d2d2d2]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderTopWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderRightWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderBottomWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical__list--before--BorderLeftWidth=1px]\n * @cssprop     {<length>}  [--pf-c-tabs--m-vertical--m-box--inset=2rem]\n * @cssprop     {<display>} [--pf-c-tabs__list--Display=flex]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--Width=3rem]\n * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--Color=#151515]\n * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--BackgroundColor=#ffffff]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--OutlineOffset=-0.25rem]\n * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--margin=.125s]\n * @cssprop     {<time>}    [--pf-c-tabs__scroll-button--TransitionDuration--transform=.125s]\n * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--hover--Color=#06c]\n * @cssprop     {<color>}   [--pf-c-tabs__scroll-button--before--BorderColor=#d2d2d2]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderRightWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderBottomWidth=1px]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--BorderLeftWidth=0]\n * @cssprop     {<length>}  [--pf-c-tabs__scroll-button--before--border-width--base=1px]\n * @cssprop     {<color>} [--pf-c-tabs__scroll-button--disabled--Color=#d2d2d2]\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {\n    return event instanceof TabExpandEvent;\n  }\n\n  /**\n   * Aria Label for the left scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';\n\n  /**\n   * Aria Label for the right scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';\n\n  /**\n   * Box styling on tabs. Defaults to null\n   */\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  /**\n   * Set to true to enable vertical tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /**\n   * Set to true to enable filled tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  /**\n   * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.\n   */\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  /**\n   * Set's the tabs to be manually activated. This means that the tabs will not automatically select\n   * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving\n   * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  #activeIndex = -1;\n\n  /** The index of the active tab */\n  @property({ attribute: 'active-index', reflect: true, type: Number })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(v: number) {\n    this.#tabindex.atFocusedItemIndex = v;\n    this.#activeIndex = v;\n    this.activeTab = this.tabs[v];\n    for (const tab of this.tabs) {\n      if (!this.activeTab?.disabled) {\n        tab.active = tab === this.activeTab;\n      }\n      this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n    }\n  }\n\n  @property({ attribute: false }) activeTab?: PfTab;\n\n  get tabs(): PfTab[] {\n    return this.#tabs.tabs;\n  }\n\n  @query('#tabs') private tabsContainer!: HTMLElement;\n\n  get #ctx(): PfTabsContext {\n    const { activeTab, borderBottom, box, fill, manual, vertical } = this;\n    return { activeTab, borderBottom, box, fill, manual, vertical };\n  }\n\n  @provide({ context })\n  private ctx: PfTabsContext = this.#ctx;\n\n  #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });\n\n  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {\n    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',\n    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',\n    isActiveTab: x => x.active,\n  });\n\n  #tabindex = RovingTabindexController.of(this, {\n    getItemsContainer: () => this.tabsContainer ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\n    this.activeIndex = this.#tabindex.atFocusedItemIndex;\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(\n      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),\n      x => x.updateComplete,\n    ));\n    return here && ps.every(x => !!x);\n  }\n\n  protected override willUpdate(): void {\n    if (!this.manual && this.activeIndex !== this.#tabindex.atFocusedItemIndex) {\n      this.activeIndex = this.#tabindex.atFocusedItemIndex;\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  @observes('activeTab')\n  protected activeTabChanged(old?: PfTab, activeTab?: PfTab): void {\n    if (activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\n    } if (activeTab) {\n      this.activeIndex = this.tabs.indexOf(activeTab);\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (this.tabs.length && this.activeIndex === -1) {\n      this.select(this.tabs.findIndex(x => !x.disabled));\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <div part=\"container\"\n           class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollLeft}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"angle-left\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <div id=\"tabs\" part=\"tabs\" role=\"tablist\">\n            <slot name=\"tab\" @slotchange=\"${this.#onSlotChange}\" @scroll=\"${this.#overflow.onScroll}\"></slot>\n          </div>\n          ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollRight}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"angle-right\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\"></slot>\n      </div>\n    `;\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n\n  #onSlotChange() {\n    if (this.tabs) {\n      this.#overflow.init(this.tabsContainer, this.tabs);\n    }\n  }\n\n  #onExpand(event: Event) {\n    if (event instanceof TabExpandEvent\n      && !event.defaultPrevented && this.tabs.includes(event.tab)) {\n      this.select(event.tab);\n    }\n  }\n\n  select(tab: PfTab | number): void {\n    if (typeof tab === 'number') {\n      this.activeIndex = tab;\n    } else {\n      this.activeIndex = this.tabs.indexOf(tab);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}
+{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { provide } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';\n\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, TabExpandEvent, context } from './context.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-tabs.css';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n * @alias Tabs\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {\n    return event instanceof TabExpandEvent;\n  }\n\n  /**\n   * Aria Label for the left scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';\n\n  /**\n   * Aria Label for the right scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';\n\n  /**\n   * Box styling on tabs. Defaults to null\n   */\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  /**\n   * Set to true to enable vertical tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /**\n   * Set to true to enable filled tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  /**\n   * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.\n   */\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  /**\n   * Set's the tabs to be manually activated. This means that the tabs will not automatically select\n   * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving\n   * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  #activeIndex = -1;\n\n  /** The index of the active tab */\n  @property({ attribute: 'active-index', reflect: true, type: Number })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(v: number) {\n    this.#tabindex.atFocusedItemIndex = v;\n    this.#activeIndex = v;\n    this.activeTab = this.tabs[v];\n    for (const tab of this.tabs) {\n      if (!this.activeTab?.disabled) {\n        tab.active = tab === this.activeTab;\n      }\n      this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n    }\n  }\n\n  @property({ attribute: false }) activeTab?: PfTab;\n\n  get tabs(): PfTab[] {\n    return this.#tabs.tabs;\n  }\n\n  @query('#tabs') private tabsContainer!: HTMLElement;\n\n  get #ctx(): PfTabsContext {\n    const { activeTab, borderBottom, box, fill, manual, vertical } = this;\n    return { activeTab, borderBottom, box, fill, manual, vertical };\n  }\n\n  @provide({ context })\n  private ctx: PfTabsContext = this.#ctx;\n\n  #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });\n\n  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {\n    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',\n    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',\n    isActiveTab: x => x.active,\n  });\n\n  #tabindex = RovingTabindexController.of(this, {\n    getItemsContainer: () => this.tabsContainer ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\n    this.activeIndex = this.#tabindex.atFocusedItemIndex;\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(\n      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),\n      x => x.updateComplete,\n    ));\n    return here && ps.every(x => !!x);\n  }\n\n  protected override willUpdate(): void {\n    if (!this.manual && this.activeIndex !== this.#tabindex.atFocusedItemIndex) {\n      this.activeIndex = this.#tabindex.atFocusedItemIndex;\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  @observes('activeTab')\n  protected activeTabChanged(old?: PfTab, activeTab?: PfTab): void {\n    if (activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\n    } if (activeTab) {\n      this.activeIndex = this.tabs.indexOf(activeTab);\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (this.tabs.length && this.activeIndex === -1) {\n      this.select(this.tabs.findIndex(x => !x.disabled));\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <!-- outer container -->\n      <div part=\"container\"\n           class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <!-- tabs container -->\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollLeft}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"angle-left\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <!-- tablist -->\n          <div id=\"tabs\" part=\"tabs\" role=\"tablist\">\n            <!-- Must contain one or more \\`<pf-tab>\\` -->\n            <slot name=\"tab\" @slotchange=\"${this.#onSlotChange}\" @scroll=\"${this.#overflow.onScroll}\"></slot>\n          </div>\n          ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollRight}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"angle-right\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <!--\n          slot:\n            summary: Must contain one or more \\`<pf-panel>\\`\n          part:\n            summary: panels\n        -->\n        <slot part=\"panels\"></slot>\n      </div>\n    `;\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n\n  #onSlotChange() {\n    if (this.tabs) {\n      this.#overflow.init(this.tabsContainer, this.tabs);\n    }\n  }\n\n  #onExpand(event: Event) {\n    if (event instanceof TabExpandEvent\n      && !event.defaultPrevented && this.tabs.includes(event.tab)) {\n      this.select(event.tab);\n    }\n  }\n\n  select(tab: PfTab | number): void {\n    if (typeof tab === 'number') {\n      this.activeIndex = tab;\n    } else {\n      this.activeIndex = this.tabs.indexOf(tab);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}