@patternfly/elements 2.0.0-rc.2 → 2.0.0-rc.4

package/custom-elements.json

@@ -7052,6 +7052,18 @@
                 "module": "pf-tabs/BaseTab.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "BaseTab",
+                "module": "pf-tabs/BaseTab.js"
+              }
+            },
             {
               "kind": "field",
               "name": "#internals",
@@ -7507,6 +7519,16 @@
                 "module": "pf-tabs/BaseTabs.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "#rovingTabindexController",
+              "privacy": "private",
+              "default": "new RovingTabindexController(this)",
+              "inheritedFrom": {
+                "name": "BaseTabs",
+                "module": "pf-tabs/BaseTabs.js"
+              }
+            },
             {
               "kind": "field",
               "name": "#instances",
@@ -10344,6 +10366,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "active",
@@ -10542,6 +10572,12 @@
               "description": "Icon set to use for the scroll buttons",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#rovingTabindexController",
+              "privacy": "private",
+              "default": "new RovingTabindexController(this)"
+            },
             {
               "kind": "field",
               "name": "#instances",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.4",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
@@ -9,7 +9,7 @@
   "module": "./pfe.js",
   "types": "./pfe.d.ts",
   "exports": {
-    ".": "./pfe.js",
+    ".": "./pfe.min.js",
     "./pf-accordion/BaseAccordion.js": "./pf-accordion/BaseAccordion.js",
     "./pf-accordion/BaseAccordionHeader.js": "./pf-accordion/BaseAccordionHeader.js",
     "./pf-accordion/BaseAccordionPanel.js": "./pf-accordion/BaseAccordionPanel.js",

package/pf-tabs/BaseTab.d.ts

@@ -16,6 +16,7 @@ export declare abstract class BaseTab extends LitElement {
         customElements?: CustomElementRegistry | undefined;
     };
     private icons;
+    private button;
     /** `active` should be observed, and true when the tab is selected */
     abstract active: boolean;
     /** `active` should be observed, and true when the tab is disabled */

package/pf-tabs/BaseTab.js

@@ -1,7 +1,7 @@
 var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
 import { __classPrivateFieldGet, __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { queryAssignedElements, query } from 'lit/decorators.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { css } from "lit";
 const style = css `:host {\n  display: flex;\n  flex: none;\n}\n\n:host([vertical]) [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\nbutton {\n  margin: 0;\n  font-family: inherit;\n  font-size: 100%;\n  border: 0;\n  position: relative;\n  display: flex;\n  flex: 1;\n  text-decoration: none;\n  cursor: pointer;\n}\n\nbutton::before,\nbutton::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\nbutton::before {\n  pointer-events: none;\n}\n\n:host([fill]) button {\n  flex-basis: 100%;\n  justify-content: center;\n}\n\n:host(:disabled) button {\n  pointer-events: none;\n}\n\n:host([aria-disabled="true"]) button {\n  cursor: default;\n}\n`;
@@ -21,11 +21,11 @@ export class BaseTab extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_clickHandler));
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").role = 'tab';
     }
     render() {
-        const tabIndex = (this.active && !this.disabled) ? null : '-1';
         return html `
-      <button part="button" role="tab" tabindex="${tabIndex ?? nothing}">
+      <button part="button" ?disabled="${this.disabled}">
         <slot name="icon"
               part="icon"
               ?hidden="${!this.icons.length}"
@@ -45,7 +45,7 @@ export class BaseTab extends LitElement {
     }
 }
 _BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab_clickHandler = function _BaseTab_clickHandler() {
-    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true') {
+    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
         this.active = true;
     }
 }, _BaseTab_activeChanged = function _BaseTab_activeChanged() {
@@ -64,4 +64,7 @@ BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: t
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], BaseTab.prototype, "icons", void 0);
+__decorate([
+    query('button')
+], BaseTab.prototype, "button", void 0);
 //# sourceMappingURL=BaseTab.js.map

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAcE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,OAAO,IAAI,CAAA;mDACoC,QAAQ,IAAI,OAAO;;;yBAG7C,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7D,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAjEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html, nothing } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n  }\n\n  render() {\n    const tabIndex = (this.active && !this.disabled) ? null : '-1';\n    return html`\n      <button part=\"button\" role=\"tab\" tabindex=\"${tabIndex ?? nothing}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAgBE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;QACnD,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAnEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAElB;IAAhB,KAAK,CAAC,QAAQ,CAAC;uCAAoC","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements, query } from 'lit/decorators.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabs.d.ts

@@ -25,6 +25,12 @@ export declare abstract class BaseTabs extends LitElement {
     private panels;
     private tabList;
     id: string;
+    /**
+     * 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)
+     */
+    manual: boolean;
     get activeIndex(): number;
     set activeIndex(index: number);
     connectedCallback(): void;

package/pf-tabs/BaseTabs.js

@@ -1,7 +1,8 @@
-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';
@@ -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":"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","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/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 {\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  outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);\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`;
 /**
  * PfTab
  *