@patternfly/elements 3.0.1 → 4.0.0

package/pf-tabs/pf-tabs.js

@@ -1,5 +1,5 @@
-var _PfTabs_instances, _PfTabs_ctx_get, _PfTabs_overflow, _PfTabs_tabs, _PfTabs_tabindex, _PfTabs_logger, _PfTabs_scrollLeft, _PfTabs_scrollRight, _PfTabs_onSlotChange, _PfTabs_onExpand, _PfTabs_updateActive;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+var _PfTabs_instances, _PfTabs_activeIndex, _PfTabs_ctx_get, _PfTabs_overflow, _PfTabs_tabs, _PfTabs_tabindex, _PfTabs_logger, _PfTabs_scrollLeft, _PfTabs_scrollRight, _PfTabs_onSlotChange, _PfTabs_onExpand;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -17,43 +17,7 @@ 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`;
-/**
- * **Tabs** allow users to navigate between views within the same page or context.
- * @csspart container - outer container
- * @csspart tabs-container - tabs container
- * @csspart tabs - tablist
- * @csspart panels - panels
- * @slot tab - Must contain one or more `<pf-tab>`
- * @slot - Must contain one or more `<pf-panel>`
- * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
- * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
- * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
- * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
- * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
- * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
- * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
- * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
- * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
- * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}
- * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}
- * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}
- * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}
- * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}
- * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}
- * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
- */
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 let PfTabs = class PfTabs extends LitElement {
     constructor() {
         super(...arguments);
@@ -88,10 +52,7 @@ let PfTabs = class PfTabs extends LitElement {
          * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.
          */
         this.manual = false;
-        /**
-         * The index of the active tab
-         */
-        this.activeIndex = -1;
+        _PfTabs_activeIndex.set(this, -1);
         this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
         _PfTabs_overflow.set(this, new OverflowController(this, { scrollTimeoutDelay: 200 }));
         _PfTabs_tabs.set(this, new TabsAriaController(this, {
@@ -99,8 +60,8 @@ let PfTabs = class PfTabs extends LitElement {
             isPanel: (x) => x.localName === 'pf-tab-panel',
             isActiveTab: x => x.active,
         }));
-        _PfTabs_tabindex.set(this, new RovingTabindexController(this, {
-            getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,
+        _PfTabs_tabindex.set(this, RovingTabindexController.of(this, {
+            getItemsContainer: () => this.tabsContainer ?? null,
             getItems: () => this.tabs ?? [],
         }));
         _PfTabs_logger.set(this, new Logger(this));
@@ -108,6 +69,21 @@ let PfTabs = class PfTabs extends LitElement {
     static isExpandEvent(event) {
         return event instanceof TabExpandEvent;
     }
+    /** The index of the active tab */
+    get activeIndex() {
+        return __classPrivateFieldGet(this, _PfTabs_activeIndex, "f");
+    }
+    set activeIndex(v) {
+        __classPrivateFieldGet(this, _PfTabs_tabindex, "f").atFocusedItemIndex = v;
+        __classPrivateFieldSet(this, _PfTabs_activeIndex, v, "f");
+        this.activeTab = this.tabs[v];
+        for (const tab of this.tabs) {
+            if (!this.activeTab?.disabled) {
+                tab.active = tab === this.activeTab;
+            }
+            __classPrivateFieldGet(this, _PfTabs_tabs, "f").panelFor(tab)?.toggleAttribute('hidden', !tab.active);
+        }
+    }
     get tabs() {
         return __classPrivateFieldGet(this, _PfTabs_tabs, "f").tabs;
     }
@@ -115,30 +91,28 @@ let PfTabs = class PfTabs extends LitElement {
         super.connectedCallback();
         this.addEventListener('expand', __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onExpand));
         this.id || (this.id = getRandomId(this.localName));
+        this.activeIndex = __classPrivateFieldGet(this, _PfTabs_tabindex, "f").atFocusedItemIndex;
     }
     async getUpdateComplete() {
         const here = await super.getUpdateComplete();
         const ps = await Promise.all(Array.from(this.querySelectorAll('pf-tab, pf-tab-panel'), x => x.updateComplete));
         return here && ps.every(x => !!x);
     }
-    willUpdate(changed) {
-        if (changed.has('activeIndex')) {
-            this.select(this.activeIndex);
-        }
-        else if (changed.has('activeTab') && this.activeTab) {
-            this.select(this.activeTab);
-        }
-        else {
-            __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this);
+    willUpdate() {
+        if (!this.manual && this.activeIndex !== __classPrivateFieldGet(this, _PfTabs_tabindex, "f").atFocusedItemIndex) {
+            this.activeIndex = __classPrivateFieldGet(this, _PfTabs_tabindex, "f").atFocusedItemIndex;
         }
         __classPrivateFieldGet(this, _PfTabs_overflow, "f").update();
         this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
     }
-    updated(changed) {
-        if (changed.has('activeTab') && this.activeTab?.disabled) {
+    activeTabChanged(old, activeTab) {
+        if (activeTab?.disabled) {
             __classPrivateFieldGet(this, _PfTabs_logger, "f").warn('Active tab is disabled. Setting to first focusable tab');
             this.activeIndex = 0;
         }
+        if (activeTab) {
+            this.activeIndex = this.tabs.indexOf(activeTab);
+        }
     }
     firstUpdated() {
         if (this.tabs.length && this.activeIndex === -1) {
@@ -171,17 +145,16 @@ let PfTabs = class PfTabs extends LitElement {
       </div>
     `;
     }
-    select(option) {
-        if (typeof option === 'number') {
-            const item = this.tabs[option];
-            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(item);
+    select(tab) {
+        if (typeof tab === 'number') {
+            this.activeIndex = tab;
         }
         else {
-            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(option);
+            this.activeIndex = this.tabs.indexOf(tab);
         }
-        __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this, { force: true });
     }
 };
+_PfTabs_activeIndex = new WeakMap();
 _PfTabs_overflow = new WeakMap();
 _PfTabs_tabs = new WeakMap();
 _PfTabs_tabindex = new WeakMap();
@@ -208,23 +181,9 @@ _PfTabs_onExpand = function _PfTabs_onExpand(event) {
         this.select(event.tab);
     }
 };
-_PfTabs_updateActive = function _PfTabs_updateActive({ force = false } = {}) {
-    if (!__classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem?.disabled) {
-        this.tabs?.forEach((tab, i) => {
-            if (force || !this.manual) {
-                const active = tab === __classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem;
-                tab.active = active;
-                if (active) {
-                    this.activeIndex = i;
-                    this.activeTab = tab;
-                }
-            }
-            __classPrivateFieldGet(this, _PfTabs_tabs, "f").panelFor(tab)?.toggleAttribute('hidden', !tab.active);
-        });
-    }
-};
 PfTabs.styles = [styles];
 PfTabs.scrollTimeoutDelay = 150;
+PfTabs.version = "4.0.0";
 __decorate([
     property({ reflect: false, attribute: 'label-scroll-left' })
 ], PfTabs.prototype, "labelScrollLeft", void 0);
@@ -248,7 +207,7 @@ __decorate([
 ], PfTabs.prototype, "manual", void 0);
 __decorate([
     property({ attribute: 'active-index', reflect: true, type: Number })
-], PfTabs.prototype, "activeIndex", void 0);
+], PfTabs.prototype, "activeIndex", null);
 __decorate([
     property({ attribute: false })
 ], PfTabs.prototype, "activeTab", void 0);
@@ -258,6 +217,9 @@ __decorate([
 __decorate([
     provide({ context })
 ], PfTabs.prototype, "ctx", void 0);
+__decorate([
+    observes('activeTab')
+], PfTabs.prototype, "activeTabChanged", null);
 PfTabs = __decorate([
     customElement('pf-tabs')
 ], PfTabs);

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 } 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';\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 {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles = [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  /**\n   * The index of the active tab\n   */\n  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;\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 = new RovingTabindexController(this, {\n    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\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  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('activeIndex')) {\n      this.select(this.activeIndex);\n    } else if (changed.has('activeTab') && this.activeTab) {\n      this.select(this.activeTab);\n    } else {\n      this.#updateActive();\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('activeTab') && this.activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\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() {\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  #updateActive({ force = false } = {}) {\n    if (!this.#tabindex.activeItem?.disabled) {\n      this.tabs?.forEach((tab, i) => {\n        if (force || !this.manual) {\n          const active = tab === this.#tabindex.activeItem;\n          tab.active = active;\n          if (active) {\n            this.activeIndex = i;\n            this.activeTab = tab;\n          }\n        }\n        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n      });\n    }\n  }\n\n  select(option: PfTab | number) {\n    if (typeof option === 'number') {\n      const item = this.tabs[option];\n      this.#tabindex.setActiveItem(item);\n    } else {\n      this.#tabindex.setActiveItem(option);\n    }\n    this.#updateActive({ force: true });\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 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"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-tabs';
 test.describe(tagName, () => {
     // Run tests in this file with portrait-like viewport.
@@ -9,5 +10,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-tabs.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-tabs';\n\ntest.describe(tagName, () => {\n  // Run tests in this file with portrait-like viewport.\n  test.use({ viewport: { width: 1200, height: 1000 } });\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-tabs';\n\ntest.describe(tagName, () => {\n  // Run tests in this file with portrait-like viewport.\n  test.use({ viewport: { width: 1200, height: 1000 } });\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

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

@@ -263,22 +263,21 @@ describe('<pf-tabs>', function () {
         beforeEach(async function () {
             element = await createFixture(html `
         <pf-tabs>
-          <pf-tab slot="tab" disabled>Users</pf-tab>
-          <pf-tab-panel>Users</pf-tab-panel>
-          <pf-tab slot="tab">Containers</pf-tab>
-          <pf-tab-panel>Containers</pf-tab-panel>
-          <pf-tab slot="tab">Database</pf-tab>
-          <pf-tab-panel>Database</pf-tab-panel>
-          <pf-tab slot="tab" disabled>Disabled</pf-tab>
-          <pf-tab-panel>Disabled</pf-tab-panel>
-          <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-          <pf-tab-panel>Aria Disabled</pf-tab-panel>
+          <pf-tab id="tab1" slot="tab" disabled></pf-tab>
+          <pf-tab id="tab2" slot="tab"></pf-tab>
+          <pf-tab id="tab3" slot="tab"></pf-tab>
+          <pf-tab id="tab4" slot="tab" disabled></pf-tab>
+          <pf-tab id="tab5" slot="tab" aria-disabled="true"></pf-tab>
+          <pf-tab-panel></pf-tab-panel>
+          <pf-tab-panel></pf-tab-panel>
+          <pf-tab-panel></pf-tab-panel>
+          <pf-tab-panel></pf-tab-panel>
+          <pf-tab-panel></pf-tab-panel>
         </pf-tabs>
       `);
         });
         it('should activate the next focusable tab', function () {
-            const [, second] = element.querySelectorAll('pf-tab');
-            expect(second).to.have.attribute('active');
+            expect(element.activeTab).to.have.id('tab2');
         });
     });
 });

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(updateComplete);\n      beforeEach(nextFrame);\n      beforeEach(updateComplete);\n\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 slot=\"tab\" disabled>Users</pf-tab>\n          <pf-tab-panel>Users</pf-tab-panel>\n          <pf-tab slot=\"tab\">Containers</pf-tab>\n          <pf-tab-panel>Containers</pf-tab-panel>\n          <pf-tab slot=\"tab\">Database</pf-tab>\n          <pf-tab-panel>Database</pf-tab-panel>\n          <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n          <pf-tab-panel>Disabled</pf-tab-panel>\n          <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n          <pf-tab-panel>Aria Disabled</pf-tab-panel>\n        </pf-tabs>\n      `);\n    });\n\n    it('should activate the next focusable tab', function() {\n      const [, second] = element.querySelectorAll('pf-tab');\n      expect(second).to.have.attribute('active');\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(updateComplete);\n      beforeEach(nextFrame);\n      beforeEach(updateComplete);\n\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"]}