@patternfly/elements 2.0.0 → 2.0.2

package/pf-jump-links/pf-jump-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport './pf-jump-links-item.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  @queryAssignedElements() _items!:PfJumpLinksItem[];\n\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  @property({ type: Number }) offset = 0;\n\n  @property() label?: string;\n\n  #items!:PfJumpLinksItem[];\n  #init = false;\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <slot role=\"listbox\" @slotchange=\"${this.#onSlotchange}\"></slot>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <slot role=\"listbox\" @slotchange=\"${this.#onSlotchange}\"></slot>`}\n      </nav>\n    `;\n  }\n\n  #onSlotchange() {\n    this.#items = this._items;\n    const items = this.#items?.map(item=>item.link);\n    if (this.#init) {\n      this.#rovingTabindexController.updateItems(items);\n    } else {\n      this.#rovingTabindexController.initItems(items);\n      this.#init = true;\n    }\n  }\n\n  async #onSelect(event: Event) {\n    this.#spy.setActive(event.target);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}
+{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport './pf-jump-links-item.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * Jump links allow users to navigate to sections within a page.\n *\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n *\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n *\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n *\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n *\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n *\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n  static readonly styles = [style];\n\n  /** Whether the element features a disclosure widget around the nav items */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /** Whether the expandable element's disclosure widget is expanded */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /** Whether the layout of children is vertical or horizontal. */\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  /** Whether to center children. */\n  @property({ reflect: true, type: Boolean }) centered = false;\n\n  /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n  @property({ type: Number }) offset = 0;\n\n  /** Label to add to nav element. */\n  @property() label?: string;\n\n  #initialized = false;\n\n  #rovingTabindexController = new RovingTabindexController(this);\n\n  #spy = new ScrollSpyController(this, {\n    rootMargin: `${this.offset}px 0px 0px 0px`,\n    tagNames: ['pf-jump-links-item'],\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('select', this.#onSelect);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('offset')) {\n      this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n    }\n  }\n\n  render() {\n    return html`\n      <nav id=\"container\">${this.expandable ? html`\n        <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n          <summary>\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n            <span id=\"label\">${this.label}</span>\n          </summary>\n          <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>\n        </details>` : html`\n        <span id=\"label\">${this.label}</span>\n        <slot role=\"listbox\" @slotchange=\"${this.#updateItems}\"></slot>`}\n      </nav>\n    `;\n  }\n\n  #updateItems() {\n    const items = Array.from(this.querySelectorAll(':is(pf-jump-links-item, pf-jump-links-list)'))\n      .flatMap(i => [\n        ...i.shadowRoot?.querySelectorAll('a') ?? [],\n        ...i.querySelectorAll('a') ?? [],\n      ]);\n    if (this.#initialized) {\n      this.#rovingTabindexController.updateItems(items);\n    } else {\n      this.#rovingTabindexController.initItems(items);\n      this.#initialized = true;\n    }\n  }\n\n  async #onSelect(event: Event) {\n    this.#spy.setActive(event.target);\n  }\n\n  #onToggle(event: Event) {\n    if (event.target instanceof HTMLDetailsElement) {\n      this.expanded = event.target.open;\n    }\n    this.dispatchEvent(new Event('toggle'));\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-jump-links': PfJumpLinks;\n  }\n}\n"]}

package/pf-label/pf-label.d.ts

@@ -3,7 +3,8 @@ import '@patternfly/elements/pf-button/pf-button.js';
 export type LabelVariant = ('filled' | 'outline');
 export type LabelColor = ('blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold');
 /**
- * Labels allow users to display meta data in a stylized form.
+ * The label component allows users to add specific element captions for user
+ * clarity and convenience.
  *
  * @summary Allows users to display meta data in a stylized form.
  *

package/pf-label/pf-label.js

@@ -9,7 +9,8 @@ import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
 const styles = css `#pf-container{display:contents}#container{--pf-global--icon--FontSize--sm:14px;padding-top:var(--pf-c-label--PaddingTop,var(--pf-global--spacer--xs,.25rem));padding-left:var(--pf-c-label--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-bottom:var(--pf-c-label--PaddingBottom,var(--pf-global--spacer--xs,.25rem));padding-right:var(--pf-c-label--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-label--FontSize, .875em);color:var(--pf-c-label--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-label--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5));border-radius:var(--pf-c-label--BorderRadius,30em);max-width:var(--pf-c-label__content--MaxWidth,100%);color:var(--pf-c-label__content--Color,var(--pf-global--Color--100,#151515))}#container::before{border-radius:var(--pf-c-label--BorderRadius,30em);border:var(--pf-c-label__content--before--BorderWidth,1px) solid var(--pf-c-label__content--before--BorderColor,var(--pf-global--palette--black-300,#d2d2d2))}.compact{--pf-c-label--PaddingTop:var(--pf-c-label--m-compact--PaddingTop, 0);--pf-c-label--PaddingRight:var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));--pf-c-label--PaddingBottom:var(--pf-c-label--m-compact--PaddingBottom, 0);--pf-c-label--PaddingLeft:var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));--pf-global--icon--FontSize--sm:12px}.blue{--pf-c-label__content--Color:var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));--pf-c-label--BackgroundColor:var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4))}.blue.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)))}.cyan{--pf-c-label__content--Color:var(--pf-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737));--pf-c-label--BackgroundColor:var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9))}.cyan.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))}.green{--pf-c-label__content--Color:var(--pf-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18));--pf-c-label--BackgroundColor:var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8))}.green.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))}.orange{--pf-c-label__content--Color:var(--pf-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00));--pf-c-label--BackgroundColor:var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678))}.orange.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))}.purple{--pf-c-label__content--Color:var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066));--pf-c-label--BackgroundColor:var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff))}.purple.outline{--pf-c-label__content--Color:var(--pf-c-label--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac));--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))}.red{--pf-c-label__content--Color:var(--pf-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007));--pf-c-label--BackgroundColor:var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b))}.red.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))}.gold{--pf-c-label__content--Color:var(--pf-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00));--pf-c-label--BackgroundColor:var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));--pf-c-label__content--before--BorderColor:var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2))}.gold.outline{--pf-c-label__content--Color:var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))}.outline{--pf-c-label--BackgroundColor:var(--pf-c-label--m-outline--BackgroundColor, #ffffff);--pf-c-label__content--before--BorderColor:var(--pf-global--palette--black-300, #d2d2d2)}.hasIcon [part=icon]{left:var(--pf-c-label--PaddingLeft,var(--pf-global--spacer--md,1rem));margin-inline-end:var(--pf-c-label__icon--MarginRight,var(--pf-global--spacer--xs,.25rem))}.blue .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-blue__icon--Color,var(--pf-global--primary-color--100,#06c)))}.cyan .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-cyan__icon--Color,var(--pf-global--default-color--200,#009596)))}.green .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-green__icon--Color,var(--pf-global--success-color--100,#3e8635)))}.orange .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-orange__icon--Color,var(--pf-global--palette--orange-300,#ec7a08)))}.purple .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-purple__icon--Color,var(--pf-global--palette--purple-500,#6753ac)))}.red .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-red__icon--Color,var(--pf-global--danger-color--100,#c9190b)))}.gold .hasIcon [part=icon]{color:var(--pf-c-label__icon--Color,var(--pf-c-label--m-gold__icon--Color,var(--pf-global--palette--gold-400,#f0ab00)))}pf-button{--pf-c-button--FontSize:var(--pf-c-label__c-button--FontSize,\n    var(--pf-global--FontSize--xs, 0.75rem));--pf-c-button--PaddingTop:var(--pf-c-label__c-button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingRight:var(--pf-c-label__c-button--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));--pf-c-button--PaddingBottom:var(--pf-c-label__c-button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));--pf-c-button--PaddingLeft:var(--pf-c-label__c-button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));margin-top:var(--pf-c-label__c-button--MarginTop,-.5rem);margin-right:var(--pf-c-label__c-button--MarginRight,-.5rem);margin-bottom:var(--pf-c-label__c-button--MarginBottom,-.5rem);margin-left:var(--pf-c-label__c-button--MarginLeft,.25rem)}svg{vertical-align:-.125em;fill:currentColor;height:1em;width:1em}`;
 /**
- * Labels allow users to display meta data in a stylized form.
+ * The label component allows users to add specific element captions for user
+ * clarity and convenience.
  *
  * @summary Allows users to display meta data in a stylized form.
  *

package/pf-label/pf-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAKL;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AAxDe,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvC,yBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAOjG;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * Labels allow users to display meta data in a stylized form.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}
+{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,6CAA6C,CAAC;;;AAoBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAKL;;;;WAIG;QACS,YAAO,GAAiB,QAAQ,CAAC;QAE7C;;WAEG;QACS,UAAK,GAAe,MAAM,CAAC;QAKvC,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;IA+BjD,CAAC;IA1BU,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;KACrF,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;uBACV,IAAI,CAAC,IAAI;KAC3B,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;0CACI,CAAC,IAAI,CAAC,SAAS;;8BAE3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;6BACrD,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;KAMzD,CAAC;IACJ,CAAC;;AAxDe,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvC,yBAAiB,GAAmB,EAAE,GAAG,SAAS,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAOjG;IAAX,QAAQ,EAAE;wCAAkC;AAKjC;IAAX,QAAQ,EAAE;sCAA4B;AAG3B;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA9B9D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport { BaseLabel } from './BaseLabel.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport type LabelVariant = (\n  | 'filled'\n  | 'outline'\n);\n\nexport type LabelColor = (\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'purple'\n  | 'red'\n  | 'grey'\n  | 'gold'\n)\n\n/**\n * The label component allows users to add specific element captions for user\n * clarity and convenience.\n *\n * @summary Allows users to display meta data in a stylized form.\n *\n * @fires close - when a removable label's close button is clicked\n *\n * @cssprop {<length>} --pf-c-label--FontSize   {@default `0.875em`}\n *\n * @cssprop {<length>} --pf-c-label--PaddingTop     {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-label--PaddingLeft    {@default `0.5rem`}\n *\n * @cssprop {<color>} --pf-c-label--Color           {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--BackgroundColor {@default `#f5f5f5`}\n *\n * @cssprop {<length>} --pf-c-label--BorderRadius {@default `30em`}\n *\n * @cssprop {<length>} --pf-c-label__content--MaxWidth            {@default `100%`}\n * @cssprop {<color>} --pf-c-label__content--Color                {@default `#151515`}\n * @cssprop {<length>} --pf-c-label__content--before--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-label__content--before--BorderColor  {@default `#d2d2d2`}\n *\n * @cssprop {<color>} --pf-c-label--m-outline__content--Color  {@default `#151515`}\n * @cssprop {<color>} --pf-c-label--m-outline--BackgroundColor {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-label--m-blue__content--Color                {@default `#002952`}\n * @cssprop {<color>} --pf-c-label--m-blue--BackgroundColor               {@default `#e7f1fa`}\n * @cssprop {<color>} --pf-c-label--m-blue__content--before--BorderColor  {@default `#bee1f4`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-blue__content--Color      {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-label--m-cyan__content--Color                {@default `#3b1f00`}\n * @cssprop {<color>} --pf-c-label--m-cyan--BackgroundColor               {@default `#f2f9f9`}\n * @cssprop {<color>} --pf-c-label--m-cyan__content--before--BorderColor  {@default `#a2d9d9`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-cyan__content--Color      {@default `#005f60`}\n *\n * @cssprop {<color>} --pf-c-label--m-green__content--Color                {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}\n * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}\n * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}\n * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}\n *\n * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}\n * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}\n * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}\n *\n * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}\n * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}\n * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}\n * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}\n * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}\n * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}\n\n * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}\n * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}\n * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`}\n *\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n *\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n *\n * @slot\n *       Must contain the text for the label.\n *\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}\n * @cssprop {<length>} --pf-c-label--m-compact--PaddingLeft    {@default `0.5rem`}\n */\n@customElement('pf-label')\nexport class PfLabel extends BaseLabel {\n  static readonly styles = [...BaseLabel.styles, styles];\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true };\n\n  /**\n   * Changes the style of the label.\n   * - Filled: Colored background with colored border.\n   * - Outline: White background with colored border.\n   */\n  @property() variant: LabelVariant = 'filled';\n\n  /**\n   * Changes the color of the label\n   */\n  @property() color: LabelColor = 'grey';\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Flag indicating the label is compact */\n  @property({ type: Boolean }) compact = false;\n\n  /** Flag indicating the label text should be truncated */\n  @property({ type: Boolean }) truncated = false;\n\n  /** Flag indicating the label is removable */\n  @property({ type: Boolean }) removable = false;\n\n  /** Text label for a removable label's close button */\n  @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n  override render() {\n    const { compact, truncated } = this;\n    return html`\n      <span id=\"pf-container\" class=\"${classMap({ compact, truncated })}\">${super.render()}</span>\n    `;\n  }\n\n  protected override renderDefaultIcon() {\n    return !this.icon ? '' : html`\n      <pf-icon icon=\"${this.icon}\" size=\"sm\"></pf-icon>\n    `;\n  }\n\n  protected override renderSuffix() {\n    return !this.removable ? '' : html`\n      <span part=\"close-button\" ?hidden=${!this.removable}>\n        <pf-button plain\n                    @click=\"${() => this.dispatchEvent(new ComposedEvent('close'))}\"\n                    label=\"${this.closeButtonLabel ?? 'remove'}\">\n          <svg viewBox=\"0 0 352 512\">\n            <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n          </svg>\n        </pf-button>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-label': PfLabel;\n  }\n}\n"]}

package/pf-modal/pf-modal.d.ts

@@ -14,8 +14,8 @@ export declare class ModalOpenEvent extends ComposedEvent {
     trigger: HTMLElement | null);
 }
 /**
- * Modals display information in a window or help a user focus on a task without navigating them away from the page.
- * A user can’t perform other actions until the modal is dismissed.
+ * A modal displays important information to a user without requiring them to navigate
+ * to a new page.
  *
  * @summary Displays information or helps a user focus on a task
  *

package/pf-modal/pf-modal.js

@@ -32,8 +32,8 @@ export class ModalOpenEvent extends ComposedEvent {
     }
 }
 /**
- * Modals display information in a window or help a user focus on a task without navigating them away from the page.
- * A user can’t perform other actions until the modal is dismissed.
+ * A modal displays important information to a user without requiring them to navigate
+ * to a new page.
  *
  * @summary Displays information or helps a user focus on a task
  *

package/pf-modal/pf-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, deprecation, initializer, observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * Modals display information in a window or help a user focus on a task without navigating them away from the page.\n * A user can’t perform other actions until the modal is dismissed.\n *\n * @summary Displays information or helps a user focus on a task\n *\n * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.\n * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).\n * @slot footer - Optional footer content. Good place to put action buttons.\n *\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n *\n * @csspart overlay - The modal overlay which lies under the dialog and above the page body\n * @csspart dialog - The dialog element\n * @csspart content - The container for the dialog content\n * @csspart header - The container for the optional dialog header\n * @csspart description - The container for the optional dialog description in the header\n * @csspart close-button - The modal's close button\n * @csspart footer - Actions footer container\n *\n * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}\n * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}\n * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}\n * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}\n * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}\n * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 2rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight\n * @cssprop {<color>} --pf-c-modal-box--BackgroundColor - {@default #fff}\n * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static readonly styles = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  @deprecation({ alias: 'variant', attribute: 'width' }) width?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @observed\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @observed\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render() {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <header part=\"header\">\n                <slot name=\"header\"></slot>\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <slot></slot>\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init() {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  protected _triggerChanged() {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement) {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show() {\n    this.open = true;\n  }\n\n  @bound showModal() {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   */\n  @bound close(returnValue?: string) {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}
+{"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["pf-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { bound, deprecation, initializer, observed } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-modal.css';\n\nexport class ModalCancelEvent extends ComposedEvent {\n  constructor() {\n    super('cancel');\n  }\n}\n\nexport class ModalCloseEvent extends ComposedEvent {\n  constructor() {\n    super('close');\n  }\n}\n\nexport class ModalOpenEvent extends ComposedEvent {\n  constructor(\n    /** The trigger element which triggered the modal to open */\n    public trigger: HTMLElement | null\n  ) {\n    super('open');\n  }\n}\n\n/**\n * A modal displays important information to a user without requiring them to navigate\n * to a new page.\n *\n * @summary Displays information or helps a user focus on a task\n *\n * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.\n * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).\n * @slot footer - Optional footer content. Good place to put action buttons.\n *\n * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal.\n * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal.\n *\n * @csspart overlay - The modal overlay which lies under the dialog and above the page body\n * @csspart dialog - The dialog element\n * @csspart content - The container for the dialog content\n * @csspart header - The container for the optional dialog header\n * @csspart description - The container for the optional dialog description in the header\n * @csspart close-button - The modal's close button\n * @csspart footer - Actions footer container\n *\n * @cssprop {<length>} --pf-c-modal-box--ZIndex {@default 500}\n * @cssprop {<length>} --pf-c-modal-box--Width - Width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--MaxWidth - Max width of the modal {@default calc(100% - 2rem)}\n * @cssprop {<length>} --pf-c-modal-box--m-sm--sm--MaxWidth - Max width of the small variant modal {@default 35rem}\n * @cssprop {<length>} --pf-c-modal-box--m-md--MaxWidth - Max width of the small variant modal {@default 52.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-lg--lg--MaxWidth - Max width of the large variant modal {@default 70rem}\n * @cssprop {<length>} --pf-c-modal-box--MaxHeight - Max height of the modal {@default calc(100% - 3rem)}\n * @cssprop {<length>} --pf-c-modal-box--BoxShadow - {@default var(--pf-global--BoxShadow--xl)}\n * @cssprop {<length>} --pf-c-modal-box__title--FontSize - {@default 1.5rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MarginTop - {@default 2rem}\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxWidth\n * @cssprop {<length>} --pf-c-modal-box--m-align-top--MaxHeight\n * @cssprop {<color>} --pf-c-modal-box--BackgroundColor - {@default #fff}\n * @cssprop --pf-c-modal-box__title--FontFamily - default font family for header-slotted headings\n */\n@customElement('pf-modal')\nexport class PfModal extends LitElement implements HTMLDialogElement {\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static readonly styles = [style];\n\n  /** Should the dialog close when user clicks outside the dialog? */\n  protected static closeOnOutsideClick = false;\n\n  /**\n   * The `variant` controls the width of the modal.\n   * There are three options: `small`, `medium` and `large`. The default is `large`.\n   */\n  @property({ reflect: true }) variant?: 'small' | 'medium' | 'large';\n\n  @deprecation({ alias: 'variant', attribute: 'width' }) width?: 'small' | 'medium' | 'large';\n\n  /**\n   * `position=\"top\"` aligns the dialog with the top of the page\n   */\n  @property({ reflect: true }) position?: 'top';\n\n  @observed\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional ID of the trigger element */\n  @observed\n  @property() trigger?: string;\n\n  /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */\n  public returnValue = '';\n\n  @query('#overlay') private overlay?: HTMLElement | null;\n  @query('#dialog') private dialog?: HTMLElement | null;\n  @query('#close-button') private closeButton?: HTMLElement | null;\n\n  #headerId = getRandomId();\n  #triggerElement: HTMLElement | null = null;\n  #header: HTMLElement | null = null;\n  #body: Element[] = [];\n  #headings: Element[] = [];\n  #cancelling = false;\n\n  #slots = new SlotController(this, null, 'header', 'description', 'footer');\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('click', this.onClick);\n  }\n\n  render() {\n    const headerId = (this.#header || this.#headings.length) ? this.#headerId : undefined;\n    const headerLabel = this.#triggerElement ? this.#triggerElement.innerText : undefined;\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasDescription = this.#slots.hasSlotted('description');\n    const hasFooter = this.#slots.hasSlotted('footer');\n\n    return html`\n      <section ?hidden=${!this.open}>\n        <div id=\"overlay\" part=\"overlay\" ?hidden=${!this.open}></div>\n        <div id=\"dialog\"\n            part=\"dialog\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-labelledby=${ifDefined(headerId)}\n            aria-label=${ifDefined(headerLabel)}\n            ?hidden=\"${!this.open}\">\n          <div id=\"container\">\n            <div id=\"content\" part=\"content\" class=${classMap({ hasHeader, hasDescription, hasFooter })}>\n              <header part=\"header\">\n                <slot name=\"header\"></slot>\n                <div part=\"description\" ?hidden=${!hasDescription}>\n                  <slot name=\"description\"></slot>\n                </div>\n              </header>\n              <slot></slot>\n              <footer ?hidden=${!hasFooter} part=\"footer\">\n                <slot name=\"footer\"></slot>\n              </footer>\n            </div>\n            <button id=\"close-button\"\n                part=\"close-button\"\n                aria-label=\"Close dialog\"\n                @keydown=${this.onKeydown}\n                @click=${this.close}>\n              <svg fill=\"currentColor\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.onKeydown);\n\n    this.#triggerElement?.removeEventListener('click', this.onTriggerClick);\n  }\n\n  @initializer()\n  protected async _init() {\n    await this.updateComplete;\n    this.#header = this.querySelector(`[slot$=\"header\"]`);\n    this.#body = [...this.querySelectorAll(`*:not([slot])`)];\n    this.#headings = this.#body.filter(el => el.tagName.slice(0, 1) === 'H');\n\n    if (this.#triggerElement) {\n      this.#triggerElement.addEventListener('click', this.onTriggerClick);\n      this.removeAttribute('hidden');\n    }\n\n    if (this.#header) {\n      this.#header.id = this.#headerId;\n    } else if (this.#headings.length > 0) {\n      // Get the first heading in the modal if it exists\n      this.#headings[0].id = this.#headerId;\n    }\n  }\n\n  protected async _openChanged(oldValue?: boolean, newValue?: boolean) {\n    // loosening types to prevent running these effects in unexpected circumstances\n    // eslint-disable-next-line eqeqeq\n    if (oldValue == null || newValue == null || oldValue == newValue) {\n      return;\n    } else if (this.open) {\n      // This prevents background scroll\n      document.body.style.overflow = 'hidden';\n      await this.updateComplete;\n      // Set the focus to the container\n      this.dialog?.focus();\n      this.dispatchEvent(new ModalOpenEvent(this.#triggerElement));\n    } else {\n      // Return scrollability\n      document.body.style.overflow = 'auto';\n\n      await this.updateComplete;\n\n      if (this.#triggerElement) {\n        this.#triggerElement.focus();\n      }\n\n      this.dispatchEvent(this.#cancelling ? new ModalCancelEvent() : new ModalCloseEvent());\n    }\n  }\n\n  protected _triggerChanged() {\n    if (this.trigger) {\n      this.#triggerElement = (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger);\n      this.#triggerElement?.addEventListener('click', this.onTriggerClick);\n    }\n  }\n\n  @bound private onTriggerClick(event: MouseEvent) {\n    event.preventDefault();\n    // TODO: in non-modal case, toggle the dialog\n    this.showModal();\n  }\n\n  @bound private onClick(event: MouseEvent) {\n    const { open, overlay, dialog } = this;\n    if (open) {\n      const path = event.composedPath();\n      const { closeOnOutsideClick } = this.constructor as typeof PfModal;\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) {\n        event.preventDefault();\n        this.cancel();\n      }\n    }\n  }\n\n  @bound private onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        if (event.target === this.closeButton) {\n          event.preventDefault();\n          this.dialog?.focus();\n        }\n        return;\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.cancel();\n        return;\n      case 'Enter':\n        if (event.target === this.#triggerElement) {\n          event.preventDefault();\n          this.showModal();\n        }\n        return;\n    }\n  }\n\n  private async cancel() {\n    this.#cancelling = true;\n    this.open = false;\n    await this.updateComplete;\n    this.#cancelling = false;\n  }\n\n  setTrigger(element: HTMLElement) {\n    this.#triggerElement = element;\n    this.#triggerElement.addEventListener('click', this.onTriggerClick);\n  }\n\n  /**\n   * Manually toggles the modal.\n   * ```js\n   * modal.toggle();\n   * ```\n   */\n  @bound toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Manually opens the modal.\n   * ```js\n   * modal.open();\n   * ```\n   */\n  @bound show() {\n    this.open = true;\n  }\n\n  @bound showModal() {\n    // TODO: non-modal mode\n    this.show();\n  }\n\n  /**\n   * Manually closes the modal.\n   * ```js\n   * modal.close();\n   * ```\n   */\n  @bound close(returnValue?: string) {\n    if (typeof returnValue === 'string') {\n      this.returnValue = returnValue;\n    }\n\n    this.open = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-modal': PfModal;\n  }\n}\n"]}

package/pf-panel/pf-panel.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from 'lit';
 /**
- * Panel
+ * The panel component is a container that supports flexible content layouts. It can
+ * be used to house other components such as fields, forms, videos, buttons, and more.
+ * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
+ * component, which allows you to surface information via a collapsable container.
+ *
  * @slot header - Place header content here
  * @slot - Place main content here
  * @slot footer - Place footer content here

package/pf-panel/pf-panel.js

@@ -7,7 +7,11 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import { css } from "lit";
 const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:pfglobalvar(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--pf-c-panel--m-scrollable__footer--BoxShadow:0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);position:relative;z-index:var(--pf-c-panel--ZIndex);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow)}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--before--BorderWidth,var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px))) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`;
 /**
- * Panel
+ * The panel component is a container that supports flexible content layouts. It can
+ * be used to house other components such as fields, forms, videos, buttons, and more.
+ * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)
+ * component, which allows you to surface information via a collapsable container.
+ *
  * @slot header - Place header content here
  * @slot - Place main content here
  * @slot footer - Place footer content here

package/pf-panel/pf-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.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,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;GAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA+B;AALhD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * Panel\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised'|'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <slot name=\"header\" role=\"region\" ?hidden=\"${!hasHeader}\"></slot>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <slot name=\"footer\" role=\"region\" ?hidden=\"${!hasFooter}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.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,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;;;;;GASG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The panel component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n *\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n  static readonly styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) scrollable = false;\n\n  @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n  #slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    const hasHeader = this.#slots.hasSlotted('header');\n    const hasFooter = this.#slots.hasSlotted('footer');\n    return html`\n      <slot name=\"header\" role=\"region\" ?hidden=\"${!hasHeader}\"></slot>\n      <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n      <slot></slot>\n      <slot name=\"footer\" role=\"region\" ?hidden=\"${!hasFooter}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-panel': PfPanel;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending'|'info'|'success'|'warning'|'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-stepper.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
- * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
+ * A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
  */
 export declare class PfProgressStepper extends LitElement {
     #private;

package/pf-progress-stepper/pf-progress-stepper.js

@@ -11,7 +11,7 @@ import { PfProgressStep } from './pf-progress-step.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
- * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
+ * A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
  */
 let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends LitElement {
     get value() {

package/pf-progress-stepper/pf-progress-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.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;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEI,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,CAAC;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,gCAAc,GAAG,IAAI,CAAC;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.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;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEI,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,CAAC;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,gCAAc,GAAG,IAAI,CAAC;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}

package/pf-spinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAwD","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px'|'%'|'rem'|'em'|'fr'|'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}

package/pf-spinner/pf-spinner.d.ts

@@ -1,5 +1,8 @@
 import { BaseSpinner } from './BaseSpinner.js';
 /**
+ * A spinner is used to indicate to users that an action is in progress. For actions
+ * that may take a long time, use a progress bar instead.
+ *
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}

package/pf-spinner/pf-spinner.js

@@ -6,6 +6,9 @@ import { BaseSpinner } from './BaseSpinner.js';
 import { css } from "lit";
 const styles = css `[hidden]{display:none!important}div{display:contents}svg{width:var(--pf-c-spinner--Width,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));height:var(--pf-c-spinner--Height,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));animation:pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration,1.4s) * 2) var(--pf-c-spinner--AnimationTimingFunction,linear) infinite}:host([size=sm]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem))}:host([size=md]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem))}:host([size=lg]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem))}:host([size=xl]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem))}circle{stroke:var(--pf-c-spinner--Color,var(--pf-global--primary-color--100,#06c));stroke-width:var(--pf-c-spinner--stroke-width,10);animation:pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration,1.4s) var(--pf-c-spinner__path--AnimationTimingFunction,ease-in-out) infinite}@keyframes pf-c-spinner-animation-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes pf-c-spinner-animation-dash{0%{stroke-dashoffset:280;transform:rotate(0)}15%{stroke-width:calc(var(--pf-c-spinner__path--StrokeWidth,10) - 4)}40%{stroke-dashoffset:150;stroke-dasharray:220}100%{stroke-dashoffset:280;transform:rotate(720deg)}}`;
 /**
+ * A spinner is used to indicate to users that an action is in progress. For actions
+ * that may take a long time, use a progress bar instead.
+ *
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}

package/pf-spinner/pf-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;GAeG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;;;;GAkBG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * A spinner is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}

package/pf-switch/pf-switch.d.ts

@@ -1,6 +1,11 @@
 import { BaseSwitch } from './BaseSwitch.js';
 /**
- * Switch
+ * A switch toggles the state of a setting (between on and off). Switches and
+ * checkboxes can often be used interchangeably, but the switch provides a more
+ * explicit, visible representation on a setting.
+ *
+ * @fires {Event} change - Fires when the switch selection changes.
+ *
  * @cssprop --pf-c-switch--FontSize {@default `1rem`}
  * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
  * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}

package/pf-switch/pf-switch.js

@@ -4,7 +4,12 @@ import { BaseSwitch } from './BaseSwitch.js';
 import { css } from "lit";
 const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--checked__label--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-switch__input--checked__toggle--BackgroundColor,var(--pf-global--primary-color--100,#06c))}:host([checked]) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}:host(:disabled) #container{color:var(--pf-c-switch__input--disabled__label--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-switch__input--disabled__toggle--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:disabled) #container::before{background-color:var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5))}:host([checked]:disabled) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}#container{width:var(--pf-c-switch__toggle--Width,calc(var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) + var(--pf-c-switch__toggle-icon--Offset,.125rem) + var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))));height:var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5))));background-color:var(--pf-c-switch__toggle--BackgroundColor,var(--pf-global--palette--black-500,#8a8d90));border-radius:var(--pf-c-switch__toggle--BorderRadius,var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))))}#container::before{top:var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2));left:var(--pf-c-switch__toggle--before--Left,var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2)));width:var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)));height:var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem))));background-color:var(--pf-c-switch__toggle--before--backgroundcolor,var(--pf-global--backgroundcolor--100,#fff));border-radius:var(--pf-c-switch__toggle--before--BorderRadius,var(--pf-global--BorderRadius--lg,30em));box-shadow:var(--pf-c-switch__toggle--before--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));transition:var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s))}:host(:focus-within) #container{outline:var(--pf-c-switch__input--focus__toggle--OutlineWidth,var(--pf-global--BorderWidth--md,2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,var(--pf-global--primary-color--100,#06c));outline-offset:var(--pf-c-switch__input--focus__toggle--OutlineOffset,var(--pf-global--spacer--sm,0.5rem))}svg{margin-inline:var(--pf-c-switch__toggle-icon--Left,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * .4));font-size:var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));color:var(--pf-c-switch__toggle-icon--Color,var(--pf-global--Color--light-100,#fff))}`;
 /**
- * Switch
+ * A switch toggles the state of a setting (between on and off). Switches and
+ * checkboxes can often be used interchangeably, but the switch provides a more
+ * explicit, visible representation on a setting.
+ *
+ * @fires {Event} change - Fires when the switch selection changes.
+ *
  * @cssprop --pf-c-switch--FontSize {@default `1rem`}
  * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
  * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}

package/pf-switch/pf-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * Switch\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\n  declare global {\n    interface HTMLElementTagNameMap {\n      'pf-switch': PfSwitch;\n  }\n}\n"]}
+{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * A switch toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n *\n * @fires {Event} change - Fires when the switch selection changes.\n *\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\n  declare global {\n    interface HTMLElementTagNameMap {\n      'pf-switch': PfSwitch;\n  }\n}\n"]}