@patternfly/elements 2.0.0-rc.3 → 2.0.0-rc.5

package/pf-tabs/BaseTabs.js

@@ -1,14 +1,15 @@
-var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_showScrollButtons, _BaseTabs_overflowOnLeft, _BaseTabs_overflowOnRight, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs__focusableTabs, _BaseTabs__focusTab, _BaseTabs_scrollTimeout, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_focusTab_get, _BaseTabs_focusTab_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable, _BaseTabs_lastFocusable, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_next, _BaseTabs_prev, _BaseTabs_currentIndex, _BaseTabs_activate, _BaseTabs_select, _BaseTabs_onKeydown, _BaseTabs_onScroll, _BaseTabs_firstLastClasses, _BaseTabs_setOverflowState, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
+var _BaseTabs_instances, _a, _BaseTabs_rovingTabindexController, _BaseTabs_instances_1, _BaseTabs_showScrollButtons, _BaseTabs_overflowOnLeft, _BaseTabs_overflowOnRight, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_scrollTimeout, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_lastFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_activate, _BaseTabs_select, _BaseTabs_onKeydown, _BaseTabs_onScroll, _BaseTabs_firstLastClasses, _BaseTabs_setOverflowState, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
 import { BaseTab, TabExpandEvent } from './BaseTab.js';
 import { BaseTabPanel } from './BaseTabPanel.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`;
+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:first-of-type{margin-inline-end:0;translate:0 0}:host button:nth-of-type(2){margin-inline-start:0;translate:0 0}[part=panels],[part=tabs]{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}[part=tabs]::before,button{border:0}button{flex:none;line-height:1;opacity:0}button::before{border-block-start-width:0}button:first-of-type{translate:-100% 0}button:nth-of-type(2){translate:100% 0}button:disabled{pointer-events:none}`;
 /**
  * BaseTabs
  *
@@ -20,17 +21,22 @@ export class BaseTabs extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTabs_instances.add(this);
+        _BaseTabs_rovingTabindexController.set(this, new RovingTabindexController(this));
         _BaseTabs_showScrollButtons.set(this, false);
         _BaseTabs_overflowOnLeft.set(this, false);
         _BaseTabs_overflowOnRight.set(this, false);
         _BaseTabs_logger.set(this, new Logger(this));
         _BaseTabs__allTabs.set(this, []);
         _BaseTabs__allPanels.set(this, []);
-        _BaseTabs__focusableTabs.set(this, []);
-        _BaseTabs__focusTab.set(this, void 0);
         _BaseTabs_scrollTimeout.set(this, void 0);
         _BaseTabs_activeIndex.set(this, 0);
         this.id = this.id || getRandomId(this.localName);
+        /**
+         * Tab activation
+         * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated
+         * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)
+         */
+        this.manual = false;
         _BaseTabs_onTabExpand.set(this, (event) => {
             if (!(event instanceof TabExpandEvent) ||
                 __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length === 0) {
@@ -41,6 +47,7 @@ export class BaseTabs extends LitElement {
                 this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab === target.tab);
             }
         });
+        // RTI: will handle key events
         _BaseTabs_onKeydown.set(this, (event) => {
             const foundTab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).find(tab => tab === event.target);
             if (!foundTab) {
@@ -50,20 +57,20 @@ export class BaseTabs extends LitElement {
                 case 'ArrowUp':
                 case 'ArrowLeft':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_prev).call(this);
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").activeItem);
                     break;
                 case 'ArrowDown':
                 case 'ArrowRight':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_next).call(this);
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").activeItem);
                     break;
                 case 'Home':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
                     break;
                 case 'End':
                     event.preventDefault();
-                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_lastFocusable).call(this));
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastFocusable_get));
                     break;
                 default:
                     return;
@@ -90,9 +97,8 @@ export class BaseTabs extends LitElement {
         if (tab) {
             if (tab.disabled) {
                 __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
-                __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
-                index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
-                return;
+                __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
+                index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
             }
             else if (!tab.active) {
                 // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
@@ -102,9 +108,9 @@ export class BaseTabs extends LitElement {
         }
         if (index === -1) {
             __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
-            __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
-            index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
-            return;
+            const first = __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").firstItem;
+            __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(first);
+            index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
         }
         __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
         this.requestUpdate('activeIndex', oldIndex);
@@ -127,7 +133,7 @@ export class BaseTabs extends LitElement {
         return html `
       <div part="container">
         <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
-          <button id="previousTab"
+          <button id="previousTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
               ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnLeft, "f")}"
               @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollLeft)}">
@@ -137,7 +143,7 @@ export class BaseTabs extends LitElement {
                 part="tabs"
                 role="tablist"
                 @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
-          <button id="nextTab"
+          <button id="nextTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
               ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnRight, "f")}"
               @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollRight)}">
@@ -157,22 +163,17 @@ export class BaseTabs extends LitElement {
         return true;
     }
 }
-_a = BaseTabs, _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOnLeft = new WeakMap(), _BaseTabs_overflowOnRight = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs__focusableTabs = new WeakMap(), _BaseTabs__focusTab = new WeakMap(), _BaseTabs_scrollTimeout = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_onKeydown = new WeakMap(), _BaseTabs_onScroll = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
+_a = BaseTabs, _BaseTabs_rovingTabindexController = new WeakMap(), _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOnLeft = new WeakMap(), _BaseTabs_overflowOnRight = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_scrollTimeout = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_onKeydown = new WeakMap(), _BaseTabs_onScroll = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
     const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
     return tab;
 }, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
     return __classPrivateFieldGet(this, _BaseTabs__allTabs, "f");
 }, _BaseTabs_allTabs_set = function _BaseTabs_allTabs_set(tabs) {
     __classPrivateFieldSet(this, _BaseTabs__allTabs, tabs.filter(tab => this.constructor.isTab(tab)), "f");
-    __classPrivateFieldSet(this, _BaseTabs__focusableTabs, __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => !tab.disabled), "f");
 }, _BaseTabs_allPanels_get = function _BaseTabs_allPanels_get() {
     return __classPrivateFieldGet(this, _BaseTabs__allPanels, "f");
 }, _BaseTabs_allPanels_set = function _BaseTabs_allPanels_set(panels) {
     __classPrivateFieldSet(this, _BaseTabs__allPanels, panels.filter(panel => this.constructor.isPanel(panel)), "f");
-}, _BaseTabs_focusTab_get = function _BaseTabs_focusTab_get() {
-    return __classPrivateFieldGet(this, _BaseTabs__focusTab, "f");
-}, _BaseTabs_focusTab_set = function _BaseTabs_focusTab_set(tab) {
-    __classPrivateFieldSet(this, _BaseTabs__focusTab, tab, "f");
 }, _BaseTabs_onSlotchange = function _BaseTabs_onSlotchange(event) {
     if (event.target.name === 'tab') {
         __classPrivateFieldSet(this, _BaseTabs_instances, this.tabs, "a", _BaseTabs_allTabs_set);
@@ -180,11 +181,13 @@ _a = BaseTabs, _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOn
     else {
         __classPrivateFieldSet(this, _BaseTabs_instances, this.panels, "a", _BaseTabs_allPanels_set);
     }
-    if (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length &&
+    if ((__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) &&
         (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
-        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
+        __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
+        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
+        __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
     }
 }, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
@@ -197,65 +200,26 @@ _a = BaseTabs, _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOn
 }, _BaseTabs_deactivateExcept = function _BaseTabs_deactivateExcept(index) {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
-}, _BaseTabs_firstFocusable = function _BaseTabs_firstFocusable() {
-    const [firstTab] = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f");
-    return firstTab;
-}, _BaseTabs_lastFocusable = function _BaseTabs_lastFocusable() {
-    return __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").at(-1);
+}, _BaseTabs_firstFocusable_get = function _BaseTabs_firstFocusable_get() {
+    return __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").firstItem;
+}, _BaseTabs_lastFocusable_get = function _BaseTabs_lastFocusable_get() {
+    return __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f").lastItem;
 }, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
     const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
     return tab;
 }, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
     return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
-}, _BaseTabs_next = function _BaseTabs_next() {
-    // find index of active tab in focusableTabs
-    const currentIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_currentIndex).call(this);
-    // increment focusable index and return focusable tab
-    const nextFocusableIndex = currentIndex + 1;
-    let nextTab;
-    if (nextFocusableIndex >= __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").length) {
-        // get the first focusable tab
-        [nextTab] = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f");
-    }
-    else {
-        // get index of that focusable tab from all tabs
-        nextTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[nextFocusableIndex];
-    }
-    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, nextTab);
-}, _BaseTabs_prev = function _BaseTabs_prev() {
-    const currentIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_currentIndex).call(this);
-    // increment focusable index and return focusable tab
-    const nextFocusableIndex = currentIndex - 1;
-    let prevTab;
-    if (nextFocusableIndex < 0) {
-        // get the last focusable tab
-        prevTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[__classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").length - 1];
-    }
-    else {
-        // get index of that focusable tab from all tabs
-        prevTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[nextFocusableIndex];
-    }
-    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, prevTab);
-}, _BaseTabs_currentIndex = function _BaseTabs_currentIndex() {
-    let current;
-    // get current tab
-    if (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get)?.ariaDisabled === 'true') {
-        current = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get);
-    }
-    else {
-        current = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get);
-    }
-    const index = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").findIndex(tab => tab === current);
-    return index;
+}, _BaseTabs_activeItemIndex_get = function _BaseTabs_activeItemIndex_get() {
+    const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_rovingTabindexController, "f");
+    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === activeItem);
 }, _BaseTabs_activate = function _BaseTabs_activate(selectedTab) {
     if (selectedTab.ariaDisabled !== 'true') {
         selectedTab.active = true;
     }
 }, _BaseTabs_select = async function _BaseTabs_select(selectedTab) {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, selectedTab);
-    __classPrivateFieldSet(this, _BaseTabs_instances, selectedTab, "a", _BaseTabs_focusTab_set);
-    await this.updateComplete;
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get).focus();
+    if (!this.manual) {
+        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, selectedTab);
+    }
 }, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get).classList.add('first');
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get).classList.add('last');
@@ -323,6 +287,9 @@ __decorate([
 __decorate([
     query('[part="tabs"]')
 ], BaseTabs.prototype, "tabList", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], BaseTabs.prototype, "manual", void 0);
 __decorate([
     property({ attribute: false })
 ], BaseTabs.prototype, "activeIndex", null);

package/pf-tabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #showScrollButtons = false;\n\n  #overflowOnLeft = false;\n\n  #overflowOnRight = false;\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #_focusableTabs: BaseTab[] = [];\n\n  #_focusTab?: BaseTab;\n\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  #activeIndex = 0;\n\n  id: string = this.id || getRandomId(this.localName);\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#activate(this.#firstFocusable());\n        index = this.#allTabs.findIndex(t => t === this.#firstFocusable());\n        return;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      this.#activate(this.#firstFocusable());\n      index = this.#allTabs.findIndex(t => t === this.#firstFocusable());\n      return;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n    this.#_focusableTabs = this.#_allTabs.filter(tab => !tab.disabled);\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  get #focusTab(): BaseTab | undefined {\n    return this.#_focusTab;\n  }\n\n  set #focusTab(tab: BaseTab | undefined) {\n    this.#_focusTab = tab;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onTabExpand);\n    this.addEventListener('keydown', this.#onKeydown);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n\n    return html`\n      <div part=\"container\">\n        <div part=\"tabs-container\">${!this.#showScrollButtons ? '' : html`\n          <button id=\"previousTab\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflowOnLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#showScrollButtons ? '' : html`\n          <button id=\"nextTab\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflowOnRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    this.#onScroll();\n    this.tabList.addEventListener('scroll', this.#onScroll);\n  }\n\n  #onSlotchange(event: { target: { name: string; }; }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n    if (this.#allTabs.length === this.#allPanels.length &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#firstLastClasses();\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n      return;\n    }\n\n    const target = event as TabExpandEvent;\n    if (target.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  #firstFocusable(): BaseTab {\n    const [firstTab] = this.#_focusableTabs;\n    return firstTab;\n  }\n\n  #lastFocusable(): BaseTab {\n    return this.#_focusableTabs.at(-1) as BaseTab;\n  }\n\n  get #firstTab(): BaseTab {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab {\n    return this.#allTabs.at(-1) as BaseTab;\n  }\n\n  #next(): void {\n    // find index of active tab in focusableTabs\n    const currentIndex = this.#currentIndex();\n    // increment focusable index and return focusable tab\n    const nextFocusableIndex = currentIndex + 1;\n    let nextTab: BaseTab;\n    if (nextFocusableIndex >= this.#_focusableTabs.length) {\n      // get the first focusable tab\n      [nextTab] = this.#_focusableTabs;\n    } else {\n      // get index of that focusable tab from all tabs\n      nextTab = this.#_focusableTabs[nextFocusableIndex];\n    }\n    this.#select(nextTab);\n  }\n\n  #prev(): void {\n    const currentIndex = this.#currentIndex();\n    // increment focusable index and return focusable tab\n    const nextFocusableIndex = currentIndex - 1;\n    let prevTab: BaseTab;\n    if (nextFocusableIndex < 0) {\n      // get the last focusable tab\n      prevTab = this.#_focusableTabs[this.#_focusableTabs.length - 1];\n    } else {\n      // get index of that focusable tab from all tabs\n      prevTab = this.#_focusableTabs[nextFocusableIndex];\n    }\n    this.#select(prevTab);\n  }\n\n  #currentIndex(): number {\n    let current: BaseTab;\n    // get current tab\n    if (this.#focusTab?.ariaDisabled === 'true') {\n      current = this.#focusTab;\n    } else {\n      current = this.#activeTab;\n    }\n    const index = this.#_focusableTabs.findIndex(tab => tab === current);\n    return index;\n  }\n\n  #activate(selectedTab: BaseTab): void {\n    if (selectedTab.ariaDisabled !== 'true') {\n      selectedTab.active = true;\n    }\n  }\n\n  async #select(selectedTab: BaseTab): Promise<void> {\n    this.#activate(selectedTab);\n    this.#focusTab = selectedTab;\n    await this.updateComplete;\n    this.#focusTab.focus();\n  }\n\n  #onKeydown = (event: KeyboardEvent): void => {\n    const foundTab = this.#allTabs.find(tab => tab === event.target);\n    if (!foundTab) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.#prev();\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        this.#next();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.#select(this.#firstFocusable());\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.#select(this.#lastFocusable());\n        break;\n\n      default:\n        return;\n    }\n  };\n\n  #onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    const { scrollTimeoutDelay } = (this.constructor as typeof BaseTabs);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), scrollTimeoutDelay);\n  };\n\n  #firstLastClasses() {\n    this.#firstTab.classList.add('first');\n    this.#lastTab.classList.add('last');\n  }\n\n  /** override to prevent scroll buttons from showing */\n  protected get canShowScrollButtons() {\n    return true;\n  }\n\n  #setOverflowState(): void {\n    const { canShowScrollButtons } = this;\n    this.#overflowOnLeft = canShowScrollButtons && !isElementInView(this.tabList, this.#firstTab);\n    this.#overflowOnRight = canShowScrollButtons && !isElementInView(this.tabList, this.#lastTab);\n    this.#showScrollButtons = canShowScrollButtons && (this.#overflowOnLeft || this.#overflowOnRight);\n    this.requestUpdate();\n  }\n\n  #scrollLeft(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let firstElementInView: BaseTab | undefined;\n    let lastElementOutOfView: BaseTab | undefined;\n    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        firstElementInView = childrenArr[i];\n        lastElementOutOfView = childrenArr[i - 1];\n      }\n    }\n    if (lastElementOutOfView) {\n      container.scrollLeft -= lastElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  #scrollRight(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let lastElementInView: BaseTab | undefined;\n    let firstElementOutOfView: BaseTab | undefined;\n    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        lastElementInView = childrenArr[i];\n        firstElementOutOfView = childrenArr[i + 1];\n      }\n    }\n    if (firstElementOutOfView) {\n      container.scrollLeft += firstElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n}\n"]}
+{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;;;AAIjD;;;;;;GAMG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;;QAoBE,6CAA4B,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAAC;QAmB/D,sCAAqB,KAAK,EAAC;QAE3B,mCAAkB,KAAK,EAAC;QAExB,oCAAmB,KAAK,EAAC;QAEzB,2BAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAE3B,6BAAuB,EAAE,EAAC;QAE1B,+BAA8B,EAAE,EAAC;QAEjC,0CAA+C;QAE/C,gCAAe,CAAC,EAAC;QAEjB,OAAE,GAAW,IAAI,CAAC,EAAE,IAAI,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEpD;;;;WAIG;QACyC,WAAM,GAAG,KAAK,CAAC;QAiI3D,gCAAe,CAAC,KAAY,EAAQ,EAAE;YACpC,IAAI,CAAC,CAAC,KAAK,YAAY,cAAc,CAAC;gBAClC,uBAAA,IAAI,kDAAS,CAAC,MAAM,KAAK,CAAC,IAAI,uBAAA,IAAI,oDAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9D,OAAO;aACR;YAED,MAAM,MAAM,GAAG,KAAuB,CAAC;YACvC,IAAI,MAAM,CAAC,MAAM,EAAE;gBACjB,IAAI,CAAC,WAAW,GAAG,uBAAA,IAAI,kDAAS,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;aACvE;QACH,CAAC,EAAC;QAyCF,8BAA8B;QAC9B,8BAAa,CAAC,KAAoB,EAAQ,EAAE;YAC1C,MAAM,QAAQ,GAAG,uBAAA,IAAI,kDAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;YACD,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACd,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,EAAS,uBAAA,IAAI,0CAA0B,CAAC,UAAqB,CAAC,CAAC;oBACnE,MAAM;gBAER,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,EAAS,uBAAA,IAAI,0CAA0B,CAAC,UAAqB,CAAC,CAAC;oBACnE,MAAM;gBAER,KAAK,MAAM;oBACT,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,EAAS,uBAAA,IAAI,yDAAgB,CAAC,CAAC;oBACnC,MAAM;gBAER,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,EAAS,uBAAA,IAAI,wDAAe,CAAC,CAAC;oBAClC,MAAM;gBAER;oBACE,OAAO;aACV;QACH,CAAC,EAAC;QAEF,6BAAY,GAAG,EAAE;YACf,YAAY,CAAC,uBAAA,IAAI,+BAAe,CAAC,CAAC;YAClC,MAAM,EAAE,kBAAkB,EAAE,GAAI,IAAI,CAAC,WAA+B,CAAC;YACrE,uBAAA,IAAI,2BAAkB,UAAU,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,uDAAkB,MAAtB,IAAI,CAAoB,EAAE,kBAAkB,CAAC,MAAA,CAAC;QACvF,CAAC,EAAC;IAqDJ,CAAC;IA1UC,MAAM,CAAC,KAAK,CAAC,OAAgB;QAC3B,OAAO,OAAO,YAAY,OAAO,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAqB;QAClC,OAAO,OAAO,YAAY,YAAY,CAAC;IACzC,CAAC;IAwDD,IAAI,WAAW;QACb,OAAO,uBAAA,IAAI,6BAAa,CAAC;IAC3B,CAAC;IAED,IAAI,WAAW,CAAC,KAAa;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,MAAM,GAAG,GAAG,uBAAA,IAAI,kDAAS,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,GAAG,EAAE;YACP,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,uBAAA,IAAI,wBAAQ,CAAC,IAAI,CAAC,wEAAwE,CAAC,CAAC;gBAC5F,uBAAA,IAAI,0CAA0B,CAAC,gBAAgB,CAAC,uBAAA,IAAI,yDAAgB,CAAC,CAAC;gBACtE,KAAK,GAAG,uBAAA,IAAI,0DAAiB,CAAC;aAC/B;iBAAM,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;gBACtB,sEAAsE;gBACtE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;gBAClB,OAAO;aACR;SACF;QAED,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,uBAAA,IAAI,wBAAQ,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;YAChF,MAAM,KAAK,GAAG,uBAAA,IAAI,0CAA0B,CAAC,SAAoB,CAAC;YAClE,uBAAA,IAAI,0CAA0B,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACvD,KAAK,GAAG,uBAAA,IAAI,0DAAiB,CAAC;SAC/B;QACD,uBAAA,IAAI,yBAAgB,KAAK,MAAA,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAE5C,uBAAA,IAAI,oDAAW,CAAC,uBAAA,IAAI,6BAAa,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC;QAClD,8CAA8C;QAC9C,uBAAA,IAAI,uDAAkB,MAAtB,IAAI,EAAmB,uBAAA,IAAI,6BAAa,CAAC,CAAC;IAC5C,CAAC;IAuBQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,6BAAa,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,2BAAW,CAAC,CAAC;QAClD,uBAAA,QAAQ,iCAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,uBAAA,QAAQ,iCAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,WAA8B,CAAC;QAE/F,OAAO,IAAI,CAAA;;qCAEsB,CAAC,uBAAA,IAAI,mCAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;4BAE7C,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,IAAI,aAAa;2BACxD,CAAC,uBAAA,IAAI,gCAAgB;wBACxB,uBAAA,IAAI,iDAAY;6BACX,cAAc,UAAU,aAAa;oBAC9C;;;;+BAIW,uBAAA,IAAI,mDAAc,aAAa,CAAC,uBAAA,IAAI,mCAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;4BAEtE,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,cAAc;2BAC1D,CAAC,uBAAA,IAAI,iCAAiB;wBACzB,uBAAA,IAAI,kDAAa;6BACZ,eAAe,UAAU,aAAa;oBAC/C;;2CAEuB,uBAAA,IAAI,mDAAc;;KAExD,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,uBAAA,IAAI,0BAAU,MAAd,IAAI,CAAY,CAAC;QACjB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,0BAAU,CAAC,CAAC;IAC1D,CAAC;IA6HD,sDAAsD;IACtD,IAAc,oBAAoB;QAChC,OAAO,IAAI,CAAC;IACd,CAAC;;;IA/LC,MAAM,CAAC,GAAG,CAAC,GAAG,uBAAA,IAAI,0BAAU,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACvD,OAAO,GAAG,CAAC;AACb,CAAC;IAGC,OAAO,uBAAA,IAAI,0BAAU,CAAC;AACxB,CAAC,yDAEY,IAAe;IAC1B,uBAAA,IAAI,sBAAa,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAE,IAAI,CAAC,WAA+B,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAA,CAAC;AACxF,CAAC;IAGC,OAAO,uBAAA,IAAI,4BAAY,CAAC;AAC1B,CAAC,6DAEc,MAAsB;IACnC,uBAAA,IAAI,wBAAe,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAE,IAAI,CAAC,WAA+B,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAA,CAAC;AAClG,CAAC,2DA+Ca,KAAqC;IACjD,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,KAAK,EAAE;QAC/B,uBAAA,IAAI,uBAAY,IAAI,CAAC,IAAI,6BAAA,CAAC;KAC3B;SAAM;QACL,uBAAA,IAAI,uBAAc,IAAI,CAAC,MAAM,+BAAA,CAAC;KAC/B;IAED,IAAI,CAAC,uBAAA,IAAI,kDAAS,CAAC,MAAM,KAAK,uBAAA,IAAI,oDAAW,CAAC,MAAM,CAAC;QACnD,CAAC,uBAAA,IAAI,kDAAS,CAAC,MAAM,KAAK,CAAC,IAAI,uBAAA,IAAI,oDAAW,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;QAC9D,uBAAA,IAAI,0DAAqB,MAAzB,IAAI,CAAuB,CAAC;QAC5B,uBAAA,IAAI,uDAAkB,MAAtB,IAAI,CAAoB,CAAC;QACzB,uBAAA,IAAI,0CAA0B,CAAC,SAAS,CAAC,uBAAA,IAAI,kDAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,GAAG,uBAAA,IAAI,kDAAS,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC9D,uBAAA,IAAI,0CAA0B,CAAC,gBAAgB,CAAC,uBAAA,IAAI,oDAAW,CAAC,CAAC;KAClE;AACH,CAAC;IAGC,uBAAA,IAAI,kDAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,KAAK,GAAG,uBAAA,IAAI,oDAAW,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE;YAC1C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;SAC/C;QACD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,mEAciB,KAAa;IAC7B,uBAAA,IAAI,kDAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;IAC5D,uBAAA,IAAI,oDAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;AACpE,CAAC;IAGC,OAAO,uBAAA,IAAI,0CAA0B,CAAC,SAAoB,CAAC;AAC7D,CAAC;IAGC,OAAO,uBAAA,IAAI,0CAA0B,CAAC,QAAmB,CAAC;AAC5D,CAAC;IAGC,MAAM,CAAC,GAAG,CAAC,GAAG,uBAAA,IAAI,kDAAS,CAAC;IAC5B,OAAO,GAAG,CAAC;AACb,CAAC;IAGC,OAAO,uBAAA,IAAI,kDAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAY,CAAC;AACzC,CAAC;IAGC,MAAM,EAAE,UAAU,EAAE,GAAG,uBAAA,IAAI,0CAA0B,CAAC;IACtD,OAAO,uBAAA,IAAI,kDAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC;AACxD,CAAC,mDAES,WAAoB;IAC5B,IAAI,WAAW,CAAC,YAAY,KAAK,MAAM,EAAE;QACvC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;KAC3B;AACH,CAAC,qBAED,KAAK,2BAAS,WAAoB;IAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;QAChB,uBAAA,IAAI,+CAAU,MAAd,IAAI,EAAW,WAAW,CAAC,CAAC;KAC7B;AACH,CAAC;IA2CC,uBAAA,IAAI,mDAAU,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACtC,uBAAA,IAAI,kDAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AACtC,CAAC;IAQC,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;IACtC,uBAAA,IAAI,4BAAmB,oBAAoB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,uBAAA,IAAI,mDAAU,CAAC,MAAA,CAAC;IAC9F,uBAAA,IAAI,6BAAoB,oBAAoB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,uBAAA,IAAI,kDAAS,CAAC,MAAA,CAAC;IAC9F,uBAAA,IAAI,+BAAsB,oBAAoB,IAAI,CAAC,uBAAA,IAAI,gCAAgB,IAAI,uBAAA,IAAI,iCAAiB,CAAC,MAAA,CAAC;IAClG,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;IAGC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/B,MAAM,WAAW,GAAG,uBAAA,IAAI,kDAAS,CAAC;IAClC,IAAI,kBAAuC,CAAC;IAC5C,IAAI,oBAAyC,CAAC;IAC9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,EAAE,EAAE;QAClE,IAAI,eAAe,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAgB,EAAE,KAAK,CAAC,EAAE;YACpE,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;YACpC,oBAAoB,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SAC3C;KACF;IACD,IAAI,oBAAoB,EAAE;QACxB,SAAS,CAAC,UAAU,IAAI,oBAAoB,CAAC,WAAW,CAAC;KAC1D;IACD,uBAAA,IAAI,uDAAkB,MAAtB,IAAI,CAAoB,CAAC;AAC3B,CAAC;IAGC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/B,MAAM,WAAW,GAAG,uBAAA,IAAI,kDAAS,CAAC;IAClC,IAAI,iBAAsC,CAAC;IAC3C,IAAI,qBAA0C,CAAC;IAC/C,KAAK,IAAI,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,EAAE;QACtE,IAAI,eAAe,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAgB,EAAE,KAAK,CAAC,EAAE;YACpE,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;YACnC,qBAAqB,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SAC5C;KACF;IACD,IAAI,qBAAqB,EAAE;QACzB,SAAS,CAAC,UAAU,IAAI,qBAAqB,CAAC,WAAW,CAAC;KAC3D;IACD,uBAAA,IAAI,uDAAkB,MAAtB,IAAI,CAAoB,CAAC;AAC3B,CAAC;AA3Ue,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUlC,8FAA8F;AACpE,2BAAkB,GAAW,CAAC,CAAC;AACzD,kDAAkD;AACxB,uBAAc,GAAW,YAAY,CAAC;AAChE,mDAAmD;AACzB,wBAAe,GAAW,aAAa,CAAC;AAClE,6CAA6C;AACnB,sBAAa,GAAW,KAAK,CAAC;AAIjD,iCAAa,IAAI,GAAG,EAAY,GAAC;AAExC;IACE,gEAAgE;IAChE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QACrC,KAAK,MAAM,QAAQ,IAAI,uBAAA,EAAI,iCAAW,EAAE;YACtC,uBAAA,QAAQ,0BAAU,MAAlB,QAAQ,CAAY,CAAC;SACtB;IACH,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AACzB,CAAC,GAAA,CAAA;AAEuC;IAAvC,qBAAqB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sCAA0B;AAExC;IAAxB,qBAAqB,EAAE;wCAAiC;AAEjC;IAAvB,KAAK,CAAC,eAAe,CAAC;yCAA+B;AAyBV;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAgB;AAG3D;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAG9B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #showScrollButtons = false;\n\n  #overflowOnLeft = false;\n\n  #overflowOnRight = false;\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  #activeIndex = 0;\n\n  id: string = this.id || getRandomId(this.localName);\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#rovingTabindexController.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#rovingTabindexController.firstItem as BaseTab;\n      this.#rovingTabindexController.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onTabExpand);\n    this.addEventListener('keydown', this.#onKeydown);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n\n    return html`\n      <div part=\"container\">\n        <div part=\"tabs-container\">${!this.#showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflowOnLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflowOnRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    this.#onScroll();\n    this.tabList.addEventListener('scroll', this.#onScroll);\n  }\n\n  #onSlotchange(event: { target: { name: string; }; }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#rovingTabindexController.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#rovingTabindexController.updateActiveItem(this.#activeTab);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n      return;\n    }\n\n    const target = event as TabExpandEvent;\n    if (target.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab {\n    return this.#rovingTabindexController.firstItem as BaseTab;\n  }\n\n  get #lastFocusable(): BaseTab {\n    return this.#rovingTabindexController.lastItem as BaseTab;\n  }\n\n  get #firstTab(): BaseTab {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab {\n    return this.#allTabs.at(-1) as BaseTab;\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#rovingTabindexController;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #activate(selectedTab: BaseTab): void {\n    if (selectedTab.ariaDisabled !== 'true') {\n      selectedTab.active = true;\n    }\n  }\n\n  async #select(selectedTab: BaseTab): Promise<void> {\n    if (!this.manual) {\n      this.#activate(selectedTab);\n    }\n  }\n\n  // RTI: will handle key events\n  #onKeydown = (event: KeyboardEvent): void => {\n    const foundTab = this.#allTabs.find(tab => tab === event.target);\n    if (!foundTab) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.#select(this.#rovingTabindexController.activeItem as BaseTab);\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        this.#select(this.#rovingTabindexController.activeItem as BaseTab);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.#select(this.#firstFocusable);\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.#select(this.#lastFocusable);\n        break;\n\n      default:\n        return;\n    }\n  };\n\n  #onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    const { scrollTimeoutDelay } = (this.constructor as typeof BaseTabs);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), scrollTimeoutDelay);\n  };\n\n  #firstLastClasses() {\n    this.#firstTab.classList.add('first');\n    this.#lastTab.classList.add('last');\n  }\n\n  /** override to prevent scroll buttons from showing */\n  protected get canShowScrollButtons() {\n    return true;\n  }\n\n  #setOverflowState(): void {\n    const { canShowScrollButtons } = this;\n    this.#overflowOnLeft = canShowScrollButtons && !isElementInView(this.tabList, this.#firstTab);\n    this.#overflowOnRight = canShowScrollButtons && !isElementInView(this.tabList, this.#lastTab);\n    this.#showScrollButtons = canShowScrollButtons && (this.#overflowOnLeft || this.#overflowOnRight);\n    this.requestUpdate();\n  }\n\n  #scrollLeft(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let firstElementInView: BaseTab | undefined;\n    let lastElementOutOfView: BaseTab | undefined;\n    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        firstElementInView = childrenArr[i];\n        lastElementOutOfView = childrenArr[i - 1];\n      }\n    }\n    if (lastElementOutOfView) {\n      container.scrollLeft -= lastElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  #scrollRight(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let lastElementInView: BaseTab | undefined;\n    let firstElementOutOfView: BaseTab | undefined;\n    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        lastElementInView = childrenArr[i];\n        firstElementOutOfView = childrenArr[i + 1];\n      }\n    }\n    if (firstElementOutOfView) {\n      container.scrollLeft += firstElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n}\n"]}

package/pf-tabs/README.md

@@ -0,0 +1,40 @@
+# PatternFly Elements Tabs
+     
+Read more about Tabs in the [PatternFly Elements Tabs documentation](https://patternflyelements.org/components/tabs)
+
+##  Installation
+
+Load `<pf-tabs>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-tabs/pf-tabs.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-tabs/pf-tabs.js';
+```
+
+### Note
+For `<pf-tabs>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
+
+## Usage
+
+```html
+<pf-tabs>
+  <pf-tab id="users" slot="tab">Users</pf-tab>
+  <pf-tab-panel>Users</pf-tab-panel>
+  <pf-tab slot="tab">Containers</pf-tab>
+  <pf-tab-panel>Containers <a href="#">Focusable element</a></pf-tab-panel>
+  <pf-tab slot="tab">Database</pf-tab>
+  <pf-tab-panel>Database</pf-tab-panel>
+</pf-tabs>
+```
+

package/pf-tabs/pf-tab-panel.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const styles = css `:host([box="light"]) {\n  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n}\n`;
+const styles = css `:host([box=light]){background-color:var(--pf-c-tab-content--m-light-300,var(--pf-global--BackgroundColor--light-300,#f0f0f0))}`;
 import { BaseTabPanel } from './BaseTabPanel.js';
 /**
  * @slot - Tab panel content

package/pf-tabs/pf-tab.css

@@ -62,6 +62,7 @@ button:hover {
 
 button:focus,
 button:focus-visible {
+  outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 

package/pf-tabs/pf-tab.js

@@ -4,7 +4,7 @@ import { observed } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { BaseTab } from './BaseTab.js';
 import { css } from "lit";
-const styles = css `:host {\n  scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);\n}\n\n:host([active]) {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));\n  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host([box][active]) {\n  --pf-c-tabs__link--BackgroundColor: 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--BackgroundColor, transparent);\n}\n\n:host(.first[box][active]) #current::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\nbutton {\n  line-height: var(--pf-global--LineHeight--md, 1.5);\n  color: var(--pf-global--Color--100, #151515);\n  padding:\n    var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));\n  color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));\n  outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));\n  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);\n}\n\nbutton::before {\n  border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);\n  border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n}\n\nbutton::after {\n  top: var(--pf-c-tabs__link--after--Top, auto);\n  right: var(--pf-c-tabs__link--after--Right, 0);\n  bottom: var(--pf-c-tabs__link--after--Bottom, 0);\n  left: var(--pf-c-tabs__link--before--Left, 0);\n  border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));\n  border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);\n  border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);\n}\n\nbutton:hover {\n  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\nbutton:focus,\nbutton:focus-visible {\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\nbutton:active {\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host([box]) button {\n  --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n}\n\n:host([box]) button,\n:host([vertical]) button {\n  --pf-c-tabs__link--after--BorderBottomWidth: 0;\n}\n\n:host([vertical]) button {\n  --pf-c-tabs__link--after--Bottom: 0;\n  --pf-c-tabs__link--after--BorderTopWidth: 0;\n  --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  max-width: 100%;\n  text-align: left;\n}\n\n:host([box][vertical]) button::after {\n  top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host(.first[box][vertical]) button::after,\n:host([box][vertical][active]) button::after {\n  top: 0;\n}\n\n:host([box][vertical][active]) button::before {\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--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host(.first[box][active]) button::before {\n  border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host(.last[box][active]) button::before {\n  border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([disabled]) button,\n:host([aria-disabled="true"]) button {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--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--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);\n  --pf-c-tabs__link--after--BorderWidth: 0;\n}\n\n[part="icon"] {\n  margin-inline-end: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));\n}\n\n[part="icon"]:last-child {\n  --pf-c-tabs__link--child--MarginRight: 0;\n}\n\n:host([disabled][border-bottom="false"]) button,\n:host([aria-disabled="true"][border-bottom="false"]) button {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
+const styles = css `:host{scroll-snap-align:var(--pf-c-tabs__item--ScrollSnapAlign,end)}:host([active]){--pf-c-tabs__link--Color:var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));--pf-c-tabs__link--after--BorderColor:var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}:host([box][active]){--pf-c-tabs__link--BackgroundColor: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--BackgroundColor, transparent)}:host(.first[box][active]) #current::before{left:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}button{line-height:var(--pf-global--LineHeight--md, 1.5);color:var(--pf-global--Color--100,#151515);padding:var(--pf-c-tabs__link--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tabs__link--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-tabs__link--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tabs__link--PaddingLeft,var(--pf-global--spacer--md,1rem));font-size:var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));color:var(--pf-c-tabs__link--Color,var(--pf-global--Color--200,#6a6e73));outline-offset:var(--pf-c-tabs__link--OutlineOffset,calc(-1 * 0.375rem));--pf-c-tabs__link--after--BorderBottomWidth:var(--pf-c-tabs__link--after--BorderWidth, 0);background-color:var(--pf-c-tabs__link--BackgroundColor,transparent)}button::before{border-block-start-width:var(--pf-c-tabs__link--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs__link--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__link--before--BorderBottomWidth,0);border-inline-start-width:var(--pf-c-tabs__link--before--BorderLeftWidth,0);border-block-start-color:var(--pf-c-tabs__link--before--BorderTopColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-end-color:var(--pf-c-tabs__link--before--BorderRightColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-block-end-color:var(--pf-c-tabs__link--before--BorderBottomColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-start-color:var(--pf-c-tabs__link--before--BorderLeftColor,var(--pf-c-tabs__link--before--border-color--base,var(--pf-global--BorderColor--100,#d2d2d2)))}button::after{top:var(--pf-c-tabs__link--after--Top,auto);right:var(--pf-c-tabs__link--after--Right,0);bottom:var(--pf-c-tabs__link--after--Bottom,0);left:var(--pf-c-tabs__link--before--Left,0);border-color:var(--pf-c-tabs__link--after--BorderColor,var(--pf-global--BorderColor--light-100,#b8bbbe));border-block-start-width:var(--pf-c-tabs__link--after--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs__link--after--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs__link--after--BorderBottomWidth);border-inline-start-width:var(--pf-c-tabs__link--after--BorderLeftWidth)}button:hover{--pf-c-tabs__link-toggle-icon--Color:var(--pf-c-tabs__link--hover__toggle-icon--Color);--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}button:focus,button:focus-visible{outline-color:var(--pf-c-tabs__link--after--BorderColor,#06c);--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}button:active{--pf-c-tabs__link--after--BorderWidth:var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px))}:host([box]) button{--pf-c-tabs__link--after--BorderTopWidth:var(--pf-c-tabs__link--after--BorderWidth, 0)}:host([box]) button,:host([vertical]) button{--pf-c-tabs__link--after--BorderBottomWidth:0}:host([vertical]) button{--pf-c-tabs__link--after--Bottom:0;--pf-c-tabs__link--after--BorderTopWidth:0;--pf-c-tabs__link--after--BorderLeftWidth:var(--pf-c-tabs__link--after--BorderWidth, 0);max-width:100%;text-align:left}:host([box][vertical]) button::after{top:calc(var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)) * -1)}:host(.first[box][vertical]) button::after,:host([box][vertical][active]) button::after{top:0}:host([box][vertical][active]) button::before{--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--BorderBottomWidth:var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));--pf-c-tabs__link--before--BorderBottomColor:var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2))}:host(.first[box][active]) button::before{border-block-start-width:var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,var(--pf-c-tabs__link--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host(.last[box][active]) button::before{border-inline-end-width:var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)))}:host([aria-disabled=true]) button,:host([disabled]) button{--pf-c-tabs__link--Color:var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tabs__link--BackgroundColor:var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));--pf-c-tabs__link--before--BorderRightWidth:var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);--pf-c-tabs__link--before--BorderBottomWidth:var(--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--before--BorderLeftWidth:var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);--pf-c-tabs__link--after--BorderWidth:0}[part=icon]{margin-inline-end:var(--pf-c-tabs__link--child--MarginRight,var(--pf-global--spacer--md,1rem))}[part=icon]:last-child{--pf-c-tabs__link--child--MarginRight:0}:host([aria-disabled=true][border-bottom=false]) button,:host([disabled][border-bottom=false]) button{--pf-c-tabs__link--before--BorderBottomWidth:0}`;
 /**
  * PfTab
  *

package/pf-tabs/pf-tabs.js

@@ -5,7 +5,7 @@ import { BaseTabs } from './BaseTabs.js';
 import { PfTab } from './pf-tab.js';
 import { PfTabPanel } from './pf-tab-panel.js';
 import { css } from "lit";
-const styles = css `[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/* workaround to disable scroll right button when last tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type) {\n  translate: calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px)) 0;\n}\n\n/* workaround to disable scroll left button when first tab is aria-disabled */\n:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type) {\n  translate: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 1px) 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}\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 `[part=tabs-container]{width:var(--pf-c-tabs--Width,auto);padding-inline-end:var(--pf-c-tabs--inset,0);padding-inline-start:var(--pf-c-tabs--inset,0)}[part=tabs-container]::before{border-color:var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2));border-block-start-width:var(--pf-c-tabs--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--before--BorderBottomWidth,var(--pf-c-tabs--before--border-width--base,var(--pf-global--BorderWidth--sm,1px)));border-inline-start-width:var(--pf-c-tabs--before--BorderLeftWidth,0)}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:last-of-type){translate:calc(-1 * var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px)) 0}:host(:not([vertical])) ::slotted(pf-tab[aria-disabled=true]:first-of-type){translate:var(--pf-c-tabs__link--disabled--before--BorderRightWidth,1px) 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;--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;--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;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)));border-block-start-width:var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth,0);border-inline-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth,0);border-block-end-width:var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth,0);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;--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--BorderLeftWidth:0}: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:var(--pf-c-tabs__list--Display,flex)}button{width:var(--pf-c-tabs__scroll-button--Width,var(--pf-global--spacer--2xl,3rem));color:var(--pf-c-tabs__scroll-button--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-tabs__scroll-button--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));outline-offset:var(--pf-c-tabs__scroll-button--OutlineOffset,calc(-1 * var(--pf-global--spacer--xs,0.25rem)));transition:margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s),opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s)}button:hover{--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:var(--pf-c-tabs__scroll-button--before--BorderColor,var(--pf-c-tabs--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2)));border-inline-end-width:var(--pf-c-tabs__scroll-button--before--BorderRightWidth,0);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)));border-inline-start-width:var(--pf-c-tabs__scroll-button--before--BorderLeftWidth,0)}button:first-of-type{--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{--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;--pf-c-tabs__link--before--BorderBottomWidth:0}`;
 /**
  * Tabs allow users to navigate between views within the same page or context. Variants include
  * horizontal, vertical, inset, and filled. Most tab variations are available as open (default) or

package/pf-tile/README.md

@@ -0,0 +1,12 @@
+# Tile
+A **tile** component is a form of selection that can be used in place of a radio 
+button and is commonly used in forms. A tile appears visually similar to a 
+selectable card. However, tiles are used specifically when the user is selecting 
+a static option, whereas a selectable card triggers an action or opens a 
+quickstart or sidebar to provide additional information.
+
+```html
+<pf-tile>
+  <h3 slot="title">Default</h3>
+</pf-tile>
+```

package/pf-tile/pf-tile.js

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { property } from 'lit/decorators.js';
 import { BaseTile } from './BaseTile.js';
 import { css } from "lit";
-const styles = css `:host {\n  position: relative;\n  display: inline-grid;\n  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  text-align: center;\n  cursor: pointer;\n  background-color: var(--pf-c-tile--BackgroundColor,\n                    var(--pf-global--BackgroundColor--100,\n                    var(--pf-global--BackgroundColor--light-100), #ffffff));\n  grid-template-rows: -webkit-min-content;\n  grid-template-rows: min-content;\n  transition: var(--pf-c-tile--Transition, none);\n  transform: translateY(var(--pf-c-tile--TranslateY, 0));\n}\n\n:host::before,\n:host::after {\n  position: absolute;\n  pointer-events: none;\n  content: "";\n}\n\n:host::before {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n          solid\n          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host::after {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);\n  transition: var(--pf-c-tile--after--Transition, none);\n  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));\n}\n\n:host(:hover) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:focus) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:active),\n:host([selected]) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));\n  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);\n}\n\n:host([disabled]) {\n  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile--before--BorderWidth: 0;\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  pointer-events: none;\n}\n\n[part="header"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[part="title"] {\n  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n}\n\n[part="body"] {\n  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));\n  --pf-icon--size: var(--_icon-size);\n  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--_icon-size);\n  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));\n}\n\n:host([stacked]) [part="header"] {\n  --pf-c-tile__icon--MarginRight: 0;\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));\n  flex-direction: column;\n  justify-content: initial;\n}\n\n:host([stacked="lg"]) [part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));\n}\n\n:host([stacked]) [part="icon"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),\n#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {\n  margin-block: 0;\n}\n\n`;
+const styles = css `:host{position:relative;display:inline-grid;padding:var(--pf-c-tile--PaddingTop,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingRight,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingBottom,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-tile--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));text-align:center;cursor:pointer;background-color:var(--pf-c-tile--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--light-100),#fff));grid-template-rows:-webkit-min-content;grid-template-rows:min-content;transition:var(--pf-c-tile--Transition, none);transform:translateY(var(--pf-c-tile--TranslateY,0))}:host::after,:host::before{position:absolute;pointer-events:none;content:""}:host::before{top:0;right:0;bottom:0;left:0;border:var(--pf-c-tile--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-tile--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host::after{right:0;bottom:0;left:0;height:var(--pf-c-tile--after--Height,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-tile--after--BackgroundColor,transparent);transition:var(--pf-c-tile--after--Transition, none);transform:scaleY(var(--pf-c-tile--after--ScaleY,1)) translateY(var(--pf-c-tile--after--TranslateY,0))}:host(:hover){--pf-c-tile__title--Color:var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7))}:host(:focus){--pf-c-tile__title--Color:var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7))}:host(:active),:host([selected]){--pf-c-tile__title--Color:var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile__icon--Color:var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));--pf-c-tile--TranslateY:var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));--pf-c-tile--Transition:var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));--pf-c-tile--after--Height:var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));--pf-c-tile--after--BackgroundColor:var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));--pf-c-tile--after--Transition:var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));--pf-c-tile--after--ScaleY:var(--pf-c-tile--m-selected--after--ScaleY, 2)}:host([disabled]){--pf-c-tile--BackgroundColor:var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));--pf-c-tile__title--Color:var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tile__body--Color:var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));--pf-c-tile--before--BorderWidth:0;--pf-c-tile__icon--Color:var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));pointer-events:none}[part=header]{display:flex;align-items:center;justify-content:center}[part=title]{color:var(--pf-c-tile__title--Color,var(--pf-global--Color--100,var(--pf-global--Color--dark-100,#151515)))}[part=body]{font-size:var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, .75rem));color:var(--pf-c-tile__body--Color,var(--pf-global--Color--100,#151515))}[part=icon]{--_icon-size:var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));--pf-icon--size:var(--_icon-size);margin-right:var(--pf-c-tile__icon--MarginRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--_icon-size);color:var(--pf-c-tile__icon--Color,var(--pf-global--Color--100,#151515))}:host([stacked]) [part=header]{--pf-c-tile__icon--MarginRight:0;--_icon-size:var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));flex-direction:column;justify-content:initial}:host([stacked=lg]) [part=icon]{--_icon-size:var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)))}:host([stacked]) [part=icon]{display:flex;align-items:center;justify-content:center;margin-bottom:var(--pf-c-tile__header--m-stacked__icon--MarginBottom,var(--pf-global--spacer--xs,.25rem))}#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin-block:0}`;
 /**
  * Tile
  *