@patternfly/elements 3.0.0 → 3.0.2

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\" 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"]}
+{"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

@@ -12,7 +12,7 @@ export declare class TabExpandEvent extends ComposedEvent {
 export declare abstract class BaseTab extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static shadowRootOptions: {
+    static readonly shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
@@ -26,7 +26,7 @@ export declare abstract class BaseTab extends LitElement {
     /** `active` should be observed, and true when the tab is disabled */
     abstract disabled: boolean;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changed: PropertyValues<this>): void;
     focus(): void;
 }

package/pf-tabs/BaseTab.js

@@ -70,7 +70,10 @@ _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);

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

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

package/pf-tabs/BaseTabs.d.ts

@@ -3,10 +3,8 @@ 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;
@@ -36,5 +34,5 @@ export declare abstract class BaseTabs extends LitElement {
     disconnectedCallback(): void;
     willUpdate(): void;
     firstUpdated(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/pf-tabs/BaseTabs.js

@@ -17,10 +17,8 @@ import { css } from "lit";
 const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n`;
 /**
  * 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 class BaseTabs extends LitElement {
     constructor() {
@@ -41,9 +39,9 @@ export class BaseTabs extends LitElement {
          */
         this.manual = false;
         _BaseTabs_onTabExpand.set(this, (event) => {
-            if (!(event instanceof TabExpandEvent) ||
-                !__classPrivateFieldGet(this, _BaseTabs_allTabs, "f").length ||
-                !__classPrivateFieldGet(this, _BaseTabs_allPanels, "f").length) {
+            if (!(event instanceof TabExpandEvent)
+                || !__classPrivateFieldGet(this, _BaseTabs_allTabs, "f").length
+                || !__classPrivateFieldGet(this, _BaseTabs_allPanels, "f").length) {
                 return;
             }
             if (event.active) {
@@ -101,10 +99,10 @@ export class BaseTabs extends LitElement {
     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;
         }
     }
@@ -146,11 +144,12 @@ _a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new Weak
         __classPrivateFieldSet(this, _BaseTabs_allTabs, this.tabs.filter(tab => this.constructor.isTab(tab)), "f");
     }
     else {
-        __classPrivateFieldSet(this, _BaseTabs_allPanels, this.panels.filter(panel => this.constructor.isPanel(panel)), "f");
+        __classPrivateFieldSet(this, _BaseTabs_allPanels, this.panels
+            .filter(panel => this.constructor.isPanel(panel)), "f");
     }
     __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)) {
+    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);
         this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_allTabs, "f").findIndex(tab => tab.active);

package/pf-tabs/BaseTabs.js.map

@@ -1 +1 @@
-{"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 *\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    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.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"]}
+{"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"]}

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

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

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

@@ -1,62 +1,46 @@
 import { LitElement } from 'lit';
 /**
  * Tab
- *
  * @slot icon
  *       Can contain an `<svg>` or `<pf-icon>`
  * @slot
  *       Tab title text
- *
  * @csspart button - button element
  * @csspart icon - span container for the icon
  * @csspart text - span container for the title text
- *
  * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}
  * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}
  * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}
  * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}
  * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}
- *
  * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}
- *
  * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}
  * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
- *
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 export declare class PfTab extends LitElement {
@@ -68,7 +52,7 @@ export declare class PfTab extends LitElement {
     private ctx?;
     connectedCallback(): void;
     willUpdate(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     private _activeChanged;
     private _disabledChanged;
 }

package/pf-tabs/pf-tab.js

@@ -14,62 +14,46 @@ import { css } from "lit";
 const styles = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: flex;\n  flex: none;\n  outline: none;\n  scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);\n}\n\n.active {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));\n  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n.box.active {\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--BackgroundColor, transparent);\n}\n\n.vertical [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\n#button {\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  align-items: center;\n  gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));\n  line-height: var(--pf-global--LineHeight--md, 1.5);\n  color: var(--pf-global--Color--100, #151515);\n  padding:\n    var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));\n  color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));\n  outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));\n  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);\n}\n\n#button::before,\n#button::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  pointer-events: none;\n}\n\n#button::before {\n  border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);\n  border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);\n  border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n  border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));\n}\n\n#button::after {\n  top: var(--pf-c-tabs__link--after--Top, auto);\n  right: var(--pf-c-tabs__link--after--Right, 0);\n  bottom: var(--pf-c-tabs__link--after--Bottom, 0);\n  left: var(--pf-c-tabs__link--before--Left, 0);\n  border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));\n  border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);\n  border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);\n  border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);\n  border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);\n}\n\n:host(:hover) #button {\n  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host(:is(:focus, :focus-visible)) #button {\n  outline-width: 1px;\n  outline-style: auto;\n  outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n:host(:active) #button {\n  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));\n}\n\n.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\n.box #button {\n  --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n}\n\n:is(.box, .vertical) #button {\n  --pf-c-tabs__link--after--BorderBottomWidth: 0;\n}\n\n.vertical #button {\n  --pf-c-tabs__link--after--Bottom: 0;\n  --pf-c-tabs__link--after--BorderTopWidth: 0;\n  --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);\n  max-width: 100%;\n  text-align: left;\n}\n\n.box.vertical #button::after {\n  top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);\n}\n\n:host(:first-of-type) .box.vertical #button::after,\n.box.vertical.active #button::after {\n  top: 0;\n}\n\n.box.vertical.active #button::before {\n  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host(:first-of-type) .box.active #button::before {\n  border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host(:last-of-type) .box.active #button::before {\n  border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n}\n\n:host([disabled]) #button,\n:host([aria-disabled="true"]) #button {\n  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));\n  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);\n  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));\n  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);\n  --pf-c-tabs__link--after--BorderWidth: 0;\n}\n\n[part="icon"] {\n  display: flex !important;\n}\n\n[part="icon"][hidden] {\n  display: none !important;\n}\n\n:host([disabled][border-bottom="false"]) #button,\n:host([aria-disabled="true"][border-bottom="false"]) #button {\n  --pf-c-tabs__link--before--BorderBottomWidth: 0;\n}\n`;
 /**
  * Tab
- *
  * @slot icon
  *       Can contain an `<svg>` or `<pf-icon>`
  * @slot
  *       Tab title text
- *
  * @csspart button - button element
  * @csspart icon - span container for the icon
  * @csspart text - span container for the title text
- *
  * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}
  * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}
  * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}
  * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}
  * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}
  * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}
- *
  * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}
- *
  * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}
  * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
- *
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 let PfTab = class PfTab extends LitElement {

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,OAAO,EAAsB,MAAM,cAAc,CAAC;;;AAI3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;;QAOuC,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;QAM7D,2BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC;IA+E7D,CAAC;IA7EU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,wCAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,0CAAW,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,wCAAS,CAAC,CAAC;IAChD,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACrE,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QACvC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QACD,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACxB,MAAM,EAAE,GAAG,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC/D,MAAM,KAAK,GAAG,GAAG,KAAK,OAAO,CAAC;QAC9B,MAAM,IAAI,GAAG,GAAG,KAAK,MAAM,CAAC;QAC5B,OAAO,IAAI,CAAA;;;oBAGK,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;;;yBAGxD,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IA0BO,cAAc,CAAC,GAAY;QACjC,uBAAA,IAAI,wBAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrD,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;YACxB,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;QACnB,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,uBAAA,IAAI,wBAAW,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC;IACvF,CAAC;;;;;IAhCC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;IACnB,CAAC;AACH,CAAC;6CAEU,KAAoB;IAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,OAAO,CAAC,CAAC,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;QACjC,CAAC;IACH,CAAC;AACH,CAAC;;IAGC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACxC,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;IACnB,CAAC;AACH,CAAC;;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AAlFe,YAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAG1B;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGS;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAIrD;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kCACH;AAdjB,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CA+FjB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { consume } from '@lit/context';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { TabExpandEvent, context, type PfTabsContext } from './context.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfTabsContext;\n\n  #internals = InternalsController.of(this, { role: 'tab' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('focus', this.#onFocus);\n  }\n\n  override willUpdate() {\n    const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};\n    this.toggleAttribute('fill', fill);\n    this.toggleAttribute('manual', manual);\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n    if (borderBottom) {\n      this.setAttribute('border-bottom', borderBottom);\n    } else {\n      this.removeAttribute('border-bottom');\n    }\n  }\n\n  render() {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    return html`\n      <div id=\"button\"\n           part=\"button\"\n           class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (!this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (event.key) {\n        case 'Enter': this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #activate() {\n    return this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  private _activeChanged(old: boolean) {\n    this.#internals.ariaSelected = String(!!this.active);\n    if (this.active && !old) {\n      this.#activate();\n    }\n  }\n\n  private _disabledChanged() {\n    this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { consume } from '@lit/context';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { TabExpandEvent, context, type PfTabsContext } from './context.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n  static readonly styles = [styles];\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: HTMLElement[];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfTabsContext;\n\n  #internals = InternalsController.of(this, { role: 'tab' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('focus', this.#onFocus);\n  }\n\n  override willUpdate() {\n    const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};\n    this.toggleAttribute('fill', fill);\n    this.toggleAttribute('manual', manual);\n    this.toggleAttribute('vertical', vertical);\n    if (box) {\n      this.setAttribute('box', box);\n    } else {\n      this.removeAttribute('box');\n    }\n    if (borderBottom) {\n      this.setAttribute('border-bottom', borderBottom);\n    } else {\n      this.removeAttribute('border-bottom');\n    }\n  }\n\n  render() {\n    const { active } = this;\n    const { box, fill = false, vertical = false } = this.ctx ?? {};\n    const light = box === 'light';\n    const dark = box === 'dark';\n    return html`\n      <div id=\"button\"\n           part=\"button\"\n           class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (!this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (event.key) {\n        case 'Enter': this.#activate();\n      }\n    }\n  }\n\n  #onFocus() {\n    if (!this.ctx?.manual && !this.disabled) {\n      this.#activate();\n    }\n  }\n\n  #activate() {\n    return this.dispatchEvent(new TabExpandEvent(this));\n  }\n\n  private _activeChanged(old: boolean) {\n    this.#internals.ariaSelected = String(!!this.active);\n    if (this.active && !old) {\n      this.#activate();\n    }\n  }\n\n  private _disabledChanged() {\n    this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}

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

@@ -4,36 +4,27 @@ import { TabExpandEvent } from './context.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * **Tabs** allow users to navigate between views within the same page or context.
- *
  * @csspart container - outer container
  * @csspart tabs-container - tabs container
  * @csspart tabs - tablist
  * @csspart panels - panels
- *
  * @slot tab - Must contain one or more `<pf-tab>`
  * @slot - Must contain one or more `<pf-panel>`
- *
  * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}
  * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}
- *
  * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}
- *
  * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}
- *
  * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}
- *
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}
@@ -41,13 +32,11 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}
  * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}
  * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}
- *
  * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}
  */
 export declare class PfTabs extends LitElement {
@@ -98,7 +87,7 @@ export declare class PfTabs extends LitElement {
     willUpdate(changed: PropertyValues<this>): void;
     protected updated(changed: PropertyValues<this>): void;
     protected firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     select(option: PfTab | number): void;
 }
 declare global {