@patternfly/elements 3.0.0 → 3.0.1

package/pf-tabs/pf-tabs.js

@@ -19,36 +19,27 @@ import { css } from "lit";
 const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n[part="tabs-container"] {\n  width: var(--pf-c-tabs--Width, auto);\n  padding-inline-end: var(--pf-c-tabs--inset, 0);\n  padding-inline-start: var(--pf-c-tabs--inset, 0);\n}\n\n[part="tabs-container"]::before {\n  border-color: var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-block-start-width: var(--pf-c-tabs--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--before--BorderRightWidth, 0);\n  border-block-end-width:  var(--pf-c-tabs--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--before--BorderLeftWidth, 0);\n}\n\n:host([box]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-box__link--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-box__link--disabled--BackgroundColor, var(--pf-global--disabled-color--200, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Bottom: auto;\n}\n\n:host([box]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderRightWidth: 0;\n}\n\n:host([box]) button:nth-of-type(2)::before {\n  left: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host([box]) pf-tab[aria-selected="true"] + pf-tab {\n  --pf-c-tabs__link--before--Left: 0;\n}\n\n:host([box="light"]) [part="tabs-container"] {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor, transparent);\n  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([vertical]) [part="tabs-container"] {\n  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width, 100%);\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset, var(--pf-global--spacer--lg, 1.5rem));\n  --pf-c-tabs--before--BorderBottomWidth: 0;  /* *override user setting* border bottom should always be 0 for vertical tabs */\n  --pf-c-tabs__link--PaddingTop: var(--pf-c-tabs--m-vertical__link--PaddingTop, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--PaddingBottom: var(--pf-c-tabs--m-vertical__link--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --pf-c-tabs__link--before--Left: 0;\n  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0; /* *override user setting* border bottom for disabled should always be 0 for vertical tabs */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--after--Top: 0;\n  --pf-c-tabs__link--after--Right: auto;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0;\n  overflow: visible;\n}\n\n:host([vertical]) [part="tabs"] {\n  position: relative;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: var(--pf-c-tabs--m-vertical--MaxWidth, 15.625rem);\n}\n\n:host([vertical]) [part="tabs"]::before {\n  position: absolute;\n  right: auto;\n  border-style: solid;\n  border-color: var(--pf-c-tabs--m-vertical__list--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs--m-vertical__list--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs--m-vertical__list--before--BorderLeftWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([vertical]) ::slotted(pf-tab:first-of-type) {\n  margin-block-start: var(--pf-c-tabs--inset, 0);\n}\n\n:host([vertical]) ::slotted(pf-tab:last-of-type) {\n  margin-block-end: var(--pf-c-tabs--inset, 0);\n}\n\n:host([box][vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset, var(--pf-global--spacer--xl, 2rem));\n  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for vertical box; */\n  --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  /* --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)); */\n  --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0; /* *override user setting* border left should be 0 for disabled ; */\n}\n\n:host([box][vertical]) [part="tabs"]::before {\n  right: 0;\n  left: auto;\n}\n\n:host([box][vertical]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]) {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n:host([box][vertical]) ::slotted(pf-tab[aria-selected="true"]:first-of-type) {\n  --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n}\n\n[part="tabs"] {\n  display: var(--pf-c-tabs__list--Display, flex);\n}\n\nbutton {\n  width: var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem));\n  color: var(--pf-c-tabs__scroll-button--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-tabs__scroll-button--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset, calc(-1 * var(--pf-global--spacer--xs, 0.25rem)));\n  transition:\n    margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin, .125s),\n    translate var(--pf-c-tabs__scroll-button--TransitionDuration--transform, .125s), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity, .125s);\n  --pf-icon--size: 16px;\n}\n\nbutton:hover {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color, var(--pf-global--active-color--100, #06c));\n}\n\nbutton::before {\n  border-color: var(--pf-c-tabs__scroll-button--before--BorderColor, var(--pf-c-tabs--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-width: var(--pf-c-tabs__scroll-button--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__scroll-button--before--BorderBottomWidth, var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs__scroll-button--before--BorderLeftWidth, 0);\n}\n\nbutton:nth-of-type(1) {\n  --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-end: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:nth-of-type(2) {\n  --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  margin-inline-start: calc(var(--pf-c-tabs__scroll-button--Width, var(--pf-global--spacer--2xl, 3rem)) * -1);\n}\n\nbutton:disabled {\n  --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color, var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:not[vertical]) [part="tabs-container"] {\n  --pf-c-tabs--inset: 0;\n  --pf-c-tabs--m-vertical--inset: 0;\n  --pf-c-tabs--m-vertical--m-box--inset: 0;\n}\n\n:host([fill]) [part="tabs"] {\n  flex-basis: 100%;\n}\n\n:host([fill]) ::slotted(pf-tab) {\n  flex-grow: 1;\n}\n\n:host([fill]) ::slotted(pf-tab:first-of-type) {\n  --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: 0;\n}\n\n:host([fill]) ::slotted(pf-tab:last-of-type) {\n  --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: 0;\n}\n\n:host([border-bottom="false"]) [part="tabs-container"] {\n  --pf-c-tabs--before--BorderBottomWidth: 0; /* *override user setting* when border-bottom is false border bottom styles should be 0; */\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
- *
  * @csspart container - outer container
  * @csspart tabs-container - tabs container
  * @csspart tabs - tablist
  * @csspart panels - panels
- *
  * @slot tab - Must contain one or more `<pf-tab>`
  * @slot - Must contain one or more `<pf-panel>`
- *
  * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
- *
  * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
@@ -56,13 +47,11 @@ const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n
  * @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 LitElement {
@@ -214,8 +203,8 @@ _PfTabs_onSlotChange = function _PfTabs_onSlotChange() {
     }
 };
 _PfTabs_onExpand = function _PfTabs_onExpand(event) {
-    if (event instanceof TabExpandEvent &&
-        !event.defaultPrevented && this.tabs.includes(event.tab)) {
+    if (event instanceof TabExpandEvent
+        && !event.defaultPrevented && this.tabs.includes(event.tab)) {
         this.select(event.tab);
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { provide } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';\n\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, TabExpandEvent, context } from './context.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n *\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles = [styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {\n    return event instanceof TabExpandEvent;\n  }\n\n  /**\n   * Aria Label for the left scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';\n\n  /**\n   * Aria Label for the right scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';\n\n  /**\n   * Box styling on tabs. Defaults to null\n   */\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  /**\n   * Set to true to enable vertical tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /**\n   * Set to true to enable filled tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  /**\n   * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.\n   */\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  /**\n   * Set's the tabs to be manually activated. This means that the tabs will not automatically select\n   * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving\n   * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  /**\n   * The index of the active tab\n   */\n  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;\n\n  @property({ attribute: false }) activeTab?: PfTab;\n\n  get tabs(): PfTab[] {\n    return this.#tabs.tabs;\n  }\n\n  @query('#tabs') private tabsContainer!: HTMLElement;\n\n  get #ctx(): PfTabsContext {\n    const { activeTab, borderBottom, box, fill, manual, vertical } = this;\n    return { activeTab, borderBottom, box, fill, manual, vertical };\n  }\n\n  @provide({ context })\n  private ctx: PfTabsContext = this.#ctx;\n\n  #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });\n\n  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {\n    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',\n    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',\n    isActiveTab: x => x.active,\n  });\n\n  #tabindex = new RovingTabindexController(this, {\n    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(\n      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),\n      x => x.updateComplete,\n    ));\n    return here && ps.every(x => !!x);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('activeIndex')) {\n      this.select(this.activeIndex);\n    } else if (changed.has('activeTab') && this.activeTab) {\n      this.select(this.activeTab);\n    } else {\n      this.#updateActive();\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('activeTab') && this.activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (this.tabs.length && this.activeIndex === -1) {\n      this.select(this.tabs.findIndex(x => !x.disabled));\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"container\"\n           class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollLeft}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"angle-left\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <div id=\"tabs\" part=\"tabs\" role=\"tablist\">\n            <slot name=\"tab\" @slotchange=\"${this.#onSlotChange}\" @scroll=\"${this.#overflow.onScroll}\"></slot>\n          </div>\n          ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollRight}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"angle-right\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\"></slot>\n      </div>\n    `;\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n\n  #onSlotChange() {\n    if (this.tabs) {\n      this.#overflow.init(this.tabsContainer, this.tabs);\n    }\n  }\n\n  #onExpand(event: Event) {\n    if (event instanceof TabExpandEvent &&\n      !event.defaultPrevented && this.tabs.includes(event.tab)) {\n      this.select(event.tab);\n    }\n  }\n\n  #updateActive({ force = false } = {}) {\n    if (!this.#tabindex.activeItem?.disabled) {\n      this.tabs?.forEach((tab, i) => {\n        if (force || !this.manual) {\n          const active = tab === this.#tabindex.activeItem;\n          tab.active = active;\n          if (active) {\n            this.activeIndex = i;\n            this.activeTab = tab;\n          }\n        }\n        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n      });\n    }\n  }\n\n  select(option: PfTab | number) {\n    if (typeof option === 'number') {\n      const item = this.tabs[option];\n      this.#tabindex.setActiveItem(item);\n    } else {\n      this.#tabindex.setActiveItem(option);\n    }\n    this.#updateActive({ force: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}
+{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { provide } from '@lit/context';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';\n\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, TabExpandEvent, context } from './context.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends LitElement {\n  static readonly styles = [styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {\n    return event instanceof TabExpandEvent;\n  }\n\n  /**\n   * Aria Label for the left scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';\n\n  /**\n   * Aria Label for the right scroll button\n   */\n  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';\n\n  /**\n   * Box styling on tabs. Defaults to null\n   */\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  /**\n   * Set to true to enable vertical tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /**\n   * Set to true to enable filled tab styling.\n   */\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  /**\n   * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.\n   */\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  /**\n   * Set's the tabs to be manually activated. This means that the tabs will not automatically select\n   * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving\n   * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  /**\n   * The index of the active tab\n   */\n  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;\n\n  @property({ attribute: false }) activeTab?: PfTab;\n\n  get tabs(): PfTab[] {\n    return this.#tabs.tabs;\n  }\n\n  @query('#tabs') private tabsContainer!: HTMLElement;\n\n  get #ctx(): PfTabsContext {\n    const { activeTab, borderBottom, box, fill, manual, vertical } = this;\n    return { activeTab, borderBottom, box, fill, manual, vertical };\n  }\n\n  @provide({ context })\n  private ctx: PfTabsContext = this.#ctx;\n\n  #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });\n\n  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {\n    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',\n    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',\n    isActiveTab: x => x.active,\n  });\n\n  #tabindex = new RovingTabindexController(this, {\n    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,\n    getItems: () => this.tabs ?? [],\n  });\n\n  #logger = new Logger(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onExpand);\n    this.id ||= getRandomId(this.localName);\n  }\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const here = await super.getUpdateComplete();\n    const ps = await Promise.all(Array.from(\n      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),\n      x => x.updateComplete,\n    ));\n    return here && ps.every(x => !!x);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('activeIndex')) {\n      this.select(this.activeIndex);\n    } else if (changed.has('activeTab') && this.activeTab) {\n      this.select(this.activeTab);\n    } else {\n      this.#updateActive();\n    }\n    this.#overflow.update();\n    this.ctx = this.#ctx;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('activeTab') && this.activeTab?.disabled) {\n      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');\n      this.activeIndex = 0;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (this.tabs.length && this.activeIndex === -1) {\n      this.select(this.tabs.findIndex(x => !x.disabled));\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"container\"\n           class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollLeft}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"angle-left\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <div id=\"tabs\" part=\"tabs\" role=\"tablist\">\n            <slot name=\"tab\" @slotchange=\"${this.#onSlotChange}\" @scroll=\"${this.#overflow.onScroll}\"></slot>\n          </div>\n          ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.labelScrollRight}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"angle-right\" set=\"fas\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\"></slot>\n      </div>\n    `;\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n\n  #onSlotChange() {\n    if (this.tabs) {\n      this.#overflow.init(this.tabsContainer, this.tabs);\n    }\n  }\n\n  #onExpand(event: Event) {\n    if (event instanceof TabExpandEvent\n      && !event.defaultPrevented && this.tabs.includes(event.tab)) {\n      this.select(event.tab);\n    }\n  }\n\n  #updateActive({ force = false } = {}) {\n    if (!this.#tabindex.activeItem?.disabled) {\n      this.tabs?.forEach((tab, i) => {\n        if (force || !this.manual) {\n          const active = tab === this.#tabindex.activeItem;\n          tab.active = active;\n          if (active) {\n            this.activeIndex = i;\n            this.activeTab = tab;\n          }\n        }\n        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);\n      });\n    }\n  }\n\n  select(option: PfTab | number) {\n    if (typeof option === 'number') {\n      const item = this.tabs[option];\n      this.#tabindex.setActiveItem(item);\n    } else {\n      this.#tabindex.setActiveItem(option);\n    }\n    this.#updateActive({ force: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-tabs';
+test.describe(tagName, () => {
+    // Run tests in this file with portrait-like viewport.
+    test.use({ viewport: { width: 1200, height: 1000 } });
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-tabs.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tabs.e2e.js","sourceRoot":"","sources":["pf-tabs.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,sDAAsD;IACtD,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-tabs';\n\ntest.describe(tagName, () => {\n  // Run tests in this file with portrait-like viewport.\n  test.use({ viewport: { width: 1200, height: 1000 } });\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

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

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

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

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

package/pf-text-area/pf-text-area.d.ts

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 /**
  * A **text area** component is used for entering a paragraph of text that is longer than one line.
- *
  * @cssprop --pf-c-form-control--Color - {@default var(--pf-global--Color--100, #151515)}
  * @cssprop --pf-c-form-control--FontSize - {@default var(--pf-global--FontSize--md, 1rem)}
  * @cssprop --pf-c-form-control--LineHeight - {@default var(--pf-global--LineHeight--md, 1.5)}
@@ -163,7 +162,7 @@ export declare class PfTextArea extends LitElement {
     /** Flag to modify height based on contents. */
     autoResize: boolean;
     willUpdate(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     formDisabledCallback(): Promise<void>;
     setCustomValidity(message: string): void;

package/pf-text-area/pf-text-area.js

@@ -1,4 +1,4 @@
-var _PfTextArea_instances, _PfTextArea_style, _PfTextArea_logger, _PfTextArea_internals, _PfTextArea_derivedLabel, _PfTextArea_input_get, _PfTextArea_onInput, _PfTextArea_autoSetHeight, _PfTextArea_setValidityFromInput;
+var _PfTextArea_instances, _PfTextArea_logger, _PfTextArea_internals, _PfTextArea_derivedLabel, _PfTextArea_input_get, _PfTextArea_onInput, _PfTextArea_autoSetHeight, _PfTextArea_setValidityFromInput;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
@@ -11,7 +11,6 @@ const styles = css `:host {\n  display: block;\n\n  /* .pf-c-form-control */\n
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 /**
  * A **text area** component is used for entering a paragraph of text that is longer than one line.
- *
  * @cssprop --pf-c-form-control--Color - {@default var(--pf-global--Color--100, #151515)}
  * @cssprop --pf-c-form-control--FontSize - {@default var(--pf-global--FontSize--md, 1rem)}
  * @cssprop --pf-c-form-control--LineHeight - {@default var(--pf-global--LineHeight--md, 1.5)}
@@ -152,7 +151,6 @@ let PfTextArea = class PfTextArea extends LitElement {
         this.value = '';
         /** Flag to modify height based on contents. */
         this.autoResize = false;
-        _PfTextArea_style.set(this, void 0);
         _PfTextArea_logger.set(this, new Logger(this));
         _PfTextArea_internals.set(this, InternalsController.of(this));
         _PfTextArea_derivedLabel.set(this, '');
@@ -196,7 +194,6 @@ let PfTextArea = class PfTextArea extends LitElement {
         return __classPrivateFieldGet(this, _PfTextArea_internals, "f").reportValidity();
     }
 };
-_PfTextArea_style = new WeakMap();
 _PfTextArea_logger = new WeakMap();
 _PfTextArea_internals = new WeakMap();
 _PfTextArea_derivedLabel = new WeakMap();
@@ -228,7 +225,10 @@ _PfTextArea_setValidityFromInput = function _PfTextArea_setValidityFromInput() {
 };
 PfTextArea.styles = [styles];
 PfTextArea.formAssociated = true;
-PfTextArea.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+PfTextArea.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ reflect: true, attribute: 'accessible-label' })
 ], PfTextArea.prototype, "accessibleLabel", void 0);