@patternfly/elements 2.4.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.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,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAkB+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;IA3BC,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAAY;QAC/B,OAAO,KAAK,YAAY,cAAc,CAAC;IACzC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AA9Be,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;AAE5B,yBAAkB,GAAG,GAAG,AAAN,CAAO;AAetB;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AA3BvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgClB;SAhCY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { TabExpandEvent } from './BaseTab.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.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 * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\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 BaseTabs {\n  static readonly styles = [...BaseTabs.styles, styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isTab(element: HTMLElement): element is PfTab {\n    return element instanceof PfTab;\n  }\n\n  static isPanel(element: HTMLElement): element is PfTabPanel {\n    return element instanceof PfTabPanel;\n  }\n\n  static isExpandEvent(event: Event): event is TabExpandEvent {\n    return event instanceof TabExpandEvent;\n  }\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @cascades('pf-tab')\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  @cascades('pf-tab')\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  protected get canShowScrollButtons(): boolean {\n    return !this.vertical;\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"]}