@patternfly/elements 4.1.0 → 4.3.0

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

@@ -10,7 +10,116 @@ 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.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`;
+const styles = css `:host {
+  /** MarginBottom for the chip group list */
+  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for the chip group list */
+  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** PaddingTop for the chip group category */
+  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingRight for the chip group category */
+  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingBottom for the chip group category */
+  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingLeft for the chip group category */
+  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** BorderRadius for the chip group category */
+  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** BackgroundColor for the chip group category */
+  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** MarginRight for the chip group label */
+  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** FontSize for the chip group label */
+  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** MaxWidth for the chip group label */
+  --pf-c-chip-group__label--MaxWidth: 18ch;
+  /** MarginTop for the chip group close button */
+  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginBottom for the chip group close button */
+  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for chip group list items */
+  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** MarginBottom for chip group list items */
+  --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);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
+`;
 import shared from "./pf-chip-shared.css.js";
 export class PfChipGroupExpandEvent extends Event {
     constructor() {
@@ -190,7 +299,7 @@ PfChipGroup.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfChipGroup.version = "4.1.0";
+PfChipGroup.version = "4.3.0";
 __decorate([
     property({ attribute: 'accessible-label', type: String })
 ], PfChipGroup.prototype, "accessibleLabel", void 0);

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

@@ -1,20 +1,37 @@
 :host {
+  /** Top padding for chip */
   --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for chip */
   --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** Bottom padding for chip */
   --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for chip */
   --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Background color for chip */
   --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
+  /** Border radius for chip */
   --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** Border color for chip */
   --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Border width for chip */
   --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Border radius for chip border (references chip border radius) */
   --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
+  /** Text color for overflow chip */
   --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
+  /** Background color for draggable chip */
   --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** Box shadow for draggable chip */
   --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));
+  /** Font size for draggable chip icon */
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  /** Font size for chip text */
   --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  /** Color for chip text */
   --pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
+  /** Maximum width for chip text */
   --pf-c-chip__text--MaxWidth: 16ch;
+  /** Left margin for chip icon */
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
   color: var(--pf-global--Color--100, #151515);
   position: relative;
@@ -22,7 +39,9 @@
   align-items: center;
   min-width: 0;
   list-style: none;
+  /** Background color of chip */
   background-color: var(--pf-c-chip--BackgroundColor);
+  /** Border radius of chip */
   border-radius: var(--pf-c-chip--BorderRadius);
   padding:
 	  var(--pf-c-chip--PaddingTop)
@@ -47,7 +66,13 @@ div#outer {
   bottom: 0;
   left: 0;
   content: "";
-  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
+  border:
+    /** Border width */
+    var(--pf-c-chip--before--BorderWidth)
+    solid
+    /** Border color */
+    var(--pf-c-chip--before--BorderColor);
+  /** Border radius of chip border */
   border-radius: var(--pf-c-chip--before--BorderRadius);
 }
 
@@ -57,8 +82,11 @@ span {
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
+  /** Maximum width of chip text */
   max-width: var(--pf-c-chip__text--MaxWidth);
+  /** Font size of chip text */
   font-size: var(--pf-c-chip__text--FontSize);
+  /** Color of chip text */
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -75,6 +103,7 @@ button#outer {
 }
 
 button#outer span {
+  /** Color for overflow chip text */
   color: var(--pf-c-chip--m-overflow__text--Color);
 }
 

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

@@ -6,28 +6,9 @@ export declare class PfChipRemoveEvent extends Event {
 }
 /**
  * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
+ * @alias Chip
  * @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
- * @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;

package/pf-chip/pf-chip.js

@@ -5,7 +5,136 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
-const styles = css `:host {\n  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);\n  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);\n  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);\n  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);\n  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n  --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  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);\n  --pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-chip__text--MaxWidth: 16ch;\n  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n  color: var(--pf-global--Color--100, #151515);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  list-style: none;\n  background-color: var(--pf-c-chip--BackgroundColor);\n  border-radius: var(--pf-c-chip--BorderRadius);\n  padding:\n\t  var(--pf-c-chip--PaddingTop)\n\t  var(--pf-c-chip--PaddingRight)\n\t  var(--pf-c-chip--PaddingBottom)\n\t  var(--pf-c-chip--PaddingLeft);\n}\n\n[hidden],\n:host([hidden]) {\n  display: none !important;\n}\n\ndiv#outer {\n  display: contents;\n}\n\n#outer:before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);\n  border-radius: var(--pf-c-chip--before--BorderRadius);\n}\n\nspan {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n  max-width: var(--pf-c-chip__text--MaxWidth);\n  font-size: var(--pf-c-chip__text--FontSize);\n  color: var(--pf-c-chip__text--Color);\n}\n\n:host([readonly]) span {\n  color: var(--pf-global--Color--200, #6a6e73);\n}\n\n/* OVERFLOW */\n\nbutton#outer {\n  display: flex;\n  background: none;\n  border: 1px solid transparent;\n}\n\nbutton#outer span {\n  color: var(--pf-c-chip--m-overflow__text--Color);\n}\n\n/* CLOSE */\n\n#close-button {\n  --pf-icon--size: 12px;\n  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);\n  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);\n  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);\n  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);\n  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);\n  margin-top: var(--pf-c-chip__c-button--MarginTop);\n  margin-right: var(--pf-c-chip__c-button--MarginRight);\n  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);\n  inset-block-start: 0.125em;\n}\n\n::slotted(pf-badge) {\n  font-size: var(--pf-global--FontSize--xs, 12px);\n  margin: 0 0 0 var(--pf-global--spacer--xs, 0.25rem) !important;\n  min-width: unset;\n}\n`;
+const styles = css `:host {
+  /** Top padding for chip */
+  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for chip */
+  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** Bottom padding for chip */
+  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for chip */
+  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** Background color for chip */
+  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
+  /** Border radius for chip */
+  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** Border color for chip */
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  /** Border width for chip */
+  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+  /** Border radius for chip border (references chip border radius) */
+  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
+  /** Text color for overflow chip */
+  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
+  /** Background color for draggable chip */
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** Box shadow for draggable chip */
+  --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));
+  /** Font size for draggable chip icon */
+  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  /** Font size for chip text */
+  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+  /** Color for chip text */
+  --pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
+  /** Maximum width for chip text */
+  --pf-c-chip__text--MaxWidth: 16ch;
+  /** Left margin for chip icon */
+  --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 of chip */
+  background-color: var(--pf-c-chip--BackgroundColor);
+  /** Border radius of chip */
+  border-radius: var(--pf-c-chip--BorderRadius);
+  padding:
+\t  var(--pf-c-chip--PaddingTop)
+\t  var(--pf-c-chip--PaddingRight)
+\t  var(--pf-c-chip--PaddingBottom)
+\t  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:
+    /** Border width */
+    var(--pf-c-chip--before--BorderWidth)
+    solid
+    /** Border color */
+    var(--pf-c-chip--before--BorderColor);
+  /** Border radius of chip border */
+  border-radius: var(--pf-c-chip--before--BorderRadius);
+}
+
+span {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  /** Maximum width of chip text */
+  max-width: var(--pf-c-chip__text--MaxWidth);
+  /** Font size of chip text */
+  font-size: var(--pf-c-chip__text--FontSize);
+  /** Color of chip text */
+  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 for overflow chip text */
+  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;
+}
+`;
 import shared from "./pf-chip-shared.css.js";
 export class PfChipRemoveEvent extends Event {
     constructor(chip) {
@@ -33,13 +162,17 @@ let PfChip = class PfChip extends LitElement {
     render() {
         return this.overflowChip ? html `
       <button id="outer">
+        <!-- container for chip text -->
         <span part="text">
+          <!-- chip text -->
           <slot></slot>
         </span>
       </button>
     ` : html `
       <div id="outer">
+        <!-- container for chip text -->
         <span id="chip-text" part="text">
+          <!-- chip text -->
           <slot></slot>
         </span>
         <pf-button id="close-button"
@@ -64,7 +197,7 @@ PfChip.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfChip.version = "4.1.0";
+PfChip.version = "4.3.0";
 __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,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"]}
+{"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;AASM,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;;;;;;;;KAQ9B,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;yBAUa,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;AArDe,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 * @alias Chip\n * @fires {ChipRemoveEvent} remove - Fires when chip is removed\n * @fires {Event} click - when close button is clicked\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        <!-- container for chip text -->\n        <span part=\"text\">\n          <!-- chip text -->\n          <slot></slot>\n        </span>\n      </button>\n    ` : html`\n      <div id=\"outer\">\n        <!-- container for chip text -->\n        <span id=\"chip-text\" part=\"text\">\n          <!-- chip 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-clipboard-copy/pf-clipboard-copy.css

@@ -1,28 +1,53 @@
 :host {
+	/** Transition for the toggle icon */
 	--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
+	/** Rotate value for the toggle icon when expanded */
 	--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+	/** PaddingTop for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** BackgroundColor for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	/** BorderTopWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
+	/** BorderRightWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderBottomWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderLeftWidth for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderColor for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** OutlineOffset for the expandable content */
 	--pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
+	/** PaddingTop for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingTop: 0;
+	/** PaddingBottom for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
+	/** PaddingLeft for the inline variant */
 	--pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);
+	/** BackgroundColor for the inline variant */
 	--pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	/** FontFamily for the code text */
 	--pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
+	/** FontSize for the code text */
 	--pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** MarginTop for actions item */
 	--pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
+	/** MarginBottom for actions item */
 	--pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
+	/** PaddingTop for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+	/** PaddingRight for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	/** PaddingBottom for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+	/** PaddingLeft for actions item button */
 	--pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
   --pf-icon--size: var(--pf-global--FontSize--md, 1rem);
 }

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

@@ -8,34 +8,8 @@ export declare class PfClipboardCopyCopiedEvent extends Event {
 }
 /**
  * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
- * @slot - Place content to copy here, or use the `value` attribute
- * @slot actions - Place additional action buttons here
+ * @alias Clipboard Copy
  * @fires {PfClipboardCopyCopiedEvent} copy - when the text snippet is successfully copied.
- * @cssprop [--pf-c-clipboard-copy__toggle-icon--Transition=.2s ease-in 0s]
- * @cssprop [--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate=90deg]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingTop=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingRight=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingBottom=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #fff)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderTopWidth=0]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
- * @cssprop [--pf-c-clipboard-copy__expandable-content--OutlineOffset=calc(-1 * var(--pf-global--spacer--xs, 0.25rem))]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingTop=0]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingBottom=0]
- * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingLeft=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy--m-inline--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-clipboard-copy__text--m-code--FontFamily=var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)]
- * @cssprop [--pf-c-clipboard-copy__text--m-code--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--MarginTop=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]
- * @cssprop [--pf-c-clipboard-copy__actions-item--MarginBottom=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
  */
 export declare class PfClipboardCopy extends LitElement {
     #private;