@patternfly/elements 3.0.0 → 3.0.2

package/pf-button/pf-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport tokensStyles from './pf-button-tokens.css';\nimport iconStyles from './pf-button-icon.css';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'control'\n  | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n *\n * @summary Allows users to perform an action when triggered\n *\n * @cssprop {<length>} --pf-c-button--FontSize   {@default `1rem`}\n * @cssprop            --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n *\n * @cssprop {<length>} --pf-c-button--PaddingTop    {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft   {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight  {@default `1rem`}\n *\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius  {@default `3px`}\n * @cssprop {<color>}  --pf-c-button--after--BorderColor         {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius        {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth         {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth  {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth  {@default `2px`}\n *\n * @cssprop {<color>}  --pf-c-button--m-primary--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--BackgroundColor         {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--BackgroundColor  {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--BackgroundColor  {@default `#004080`}\n *\n * @cssprop {<color>}  --pf-c-button--m-secondary--Color                   {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--Color           {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BorderColor     {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BorderColor      {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BorderColor      {@default `#06c`}\n *\n * @cssprop {<color>}  --pf-c-button--m-tertiary--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BorderColor     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BorderColor      {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BorderColor      {@default `#151515`}\n *\n * @cssprop {<color>}  --pf-c-button--m-danger--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--BackgroundColor         {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--BackgroundColor  {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--BackgroundColor  {@default `#a30000`}\n *\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--Color                   {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BorderColor             {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--Color           {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BorderColor     {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BorderColor      {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BorderColor      {@default `#c9190b`}\n *\n * @cssprop {<color>}  --pf-c-button--m-control--disabled--BackgroundColor        {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius                     {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth               {@default `1px`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderTopColor            {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderRightColor          {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderBottomColor         {@default `#8a8d90`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderLeftColor           {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--Color                            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--BackgroundColor                  {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--Color                    {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BackgroundColor          {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BorderBottomColor        {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth  {@default `2px`}\n *\n * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n *\n * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}\n *\n * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}\n *\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n *\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n *\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = false;\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Use danger buttons for actions a user can take that are potentially\n   * destructive or difficult/impossible to undo, like deleting or removing\n   * user data.\n   */\n  @property({ type: Boolean, reflect: true }) danger = false;\n\n  /**\n   * Changes the style of the button.\n   * - Primary: Used for the most important call to action on a page. Try to\n   *   limit primary buttons to one per page.\n   * - Secondary: Use secondary buttons for general actions on a page, that\n   *   don’t require as much emphasis as primary button actions. For example,\n   *   you can use secondary buttons where there are multiple actions, like in\n   *   toolbars or data lists.\n   * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n  @property({ reflect: true, type: Boolean }) inline = false;\n\n  @property({ reflect: true, type: Boolean }) block = false;\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n  /** Accessible name for the button, use when the button does not have slotted text */\n  @property() label?: string;\n\n  @property() value?: string;\n\n  @property() name?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  #internals = InternalsController.of(this, { role: 'button' });\n\n  #slots = new SlotController(this, 'icon', null);\n\n  get #disabled() {\n    return this.disabled || this.#internals.formDisabled;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.tabIndex = 0;\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  protected override render() {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size } = this;\n    const disabled = this.#disabled;\n    return html`\n      <div id=\"button\"\n           class=\"${classMap({\n             [variant]: true,\n             [size ?? '']: !!size,\n             inline,\n             block,\n             danger,\n             disabled,\n             hasIcon,\n             loading,\n             plain,\n             warning,\n           })}\">\n        <slot id=\"icon\" part=\"icon\" name=\"icon\" ?hidden=\"${!hasIcon}\">\n          <pf-icon role=\"presentation\"\n                   icon=\"${ifDefined(this.icon)}\"\n                   set=\"${ifDefined(this.iconSet)}\"\n                   ?hidden=\"${!this.icon}\"></pf-icon>\n          <pf-spinner size=\"md\"\n                      ?hidden=\"${!this.loading}\"\n                      aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n        </slot>\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    if (!this.#disabled) {\n      switch (this.type) {\n        case 'reset':\n          return this.#internals.reset();\n        default:\n          return this.#internals.submit();\n      }\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) {\n          this.#onClick();\n        }\n        break;\n      case 'Enter':\n        if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) {\n          this.#onClick();\n        }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-button': PfButton;\n  }\n}\n"]}
+{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport tokensStyles from './pf-button-tokens.css';\nimport iconStyles from './pf-button-icon.css';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'control'\n  | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n * @summary Allows users to perform an action when triggered\n * @cssprop {<length>} --pf-c-button--FontSize   {@default `1rem`}\n * @cssprop            --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-button--PaddingTop    {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft   {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight  {@default `1rem`}\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius  {@default `3px`}\n * @cssprop {<color>}  --pf-c-button--after--BorderColor         {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius        {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth         {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth  {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-primary--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--BackgroundColor         {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--BackgroundColor  {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--BackgroundColor  {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--Color                   {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--Color           {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BorderColor     {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BorderColor      {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BorderColor      {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BorderColor     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BorderColor      {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BorderColor      {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-danger--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--BackgroundColor         {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--BackgroundColor  {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--BackgroundColor  {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--Color                   {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BorderColor             {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--Color           {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BorderColor     {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BorderColor      {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BorderColor      {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-control--disabled--BackgroundColor        {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius                     {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth               {@default `1px`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderTopColor            {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderRightColor          {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderBottomColor         {@default `#8a8d90`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderLeftColor           {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--Color                            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--BackgroundColor                  {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--Color                    {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BackgroundColor          {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BorderBottomColor        {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = false;\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Use danger buttons for actions a user can take that are potentially\n   * destructive or difficult/impossible to undo, like deleting or removing\n   * user data.\n   */\n  @property({ type: Boolean, reflect: true }) danger = false;\n\n  /**\n   * Changes the style of the button.\n   * - Primary: Used for the most important call to action on a page. Try to\n   *   limit primary buttons to one per page.\n   * - Secondary: Use secondary buttons for general actions on a page, that\n   *   don’t require as much emphasis as primary button actions. For example,\n   *   you can use secondary buttons where there are multiple actions, like in\n   *   toolbars or data lists.\n   * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n  @property({ reflect: true, type: Boolean }) inline = false;\n\n  @property({ reflect: true, type: Boolean }) block = false;\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n  /** Accessible name for the button, use when the button does not have slotted text */\n  @property() label?: string;\n\n  @property() value?: string;\n\n  @property() name?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  #internals = InternalsController.of(this, { role: 'button' });\n\n  #slots = new SlotController(this, 'icon', null);\n\n  get #disabled() {\n    return this.disabled || this.#internals.formDisabled;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.tabIndex = 0;\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  protected override render() {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size } = this;\n    const disabled = this.#disabled;\n    return html`\n      <div id=\"button\"\n           class=\"${classMap({\n             [variant]: true,\n             [size ?? '']: !!size,\n             inline,\n             block,\n             danger,\n             disabled,\n             hasIcon,\n             loading,\n             plain,\n             warning,\n           })}\">\n        <slot id=\"icon\" part=\"icon\" name=\"icon\" ?hidden=\"${!hasIcon}\">\n          <pf-icon role=\"presentation\"\n                   icon=\"${ifDefined(this.icon)}\"\n                   set=\"${ifDefined(this.iconSet)}\"\n                   ?hidden=\"${!this.icon}\"></pf-icon>\n          <pf-spinner size=\"md\"\n                      ?hidden=\"${!this.loading}\"\n                      aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n        </slot>\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    if (!this.#disabled) {\n      switch (this.type) {\n        case 'reset':\n          return this.#internals.reset();\n        default:\n          return this.#internals.submit();\n      }\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n        break;\n      case 'Enter':\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-button': PfButton;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-button.e2e.js","sourceRoot":"","sources":["pf-button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-button';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-button/test/pf-button.spec.d.ts

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

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

@@ -0,0 +1,124 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+import { PfButton } from '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+describe('<pf-button>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-button')).to.be.an.instanceof(PfButton);
+    });
+    it('should upgrade', async function () {
+        const el = await createFixture(html `<pf-button>Button</pf-button>`);
+        expect(el, 'pf-button should be an instance of PfButton')
+            .to.be.an.instanceOf(customElements.get('pf-button'))
+            .and
+            .to.be.an.instanceOf(PfButton);
+    });
+    describe('in a fieldset', function () {
+        let element;
+        let fieldset;
+        let form;
+        let submitEvent;
+        beforeEach(async function () {
+            form = await createFixture(html `
+        <form>
+          <input id="pre">
+          <fieldset>
+            <pf-button>OK</pf-button>
+          </fieldset>
+          <input id="post">
+        </form>
+      `);
+            fieldset = form.querySelector('fieldset');
+            element = form.querySelector('pf-button');
+            form.querySelector('input')?.focus();
+            form.addEventListener('submit', function (event) {
+                event.preventDefault();
+                submitEvent = event;
+            });
+            await element.updateComplete;
+        });
+        afterEach(function () {
+            // @ts-expect-error: resetting fixture
+            submitEvent = undefined;
+        });
+        describe('clicking the button', function () {
+            beforeEach(() => clickElementAtCenter(element));
+            it('submits the form', function () {
+                expect(submitEvent).to.be.ok;
+            });
+        });
+        describe('tabbing through', function () {
+            beforeEach(press('Tab'));
+            it('does focus the button', function () {
+                expect(document.activeElement)
+                    .to
+                    .be.an.instanceof(PfButton);
+            });
+            describe('pressing Space', function () {
+                beforeEach(press(' '));
+                it('submits the form', function () {
+                    expect(submitEvent).to.be.ok;
+                });
+            });
+            describe('pressing Enter', function () {
+                beforeEach(press('Enter'));
+                it('submits the form', function () {
+                    expect(submitEvent).to.be.ok;
+                });
+            });
+        });
+        describe('disabling the fieldset', function () {
+            beforeEach(async function () {
+                fieldset.disabled = true;
+                await element.updateComplete;
+            });
+            it('disables the button', function () {
+                expect(element.matches(':disabled'), 'matches :disabled').to.be.true;
+            });
+            describe('tabbing through', function () {
+                beforeEach(press('Tab'));
+                it('does not focus the button', function () {
+                    expect(document.activeElement)
+                        .to
+                        .not
+                        .be.an.instanceof(PfButton);
+                });
+            });
+            // this was a regression spotted by @brianferry
+            describe('then disabling the button', function () {
+                beforeEach(async function () {
+                    element.disabled = true;
+                    await element.updateComplete;
+                });
+                describe('then enabling the button', function () {
+                    beforeEach(async function () {
+                        element.disabled = false;
+                        await element.updateComplete;
+                    });
+                    describe('then enabling the fieldset', function () {
+                        beforeEach(async function () {
+                            fieldset.disabled = false;
+                            await element.updateComplete;
+                        });
+                        describe('tabbing through', function () {
+                            beforeEach(press('Tab'));
+                            it('does focus the button', function () {
+                                expect(document.activeElement)
+                                    .to
+                                    .be.an.instanceof(PfButton);
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-button.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-button.spec.js","sourceRoot":"","sources":["pf-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfButton } from '@patternfly/elements/pf-button/pf-button.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-button>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-button')).to.be.an.instanceof(PfButton);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture(html`<pf-button>Button</pf-button>`);\n    expect(el, 'pf-button should be an instance of PfButton')\n        .to.be.an.instanceOf(customElements.get('pf-button'))\n        .and\n        .to.be.an.instanceOf(PfButton);\n  });\n  describe('in a fieldset', function() {\n    let element: PfButton;\n    let fieldset: HTMLFieldSetElement;\n    let form: HTMLFormElement;\n    let submitEvent: SubmitEvent;\n\n    beforeEach(async function() {\n      form = await createFixture(html`\n        <form>\n          <input id=\"pre\">\n          <fieldset>\n            <pf-button>OK</pf-button>\n          </fieldset>\n          <input id=\"post\">\n        </form>\n      `);\n      fieldset = form.querySelector('fieldset')!;\n      element = form.querySelector('pf-button')!;\n      form.querySelector('input')?.focus();\n      form.addEventListener('submit', function(event) {\n        event.preventDefault();\n        submitEvent = event;\n      });\n      await element.updateComplete;\n    });\n\n    afterEach(function() {\n      // @ts-expect-error: resetting fixture\n      submitEvent = undefined;\n    });\n\n    describe('clicking the button', function() {\n      beforeEach(() => clickElementAtCenter(element));\n      it('submits the form', function() {\n        expect(submitEvent).to.be.ok;\n      });\n    });\n\n    describe('tabbing through', function() {\n      beforeEach(press('Tab'));\n      it('does focus the button', function() {\n        expect(document.activeElement)\n            .to\n            .be.an.instanceof(PfButton);\n      });\n\n      describe('pressing Space', function() {\n        beforeEach(press(' '));\n        it('submits the form', function() {\n          expect(submitEvent).to.be.ok;\n        });\n      });\n\n      describe('pressing Enter', function() {\n        beforeEach(press('Enter'));\n        it('submits the form', function() {\n          expect(submitEvent).to.be.ok;\n        });\n      });\n    });\n\n    describe('disabling the fieldset', function() {\n      beforeEach(async function() {\n        fieldset.disabled = true;\n        await element.updateComplete;\n      });\n      it('disables the button', function() {\n        expect(element.matches(':disabled'), 'matches :disabled').to.be.true;\n      });\n      describe('tabbing through', function() {\n        beforeEach(press('Tab'));\n        it('does not focus the button', function() {\n          expect(document.activeElement)\n              .to\n              .not\n              .be.an.instanceof(PfButton);\n        });\n      });\n      // this was a regression spotted by @brianferry\n      describe('then disabling the button', function() {\n        beforeEach(async function() {\n          element.disabled = true;\n          await element.updateComplete;\n        });\n        describe('then enabling the button', function() {\n          beforeEach(async function() {\n            element.disabled = false;\n            await element.updateComplete;\n          });\n          describe('then enabling the fieldset', function() {\n            beforeEach(async function() {\n              fieldset.disabled = false;\n              await element.updateComplete;\n            });\n            describe('tabbing through', function() {\n              beforeEach(press('Tab'));\n              it('does focus the button', function() {\n                expect(document.activeElement)\n                    .to\n                    .be.an.instanceof(PfButton);\n              });\n            });\n          });\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-card/BaseCard.d.ts

@@ -20,5 +20,5 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 export declare abstract class BaseCard extends LitElement {
     static readonly styles: CSSStyleSheet[];
     protected slots: SlotController;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.e2e.js","sourceRoot":"","sources":["pf-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-card';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-card/test/pf-card.spec.d.ts

@@ -0,0 +1 @@
+import '@patternfly/pfe-tools/test/stub-logger.js';

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

@@ -0,0 +1,160 @@
+import { expect, html, aTimeout, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import '@patternfly/pfe-tools/test/stub-logger.js';
+import { PfCard } from '@patternfly/elements/pf-card/pf-card.js';
+describe('<pf-card>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-card')).to.be.an.instanceof(PfCard);
+    });
+    it('should upgrade', async function () {
+        expect(await createFixture(html `<pf-card></pf-card>`))
+            .to.be.an.instanceof(customElements.get('pf-card'))
+            .and
+            .to.be.an.instanceof(PfCard);
+    });
+    describe('with header and footer content', function () {
+        let element;
+        let origHeight;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-card id="card1">
+          <h2 slot="header">Card 1</h2>
+          <p>This is pf-card.</p>
+          <span slot="footer">Text in footer</span>
+        </pf-card>`);
+        });
+        beforeEach(function () {
+            const { height } = element.getBoundingClientRect();
+            origHeight = height;
+        });
+        describe('size', function () {
+            describe('unset', function () {
+                beforeEach(() => element.updateComplete);
+                beforeEach(nextFrame);
+                it('should have default sizing for card parts', function () {
+                    const pStyles = getComputedStyle(element.querySelector('p'));
+                    const footStyles = getComputedStyle(element.querySelector('[slot=footer]'));
+                    expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px');
+                    expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px');
+                });
+            });
+            describe('compact', function () {
+                beforeEach(async function () {
+                    element.setAttribute('size', 'compact');
+                });
+                it('should be smaller', function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(origHeight, 'height').to.be.greaterThan(height);
+                });
+            });
+            describe('large', function () {
+                beforeEach(async function () {
+                    element.setAttribute('size', 'large');
+                });
+                it('should have larger font sizes for body, footer, more padding for header', function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(origHeight, 'height').to.be.lessThan(height);
+                    const pStyles = getComputedStyle(element.querySelector('p'));
+                    const footStyles = getComputedStyle(element.querySelector('[slot=footer]'));
+                    expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px');
+                    expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px');
+                });
+            });
+        });
+        describe('rounded', function () {
+            describe('unset', function () {
+                it('should have default border radius', function () {
+                    expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('0px');
+                });
+            });
+            describe('is set', function () {
+                it('should have 3px border radius', async function () {
+                    element.setAttribute('rounded', '');
+                    await element.updateComplete;
+                    expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('3px');
+                });
+            });
+        });
+        describe('flat', function () {
+            describe('unset', function () {
+                it('should have default box shadow and border (none)', function () {
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('border')).to.equal('0px none rgb(0, 0, 0)');
+                });
+            });
+            describe('is set', function () {
+                it('should not have a box shadow and should have an added border', async function () {
+                    element.setAttribute('flat', '');
+                    await element.updateComplete;
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('border')).not.to.equal('none');
+                });
+            });
+        });
+        describe('full-height', function () {
+            describe('is not set', function () {
+                it('should not be taller', async function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(height).to.equal(origHeight);
+                });
+            });
+            describe('is set', function () {
+                beforeEach(async function () {
+                    element.toggleAttribute('full-height', true);
+                    await element.updateComplete;
+                });
+                it('should be taller', async function () {
+                    const { height } = element.getBoundingClientRect();
+                    expect(height).to.be.greaterThan(origHeight);
+                });
+            });
+        });
+        describe('plain', function () {
+            describe('unset', function () {
+                it('should have the default box shadow and background-color', function () {
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.be.undefined;
+                    expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgb(255, 255, 255)');
+                });
+            });
+            describe('is set', function () {
+                it('should have transparent background color and no box shadow', async function () {
+                    element.setAttribute('plain', '');
+                    expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');
+                    expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgba(0, 0, 0, 0)');
+                });
+            });
+        });
+        describe('accessible', function () {
+            it('should be accessible in both the light and shadow dom', async function () {
+                await expect(element).to.be.accessible();
+            });
+            // TODO: this has been flaky. revisit later
+            // it('should have an article element wrapper in the shadow dom', async function() {
+            //   const snapshot = await a11ySnapshot();
+            //   const foundNode = findAccessibilityNode(snapshot, node => node.role === 'WebArea');
+            //   expect(foundNode, 'A node with the supplied name has been found.').to.not.be.null;
+            // });
+        });
+    });
+    it(`should render a header and footer when content for those slots are added dynamically`, async function () {
+        const element = await createFixture(html `
+      <pf-card id="dynamicHeaderFooter">
+        This is the card
+      </pf-card>`);
+        const header = document.createElement('h2');
+        header.setAttribute('slot', 'header');
+        header.textContent = 'Card Header';
+        const footer = document.createElement('div');
+        footer.setAttribute('slot', 'footer');
+        footer.textContent = 'This is the footer';
+        element.prepend(header);
+        element.appendChild(footer);
+        await aTimeout(50);
+        const cardHeaderSlot = element.shadowRoot.querySelector('slot[name="header"]');
+        const cardFooterSlot = element.shadowRoot.querySelector('slot[name="footer"]');
+        await aTimeout(50);
+        expect(cardHeaderSlot.assignedNodes().length).to.equal(1);
+        expect(cardFooterSlot.assignedNodes().length).to.equal(1);
+    });
+});
+//# sourceMappingURL=pf-card.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.spec.js","sourceRoot":"","sources":["pf-card.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, aTimeout, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nimport { PfCard } from '@patternfly/elements/pf-card/pf-card.js';\n\ndescribe('<pf-card>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-card')).to.be.an.instanceof(PfCard);\n  });\n\n  it('should upgrade', async function() {\n    expect(await createFixture<PfCard>(html`<pf-card></pf-card>`))\n        .to.be.an.instanceof(customElements.get('pf-card'))\n        .and\n        .to.be.an.instanceof(PfCard);\n  });\n\n  describe('with header and footer content', function() {\n    let element: PfCard;\n    let origHeight: number;\n\n    beforeEach(async function() {\n      element = await createFixture<PfCard>(html`\n        <pf-card id=\"card1\">\n          <h2 slot=\"header\">Card 1</h2>\n          <p>This is pf-card.</p>\n          <span slot=\"footer\">Text in footer</span>\n        </pf-card>`);\n    });\n\n    beforeEach(function() {\n      const { height } = element.getBoundingClientRect();\n      origHeight = height;\n    });\n\n    describe('size', function() {\n      describe('unset', function() {\n        beforeEach(() => element.updateComplete);\n        beforeEach(nextFrame);\n        it('should have default sizing for card parts', function() {\n          const pStyles = getComputedStyle(element.querySelector('p')!);\n          const footStyles = getComputedStyle(element.querySelector('[slot=footer]')!);\n          expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px');\n          expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px');\n        });\n      });\n\n      describe('compact', function() {\n        beforeEach(async function() {\n          element.setAttribute('size', 'compact');\n        });\n        it('should be smaller', function() {\n          const { height } = element.getBoundingClientRect();\n          expect(origHeight, 'height').to.be.greaterThan(height);\n        });\n      });\n\n      describe('large', function() {\n        beforeEach(async function() {\n          element.setAttribute('size', 'large');\n        });\n        it('should have larger font sizes for body, footer, more padding for header', function() {\n          const { height } = element.getBoundingClientRect();\n          expect(origHeight, 'height').to.be.lessThan(height);\n          const pStyles = getComputedStyle(element.querySelector('p')!);\n          const footStyles = getComputedStyle(element.querySelector('[slot=footer]')!);\n          expect(pStyles.getPropertyValue('font-size'), 'body font-size').to.equal('16px');\n          expect(footStyles.getPropertyValue('font-size'), 'footer font-size').to.equal('16px');\n        });\n      });\n    });\n\n    describe('rounded', function() {\n      describe('unset', function() {\n        it('should have default border radius', function() {\n          expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('0px');\n        });\n      });\n\n      describe('is set', function() {\n        it('should have 3px border radius', async function() {\n          element.setAttribute('rounded', '');\n          await element.updateComplete;\n          expect(getComputedStyle(element).getPropertyValue('border-radius')).to.equal('3px');\n        });\n      });\n    });\n\n    describe('flat', function() {\n      describe('unset', function() {\n        it('should have default box shadow and border (none)', function() {\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('border')).to.equal('0px none rgb(0, 0, 0)');\n        });\n      });\n\n      describe('is set', function() {\n        it('should not have a box shadow and should have an added border', async function() {\n          element.setAttribute('flat', '');\n          await element.updateComplete;\n\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('border')).not.to.equal('none');\n        });\n      });\n    });\n\n    describe('full-height', function() {\n      describe('is not set', function() {\n        it('should not be taller', async function() {\n          const { height } = element.getBoundingClientRect();\n          expect(height).to.equal(origHeight);\n        });\n      });\n\n      describe('is set', function() {\n        beforeEach(async function() {\n          element.toggleAttribute('full-height', true);\n          await element.updateComplete;\n        });\n\n        it('should be taller', async function() {\n          const { height } = element.getBoundingClientRect();\n          expect(height).to.be.greaterThan(origHeight);\n        });\n      });\n    });\n\n    describe('plain', function() {\n      describe('unset', function() {\n        it('should have the default box shadow and background-color', function() {\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).not.to.be.undefined;\n          expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgb(255, 255, 255)');\n        });\n      });\n      describe('is set', function() {\n        it('should have transparent background color and no box shadow', async function() {\n          element.setAttribute('plain', '');\n          expect(getComputedStyle(element).getPropertyValue('box-shadow')).to.equal('none');\n          expect(getComputedStyle(element).getPropertyValue('background-color')).to.equal('rgba(0, 0, 0, 0)');\n        });\n      });\n    });\n\n    describe('accessible', function() {\n      it('should be accessible in both the light and shadow dom', async function() {\n        await expect(element).to.be.accessible();\n      });\n      // TODO: this has been flaky. revisit later\n      // it('should have an article element wrapper in the shadow dom', async function() {\n      //   const snapshot = await a11ySnapshot();\n      //   const foundNode = findAccessibilityNode(snapshot, node => node.role === 'WebArea');\n      //   expect(foundNode, 'A node with the supplied name has been found.').to.not.be.null;\n      // });\n    });\n  });\n\n  it(`should render a header and footer when content for those slots are added dynamically`, async function() {\n    const element = await createFixture<PfCard>(html`\n      <pf-card id=\"dynamicHeaderFooter\">\n        This is the card\n      </pf-card>`);\n\n    const header = document.createElement('h2');\n    header.setAttribute('slot', 'header');\n    header.textContent = 'Card Header';\n\n    const footer = document.createElement('div');\n    footer.setAttribute('slot', 'footer');\n    footer.textContent = 'This is the footer';\n\n    element.prepend(header);\n    element.appendChild(footer);\n\n    await aTimeout(50);\n\n    const cardHeaderSlot =\n      element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"header\"]')!;\n    const cardFooterSlot =\n      element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"footer\"]')!;\n\n    await aTimeout(50);\n\n    expect(cardHeaderSlot.assignedNodes().length).to.equal(1);\n    expect(cardFooterSlot.assignedNodes().length).to.equal(1);\n  });\n});\n"]}

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

@@ -7,20 +7,23 @@ export declare class PfChipGroupRemoveEvent extends Event {
 }
 /**
  * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.
- *
  * @fires expand - Fires when chip group is expanded to show all chips
  * @fires remove - Fires when chip group is closed/removed
- *
  * @slot category-name
  *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied
- *
  * @slot
  *      Should be <Chip> elements.
  */
 export declare class PfChipGroup extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
-    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
     /**
      * Accessible label for chip group that does not have a category name
      */
@@ -53,7 +56,7 @@ export declare class PfChipGroup extends LitElement {
     private _button?;
     private _categorySlotted?;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changed: PropertyValues<this>): void;
     /**
      * active chip that receives focus when group receives focus

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

@@ -31,13 +31,10 @@ export class PfChipGroupRemoveEvent extends Event {
 const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
 /**
  * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.
- *
  * @fires expand - Fires when chip group is expanded to show all chips
  * @fires remove - Fires when chip group is closed/removed
- *
  * @slot category-name
  *      Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied
- *
  * @slot
  *      Should be <Chip> elements.
  */
@@ -116,10 +113,10 @@ let PfChipGroup = class PfChipGroup extends LitElement {
     `;
     }
     updated(changed) {
-        if (changed.has('accessibleCloseLabel') ||
-            changed.has('numChips') ||
-            changed.has('closeable') ||
-            changed.has('open')) {
+        if (changed.has('accessibleCloseLabel')
+            || changed.has('numChips')
+            || changed.has('closeable')
+            || changed.has('open')) {
             __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_handleChipsChanged).call(this);
         }
     }
@@ -164,8 +161,8 @@ _PfChipGroup_handleChipsChanged = function _PfChipGroup_handleChipsChanged() {
             this._overflowChip,
             this._button,
         ].filter((x) => !!x), "f");
-        if (oldButtons.length !== __classPrivateFieldGet(this, _PfChipGroup_buttons, "f").length ||
-            !oldButtons.every((element, index) => element === __classPrivateFieldGet(this, _PfChipGroup_buttons, "f")[index])) {
+        if (oldButtons.length !== __classPrivateFieldGet(this, _PfChipGroup_buttons, "f").length
+            || !oldButtons.every((element, index) => element === __classPrivateFieldGet(this, _PfChipGroup_buttons, "f")[index])) {
             __classPrivateFieldGet(this, _PfChipGroup_tabindex, "f").updateItems();
         }
         __classPrivateFieldGet(this, _PfChipGroup_instances, "m", _PfChipGroup_updateOverflow).call(this);
@@ -225,7 +222,10 @@ _PfChipGroup_updateOverflow = function _PfChipGroup_updateOverflow() {
     });
 };
 PfChipGroup.styles = [shared, styles];
-PfChipGroup.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+PfChipGroup.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ attribute: 'accessible-label', type: String })
 ], PfChipGroup.prototype, "accessibleLabel", void 0);