@patternfly/elements 2.4.0 → 3.0.0

package/pf-chip/pf-chip-group.css

@@ -0,0 +1,91 @@
+:host {
+  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-chip-group__label--MaxWidth: 18ch;
+  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--pf-global--Color--100, #151515);
+}
+
+[hidden],
+.empty,
+::slotted([overflow-hidden]) {
+  display: none !important;
+}
+
+#outer {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: baseline;
+  min-width: 0;
+  display: inline-flex;
+  column-gap: var(--pf-global--spacer--xs, 0.25rem);
+  align-items: center;
+  border-radius: var(--pf-global--BorderRadius--sm, 3px);
+  padding: 0 !important;
+}
+
+#outer.has-category {
+  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0);
+}
+
+#chips {
+  margin-right: var(--pf-c-chip-group__list--MarginRight);
+  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--sm, 14px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  line-height: 1.6;
+}
+
+#chips ::slotted(pf-chip) {
+  display: inline-flex;
+  min-width: 0;
+  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
+  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
+}
+
+#close-button {
+  --pf-icon--size: 16px;
+  margin: var(--pf-c-chip__c-button--MarginTop)
+    var(--pf-c-chip__c-button--MarginRight)
+    var(--pf-c-chip__c-button--MarginBottom)
+    var(--pf-c-chip__c-button--MarginLeft);
+  padding: var(--pf-c-chip__c-button--PaddingTop)
+    var(--pf-c-chip__c-button--PaddingRight)
+    var(--pf-c-chip__c-button--PaddingBottom)
+    var(--pf-c-chip__c-button--PaddingLeft);
+  inset-block-start: 0.125em;
+}
+
+svg {
+  width: var(--pf-global--FontSize--sm, 14px);
+  height: var(--pf-global--FontSize--sm, 14px);
+}
+
+.offscreen {
+  position: absolute;
+  left: -99999;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+

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

@@ -0,0 +1,77 @@
+import { LitElement, type PropertyValues } from 'lit';
+export declare class PfChipGroupExpandEvent extends Event {
+    constructor();
+}
+export declare class PfChipGroupRemoveEvent extends Event {
+    constructor();
+}
+/**
+ * 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.
+ */
+export declare class PfChipGroup extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    static readonly shadowRootOptions: ShadowRootInit;
+    /**
+     * Accessible label for chip group that does not have a category name
+     */
+    accessibleLabel: string;
+    /**
+     * Accessible label for close button
+     */
+    accessibleCloseLabel: string;
+    /**
+     * Customizeable "more" template string. Use variable "${remaining}" for overflow chip count.
+     */
+    collapsedText: string;
+    /**
+     * Customizable "show less" text string.
+     */
+    expandedText: string;
+    /**
+     * Set number of chips to show before overflow
+     */
+    numChips: number;
+    /**
+     * Flag indicating if overflow chips are visible
+     */
+    open: boolean;
+    /**
+     * Flag if chip group can be closed
+     */
+    closeable: boolean;
+    private _overflowChip?;
+    private _button?;
+    private _categorySlotted?;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+    updated(changed: PropertyValues<this>): void;
+    /**
+     * active chip that receives focus when group receives focus
+     */
+    get activeChip(): HTMLElement;
+    set activeChip(chip: HTMLElement);
+    /**
+     * whether or not group has a category
+     */
+    get hasCategory(): boolean;
+    get remaining(): number;
+    /**
+     * Activates the specified chip and sets focus on it
+     */
+    focusOnChip(chip: HTMLElement): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-chip-group': PfChipGroup;
+    }
+}

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

@@ -0,0 +1,263 @@
+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";
+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 { 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`;
+import shared from "./pf-chip-shared.css.js";
+export class PfChipGroupExpandEvent extends Event {
+    constructor() {
+        super('expand', { bubbles: true, cancelable: true });
+    }
+}
+export class PfChipGroupRemoveEvent extends Event {
+    constructor() {
+        super('remove', { bubbles: true, cancelable: true });
+    }
+}
+/**
+ * `${`
+ * **WS** (_>= 0x_)
+ * `remaining`
+ * **WS** (_>= 0x_)
+ * `}`
+ */
+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 {
+    constructor() {
+        super();
+        _PfChipGroup_instances.add(this);
+        /**
+         * Accessible label for chip group that does not have a category name
+         */
+        this.accessibleLabel = '';
+        /**
+         * Accessible label for close button
+         */
+        this.accessibleCloseLabel = 'Close';
+        /**
+         * Customizeable "more" template string. Use variable "${remaining}" for overflow chip count.
+         */
+        this.collapsedText = '${remaining} more';
+        /**
+         * Customizable "show less" text string.
+         */
+        this.expandedText = 'show less';
+        /**
+         * Set number of chips to show before overflow
+         */
+        this.numChips = 3;
+        /**
+         * Flag indicating if overflow chips are visible
+         */
+        this.open = false;
+        /**
+         * 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),
+        }));
+        this.addEventListener('remove', __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onChipRemoved));
+    }
+    render() {
+        const empty = __classPrivateFieldGet(this, _PfChipGroup_chips, "f").length <= 0;
+        return html `
+      <div id="outer"
+           class="${classMap({ 'has-category': this.hasCategory, empty })}"
+           role="toolbar">
+        <slot id="category"
+              name="category-name"
+              @slotchange="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onSlotchange)}">
+          <span class="offscreen"
+                ?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>
+        <pf-chip id="overflow"
+                 aria-controls="chips"
+                 overflow-chip
+                 ?hidden="${this.remaining < 1}"
+                 @click="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onMoreClick)}"
+        >${this.remaining < 1 ? ''
+            : this.open ? this.expandedText
+                : this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</pf-chip>
+        <pf-button id="close-button"
+                   plain
+                   icon="times-circle"
+                   icon-set="fas"
+                   label="${this.accessibleCloseLabel}"
+                   aria-describedby="category"
+                   ?hidden="${!this.closeable}"
+                   @click="${__classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_onCloseClick)}"></pf-button>
+      </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
+     */
+    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;
+    }
+    /**
+     * Activates the specified chip and sets focus on it
+     */
+    focusOnChip(chip) {
+        __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").setActiveItem(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_onCloseClick = function _PfChipGroup_onCloseClick() {
+    this.dispatchEvent(new PfChipGroupRemoveEvent());
+    this.remove();
+};
+_PfChipGroup_onMoreClick = 
+/**
+ * handles overflow chip's 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);
+    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_updateOverflow = function _PfChipGroup_updateOverflow() {
+    __classPrivateFieldGet(this, _PfChipGroup_chips, "f").forEach((chip, i) => {
+        chip.accessibleCloseLabel = this.accessibleCloseLabel;
+        const overflowHidden = i >= this.numChips && !this.open;
+        chip.hidden = overflowHidden;
+    });
+};
+PfChipGroup.styles = [shared, styles];
+PfChipGroup.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+__decorate([
+    property({ attribute: 'accessible-label', type: String })
+], PfChipGroup.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: 'accessible-close-label', type: String })
+], PfChipGroup.prototype, "accessibleCloseLabel", void 0);
+__decorate([
+    property({ attribute: 'collapsed-text', type: String })
+], PfChipGroup.prototype, "collapsedText", void 0);
+__decorate([
+    property({ attribute: 'expanded-text', type: String })
+], PfChipGroup.prototype, "expandedText", void 0);
+__decorate([
+    property({ attribute: 'num-chips', type: Number })
+], PfChipGroup.prototype, "numChips", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfChipGroup.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfChipGroup.prototype, "closeable", void 0);
+__decorate([
+    query('#overflow')
+], PfChipGroup.prototype, "_overflowChip", void 0);
+__decorate([
+    query('#close-button')
+], PfChipGroup.prototype, "_button", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'category-name', flatten: true })
+], PfChipGroup.prototype, "_categorySlotted", void 0);
+PfChipGroup = __decorate([
+    customElement('pf-chip-group')
+], PfChipGroup);
+export { PfChipGroup };
+//# sourceMappingURL=pf-chip-group.js.map

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

@@ -0,0 +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"]}

package/pf-chip/pf-chip-shared.css

@@ -0,0 +1,11 @@
+:host {
+  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+}

package/pf-chip/pf-chip-shared.css.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+export default css`:host {
+  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+}
+`;

package/pf-chip/pf-chip.css

@@ -0,0 +1,100 @@
+:host {
+  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
+  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
+  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  --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));
+  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  --pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-chip__text--MaxWidth: 16ch;
+  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  color: var(--pf-global--Color--100, #151515);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  list-style: none;
+  background-color: var(--pf-c-chip--BackgroundColor);
+  border-radius: var(--pf-c-chip--BorderRadius);
+  padding:
+	  var(--pf-c-chip--PaddingTop)
+	  var(--pf-c-chip--PaddingRight)
+	  var(--pf-c-chip--PaddingBottom)
+	  var(--pf-c-chip--PaddingLeft);
+}
+
+[hidden],
+:host([hidden]) {
+  display: none !important;
+}
+
+div#outer {
+  display: contents;
+}
+
+#outer:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
+  border-radius: var(--pf-c-chip--before--BorderRadius);
+}
+
+span {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  max-width: var(--pf-c-chip__text--MaxWidth);
+  font-size: var(--pf-c-chip__text--FontSize);
+  color: var(--pf-c-chip__text--Color);
+}
+
+:host([readonly]) span {
+  color: var(--pf-global--Color--200, #6a6e73);
+}
+
+/* OVERFLOW */
+
+button#outer {
+  display: flex;
+  background: none;
+  border: 1px solid transparent;
+}
+
+button#outer span {
+  color: var(--pf-c-chip--m-overflow__text--Color);
+}
+
+/* CLOSE */
+
+#close-button {
+  --pf-icon--size: 12px;
+  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
+  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
+  margin-top: var(--pf-c-chip__c-button--MarginTop);
+  margin-right: var(--pf-c-chip__c-button--MarginRight);
+  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
+  inset-block-start: 0.125em;
+}
+
+::slotted(pf-badge) {
+  font-size: var(--pf-global--FontSize--xs, 12px);
+  margin: 0 0 0 var(--pf-global--spacer--xs, 0.25rem) !important;
+  min-width: unset;
+}

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

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import '@patternfly/elements/pf-button/pf-button.js';
+export declare class PfChipRemoveEvent extends Event {
+    chip: PfChip;
+    constructor(chip: PfChip);
+}
+/**
+ * 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;
+    /**
+     * Accessible label for close button
+     */
+    accessibleCloseLabel: string;
+    /**
+     * Flag indicating if chip is read-only and cannot be removed
+     */
+    readonly: boolean;
+    /**
+     * Flag indicating if chip is read-only and cannot be removed
+     */
+    overflowChip: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-chip': PfChip;
+    }
+}