@patternfly/elements 2.4.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.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,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;AAYvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAGE,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAE5D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAOhB,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;IAkBlE,CAAC;IAhBC,IAAuB,OAAO;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEkB,iBAAiB;QAClC,OAAO,IAAI,CAAA;;kBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACnB,CAAC,IAAI,CAAC,IAAI;;qBAEV,CAAC,IAAI,CAAC,OAAO;;wBAEV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;KAClE,CAAC;IACJ,CAAC;;AA7Ce,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAE/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA0B;AAGjB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAEV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAY9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AA7BrD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+CpB;SA/CY,QAAQ","sourcesContent":["import { 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';\n\nimport { BaseButton } from './BaseButton.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\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 BaseButton {\n  static readonly styles = [...BaseButton.styles, styles];\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  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\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  protected override get hasIcon() {\n    return !!this.icon || !!this.loading;\n  }\n\n  protected override renderDefaultIcon() {\n    return html`\n      <pf-icon\n          icon=\"${ifDefined(this.icon)}\"\n          set=\"${ifDefined(this.iconSet)}\"\n          ?hidden=\"${!this.icon}\"></pf-icon>\n      <pf-spinner\n          ?hidden=\"${!this.loading}\"\n          size=\"md\"\n          aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\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

@@ -18,7 +18,7 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
  * @csspart footer - The container for *footer* content
  */
 export declare abstract class BaseCard extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     protected slots: SlotController;
     render(): import("lit-html").TemplateResult<1>;
 }

package/pf-card/BaseCard.js

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { css } from "lit";
-const style = css `:host{display:flex;flex-direction:column}article{position:relative;height:100%;display:flex;flex-direction:column}[part=header]{display:flex;flex-direction:row;align-items:center}[part=body] ::slotted(:not([slot]):first-of-type){margin-block-start:0!important}[part=body] ::slotted(:not([slot]):last-of-type){margin-block-end:0!important}[part=footer]{display:flex;gap:.5em;inset-block-end:0}.empty{display:none}`;
+const style = css `:host {\n  display: flex;\n  flex-direction: column;\n}\n\narticle {\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n[part=header] {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n[part=body] ::slotted(:not([slot]):first-of-type) {\n  margin-block-start: 0 !important;\n}\n\n[part=body] ::slotted(:not([slot]):last-of-type) {\n  margin-block-end: 0 !important;\n}\n\n[part=footer] {\n  display: flex;\n  gap: 0.5em;\n  inset-block-end: 0;\n}\n\n.empty {\n  display: none;\n}\n\n`;
 /**
  * This element creates a header, body, and footer region in which to place
  * content or other components.
@@ -20,7 +20,7 @@ const style = css `:host{display:flex;flex-direction:column}article{position:rel
  * @csspart body - The container for *body* content
  * @csspart footer - The container for *footer* content
  */
-class BaseCard extends LitElement {
+export class BaseCard extends LitElement {
     constructor() {
         super(...arguments);
         this.slots = new SlotController(this, 'header', null, 'footer');
@@ -48,5 +48,4 @@ class BaseCard extends LitElement {
     }
 }
 BaseCard.styles = [style];
-export { BaseCard };
 //# sourceMappingURL=BaseCard.js.map

package/pf-card/BaseCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCard.js","sourceRoot":"","sources":["BaseCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAsB,QAAS,SAAQ,UAAU;IAAjD;;QAGY,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAuBvE,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;sBAKxD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC;;;;;yBAKrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAIzE,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './BaseCard.css';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n */\nexport abstract class BaseCard extends LitElement {\n  static readonly styles = [style];\n\n  protected slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    return html`\n      <article>\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('header') })}\">\n          <slot name=\"header\"></slot>\n        </header>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: !this.querySelector(':not([slot])') })}\">\n          <slot></slot>\n        </div>\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('footer') })}\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseCard.js","sourceRoot":"","sources":["BaseCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;QAGY,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAuBvE,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;sBAKxD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC;;;;;yBAKrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAIzE,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './BaseCard.css';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n */\nexport abstract class BaseCard extends LitElement {\n  static readonly styles = [style];\n\n  protected slots = new SlotController(this, 'header', null, 'footer');\n\n  render() {\n    return html`\n      <article>\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('header') })}\">\n          <slot name=\"header\"></slot>\n        </header>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: !this.querySelector(':not([slot])') })}\">\n          <slot></slot>\n        </div>\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: !this.slots.hasSlotted('footer') })}\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\n}\n"]}

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

@@ -45,7 +45,7 @@ import { BaseCard } from './BaseCard.js';
  * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}
  */
 export declare class PfCard extends BaseCard {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /**
      * Optionally provide a size for the card and the card contents.
      * The default is set to `undefined` and provides default styles.

package/pf-card/pf-card.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const style = css `:host{background-color:var(--pf-c-card--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-card--BoxShadow,var(--pf-global--BoxShadow--sm,0 .0625rem .125rem 0 rgba(3,3,3,.12),0 0 .125rem 0 rgba(3,3,3,.06)))}:host([size=compact]){--_pf-c-card__body--FontSize:var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));--_pf-c-card__footer--FontSize:var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem))}:host([size=large]){--pf-c-card__title--FontSize:var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))}:host([flat]){--pf-c-card--BoxShadow:none;border:var(--pf-c-card--m-flat--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-card--m-flat--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([plain]){--pf-c-card--BoxShadow:var(--pf-c-card--m-plain--BoxShadow, none);--pf-c-card--BackgroundColor:var(--pf-c-card--m-plain--BackgroundColor, transparent)}:host([rounded]){border-radius:var(--pf-c-card--m-rounded--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}:host([full-height]){height:var(--pf-c-card--m-full-height--Height,100%);--_pf-c-card__body--FullHeight--Flex:1 1 auto}[part=body],[part=footer],[part=header]{padding-inline-start:var(--_pf-c-card--child--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));padding-inline-end:var(--_pf-c-card--child--PaddingRight,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card--child--PaddingBottom,var(--pf-global--spacer--lg,1.5rem))}[part=body]{font-size:var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));flex:var(--_pf-c-card__body--FullHeight--Flex,initial)}header{padding-block-start:var(--_pf-c-card--first-child--PaddingTop,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card__title--not--last-child--PaddingBottom,var(--pf-global--spacer--md,1rem))}header ::slotted(*){font-family:var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif))!important;font-size:var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem))!important;font-weight:var(--pf-c-card__title--FontWeight,var(--pf-global--FontWeight--bold,700))!important;margin-block:0!important}[part=footer]{font-size:var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));margin-block-start:auto}`;
+const style = css `:host {\n  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  box-shadow: var(--pf-c-card--BoxShadow, var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)));\n}\n\n:host([size="compact"]) {\n  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));\n  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));\n}\n\n:host([size="large"]) {\n  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height, 100%);\n  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="body"] {\n  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));\n  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);\n}\n\nheader {\n  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n}\n\nheader ::slotted(*) {\n  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)) !important;\n  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;\n  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700)) !important;\n  margin-block: 0 !important;\n}\n\n[part="footer"] {\n  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));\n  margin-block-start: auto;\n}\n\n`;
 import { BaseCard } from './BaseCard.js';
 /**
  * A **card** is a square or rectangular container that can contain any kind of content.

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

@@ -1 +1 @@
-{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAWE;;UAEE;QAC0C,YAAO,GAAG,KAAK,CAAC;QAE5D;;SAEC;QACqE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;IAC5D,CAAC;;AAxBiB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAQxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA4B;AAKZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAKU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAoB;AAK7C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAxB/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyBlB;SAzBY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * A **card** is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n *\n *\n * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}\n * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}\n * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}\n * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}\n * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `\"RedHatDisplayUpdated\", helvetica, arial, sans-serif`}\n * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}\n */\n@customElement('pf-card')\nexport class PfCard extends BaseCard {\n  static readonly styles = [...BaseCard.styles, style];\n\n  /**\n   * Optionally provide a size for the card and the card contents.\n   * The default is set to `undefined` and provides default styles.\n   * Compact provides styles which decreases the padding between the sections.\n   * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.\n   */\n  @property({ reflect: true }) size?: 'compact' | 'large';\n\n  /**\n  * Optionally apply a border radius for the drop shadow and/or border.\n  */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  /**\n * Optionally allow the card to take up the full height of the parent element.\n */\n  @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;\n\n  /**\n   * Optionally remove the border on the card container.\n   */\n  @property({ type: Boolean, reflect: true }) plain = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-card': PfCard;\n  }\n}\n"]}
+{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAWL;;UAEE;QAC0C,YAAO,GAAG,KAAK,CAAC;QAE5D;;SAEC;QACqE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;IAC5D,CAAC;;AAxBiB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAQxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA4B;AAKZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAKU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAoB;AAK7C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAxB/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyBlB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * A **card** is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n *       An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n *       Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n *\n *\n * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}\n * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}\n * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}\n * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}\n * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `\"RedHatDisplayUpdated\", helvetica, arial, sans-serif`}\n * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}\n */\n@customElement('pf-card')\nexport class PfCard extends BaseCard {\n  static readonly styles = [...BaseCard.styles, style];\n\n  /**\n   * Optionally provide a size for the card and the card contents.\n   * The default is set to `undefined` and provides default styles.\n   * Compact provides styles which decreases the padding between the sections.\n   * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.\n   */\n  @property({ reflect: true }) size?: 'compact' | 'large';\n\n  /**\n  * Optionally apply a border radius for the drop shadow and/or border.\n  */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  /**\n * Optionally allow the card to take up the full height of the parent element.\n */\n  @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;\n\n  /**\n   * Optionally remove the border on the card container.\n   */\n  @property({ type: Boolean, reflect: true }) plain = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-card': PfCard;\n  }\n}\n"]}

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"]}