@patternfly/elements 2.4.0 → 3.0.1

package/pf-table/pf-tr.js

@@ -4,7 +4,7 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const styles = css `:host{display:grid;align-items:center;padding-inline-start:calc(50px * var(--_pf-table--expandable-rows,0))}::slotted(*){height:100%}@media (min-width:768px){:host{grid-template-columns:repeat(var(--_pf-table--number-of-columns),1fr)}}#container{display:contents}#expansion,:host([expandable]){position:relative}#expansion{display:block;margin-inline-start:calc(-1 * 50px * var(--_pf-table--expandable-rows,0));grid-auto-flow:row;grid-template-columns:auto;padding:0 1.5rem;display:grid;grid-column:1/-1}:host(:not([expanded])),:host([expanded]) #expansion{border-block-end:1px solid #d2d2d2}:host([expanded]) #expansion::before{content:'';position:absolute;inset:0;border-block-start:1px solid #d2d2d2;inset-block-start:-1px}#expansion::slotted(pf-td){padding-block-start:0;padding-inline-start:0}:host([expandable][expanded])::before{position:absolute;inset-block-start:-1px;inset-inline-end:0;inset-block-end:-1px;inset-inline-start:0;content:"";border-inline-start:3px solid #06c;pointer-events:none;z-index:1}#expansion::slotted(pf-table){margin-block-end:-1px}#toggle-cell{z-index:2;position:absolute;inset-inline-start:0;inset-block-start:1.5rem;padding:0}#toggle-icon{transition:.2s ease-in 0s;vertical-align:-.125em}:host([expanded]) #toggle-icon{transform:rotate(90deg)}`;
+const styles = css `:host {\n  display: grid;\n  align-items: center;\n  padding-inline-start: calc(50px * var(--_pf-table--expandable-rows, 0));\n}\n\n::slotted(*) {\n  height: 100%;\n}\n\n@media (min-width: 768px) {\n  :host {\n    /* TODO: provide ability to override */\n    grid-template-columns: repeat(var(--_pf-table--number-of-columns), 1fr);\n  }\n}\n\n#container {\n  display: contents;\n}\n\n:host([expandable]),\n#expansion {\n  position: relative;\n}\n\n#expansion {\n  display: block;\n  margin-inline-start: calc(-1 * 50px * var(--_pf-table--expandable-rows, 0));\n  grid-auto-flow: row;\n  grid-template-columns: auto;\n  padding: 0px 1.5rem;\n  display: grid;\n  grid-column: 1/-1;\n}\n\n:host(:not([expanded])),\n:host([expanded]) #expansion {\n  border-block-end: 1px solid #d2d2d2;\n}\n\n:host([expanded]) #expansion::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-block-start: 1px solid #d2d2d2;\n  inset-block-start: -1px;\n}\n\n\n#expansion::slotted(pf-td) {\n  padding-block-start: 0;\n  padding-inline-start: 0;\n}\n\n:host([expandable][expanded])::before {\n  position: absolute;\n  inset-block-start: -1px;\n  inset-inline-end: 0;\n  inset-block-end: -1px;\n  inset-inline-start: 0;\n  content: "";\n  border-inline-start: 3px solid #06c;\n  pointer-events: none;\n  z-index: 1;\n}\n\n#expansion::slotted(pf-table) {\n  margin-block-end: -1px;\n}\n\n#toggle-cell {\n  z-index: 2;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 1.5rem;\n  padding: 0;\n}\n\n#toggle-icon {\n  transition: .2s ease-in 0s;\n  vertical-align: -0.125em;\n}\n\n:host([expanded]) #toggle-icon {\n  transform: rotate(90deg);\n}\n`;
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
@@ -45,7 +45,7 @@ function BooleanEnumConverter(...allowedAttributes) {
             else {
                 return '';
             }
-        }
+        },
     };
 }
 const StringOrBooleanConverter = {
@@ -62,7 +62,7 @@ const StringOrBooleanConverter = {
         else {
             return '';
         }
-    }
+    },
 };
 /**
  * Table row
@@ -103,21 +103,18 @@ let PfTr = class PfTr extends LitElement {
         </pf-td>
       `,
             html `
-        <div id="container">
-          <slot role="${ifDefined(this.expandable ? 'row' : undefined)}"></slot>
+        <div id="container" role="${ifDefined(this.expandable ? 'row' : undefined)}">
+          <slot></slot>
         </div>
       `,
             this.expandable && this.expandable !== 'compound' && this.expanded && html `
-        <slot id="expansion"
-              name="expansion"
-              role="row"
-        ></slot>
+        <div id="expansion" role="row"><slot name="expansion"></slot></div>
       `,
             this.expandable === 'compound' && html `
         <div id="expansion">${!this.expanded ? '' : html `
           <slot name="${this.expanded}"></slot>`}
         </div>
-      `
+      `,
         ].filter(Boolean);
     }
 };
@@ -154,7 +151,7 @@ __decorate([
 __decorate([
     property({
         reflect: true,
-        converter: StringOrBooleanConverter
+        converter: StringOrBooleanConverter,
     })
 ], PfTr.prototype, "expanded", void 0);
 PfTr = __decorate([

package/pf-table/pf-tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tr.js","sourceRoot":"","sources":["pf-tr.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type ComplexAttributeConverter, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tr.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nexport class RequestExpandEvent extends Event {\n  /**\n   * if provided, the slot name for the compound-expanded cell\n   */\n  public compoundExpanded: string | boolean = false;\n\n  /**\n   * if compoundExpanded is provided, a reference to the row\n   * must also be provided.\n   */\n  public row?: PfTr;\n\n  constructor();\n  constructor(compoundExpanded: string | boolean, row: PfTr);\n  constructor(compoundExpanded?: string | boolean, row?: PfTr) {\n    super('request-expand', {\n      bubbles: true,\n      cancelable: true,\n    });\n    if (row) {\n      this.compoundExpanded = compoundExpanded ?? false;\n      this.row = row;\n    }\n  }\n}\n\nfunction BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeConverter {\n  const values = new Set(allowedAttributes);\n  return {\n    fromAttribute(value) {\n      if (value && values.has(value.toLowerCase())) {\n        return value;\n      } else {\n        return value != null;\n      }\n    },\n    toAttribute(value) {\n      if (!value) {\n        return null;\n      } else if (value === 'compound') {\n        return value;\n      } else {\n        return '';\n      }\n    }\n  };\n}\n\nconst StringOrBooleanConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return value || value !== null;\n  },\n  toAttribute(value) {\n    if (!value) {\n      return null;\n    } else if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  }\n};\n\n/**\n * Table row\n * @slot - Place element content here\n */\n@customElement('pf-tr')\nexport class PfTr extends LitElement {\n  static readonly styles = [styles];\n\n  @property({\n    reflect: true,\n    converter: BooleanEnumConverter('compound'),\n  }) expandable: boolean | 'compound' = false;\n\n  @property({\n    reflect: true,\n    converter: StringOrBooleanConverter\n  }) expanded: boolean | string = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#expandableChanged();\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('expandable')) {\n      this.#expandableChanged();\n    }\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n  }\n\n  render() {\n    return [\n      this.expandable && this.expandable !== 'compound' && html`\n        <pf-td id=\"toggle-cell\">\n          <pf-button id=\"toggle-button\"\n                     aria-expanded=${String(this.expanded) as 'true' | 'false'}\n                     plain\n                     @click=${this.#onClick}>\n            <pf-icon id=\"toggle-icon\"\n                     icon=\"angle-right\"\n                     size=\"md\"\n            ></pf-icon>\n          </pf-button>\n        </pf-td>\n      `,\n\n      html`\n        <div id=\"container\">\n          <slot role=\"${ifDefined(this.expandable ? 'row' : undefined)}\"></slot>\n        </div>\n      `,\n\n      this.expandable && this.expandable !== 'compound' && this.expanded && html`\n        <slot id=\"expansion\"\n              name=\"expansion\"\n              role=\"row\"\n        ></slot>\n      `,\n\n      this.expandable === 'compound' && html`\n        <div id=\"expansion\">${!this.expanded ? '' : html`\n          <slot name=\"${this.expanded}\"></slot>`}\n        </div>\n      `\n    ].filter(Boolean);\n  }\n\n  #expandedChanged() {\n    // disallow setting `expanded` unless `expandable` is also set\n    if (this.expanded && !this.expandable) {\n      this.expanded = false;\n    }\n  }\n\n  #expandableChanged() {\n    switch (this.expandable) {\n      case 'compound': {\n        // TODO: do we need tab roles now?\n        break;\n      }\n      case true:\n        this.setAttribute('role', 'rowgroup');\n        break;\n      default:\n        this.setAttribute('role', 'row');\n    }\n  }\n\n  #onClick() {\n    this.dispatchEvent(new RequestExpandEvent());\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tr': PfTr;\n  }\n}\n"]}
+{"version":3,"file":"pf-tr.js","sourceRoot":"","sources":["pf-tr.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type ComplexAttributeConverter, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tr.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nexport class RequestExpandEvent extends Event {\n  /**\n   * if provided, the slot name for the compound-expanded cell\n   */\n  public compoundExpanded: string | boolean = false;\n\n  /**\n   * if compoundExpanded is provided, a reference to the row\n   * must also be provided.\n   */\n  public row?: PfTr;\n\n  constructor();\n  constructor(compoundExpanded: string | boolean, row: PfTr);\n  constructor(compoundExpanded?: string | boolean, row?: PfTr) {\n    super('request-expand', {\n      bubbles: true,\n      cancelable: true,\n    });\n    if (row) {\n      this.compoundExpanded = compoundExpanded ?? false;\n      this.row = row;\n    }\n  }\n}\n\nfunction BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeConverter {\n  const values = new Set(allowedAttributes);\n  return {\n    fromAttribute(value) {\n      if (value && values.has(value.toLowerCase())) {\n        return value;\n      } else {\n        return value != null;\n      }\n    },\n    toAttribute(value) {\n      if (!value) {\n        return null;\n      } else if (value === 'compound') {\n        return value;\n      } else {\n        return '';\n      }\n    },\n  };\n}\n\nconst StringOrBooleanConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return value || value !== null;\n  },\n  toAttribute(value) {\n    if (!value) {\n      return null;\n    } else if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  },\n};\n\n/**\n * Table row\n * @slot - Place element content here\n */\n@customElement('pf-tr')\nexport class PfTr extends LitElement {\n  static readonly styles = [styles];\n\n  @property({\n    reflect: true,\n    converter: BooleanEnumConverter('compound'),\n  }) expandable: boolean | 'compound' = false;\n\n  @property({\n    reflect: true,\n    converter: StringOrBooleanConverter,\n  }) expanded: boolean | string = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#expandableChanged();\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('expandable')) {\n      this.#expandableChanged();\n    }\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n  }\n\n  render() {\n    return [\n      this.expandable && this.expandable !== 'compound' && html`\n        <pf-td id=\"toggle-cell\">\n          <pf-button id=\"toggle-button\"\n                     aria-expanded=${String(this.expanded) as 'true' | 'false'}\n                     plain\n                     @click=${this.#onClick}>\n            <pf-icon id=\"toggle-icon\"\n                     icon=\"angle-right\"\n                     size=\"md\"\n            ></pf-icon>\n          </pf-button>\n        </pf-td>\n      `,\n\n      html`\n        <div id=\"container\" role=\"${ifDefined(this.expandable ? 'row' : undefined)}\">\n          <slot></slot>\n        </div>\n      `,\n\n      this.expandable && this.expandable !== 'compound' && this.expanded && html`\n        <div id=\"expansion\" role=\"row\"><slot name=\"expansion\"></slot></div>\n      `,\n\n      this.expandable === 'compound' && html`\n        <div id=\"expansion\">${!this.expanded ? '' : html`\n          <slot name=\"${this.expanded}\"></slot>`}\n        </div>\n      `,\n    ].filter(Boolean);\n  }\n\n  #expandedChanged() {\n    // disallow setting `expanded` unless `expandable` is also set\n    if (this.expanded && !this.expandable) {\n      this.expanded = false;\n    }\n  }\n\n  #expandableChanged() {\n    switch (this.expandable) {\n      case 'compound': {\n        // TODO: do we need tab roles now?\n        break;\n      }\n      case true:\n        this.setAttribute('role', 'rowgroup');\n        break;\n      default:\n        this.setAttribute('role', 'row');\n    }\n  }\n\n  #onClick() {\n    this.dispatchEvent(new RequestExpandEvent());\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tr': PfTr;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-table';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-table.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-table.e2e.js","sourceRoot":"","sources":["pf-table.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,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-table';\n\ntest.describe(tagName, () => {\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-table/test/pf-table.spec.d.ts

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

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

@@ -0,0 +1,17 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfTable } from '@patternfly/elements/pf-table/pf-table.js';
+const element = html `
+  <pf-table></pf-table>
+`;
+describe('<pf-table>', function () {
+    it('should upgrade', async function () {
+        const el = await createFixture(element);
+        const klass = customElements.get('pf-table');
+        expect(el)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfTable);
+    });
+});
+//# sourceMappingURL=pf-table.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-table.spec.js","sourceRoot":"","sources":["pf-table.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AAEpE,MAAM,OAAO,GAAG,IAAI,CAAA;;CAEnB,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE;IACrB,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,EAAE,GAAG,MAAM,aAAa,CAAW,OAAO,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC7C,MAAM,CAAC,EAAE,CAAC;aACL,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;aAC1B,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfTable } from '@patternfly/elements/pf-table/pf-table.js';\n\nconst element = html`\n  <pf-table></pf-table>\n`;\n\ndescribe('<pf-table>', function() {\n  it('should upgrade', async function() {\n    const el = await createFixture <PfTable>(element);\n    const klass = customElements.get('pf-table');\n    expect(el)\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfTable);\n  });\n});\n"]}

package/pf-tabs/BaseTab.d.ts

@@ -11,12 +11,13 @@ export declare class TabExpandEvent extends ComposedEvent {
  */
 export declare abstract class BaseTab extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
-    static shadowRootOptions: {
+    static readonly styles: CSSStyleSheet[];
+    static readonly shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
         customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
     };
     private icons;
     private button;

package/pf-tabs/BaseTab.js

@@ -6,7 +6,7 @@ import { query } from 'lit/decorators/query.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { css } from "lit";
-const style = css `:host{display:flex;flex:none}:host([vertical]) [part=text]{max-width:100%;overflow-wrap:break-word}[hidden]{display:none!important}slot[name=icon]{display:block}button{margin:0;font-family:inherit;font-size:100%;border:0;position:relative;display:flex;flex:1;text-decoration:none;cursor:pointer}button::after,button::before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";border-style:solid;padding:0;margin:0;background-color:transparent}button::before{pointer-events:none}:host([fill]) button{flex-basis:100%;justify-content:center}:host(:disabled) button{pointer-events:none}:host([aria-disabled=true]) button{cursor:default}`;
+const style = css `:host {\n  display: flex;\n  flex: none;\n}\n\n:host([vertical]) [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\nbutton {\n  margin: 0;\n  font-family: inherit;\n  font-size: 100%;\n  border: 0;\n  position: relative;\n  display: flex;\n  flex: 1;\n  text-decoration: none;\n  cursor: pointer;\n}\n\nbutton::before,\nbutton::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\nbutton::before {\n  pointer-events: none;\n}\n\n:host([fill]) button {\n  flex-basis: 100%;\n  justify-content: center;\n}\n\n:host(:disabled) button {\n  pointer-events: none;\n}\n\n:host([aria-disabled="true"]) button {\n  cursor: default;\n}\n`;
 export class TabExpandEvent extends ComposedEvent {
     constructor(active, tab) {
         super('expand');
@@ -17,7 +17,7 @@ export class TabExpandEvent extends ComposedEvent {
 /**
  * @fires {TabExpandEvent} expand - when a tab is selected
  */
-class BaseTab extends LitElement {
+export class BaseTab extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTab_instances.add(this);
@@ -70,12 +70,14 @@ _BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab
     __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled = String(!!this.disabled);
 };
 BaseTab.styles = [style];
-BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+BaseTab.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], BaseTab.prototype, "icons", void 0);
 __decorate([
     query('button')
 ], BaseTab.prototype, "button", void 0);
-export { BaseTab };
 //# sourceMappingURL=BaseTab.js.map

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\n/**\n * @fires {TabExpandEvent} expand - when a tab is selected\n */\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\n/**\n * @fires {TabExpandEvent} expand - when a tab is selected\n */\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: HTMLElement[];\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabPanel.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 export declare abstract class BaseTabPanel extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/pf-tabs/BaseTabPanel.js

@@ -2,9 +2,9 @@ var _BaseTabPanel_internals;
 import { __classPrivateFieldGet } from "tslib";
 import { LitElement, html } from 'lit';
 import { css } from "lit";
-const style = css `:host{display:block}:host([hidden]){display:none}`;
+const style = css `:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n`;
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-class BaseTabPanel extends LitElement {
+export class BaseTabPanel extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTabPanel_internals.set(this, this.attachInternals());
@@ -33,5 +33,4 @@ class BaseTabPanel extends LitElement {
 }
 _BaseTabPanel_internals = new WeakMap();
 BaseTabPanel.styles = [style];
-export { BaseTabPanel };
 //# sourceMappingURL=BaseTabPanel.js.map

package/pf-tabs/BaseTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAsB,YAAa,SAAQ,UAAU;IAArD;;QAGE,kCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAyBtC,CAAC;IAvBC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QACrB,uBAAA,IAAI,+BAAW,CAAC,IAAI,GAAG,UAAU,CAAC;QAElC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;;AA1Be,mBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n    this.#internals.role = 'tabpanel';\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}
+{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,OAAgB,YAAa,SAAQ,UAAU;IAArD;;QAGE,kCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAyBtC,CAAC;IAvBC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QACrB,uBAAA,IAAI,+BAAW,CAAC,IAAI,GAAG,UAAU,CAAC;QAElC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;;AA1Be,mBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n    this.#internals.role = 'tabpanel';\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}

package/pf-tabs/BaseTabs.css

@@ -84,4 +84,3 @@ button:nth-of-type(2) {
 button:disabled {
   pointer-events: none;
 }
-

package/pf-tabs/BaseTabs.d.ts

@@ -3,14 +3,12 @@ import { BaseTab } from './BaseTab.js';
 import { BaseTabPanel } from './BaseTabPanel.js';
 /**
  * BaseTabs
- *
  * @attr [label-scroll-left="Scroll left"] - accessible label for the tab panel's scroll left button.
  * @attr [label-scroll-right="Scroll right"] - accessible label for the tab panel's scroll right button.
- *
  */
 export declare abstract class BaseTabs extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     static isTab(element: BaseTab): element is BaseTab;
     static isPanel(element: BaseTabPanel): element is BaseTabPanel;
     /** Time in milliseconds to debounce between scroll events and updating scroll button state */

package/pf-tabs/BaseTabs.js

@@ -1,5 +1,7 @@
-var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_tabindex, _BaseTabs_overflow, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_firstLastClasses, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
+var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_tabindex, _BaseTabs_overflow, _BaseTabs_logger, _BaseTabs_allTabs, _BaseTabs_allPanels, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_firstLastClasses, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+// we will remove this file for 3.0
+/* eslint-disable lit-a11y/no-aria-slot */
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -12,23 +14,23 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { BaseTab, TabExpandEvent } from './BaseTab.js';
 import { BaseTabPanel } from './BaseTabPanel.js';
 import { css } from "lit";
-const styles = css `:host{display:block}[part=tabs-container]{position:relative;display:flex;overflow:hidden}[part=tabs-container]::before{position:absolute;right:0;bottom:0;left:0;border-style:solid}:host button{opacity:1}:host button:first-of-type{margin-inline-end:0;translate:0 0}:host button:nth-of-type(2){margin-inline-start:0;translate:0 0}[part=panels],[part=tabs]{display:block}[part=tabs]{scrollbar-width:none;position:relative;max-width:100%;overflow-x:auto}[part=tabs-container]::before,[part=tabs]::before,button::before{position:absolute;right:0;bottom:0;left:0;content:"";border-style:solid}[part=tabs]::before,button::before{top:0}[part=tabs]::before,button{border:0}button{flex:none;line-height:1;opacity:0}button::before{border-block-start-width:0}button:first-of-type{translate:-100% 0}button:nth-of-type(2){translate:100% 0}button:disabled{pointer-events:none}`;
+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`;
 /**
  * BaseTabs
- *
  * @attr [label-scroll-left="Scroll left"] - accessible label for the tab panel's scroll left button.
  * @attr [label-scroll-right="Scroll right"] - accessible label for the tab panel's scroll right button.
- *
  */
-class BaseTabs extends LitElement {
+export class BaseTabs extends LitElement {
     constructor() {
         super(...arguments);
         _BaseTabs_instances.add(this);
-        _BaseTabs_tabindex.set(this, new RovingTabindexController(this));
+        _BaseTabs_tabindex.set(this, new RovingTabindexController(this, {
+            getItems: () => __classPrivateFieldGet(this, _BaseTabs_allTabs, "f"),
+        }));
         _BaseTabs_overflow.set(this, new OverflowController(this));
         _BaseTabs_logger.set(this, new Logger(this));
-        _BaseTabs__allTabs.set(this, []);
-        _BaseTabs__allPanels.set(this, []);
+        _BaseTabs_allTabs.set(this, []);
+        _BaseTabs_allPanels.set(this, []);
         _BaseTabs_activeIndex.set(this, 0);
         /**
          * Tab activation
@@ -37,16 +39,13 @@ class BaseTabs extends LitElement {
          */
         this.manual = false;
         _BaseTabs_onTabExpand.set(this, (event) => {
-            if (!(event instanceof TabExpandEvent) ||
-                !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length ||
-                !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) {
+            if (!(event instanceof TabExpandEvent)
+                || !__classPrivateFieldGet(this, _BaseTabs_allTabs, "f").length
+                || !__classPrivateFieldGet(this, _BaseTabs_allPanels, "f").length) {
                 return;
             }
             if (event.active) {
-                if (event.tab !== __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").activeItem) {
-                    __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(event.tab);
-                }
-                this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab === event.tab);
+                this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").findIndex(tab => tab === event.tab);
             }
         });
     }
@@ -61,28 +60,29 @@ class BaseTabs extends LitElement {
     }
     set activeIndex(index) {
         const oldIndex = this.activeIndex;
-        const tab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get)[index];
+        const tab = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f")[index];
         if (tab) {
             if (tab.disabled) {
                 __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
-                __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
+                __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").setActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
                 index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
+                return;
             }
-            else if (!tab.active) {
-                // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
+            else {
                 tab.active = true;
-                return;
             }
         }
         if (index === -1) {
             __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
-            const first = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
-            __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(first);
+            __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").setActiveItem(__classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem);
             index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
         }
+        else {
+            __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").setActiveItem(tab);
+        }
         __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
         this.requestUpdate('activeIndex', oldIndex);
-        __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[__classPrivateFieldGet(this, _BaseTabs_activeIndex, "f")].hidden = false;
+        __classPrivateFieldGet(this, _BaseTabs_allPanels, "f")[__classPrivateFieldGet(this, _BaseTabs_activeIndex, "f")].hidden = false;
         // close all tabs that are not the activeIndex
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_deactivateExcept).call(this, __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f"));
     }
@@ -90,19 +90,19 @@ class BaseTabs extends LitElement {
         super.connectedCallback();
         this.id || (this.id = getRandomId(this.localName));
         this.addEventListener('expand', __classPrivateFieldGet(this, _BaseTabs_onTabExpand, "f"));
-        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).add(this);
+        __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1).add(this);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).delete(this);
+        __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1).delete(this);
     }
     willUpdate() {
         const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
         // If RTI has an activeItem, update the roving tabindex controller
-        if (!this.manual &&
-            activeItem &&
-            activeItem !== __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get) &&
-            activeItem.ariaDisabled !== 'true') {
+        if (!this.manual
+            && activeItem
+            && activeItem !== __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get)
+            && activeItem.ariaDisabled !== 'true') {
             activeItem.active = true;
         }
     }
@@ -136,54 +136,47 @@ class BaseTabs extends LitElement {
     `;
     }
 }
-_a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
-    const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
+_a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs_allTabs = new WeakMap(), _BaseTabs_allPanels = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
+    const [tab] = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").filter(tab => tab.active);
     return tab;
-}, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
-    return __classPrivateFieldGet(this, _BaseTabs__allTabs, "f");
-}, _BaseTabs_allTabs_set = function _BaseTabs_allTabs_set(tabs) {
-    __classPrivateFieldSet(this, _BaseTabs__allTabs, tabs.filter(tab => this.constructor.isTab(tab)), "f");
-}, _BaseTabs_allPanels_get = function _BaseTabs_allPanels_get() {
-    return __classPrivateFieldGet(this, _BaseTabs__allPanels, "f");
-}, _BaseTabs_allPanels_set = function _BaseTabs_allPanels_set(panels) {
-    __classPrivateFieldSet(this, _BaseTabs__allPanels, panels.filter(panel => this.constructor.isPanel(panel)), "f");
 }, _BaseTabs_onSlotchange = function _BaseTabs_onSlotchange(event) {
     if (event.target.name === 'tab') {
-        __classPrivateFieldSet(this, _BaseTabs_instances, this.tabs, "a", _BaseTabs_allTabs_set);
+        __classPrivateFieldSet(this, _BaseTabs_allTabs, this.tabs.filter(tab => this.constructor.isTab(tab)), "f");
     }
     else {
-        __classPrivateFieldSet(this, _BaseTabs_instances, this.panels, "a", _BaseTabs_allPanels_set);
+        __classPrivateFieldSet(this, _BaseTabs_allPanels, this.panels
+            .filter(panel => this.constructor.isPanel(panel)), "f");
     }
-    if ((__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) &&
-        (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
+    __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateItems();
+    if ((__classPrivateFieldGet(this, _BaseTabs_allTabs, "f").length === __classPrivateFieldGet(this, _BaseTabs_allPanels, "f").length)
+        && (__classPrivateFieldGet(this, _BaseTabs_allTabs, "f").length !== 0 || __classPrivateFieldGet(this, _BaseTabs_allPanels, "f").length !== 0)) {
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
         __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
-        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
-        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
-        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
-        __classPrivateFieldGet(this, _BaseTabs_overflow, "f").init(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
+        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").findIndex(tab => tab.active);
+        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").setActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
+        __classPrivateFieldGet(this, _BaseTabs_overflow, "f").init(this.tabList, __classPrivateFieldGet(this, _BaseTabs_allTabs, "f"));
     }
 }, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
-        const panel = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[index];
+    __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").forEach((tab, index) => {
+        const panel = __classPrivateFieldGet(this, _BaseTabs_allPanels, "f")[index];
         if (!panel.hasAttribute('aria-labelledby')) {
             panel.setAttribute('aria-labelledby', tab.id);
         }
         tab.setAttribute('aria-controls', panel.id);
     });
 }, _BaseTabs_deactivateExcept = function _BaseTabs_deactivateExcept(index) {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
+    __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").forEach((tab, i) => tab.active = i === index);
+    __classPrivateFieldGet(this, _BaseTabs_allPanels, "f").forEach((panel, i) => panel.hidden = i !== index);
 }, _BaseTabs_firstFocusable_get = function _BaseTabs_firstFocusable_get() {
     return __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
 }, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
-    const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
+    const [tab] = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f");
     return tab;
 }, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
-    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
+    return __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").at(-1);
 }, _BaseTabs_activeItemIndex_get = function _BaseTabs_activeItemIndex_get() {
     const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
-    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === activeItem);
+    return __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").findIndex(t => t === activeItem);
 }, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get)?.classList.add('first');
     __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get)?.classList.add('last');
@@ -225,5 +218,4 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], BaseTabs.prototype, "activeIndex", null);
-export { BaseTabs };
 //# sourceMappingURL=BaseTabs.js.map

package/pf-tabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#overflow.onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #tabindex = new RovingTabindexController<BaseTab>(this);\n\n  #overflow = new OverflowController(this);\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #activeIndex = 0;\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#tabindex.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#tabindex.firstItem;\n      this.#tabindex.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('expand', this.#onTabExpand);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override willUpdate(): void {\n    const { activeItem } = this.#tabindex;\n    // If RTI has an activeItem, update the roving tabindex controller\n    if (!this.manual &&\n        activeItem &&\n        activeItem !== this.#activeTab &&\n        activeItem.ariaDisabled !== 'true') {\n      activeItem.active = true;\n    }\n  }\n\n  async firstUpdated() {\n    this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n    return html`\n      <div part=\"container\" 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.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  #onSlotchange(event: { target: { name: string } }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#tabindex.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#tabindex.updateActiveItem(this.#activeTab);\n      this.#overflow.init(this.tabList, this.#allTabs);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        !this.#allTabs.length ||\n        !this.#allPanels.length) {\n      return;\n    }\n\n    if (event.active) {\n      if (event.tab !== this.#tabindex.activeItem) {\n        this.#tabindex.updateActiveItem(event.tab);\n      }\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab | undefined {\n    return this.#tabindex.firstItem;\n  }\n\n  get #firstTab(): BaseTab | undefined {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab | undefined {\n    return this.#allTabs.at(-1);\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#tabindex;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #firstLastClasses() {\n    this.#firstTab?.classList.add('first');\n    this.#lastTab?.classList.add('last');\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n}\n"]}
+{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["// we will remove this file for 3.0\n/* eslint-disable lit-a11y/no-aria-slot */\nimport { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#overflow.onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #tabindex = new RovingTabindexController<BaseTab>(this, {\n    getItems: () => this.#allTabs,\n  });\n\n  #overflow = new OverflowController(this);\n\n  #logger = new Logger(this);\n\n  #allTabs: BaseTab[] = [];\n\n  #allPanels: BaseTabPanel[] = [];\n\n  #activeIndex = 0;\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#tabindex.setActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n        return;\n      } else {\n        tab.active = true;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      this.#tabindex.setActiveItem(this.#tabindex.firstItem);\n      index = this.#activeItemIndex;\n    } else {\n      this.#tabindex.setActiveItem(tab);\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('expand', this.#onTabExpand);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override willUpdate(): void {\n    const { activeItem } = this.#tabindex;\n    // If RTI has an activeItem, update the roving tabindex controller\n    if (!this.manual\n        && activeItem\n        && activeItem !== this.#activeTab\n        && activeItem.ariaDisabled !== 'true') {\n      activeItem.active = true;\n    }\n  }\n\n  async firstUpdated() {\n    this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n    return html`\n      <div part=\"container\" 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.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  #onSlotchange(event: { target: { name: string } }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n    } else {\n      this.#allPanels = this.panels\n          .filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n    }\n    this.#tabindex.updateItems();\n\n    if ((this.#allTabs.length === this.#allPanels.length)\n      && (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#tabindex.setActiveItem(this.#activeTab);\n      this.#overflow.init(this.tabList, this.#allTabs);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent)\n        || !this.#allTabs.length\n        || !this.#allPanels.length) {\n      return;\n    }\n\n    if (event.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab | undefined {\n    return this.#tabindex.firstItem;\n  }\n\n  get #firstTab(): BaseTab | undefined {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab | undefined {\n    return this.#allTabs.at(-1);\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#tabindex;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #firstLastClasses() {\n    this.#firstTab?.classList.add('first');\n    this.#lastTab?.classList.add('last');\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n}\n"]}