@patternfly/elements 3.0.0 → 3.0.2

package/pf-chip/pf-chip-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-chip-group.js","sourceRoot":"","sources":["pf-chip-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfChip, PfChipRemoveEvent } from './pf-chip.js';\n\nimport styles from './pf-chip-group.css';\nimport shared from './pf-chip-shared.css';\n\nexport class PfChipGroupExpandEvent extends Event {\n  constructor() {\n    super('expand', { bubbles: true, cancelable: true });\n  }\n}\n\nexport class PfChipGroupRemoveEvent extends Event {\n  constructor() {\n    super('remove', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * `${`\n * **WS** (_>= 0x_)\n * `remaining`\n * **WS** (_>= 0x_)\n * `}`\n */\nconst REMAINING_RE = /\\$\\{\\s*remaining\\s*\\}/g;\n\n/**\n * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.\n *\n * @fires expand - Fires when chip group is expanded to show all chips\n * @fires remove - Fires when chip group is closed/removed\n *\n * @slot category-name\n *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied\n *\n * @slot\n *      Should be <Chip> elements.\n */\n@customElement('pf-chip-group')\nexport class PfChipGroup extends LitElement {\n  static readonly styles = [shared, styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Accessible label for chip group that does not have a category name\n   */\n  @property({ attribute: 'accessible-label', type: String }) accessibleLabel = '';\n\n  /**\n   * Accessible label for close button\n   */\n  @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';\n\n  /**\n   * Customizeable \"more\" template string. Use variable \"${remaining}\" for overflow chip count.\n   */\n  @property({ attribute: 'collapsed-text', type: String }) collapsedText = '${remaining} more';\n\n  /**\n   * Customizable \"show less\" text string.\n   */\n  @property({ attribute: 'expanded-text', type: String }) expandedText = 'show less';\n\n  /**\n   * Set number of chips to show before overflow\n   */\n  @property({ attribute: 'num-chips', type: Number }) numChips = 3;\n\n  /**\n   * Flag indicating if overflow chips are visible\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Flag if chip group can be closed\n   */\n  @property({ reflect: true, type: Boolean }) closeable = false;\n\n  @query('#overflow') private _overflowChip?: HTMLButtonElement;\n\n  @query('#close-button') private _button?: HTMLButtonElement;\n\n  @queryAssignedNodes({ slot: 'category-name', flatten: true }) private _categorySlotted?: Node[];\n\n  #chips: PfChip[] = [];\n\n  #buttons: HTMLElement[] = [];\n\n  #tabindex = new RovingTabindexController(this, {\n    getItems: () => this.#buttons.filter(x => !x.hidden),\n  });\n\n  constructor() {\n    super();\n    this.addEventListener('remove', this.#onChipRemoved);\n  }\n\n  render() {\n    const empty = this.#chips.length <= 0;\n    return html`\n      <div id=\"outer\"\n           class=\"${classMap({ 'has-category': this.hasCategory, empty })}\"\n           role=\"toolbar\">\n        <slot id=\"category\"\n              name=\"category-name\"\n              @slotchange=\"${this.#onSlotchange}\">\n          <span class=\"offscreen\"\n                ?hidden=\"${!this.accessibleLabel}\">${this.accessibleLabel ?? ''}</span>\n        </slot>\n        <slot id=\"chips\"\n              @slotchange=\"${this.#onSlotchange}\"\n              @remove=\"${this.#updateChips}\"\n        ></slot>\n        <pf-chip id=\"overflow\"\n                 aria-controls=\"chips\"\n                 overflow-chip\n                 ?hidden=\"${this.remaining < 1}\"\n                 @click=\"${this.#onMoreClick}\"\n        >${this.remaining < 1 ? ''\n         : this.open ? this.expandedText\n         : this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</pf-chip>\n        <pf-button id=\"close-button\"\n                   plain\n                   icon=\"times-circle\"\n                   icon-set=\"fas\"\n                   label=\"${this.accessibleCloseLabel}\"\n                   aria-describedby=\"category\"\n                   ?hidden=\"${!this.closeable}\"\n                   @click=\"${this.#onCloseClick}\"></pf-button>\n      </div>\n    `;\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('accessibleCloseLabel') ||\n        changed.has('numChips') ||\n        changed.has('closeable') ||\n        changed.has('open')) {\n      this.#handleChipsChanged();\n    }\n  }\n\n  /**\n   * active chip that receives focus when group receives focus\n   */\n  get activeChip() {\n    const button = this.#tabindex.activeItem as HTMLElement;\n    const shadow = button?.getRootNode() as ShadowRoot;\n    return shadow?.host as PfChip;\n  }\n\n  set activeChip(chip: HTMLElement) {\n    const button = chip.shadowRoot?.querySelector('button') as HTMLElement;\n    this.#tabindex.setActiveItem(button);\n  }\n\n  /**\n   * whether or not group has a category\n   */\n  get hasCategory() {\n    return (this._categorySlotted || []).length > 0;\n  }\n\n  get remaining() {\n    return this.#chips.length - this.numChips;\n  }\n\n  /**\n   * updates chips when they change\n   */\n  #handleChipsChanged() {\n    if (this.#chips.length > 0) {\n      const oldButtons = [...(this.#tabindex.items || [])];\n      const max = this.open ? this.#chips.length : Math.min(this.#chips.length, this.numChips);\n      this.#buttons = [\n        ...this.#chips.slice(0, max),\n        this._overflowChip,\n        this._button,\n      ].filter((x): x is PfChip => !!x);\n      if (oldButtons.length !== this.#buttons.length ||\n          !oldButtons.every((element, index) => element === this.#buttons[index])) {\n        this.#tabindex.updateItems();\n      }\n      this.#updateOverflow();\n    }\n  }\n\n  /**\n   * handles a chip's `chip-remove` event\n   */\n  async #onChipRemoved(event: Event) {\n    if (event instanceof PfChipRemoveEvent) {\n      await this.#updateChips();\n      await this.updateComplete;\n      this.#tabindex.setActiveItem(this.#tabindex.activeItem);\n    }\n  }\n\n  /**\n   * handles chip group close\n   */\n  #onCloseClick() {\n    this.dispatchEvent(new PfChipGroupRemoveEvent());\n    this.remove();\n  }\n\n  /**\n   * handles overflow chip's click event\n   */\n  async #onMoreClick(event: Event) {\n    event.stopPropagation();\n    this.open = !this.open;\n    await this.updateComplete;\n    this.#handleChipsChanged();\n    if (this._overflowChip) {\n      this.focusOnChip(this._overflowChip);\n    }\n    this.dispatchEvent(new PfChipGroupExpandEvent());\n  }\n\n  #onSlotchange() {\n    this.#updateChips();\n    this.requestUpdate();\n  }\n\n  /**\n   * updates which chips variable\n   */\n  async #updateChips() {\n    await this.updateComplete;\n    this.#chips = [...this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])')];\n    this.requestUpdate();\n    await this.updateComplete;\n    this.#tabindex.updateItems(this.#chips);\n    this.#handleChipsChanged();\n    return this.#chips;\n  }\n\n  /**\n   * updates which chips are hidden\n   */\n  #updateOverflow() {\n    this.#chips.forEach((chip, i) => {\n      chip.accessibleCloseLabel = this.accessibleCloseLabel;\n      const overflowHidden = i >= this.numChips && !this.open;\n      chip.hidden = overflowHidden;\n    });\n  }\n\n  /**\n   * Activates the specified chip and sets focus on it\n   */\n  focusOnChip(chip: HTMLElement) {\n    this.#tabindex.setActiveItem(chip);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-chip-group': PfChipGroup;\n  }\n}\n"]}
+{"version":3,"file":"pf-chip-group.js","sourceRoot":"","sources":["pf-chip-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfChip, PfChipRemoveEvent } from './pf-chip.js';\n\nimport styles from './pf-chip-group.css';\nimport shared from './pf-chip-shared.css';\n\nexport class PfChipGroupExpandEvent extends Event {\n  constructor() {\n    super('expand', { bubbles: true, cancelable: true });\n  }\n}\n\nexport class PfChipGroupRemoveEvent extends Event {\n  constructor() {\n    super('remove', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * `${`\n * **WS** (_>= 0x_)\n * `remaining`\n * **WS** (_>= 0x_)\n * `}`\n */\nconst REMAINING_RE = /\\$\\{\\s*remaining\\s*\\}/g;\n\n/**\n * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.\n * @fires expand - Fires when chip group is expanded to show all chips\n * @fires remove - Fires when chip group is closed/removed\n * @slot category-name\n *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied\n * @slot\n *      Should be <Chip> elements.\n */\n@customElement('pf-chip-group')\nexport class PfChipGroup extends LitElement {\n  static readonly styles = [shared, styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Accessible label for chip group that does not have a category name\n   */\n  @property({ attribute: 'accessible-label', type: String }) accessibleLabel = '';\n\n  /**\n   * Accessible label for close button\n   */\n  @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';\n\n  /**\n   * Customizeable \"more\" template string. Use variable \"${remaining}\" for overflow chip count.\n   */\n  @property({ attribute: 'collapsed-text', type: String }) collapsedText = '${remaining} more';\n\n  /**\n   * Customizable \"show less\" text string.\n   */\n  @property({ attribute: 'expanded-text', type: String }) expandedText = 'show less';\n\n  /**\n   * Set number of chips to show before overflow\n   */\n  @property({ attribute: 'num-chips', type: Number }) numChips = 3;\n\n  /**\n   * Flag indicating if overflow chips are visible\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Flag if chip group can be closed\n   */\n  @property({ reflect: true, type: Boolean }) closeable = false;\n\n  @query('#overflow') private _overflowChip?: HTMLButtonElement;\n\n  @query('#close-button') private _button?: HTMLButtonElement;\n\n  @queryAssignedNodes({ slot: 'category-name', flatten: true }) private _categorySlotted?: Node[];\n\n  #chips: PfChip[] = [];\n\n  #buttons: HTMLElement[] = [];\n\n  #tabindex = new RovingTabindexController(this, {\n    getItems: () => this.#buttons.filter(x => !x.hidden),\n  });\n\n  constructor() {\n    super();\n    this.addEventListener('remove', this.#onChipRemoved);\n  }\n\n  render() {\n    const empty = this.#chips.length <= 0;\n    return html`\n      <div id=\"outer\"\n           class=\"${classMap({ 'has-category': this.hasCategory, empty })}\"\n           role=\"toolbar\">\n        <slot id=\"category\"\n              name=\"category-name\"\n              @slotchange=\"${this.#onSlotchange}\">\n          <span class=\"offscreen\"\n                ?hidden=\"${!this.accessibleLabel}\">${this.accessibleLabel ?? ''}</span>\n        </slot>\n        <slot id=\"chips\"\n              @slotchange=\"${this.#onSlotchange}\"\n              @remove=\"${this.#updateChips}\"\n        ></slot>\n        <pf-chip id=\"overflow\"\n                 aria-controls=\"chips\"\n                 overflow-chip\n                 ?hidden=\"${this.remaining < 1}\"\n                 @click=\"${this.#onMoreClick}\"\n        >${this.remaining < 1 ? ''\n         : this.open ? this.expandedText\n         : this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</pf-chip>\n        <pf-button id=\"close-button\"\n                   plain\n                   icon=\"times-circle\"\n                   icon-set=\"fas\"\n                   label=\"${this.accessibleCloseLabel}\"\n                   aria-describedby=\"category\"\n                   ?hidden=\"${!this.closeable}\"\n                   @click=\"${this.#onCloseClick}\"></pf-button>\n      </div>\n    `;\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('accessibleCloseLabel')\n        || changed.has('numChips')\n        || changed.has('closeable')\n        || changed.has('open')) {\n      this.#handleChipsChanged();\n    }\n  }\n\n  /**\n   * active chip that receives focus when group receives focus\n   */\n  get activeChip() {\n    const button = this.#tabindex.activeItem as HTMLElement;\n    const shadow = button?.getRootNode() as ShadowRoot;\n    return shadow?.host as PfChip;\n  }\n\n  set activeChip(chip: HTMLElement) {\n    const button = chip.shadowRoot?.querySelector('button') as HTMLElement;\n    this.#tabindex.setActiveItem(button);\n  }\n\n  /**\n   * whether or not group has a category\n   */\n  get hasCategory() {\n    return (this._categorySlotted || []).length > 0;\n  }\n\n  get remaining() {\n    return this.#chips.length - this.numChips;\n  }\n\n  /**\n   * updates chips when they change\n   */\n  #handleChipsChanged() {\n    if (this.#chips.length > 0) {\n      const oldButtons = [...(this.#tabindex.items || [])];\n      const max = this.open ? this.#chips.length : Math.min(this.#chips.length, this.numChips);\n      this.#buttons = [\n        ...this.#chips.slice(0, max),\n        this._overflowChip,\n        this._button,\n      ].filter((x): x is PfChip => !!x);\n      if (oldButtons.length !== this.#buttons.length\n          || !oldButtons.every((element, index) => element === this.#buttons[index])) {\n        this.#tabindex.updateItems();\n      }\n      this.#updateOverflow();\n    }\n  }\n\n  /**\n   * handles a chip's `chip-remove` event\n   */\n  async #onChipRemoved(event: Event) {\n    if (event instanceof PfChipRemoveEvent) {\n      await this.#updateChips();\n      await this.updateComplete;\n      this.#tabindex.setActiveItem(this.#tabindex.activeItem);\n    }\n  }\n\n  /**\n   * handles chip group close\n   */\n  #onCloseClick() {\n    this.dispatchEvent(new PfChipGroupRemoveEvent());\n    this.remove();\n  }\n\n  /**\n   * handles overflow chip's click event\n   */\n  async #onMoreClick(event: Event) {\n    event.stopPropagation();\n    this.open = !this.open;\n    await this.updateComplete;\n    this.#handleChipsChanged();\n    if (this._overflowChip) {\n      this.focusOnChip(this._overflowChip);\n    }\n    this.dispatchEvent(new PfChipGroupExpandEvent());\n  }\n\n  #onSlotchange() {\n    this.#updateChips();\n    this.requestUpdate();\n  }\n\n  /**\n   * updates which chips variable\n   */\n  async #updateChips() {\n    await this.updateComplete;\n    this.#chips = [...this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])')];\n    this.requestUpdate();\n    await this.updateComplete;\n    this.#tabindex.updateItems(this.#chips);\n    this.#handleChipsChanged();\n    return this.#chips;\n  }\n\n  /**\n   * updates which chips are hidden\n   */\n  #updateOverflow() {\n    this.#chips.forEach((chip, i) => {\n      chip.accessibleCloseLabel = this.accessibleCloseLabel;\n      const overflowHidden = i >= this.numChips && !this.open;\n      chip.hidden = overflowHidden;\n    });\n  }\n\n  /**\n   * Activates the specified chip and sets focus on it\n   */\n  focusOnChip(chip: HTMLElement) {\n    this.#tabindex.setActiveItem(chip);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-chip-group': PfChipGroup;\n  }\n}\n"]}

package/pf-chip/pf-chip.d.ts

@@ -6,19 +6,22 @@ export declare class PfChipRemoveEvent extends Event {
 }
 /**
  * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
- *
  * @fires {ChipRemoveEvent} remove - Fires when chip is removed
  * @fires {Event} click - when close button is clicked
- *
  * @slot
  *      chip text
- *
  * @csspart text - container for chip text
  */
 export declare class PfChip 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;
+    };
     /**
      * Accessible label for close button
      */
@@ -31,7 +34,7 @@ export declare class PfChip extends LitElement {
      * Flag indicating if chip is read-only and cannot be removed
      */
     overflowChip: boolean;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-chip/pf-chip.js

@@ -15,13 +15,10 @@ export class PfChipRemoveEvent extends Event {
 }
 /**
  * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
- *
  * @fires {ChipRemoveEvent} remove - Fires when chip is removed
  * @fires {Event} click - when close button is clicked
- *
  * @slot
  *      chip text
- *
  * @csspart text - container for chip text
  */
 let PfChip = class PfChip extends LitElement {
@@ -71,7 +68,10 @@ _PfChip_onClick = function _PfChip_onClick() {
     }
 };
 PfChip.styles = [shared, styles];
-PfChip.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+PfChip.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ attribute: 'accessible-close-label', type: String })
 ], PfChip.prototype, "accessibleCloseLabel", void 0);

package/pf-chip/pf-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-chip.js","sourceRoot":"","sources":["pf-chip.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;AAEtD,OAAO,6CAA6C,CAAC;;;OAG9C,MAAM;AAEb,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,IAAY;QAC7B,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADlB,SAAI,GAAJ,IAAI,CAAQ;IAE/B,CAAC;CACF;AAED;;;;;;;;;;GAUG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;;QAKL;;WAEG;QAC8D,yBAAoB,GAAG,OAAO,CAAC;QAEhG;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACqE,iBAAY,GAAG,KAAK,CAAC;IA8B/F,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;KAM9B,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQa,IAAI,CAAC,oBAAoB;;2BAEvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;0BACnC,uBAAA,IAAI,0CAAS;;KAElC,CAAC;IACJ,CAAC;;;;IAGC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;AACH,CAAC;AA9Ce,aAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEjB,wBAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAKtD;IAAhE,QAAQ,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAgC;AAKpD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAKW;IAAvE,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAsB;AAlBlF,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgDlB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-chip.css';\nimport shared from './pf-chip-shared.css';\n\nexport class PfChipRemoveEvent extends Event {\n  constructor(public chip: PfChip) {\n    super('remove', { bubbles: true });\n  }\n}\n\n/**\n * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.\n *\n * @fires {ChipRemoveEvent} remove - Fires when chip is removed\n * @fires {Event} click - when close button is clicked\n *\n * @slot\n *      chip text\n *\n * @csspart text - container for chip text\n */\n@customElement('pf-chip')\nexport class PfChip extends LitElement {\n  static readonly styles = [shared, styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Accessible label for close button\n   */\n  @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';\n\n  /**\n   * Flag indicating if chip is read-only and cannot be removed\n   */\n  @property({ reflect: true, type: Boolean }) readonly = false;\n\n  /**\n   * Flag indicating if chip is read-only and cannot be removed\n   */\n  @property({ attribute: 'overflow-chip', reflect: true, type: Boolean }) overflowChip = false;\n\n  render() {\n    return this.overflowChip ? html`\n      <button id=\"outer\">\n        <span part=\"text\">\n          <slot></slot>\n        </span>\n      </button>\n    ` : html`\n      <div id=\"outer\">\n        <span id=\"chip-text\" part=\"text\">\n          <slot></slot>\n        </span>\n        <pf-button id=\"close-button\"\n                plain\n                icon=\"close\" icon-set=\"patternfly\"\n                label=\"${this.accessibleCloseLabel}\"\n                aria-describedby=\"chip-text\"\n                ?hidden=\"${this.readonly || this.overflowChip}\"\n                @click=\"${this.#onClick}\"></pf-button>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (this.dispatchEvent(new PfChipRemoveEvent(this))) {\n      this.remove();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-chip': PfChip;\n  }\n}\n"]}
+{"version":3,"file":"pf-chip.js","sourceRoot":"","sources":["pf-chip.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;AAEtD,OAAO,6CAA6C,CAAC;;;OAG9C,MAAM;AAEb,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,IAAY;QAC7B,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADlB,SAAI,GAAJ,IAAI,CAAQ;IAE/B,CAAC;CACF;AAED;;;;;;;GAOG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;;QAQL;;WAEG;QAC8D,yBAAoB,GAAG,OAAO,CAAC;QAEhG;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACqE,iBAAY,GAAG,KAAK,CAAC;IA8B/F,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;KAM9B,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQa,IAAI,CAAC,oBAAoB;;2BAEvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;0BACnC,uBAAA,IAAI,0CAAS;;KAElC,CAAC;IACJ,CAAC;;;;IAGC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;AACH,CAAC;AAjDe,aAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEjB,wBAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAK+D;IAAhE,QAAQ,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAgC;AAKpD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAKW;IAAvE,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAsB;AArBlF,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAmDlB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-chip.css';\nimport shared from './pf-chip-shared.css';\n\nexport class PfChipRemoveEvent extends Event {\n  constructor(public chip: PfChip) {\n    super('remove', { bubbles: true });\n  }\n}\n\n/**\n * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.\n * @fires {ChipRemoveEvent} remove - Fires when chip is removed\n * @fires {Event} click - when close button is clicked\n * @slot\n *      chip text\n * @csspart text - container for chip text\n */\n@customElement('pf-chip')\nexport class PfChip extends LitElement {\n  static readonly styles = [shared, styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Accessible label for close button\n   */\n  @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';\n\n  /**\n   * Flag indicating if chip is read-only and cannot be removed\n   */\n  @property({ reflect: true, type: Boolean }) readonly = false;\n\n  /**\n   * Flag indicating if chip is read-only and cannot be removed\n   */\n  @property({ attribute: 'overflow-chip', reflect: true, type: Boolean }) overflowChip = false;\n\n  render() {\n    return this.overflowChip ? html`\n      <button id=\"outer\">\n        <span part=\"text\">\n          <slot></slot>\n        </span>\n      </button>\n    ` : html`\n      <div id=\"outer\">\n        <span id=\"chip-text\" part=\"text\">\n          <slot></slot>\n        </span>\n        <pf-button id=\"close-button\"\n                plain\n                icon=\"close\" icon-set=\"patternfly\"\n                label=\"${this.accessibleCloseLabel}\"\n                aria-describedby=\"chip-text\"\n                ?hidden=\"${this.readonly || this.overflowChip}\"\n                @click=\"${this.#onClick}\"></pf-button>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    if (this.dispatchEvent(new PfChipRemoveEvent(this))) {\n      this.remove();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-chip': PfChip;\n  }\n}\n"]}

package/pf-chip/test/pf-chip-group.spec.d.ts

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

package/pf-chip/test/pf-chip-group.spec.js

@@ -0,0 +1,189 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfChipGroup } from '../pf-chip-group.js';
+import { PfChip } from '../pf-chip.js';
+import { sendKeys } from '@web/test-runner-commands';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+describe('<pf-chip-group>', async function () {
+    let element;
+    describe('simply instantiating', function () {
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-chip-group')).to.be.an.instanceof(PfChipGroup);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(html `<pf-chip-group></pf-chip-group>`);
+            const klass = customElements.get('pf-chip-group');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfChipGroup);
+        });
+    });
+    describe('with 3 chips', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip-group>
+          <pf-chip>Chip 1</pf-chip>
+          <pf-chip>Chip 2</pf-chip>
+          <pf-chip>Chip 3</pf-chip>
+          <pf-chip>Chip 4</pf-chip>
+        </pf-chip-group>
+      `);
+        });
+        it('only 3 chips and an overflow should be visible', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(3);
+            expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(4);
+        });
+        describe('clicking overflow chip', function () {
+            beforeEach(() => element.focus());
+            beforeEach(press('ArrowLeft'));
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('should show all chips', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
+            });
+            it('should show collapse button', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(5);
+            });
+            it('should focus collapse button', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.find(x => x.focused)?.name).to.equal('show less');
+            });
+        });
+    });
+    describe('with 4 chips and `closeable` attribute', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip-group closeable>
+          <pf-chip>Chip 1</pf-chip>
+          <pf-chip>Chip 2</pf-chip>
+          <pf-chip>Chip 3</pf-chip>
+          <pf-chip>Chip 4</pf-chip>
+        </pf-chip-group>
+      `);
+        });
+        beforeEach(updateComplete);
+        it('should have close button', async function () {
+            const snapshot = await a11ySnapshot();
+            const last = snapshot.children?.at(-1);
+            expect(last?.name).to.equal('Close');
+            expect(last?.role).to.equal('button');
+            expect(last?.description).to.not.be.ok;
+        });
+        describe('clicking close button', function () {
+            beforeEach(() => element.focus());
+            beforeEach(press('ArrowLeft'));
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('should remove element', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children).to.be.undefined;
+            });
+        });
+    });
+    describe('with 4 chips and `collapsed-text`, `expanded-text`, and `label` attributes', async function () {
+        let chip1;
+        let chip2;
+        let element;
+        let snapshot;
+        const updateComplete = () => element.updateComplete;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip-group collapsed-text="show $\{remaining} more"
+                       expanded-text="show fewer"
+                       accessible-label="My Chip Group">
+          <pf-chip>Chip 1</pf-chip>
+          <pf-chip>Chip 2</pf-chip>
+          <pf-chip>Chip 3</pf-chip>
+          <pf-chip>Chip 4</pf-chip>
+        </pf-chip-group>
+      `);
+            [chip1, chip2] = document.querySelectorAll('pf-chip');
+            snapshot = await a11ySnapshot();
+        });
+        it('has accessible label', function () {
+            const [offscreen] = snapshot.children;
+            expect(offscreen?.name).to.equal('My Chip Group');
+        });
+        it('is accessible', async function () {
+            await expect(element).to.be.accessible();
+        });
+        describe('pressing `Tab`', function () {
+            beforeEach(press('Tab'));
+            beforeEach(updateComplete);
+            it('should focus', function () {
+                expect(document.activeElement).to.equal(chip1);
+            });
+        });
+        describe('pressing `ArrowRight`', function () {
+            beforeEach(() => chip1.focus());
+            beforeEach(press('ArrowRight'));
+            beforeEach(updateComplete);
+            it('should move to chip2', function () {
+                expect(document.activeElement).to.equal(chip2);
+            });
+        });
+    });
+    describe('with 4 chips and `num-chips="2"` attribute', function () {
+        beforeEach(async function () {
+            await createFixture(html `
+        <pf-chip-group num-chips="2">
+          <pf-chip>Chip 1</pf-chip>
+          <pf-chip>Chip 2</pf-chip>
+          <pf-chip>Chip 3</pf-chip>
+          <pf-chip>Chip 4</pf-chip>
+        </pf-chip-group>
+      `);
+        });
+        it('only 2 chips should be visible', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(2);
+        });
+    });
+    describe('with 4 chips and `num-chips="4"` attribute', function () {
+        let element;
+        const updateComplete = () => element.updateComplete;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip-group num-chips="4">
+          <pf-chip>Chip 1</pf-chip>
+          <pf-chip>Chip 2</pf-chip>
+          <pf-chip>Chip 3</pf-chip>
+          <pf-chip>Chip 4</pf-chip>
+        </pf-chip-group>
+      `);
+        });
+        it('all 4 chips should be visible', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
+        });
+        describe('keyboard navigating with arrow keys to third chip and pressing enter', function () {
+            beforeEach(press('Tab'));
+            beforeEach(press('ArrowRight'));
+            beforeEach(press('ArrowRight'));
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('should remove third chip', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.find(x => x.name === 'Chip 3')).to.not.be.ok;
+            });
+            it('should focus on close button', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.find(x => x.focused)?.name).to.equal('Close');
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-chip-group.spec.js.map

package/pf-chip/test/pf-chip-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-chip-group.spec.js","sourceRoot":"","sources":["pf-chip-group.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 { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { PfChipGroup } from '../pf-chip-group.js';\nimport { PfChip } from '../pf-chip.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-chip-group>', async function() {\n  let element: PfChipGroup;\n\n  describe('simply instantiating', function() {\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-chip-group')).to.be.an.instanceof(PfChipGroup);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfChipGroup>(html`<pf-chip-group></pf-chip-group>`);\n      const klass = customElements.get('pf-chip-group');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfChipGroup);\n    });\n  });\n\n  describe('with 3 chips', function() {\n    let element: PfChipGroup;\n    const updateComplete = () => element.updateComplete;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChipGroup>(html`\n        <pf-chip-group>\n          <pf-chip>Chip 1</pf-chip>\n          <pf-chip>Chip 2</pf-chip>\n          <pf-chip>Chip 3</pf-chip>\n          <pf-chip>Chip 4</pf-chip>\n        </pf-chip-group>\n      `);\n    });\n\n    it('only 3 chips and an overflow should be visible', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(3);\n      expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(4);\n    });\n\n    describe('clicking overflow chip', function() {\n      beforeEach(() => element.focus());\n      beforeEach(press('ArrowLeft'));\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n      it('should show all chips', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);\n      });\n      it('should show collapse button', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(5);\n      });\n      it('should focus collapse button', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.focused)?.name).to.equal('show less');\n      });\n    });\n  });\n\n  describe('with 4 chips and `closeable` attribute', function() {\n    let element: PfChipGroup;\n    const updateComplete = () => element.updateComplete;\n    beforeEach(async function() {\n      element = await createFixture<PfChipGroup>(html`\n        <pf-chip-group closeable>\n          <pf-chip>Chip 1</pf-chip>\n          <pf-chip>Chip 2</pf-chip>\n          <pf-chip>Chip 3</pf-chip>\n          <pf-chip>Chip 4</pf-chip>\n        </pf-chip-group>\n      `);\n    });\n\n    beforeEach(updateComplete);\n    it('should have close button', async function() {\n      const snapshot = await a11ySnapshot();\n      const last = snapshot.children?.at(-1);\n      expect(last?.name).to.equal('Close');\n      expect(last?.role).to.equal('button');\n      expect(last?.description).to.not.be.ok;\n    });\n\n    describe('clicking close button', function() {\n      beforeEach(() => element.focus());\n      beforeEach(press('ArrowLeft'));\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n      it('should remove element', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children).to.be.undefined;\n      });\n    });\n  });\n\n  describe('with 4 chips and `collapsed-text`, `expanded-text`, and `label` attributes', async function() {\n    let chip1: PfChip;\n    let chip2: PfChip;\n    let element: PfChipGroup;\n    let snapshot: A11yTreeSnapshot;\n    const updateComplete = () => element.updateComplete;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChipGroup>(html`\n        <pf-chip-group collapsed-text=\"show $\\{remaining} more\"\n                       expanded-text=\"show fewer\"\n                       accessible-label=\"My Chip Group\">\n          <pf-chip>Chip 1</pf-chip>\n          <pf-chip>Chip 2</pf-chip>\n          <pf-chip>Chip 3</pf-chip>\n          <pf-chip>Chip 4</pf-chip>\n        </pf-chip-group>\n      `);\n      [chip1, chip2] = document.querySelectorAll('pf-chip');\n      snapshot = await a11ySnapshot();\n    });\n\n    it('has accessible label', function() {\n      const [offscreen] = snapshot.children!;\n      expect(offscreen?.name).to.equal('My Chip Group');\n    });\n\n    it('is accessible', async function() {\n      await expect(element).to.be.accessible();\n    });\n\n    describe('pressing `Tab`', function() {\n      beforeEach(press('Tab'));\n      beforeEach(updateComplete);\n      it('should focus', function() {\n        expect(document.activeElement).to.equal(chip1);\n      });\n    });\n\n    describe('pressing `ArrowRight`', function() {\n      beforeEach(() => chip1.focus());\n      beforeEach(press('ArrowRight'));\n      beforeEach(updateComplete);\n      it('should move to chip2', function() {\n        expect(document.activeElement).to.equal(chip2);\n      });\n    });\n  });\n\n  describe('with 4 chips and `num-chips=\"2\"` attribute', function() {\n    beforeEach(async function() {\n      await createFixture<PfChipGroup>(html`\n        <pf-chip-group num-chips=\"2\">\n          <pf-chip>Chip 1</pf-chip>\n          <pf-chip>Chip 2</pf-chip>\n          <pf-chip>Chip 3</pf-chip>\n          <pf-chip>Chip 4</pf-chip>\n        </pf-chip-group>\n      `);\n    });\n    it('only 2 chips should be visible', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(2);\n    });\n  });\n\n  describe('with 4 chips and `num-chips=\"4\"` attribute', function() {\n    let element: PfChipGroup;\n    const updateComplete = () => element.updateComplete;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChipGroup>(html`\n        <pf-chip-group num-chips=\"4\">\n          <pf-chip>Chip 1</pf-chip>\n          <pf-chip>Chip 2</pf-chip>\n          <pf-chip>Chip 3</pf-chip>\n          <pf-chip>Chip 4</pf-chip>\n        </pf-chip-group>\n      `);\n    });\n\n    it('all 4 chips should be visible', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);\n    });\n\n    describe('keyboard navigating with arrow keys to third chip and pressing enter', function() {\n      beforeEach(press('Tab'));\n      beforeEach(press('ArrowRight'));\n      beforeEach(press('ArrowRight'));\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n\n      it('should remove third chip', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.name === 'Chip 3')).to.not.be.ok;\n      });\n\n      it('should focus on close button', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.focused)?.name).to.equal('Close');\n      });\n    });\n  });\n});\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-chip.e2e.js","sourceRoot":"","sources":["pf-chip.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-chip';\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-chip/test/pf-chip.spec.d.ts

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

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

@@ -0,0 +1,116 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfChip } from '../pf-chip.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+function activeElement(element) {
+    return element.shadowRoot?.activeElement;
+}
+describe('<pf-chip>', async function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-chip')).to.be.an.instanceof(PfChip);
+    });
+    it('should upgrade', async function () {
+        const klass = customElements.get('pf-chip');
+        expect(await createFixture(html `<pf-chip></pf-chip>`))
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfChip);
+    });
+    describe('simply instantiating', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip></pf-chip>
+      `);
+        });
+        it('should be accessible', async function () {
+            await expect(element).to.be.accessible();
+        });
+        describe('calling focus() on the element', function () {
+            beforeEach(() => element.focus());
+            it('should focus', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);
+                expect(snapshot.children?.at(0)?.focused).to.be.true;
+            });
+        });
+        describe('pressing Tab', function () {
+            beforeEach(press('Tab'));
+            it('should focus', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);
+                expect(snapshot.children?.at(0)?.focused).to.be.true;
+            });
+            describe('pressing Enter', async function () {
+                beforeEach(() => element.focus());
+                beforeEach(press('Enter'));
+                it('should close', function () {
+                    expect(document.querySelector('pf-chip')).to.be.null;
+                });
+            });
+        });
+    });
+    describe('with `overflow-chip` attribute', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip overflow-chip>Overflow</pf-chip>
+      `);
+        });
+        it('should be accessible', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('should not have a close button', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.name === 'Close')).to.not.be.ok;
+        });
+        describe('calling focus', function () {
+            beforeEach(() => element.focus());
+            it('should focus', function () {
+                expect(activeElement(element)).to.exist;
+            });
+        });
+        describe('pressing Tab', function () {
+            beforeEach(press('Tab'));
+            it('should focus', function () {
+                expect(activeElement(element)).to.exist;
+            });
+        });
+        describe('pressing Enter', function () {
+            beforeEach(() => element.focus());
+            beforeEach(press('Enter'));
+            it('should NOT close', function () {
+                expect(document.querySelector('pf-chip')).to.not.be.null;
+            });
+        });
+        describe('clicking element', function () {
+            beforeEach(() => clickElementAtCenter(element));
+            it('should NOT close', function () {
+                expect(document.querySelector('pf-chip')).to.not.be.null;
+            });
+        });
+    });
+    describe('readonly', async function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-chip readonly></pf-chip>
+      `);
+        });
+        it('should be accessible', async function () {
+            await expect(element).to.be.accessible();
+        });
+        it('should not have a button', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children).to.be.undefined;
+        });
+    });
+});
+//# sourceMappingURL=pf-chip.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-chip.spec.js","sourceRoot":"","sources":["pf-chip.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 { PfChip } from '../pf-chip.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';\n\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\nfunction activeElement(element: HTMLElement) {\n  return element.shadowRoot?.activeElement;\n}\n\ndescribe('<pf-chip>', async function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-chip')).to.be.an.instanceof(PfChip);\n  });\n\n  it('should upgrade', async function() {\n    const klass = customElements.get('pf-chip');\n    expect(await createFixture<PfChip>(html`<pf-chip></pf-chip>`))\n        .to.be.an.instanceOf(klass)\n        .and\n        .to.be.an.instanceOf(PfChip);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfChip;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChip>(html`\n        <pf-chip></pf-chip>\n      `);\n    });\n\n    it('should be accessible', async function() {\n      await expect(element).to.be.accessible();\n    });\n\n    describe('calling focus() on the element', function() {\n      beforeEach(() => element.focus());\n      it('should focus', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);\n        expect(snapshot.children?.at(0)?.focused).to.be.true;\n      });\n    });\n\n    describe('pressing Tab', function() {\n      beforeEach(press('Tab'));\n      it('should focus', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);\n        expect(snapshot.children?.at(0)?.focused).to.be.true;\n      });\n\n      describe('pressing Enter', async function() {\n        beforeEach(() => element.focus());\n        beforeEach(press('Enter'));\n        it('should close', function() {\n          expect(document.querySelector('pf-chip')).to.be.null;\n        });\n      });\n    });\n  });\n\n  describe('with `overflow-chip` attribute', function() {\n    let element: PfChip;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChip>(html`\n        <pf-chip overflow-chip>Overflow</pf-chip>\n      `);\n    });\n\n    it('should be accessible', async function() {\n      await expect(element).to.be.accessible();\n    });\n\n    it('should not have a close button', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.find(x => x.name === 'Close')).to.not.be.ok;\n    });\n\n    describe('calling focus', function() {\n      beforeEach(() => element.focus());\n      it('should focus', function() {\n        expect(activeElement(element)).to.exist;\n      });\n    });\n\n    describe('pressing Tab', function() {\n      beforeEach(press('Tab'));\n      it('should focus', function() {\n        expect(activeElement(element)).to.exist;\n      });\n    });\n\n    describe('pressing Enter', function() {\n      beforeEach(() => element.focus());\n      beforeEach(press('Enter'));\n      it('should NOT close', function() {\n        expect(document.querySelector('pf-chip')).to.not.be.null;\n      });\n    });\n\n    describe('clicking element', function() {\n      beforeEach(() => clickElementAtCenter(element));\n      it('should NOT close', function() {\n        expect(document.querySelector('pf-chip')).to.not.be.null;\n      });\n    });\n  });\n\n  describe('readonly', async function() {\n    let element: PfChip;\n\n    beforeEach(async function() {\n      element = await createFixture<PfChip>(html`\n        <pf-chip readonly></pf-chip>\n      `);\n    });\n\n    it('should be accessible', async function() {\n      await expect(element).to.be.accessible();\n    });\n\n    it('should not have a button', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children).to.be.undefined;\n    });\n  });\n});\n"]}

package/pf-clipboard-copy/pf-clipboard-copy.css

@@ -128,6 +128,10 @@ textarea {
   height: 100%;
 }
 
+#copy-button {
+  height: calc(100% - var(--pf-c-button--PaddingTop) - var(--pf-c-button--PaddingBottom));
+}
+
 .container:is(.compact, .inline) #input-group {
   display: contents;
 }

package/pf-clipboard-copy/pf-clipboard-copy.d.ts

@@ -4,14 +4,19 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
 /**
  * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
- *
  * @slot - Place content to copy here, or use the `value` attribute
  * @slot actions - Place additional action buttons here
  */
 export declare class PfClipboardCopy extends BaseClipboardCopy {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static shadowRootOptions: ShadowRootInit;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
     clickTip: string;
     hoverTip: string;
     textAriaLabel: string;
@@ -38,7 +43,7 @@ export declare class PfClipboardCopy extends BaseClipboardCopy {
      * This demonstrates the collapsed whitespace issue.
      * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.
      */
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     copy(): Promise<void>;
 }
 declare global {