@patternfly/elements 3.0.0 → 3.0.1

package/pf-dropdown/pf-dropdown.d.ts

@@ -8,13 +8,10 @@ export declare class PfDropdownSelectEvent extends Event {
 /**
  * A **dropdown** presents a menu of actions or links in a constrained space that
  * will trigger a process or navigate to a new location.
- *
  * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
  * @slot toggle - Custom toggle button
  * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it
- *
  * @csspart menu - The dropdown menu wrapper
- *
  * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop
  *          Dropdown top padding
  *          {@default `0.5rem`}
@@ -30,7 +27,6 @@ export declare class PfDropdownSelectEvent extends Event {
  * @cssprop {<length>} --pf-c-dropdown__menu--Top
  *          Dropdown top
  *          {@default `100% + 0.25rem`}
- *
  * @fires {PfDropdownSelectEvent} select - when a user select dropdown value
  * @fires open - when the dropdown toggles open
  * @fires close - when the dropdown toggles closed
@@ -38,7 +34,13 @@ export declare class PfDropdownSelectEvent extends Event {
 export declare class PfDropdown extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
     /**
      * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.
      */
@@ -52,7 +54,7 @@ export declare class PfDropdown extends LitElement {
     private ctx;
     protected getUpdateComplete(): Promise<boolean>;
     willUpdate(changed: PropertyValues): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     updated(changed: PropertyValues<this>): void;
     /**

package/pf-dropdown/pf-dropdown.js

@@ -26,13 +26,10 @@ export class PfDropdownSelectEvent extends Event {
 /**
  * A **dropdown** presents a menu of actions or links in a constrained space that
  * will trigger a process or navigate to a new location.
- *
  * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
  * @slot toggle - Custom toggle button
  * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it
- *
  * @csspart menu - The dropdown menu wrapper
- *
  * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop
  *          Dropdown top padding
  *          {@default `0.5rem`}
@@ -48,7 +45,6 @@ export class PfDropdownSelectEvent extends Event {
  * @cssprop {<length>} --pf-c-dropdown__menu--Top
  *          Dropdown top
  *          {@default `100% + 0.25rem`}
- *
  * @fires {PfDropdownSelectEvent} select - when a user select dropdown value
  * @fires open - when the dropdown toggles open
  * @fires close - when the dropdown toggles closed
@@ -158,7 +154,8 @@ _PfDropdown_validateDOM = function _PfDropdown_validateDOM() {
         __classPrivateFieldGet(this, _PfDropdown_logger, "f").warn('no menu found');
         return false;
     }
-    else if (![toggle, menu].map(x => this.shadowRoot?.contains(x)).every((p, _, a) => p === a[0])) {
+    else if (![toggle, menu].map(x => this.shadowRoot?.contains(x))
+        .every((p, _, a) => p === a[0])) {
         __classPrivateFieldGet(this, _PfDropdown_logger, "f").warn('toggle and menu must be located in the same root');
         return false;
     }
@@ -217,11 +214,11 @@ _PfDropdown_onMenuFocusout = function _PfDropdown_onMenuFocusout(event) {
     if (this.expanded) {
         const root = this.getRootNode();
         const [menu] = this._menuElements;
-        if (root instanceof ShadowRoot ||
-            root instanceof Document &&
-                event.relatedTarget instanceof PfDropdownItem &&
-                menu instanceof PfDropdownMenu &&
-                !menu.items.includes(event.relatedTarget)) {
+        if (root instanceof ShadowRoot
+            || root instanceof Document
+                && event.relatedTarget instanceof PfDropdownItem
+                && menu instanceof PfDropdownMenu
+                && !menu.items.includes(event.relatedTarget)) {
             this.hide();
         }
     }
@@ -239,7 +236,10 @@ _PfDropdown_onMenuKeydown = function _PfDropdown_onMenuKeydown(event) {
     }
 };
 PfDropdown.styles = [styles];
-PfDropdown.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+PfDropdown.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfDropdown.prototype, "disabled", void 0);

package/pf-dropdown/pf-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-dropdown.js","sourceRoot":"","sources":["pf-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\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 { provide } from '@lit/context';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { context, type PfDropdownContext } from './context.js';\nimport { PfDropdownItem } from './pf-dropdown-item.js';\nimport { PfDropdownMenu } from './pf-dropdown-menu.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-dropdown.css';\n\n\nexport class PfDropdownSelectEvent extends Event {\n  constructor(\n    public originalEvent: Event | KeyboardEvent,\n    public value: string\n  ) {\n    super('select', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that\n * will trigger a process or navigate to a new location.\n *\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n * @slot toggle - Custom toggle button\n * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it\n *\n * @csspart menu - The dropdown menu wrapper\n *\n * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop\n *          Dropdown top padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Dropdown right padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu--ZIndex\n *          Dropdown z-index\n *          {@default `200`}\n * @cssprop --pf-c-dropdown__menu--BoxShadow\n *          Dropdown box shadow\n *          {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop {<length>} --pf-c-dropdown__menu--Top\n *          Dropdown top\n *          {@default `100% + 0.25rem`}\n *\n * @fires {PfDropdownSelectEvent} select - when a user select dropdown value\n * @fires open - when the dropdown toggles open\n * @fires close - when the dropdown toggles closed\n */\n@customElement('pf-dropdown')\nexport class PfDropdown extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether the dropdown is expanded\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @queryAssignedElements({ slot: 'toggle', flatten: true })\n  private _toggleElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'menu', flatten: true })\n  private _menuElements!: HTMLElement[];\n\n  @provide({ context }) private ctx: PfDropdownContext = { disabled: false };\n\n  #logger = new Logger(this);\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._menuElements?.at(0),\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const ps = await Promise.all([\n      super.getUpdateComplete(),\n      this._menuElements?.map(x => (x as LitElement).updateComplete),\n    ]);\n    return ps.every(x=>!!x);\n  }\n\n  willUpdate(changed: PropertyValues) {\n    if (changed.has('disabled')) {\n      const { disabled } = this;\n      this.ctx = { disabled };\n    }\n  }\n\n  render() {\n    const { expanded } = this;\n    const { anchor, alignment, styles = {} } = this.#float;\n    const { disabled } = this;\n    return html`\n    <div class=\"${classMap({ disabled,\n                             expanded,\n                             [anchor ?? '']: !!anchor,\n                             [alignment ?? '']: !!alignment })}\"\n         style=\"${styleMap(styles)}\"\n         @slotchange=\"${this.#onSlotchange}\">\n      <slot name=\"toggle\"\n            @keydown=\"${this.#onButtonKeydown}\"\n            @click=\"${() => this.toggle()}\">\n        <pf-button id=\"default-toggle\" variant=\"control\">\n          Dropdown\n          <pf-icon icon=\"caret-down\" size=\"md\"></pf-icon>\n        </pf-button>\n      </slot>\n      <slot name=\"menu\"\n            ?hidden=\"${!this.expanded}\"\n            @focusout=\"${this.#onMenuFocusout}\"\n            @keydown=\"${this.#onMenuKeydown}\"\n            @click=\"${this.#onSelect}\">\n        <pf-dropdown-menu id=\"menu\" part=\"menu\" ?disabled=\"${disabled}\">\n          <slot></slot>\n        </pf-dropdown-menu>\n      </slot>\n    </div>`;\n  }\n\n  override firstUpdated() {\n    this.#onSlotchange();\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #validateDOM() {\n    const [toggle] = this._toggleElements;\n    const [menu] = this._menuElements;\n    if (!toggle) {\n      this.#logger.warn('no toggle found');\n      return false;\n    } else if (!menu) {\n      this.#logger.warn('no menu found');\n      return false;\n    } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x)).every((p, _, a) => p === a[0])) {\n      this.#logger.warn('toggle and menu must be located in the same root');\n      return false;\n    } else {\n      return true;\n    }\n  }\n\n  #onSlotchange() {\n    if (this.#validateDOM()) {\n      const [menu] = this._menuElements;\n      const [toggle] = this._toggleElements;\n      menu.id ||= getRandomId('menu');\n      toggle.setAttribute('aria-controls', menu.id);\n      toggle.setAttribute('aria-haspopup', menu.id);\n      toggle.setAttribute('aria-expanded', String(this.expanded) as 'true' | 'false');\n    }\n  }\n\n  async #expandedChanged() {\n    const will = this.expanded ? 'close' : 'open';\n    const [menu] = this._menuElements;\n    const [toggle] = this._toggleElements;\n    toggle.setAttribute('aria-expanded', `${String(this.expanded) as 'true' | 'false'}`);\n    this.dispatchEvent(new Event(will));\n    if (this.expanded) {\n      await this.#float.show();\n      if (menu instanceof PfDropdownMenu) {\n        menu.activeItem?.focus();\n      }\n    } else {\n      await this.#float.hide();\n    }\n  }\n\n  #disabledChanged() {\n    if (this.#validateDOM()) {\n      const [toggle] = this._toggleElements;\n      toggle.setAttribute('aria-disabled', String(!!this.disabled));\n    }\n  }\n\n  #onSelect(event: KeyboardEvent | Event & { target: PfDropdownItem }) {\n    const [menu] = this._menuElements;\n    if (menu instanceof PfDropdownMenu) {\n      const target = event.target as PfDropdownItem || menu.activeItem;\n      this.dispatchEvent(new PfDropdownSelectEvent(event, `${target?.value}`));\n      this.hide();\n    }\n  }\n\n  #onButtonKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        this.show();\n      }\n    }\n  }\n\n  #onMenuFocusout(event: FocusEvent) {\n    if (this.expanded) {\n      const root = this.getRootNode();\n      const [menu] = this._menuElements;\n      if (root instanceof ShadowRoot ||\n          root instanceof Document &&\n          event.relatedTarget instanceof PfDropdownItem &&\n          menu instanceof PfDropdownMenu &&\n          !menu.items.includes(event.relatedTarget)\n      ) {\n        this.hide();\n      }\n    }\n  }\n\n  #onMenuKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.#onSelect(event);\n        break;\n      case 'Escape':\n        this.hide();\n        this._toggleElements?.at(0)?.focus();\n    }\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show() {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  async hide() {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  async toggle() {\n    this.expanded = !this.expanded;\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown': PfDropdown;\n  }\n}\n"]}
+{"version":3,"file":"pf-dropdown.js","sourceRoot":"","sources":["pf-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\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 { provide } from '@lit/context';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { context, type PfDropdownContext } from './context.js';\nimport { PfDropdownItem } from './pf-dropdown-item.js';\nimport { PfDropdownMenu } from './pf-dropdown-menu.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-dropdown.css';\n\n\nexport class PfDropdownSelectEvent extends Event {\n  constructor(\n    public originalEvent: Event | KeyboardEvent,\n    public value: string\n  ) {\n    super('select', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that\n * will trigger a process or navigate to a new location.\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n * @slot toggle - Custom toggle button\n * @slot menu - when using a custom toggle, you must slot a `<pf-dropdown-menu>` in alongside it\n * @csspart menu - The dropdown menu wrapper\n * @cssprop {<length>} --pf-c-dropdown__menu--PaddingTop\n *          Dropdown top padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Dropdown right padding\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu--ZIndex\n *          Dropdown z-index\n *          {@default `200`}\n * @cssprop --pf-c-dropdown__menu--BoxShadow\n *          Dropdown box shadow\n *          {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop {<length>} --pf-c-dropdown__menu--Top\n *          Dropdown top\n *          {@default `100% + 0.25rem`}\n * @fires {PfDropdownSelectEvent} select - when a user select dropdown value\n * @fires open - when the dropdown toggles open\n * @fires close - when the dropdown toggles closed\n */\n@customElement('pf-dropdown')\nexport class PfDropdown extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n\n  /**\n   * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether the dropdown is expanded\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  @queryAssignedElements({ slot: 'toggle', flatten: true })\n  private _toggleElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'menu', flatten: true })\n  private _menuElements!: HTMLElement[];\n\n  @provide({ context }) private ctx: PfDropdownContext = { disabled: false };\n\n  #logger = new Logger(this);\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._menuElements?.at(0),\n  });\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const ps = await Promise.all([\n      super.getUpdateComplete(),\n      this._menuElements?.map(x => (x as LitElement).updateComplete),\n    ]);\n    return ps.every(x=>!!x);\n  }\n\n  willUpdate(changed: PropertyValues) {\n    if (changed.has('disabled')) {\n      const { disabled } = this;\n      this.ctx = { disabled };\n    }\n  }\n\n  render() {\n    const { expanded } = this;\n    const { anchor, alignment, styles = {} } = this.#float;\n    const { disabled } = this;\n    return html`\n    <div class=\"${classMap({ disabled,\n                             expanded,\n                             [anchor ?? '']: !!anchor,\n                             [alignment ?? '']: !!alignment })}\"\n         style=\"${styleMap(styles)}\"\n         @slotchange=\"${this.#onSlotchange}\">\n      <slot name=\"toggle\"\n            @keydown=\"${this.#onButtonKeydown}\"\n            @click=\"${() => this.toggle()}\">\n        <pf-button id=\"default-toggle\" variant=\"control\">\n          Dropdown\n          <pf-icon icon=\"caret-down\" size=\"md\"></pf-icon>\n        </pf-button>\n      </slot>\n      <slot name=\"menu\"\n            ?hidden=\"${!this.expanded}\"\n            @focusout=\"${this.#onMenuFocusout}\"\n            @keydown=\"${this.#onMenuKeydown}\"\n            @click=\"${this.#onSelect}\">\n        <pf-dropdown-menu id=\"menu\" part=\"menu\" ?disabled=\"${disabled}\">\n          <slot></slot>\n        </pf-dropdown-menu>\n      </slot>\n    </div>`;\n  }\n\n  override firstUpdated() {\n    this.#onSlotchange();\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #validateDOM() {\n    const [toggle] = this._toggleElements;\n    const [menu] = this._menuElements;\n    if (!toggle) {\n      this.#logger.warn('no toggle found');\n      return false;\n    } else if (!menu) {\n      this.#logger.warn('no menu found');\n      return false;\n    } else if (![toggle, menu].map(x => this.shadowRoot?.contains(x))\n        .every((p, _, a) => p === a[0])) {\n      this.#logger.warn('toggle and menu must be located in the same root');\n      return false;\n    } else {\n      return true;\n    }\n  }\n\n  #onSlotchange() {\n    if (this.#validateDOM()) {\n      const [menu] = this._menuElements;\n      const [toggle] = this._toggleElements;\n      menu.id ||= getRandomId('menu');\n      toggle.setAttribute('aria-controls', menu.id);\n      toggle.setAttribute('aria-haspopup', menu.id);\n      toggle.setAttribute('aria-expanded', String(this.expanded) as 'true' | 'false');\n    }\n  }\n\n  async #expandedChanged() {\n    const will = this.expanded ? 'close' : 'open';\n    const [menu] = this._menuElements;\n    const [toggle] = this._toggleElements;\n    toggle.setAttribute('aria-expanded', `${String(this.expanded) as 'true' | 'false'}`);\n    this.dispatchEvent(new Event(will));\n    if (this.expanded) {\n      await this.#float.show();\n      if (menu instanceof PfDropdownMenu) {\n        menu.activeItem?.focus();\n      }\n    } else {\n      await this.#float.hide();\n    }\n  }\n\n  #disabledChanged() {\n    if (this.#validateDOM()) {\n      const [toggle] = this._toggleElements;\n      toggle.setAttribute('aria-disabled', String(!!this.disabled));\n    }\n  }\n\n  #onSelect(event: KeyboardEvent | Event & { target: PfDropdownItem }) {\n    const [menu] = this._menuElements;\n    if (menu instanceof PfDropdownMenu) {\n      const target = event.target as PfDropdownItem || menu.activeItem;\n      this.dispatchEvent(new PfDropdownSelectEvent(event, `${target?.value}`));\n      this.hide();\n    }\n  }\n\n  #onButtonKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        this.show();\n      }\n    }\n  }\n\n  #onMenuFocusout(event: FocusEvent) {\n    if (this.expanded) {\n      const root = this.getRootNode();\n      const [menu] = this._menuElements;\n      if (root instanceof ShadowRoot\n          || root instanceof Document\n          && event.relatedTarget instanceof PfDropdownItem\n          && menu instanceof PfDropdownMenu\n          && !menu.items.includes(event.relatedTarget)\n      ) {\n        this.hide();\n      }\n    }\n  }\n\n  #onMenuKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.#onSelect(event);\n        break;\n      case 'Escape':\n        this.hide();\n        this._toggleElements?.at(0)?.focus();\n    }\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show() {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  async hide() {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  async toggle() {\n    this.expanded = !this.expanded;\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown': PfDropdown;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-dropdown.e2e.js","sourceRoot":"","sources":["pf-dropdown.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,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-dropdown';\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-dropdown/test/pf-dropdown.spec.d.ts

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

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

@@ -0,0 +1,129 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { sendKeys, resetMouse } from '@web/test-runner-commands';
+import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+import { PfDropdown } from '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+describe('<pf-dropdown>', function () {
+    let element;
+    const updateComplete = () => element.updateComplete;
+    describe('simply instantiating', function () {
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-dropdown')).to.be.an.instanceof(PfDropdown);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(html `<pf-dropdown></pf-dropdown>`);
+            const klass = customElements.get('pf-dropdown');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfDropdown);
+        });
+    });
+    describe('with default toggle button', function () {
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-dropdown>
+          <pf-dropdown-item>item 1</pf-dropdown-item>
+          <pf-dropdown-item>item 2</pf-dropdown-item>
+        </pf-dropdown>
+      `);
+        });
+        it('should be accessible', async function () {
+            await expect(element).to.be.accessible({
+                ignoredRules: [
+                    /** @see https://github.com/dequelabs/axe-core/issues/4259 */
+                    'aria-allowed-attr',
+                    /** false positive: the menuitem is projected into a menu in another shadow root */
+                    'aria-required-parent',
+                ],
+            });
+        });
+        it('should hide dropdown content from assistive technology', async function () {
+            const snapshot = await a11ySnapshot();
+            const menu = snapshot.children?.find(x => x.role === 'menu');
+            expect(menu).to.not.be.ok;
+        });
+        describe('pressing Enter', function () {
+            beforeEach(press('Tab'));
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('should show menu', async function () {
+                const snapshot = await a11ySnapshot();
+                const menu = snapshot?.children?.find(x => x.role === 'menu');
+                expect(menu).to.be.ok;
+                expect(menu?.children?.length).to.equal(2);
+            });
+            it('should focus on first menu item', async function () {
+                const snapshot = await a11ySnapshot();
+                const menu = snapshot?.children?.find(x => x.role === 'menu');
+                const focused = menu?.children?.find(x => x.focused);
+                expect(focused).to.deep.equal({ role: 'menuitem', name: 'item 1', focused: true });
+            });
+            describe('pressing ArrowDown', function () {
+                beforeEach(async function () {
+                    await sendKeys({ press: 'ArrowDown' });
+                    await element.updateComplete;
+                });
+                it('should focus on secondc menu item', async function () {
+                    const snapshot = await a11ySnapshot();
+                    const menu = snapshot?.children?.find(x => x.role === 'menu');
+                    const focused = menu?.children?.find(x => x.focused);
+                    expect(focused).to.deep.equal({ role: 'menuitem', name: 'item 2', focused: true });
+                });
+                describe('pressing Escape', function () {
+                    beforeEach(async function () {
+                        await sendKeys({ press: 'Escape' });
+                    });
+                    it('should close menu', async function () {
+                        const snapshot = await a11ySnapshot();
+                        const menu = snapshot?.children?.find(x => x.role === 'menu');
+                        expect(snapshot.children?.length).to.equal(1);
+                        expect(menu).to.not.be.ok;
+                    });
+                });
+            });
+        });
+        describe('disabled', function () {
+            beforeEach(async function () {
+                element.disabled = true;
+                await element.updateComplete;
+            });
+            it('should disable toggle button', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.length).to.equal(1);
+                expect(snapshot.children?.at(0)?.disabled).to.be.true;
+            });
+            describe('pressing Enter', function () {
+                beforeEach(async function () {
+                    await sendKeys({ press: 'Tab' });
+                    await sendKeys({ press: 'Enter' });
+                });
+                it('should show menu', async function () {
+                    const snapshot = await a11ySnapshot();
+                    const menu = snapshot?.children?.find(x => x.role === 'menu');
+                    expect(menu).to.be.ok;
+                    expect(menu?.children?.length).to.equal(2);
+                });
+            });
+            describe('clicking toggle', function () {
+                beforeEach(async function () {
+                    await clickElementAtCenter(element);
+                    await resetMouse();
+                });
+                it('should show menu', async function () {
+                    const snapshot = await a11ySnapshot();
+                    const menu = snapshot?.children?.find(x => x.role === 'menu');
+                    expect(menu).to.be.ok;
+                    expect(menu?.children?.length).to.equal(2);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-dropdown.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-dropdown.spec.js","sourceRoot":"","sources":["pf-dropdown.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { sendKeys, resetMouse } from '@web/test-runner-commands';\nimport { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';\nimport { PfDropdown } from '@patternfly/elements/pf-dropdown/pf-dropdown.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-dropdown>', function() {\n  let element: PfDropdown;\n\n  const updateComplete = () => element.updateComplete;\n\n  describe('simply instantiating', function() {\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-dropdown')).to.be.an.instanceof(PfDropdown);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfDropdown>(html`<pf-dropdown></pf-dropdown>`);\n      const klass = customElements.get('pf-dropdown');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfDropdown);\n    });\n  });\n\n  describe('with default toggle button', function() {\n    beforeEach(async function() {\n      element = await createFixture<PfDropdown>(html`\n        <pf-dropdown>\n          <pf-dropdown-item>item 1</pf-dropdown-item>\n          <pf-dropdown-item>item 2</pf-dropdown-item>\n        </pf-dropdown>\n      `);\n    });\n\n    it('should be accessible', async function() {\n      await expect(element).to.be.accessible({\n        ignoredRules: [\n          /** @see https://github.com/dequelabs/axe-core/issues/4259 */\n          'aria-allowed-attr',\n          /** false positive: the menuitem is projected into a menu in another shadow root */\n          'aria-required-parent',\n        ],\n      });\n    });\n\n    it('should hide dropdown content from assistive technology', async function() {\n      const snapshot = await a11ySnapshot();\n      const menu = snapshot.children?.find(x => x.role === 'menu');\n      expect(menu).to.not.be.ok;\n    });\n\n    describe('pressing Enter', function() {\n      beforeEach(press('Tab'));\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n\n      it('should show menu', async function() {\n        const snapshot = await a11ySnapshot();\n        const menu = snapshot?.children?.find(x => x.role === 'menu');\n        expect(menu).to.be.ok;\n        expect(menu?.children?.length).to.equal(2);\n      });\n\n      it('should focus on first menu item', async function() {\n        const snapshot = await a11ySnapshot();\n        const menu = snapshot?.children?.find(x => x.role === 'menu');\n        const focused = menu?.children?.find(x => x.focused);\n        expect(focused).to.deep.equal({ role: 'menuitem', name: 'item 1', focused: true });\n      });\n\n      describe('pressing ArrowDown', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'ArrowDown' });\n          await element.updateComplete;\n        });\n\n        it('should focus on secondc menu item', async function() {\n          const snapshot = await a11ySnapshot();\n          const menu = snapshot?.children?.find(x => x.role === 'menu');\n          const focused = menu?.children?.find(x => x.focused);\n          expect(focused).to.deep.equal({ role: 'menuitem', name: 'item 2', focused: true });\n        });\n\n        describe('pressing Escape', function() {\n          beforeEach(async function() {\n            await sendKeys({ press: 'Escape' });\n          });\n\n          it('should close menu', async function() {\n            const snapshot = await a11ySnapshot();\n            const menu = snapshot?.children?.find(x => x.role === 'menu');\n            expect(snapshot.children?.length).to.equal(1);\n            expect(menu).to.not.be.ok;\n          });\n        });\n      });\n    });\n\n    describe('disabled', function() {\n      beforeEach(async function() {\n        element.disabled = true;\n        await element.updateComplete;\n      });\n\n      it('should disable toggle button', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.length).to.equal(1);\n        expect(snapshot.children?.at(0)?.disabled).to.be.true;\n      });\n\n      describe('pressing Enter', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await sendKeys({ press: 'Enter' });\n        });\n\n        it('should show menu', async function() {\n          const snapshot = await a11ySnapshot();\n          const menu = snapshot?.children?.find(x => x.role === 'menu');\n          expect(menu).to.be.ok;\n          expect(menu?.children?.length).to.equal(2);\n        });\n      });\n\n      describe('clicking toggle', function() {\n        beforeEach(async function() {\n          await clickElementAtCenter(element);\n          await resetMouse();\n        });\n\n        it('should show menu', async function() {\n          const snapshot = await a11ySnapshot();\n          const menu = snapshot?.children?.find(x => x.role === 'menu');\n          expect(menu).to.be.ok;\n          expect(menu?.children?.length).to.equal(2);\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-icon/BaseIcon.d.ts

@@ -3,7 +3,6 @@ import { LitElement } from 'lit';
 export type URLGetter = (set: string, icon: string) => URL | string;
 /**
  * Icon component lazy-loads icons and allows custom icon sets
- *
  * @slot - Slotted content is used as a fallback in case the icon doesn't load
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
@@ -37,6 +36,6 @@ export declare abstract class BaseIcon extends LitElement {
     connectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     protected load(): Promise<void>;
 }

package/pf-icon/BaseIcon.js

@@ -19,7 +19,6 @@ class IconLoadError extends ErrorEvent {
 }
 /**
  * Icon component lazy-loads icons and allows custom icon sets
- *
  * @slot - Slotted content is used as a fallback in case the icon doesn't load
  * @fires load - Fired when an icon is loaded and rendered
  * @fires error - Fired when an icon fails to load
@@ -68,16 +67,16 @@ export class BaseIcon extends LitElement {
         __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).instances.delete(this);
     }
     render() {
-        const content = this.content ?? ''; /* eslint-disable indent */
+        const content = this.content ?? '';
         return html `
       <div id="container" aria-hidden="true">${content}<span part="fallback" ?hidden=${!!content}>
           <slot></slot>
         </span>
       </div>
-    `; /* eslint-enable indent */
+    `;
     }
     async load() {
-        const { set, icon, } = this;
+        const { set, icon } = this;
         const getter = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getters.get(set) ?? __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getIconUrl;
         let spec = 'UNKNOWN ICON';
         if (set && icon) {

package/pf-icon/BaseIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    `@patternfly/icons/${set}/${icon}.js`;\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? ''; /* eslint-disable indent */\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n       }<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;/* eslint-enable indent */\n  }\n\n  protected async load() {\n    const { set, icon, } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL | string;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    `@patternfly/icons/${set}/${icon}.js`;\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? '';\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n}<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  protected async load() {\n    const { set, icon } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let spec = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        const gotten = getter(set, icon);\n        if (gotten instanceof URL) {\n          spec = gotten.pathname;\n        } else {\n          spec = gotten;\n        }\n        const mod = await import(spec);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(spec, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}

package/pf-icon/demo/icons/rh/boba-tea.js

@@ -0,0 +1,5 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="M13 14.62h10c.35 0 .62-.28.62-.62s-.28-.62-.62-.62H13c-.35 0-.62.28-.62.62s.28.62.62.62Z"/>
+  <path d="M28 8.38h-2.25l.69-3.25c.04-.18 0-.38-.13-.52s-.3-.23-.49-.23h-3a.63.63 0 0 0-.61.5l-.74 3.5H8c-.35 0-.62.28-.62.62s.28.62.62.62h.38V13c0 .17.07.33.18.44l.86.86 2.97 16.81c.05.3.31.52.62.52h10c.3 0 .56-.22.62-.52L26.6 14.3l.86-.86a.62.62 0 0 0 .18-.44V9.62h.38c.35 0 .62-.28.62-.62s-.28-.62-.62-.62Zm-4.66-2.75h1.72l-.58 2.75h-1.72l.58-2.75Zm3.04 7.12-.82.82c-.09.09-.15.21-.17.33l-2.91 16.48h-8.96L10.61 13.9a.585.585 0 0 0-.17-.33l-.82-.82V9.63h16.76v3.12Z"/>
+  <path d="M16 25.38a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm4-4a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm-4-5a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Z"/>
+</svg>`;export default t.content.cloneNode(true);

package/pf-icon/demo/icons/rh/lifecycle.js

@@ -0,0 +1,3 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="m25.32 10.66-2.88-.13a.63.63 0 0 0-.06 1.25l4.2.19a.59.59 0 0 0 .42-.17.62.62 0 0 0 .2-.43l.19-4.2a.63.63 0 0 0-1.25 0l-.11 2.5A11.61 11.61 0 0 0 14.24 7a3.12 3.12 0 0 0-5.86 1.5c.11 4.3 6.52 4 6.22-.27a10.3 10.3 0 0 1 10.72 2.43Zm-12.49-.83a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Zm-.33 14.55a3.05 3.05 0 0 0-2 .74A10.25 10.25 0 0 1 8 15.17l1.3 2.59a.62.62 0 0 0 1.11-.56l-1.85-3.76a.63.63 0 0 0-.84-.28L4 15a.63.63 0 0 0 .56 1.12L6.76 15a11.55 11.55 0 0 0 3 11.08 3.12 3.12 0 1 0 2.79-1.74Zm1.33 4.45a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66ZM31.62 17a3.12 3.12 0 1 0-3.48 3.09A10.34 10.34 0 0 1 20 28.18l1.73-2.32a.63.63 0 0 0-1-.75l-2.5 3.38a.63.63 0 0 0-.12.46.6.6 0 0 0 .25.41l3.37 2.51a.63.63 0 0 0 .75-1l-2-1.49a11.6 11.6 0 0 0 9-9.4A3.09 3.09 0 0 0 31.62 17Zm-1.79 1.33a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Z"/>
+</svg>`;export default t.content.cloneNode(true);

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-icon.e2e.js","sourceRoot":"","sources":["pf-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,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-icon';\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-icon/test/pf-icon.spec.d.ts

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

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

@@ -0,0 +1,130 @@
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html, render } from 'lit';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+describe('<pf-icon>', function () {
+    let element;
+    async function expectIconsEqual(actualIconUrl) {
+        await oneEvent(element, 'load', false);
+        const tpl = await import(actualIconUrl.pathname).then(x => x.default);
+        const rootNode = render(tpl, document.createDocumentFragment());
+        const actual = element.shadowRoot?.querySelector('svg');
+        const expected = rootNode.parentNode.querySelector('svg');
+        expect(actual?.outerHTML).to.equal(expected?.outerHTML);
+    }
+    beforeEach(async function () {
+        // @ts-expect-error: this is necessary to reset test state
+        PfIcon.getters = new Map();
+        PfIcon.io.disconnect();
+        element = await fixture(html `<pf-icon></pf-icon>`);
+    });
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);
+    });
+    it('should upgrade', function () {
+        expect(element, 'pf-icon should be an instance of PfIcon')
+            .to.be.an.instanceOf(customElements.get('pf-icon'))
+            .and
+            .to.be.an.instanceOf(PfIcon);
+    });
+    it('should warn if the 2nd argument to addIconSet is not a function', function () {
+        // @ts-expect-error: 3rd input is a string
+        PfIcon.addIconSet('test', './', 'rh-icon-aed.svg');
+        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon.addIconSet(setName, getter)]: getter must be a function`);
+    });
+    it('should warn if there is no function provided to resolve the icon names', function () {
+        // @ts-expect-error: testing bad input
+        PfIcon.addIconSet('test', './');
+        expect(Logger.warn).to.have.been.calledOnceWith('[PfIcon.addIconSet(setName, getter)]: getter must be a function');
+    });
+    describe('with a custom icon set', function () {
+        const testIcons = ['aed', 'api', 'atom', 'bike'];
+        function getter(_, icon) {
+            return new URL(`./rh-icon-${icon}.js`, import.meta.url);
+        }
+        beforeEach(async function () {
+            // replace the default built-in icon set resolveIconName function
+            // with one that loads local icons.  we don't want tests dependent on
+            // prod servers.
+            PfIcon.addIconSet('rh', getter);
+            element.set = 'rh';
+        });
+        for (const iconName of testIcons) {
+            it('loads icons', async function () {
+                // wait for each test icon to be loaded, then move to the next one
+                element.icon = iconName;
+                await expectIconsEqual(getter('rh', iconName));
+            });
+        }
+        it('should hide the fallback when it successfully upgrades', async function () {
+            element.innerHTML = `<p>Icon failed to load.</p>`;
+            // Check that the fallback is hidden when the icon is successfully loaded
+            element.icon = 'bike';
+            await oneEvent(element, 'load', false);
+            expect(element).shadowDom.to.equal(`
+      <div id="container" aria-hidden="true">
+        <span part="fallback" hidden>
+          <slot></slot>
+        </span>
+      </div>`);
+        });
+        it('should change color when pf-icon\'s color CSS property is changed', async function () {
+            const newColor = 'rgb(11, 12, 13)';
+            element.style.setProperty('color', newColor);
+            element.icon = 'atom';
+            await oneEvent(element, 'load', false);
+            const color = getComputedStyle(element.shadowRoot.querySelector('svg')).getPropertyValue('color');
+            expect(color).to.equal(newColor);
+        });
+    });
+    describe('changing size attribute', function () {
+        const sizes = ['sm', 'md', 'lg', 'xl'];
+        let lastSize = { width: 0, height: 0 };
+        for (const size of sizes) {
+            it('should change size based on the attribute value', async function () {
+                element.size = size;
+                await element.updateComplete;
+                const { width, height } = element.getBoundingClientRect();
+                expect(width, `size "${size}" should be wider than the size below`).to.be.greaterThan(lastSize.width);
+                expect(height, `size "${size}" should be taller than the size below`).to.be.greaterThan(lastSize.height);
+                lastSize = { width, height };
+            });
+        }
+    });
+    it(`should fetch an icon even when the icon set is registered after the element upgrades`, async function () {
+        const url = new URL('./rh-icon-bike.js', import.meta.url);
+        element.set = 'asdfasdf';
+        element.icon = 'foo';
+        await element.updateComplete;
+        PfIcon.addIconSet('asdfasdf', () => url);
+        await oneEvent(element, 'load', false);
+        await expectIconsEqual(url);
+    });
+    it(`should show fallback when given a valid icon set but invalid icon name, fallback provided`, async function () {
+        element.innerHTML = '<p>Image failed to load.</p>.';
+        element.icon = 'no-scrubs';
+        await oneEvent(element, 'error', false);
+        expect(element.shadowRoot.querySelector('svg')).to.not.be.ok;
+        expect(element).shadowDom.to.equal(`
+      <div id="container" aria-hidden="true">
+        <span part="fallback">
+          <slot></slot>
+        </span>
+      </div>`);
+    });
+    it('should show fallback when given an invalid icon set, fallback provided', async function () {
+        element.innerHTML = '<p>Image failed to load.</p>.';
+        element.set = 'choopee-doopee-pie';
+        element.icon = 'bike';
+        await oneEvent(element, 'error', false);
+        expect(element.shadowRoot.querySelector('svg')).to.not.be.ok;
+        expect(element).shadowDom.to.equal(`
+      <div id="container" aria-hidden="true">
+        <span part="fallback">
+          <slot></slot>
+        </span>
+      </div>`);
+    });
+});
+//# sourceMappingURL=pf-icon.spec.js.map