@patternfly/elements 4.0.2 → 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.0.2";
+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"]}

package/pf-tabs/test/pf-tabs.spec.js

@@ -197,6 +197,9 @@ describe('<pf-tabs>', function () {
                         expect(second).to.have.attribute('active');
                         expect(third).to.not.have.attribute('active');
                     });
+                    it('should specify the selected tab to assistive technology', async function () {
+                        expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-2' });
+                    });
                 });
                 describe('pressing ArrowLeft', function () {
                     beforeEach(async function () {
@@ -208,6 +211,9 @@ describe('<pf-tabs>', function () {
                         expect(second).to.not.have.attribute('active');
                         expect(third).to.have.attribute('active');
                     });
+                    it('should specify the selected tab to assistive technology', async function () {
+                        expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-3' });
+                    });
                     describe('then pressing ArrowRight', function () {
                         beforeEach(async function () {
                             await sendKeys({ down: 'ArrowRight' });
@@ -219,6 +225,9 @@ describe('<pf-tabs>', function () {
                             expect(second).to.not.have.attribute('active');
                             expect(third).to.not.have.attribute('active');
                         });
+                        it('should specify the selected tab to assistive technology', async function () {
+                            expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-1' });
+                        });
                     });
                 });
             });

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.spec.js","sourceRoot":"","sources":["pf-tabs.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfTabs } from '../pf-tabs.js';\nimport { PfTab } from '../pf-tab.js';\nimport { PfTabPanel } from '../pf-tab-panel.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-tabs>', function() {\n  it('instantiates imperatively', function() {\n    expect(document.createElement('pf-tabs')).to.be.an.instanceof(PfTabs);\n    expect(document.createElement('pf-tab')).to.be.an.instanceof(PfTab);\n    expect(document.createElement('pf-tab-panel')).to.be.an.instanceof(PfTabPanel);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture<PfTabs>(html`<pf-tabs></pf-tabs>`);\n    expect(el, 'pf-tabs should be an instance of PfeTabs')\n        .to.be.an.instanceOf(customElements.get('pf-tabs'))\n        .and\n        .to.be.an.instanceOf(PfTabs);\n  });\n\n  describe('with three valid tab pairs', function() {\n    let element: PfTabs;\n\n    const updateComplete = () => allUpdates(element);\n\n    beforeEach(async function() {\n      element = await createFixture<PfTabs>(html`\n        <pf-tabs>\n          <pf-tab slot=\"tab\">tab-1</pf-tab>\n          <pf-tab-panel>panel-1</pf-tab-panel>\n          <pf-tab slot=\"tab\">tab-2</pf-tab>\n          <pf-tab-panel>panel-2</pf-tab-panel>\n          <pf-tab slot=\"tab\">tab-3</pf-tab>\n          <pf-tab-panel>panel-3</pf-tab-panel>\n        </pf-tabs>\n      `);\n    });\n\n    beforeEach(updateComplete);\n\n    it('should apply aria attributes on initialization', function() {\n      const tabs = element.querySelectorAll('pf-tab');\n      const panels = element.querySelectorAll('pf-tab-panel');\n      tabs.forEach(function(tab: Element, index: number) {\n        const tabId = tab.getAttribute('id');\n        const tabControls = tab.getAttribute('aria-controls');\n        panels.forEach(function(panel: Element, pindex: number) {\n          if (index === pindex) {\n            expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);\n            expect(panel.id).to.equal(tabControls);\n          }\n        });\n      });\n    });\n\n    describe('pressing Tab', function() {\n      beforeEach(press('Tab'));\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n      it('should activate the first focusable tab', function() {\n        expect(element.querySelector('pf-tab')).to.have.attribute('active');\n      });\n\n      it('should activate the first tab panel', function() {\n        expect(element.querySelector('pf-tab')).to.not.have.attribute('hidden');\n      });\n    });\n\n    describe('setting the `vertical` attribute', function() {\n      beforeEach(function() {\n        element.setAttribute('vertical', '');\n      });\n\n      beforeEach(updateComplete);\n\n      it('should have vertical styles', function() {\n        // WARNING: asserting on shadow root content;\n        const tabs = element.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n        const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;\n        expect(tabsVerticalStyles).to.be.equal('column');\n      });\n    });\n\n    describe('setting the second tab\\'s `active` attribute', function() {\n      beforeEach(function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        tab!.active = true;\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n\n      it('should activate the second tab', function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.have.attribute('active');\n      });\n\n      it('should activate its panel', function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.not.have.attribute('hidden');\n      });\n\n      it('should deactivate previously active tab', function() {\n        expect(element.querySelector('pf-tab')).to.not.have.attribute('active');\n      });\n\n      it('should hide previously active panel', function() {\n        expect(element.querySelector('pf-tab-panel')).to.have.attribute('hidden');\n      });\n    });\n\n    describe('setting `activeIndex` to 2', function() {\n      beforeEach(function() {\n        element.activeIndex = 2;\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n\n      it('should activate the third tab', function() {\n        const [,, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.have.attribute('active');\n      });\n\n      it('should activate the third panel', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n      });\n\n      describe('then setting the first tab\\'s `disabled` attribute', function() {\n        beforeEach(async function() {\n          element.querySelector('pf-tab')!.disabled = true;\n        });\n\n        beforeEach(updateComplete);\n\n        it('should disable the button', async function() {\n          const snapshot = await a11ySnapshot();\n          const disabledTab = snapshot.children?.find(x => x.role === 'tab' && x.disabled);\n          expect(disabledTab).to.be.ok;\n        });\n\n        describe('and clicking the disabled tab', function() {\n          beforeEach(async function() {\n            element.querySelector('pf-tab')!.click();\n          });\n\n          beforeEach(updateComplete);\n\n          it('should not activate', function() {\n            const [first] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n          });\n\n          it('should present the third panel to the ax tree', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n          });\n        });\n\n        describe('then setting `activeIndex` to 0 (i.e. the disabled tab\\'s index)', function() {\n          beforeEach(function() {\n            element.activeIndex = 0;\n          });\n\n          beforeEach(updateComplete);\n\n          it('should not activate the first tab', function() {\n            expect(element.querySelector('pf-tab')).to.not.have.attribute('active');\n          });\n\n          it('should present the third panel to the ax tree', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n          });\n        });\n      });\n    });\n\n    describe('when viewed in a small viewport', function() {\n      beforeEach(async function() {\n        // this is a comically narrow viewport, but our tabs have quite short\n        // labels, so viewport must be itsy-pitsy in order to cause overflow\n        await setViewport({ width: 100, height: 640 });\n      });\n\n      beforeEach(nextFrame);\n      beforeEach(nextFrame);\n      beforeEach(nextFrame);\n      beforeEach(updateComplete);\n\n      it('should have visible scroll buttons if overflowed', function() {\n        // Note: overflow buttons are not included in the accessibility tree otherwise we'd test\n        // for buttons there. tabindex=\"-1\" is used on the buttons to prevent focus and was a\n        // decision made to keep logical keyboard navigation order flow between tabs and panels\n        // as the next overflow button exists in the DOM between the tabs container and the open panel\n        // and would disrupt the expected flow. For keyboard users they are able to scroll using the\n        // left and right arrows keys and do not need direct access to the overflow buttons but still\n        // exist as visual cues for which direction is overflowed\n        const previousTab = element.shadowRoot!.querySelector('#previousTab')!;\n        const nextTab = element.shadowRoot!.querySelector('#nextTab')!;\n        expect(previousTab).to.not.be.null;\n        expect(nextTab).to.not.be.null;\n        const prevDisplayStyle = getComputedStyle(previousTab).display;\n        const nextDisplayStyle = getComputedStyle(nextTab).display;\n        expect(prevDisplayStyle ).to.not.equal('none');\n        expect(nextDisplayStyle).to.not.equal('none');\n      });\n    });\n\n    describe(`when navigated by keyboard`, function() {\n      describe('when focused on the first tab', function() {\n        beforeEach(async function() {\n          element.querySelector('pf-tab')!.focus();\n        });\n\n        describe('pressing ArrowRight', function() {\n          beforeEach(async function() {\n            await sendKeys({ down: 'ArrowRight' });\n          });\n\n          beforeEach(updateComplete);\n\n          it('should activate the next tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n            expect(second).to.have.attribute('active');\n            expect(third).to.not.have.attribute('active');\n          });\n        });\n\n        describe('pressing ArrowLeft', function() {\n          beforeEach(async function() {\n            await sendKeys({ down: 'ArrowLeft' });\n          });\n\n          it('should activate the last tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n            expect(second).to.not.have.attribute('active');\n            expect(third).to.have.attribute('active');\n          });\n          describe('then pressing ArrowRight', function() {\n            beforeEach(async function() {\n              await sendKeys({ down: 'ArrowRight' });\n            });\n\n            beforeEach(updateComplete);\n\n            it('should activate the first tab', function() {\n              const [first, second, third] = element.querySelectorAll('pf-tab');\n              expect(first).to.have.attribute('active');\n              expect(second).to.not.have.attribute('active');\n              expect(third).to.not.have.attribute('active');\n            });\n          });\n        });\n      });\n    });\n\n    describe('setting the `manual` attribute', function() {\n      beforeEach(function() {\n        element.setAttribute('manual', '');\n      });\n\n      beforeEach(updateComplete);\n\n      describe('pressing Tab', function() {\n        beforeEach(press('Tab'));\n        describe('pressing ArrowRight key', function() {\n          beforeEach(press('ArrowRight'));\n\n          beforeEach(updateComplete);\n\n          it('should not activate second tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.have.attribute('active');\n            expect(second).to.not.have.attribute('active');\n            expect(third).to.not.have.attribute('active');\n          });\n\n          it('should focus the second tab', function() {\n            const [, second] = element.querySelectorAll('pf-tab');\n            expect(document.activeElement).to.equal(second);\n          });\n\n          describe('pressing enter key', function() {\n            beforeEach(press('Enter'));\n\n            beforeEach(updateComplete);\n\n            it('should activate second tab', function() {\n              const [first, second, third] = element.querySelectorAll('pf-tab');\n              expect(first).to.not.have.attribute('active');\n              expect(second).to.have.attribute('active');\n              expect(third).to.not.have.attribute('active');\n              expect(document.activeElement).to.equal(second);\n            });\n          });\n        });\n      });\n    });\n  });\n\n  describe('when no active tab is given and the first tab is disabled', function() {\n    let element: PfTabs;\n\n    beforeEach(async function() {\n      element = await createFixture<PfTabs>(html`\n        <pf-tabs>\n          <pf-tab id=\"tab1\" slot=\"tab\" disabled></pf-tab>\n          <pf-tab id=\"tab2\" slot=\"tab\"></pf-tab>\n          <pf-tab id=\"tab3\" slot=\"tab\"></pf-tab>\n          <pf-tab id=\"tab4\" slot=\"tab\" disabled></pf-tab>\n          <pf-tab id=\"tab5\" slot=\"tab\" aria-disabled=\"true\"></pf-tab>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n        </pf-tabs>\n      `);\n    });\n\n    it('should activate the next focusable tab', function() {\n      expect(element.activeTab).to.have.id('tab2');\n    });\n  });\n});\n"]}
+{"version":3,"file":"pf-tabs.spec.js","sourceRoot":"","sources":["pf-tabs.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfTabs } from '../pf-tabs.js';\nimport { PfTab } from '../pf-tab.js';\nimport { PfTabPanel } from '../pf-tab-panel.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-tabs>', function() {\n  it('instantiates imperatively', function() {\n    expect(document.createElement('pf-tabs')).to.be.an.instanceof(PfTabs);\n    expect(document.createElement('pf-tab')).to.be.an.instanceof(PfTab);\n    expect(document.createElement('pf-tab-panel')).to.be.an.instanceof(PfTabPanel);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture<PfTabs>(html`<pf-tabs></pf-tabs>`);\n    expect(el, 'pf-tabs should be an instance of PfeTabs')\n        .to.be.an.instanceOf(customElements.get('pf-tabs'))\n        .and\n        .to.be.an.instanceOf(PfTabs);\n  });\n\n  describe('with three valid tab pairs', function() {\n    let element: PfTabs;\n\n    const updateComplete = () => allUpdates(element);\n\n    beforeEach(async function() {\n      element = await createFixture<PfTabs>(html`\n        <pf-tabs>\n          <pf-tab slot=\"tab\">tab-1</pf-tab>\n          <pf-tab-panel>panel-1</pf-tab-panel>\n          <pf-tab slot=\"tab\">tab-2</pf-tab>\n          <pf-tab-panel>panel-2</pf-tab-panel>\n          <pf-tab slot=\"tab\">tab-3</pf-tab>\n          <pf-tab-panel>panel-3</pf-tab-panel>\n        </pf-tabs>\n      `);\n    });\n\n    beforeEach(updateComplete);\n\n    it('should apply aria attributes on initialization', function() {\n      const tabs = element.querySelectorAll('pf-tab');\n      const panels = element.querySelectorAll('pf-tab-panel');\n      tabs.forEach(function(tab: Element, index: number) {\n        const tabId = tab.getAttribute('id');\n        const tabControls = tab.getAttribute('aria-controls');\n        panels.forEach(function(panel: Element, pindex: number) {\n          if (index === pindex) {\n            expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);\n            expect(panel.id).to.equal(tabControls);\n          }\n        });\n      });\n    });\n\n    describe('pressing Tab', function() {\n      beforeEach(press('Tab'));\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n      it('should activate the first focusable tab', function() {\n        expect(element.querySelector('pf-tab')).to.have.attribute('active');\n      });\n\n      it('should activate the first tab panel', function() {\n        expect(element.querySelector('pf-tab')).to.not.have.attribute('hidden');\n      });\n    });\n\n    describe('setting the `vertical` attribute', function() {\n      beforeEach(function() {\n        element.setAttribute('vertical', '');\n      });\n\n      beforeEach(updateComplete);\n\n      it('should have vertical styles', function() {\n        // WARNING: asserting on shadow root content;\n        const tabs = element.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n        const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;\n        expect(tabsVerticalStyles).to.be.equal('column');\n      });\n    });\n\n    describe('setting the second tab\\'s `active` attribute', function() {\n      beforeEach(function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        tab!.active = true;\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n\n      it('should activate the second tab', function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.have.attribute('active');\n      });\n\n      it('should activate its panel', function() {\n        const [, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.not.have.attribute('hidden');\n      });\n\n      it('should deactivate previously active tab', function() {\n        expect(element.querySelector('pf-tab')).to.not.have.attribute('active');\n      });\n\n      it('should hide previously active panel', function() {\n        expect(element.querySelector('pf-tab-panel')).to.have.attribute('hidden');\n      });\n    });\n\n    describe('setting `activeIndex` to 2', function() {\n      beforeEach(function() {\n        element.activeIndex = 2;\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(nextFrame);\n\n      it('should activate the third tab', function() {\n        const [,, tab] = element.querySelectorAll('pf-tab');\n        expect(tab).to.have.attribute('active');\n      });\n\n      it('should activate the third panel', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n      });\n\n      describe('then setting the first tab\\'s `disabled` attribute', function() {\n        beforeEach(async function() {\n          element.querySelector('pf-tab')!.disabled = true;\n        });\n\n        beforeEach(updateComplete);\n\n        it('should disable the button', async function() {\n          const snapshot = await a11ySnapshot();\n          const disabledTab = snapshot.children?.find(x => x.role === 'tab' && x.disabled);\n          expect(disabledTab).to.be.ok;\n        });\n\n        describe('and clicking the disabled tab', function() {\n          beforeEach(async function() {\n            element.querySelector('pf-tab')!.click();\n          });\n\n          beforeEach(updateComplete);\n\n          it('should not activate', function() {\n            const [first] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n          });\n\n          it('should present the third panel to the ax tree', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n          });\n        });\n\n        describe('then setting `activeIndex` to 0 (i.e. the disabled tab\\'s index)', function() {\n          beforeEach(function() {\n            element.activeIndex = 0;\n          });\n\n          beforeEach(updateComplete);\n\n          it('should not activate the first tab', function() {\n            expect(element.querySelector('pf-tab')).to.not.have.attribute('active');\n          });\n\n          it('should present the third panel to the ax tree', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');\n          });\n        });\n      });\n    });\n\n    describe('when viewed in a small viewport', function() {\n      beforeEach(async function() {\n        // this is a comically narrow viewport, but our tabs have quite short\n        // labels, so viewport must be itsy-pitsy in order to cause overflow\n        await setViewport({ width: 100, height: 640 });\n      });\n\n      beforeEach(nextFrame);\n      beforeEach(nextFrame);\n      beforeEach(nextFrame);\n      beforeEach(updateComplete);\n\n      it('should have visible scroll buttons if overflowed', function() {\n        // Note: overflow buttons are not included in the accessibility tree otherwise we'd test\n        // for buttons there. tabindex=\"-1\" is used on the buttons to prevent focus and was a\n        // decision made to keep logical keyboard navigation order flow between tabs and panels\n        // as the next overflow button exists in the DOM between the tabs container and the open panel\n        // and would disrupt the expected flow. For keyboard users they are able to scroll using the\n        // left and right arrows keys and do not need direct access to the overflow buttons but still\n        // exist as visual cues for which direction is overflowed\n        const previousTab = element.shadowRoot!.querySelector('#previousTab')!;\n        const nextTab = element.shadowRoot!.querySelector('#nextTab')!;\n        expect(previousTab).to.not.be.null;\n        expect(nextTab).to.not.be.null;\n        const prevDisplayStyle = getComputedStyle(previousTab).display;\n        const nextDisplayStyle = getComputedStyle(nextTab).display;\n        expect(prevDisplayStyle ).to.not.equal('none');\n        expect(nextDisplayStyle).to.not.equal('none');\n      });\n    });\n\n    describe(`when navigated by keyboard`, function() {\n      describe('when focused on the first tab', function() {\n        beforeEach(async function() {\n          element.querySelector('pf-tab')!.focus();\n        });\n\n        describe('pressing ArrowRight', function() {\n          beforeEach(async function() {\n            await sendKeys({ down: 'ArrowRight' });\n          });\n\n          beforeEach(updateComplete);\n\n          it('should activate the next tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n            expect(second).to.have.attribute('active');\n            expect(third).to.not.have.attribute('active');\n          });\n\n          it('should specify the selected tab to assistive technology', async function() {\n            expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-2' });\n          });\n        });\n\n        describe('pressing ArrowLeft', function() {\n          beforeEach(async function() {\n            await sendKeys({ down: 'ArrowLeft' });\n          });\n\n          it('should activate the last tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.not.have.attribute('active');\n            expect(second).to.not.have.attribute('active');\n            expect(third).to.have.attribute('active');\n          });\n\n          it('should specify the selected tab to assistive technology', async function() {\n            expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-3' });\n          });\n\n          describe('then pressing ArrowRight', function() {\n            beforeEach(async function() {\n              await sendKeys({ down: 'ArrowRight' });\n            });\n\n            beforeEach(updateComplete);\n\n            it('should activate the first tab', function() {\n              const [first, second, third] = element.querySelectorAll('pf-tab');\n              expect(first).to.have.attribute('active');\n              expect(second).to.not.have.attribute('active');\n              expect(third).to.not.have.attribute('active');\n            });\n\n            it('should specify the selected tab to assistive technology', async function() {\n              expect(await a11ySnapshot()).to.axContainQuery({ role: 'tabpanel', name: 'tab-1' });\n            });\n          });\n        });\n      });\n    });\n\n    describe('setting the `manual` attribute', function() {\n      beforeEach(function() {\n        element.setAttribute('manual', '');\n      });\n\n      beforeEach(updateComplete);\n\n      describe('pressing Tab', function() {\n        beforeEach(press('Tab'));\n        describe('pressing ArrowRight key', function() {\n          beforeEach(press('ArrowRight'));\n\n          beforeEach(updateComplete);\n\n          it('should not activate second tab', function() {\n            const [first, second, third] = element.querySelectorAll('pf-tab');\n            expect(first).to.have.attribute('active');\n            expect(second).to.not.have.attribute('active');\n            expect(third).to.not.have.attribute('active');\n          });\n\n          it('should focus the second tab', function() {\n            const [, second] = element.querySelectorAll('pf-tab');\n            expect(document.activeElement).to.equal(second);\n          });\n\n          describe('pressing enter key', function() {\n            beforeEach(press('Enter'));\n\n            beforeEach(updateComplete);\n\n            it('should activate second tab', function() {\n              const [first, second, third] = element.querySelectorAll('pf-tab');\n              expect(first).to.not.have.attribute('active');\n              expect(second).to.have.attribute('active');\n              expect(third).to.not.have.attribute('active');\n              expect(document.activeElement).to.equal(second);\n            });\n          });\n        });\n      });\n    });\n  });\n\n  describe('when no active tab is given and the first tab is disabled', function() {\n    let element: PfTabs;\n\n    beforeEach(async function() {\n      element = await createFixture<PfTabs>(html`\n        <pf-tabs>\n          <pf-tab id=\"tab1\" slot=\"tab\" disabled></pf-tab>\n          <pf-tab id=\"tab2\" slot=\"tab\"></pf-tab>\n          <pf-tab id=\"tab3\" slot=\"tab\"></pf-tab>\n          <pf-tab id=\"tab4\" slot=\"tab\" disabled></pf-tab>\n          <pf-tab id=\"tab5\" slot=\"tab\" aria-disabled=\"true\"></pf-tab>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n          <pf-tab-panel></pf-tab-panel>\n        </pf-tabs>\n      `);\n    });\n\n    it('should activate the next focusable tab', function() {\n      expect(element.activeTab).to.have.id('tab2');\n    });\n  });\n});\n"]}