@patternfly/elements 4.1.0 → 4.3.0

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, type TemplateResult } 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=1rem]\n * @cssprop            [--pf-c-button--FontWeight=400]\n * @cssprop {<number>} [--pf-c-button--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-button--PaddingTop=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingRight=1rem]\n * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=3px]\n * @cssprop {<color>}  [--pf-c-button--after--BorderColor=transparent]\n * @cssprop {<length>} [--pf-c-button--after--BorderRadius=3px]\n * @cssprop {<length>} [--pf-c-button--after--BorderWidth=1px]\n * @cssprop {<length>} [--pf-c-button--active--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--hover--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--focus--after--BorderWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-primary--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--BackgroundColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-primary--active--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--active--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-primary--focus--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--focus--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-primary--hover--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--hover--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-danger--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--BackgroundColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-danger--active--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--active--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-danger--focus--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--focus--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-danger--hover--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--hover--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--Color=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-control--disabled--BackgroundColor=#f0f0f0]\n * @cssprop {<length>} [--pf-c-button--m-control--BorderRadius=0]\n * @cssprop {<length>} [--pf-c-button--m-control--after--BorderWidth=1px]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderTopColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderRightColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderBottomColor=#8a8d90]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderLeftColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--active--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--focus--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--hover--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--disabled--Color=#6a6e73]\n * @cssprop {<color>}  [--pf-c-button--disabled--BackgroundColor=#d2d2d2]\n * @cssprop {<color>}  [--pf-c-button--disabled--after--BorderColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-warning--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--BackgroundColor=#f0ab00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--active--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--focus--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--hover--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-plain--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--Color=#6a6e73]\n * @cssprop {<color>}  [--pf-c-button--m-plain--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--Color=#d2d2d2]\n * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--BackgroundColor=transparent]\n * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles: CSSStyleSheet[] = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\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  /** Form value for the button */\n  @property() value?: string;\n\n  /** Form element name for the button */\n  @property() name?: string;\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\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  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = 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  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Store the URL Link */\n  @property({ reflect: true }) href?: string;\n\n  /**  Redirecting the URL Link to new Tab */\n  @property({ reflect: true }) target?: string;\n\n  #internals = InternalsController.of(this, { role: this.variant === 'link' ? 'none' : '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  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n    const isLink = this.variant === 'link' && this.href;\n    if (isLink) {\n      this.removeAttribute('tabindex');\n      this.#internals.role = 'none';\n    } else {\n      this.tabIndex = 0;\n      this.#internals.role = 'button';\n    }\n  }\n\n  async formDisabledCallback(): Promise<void> {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult<1> {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;\n\n    const disabled = this.#disabled;\n\n    const content = html`\n      <slot id=\"icon\"\n            part=\"icon\"\n            name=\"icon\"\n            ?hidden=\"${!hasIcon}\">\n        <pf-icon role=\"presentation\"\n                 icon=\"${ifDefined(this.icon)}\"\n                 set=\"${ifDefined(this.iconSet)}\"\n                 ?hidden=\"${!this.icon || this.loading}\"></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    `;\n\n    if (variant === 'link' && href) {\n      return html`\n        <a id=\"button\"\n           href=\"${href}\"\n           target=\"${ifDefined(target)}\"\n           class=\"${classMap({\n                        [variant]: true,\n                        [size ?? '']: !!size,\n                        anchor: true,\n                        inline,\n                        block,\n                        danger,\n                        disabled,\n                        hasIcon,\n                        loading,\n                        plain,\n                        warning,\n                      })}\">${content}</a>`;\n    } else {\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           })}\">${content}</div>`;\n    }\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"]}
+{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BhD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAoBL,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAE7D,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAK5D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAE5D;;;;WAIG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;QAEpB,WAAM,GAAG,KAAK,CAAC;QAEf,UAAK,GAAG,KAAK,CAAC;QAc1D,8BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAC;QAEjG,0BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAC;;IAMvC,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,8CAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,gDAAW,CAAC,CAAC;IACpD,CAAC;IAEkB,UAAU;QAC3B,uBAAA,IAAI,2BAAW,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QAC/C,uBAAA,IAAI,2BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC;QACpD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACjC,uBAAA,IAAI,2BAAW,CAAC,IAAI,GAAG,MAAM,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAClB,uBAAA,IAAI,2BAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;QAClC,CAAC;IACH,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,uBAAA,IAAI,uBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAChF,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAE7F,MAAM,QAAQ,GAAG,uBAAA,IAAI,mDAAU,CAAC;QAEhC,MAAM,OAAO,GAAG,IAAI,CAAA;;;;uBAID,CAAC,OAAO;;yBAEN,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;wBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;4BACnB,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;;+BAEvB,CAAC,IAAI,CAAC,OAAO;kCACV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;;;KAG5E,CAAC;QAEF,IAAI,OAAO,KAAK,MAAM,IAAI,IAAI,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAA;;mBAEE,IAAI;qBACF,SAAS,CAAC,MAAM,CAAC;oBAClB,QAAQ,CAAC;gBACL,CAAC,OAAO,CAAC,EAAE,IAAI;gBACf,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;gBACpB,MAAM,EAAE,IAAI;gBACZ,MAAM;gBACN,KAAK;gBACL,MAAM;gBACN,QAAQ;gBACR,OAAO;gBACP,OAAO;gBACP,KAAK;gBACL,OAAO;aACR,CAAC,KAAK,OAAO,MAAM,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;;oBAEG,QAAQ,CAAC;gBAChB,CAAC,OAAO,CAAC,EAAE,IAAI;gBACf,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;gBACpB,MAAM;gBACN,KAAK;gBACL,MAAM;gBACN,QAAQ;gBACR,OAAO;gBACP,OAAO;gBACP,KAAK;gBACL,OAAO;aACR,CAAC,KAAK,OAAO,QAAQ,CAAC;QAC9B,CAAC;IACH,CAAC;;;;;;IAnFC,OAAO,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,2BAAW,CAAC,YAAY,CAAC;AACvD,CAAC;;IAqFC,IAAI,CAAC,uBAAA,IAAI,mDAAU,EAAE,CAAC;QACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,uBAAA,IAAI,2BAAW,CAAC,KAAK,EAAE,CAAC;YACjC;gBACE,OAAO,uBAAA,IAAI,2BAAW,CAAC,MAAM,EAAE,CAAC;QACpC,CAAC;IACH,CAAC;AACH,CAAC;mDAEU,KAAoB;IAC7B,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;QAClB,KAAK,GAAG;YACN,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE;gBAC7C,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,IAAI,EAAE,MAAM;aACb,CAAC,CAAC,EAAE,CAAC;gBACJ,uBAAA,IAAI,8CAAS,MAAb,IAAI,CAAW,CAAC;YAClB,CAAC;YACD,MAAM;QACR,KAAK,OAAO;YACV,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE;gBAC7C,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,IAAI,EAAE,MAAM;aACb,CAAC,CAAC,EAAE,CAAC;gBACJ,uBAAA,IAAI,8CAAS,MAAb,IAAI,CAAW,CAAC;YAClB,CAAC;IACL,CAAC;AACH,CAAC;AAhMe,uBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,eAAM,GAAoB;IACxC,YAAY;IACZ,UAAU;IACV,MAAM;CACP,AAJqB,CAIpB;;AAE2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAsC;AAGtD;IAAX,QAAQ,EAAE;uCAAgB;AAGf;IAAX,QAAQ,EAAE;uCAAgB;AAGf;IAAX,QAAQ,EAAE;sCAAe;AAGkB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAG/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA0B;AAGV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAOhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAY7B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AAEpB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAe;AAG9C;IAAX,QAAQ,EAAE;sCAAe;AAGW;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAe;AAGd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiB;AApElC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } 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 * @alias Button\n * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles: CSSStyleSheet[] = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\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  /** Form value for the button */\n  @property() value?: string;\n\n  /** Form element name for the button */\n  @property() name?: string;\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\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  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = 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  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Store the URL Link */\n  @property({ reflect: true }) href?: string;\n\n  /**  Redirecting the URL Link to new Tab */\n  @property({ reflect: true }) target?: string;\n\n  #internals = InternalsController.of(this, { role: this.variant === 'link' ? 'none' : '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  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n    const isLink = this.variant === 'link' && this.href;\n    if (isLink) {\n      this.removeAttribute('tabindex');\n      this.#internals.role = 'none';\n    } else {\n      this.tabIndex = 0;\n      this.#internals.role = 'button';\n    }\n  }\n\n  async formDisabledCallback(): Promise<void> {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult<1> {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;\n\n    const disabled = this.#disabled;\n\n    const content = html`\n      <slot id=\"icon\"\n            part=\"icon\"\n            name=\"icon\"\n            ?hidden=\"${!hasIcon}\">\n        <pf-icon role=\"presentation\"\n                 icon=\"${ifDefined(this.icon)}\"\n                 set=\"${ifDefined(this.iconSet)}\"\n                 ?hidden=\"${!this.icon || this.loading}\"></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    `;\n\n    if (variant === 'link' && href) {\n      return html`\n        <a id=\"button\"\n           href=\"${href}\"\n           target=\"${ifDefined(target)}\"\n           class=\"${classMap({\n                        [variant]: true,\n                        [size ?? '']: !!size,\n                        anchor: true,\n                        inline,\n                        block,\n                        danger,\n                        disabled,\n                        hasIcon,\n                        loading,\n                        plain,\n                        warning,\n                      })}\">${content}</a>`;\n    } else {\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           })}\">${content}</div>`;\n    }\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-card/pf-card.css

@@ -1,13 +1,18 @@
 :host {
+	/** BackgroundColor for the card */
 	--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	/** BoxShadow for the card */
 	--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));
 	--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
 	--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	/** FontFamily for the card title */
 	--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	/** FontSize for the card title */
 	--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** FontWeight for the card title */
 	--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
 	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
 	--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);
@@ -61,26 +66,45 @@
 	--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
 	--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
 	--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** FontSize for the card body in compact size */
 	--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** FontSize for the card footer in compact size */
 	--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	/** PaddingTop for the first child in compact size */
 	--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingRight for children in compact size */
 	--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for children in compact size */
 	--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	/** PaddingLeft for children in compact size */
 	--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
 	--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the title when not last child in compact size */
 	--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	/** FontSize for the title in large size */
 	--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	/** PaddingTop for the first child in large size */
 	--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingRight for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingBottom for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingLeft for children in large size */
 	--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
 	--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	/** PaddingBottom for the title when not last child in large size */
 	--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	/** BorderWidth for the flat variant */
 	--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderColor for the flat variant */
 	--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	/** BorderRadius for the rounded variant */
 	--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** Height for the full height variant */
 	--pf-c-card--m-full-height--Height: 100%;
+	/** BoxShadow for the plain variant */
 	--pf-c-card--m-plain--BoxShadow: none;
+	/** BackgroundColor for the plain variant */
 	--pf-c-card--m-plain--BackgroundColor: transparent;
 	--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
 	--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);

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

@@ -6,44 +6,7 @@ import { LitElement, type TemplateResult } from 'lit';
  * function as a preview of a detailed page. Cards may also be used in data displays
  * like card views, or for positioning content on a page.
  * @summary Gives a preview of information in a small layout
- * @slot header
- *       When included, defines the contents of a card. Card headers can contain images as well as
- *       the title of a card and an actions menu represented by the right-aligned kebab.
- *       In most cases, your card should include a header. The only exceptions are when cards being
- *       used as a layout element to create a white background behind other content.
- * @slot title
- *       Communicates the title of a card if it's not included in the header.
- *       If a card will be utilized as a selectable and clickable card, the title needs to be made as a linked text to trigger action and indicate interaction.
- * @slot - Body. Provides details about the item. A card body can include any combination of static
- *         text and/or active content.
- * @slot footer
- *       Contains external links, actions, or static text at the bottom of a card.
- * @csspart header - The container for *header* content
- * @csspart body - The container for *body* content
- * @csspart footer - The container for *footer* content
- * @cssprop {<color>} [--pf-c-card--BackgroundColor=#ffffff]
- * @cssprop {<color>} [--pf-c-card--BoxShadow=0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)]
- * @cssprop {<color>} [--pf-c-card--size-compact__body--FontSize=.875rem]
- * @cssprop {<color>} [--pf-c-card--size-compact__footer--FontSize=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--first-child--PaddingTop=1.5rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingRight=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingBottom=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingLeft=1rem]
- * @cssprop {<color>} [--pf-c-card--size-compact__title--not--last-child--PaddingBottom=.5rem]
- * @cssprop {<color>} [--pf-c-card--size-large__title--FontSize=1.25rem]
- * @cssprop {<color>} [--pf-c-card--size-large--first-child--PaddingTop=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingRight=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingBottom=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingLeft=2rem]
- * @cssprop {<color>} [--pf-c-card--size-large__title--not--last-child--PaddingBottom=1.5rem]
- * @cssprop {<color>} [--pf-c-card--m-flat--BorderWidth=1px solid #d2d2d2]
- * @cssprop {<color>} [--pf-c-card--m-plain--BoxShadow=none]
- * @cssprop {<color>} [--pf-c-card--m-plain--BackgroundColor=transparent]
- * @cssprop {<color>} [--pf-c-card--m-rounded--BorderRadius=3px]
- * @cssprop {<color>} [--pf-c-card--m-full-height--Height=100]
- * @cssprop {<color>} [--pf-c-card__title--FontFamily="RedHatDisplayUpdated", helvetica, arial, sans-serif]
- * @cssprop {<color>} [--pf-c-card__title--FontSize=1rem]
- * @cssprop {<color>} [--pf-c-card__title--FontWeight=700]
+ * @alias Card
  */
 export declare class PfCard extends LitElement {
     #private;

package/pf-card/pf-card.js

@@ -6,7 +6,233 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const style = css `:host {\n\t--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--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\t--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);\n\t--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));\n\t--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;\n\t--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--before--Right: 0;\n\t--pf-c-card--m-selectable-raised--before--Bottom: 0;\n\t--pf-c-card--m-selectable-raised--before--Left: 0;\n\t--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);\n\t--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;\n\t--pf-c-card--m-selectable-raised--before--Transition: none;\n\t--pf-c-card--m-selectable-raised--before--ScaleY: 1;\n\t--pf-c-card--m-selectable-raised--before--TranslateY: 0;\n\t--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);\n\t--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;\n\t--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n\t--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;\n\t--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n\t--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-card--m-full-height--Height: 100%;\n\t--pf-c-card--m-plain--BoxShadow: none;\n\t--pf-c-card--m-plain--BackgroundColor: transparent;\n\t--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;\n\t--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);\n  display: flex;\n  flex-direction: column;\n\tbackground-color: var(--pf-c-card--BackgroundColor);\n\tbox-shadow: var(--pf-c-card--BoxShadow);\n}\n\n[hidden],\n.empty {\n  display: none !important;\n}\n\nheader {\n  padding-block-start: var(--pf-c-card--first-child--PaddingTop);\n  padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n}\n\nheader ::slotted(*) {\n  margin-block: 0 !important;\n\n  font-family: var(--pf-c-card__title--FontFamily) !important;\n  font-size: var(--pf-c-card__title--FontSize) !important;\n  font-weight: var(--pf-c-card__title--FontWeight) !important;\n}\n\nheader ::slotted(pf-dropdown) {\n  margin-inline-start: auto;\n}\n\narticle {\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--pf-c-card--child--PaddingLeft);\n  padding-inline-end: var(--pf-c-card--child--PaddingRight);\n  padding-block-end: var(--pf-c-card--child--PaddingBottom);\n}\n\n#title {\n  display: block;\n  flex: 1 0 100%;\n  padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);\n}\n\n[part="body"] {\n  font-size: var(--pf-c-card__body--FontSize);\n  flex: var(--pf-c-card__body--FullHeight--Flex);\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  margin-block-start: auto;\n  display: flex;\n  gap: 0.5em;\n  inset-block-end: 0;\n  font-size: var(--pf-c-card__footer--FontSize);\n}\n\n:host([size="compact"]) {\n\t--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);\n\t--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);\n}\n\n:host([size="large"]) {\n\t--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius);\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height);\n  --pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n`;
+const style = css `:host {
+\t/** BackgroundColor for the card */
+\t--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t/** BoxShadow for the card */
+\t--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));
+\t--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+\t--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+\t--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+\t--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+\t/** FontFamily for the card title */
+\t--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+\t/** FontSize for the card title */
+\t--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t/** FontWeight for the card title */
+\t--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
+\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);
+\t--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+\t--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+\t--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+\t--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+\t--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
+\t--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);
+\t--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+\t--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+\t--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+\t--pf-c-card--m-selectable-raised--before--Right: 0;
+\t--pf-c-card--m-selectable-raised--before--Bottom: 0;
+\t--pf-c-card--m-selectable-raised--before--Left: 0;
+\t--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+\t--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+\t--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+\t--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);
+\t--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
+\t--pf-c-card--m-selectable-raised--before--Transition: none;
+\t--pf-c-card--m-selectable-raised--before--ScaleY: 1;
+\t--pf-c-card--m-selectable-raised--before--TranslateY: 0;
+\t--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+\t--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+\t--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+\t--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+\t--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+\t--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+\t--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+\t--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
+\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
+\t--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
+\t--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+\t--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);
+\t--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
+\t--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
+\t--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
+\t--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
+\t--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
+\t--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
+\t--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
+\t--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);
+\t/** FontSize for the card body in compact size */
+\t--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** FontSize for the card footer in compact size */
+\t--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t/** PaddingTop for the first child in compact size */
+\t--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingRight for children in compact size */
+\t--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for children in compact size */
+\t--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingLeft for children in compact size */
+\t--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+\t/** PaddingBottom for the title when not last child in compact size */
+\t--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+\t/** FontSize for the title in large size */
+\t--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+\t/** PaddingTop for the first child in large size */
+\t--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+\t/** PaddingRight for children in large size */
+\t--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+\t/** PaddingBottom for children in large size */
+\t--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);
+\t/** PaddingLeft for children in large size */
+\t--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+\t--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+\t/** PaddingBottom for the title when not last child in large size */
+\t--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+\t/** BorderWidth for the flat variant */
+\t--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** BorderColor for the flat variant */
+\t--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+\t/** BorderRadius for the rounded variant */
+\t--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+\t/** Height for the full height variant */
+\t--pf-c-card--m-full-height--Height: 100%;
+\t/** BoxShadow for the plain variant */
+\t--pf-c-card--m-plain--BoxShadow: none;
+\t/** BackgroundColor for the plain variant */
+\t--pf-c-card--m-plain--BackgroundColor: transparent;
+\t--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+\t--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+\t--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+\t--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);
+  display: flex;
+  flex-direction: column;
+\tbackground-color: var(--pf-c-card--BackgroundColor);
+\tbox-shadow: var(--pf-c-card--BoxShadow);
+}
+
+[hidden],
+.empty {
+  display: none !important;
+}
+
+header {
+  padding-block-start: var(--pf-c-card--first-child--PaddingTop);
+  padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+header ::slotted(*) {
+  margin-block: 0 !important;
+
+  font-family: var(--pf-c-card__title--FontFamily) !important;
+  font-size: var(--pf-c-card__title--FontSize) !important;
+  font-weight: var(--pf-c-card__title--FontWeight) !important;
+}
+
+header ::slotted(pf-dropdown) {
+  margin-inline-start: auto;
+}
+
+article {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+[part="header"],
+[part="body"],
+[part="footer"] {
+  padding-inline-start: var(--pf-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-c-card--child--PaddingRight);
+  padding-block-end: var(--pf-c-card--child--PaddingBottom);
+}
+
+#title {
+  display: block;
+  flex: 1 0 100%;
+  padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);
+}
+
+[part="body"] {
+  font-size: var(--pf-c-card__body--FontSize);
+  flex: var(--pf-c-card__body--FullHeight--Flex);
+}
+
+[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"] {
+  margin-block-start: auto;
+  display: flex;
+  gap: 0.5em;
+  inset-block-end: 0;
+  font-size: var(--pf-c-card__footer--FontSize);
+}
+
+:host([size="compact"]) {
+\t--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
+\t--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
+\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
+\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
+\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
+\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
+\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
+\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
+}
+
+:host([size="large"]) {
+\t--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
+\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
+\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
+\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
+\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
+\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
+}
+
+:host([flat]) {
+  --pf-c-card--BoxShadow: none;
+  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
+}
+
+:host([plain]) {
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
+}
+
+:host([rounded]) {
+  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
+}
+
+:host([full-height]) {
+  height: var(--pf-c-card--m-full-height--Height);
+  --pf-c-card__body--FullHeight--Flex: 1 1 auto;
+}
+
+`;
 let PfCard = class PfCard extends LitElement {
     constructor() {
         super(...arguments);
@@ -27,20 +253,40 @@ let PfCard = class PfCard extends LitElement {
     render() {
         return html `
       <article>
+        <!-- summary: The container for *header* content -->
         <header id="header"
                 part="header"
                 class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('header') })}">
+          <!-- summary: When included, defines the contents of a card.
+               description: |
+                 Card headers can contain images as well as the title of a card and an actions menu
+                 represented by the right-aligned kebab. In most cases, your card should include a
+                 header. The only exceptions are when cards being used as a layout element to
+                 create a white background behind other content.
+          -->
           <slot name="header"></slot>
+          <!-- summary: Communicates the title of a card if it's not included in the header.
+               description: |
+                 If a card will be utilized as a selectable and clickable card, the title
+                 needs to be made as a linked text to trigger action and indicate interaction.
+          -->
           <slot id="title" name="title" ?hidden="${__classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('title')}"></slot>
         </header>
+        <!-- summary: The container for *body* content -->
         <div id="body"
              part="body"
              class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty(null) })}">
+          <!-- summary: Body. Provides details about the item.
+               description: |
+                 A card body can include any combination of static text and/or active content.
+          -->
           <slot></slot>
         </div>
+        <!-- summary: The container for *footer* content -->
         <footer id="footer"
                 part="footer"
                 class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('footer') })}">
+          <!-- summary: Contains external links, actions, or static text at the bottom of a card. -->
           <slot name="footer"></slot>
         </footer>
       </article>
@@ -49,7 +295,7 @@ let PfCard = class PfCard extends LitElement {
 };
 _PfCard_slots = new WeakMap();
 PfCard.styles = [style];
-PfCard.version = "4.1.0";
+PfCard.version = "4.3.0";
 __decorate([
     property({ reflect: true })
 ], PfCard.prototype, "size", void 0);

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,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAmD9E,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAWL;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D;;WAEG;QACmE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D,wBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAErE,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;mDAExB,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;;;sBAIzD,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;yBAK3C,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAItE,CAAC;IACJ,CAAC;;;AAhDe,aAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAQrB;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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-card.css';\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 * @summary Gives a preview of information in a small layout\n * @slot header\n *       When included, defines the contents of a card. Card headers can contain images as well as\n *       the title of a card and an actions menu represented by the right-aligned kebab.\n *       In most cases, your card should include a header. The only exceptions are when cards being\n *       used as a layout element to create a white background behind other content.\n * @slot title\n *       Communicates the title of a card if it's not included in the header.\n *       If a card will be utilized as a selectable and clickable card, the title needs to be made as a linked text to trigger action and indicate interaction.\n * @slot - Body. Provides details about the item. A card body can include any combination of static\n *         text and/or active content.\n * @slot footer\n *       Contains external links, actions, or static text at the bottom of a card.\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 * @cssprop {<color>} [--pf-c-card--BackgroundColor=#ffffff]\n * @cssprop {<color>} [--pf-c-card--BoxShadow=0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)]\n * @cssprop {<color>} [--pf-c-card--size-compact__body--FontSize=.875rem]\n * @cssprop {<color>} [--pf-c-card--size-compact__footer--FontSize=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--first-child--PaddingTop=1.5rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingRight=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingBottom=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact--child--PaddingLeft=1rem]\n * @cssprop {<color>} [--pf-c-card--size-compact__title--not--last-child--PaddingBottom=.5rem]\n * @cssprop {<color>} [--pf-c-card--size-large__title--FontSize=1.25rem]\n * @cssprop {<color>} [--pf-c-card--size-large--first-child--PaddingTop=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingRight=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingBottom=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large--child--PaddingLeft=2rem]\n * @cssprop {<color>} [--pf-c-card--size-large__title--not--last-child--PaddingBottom=1.5rem]\n * @cssprop {<color>} [--pf-c-card--m-flat--BorderWidth=1px solid #d2d2d2]\n * @cssprop {<color>} [--pf-c-card--m-plain--BoxShadow=none]\n * @cssprop {<color>} [--pf-c-card--m-plain--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-card--m-rounded--BorderRadius=3px]\n * @cssprop {<color>} [--pf-c-card--m-full-height--Height=100]\n * @cssprop {<color>} [--pf-c-card__title--FontFamily=\"RedHatDisplayUpdated\", helvetica, arial, sans-serif]\n * @cssprop {<color>} [--pf-c-card__title--FontSize=1rem]\n * @cssprop {<color>} [--pf-c-card__title--FontWeight=700]\n */\n@customElement('pf-card')\nexport class PfCard extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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  #slots = new SlotController(this, 'header', 'title', null, 'footer');\n\n  render(): TemplateResult<1> {\n    return html`\n      <article>\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('header') })}\">\n          <slot name=\"header\"></slot>\n          <slot id=\"title\" name=\"title\" ?hidden=\"${this.#slots.isEmpty('title')}\"></slot>\n        </header>\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: this.#slots.isEmpty(null) })}\">\n          <slot></slot>\n        </div>\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('footer') })}\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\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,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAc9E,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAWL;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D;;WAEG;QACmE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D,wBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;;IAErE,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;yBAKU,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;;;;;;;;;mDAcxB,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;sBAKzD,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;yBAU3C,QAAQ,CAAC,EAAE,KAAK,EAAE,uBAAA,IAAI,qBAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;KAKtE,CAAC;IACJ,CAAC;;;AApEe,aAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAQrB;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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport style from './pf-card.css';\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 * @summary Gives a preview of information in a small layout\n * @alias Card\n */\n@customElement('pf-card')\nexport class PfCard extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [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  #slots = new SlotController(this, 'header', 'title', null, 'footer');\n\n  render(): TemplateResult<1> {\n    return html`\n      <article>\n        <!-- summary: The container for *header* content -->\n        <header id=\"header\"\n                part=\"header\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('header') })}\">\n          <!-- summary: When included, defines the contents of a card.\n               description: |\n                 Card headers can contain images as well as the title of a card and an actions menu\n                 represented by the right-aligned kebab. In most cases, your card should include a\n                 header. The only exceptions are when cards being used as a layout element to\n                 create a white background behind other content.\n          -->\n          <slot name=\"header\"></slot>\n          <!-- summary: Communicates the title of a card if it's not included in the header.\n               description: |\n                 If a card will be utilized as a selectable and clickable card, the title\n                 needs to be made as a linked text to trigger action and indicate interaction.\n          -->\n          <slot id=\"title\" name=\"title\" ?hidden=\"${this.#slots.isEmpty('title')}\"></slot>\n        </header>\n        <!-- summary: The container for *body* content -->\n        <div id=\"body\"\n             part=\"body\"\n             class=\"${classMap({ empty: this.#slots.isEmpty(null) })}\">\n          <!-- summary: Body. Provides details about the item.\n               description: |\n                 A card body can include any combination of static text and/or active content.\n          -->\n          <slot></slot>\n        </div>\n        <!-- summary: The container for *footer* content -->\n        <footer id=\"footer\"\n                part=\"footer\"\n                class=\"${classMap({ empty: this.#slots.isEmpty('footer') })}\">\n          <!-- summary: Contains external links, actions, or static text at the bottom of a card. -->\n          <slot name=\"footer\"></slot>\n        </footer>\n      </article>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-card': PfCard;\n  }\n}\n"]}

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

@@ -1,18 +1,33 @@
 :host {
+  /** MarginBottom for the chip group list */
   --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for the chip group list */
   --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** PaddingTop for the chip group category */
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingRight for the chip group category */
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingBottom for the chip group category */
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** PaddingLeft for the chip group category */
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  /** BorderRadius for the chip group category */
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+  /** BackgroundColor for the chip group category */
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+  /** MarginRight for the chip group label */
   --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+  /** FontSize for the chip group label */
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** MaxWidth for the chip group label */
   --pf-c-chip-group__label--MaxWidth: 18ch;
+  /** MarginTop for the chip group close button */
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginBottom for the chip group close button */
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1);
+  /** MarginRight for chip group list items */
   --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** MarginBottom for chip group list items */
   --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
   display: inline-flex;
   flex-wrap: wrap;

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

@@ -13,21 +13,6 @@ export declare class PfChipGroupRemoveEvent extends Event {
  * @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 - `<pf-chip>` elements.
- * @cssprop [--pf-c-chip-group__list--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__list--MarginRight=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group--m-category--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip-group--m-category--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]
- * @cssprop [--pf-c-chip-group--m-category--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]
- * @cssprop [--pf-c-chip-group__label--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]
- * @cssprop [--pf-c-chip-group__label--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
- * @cssprop [--pf-c-chip-group__label--MaxWidth=18ch]
- * @cssprop [--pf-c-chip-group__close--MarginTop=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__close--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]
- * @cssprop [--pf-c-chip-group__list-item--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
- * @cssprop [--pf-c-chip-group__list-item--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]
  */
 export declare class PfChipGroup extends LitElement {
     #private;