@patternfly/elements 2.4.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;;AAPiB,YAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires { TabExpandEvent } expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n  static readonly styles = [...BaseTab.styles, styles];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { consume } from '@lit/context';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { TabExpandEvent, context, type PfTabsContext } from './context.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: HTMLElement[];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfTabsContext;\n\n  #internals = InternalsController.of(this, { role: 'tab' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('focus', this.#onFocus);\n  }\n\n  override willUpdate() {\n    const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};\n    this.toggleAttribute('fill', fill);\n    this.toggleAttribute('manual', manual);\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n    if (borderBottom) {\n      this.setAttribute('border-bottom', borderBottom);\n    } else {\n      this.removeAttribute('border-bottom');\n    }\n  }\n\n  render() {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    return html`\n      <div id=\"button\"\n           part=\"button\"\n           class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (!this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (event.key) {\n        case 'Enter': this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #activate() {\n    return this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  private _activeChanged(old: boolean) {\n    this.#internals.ariaSelected = String(!!this.active);\n    if (this.active && !old) {\n      this.#activate();\n    }\n  }\n\n  private _disabledChanged() {\n    this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}

package/pf-tabs/pf-tabs.css

@@ -1,3 +1,90 @@
+:host {
+  display: block;
+}
+
+[part="tabs-container"] {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+[part="tabs-container"]::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-style: solid;
+}
+
+:host button {
+  opacity: 1;
+}
+
+:host button:nth-of-type(1) {
+  margin-inline-end: 0;
+  translate: 0 0;
+}
+
+:host button:nth-of-type(2) {
+  margin-inline-start: 0;
+  translate: 0 0;
+}
+
+[part="tabs"],
+[part="panels"] {
+  display: block;
+}
+
+[part="tabs"] {
+  scrollbar-width: none;
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+[part="tabs-container"]::before,
+[part="tabs"]::before,
+button::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-style: solid;
+}
+
+[part="tabs"]::before,
+button::before {
+  top: 0;
+}
+
+button,
+[part="tabs"]::before {
+  border: 0;
+}
+
+button {
+  flex: none;
+  line-height: 1;
+  opacity: 0;
+}
+
+button::before {
+  border-block-start-width: 0;
+}
+
+button:nth-of-type(1) {
+  translate: -100% 0;
+}
+
+button:nth-of-type(2) {
+  translate: 100% 0;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+
 [part="tabs-container"] {
   width: var(--pf-c-tabs--Width, auto);
   padding-inline-end: var(--pf-c-tabs--inset, 0);
@@ -12,16 +99,6 @@
   border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);
 }
 
-/* workaround to disable scroll right button when last tab is aria-disabled */
-: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;
-}
-
-/* workaround to disable scroll left button when first tab is aria-disabled */
-: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));

package/pf-tabs/pf-tabs.d.ts

@@ -1,41 +1,30 @@
-import { BaseTabs } from './BaseTabs.js';
-import { TabExpandEvent } from './BaseTab.js';
+import { LitElement, type PropertyValues } from 'lit';
 import { PfTab } from './pf-tab.js';
-import { PfTabPanel } from './pf-tab-panel.js';
+import { TabExpandEvent } from './context.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
- *
- * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}
- *
  * @csspart container - outer container
  * @csspart tabs-container - tabs container
  * @csspart tabs - tablist
  * @csspart panels - panels
- *
  * @slot tab - Must contain one or more `<pf-tab>`
  * @slot - Must contain one or more `<pf-panel>`
- *
  * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
- *
  * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
@@ -43,26 +32,63 @@ import { PfTabPanel } from './pf-tab-panel.js';
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
  */
-export declare class PfTabs extends BaseTabs {
-    static readonly styles: import("lit").CSSResult[];
+export declare class PfTabs extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
     protected static readonly scrollTimeoutDelay = 150;
-    static isTab(element: HTMLElement): element is PfTab;
-    static isPanel(element: HTMLElement): element is PfTabPanel;
-    static isExpandEvent(event: Event): event is TabExpandEvent;
+    static isExpandEvent(event: Event): event is TabExpandEvent<PfTab>;
+    /**
+     * Aria Label for the left scroll button
+     */
+    labelScrollLeft: string;
+    /**
+     * Aria Label for the right scroll button
+     */
+    labelScrollRight: string;
+    /**
+     * Box styling on tabs. Defaults to null
+     */
     box: 'light' | 'dark' | null;
+    /**
+     * Set to true to enable vertical tab styling.
+     */
     vertical: boolean;
+    /**
+     * Set to true to enable filled tab styling.
+     */
     fill: boolean;
+    /**
+     * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.
+     */
     borderBottom: 'true' | 'false';
-    protected get canShowScrollButtons(): boolean;
+    /**
+     * Set's the tabs to be manually activated. This means that the tabs will not automatically select
+     * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving
+     * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.
+     */
+    manual: boolean;
+    /**
+     * The index of the active tab
+     */
+    activeIndex: number;
+    activeTab?: PfTab;
+    get tabs(): PfTab[];
+    private tabsContainer;
+    private ctx;
+    connectedCallback(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    select(option: PfTab | number): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-tabs/pf-tabs.js

@@ -1,47 +1,45 @@
-import { __decorate } from "tslib";
+var _PfTabs_instances, _PfTabs_ctx_get, _PfTabs_overflow, _PfTabs_tabs, _PfTabs_tabindex, _PfTabs_logger, _PfTabs_scrollLeft, _PfTabs_scrollRight, _PfTabs_onSlotChange, _PfTabs_onExpand, _PfTabs_updateActive;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { cascades } from '@patternfly/pfe-core/decorators.js';
-import { BaseTabs } from './BaseTabs.js';
-import { TabExpandEvent } from './BaseTab.js';
+import { query } from 'lit/decorators/query.js';
+import { provide } from '@lit/context';
+import { classMap } from 'lit/directives/class-map.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';
 import { PfTab } from './pf-tab.js';
 import { PfTabPanel } from './pf-tab-panel.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { TabExpandEvent, context } from './context.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
-const styles = css `[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);--pf-icon--size:16px}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}`;
+const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n[part="tabs-container"] {\n  width: var(--pf-c-tabs--Width, auto);\n  padding-inline-end: var(--pf-c-tabs--inset, 0);\n  padding-inline-start: var(--pf-c-tabs--inset, 0);\n}\n\n[part="tabs-container"]::before {\n  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);\n  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);\n}\n\n:host([box]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Bottom: auto;\n}\n\n:host([box]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderRightWidth: 0;\n}\n\n:host([box]) button:nth-of-type(2)::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host([box]) pf-tab[aria-selected="true"] + pf-tab {\n  --pf-c-tabs__link--before--Left: 0;\n}\n\n:host([box="light"]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);\n  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([vertical]) [part="tabs-container"] {\n  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));\n  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */\n  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--before--Left: 0;\n  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Right: auto;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0;\n  overflow: visible;\n}\n\n:host([vertical]) [part="tabs"] {\n  position: relative;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);\n}\n\n:host([vertical]) [part="tabs"]::before {\n  position: absolute;\n  right: auto;\n  border-style: solid;\n  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([vertical]) ::slotted(pf-tab:first-of-type) {\n  margin-block-start: var(--pf-c-tabs--inset, 0);\n}\n\n:host([vertical]) ::slotted(pf-tab:last-of-type) {\n  margin-block-end: var(--pf-c-tabs--inset, 0);\n}\n\n:host([box][vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));\n  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */\n  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */\n}\n\n:host([box][vertical]) [part="tabs"]::before {\n  right: 0;\n  left: auto;\n}\n\n:host([box][vertical]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {\n  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n[part="tabs"] {\n  display: var(--pf-c-tabs__list--Display, flex);\n}\n\nbutton {\n  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));\n  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));\n  transition:\n    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),\n    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);\n  --pf-icon--size: 16px;\n}\n\nbutton:hover {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));\n}\n\nbutton::before {\n  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);\n}\n\nbutton:nth-of-type(1) {\n  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:nth-of-type(2) {\n  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:disabled {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:not[vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: 0;\n  --pf-c-tabs--m-vertical--inset: 0;\n  --pf-c-tabs--m-vertical--m-box--inset: 0;\n}\n\n:host([fill]) [part="tabs"] {\n  flex-basis: 100%;\n}\n\n:host([fill]) ::slotted(pf-tab) {\n  flex-grow: 1;\n}\n\n:host([fill]) ::slotted(pf-tab:first-of-type) {\n  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;\n}\n\n:host([fill]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;\n}\n\n:host([border-bottom="false"]) [part="tabs-container"] {\n  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
- *
- * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}
- *
  * @csspart container - outer container
  * @csspart tabs-container - tabs container
  * @csspart tabs - tablist
  * @csspart panels - panels
- *
  * @slot tab - Must contain one or more `<pf-tab>`
  * @slot - Must contain one or more `<pf-panel>`
- *
  * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
- *
  * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
@@ -49,54 +47,217 @@ const styles = css `[part=tabs-container]{width:var(--pf-c-tabs--Width,auto);pad
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
  */
-let PfTabs = class PfTabs extends BaseTabs {
+let PfTabs = class PfTabs extends LitElement {
     constructor() {
         super(...arguments);
+        _PfTabs_instances.add(this);
+        /**
+         * Aria Label for the left scroll button
+         */
+        this.labelScrollLeft = 'Scroll left';
+        /**
+         * Aria Label for the right scroll button
+         */
+        this.labelScrollRight = 'Scroll left';
+        /**
+         * Box styling on tabs. Defaults to null
+         */
         this.box = null;
+        /**
+         * Set to true to enable vertical tab styling.
+         */
         this.vertical = false;
+        /**
+         * Set to true to enable filled tab styling.
+         */
         this.fill = false;
+        /**
+         * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.
+         */
         this.borderBottom = 'true';
-    }
-    static isTab(element) {
-        return element instanceof PfTab;
-    }
-    static isPanel(element) {
-        return element instanceof PfTabPanel;
+        /**
+         * Set's the tabs to be manually activated. This means that the tabs will not automatically select
+         * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving
+         * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.
+         */
+        this.manual = false;
+        /**
+         * The index of the active tab
+         */
+        this.activeIndex = -1;
+        this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
+        _PfTabs_overflow.set(this, new OverflowController(this, { scrollTimeoutDelay: 200 }));
+        _PfTabs_tabs.set(this, new TabsAriaController(this, {
+            isTab: (x) => x.localName === 'pf-tab',
+            isPanel: (x) => x.localName === 'pf-tab-panel',
+            isActiveTab: x => x.active,
+        }));
+        _PfTabs_tabindex.set(this, new RovingTabindexController(this, {
+            getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,
+            getItems: () => this.tabs ?? [],
+        }));
+        _PfTabs_logger.set(this, new Logger(this));
     }
     static isExpandEvent(event) {
         return event instanceof TabExpandEvent;
     }
-    get canShowScrollButtons() {
-        return !this.vertical;
+    get tabs() {
+        return __classPrivateFieldGet(this, _PfTabs_tabs, "f").tabs;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('expand', __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onExpand));
+        this.id || (this.id = getRandomId(this.localName));
+    }
+    async getUpdateComplete() {
+        const here = await super.getUpdateComplete();
+        const ps = await Promise.all(Array.from(this.querySelectorAll('pf-tab, pf-tab-panel'), x => x.updateComplete));
+        return here && ps.every(x => !!x);
+    }
+    willUpdate(changed) {
+        if (changed.has('activeIndex')) {
+            this.select(this.activeIndex);
+        }
+        else if (changed.has('activeTab') && this.activeTab) {
+            this.select(this.activeTab);
+        }
+        else {
+            __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this);
+        }
+        __classPrivateFieldGet(this, _PfTabs_overflow, "f").update();
+        this.ctx = __classPrivateFieldGet(this, _PfTabs_instances, "a", _PfTabs_ctx_get);
+    }
+    updated(changed) {
+        if (changed.has('activeTab') && this.activeTab?.disabled) {
+            __classPrivateFieldGet(this, _PfTabs_logger, "f").warn('Active tab is disabled. Setting to first focusable tab');
+            this.activeIndex = 0;
+        }
+    }
+    firstUpdated() {
+        if (this.tabs.length && this.activeIndex === -1) {
+            this.select(this.tabs.findIndex(x => !x.disabled));
+        }
+    }
+    render() {
+        return html `
+      <div part="container"
+           class="${classMap({ overflow: __classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons })}">
+        <div part="tabs-container">${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
+          <button id="previousTab" tabindex="-1"
+              aria-label="${this.labelScrollLeft}"
+              ?disabled="${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").overflowLeft}"
+              @click="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_scrollLeft)}">
+            <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
+          </button>`}
+          <div id="tabs" part="tabs" role="tablist">
+            <slot name="tab" @slotchange="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_onSlotChange)}" @scroll="${__classPrivateFieldGet(this, _PfTabs_overflow, "f").onScroll}"></slot>
+          </div>
+          ${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").showScrollButtons ? '' : html `
+          <button id="nextTab" tabindex="-1"
+              aria-label="${this.labelScrollRight}"
+              ?disabled="${!__classPrivateFieldGet(this, _PfTabs_overflow, "f").overflowRight}"
+              @click="${__classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_scrollRight)}">
+            <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>
+          </button>`}
+        </div>
+        <slot part="panels"></slot>
+      </div>
+    `;
+    }
+    select(option) {
+        if (typeof option === 'number') {
+            const item = this.tabs[option];
+            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(item);
+        }
+        else {
+            __classPrivateFieldGet(this, _PfTabs_tabindex, "f").setActiveItem(option);
+        }
+        __classPrivateFieldGet(this, _PfTabs_instances, "m", _PfTabs_updateActive).call(this, { force: true });
+    }
+};
+_PfTabs_overflow = new WeakMap();
+_PfTabs_tabs = new WeakMap();
+_PfTabs_tabindex = new WeakMap();
+_PfTabs_logger = new WeakMap();
+_PfTabs_instances = new WeakSet();
+_PfTabs_ctx_get = function _PfTabs_ctx_get() {
+    const { activeTab, borderBottom, box, fill, manual, vertical } = this;
+    return { activeTab, borderBottom, box, fill, manual, vertical };
+};
+_PfTabs_scrollLeft = function _PfTabs_scrollLeft() {
+    __classPrivateFieldGet(this, _PfTabs_overflow, "f").scrollLeft();
+};
+_PfTabs_scrollRight = function _PfTabs_scrollRight() {
+    __classPrivateFieldGet(this, _PfTabs_overflow, "f").scrollRight();
+};
+_PfTabs_onSlotChange = function _PfTabs_onSlotChange() {
+    if (this.tabs) {
+        __classPrivateFieldGet(this, _PfTabs_overflow, "f").init(this.tabsContainer, this.tabs);
+    }
+};
+_PfTabs_onExpand = function _PfTabs_onExpand(event) {
+    if (event instanceof TabExpandEvent
+        && !event.defaultPrevented && this.tabs.includes(event.tab)) {
+        this.select(event.tab);
     }
 };
-PfTabs.styles = [...BaseTabs.styles, styles];
+_PfTabs_updateActive = function _PfTabs_updateActive({ force = false } = {}) {
+    if (!__classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem?.disabled) {
+        this.tabs?.forEach((tab, i) => {
+            if (force || !this.manual) {
+                const active = tab === __classPrivateFieldGet(this, _PfTabs_tabindex, "f").activeItem;
+                tab.active = active;
+                if (active) {
+                    this.activeIndex = i;
+                    this.activeTab = tab;
+                }
+            }
+            __classPrivateFieldGet(this, _PfTabs_tabs, "f").panelFor(tab)?.toggleAttribute('hidden', !tab.active);
+        });
+    }
+};
+PfTabs.styles = [styles];
 PfTabs.scrollTimeoutDelay = 150;
 __decorate([
-    cascades('pf-tab', 'pf-tab-panel'),
+    property({ reflect: false, attribute: 'label-scroll-left' })
+], PfTabs.prototype, "labelScrollLeft", void 0);
+__decorate([
+    property({ reflect: false, attribute: 'label-scroll-right' })
+], PfTabs.prototype, "labelScrollRight", void 0);
+__decorate([
     property({ reflect: true })
 ], PfTabs.prototype, "box", void 0);
 __decorate([
-    cascades('pf-tab', 'pf-tab-panel'),
     property({ reflect: true, type: Boolean })
 ], PfTabs.prototype, "vertical", void 0);
 __decorate([
-    cascades('pf-tab'),
     property({ reflect: true, type: Boolean })
 ], PfTabs.prototype, "fill", void 0);
 __decorate([
-    cascades('pf-tab'),
     property({ attribute: 'border-bottom' })
 ], PfTabs.prototype, "borderBottom", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfTabs.prototype, "manual", void 0);
+__decorate([
+    property({ attribute: 'active-index', reflect: true, type: Number })
+], PfTabs.prototype, "activeIndex", void 0);
+__decorate([
+    property({ attribute: false })
+], PfTabs.prototype, "activeTab", void 0);
+__decorate([
+    query('#tabs')
+], PfTabs.prototype, "tabsContainer", void 0);
+__decorate([
+    provide({ context })
+], PfTabs.prototype, "ctx", void 0);
 PfTabs = __decorate([
     customElement('pf-tabs')
 ], PfTabs);