@patternfly/elements 2.0.5 → 2.2.0

package/pf-button/BaseButton.js

@@ -9,14 +9,14 @@ import { css } from "lit";
 const styles = css `:host{display:inline-block;height:max-content}:host([hidden]){display:none!important}[hidden]{display:none!important}button{cursor:pointer;position:relative;font-family:inherit}button{border-width:0;border-style:solid}button::after{position:absolute;inset:0 0 0 0;content:"";border-style:solid}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) #container,:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{pointer-events:none;cursor:default}[part=icon]{display:none;pointer-events:none}.hasIcon{position:relative;display:flex;align-items:center}.hasIcon [part=icon]{display:inline-flex;align-items:center;position:absolute;width:16px}:host(:not([disabled])) .hasIcon [part=icon]{cursor:pointer}[part=icon] ::slotted(*){width:16px;max-width:16px;height:16px;max-height:16px}.hasIcon button{position:absolute;inset:0}`;
 /**
  * Base button class
- *
+ * @csspart button - Internal button element
  * @csspart icon - Container for the icon slot
  * @slot icon
  *       Contains the button's icon or state indicator, e.g. a spinner.
  * @slot
  *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.
  */
-export class BaseButton extends LitElement {
+class BaseButton extends LitElement {
     constructor() {
         super(...arguments);
         _BaseButton_instances.add(this);
@@ -30,10 +30,11 @@ export class BaseButton extends LitElement {
     render() {
         const { hasIcon } = this;
         return html `
-      <button type="${ifDefined(this.type)}"
+      <button aria-label="${ifDefined(this.label)}"
               class="${classMap({ hasIcon })}"
+              part="button"
+              type="${ifDefined(this.type)}"
               value="${ifDefined(this.value)}"
-              aria-label="${ifDefined(this.label)}"
               @click="${__classPrivateFieldGet(this, _BaseButton_instances, "m", _BaseButton_onClick)}"
               ?disabled="${this.disabled || __classPrivateFieldGet(this, _BaseButton_internals, "f").formDisabled}">
         <slot id="icon" part="icon" aria-hidden="true" name="icon">${this.renderDefaultIcon()}</slot>
@@ -75,4 +76,5 @@ __decorate([
 __decorate([
     property()
 ], BaseButton.prototype, "icon", void 0);
+export { BaseButton };
 //# sourceMappingURL=BaseButton.js.map

package/pf-button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA4C7C,CAAC;IA1CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;sBACO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;uBACrB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;4BAChB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACzB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,oBAAoB;QAClC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;KACnC;AACH,CAAC;AAhEe,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,yBAAc,GAAG,IAAI,CAAC;AAEtB,4BAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGlE;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe","sourcesContent":["import type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n *\n * @csspart icon - Container for the icon slot\n * @slot icon\n *       Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly formAssociated = true;\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\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  /** Changes the size of the button. */\n  abstract size?: 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  abstract danger: unknown;\n\n  #internals = new InternalsController(this);\n\n  protected get hasIcon() {\n    return !!this.icon;\n  }\n\n  override render() {\n    const { hasIcon } = this;\n    return html`\n      <button type=\"${ifDefined(this.type)}\"\n              class=\"${classMap({ hasIcon })}\"\n              value=\"${ifDefined(this.value)}\"\n              aria-label=\"${ifDefined(this.label)}\"\n              @click=\"${this.#onClick}\"\n              ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n        <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n        <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n      </button>\n    `;\n  }\n\n  protected async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    switch (this.type) {\n      case 'reset':\n        return this.#internals.reset();\n      default:\n        return this.#internals.submit();\n    }\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   *\n   * @example ```html\n   *          <base-icon icon=${this.icon}></base-icon>\n   *          ```\n   */\n  protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}
+{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,MAAsB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA6C7C,CAAC;IA3CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;4BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;sBAEtB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACpB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,oBAAoB;QAClC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;KACnC;AACH,CAAC;AAjEe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,4BAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAGlE;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe;SApBN,UAAU","sourcesContent":["import type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n * @csspart button - Internal button element\n * @csspart icon - Container for the icon slot\n * @slot icon\n *       Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly formAssociated = true;\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\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  /** Changes the size of the button. */\n  abstract size?: 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  abstract danger: unknown;\n\n  #internals = new InternalsController(this);\n\n  protected get hasIcon() {\n    return !!this.icon;\n  }\n\n  override render() {\n    const { hasIcon } = this;\n    return html`\n      <button aria-label=\"${ifDefined(this.label)}\"\n              class=\"${classMap({ hasIcon })}\"\n              part=\"button\"\n              type=\"${ifDefined(this.type)}\"\n              value=\"${ifDefined(this.value)}\"\n              @click=\"${this.#onClick}\"\n              ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n        <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n        <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n      </button>\n    `;\n  }\n\n  protected async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    switch (this.type) {\n      case 'reset':\n        return this.#internals.reset();\n      default:\n        return this.#internals.submit();\n    }\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   *\n   * @example ```html\n   *          <base-icon icon=${this.icon}></base-icon>\n   *          ```\n   */\n  protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}

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

@@ -3,7 +3,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-spinner/pf-spinner.js';
 export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' | 'link');
 /**
- * A button is a box area or text that communicates and triggers user actions when
+ * A **button** is a box area or text that communicates and triggers user actions when
  * clicked or selected. Buttons can be used to communicate and immediately trigger
  * actions a user can take in an application, like submitting a form, canceling a
  * process, or creating a new object. Buttons can also be used to take a user to a

package/pf-button/pf-button.js

@@ -9,7 +9,7 @@ import '@patternfly/elements/pf-spinner/pf-spinner.js';
 import { css } from "lit";
 const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c));font-size:var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400));line-height:var(--pf-c-button--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))}:host,button{border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}::slotted(pf-icon),pf-icon{color:currentColor}button::after{border-color:var(--pf-c-button--after--BorderColor,transparent);border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px));border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}button:active{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--active--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--active--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--active--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:focus{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--focus--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--focus--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--focus--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:hover{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--hover--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--hover--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--hover--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}:host([warning]) button{color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))}:host([warning]) button:active{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--active--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:focus{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--focus--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--focus--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:hover{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--hover--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--hover--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([disabled][warning]) button{pointer-events:none;cursor:default;color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host([plain]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent)}:host([plain]) button{--pf-c-button--after--BorderWidth:0;--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));--pf-c-button--disabled--Color:var(--pf-c-button--m-plain--disabled--Color,\n    var(--pf-global--disabled-color--200, #d2d2d2));color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));background-color:var(--pf-c-button--m-plain--BackgroundColor,transparent)}:host([plain]) button:active{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--active--BackgroundColor,\n    tranparent)}:host([plain]) button:focus{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--focus--BackgroundColor,\n    transparent)}:host([plain]) button:hover{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--hover--BackgroundColor,\n    transparent)}:host([loading][plain]) [part=icon],:host([plain]) .hasIcon [part=icon]{left:16px}:host([plain]) button:disabled,:host([plain]) button[aria-disabled=true],:host([plain][disabled]),:host([plain][disabled]) button,:host([plain][disabled][variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-c-button--m-plain--disabled--Color,var(--pf-global--disabled--color--200,#d2d2d2)))}.hasIcon{gap:calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,var(--pf-global--spacer--xs,.25rem)))}.hasIcon [part=icon]{--pf-icon--size:16px;position:relative}:host([icon-position=right]) .hasIcon [part=icon],:host([icon-position=right][loading]) [part=icon]{order:1}:host([icon-position=right]) .hasIcon button{padding-left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));padding-right:calc(16px + 8px + var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)))}:host([loading]) button{position:relative;display:flex;align-items:center}:host([loading]) button [part=icon]{display:inline-block;z-index:1;position:absolute;cursor:pointer;top:var(--pf-c-button__progress--Top,50%);left:var(--pf-c-button__progress--Left,var(--pf-global--spacer--md,1rem));line-height:1;transform:translate(var(--pf-c-button__progress--TranslateX,0),var(--pf-c-button__progress--TranslateY,-50%));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host([loading][danger]),:host([loading][variant=primary]:not([plain])){--pf-c-spinner--Color:white}:host([loading]:not([plain])){--pf-c-button--PaddingRight:var(--pf-c-button--m-in-progress--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-in-progress--PaddingLeft,\n    calc(\n      var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) button{padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))}:host([variant=secondary]){--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent)}:host([variant=secondary]) button{color:var(--pf-c-button--m-secondary--Color,var(--pf-global--primary-color--100,#06c));background-color:var(--pf-c-button--m-secondary--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c))}:host([variant=secondary]) button:active{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--active--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--active--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--active--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent)}:host([variant=secondary]) button:focus{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--focus--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--focus--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--focus--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent)}:host([variant=secondary]) button:hover{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--hover--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--hover--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--hover--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--hover--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent)}:host([variant=secondary][danger]) button{color:var(--pf-c-button--m-secondary--m-danger--Color,var(--pf-global--danger--color--100,#c9190b));background-color:var(--pf-c-button--m-secondary--m-danger--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:active{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:focus{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:hover{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=tertiary]) button{--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));color:var(--pf-c-button--m-tertiary--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-tertiary--BackgroundColor,transparent)}:host([variant=tertiary]) button:active{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--active--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:focus{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:hover{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=control]) button{--pf-c-button--BorderRadius:var(--pf-c-button--m-control--BorderRadius, 0);--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-control--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));--pf-c-button--after--BorderRadius:0;--pf-c-button--after--BorderWidth:var(--pf-c-button--m-control--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));--pf-c-button--after--BorderColor:var(--pf-c-button--m-control--after--BorderTopColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderRightColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderBottomColor,\n      var(--pf-global--BorderColor--200, #8a8d90)) var(--pf-c-button--m-control--after--BorderLeftColor,\n      var(--pf-global--BorderColor--300, #f0f0f0));color:var(--pf-c-button--m-control--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-control--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff))}:host([variant=control]) button:active{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--active--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--active--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:focus{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--focus--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:hover{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:active::after{border-block-end-width:var(--pf-c-button--m-control--active--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:focus::after{border-block-end-width:var(--pf-c-button--m-control--focus--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:hover::after{border-block-end-width:var(--pf-c-button--m-control--hover--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=link]) button{color:var(--pf-c-button--m-link--Color,var(--pf-global--link--Color,#06c))}:host([variant=link]) button{background-color:var(--pf-c-button--m-link--BackgroundColor,var(--pf-c-button--m-link--hover--BackgroundColor,transparent))}:host([variant=link][inline]),:host([variant=link][inline]) button{display:inline}:host([variant=link][inline]){--pf-c-button--PaddingTop:0;--pf-c-button--PaddingLeft:0;--pf-c-button--PaddingBottom:0;--pf-c-button--PaddingRight:0}:host([variant=link][inline]) button:hover{text-decoration:var(--pf-c-button--m-link--m-inline--hover--TextDecoration,var(--pf-global--link--TextDecoration--hover,underline))}:host([variant=link]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-link--disabled--BackgroundColor, transparent)}:host(:hover){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--hover--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:focus),:host(:focus-within){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--focus--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:not([inline])) button:active{--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host(:not([inline]):has(button:active)){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host([variant=link][danger]) button{--pf-c-button--m-danger--Color:var(--pf-c-button--m-link--m-danger--Color,\n      var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent)}:host([variant=link][danger]) button:hover{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--hover--Color,\n      var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent)}:host([variant=link][danger]) button:active{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:has(button:active)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:is(:focus,:focus-within)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--focus--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent)}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:is(:disabled,[aria-disabled=true])) button::after{border-color:var(--pf-c-button--disabled--after--BorderColor,transparent)}:host([block]),:host([block]) button{display:flex;width:100%;justify-content:center}:host([size=large]) button{--pf-c-button--PaddingTop:var(--pf-c-button--m-display-lg--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingRight:var(--pf-c-button--m-display-lg--PaddingRight,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--PaddingBottom:var(--pf-c-button--m-display-lg--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-display-lg--PaddingLeft,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--FontWeight:var(--pf-c-button--m-display-lg--FontWeight,\n    var(--pf-global--FontWeight--bold, 700))}:host([size=small]) button{--pf-c-button--FontSize:var(--pf-c-button--m-small--FontSize,\n    var(--pf-global--FontSize--md, 1rem))}:host([danger]) button{color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))}`;
 /**
- * A button is a box area or text that communicates and triggers user actions when
+ * A **button** is a box area or text that communicates and triggers user actions when
  * clicked or selected. Buttons can be used to communicate and immediately trigger
  * actions a user can take in an application, like submitting a form, canceling a
  * process, or creating a new object. Buttons can also be used to take a user to a

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;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,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,CAAC;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":";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"]}

package/pf-card/BaseCard.js

@@ -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
  */
-export class BaseCard extends LitElement {
+class BaseCard extends LitElement {
     constructor() {
         super(...arguments);
         this.slots = new SlotController(this, 'header', null, 'footer');
@@ -48,4 +48,5 @@ export 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,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,CAAC","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,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"]}

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

@@ -1,6 +1,6 @@
 import { BaseCard } from './BaseCard.js';
 /**
- * A card is a square or rectangular container that can contain any kind of content.
+ * A **card** is a square or rectangular container that can contain any kind of content.
  * Cards symbolize units of information, and each one acts as an entry point for
  * users to access more details. For example, in dashboards and catalog views, cards
  * function as a preview of a detailed page. Cards may also be used in data displays

package/pf-card/pf-card.js

@@ -5,7 +5,7 @@ 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));font-size:var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-card__title--FontWeight,var(--pf-global--FontWeight--bold,700));margin-block:0}[part=footer]{font-size:var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));margin-block-start:auto}`;
 import { BaseCard } from './BaseCard.js';
 /**
- * A card is a square or rectangular container that can contain any kind of content.
+ * A **card** is a square or rectangular container that can contain any kind of content.
  * Cards symbolize units of information, and each one acts as an entry point for
  * users to access more details. For example, in dashboards and catalog views, cards
  * function as a preview of a detailed page. Cards may also be used in data displays

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;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,CAAC;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;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"]}

package/pf-clipboard-copy/BaseClipboardCopy.js

@@ -12,7 +12,7 @@ export class ClipboardCopyCopiedEvent extends ComposedEvent {
  * Clipboard Copy
  * @slot - Place element content here
  */
-export class BaseClipboardCopy extends LitElement {
+class BaseClipboardCopy extends LitElement {
     /**
      * Copy the current value to the clipboard.
      */
@@ -22,4 +22,5 @@ export class BaseClipboardCopy extends LitElement {
     }
 }
 BaseClipboardCopy.styles = [styles];
+export { BaseClipboardCopy };
 //# sourceMappingURL=BaseClipboardCopy.js.map

package/pf-clipboard-copy/BaseClipboardCopy.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseClipboardCopy.js","sourceRoot":"","sources":["BaseClipboardCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAGrD,MAAM,OAAO,wBAAyB,SAAQ,aAAa;IACzD,YACS,IAAY;QAEnB,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,SAAI,GAAJ,IAAI,CAAQ;IAGrB,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAgB,iBAAkB,SAAQ,UAAU;IAKxD;;OAEG;IACH,KAAK,CAAC,IAAI;QACR,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;;AAVe,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport styles from './BaseClipboardCopy.css';\n\nexport class ClipboardCopyCopiedEvent extends ComposedEvent {\n  constructor(\n    public text: string\n  ) {\n    super('copy');\n  }\n}\n\n/**\n * Clipboard Copy\n * @slot - Place element content here\n */\nexport abstract class BaseClipboardCopy extends LitElement {\n  static readonly styles = [styles];\n\n  abstract value: string;\n\n  /**\n   * Copy the current value to the clipboard.\n   */\n  async copy() {\n    await navigator.clipboard.writeText(this.value);\n    this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));\n  }\n}\n"]}
+{"version":3,"file":"BaseClipboardCopy.js","sourceRoot":"","sources":["BaseClipboardCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAGrD,MAAM,OAAO,wBAAyB,SAAQ,aAAa;IACzD,YACS,IAAY;QAEnB,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,SAAI,GAAJ,IAAI,CAAQ;IAGrB,CAAC;CACF;AAED;;;GAGG;AACH,MAAsB,iBAAkB,SAAQ,UAAU;IAKxD;;OAEG;IACH,KAAK,CAAC,IAAI;QACR,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;;AAVe,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;SADd,iBAAiB","sourcesContent":["import { LitElement } from 'lit';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport styles from './BaseClipboardCopy.css';\n\nexport class ClipboardCopyCopiedEvent extends ComposedEvent {\n  constructor(\n    public text: string\n  ) {\n    super('copy');\n  }\n}\n\n/**\n * Clipboard Copy\n * @slot - Place element content here\n */\nexport abstract class BaseClipboardCopy extends LitElement {\n  static readonly styles = [styles];\n\n  abstract value: string;\n\n  /**\n   * Copy the current value to the clipboard.\n   */\n  async copy() {\n    await navigator.clipboard.writeText(this.value);\n    this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@ import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
 /**
- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.
+ * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
  *
  * @slot - Place content to copy here, or use the `value` attribute
  * @slot actions - Place additional action buttons here

package/pf-clipboard-copy/pf-clipboard-copy.js

@@ -13,7 +13,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
 const sleep = (ms) => new Promise(r => setTimeout(r, ms));
 /**
- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.
+ * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
  *
  * @slot - Place content to copy here, or use the `value` attribute
  * @slot actions - Place additional action buttons here
@@ -108,17 +108,23 @@ let PfClipboardCopy = class PfClipboardCopy extends BaseClipboardCopy {
         this.requestUpdate();
     }
 };
-_PfClipboardCopy_copied = new WeakMap(), _PfClipboardCopy_mo = new WeakMap(), _PfClipboardCopy_instances = new WeakSet(), _PfClipboardCopy_onClick = function _PfClipboardCopy_onClick() {
+_PfClipboardCopy_copied = new WeakMap();
+_PfClipboardCopy_mo = new WeakMap();
+_PfClipboardCopy_instances = new WeakSet();
+_PfClipboardCopy_onClick = function _PfClipboardCopy_onClick() {
     this.expanded = !this.expanded;
-}, _PfClipboardCopy_onChange = function _PfClipboardCopy_onChange(e) {
+};
+_PfClipboardCopy_onChange = function _PfClipboardCopy_onChange(e) {
     const { value } = e.target || HTMLTextAreaElement;
     this.value = value;
-}, _PfClipboardCopy_onMutation = function _PfClipboardCopy_onMutation() {
+};
+_PfClipboardCopy_onMutation = function _PfClipboardCopy_onMutation() {
     if (this.childNodes.length > 0) {
         this.value = this.getAttribute('value') ?? __classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_dedent).call(this, Array.from(this.childNodes, child => (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')
             .join(''));
     }
-}, _PfClipboardCopy_dedent = function _PfClipboardCopy_dedent(str) {
+};
+_PfClipboardCopy_dedent = function _PfClipboardCopy_dedent(str) {
     const stripped = str.replace(/^\n/, '');
     const match = stripped.match(/^\s+/);
     return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;

package/pf-clipboard-copy/pf-clipboard-copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { BaseClipboardCopy } from './BaseClipboardCopy.js';\n\nimport styles from './pf-clipboard-copy.css';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-tooltip/pf-tooltip.js';\n\nconst sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));\n\n/**\n * The clipboard copy component allows users to quickly and easily copy content to their clipboard.\n *\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends BaseClipboardCopy {\n  static readonly styles = [...BaseClipboardCopy.styles, styles];\n\n  static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };\n\n  @property({ attribute: 'click-tip' }) clickTip = 'Copied';\n\n  @property({ attribute: 'hover-tip' }) hoverTip = 'Copy';\n\n  @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input';\n\n  @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content';\n\n  @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n  @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n  @property({ type: Boolean, reflect: true }) block = false;\n\n  @property({ type: Boolean, reflect: true }) code = false;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Implies not `inline`.\n   */\n  @property({ type: Boolean, reflect: true }) expandable = false;\n\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Implies not expandable. Overrules `expandable`.\n   */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  @property() override value = '';\n\n  #copied = false;\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#mo.observe(this, { characterData: true });\n    this.#onMutation();\n  }\n\n  /**\n   * @todo fix the collapsed whitespace between the end of the \"inline-compact\" variant and the text node.\n   * This demonstrates the collapsed whitespace issue.\n   * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.\n   */\n  render() {\n    const { expanded, expandable, inline, compact, code, block, readonly } = this;\n    return html`\n      <div class=\"container ${classMap({ code, expanded, inline, compact, block, })}\">\n        <div id=\"input-group\">\n          <div id=\"wrapper\">\n            <pf-button id=\"expand-button\"\n                        plain\n                        variant=\"control\"\n                        label=\"EXPAND\"\n                        ?inert=\"${!expandable}\"\n                        @click=\"${this.#onClick}\">\n              <pf-icon icon=\"chevron-right\"></pf-icon>\n            </pf-button>\n          </div>\n          <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n          <input\n              ?hidden=\"${inline || compact}\"\n              ?disabled=\"${expanded || readonly}\"\n              .value=\"${this.value}\"\n              @input=\"${this.#onChange}\"\n              aria-label=\"${this.textAriaLabel}\">\n          <pf-tooltip>\n            <pf-button id=\"copy-button\"\n                        plain\n                        variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n                        label=\"${this.hoverTip}\"\n                        size=\"lg\"\n                        @click=\"${this.copy}\">\n              <pf-icon icon=\"copy\"></pf-icon>\n            </pf-button>\n            <span slot=\"content\">${this.#copied ? this.clickTip : this.hoverTip}</span>\n          </pf-tooltip>\n          <slot name=\"actions\"></slot>\n        </div>\n        <textarea .value=\"${this.value}\"\n                  .disabled=\"${this.readonly}\"\n                  ?hidden=\"${!(expandable && expanded)}\"\n                  @input=\"${this.#onChange}\">\n        </textarea>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    this.expanded = !this.expanded;\n  }\n\n  #onChange(e: Event) {\n    const { value } = e.target as HTMLInputElement || HTMLTextAreaElement;\n    this.value = value;\n  }\n\n  #onMutation() {\n    if (this.childNodes.length > 0) {\n      this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>\n        (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')\n        .join(''));\n    }\n  }\n\n  #dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n\n  override async copy() {\n    await super.copy();\n    await sleep(this.entryDelay);\n    this.#copied = true;\n    this.requestUpdate();\n    await sleep(this.exitDelay);\n    this.#copied = false;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-clipboard-copy': PfClipboardCopy;\n  }\n}\n"]}
+{"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;;;AAI3D,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;AAEvD,MAAM,KAAK,GAAG,CAAC,EAAW,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAEnE;;;;;GAKG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB;IAAtD;;;QAKwC,aAAQ,GAAG,QAAQ,CAAC;QAEpB,aAAQ,GAAG,MAAM,CAAC;QAEjB,kBAAa,GAAG,gBAAgB,CAAC;QAE/B,oBAAe,GAAG,cAAc,CAAC;QAEpB,eAAU,GAAG,GAAG,CAAC;QAElB,cAAS,GAAG,IAAI,CAAC;QAE1B,UAAK,GAAG,KAAK,CAAC;QAEd,SAAI,GAAG,KAAK,CAAC;QAEb,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACyC,eAAU,GAAG,KAAK,CAAC;QAEnB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAEf,YAAO,GAAG,KAAK,CAAC;QAEvC,UAAK,GAAG,EAAE,CAAC;QAEhC,kCAAU,KAAK,EAAC;QAEhB,8BAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,+DAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;IAyFvD,CAAC;IAvFC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,2BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAChD,uBAAA,IAAI,+DAAY,MAAhB,IAAI,CAAc,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC9E,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC;;;;;;;kCAOjD,CAAC,UAAU;kCACX,uBAAA,IAAI,4DAAS;;;;2BAIpB,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;;yBAErC,MAAM,IAAI,OAAO;2BACf,QAAQ,IAAI,QAAQ;wBACvB,IAAI,CAAC,KAAK;wBACV,uBAAA,IAAI,6DAAU;4BACV,IAAI,CAAC,aAAa;;;;mCAIX,SAAS,CAAC,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;iCACzD,IAAI,CAAC,QAAQ;;kCAEZ,IAAI,CAAC,IAAI;;;mCAGR,uBAAA,IAAI,+BAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;;;;4BAInD,IAAI,CAAC,KAAK;+BACP,IAAI,CAAC,QAAQ;6BACf,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC;4BAC1B,uBAAA,IAAI,6DAAU;;;KAGrC,CAAC;IACJ,CAAC;IAyBQ,KAAK,CAAC,IAAI;QACjB,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7B,uBAAA,IAAI,2BAAW,IAAI,MAAA,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5B,uBAAA,IAAI,2BAAW,KAAK,MAAA,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;;;;IA9BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;+DAES,CAAQ;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAA0B,IAAI,mBAAmB,CAAC;IACtE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACrB,CAAC;;IAGC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,uBAAA,IAAI,2DAAQ,MAAZ,IAAI,EAAS,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,CAC1F,CAAC,KAAK,YAAY,OAAO,IAAI,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;aACpF,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;KACd;AACH,CAAC;2DAEO,GAAW;IACjB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9E,CAAC;AAtHe,sBAAM,GAAG,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,AAAxC,CAAyC;AAExD,iCAAiB,GAAmB,EAAE,GAAG,iBAAiB,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAAnF,CAAoF;AAEtE;IAArC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAAqB;AAEpB;IAArC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAAmB;AAEjB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDAAkC;AAE/B;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;wDAAkC;AAEpB;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;mDAAkB;AAElB;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAAkB;AAE1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAc;AAEb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAKjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAoB;AAEnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAKjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AAEvC;IAApB,QAAQ,EAAE;8CAAqB;AArCrB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkI3B;SAlIY,eAAe","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { BaseClipboardCopy } from './BaseClipboardCopy.js';\n\nimport styles from './pf-clipboard-copy.css';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-tooltip/pf-tooltip.js';\n\nconst sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));\n\n/**\n * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.\n *\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends BaseClipboardCopy {\n  static readonly styles = [...BaseClipboardCopy.styles, styles];\n\n  static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };\n\n  @property({ attribute: 'click-tip' }) clickTip = 'Copied';\n\n  @property({ attribute: 'hover-tip' }) hoverTip = 'Copy';\n\n  @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input';\n\n  @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content';\n\n  @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n  @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n  @property({ type: Boolean, reflect: true }) block = false;\n\n  @property({ type: Boolean, reflect: true }) code = false;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Implies not `inline`.\n   */\n  @property({ type: Boolean, reflect: true }) expandable = false;\n\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Implies not expandable. Overrules `expandable`.\n   */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  @property() override value = '';\n\n  #copied = false;\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#mo.observe(this, { characterData: true });\n    this.#onMutation();\n  }\n\n  /**\n   * @todo fix the collapsed whitespace between the end of the \"inline-compact\" variant and the text node.\n   * This demonstrates the collapsed whitespace issue.\n   * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.\n   */\n  render() {\n    const { expanded, expandable, inline, compact, code, block, readonly } = this;\n    return html`\n      <div class=\"container ${classMap({ code, expanded, inline, compact, block, })}\">\n        <div id=\"input-group\">\n          <div id=\"wrapper\">\n            <pf-button id=\"expand-button\"\n                        plain\n                        variant=\"control\"\n                        label=\"EXPAND\"\n                        ?inert=\"${!expandable}\"\n                        @click=\"${this.#onClick}\">\n              <pf-icon icon=\"chevron-right\"></pf-icon>\n            </pf-button>\n          </div>\n          <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n          <input\n              ?hidden=\"${inline || compact}\"\n              ?disabled=\"${expanded || readonly}\"\n              .value=\"${this.value}\"\n              @input=\"${this.#onChange}\"\n              aria-label=\"${this.textAriaLabel}\">\n          <pf-tooltip>\n            <pf-button id=\"copy-button\"\n                        plain\n                        variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n                        label=\"${this.hoverTip}\"\n                        size=\"lg\"\n                        @click=\"${this.copy}\">\n              <pf-icon icon=\"copy\"></pf-icon>\n            </pf-button>\n            <span slot=\"content\">${this.#copied ? this.clickTip : this.hoverTip}</span>\n          </pf-tooltip>\n          <slot name=\"actions\"></slot>\n        </div>\n        <textarea .value=\"${this.value}\"\n                  .disabled=\"${this.readonly}\"\n                  ?hidden=\"${!(expandable && expanded)}\"\n                  @input=\"${this.#onChange}\">\n        </textarea>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    this.expanded = !this.expanded;\n  }\n\n  #onChange(e: Event) {\n    const { value } = e.target as HTMLInputElement || HTMLTextAreaElement;\n    this.value = value;\n  }\n\n  #onMutation() {\n    if (this.childNodes.length > 0) {\n      this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>\n        (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')\n        .join(''));\n    }\n  }\n\n  #dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n\n  override async copy() {\n    await super.copy();\n    await sleep(this.entryDelay);\n    this.#copied = true;\n    this.requestUpdate();\n    await sleep(this.exitDelay);\n    this.#copied = false;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-clipboard-copy': PfClipboardCopy;\n  }\n}\n"]}

package/pf-code-block/BaseCodeBlock.js

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { css } from "lit";
 const styles = css `:host{display:block}[hidden]{display:none!important}`;
-export class BaseCodeBlock extends LitElement {
+class BaseCodeBlock extends LitElement {
     get content() {
         const script = this.querySelector('script[type]');
         if (script?.type !== 'text/javascript-sample' &&
@@ -19,4 +19,5 @@ export class BaseCodeBlock extends LitElement {
     }
 }
 BaseCodeBlock.styles = [styles];
+export { BaseCodeBlock };
 //# sourceMappingURL=BaseCodeBlock.js.map

package/pf-code-block/BaseCodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCodeBlock.js","sourceRoot":"","sources":["BaseCodeBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;AAIjC,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAKpD,IAAc,OAAO;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAoB,cAAc,CAAC,CAAC;QACrE,IACE,MAAM,EAAE,IAAI,KAAK,wBAAwB;YACzC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE;YACnD,OAAO,EAAE,CAAC;SACX;aAAM;YACL,OAAO,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAES,MAAM,CAAC,GAAW;QAC1B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9E,CAAC;;AAnBe,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement } from 'lit';\n\nimport styles from './BaseCodeBlock.css';\n\nexport abstract class BaseCodeBlock extends LitElement {\n  static readonly styles = [styles];\n\n  abstract render(): TemplateResult;\n\n  protected get content() {\n    const script = this.querySelector<HTMLScriptElement>('script[type]');\n    if (\n      script?.type !== 'text/javascript-sample' &&\n      !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n      return '';\n    } else {\n      return script?.textContent ?? '';\n    }\n  }\n\n  protected dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n}\n"]}
+{"version":3,"file":"BaseCodeBlock.js","sourceRoot":"","sources":["BaseCodeBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;AAIjC,MAAsB,aAAc,SAAQ,UAAU;IAKpD,IAAc,OAAO;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAoB,cAAc,CAAC,CAAC;QACrE,IACE,MAAM,EAAE,IAAI,KAAK,wBAAwB;YACzC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE;YACnD,OAAO,EAAE,CAAC;SACX;aAAM;YACL,OAAO,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAES,MAAM,CAAC,GAAW;QAC1B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9E,CAAC;;AAnBe,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;SADd,aAAa","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement } from 'lit';\n\nimport styles from './BaseCodeBlock.css';\n\nexport abstract class BaseCodeBlock extends LitElement {\n  static readonly styles = [styles];\n\n  abstract render(): TemplateResult;\n\n  protected get content() {\n    const script = this.querySelector<HTMLScriptElement>('script[type]');\n    if (\n      script?.type !== 'text/javascript-sample' &&\n      !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n      return '';\n    } else {\n      return script?.textContent ?? '';\n    }\n  }\n\n  protected dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n}\n"]}

package/pf-code-block/pf-code-block.d.ts

@@ -1,6 +1,6 @@
 import { BaseCodeBlock } from './BaseCodeBlock.js';
 /**
- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
  *
  * @slot code
  *       The slot to put the code in

package/pf-code-block/pf-code-block.js

@@ -8,7 +8,7 @@ import { BaseCodeBlock } from './BaseCodeBlock.js';
 import { css } from "lit";
 const styles = css `:host{background-color:var(--pf-c-code-block--BackgroundColor,#f0f0f0);font-size:var(--pf-c-code-block__pre--FontSize, .875rem);font-family:var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)}#container{padding-top:var(--pf-c-code-block__content--PaddingTop,1rem);padding-right:var(--pf-c-code-block__content--PaddingRight,1rem);padding-bottom:var(--pf-c-code-block__content--PaddingBottom,1rem);padding-left:var(--pf-c-code-block__content--PaddingLeft,1rem)}#header{border-bottom:var(--pf-c-code-block__header--BorderBottomWidth,1px) solid var(--pf-c-code-block__header--BorderBottomColor,#d2d2d2)}#container{margin:0}pre{margin:0}slot[name=actions]{display:flex;justify-content:end}#expanded{display:inline}button{display:flex;background:0 0;border:none;padding:6px 16px 6px 0;color:#06c;cursor:pointer;font-size:16px}button svg{color:#151515;margin-right:12px;transition:.2s ease-in 0s}.expanded button svg{transform:rotate(-90deg)}`;
 /**
- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
  *
  * @slot code
  *       The slot to put the code in
@@ -57,9 +57,11 @@ let PfCodeBlock = class PfCodeBlock extends BaseCodeBlock {
     `;
     }
 };
-_PfCodeBlock_instances = new WeakSet(), _PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
+_PfCodeBlock_instances = new WeakSet();
+_PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
     this.expanded = !this.expanded;
-}, _PfCodeBlock_expandedContent_get = function _PfCodeBlock_expandedContent_get() {
+};
+_PfCodeBlock_expandedContent_get = function _PfCodeBlock_expandedContent_get() {
     return this.querySelector('script[data-expand]')?.textContent ?? '';
 };
 PfCodeBlock.styles = [...BaseCodeBlock.styles, styles];

package/pf-code-block/pf-code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IA+B/D,CAAC;IArBU,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,IAAI,CAAC,OAAO;qBACzB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC7B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;YAGjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;IA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACtE,CAAC;AAVe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAHlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB;SAlCY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { BaseCodeBlock } from './BaseCodeBlock.js';\nimport styles from './pf-code-block.css';\n\n/**\n * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n *\n * @slot code\n *       The slot to put the code in\n * @slot expandable-code\n *       The slot to put the code in that should be revealed when the \"Show more\" button is\n *       clicked to expand the code-block\n * @slot actions\n *       Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} expanded {@default `false`}\n *       Indicates if the code-block has been expanded\n * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}\n * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace`}\n */\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends BaseCodeBlock {\n  static readonly styles = [...BaseCodeBlock.styles, styles];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  #toggle() {\n    this.expanded = !this.expanded;\n  }\n\n  get #expandedContent(): string {\n    return this.querySelector('script[data-expand]')?.textContent ?? '';\n  }\n\n  override render() {\n    const { expanded } = this;\n    return html`\n      <div id=\"header\">\n        <div id=\"actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n      <div id=\"container\" class=\"${classMap({ expanded })}\">\n        <pre><code id=\"content\">${this.content}</code><code id=\"code-block-expand\"\n          ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n        <button ?hidden=\"${!this.#expandedContent}\"\n                @click=${this.#toggle}\n                aria-expanded=${this.expanded}\n                aria-controls=\"code-block-expand\">\n          <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path></svg>\n          ${!this.expanded ? 'Show more' : 'Show less'}\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-code-block': PfCodeBlock;\n  }\n}\n"]}
+{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,aAAa;IAA9C;;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IA+B/D,CAAC;IArBU,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,IAAI,CAAC,OAAO;qBACzB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC7B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;YAGjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;;IA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACtE,CAAC;AAVe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,AAApC,CAAqC;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAHlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB;SAlCY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { BaseCodeBlock } from './BaseCodeBlock.js';\nimport styles from './pf-code-block.css';\n\n/**\n * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n *\n * @slot code\n *       The slot to put the code in\n * @slot expandable-code\n *       The slot to put the code in that should be revealed when the \"Show more\" button is\n *       clicked to expand the code-block\n * @slot actions\n *       Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} expanded {@default `false`}\n *       Indicates if the code-block has been expanded\n * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}\n * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace`}\n */\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends BaseCodeBlock {\n  static readonly styles = [...BaseCodeBlock.styles, styles];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  #toggle() {\n    this.expanded = !this.expanded;\n  }\n\n  get #expandedContent(): string {\n    return this.querySelector('script[data-expand]')?.textContent ?? '';\n  }\n\n  override render() {\n    const { expanded } = this;\n    return html`\n      <div id=\"header\">\n        <div id=\"actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n      <div id=\"container\" class=\"${classMap({ expanded })}\">\n        <pre><code id=\"content\">${this.content}</code><code id=\"code-block-expand\"\n          ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n        <button ?hidden=\"${!this.#expandedContent}\"\n                @click=${this.#toggle}\n                aria-expanded=${this.expanded}\n                aria-controls=\"code-block-expand\">\n          <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path></svg>\n          ${!this.expanded ? 'Show more' : 'Show less'}\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-code-block': PfCodeBlock;\n  }\n}\n"]}

package/pf-icon/BaseIcon.d.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from 'lit';
 import { LitElement } from 'lit';
-export type URLGetter = (set: string, icon: string) => URL;
+export type URLGetter = (set: string, icon: string) => URL | string;
 /**
  * Icon component lazy-loads icons and allows custom icon sets
  *

package/pf-icon/BaseIcon.js

@@ -25,7 +25,7 @@ class IconLoadError extends ErrorEvent {
  * @fires error - Fired when an icon fails to load
  * @csspart fallback - Container for the fallback (i.e. slotted) content
  */
-export class BaseIcon extends LitElement {
+class BaseIcon extends LitElement {
     constructor() {
         super(...arguments);
         _BaseIcon_instances.add(this);
@@ -79,17 +79,23 @@ export class BaseIcon extends LitElement {
     async load() {
         const { set, icon, } = this;
         const getter = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getters.get(set) ?? __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getIconUrl;
-        let pathname = 'UNKNOWN ICON';
+        let spec = 'UNKNOWN ICON';
         if (set && icon) {
             try {
-                ({ pathname } = getter(set, icon));
-                const mod = await import(pathname);
+                const gotten = getter(set, icon);
+                if (gotten instanceof URL) {
+                    spec = gotten.pathname;
+                }
+                else {
+                    spec = gotten;
+                }
+                const mod = await import(spec);
                 this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;
                 await this.updateComplete;
                 this.dispatchEvent(new Event('load', { bubbles: true }));
             }
             catch (error) {
-                const event = new IconLoadError(pathname, error);
+                const event = new IconLoadError(spec, error);
                 __classPrivateFieldGet(this, _BaseIcon_logger, "f").error(error.message);
                 this.dispatchEvent(event);
             }
@@ -136,4 +142,5 @@ __decorate([
 __decorate([
     state()
 ], BaseIcon.prototype, "content", void 0);
+export { BaseIcon };
 //# sourceMappingURL=BaseIcon.js.map