@patternfly/elements 3.0.2 → 4.0.1

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

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import { PfChip } from './pf-chip.js';
 export declare class PfChipGroupExpandEvent extends Event {
     constructor();
 }
@@ -11,19 +12,27 @@ export declare class PfChipGroupRemoveEvent extends Event {
  * @fires remove - Fires when chip group is closed/removed
  * @slot category-name
  *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied
- * @slot
- *      Should be <Chip> elements.
+ * @slot - `<pf-chip>` elements.
+ * @cssprop [--pf-c-chip-group__list--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
+ * @cssprop [--pf-c-chip-group__list--MarginRight=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
+ * @cssprop [--pf-c-chip-group--m-category--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip-group--m-category--PaddingRight=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip-group--m-category--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip-group--m-category--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-chip-group--m-category--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]
+ * @cssprop [--pf-c-chip-group--m-category--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
+ * @cssprop [--pf-c-chip-group__label--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-chip-group__label--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
+ * @cssprop [--pf-c-chip-group__label--MaxWidth=18ch]
+ * @cssprop [--pf-c-chip-group__close--MarginTop=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
+ * @cssprop [--pf-c-chip-group__close--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
+ * @cssprop [--pf-c-chip-group__list-item--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip-group__list-item--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]
  */
 export declare class PfChipGroup extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * Accessible label for chip group that does not have a category name
      */
@@ -55,9 +64,6 @@ export declare class PfChipGroup extends LitElement {
     private _overflowChip?;
     private _button?;
     private _categorySlotted?;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changed: PropertyValues<this>): void;
     /**
      * active chip that receives focus when group receives focus
      */
@@ -68,10 +74,17 @@ export declare class PfChipGroup extends LitElement {
      */
     get hasCategory(): boolean;
     get remaining(): number;
+    constructor();
+    render(): TemplateResult<1>;
+    /**
+     * updates chips when they change
+     */
+    private chipsChanged;
     /**
      * Activates the specified chip and sets focus on it
+     * @param chip pf-chip element
      */
-    focusOnChip(chip: HTMLElement): void;
+    focusOnChip(chip: PfChip): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,15 +1,16 @@
-var _PfChipGroup_instances, _PfChipGroup_chips, _PfChipGroup_buttons, _PfChipGroup_tabindex, _PfChipGroup_handleChipsChanged, _PfChipGroup_onChipRemoved, _PfChipGroup_onCloseClick, _PfChipGroup_onMoreClick, _PfChipGroup_onSlotchange, _PfChipGroup_updateChips, _PfChipGroup_updateOverflow;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+var _PfChipGroup_instances, _PfChipGroup_chips_get, _PfChipGroup_tabindex, _PfChipGroup_onCloseClick, _PfChipGroup_onMoreClick, _PfChipGroup_onSlotchange, _PfChipGroup_onRemove, _PfChipGroup_updateOverflow;
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 import { PfChip, PfChipRemoveEvent } from './pf-chip.js';
 import { css } from "lit";
-const styles = css `:host {\n  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-chip-group__label--MaxWidth: 18ch;\n  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--pf-global--Color--100, #151515);\n}\n\n[hidden],\n.empty,\n::slotted([overflow-hidden]) {\n  display: none !important;\n}\n\n#outer {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: baseline;\n  min-width: 0;\n  display: inline-flex;\n  column-gap: var(--pf-global--spacer--xs, 0.25rem);\n  align-items: center;\n  border-radius: var(--pf-global--BorderRadius--sm, 3px);\n  padding: 0 !important;\n}\n\n#outer.has-category {\n  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem) !important;\n  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0);\n}\n\n#chips {\n  margin-right: var(--pf-c-chip-group__list--MarginRight);\n  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--sm, 14px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  line-height: 1.6;\n}\n\n#chips ::slotted(pf-chip) {\n  display: inline-flex;\n  min-width: 0;\n  margin-right: var(--pf-c-chip-group__list-item--MarginRight);\n  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);\n}\n\n#close-button {\n  --pf-icon--size: 16px;\n  margin: var(--pf-c-chip__c-button--MarginTop)\n    var(--pf-c-chip__c-button--MarginRight)\n    var(--pf-c-chip__c-button--MarginBottom)\n    var(--pf-c-chip__c-button--MarginLeft);\n  padding: var(--pf-c-chip__c-button--PaddingTop)\n    var(--pf-c-chip__c-button--PaddingRight)\n    var(--pf-c-chip__c-button--PaddingBottom)\n    var(--pf-c-chip__c-button--PaddingLeft);\n  inset-block-start: 0.125em;\n}\n\nsvg {\n  width: var(--pf-global--FontSize--sm, 14px);\n  height: var(--pf-global--FontSize--sm, 14px);\n}\n\n.offscreen {\n  position: absolute;\n  left: -99999;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n}\n\n`;
+const styles = css `:host {\n  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-chip-group__label--MaxWidth: 18ch;\n  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);\n  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--pf-global--Color--100, #151515);\n}\n\n[hidden],\n.empty,\n::slotted([overflow-hidden]) {\n  display: none !important;\n}\n\n#outer {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: baseline;\n  min-width: 0;\n  display: inline-flex;\n  column-gap: var(--pf-global--spacer--xs, 0.25rem);\n  align-items: center;\n  border-radius: var(--pf-global--BorderRadius--sm, 3px);\n  padding: 0 !important;\n}\n\n#outer.has-category {\n  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem) !important;\n  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0);\n}\n\n#chips {\n  margin-right: var(--pf-c-chip-group__list--MarginRight);\n  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--sm, 14px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  line-height: 1.6;\n}\n\n#chips ::slotted(pf-chip) {\n  display: inline-flex;\n  min-width: 0;\n  margin-right: var(--pf-c-chip-group__list-item--MarginRight);\n  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);\n}\n\n#close-button {\n  --pf-icon--size: 16px;\n  margin: var(--pf-c-chip__c-button--MarginTop)\n    var(--pf-c-chip__c-button--MarginRight)\n    var(--pf-c-chip__c-button--MarginBottom)\n    var(--pf-c-chip__c-button--MarginLeft);\n  padding: var(--pf-c-chip__c-button--PaddingTop)\n    var(--pf-c-chip__c-button--PaddingRight)\n    var(--pf-c-chip__c-button--PaddingBottom)\n    var(--pf-c-chip__c-button--PaddingLeft);\n  inset-block-start: 0.125em;\n}\n\nsvg {\n  width: var(--pf-global--FontSize--sm, 14px);\n  height: var(--pf-global--FontSize--sm, 14px);\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  block-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n`;
 import shared from "./pf-chip-shared.css.js";
 export class PfChipGroupExpandEvent extends Event {
     constructor() {
@@ -29,16 +30,30 @@ export class PfChipGroupRemoveEvent extends Event {
  * `}`
  */
 const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
-/**
- * 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.
- * @fires expand - Fires when chip group is expanded to show all chips
- * @fires remove - Fires when chip group is closed/removed
- * @slot category-name
- *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied
- * @slot
- *      Should be <Chip> elements.
- */
 let PfChipGroup = class PfChipGroup extends LitElement {
+    /**
+     * active chip that receives focus when group receives focus
+     */
+    get activeChip() {
+        const button = __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").items.at(__classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").atFocusedItemIndex);
+        const shadow = button?.getRootNode();
+        return shadow?.host;
+    }
+    set activeChip(chip) {
+        const button = chip.shadowRoot?.querySelector('button');
+        if (button) {
+            __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").atFocusedItemIndex = __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").items.indexOf(button);
+        }
+    }
+    /**
+     * whether or not group has a category
+     */
+    get hasCategory() {
+        return (this._categorySlotted || []).length > 0;
+    }
+    get remaining() {
+        return __classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get).length - this.numChips;
+    }
     constructor() {
         super();
         _PfChipGroup_instances.add(this);
@@ -70,15 +85,18 @@ let PfChipGroup = class PfChipGroup extends LitElement {
          * Flag if chip group can be closed
          */
         this.closeable = false;
-        _PfChipGroup_chips.set(this, []);
-        _PfChipGroup_buttons.set(this, []);
-        _PfChipGroup_tabindex.set(this, new RovingTabindexController(this, {
-            getItems: () => __classPrivateFieldGet(this, _PfChipGroup_buttons, "f").filter(x => !x.hidden),
+        _PfChipGroup_tabindex.set(this, RovingTabindexController.of(this, {
+            getItems: () => [
+                ...Array.prototype.slice.call(__classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get), 0, this.open ? __classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get).length
+                    : Math.min(__classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get).length, this.numChips)),
+                this._overflowChip,
+                this._button,
+            ].filter(x => !!x),
         }));
-        this.addEventListener('remove', __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onChipRemoved));
+        this.addEventListener('remove', __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onRemove));
     }
     render() {
-        const empty = __classPrivateFieldGet(this, _PfChipGroup_chips, "f").length <= 0;
+        const empty = __classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get).length <= 0;
         return html `
       <div id="outer"
            class="${classMap({ 'has-category': this.hasCategory, empty })}"
@@ -86,13 +104,10 @@ let PfChipGroup = class PfChipGroup extends LitElement {
         <slot id="category"
               name="category-name"
               @slotchange="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onSlotchange)}">
-          <span class="offscreen"
+          <span class="visually-hidden"
                 ?hidden="${!this.accessibleLabel}">${this.accessibleLabel ?? ''}</span>
         </slot>
-        <slot id="chips"
-              @slotchange="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onSlotchange)}"
-              @remove="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateChips)}"
-        ></slot>
+        <slot id="chips" @slotchange="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onSlotchange)}"></slot>
         <pf-chip id="overflow"
                  aria-controls="chips"
                  overflow-chip
@@ -112,110 +127,59 @@ let PfChipGroup = class PfChipGroup extends LitElement {
       </div>
     `;
     }
-    updated(changed) {
-        if (changed.has('accessibleCloseLabel')
-            || changed.has('numChips')
-            || changed.has('closeable')
-            || changed.has('open')) {
-            __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_handleChipsChanged).call(this);
-        }
-    }
     /**
-     * active chip that receives focus when group receives focus
+     * updates chips when they change
      */
-    get activeChip() {
-        const button = __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").activeItem;
-        const shadow = button?.getRootNode();
-        return shadow?.host;
-    }
-    set activeChip(chip) {
-        const button = chip.shadowRoot?.querySelector('button');
-        __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").setActiveItem(button);
-    }
-    /**
-     * whether or not group has a category
-     */
-    get hasCategory() {
-        return (this._categorySlotted || []).length > 0;
-    }
-    get remaining() {
-        return __classPrivateFieldGet(this, _PfChipGroup_chips, "f").length - this.numChips;
+    chipsChanged() {
+        __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateOverflow).call(this);
     }
     /**
      * Activates the specified chip and sets focus on it
+     * @param chip pf-chip element
      */
     focusOnChip(chip) {
-        __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").setActiveItem(chip);
+        __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").atFocusedItemIndex = __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").items.indexOf(chip);
     }
 };
-_PfChipGroup_chips = new WeakMap();
-_PfChipGroup_buttons = new WeakMap();
 _PfChipGroup_tabindex = new WeakMap();
 _PfChipGroup_instances = new WeakSet();
-_PfChipGroup_handleChipsChanged = function _PfChipGroup_handleChipsChanged() {
-    if (__classPrivateFieldGet(this, _PfChipGroup_chips, "f").length > 0) {
-        const oldButtons = [...(__classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").items || [])];
-        const max = this.open ? __classPrivateFieldGet(this, _PfChipGroup_chips, "f").length : Math.min(__classPrivateFieldGet(this, _PfChipGroup_chips, "f").length, this.numChips);
-        __classPrivateFieldSet(this, _PfChipGroup_buttons, [
-            ...__classPrivateFieldGet(this, _PfChipGroup_chips, "f").slice(0, max),
-            this._overflowChip,
-            this._button,
-        ].filter((x) => !!x), "f");
-        if (oldButtons.length !== __classPrivateFieldGet(this, _PfChipGroup_buttons, "f").length
-            || !oldButtons.every((element, index) => element === __classPrivateFieldGet(this, _PfChipGroup_buttons, "f")[index])) {
-            __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").updateItems();
-        }
-        __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateOverflow).call(this);
-    }
-};
-_PfChipGroup_onChipRemoved = 
-/**
- * handles a chip's `chip-remove` event
- */
-async function _PfChipGroup_onChipRemoved(event) {
-    if (event instanceof PfChipRemoveEvent) {
-        await __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateChips).call(this);
-        await this.updateComplete;
-        __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").setActiveItem(__classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").activeItem);
-    }
+_PfChipGroup_chips_get = function _PfChipGroup_chips_get() {
+    return this.querySelectorAll('pf-chip:not([slot]):not([overflow-chip])');
 };
 _PfChipGroup_onCloseClick = function _PfChipGroup_onCloseClick() {
     this.dispatchEvent(new PfChipGroupRemoveEvent());
-    this.remove();
 };
 _PfChipGroup_onMoreClick = 
 /**
  * handles overflow chip's click event
+ * @param event click event
  */
 async function _PfChipGroup_onMoreClick(event) {
     event.stopPropagation();
     this.open = !this.open;
     await this.updateComplete;
-    __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_handleChipsChanged).call(this);
+    this.chipsChanged();
     if (this._overflowChip) {
         this.focusOnChip(this._overflowChip);
     }
     this.dispatchEvent(new PfChipGroupExpandEvent());
 };
 _PfChipGroup_onSlotchange = function _PfChipGroup_onSlotchange() {
-    __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateChips).call(this);
     this.requestUpdate();
 };
-_PfChipGroup_updateChips = 
-/**
- * updates which chips variable
- */
-async function _PfChipGroup_updateChips() {
-    await this.updateComplete;
-    __classPrivateFieldSet(this, _PfChipGroup_chips, [...this.querySelectorAll('pf-chip:not([slot]):not([overflow-chip])')], "f");
-    this.requestUpdate();
-    await this.updateComplete;
-    __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").updateItems(__classPrivateFieldGet(this, _PfChipGroup_chips, "f"));
-    __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_handleChipsChanged).call(this);
-    return __classPrivateFieldGet(this, _PfChipGroup_chips, "f");
+_PfChipGroup_onRemove = function _PfChipGroup_onRemove(event) {
+    if (event instanceof PfChipRemoveEvent) {
+        const index = __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").atFocusedItemIndex;
+        if (event.chip) {
+            __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").atFocusedItemIndex = index + 1;
+        }
+    }
+    else if (event instanceof PfChipGroupRemoveEvent) {
+        this.remove();
+    }
 };
 _PfChipGroup_updateOverflow = function _PfChipGroup_updateOverflow() {
-    __classPrivateFieldGet(this, _PfChipGroup_chips, "f").forEach((chip, i) => {
+    __classPrivateFieldGet(this, _PfChipGroup_instances, "a", _PfChipGroup_chips_get).forEach((chip, i) => {
         chip.accessibleCloseLabel = this.accessibleCloseLabel;
         const overflowHidden = i >= this.numChips && !this.open;
         chip.hidden = overflowHidden;
@@ -226,6 +190,7 @@ PfChipGroup.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfChipGroup.version = "4.0.1";
 __decorate([
     property({ attribute: 'accessible-label', type: String })
 ], PfChipGroup.prototype, "accessibleLabel", void 0);
@@ -256,6 +221,12 @@ __decorate([
 __decorate([
     queryAssignedNodes({ slot: 'category-name', flatten: true })
 ], PfChipGroup.prototype, "_categorySlotted", void 0);
+__decorate([
+    observes('accessibleCloseLabel'),
+    observes('numChips'),
+    observes('closeable'),
+    observes('open')
+], PfChipGroup.prototype, "chipsChanged", null);
 PfChipGroup = __decorate([
     customElement('pf-chip-group')
 ], PfChipGroup);

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 * @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"]}
+{"version":3,"file":"pf-chip-group.js","sourceRoot":"","sources":["pf-chip-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } 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 { observes } from '@patternfly/pfe-core/decorators/observes.js';\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 - `<pf-chip>` elements.\n * @cssprop [--pf-c-chip-group__list--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__list--MarginRight=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip-group--m-category--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]\n * @cssprop [--pf-c-chip-group--m-category--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-chip-group__label--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip-group__label--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-chip-group__label--MaxWidth=18ch]\n * @cssprop [--pf-c-chip-group__close--MarginTop=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__close--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__list-item--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group__list-item--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]\n */\n@customElement('pf-chip-group')\nexport class PfChipGroup extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [shared, styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\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?: PfChip;\n\n  @query('#close-button') private _button?: HTMLButtonElement;\n\n  @queryAssignedNodes({ slot: 'category-name', flatten: true }) private _categorySlotted?: Node[];\n\n  get #chips(): NodeListOf<PfChip> {\n    return this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])');\n  }\n\n  #tabindex = RovingTabindexController.of(this, {\n    getItems: () => [\n      ...Array.prototype.slice.call(this.#chips, 0, this.open ? this.#chips.length\n                            : Math.min(this.#chips.length, this.numChips)),\n      this._overflowChip,\n      this._button,\n    ].filter(x => !!x),\n  });\n\n  /**\n   * active chip that receives focus when group receives focus\n   */\n  get activeChip() {\n    const button = this.#tabindex.items.at(this.#tabindex.atFocusedItemIndex);\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');\n    if (button) {\n      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(button);\n    }\n  }\n\n  /**\n   * whether or not group has a category\n   */\n  get hasCategory(): boolean {\n    return (this._categorySlotted || []).length > 0;\n  }\n\n  get remaining(): number {\n    return this.#chips.length - this.numChips;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('remove', this.#onRemove);\n  }\n\n  render(): TemplateResult<1> {\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=\"visually-hidden\"\n                ?hidden=\"${!this.accessibleLabel}\">${this.accessibleLabel ?? ''}</span>\n        </slot>\n        <slot id=\"chips\" @slotchange=\"${this.#onSlotchange}\"></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  /**\n   * updates chips when they change\n   */\n  @observes('accessibleCloseLabel')\n  @observes('numChips')\n  @observes('closeable')\n  @observes('open')\n  private chipsChanged(): void {\n    this.#updateOverflow();\n  }\n\n  /**\n   * handles chip group close\n   */\n  #onCloseClick() {\n    this.dispatchEvent(new PfChipGroupRemoveEvent());\n  }\n\n  /**\n   * handles overflow chip's click event\n   * @param event click event\n   */\n  async #onMoreClick(event: Event) {\n    event.stopPropagation();\n    this.open = !this.open;\n    await this.updateComplete;\n    this.chipsChanged();\n    if (this._overflowChip) {\n      this.focusOnChip(this._overflowChip);\n    }\n    this.dispatchEvent(new PfChipGroupExpandEvent());\n  }\n\n  #onSlotchange() {\n    this.requestUpdate();\n  }\n\n  #onRemove(event: Event) {\n    if (event instanceof PfChipRemoveEvent) {\n      const index = this.#tabindex.atFocusedItemIndex;\n      if (event.chip) {\n        this.#tabindex.atFocusedItemIndex = index + 1;\n      }\n    } else if (event instanceof PfChipGroupRemoveEvent) {\n      this.remove();\n    }\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   * @param chip pf-chip element\n   */\n  focusOnChip(chip: PfChip): void {\n    this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(chip);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-chip-group': PfChipGroup;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-button/pf-button.js';
 export declare class PfChipRemoveEvent extends Event {
     chip: PfChip;
@@ -11,17 +11,28 @@ export declare class PfChipRemoveEvent extends Event {
  * @slot
  *      chip text
  * @csspart text - container for chip text
+ * @cssprop [--pf-c-chip--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-chip--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-chip--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
+ * @cssprop [--pf-c-chip--BackgroundColor=var(--pf-global--Color--light-100, #fff)]
+ * @cssprop [--pf-c-chip--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]
+ * @cssprop [--pf-c-chip--before--BorderColor=var(--pf-global--BorderColor--300, #f0f0f0)]
+ * @cssprop [--pf-c-chip--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-chip--before--BorderRadius=var(--pf-c-chip--BorderRadius)]
+ * @cssprop [--pf-c-chip--m-overflow__text--Color=var(--pf-global--primary-color--100, #06c)]
+ * @cssprop [--pf-c-chip--m-draggable--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
+ * @cssprop [--pf-c-chip--m-draggable--BoxShadow=var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06))]
+ * @cssprop [--pf-c-chip--m-draggable__icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
+ * @cssprop [--pf-c-chip__text--FontSize=var(--pf-global--FontSize--xs, 0.75rem)]
+ * @cssprop [--pf-c-chip__text--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-chip__text--MaxWidth=16ch]
+ * @cssprop [--pf-c-chip__icon--MarginLeft=var(--pf-global--spacer--sm, 0.5rem)]
  */
 export declare class PfChip extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-        registry?: CustomElementRegistry | undefined;
-    };
+    static readonly shadowRootOptions: ShadowRootInit;
     /**
      * Accessible label for close button
      */
@@ -34,7 +45,7 @@ export declare class PfChip extends LitElement {
      * Flag indicating if chip is read-only and cannot be removed
      */
     overflowChip: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-chip/pf-chip.js

@@ -13,14 +13,6 @@ export class PfChipRemoveEvent extends Event {
         this.chip = chip;
     }
 }
-/**
- * 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 {
     constructor() {
         super(...arguments);
@@ -72,6 +64,7 @@ PfChip.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
+PfChip.version = "4.0.1";
 __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;;;;;;;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"]}
+{"version":3,"file":"pf-chip.js","sourceRoot":"","sources":["pf-chip.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,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;AA4BM,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;;IAE7F,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,GAAoB,CAAC,MAAM,EAAE,MAAM,CAAC,AAApC,CAAqC;AAElC,wBAAiB,GAAmB;IAC3D,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","sourcesContent":["import { LitElement, html, type TemplateResult } 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 * @cssprop [--pf-c-chip--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip--BackgroundColor=var(--pf-global--Color--light-100, #fff)]\n * @cssprop [--pf-c-chip--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]\n * @cssprop [--pf-c-chip--before--BorderColor=var(--pf-global--BorderColor--300, #f0f0f0)]\n * @cssprop [--pf-c-chip--before--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-chip--before--BorderRadius=var(--pf-c-chip--BorderRadius)]\n * @cssprop [--pf-c-chip--m-overflow__text--Color=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-chip--m-draggable--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-chip--m-draggable--BoxShadow=var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06))]\n * @cssprop [--pf-c-chip--m-draggable__icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]\n * @cssprop [--pf-c-chip__text--FontSize=var(--pf-global--FontSize--xs, 0.75rem)]\n * @cssprop [--pf-c-chip__text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-chip__text--MaxWidth=16ch]\n * @cssprop [--pf-c-chip__icon--MarginLeft=var(--pf-global--spacer--sm, 0.5rem)]\n */\n@customElement('pf-chip')\nexport class PfChip extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [shared, styles];\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\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(): TemplateResult<1> {\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.js

@@ -1,6 +1,6 @@
-import { expect, html } from '@open-wc/testing';
+import { expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { a11ySnapshot, querySnapshot, querySnapshotAll } 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';
@@ -24,7 +24,7 @@ describe('<pf-chip-group>', async function () {
                 .to.be.an.instanceOf(PfChipGroup);
         });
     });
-    describe('with 3 chips', function () {
+    describe('with 4 chips', function () {
         let element;
         const updateComplete = () => element.updateComplete;
         beforeEach(async function () {
@@ -37,27 +37,45 @@ describe('<pf-chip-group>', async function () {
         </pf-chip-group>
       `);
         });
-        it('only 3 chips and an overflow should be visible', async function () {
+        it('displays 3 chips and an overflow button', 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);
+            expect(querySnapshotAll(snapshot, { name: /^Chip/ })).to.have.length(3);
+            expect(querySnapshotAll(snapshot, { role: 'button' })).to.have.length(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 () {
+        describe('Tab', function () {
+            beforeEach(press('Tab'));
+            beforeEach(nextFrame);
+            it('focuses the first close button', async function () {
                 const snapshot = await a11ySnapshot();
-                expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(5);
+                const focused = querySnapshot(snapshot, { focused: true });
+                expect(focused).to.have.property('name', 'Close');
+                expect(focused).to.have.property('description', 'Chip 1');
             });
-            it('should focus collapse button', async function () {
-                const snapshot = await a11ySnapshot();
-                expect(snapshot.children?.find(x => x.focused)?.name).to.equal('show less');
+            describe('ArrowLeft', function () {
+                beforeEach(press('ArrowLeft'));
+                it('focuses the show less button', async function () {
+                    const snapshot = await a11ySnapshot();
+                    const focused = querySnapshot(snapshot, { focused: true });
+                    expect(focused).to.have.property('name', '1 more');
+                });
+                describe('Enter', function () {
+                    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();
+                        const buttons = querySnapshotAll(snapshot, { role: 'button' });
+                        expect(buttons).to.have.length(5);
+                    });
+                    it('should focus collapse button', async function () {
+                        const snapshot = await a11ySnapshot();
+                        expect(querySnapshot(snapshot, { focused: true }))
+                            .to.have.property('name', 'show less');
+                    });
+                });
             });
         });
     });
@@ -89,7 +107,7 @@ describe('<pf-chip-group>', async function () {
             beforeEach(updateComplete);
             it('should remove element', async function () {
                 const snapshot = await a11ySnapshot();
-                expect(snapshot.children).to.be.undefined;
+                expect(snapshot.children).to.not.be.ok;
             });
         });
     });
@@ -181,7 +199,9 @@ describe('<pf-chip-group>', async function () {
             });
             it('should focus on close button', async function () {
                 const snapshot = await a11ySnapshot();
-                expect(snapshot.children?.find(x => x.focused)?.name).to.equal('Close');
+                expect(querySnapshot(snapshot, { focused: true }))
+                    .to.be.ok
+                    .and.have.property('name', 'Close');
             });
         });
     });