@patternfly/elements 2.0.0-rc.4 → 2.0.0-rc.6

package/pf-avatar/BaseAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAI7C,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;IAuBhE,CAAC;IArBC,MAAM;QACJ,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,cAAc;QACpC,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKhB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AA/Be,iBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGrB;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n  constructor(public originalEvent: Event) {\n    super('load', { bubbles: true, composed: true });\n  }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n  static readonly styles = [style];\n\n  /** The URL to the user's custom avatar image. */\n  @property() src?: string;\n\n  /** The alt text for the avatar image. */\n  @property({ reflect: true }) alt?: string = 'Avatar image';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  render() {\n    const isDark = false; // TODO: later\n    return this.src != null ? html`\n      <img\n        size=${this.size}\n        alt=${this.alt ?? ''}\n        @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n        src=${this.src}>\n    ` : isDark ? html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n        <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n      </svg>\n    ` : html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n        <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n        <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n      </svg>\n      `;\n  }\n}\n"]}
+{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;QAE9D,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;IAsB3D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AAjCe,iBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGrB;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkC;AAGlB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n  constructor(public originalEvent: Event) {\n    super('load', { bubbles: true, composed: true });\n  }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n  static readonly styles = [style];\n\n  /** The URL to the user's custom avatar image. */\n  @property() src?: string;\n\n  /** The alt text for the avatar image. */\n  @property({ reflect: true }) alt?: string = 'Avatar image';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  /** Whether or not the Avatar image is dark */\n  @property({ type: Boolean, reflect: true }) dark = false;\n\n  render() {\n    return this.src != null ? html`\n      <img\n        size=${this.size}\n        alt=${this.alt ?? ''}\n        @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n        src=${this.src}>\n    ` : this.dark ? html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n        <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n      </svg>\n    ` : html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n        <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n        <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n      </svg>\n      `;\n  }\n}\n"]}

package/pf-avatar/README.md

@@ -0,0 +1,31 @@
+# PatternFly Elements Avatar
+
+`<pf-avatar>` is an element for displaying a user's avatar image. If the user in 
+question has provided a custom avatar, provide it and it will be displayed.
+
+Read more about Avatar in the [PatternFly Elements Avatar documentation](https://patternflyelements.org/components/avatar)
+
+##  Installation
+
+Load `<pf-avatar>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-avatar/pf-avatar.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-avatar/pf-avatar.js';
+```
+## Usage
+
+```html
+<pf-avatar alt="Michael Clayton" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
+```

package/pf-avatar/pf-avatar.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { property, customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
+import { customElement } from 'lit/decorators/custom-element.js';
 import { BaseAvatar } from './BaseAvatar.js';
 import { css } from "lit";
-const style = css `svg,\nimg {\n  width: var(--pf-c-avatar--Width, 24px);\n  height: var(--pf-c-avatar--Height, 24px);\n  border-radius: var(--pf-c-avatar--BorderRadius, var(--pf-global--BorderRadius--lg, 128px));\n  border:\n    var(--pf-c-avatar--BorderWidth, 0)\n    solid\n    var(--pf-c-avatar--BorderColor,\n      var(--pf-global--BorderColor--dark-100, #d2d2d2));\n}\n\n:host([border]) :is(img, svg) {\n  --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n}\n\n:host([border="dark"]) :is(img, svg) {\n  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor,\n      var(--pf-global--palette--black-700, #4f5255));\n}\n\n:host([size='sm']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width, 24px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height, 24px);\n}\n\n:host([size='md']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width, 36px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height, 36px);\n}\n\n:host([size='lg']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width, 72px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height, 72px);\n}\n\n:host([size='xl']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width, 128px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height, 128px);\n}\n`;
+const style = css `img,svg{width:var(--pf-c-avatar--Width,24px);height:var(--pf-c-avatar--Height,24px);border-radius:var(--pf-c-avatar--BorderRadius,var(--pf-global--BorderRadius--lg,128px));border:var(--pf-c-avatar--BorderWidth,0) solid var(--pf-c-avatar--BorderColor,var(--pf-global--BorderColor--dark-100,#d2d2d2))}:host([border]) :is(img,svg){--pf-c-avatar--BorderWidth:var(--pf-global--BorderWidth--sm, 1px)}:host([border=dark]) :is(img,svg){--pf-c-avatar--BorderColor:var(--pf-c-avatar--m-dark--BorderColor,\n      var(--pf-global--palette--black-700, #4f5255))}:host([size=sm]){--pf-c-avatar--Width:var(--pf-c-avatar--m-sm--Width, 24px);--pf-c-avatar--Height:var(--pf-c-avatar--m-sm--Height, 24px)}:host([size=md]){--pf-c-avatar--Width:var(--pf-c-avatar--m-md--Width, 36px);--pf-c-avatar--Height:var(--pf-c-avatar--m-md--Height, 36px)}:host([size=lg]){--pf-c-avatar--Width:var(--pf-c-avatar--m-lg--Width, 72px);--pf-c-avatar--Height:var(--pf-c-avatar--m-lg--Height, 72px)}:host([size=xl]){--pf-c-avatar--Width:var(--pf-c-avatar--m-xl--Width, 128px);--pf-c-avatar--Height:var(--pf-c-avatar--m-xl--Height, 128px)}`;
 /**
  * Avatar is an element for displaying a user's avatar image.
  *

package/pf-avatar/pf-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;IAIhE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkC;AAGjC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAyB;AAP1C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property, customElement } from 'lit/decorators.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light'|'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}
+{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAAwB,IAAI,CAAC;IAIhE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAkC;AAGjC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAyB;AAP1C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm'|'md'|'lg'|'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light'|'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}

package/pf-badge/BaseBadge.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { css } from "lit";
-const style = css `:host {\n  position: relative;\n  white-space: nowrap;\n  text-align: center;\n  display: inline-block;\n}`;
+const style = css `:host{position:relative;white-space:nowrap;text-align:center;display:inline-block}`;
 export class BaseBadge extends LitElement {
     render() {
         const { threshold, number, textContent } = this;

package/pf-badge/README.md

@@ -0,0 +1,57 @@
+# PatternFly Elements Badge
+         
+The `<pf-badge>` component provides a way to have small numerical descriptors for 
+for for for UI elements. To provide context to your badge, it is highly 
+encouraged that you also include an `aria-label` attribute in your markup.
+
+Read more about Badge in the [PatternFly Elements Badge documentation](https://patternflyelements.org/components/badge)
+
+##  Installation
+
+Load `<pf-badge>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-badge/pf-badge.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-badge/pf-badge.js';
+```
+
+## Usage
+
+```html
+<section>
+  <pf-badge aria-label="2 unread messages" number="2" threshold="10">2</pf-badge>
+</section>
+```
+
+Please refer to the [specification](https://www.w3.org/TR/wai-aria/#aria-label) for additional details.
+
+With the `threshold` attribute:
+
+```html
+<section>
+  <pf-badge number="1" threshold="10">1</pf-badge>
+  <pf-badge number="17" threshold="20">17</pf-badge>
+  <pf-badge number="900" threshold="100">900</pf-badge>
+</section>
+```
+
+With two state options for the `state` attribute:
+
+```html
+<section>
+  <pf-badge state="read" number="10">10</pf-badge>
+  <pf-badge state="unread" number="20">20</pf-badge>
+</section>
+```
+

package/pf-badge/pf-badge.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { BaseBadge } from './BaseBadge.js';
 import { css } from "lit";
-const styles = css `:host {\n  border-radius: var(--pf-c-badge--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 180em));\n  min-width: var(--pf-c-badge--MinWidth,\n    var(--pf-global--spacer--xl, 2rem));\n  padding-left: var(--pf-c-badge--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  padding-right: var(--pf-c-badge--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, 0.75em));\n  font-weight: var(--pf-c-badge--FontWeight,\n    var(--pf-theme--font-weight--bold, 700));\n  line-height: var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  color: var(--pf-c-badge--Color,\n    var(--pf-global--palette--black-900, #151515));\n  background-color: var(--pf-c-badge--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="read"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="unread"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c));\n}\n`;
+const styles = css `:host{border-radius:var(--pf-c-badge--BorderRadius,var(--pf-global--BorderRadius--lg,180em));min-width:var(--pf-c-badge--MinWidth,var(--pf-global--spacer--xl,2rem));padding-left:var(--pf-c-badge--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-right:var(--pf-c-badge--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, .75em));font-weight:var(--pf-c-badge--FontWeight,var(--pf-theme--font-weight--bold,700));line-height:var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));color:var(--pf-c-badge--Color,var(--pf-global--palette--black-900,#151515));background-color:var(--pf-c-badge--BackgroundColor,var(--pf-global--palette--black-200,#f0f0f0))}:host([state=read]){--pf-c-badge--Color:var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0))}:host([state=unread]){--pf-c-badge--Color:var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c))}`;
 /**
  * A badge is used to annotate other information like a label or an object name.
  *

package/pf-badge/pf-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAII,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AAEV;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A badge is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n  static readonly styles = [...BaseBadge.styles, styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread'|'read';\n\n  @property({ reflect: true, type: Number }) number?: number;\n\n  @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}
+{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAII,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AAEV;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A badge is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n  static readonly styles = [...BaseBadge.styles, styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread'|'read';\n\n  @property({ reflect: true, type: Number }) number?: number;\n\n  @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}

package/pf-button/BaseButton.js

@@ -1,12 +1,12 @@
 var _BaseButton_instances, _BaseButton_internals, _BaseButton_onClick;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n  height: max-content;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nbutton {\n  cursor: pointer;\n  position: relative;\n  font-family: inherit;\n}\n\nbutton {\n  border-width: 0;\n  border-style: solid;\n}\n\nbutton::after {\n  position: absolute;\n  inset: 0 0 0 0;\n  content: "";\n  border-style: solid;\n}\n\n:host(:is(:disabled, [aria-disabled=true])),\n:host(:is(:disabled, [aria-disabled=true])) #container,\n:host(:is(:disabled, [aria-disabled=true])) button,\n:host(:is(:disabled, [aria-disabled=true])[danger]) button,\n:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {\n  pointer-events: none;\n  cursor: default;\n}\n\n[part=icon] {\n  display: none;\n  pointer-events: none;\n}\n\n.hasIcon {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.hasIcon [part=icon] {\n  display: inline-flex;\n  align-items: center;\n  position: absolute;\n  width: 16px;\n}\n\n:host(:not([disabled])) .hasIcon [part=icon] {\n  cursor: pointer;\n}\n\n[part=icon] ::slotted(*) {\n  width: 16px;\n  max-width: 16px;\n  height: 16px;\n  max-height: 16px;\n}\n\n.hasIcon button {\n  position: absolute;\n  inset: 0;\n}\n`;
+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
  *

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,mBAAmB,CAAC;AAC7C,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,CAAmB;;KAEvE,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;wCAAkC;AAGlD;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.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,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,CAAmB;;KAEvE,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;wCAAkC;AAGlD;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"]}

package/pf-button/README.md

@@ -0,0 +1,61 @@
+# PatternFly Elements Button
+     
+`<pf-button>` is a web component wrapper around a standard HTML `<button>` element.
+`<pf-button>` is heavily influenced by the findings in this post: [Custom
+elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pf-button>` to work like a normal `HTMLButtonElement`.
+
+Read more about Button in the [PatternFly Elements Button documentation](https://patternflyelements.org/components/button)
+
+##  Installation
+
+Load `<pf-button>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-button/pf-button.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-button/pf-button.js';
+```
+
+## Usage
+
+When using this component, you must provide a standard HTML Button Elements as
+the only light DOM child of `pf-button`.
+
+```html
+<pf-button>My Button</pf-button>
+```
+
+### Accessibility
+`<pf-button>` addresses the issues associated with typical implementations of
+web component buttons. When using a `<pf-button>` in a `<form>` element, the
+`<pf-button>` will function as a standard button in a `<form>`. You can expect
+the button to submit the form.
+
+#### Disabled Attribute
+Adding the `disabled` attribute to either the `<pf-button>` wrapper or the
+`<button>` element in the light DOM will disable the button.
+
+```html
+<pf-button disabled>Submit</pf-button>
+```
+
+#### Type Attribute
+Using the `type` attribute works in the same fashion as the `disabled`
+attribute. You can add a `type` attribute to the `<pf-button>` element.
+
+```html
+<pf-button type="button">Submit</pf-button>
+<pf-button type="submit">Submit</pf-button>
+<pf-button type="reset">Reset</pf-button>
+```
+

package/pf-button/pf-button.js

@@ -1,12 +1,13 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseButton } from './BaseButton.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-spinner/pf-spinner.js';
 import { css } from "lit";
-const styles = css `/* hi */\nbutton {\n  color: var(--pf-c-button--m-primary--Color,\n    var(--pf-global--Color--light-100, #fff));\n  background-color: var(--pf-c-button--m-primary--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n  font-size: var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-c-button--FontWeight,\n    var(--pf-global--FontWeight--normal, 400));\n  line-height: var(--pf-c-button--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  padding:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-button--PaddingBottom,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\n:host, button {\n  border-radius: var(--pf-c-button--BorderRadius,\n    var(--pf-global--BorderRadius--sm, 3px));\n}\n\npf-icon, ::slotted(pf-icon) {\n  color: currentColor;\n}\n\nbutton::after {\n  border-color: var(--pf-c-button--after--BorderColor, transparent);\n  border-width: var(--pf-c-button--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));\n  border-radius: var(--pf-c-button--after--BorderRadius,\n    var(--pf-global--BorderRadius--sm, 3px));\n}\n\nbutton:active {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n}\n\nbutton:focus {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n}\n\nbutton:hover {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n}\n\n/******************************\n *                            *\n *          WARNING           *\n *                            *\n ******************************/\n\n:host([warning]) button {\n  color: var(--pf-c-button--m-warning--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-button--m-warning--BackgroundColor,\n    var(--pf-global--warning-color--100, #f0ab00));\n}\n\n:host([warning]) button:active {\n  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00));\n}\n\n:host([warning]) button:focus {\n  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00));\n}\n\n:host([warning]) button:hover {\n  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00));\n}\n\n:host([disabled][warning]) button {\n  pointer-events: none;\n  cursor: default;\n  color: var(--pf-c-button--disabled--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-button--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n/******************************\n *                            *\n *           PLAIN            *\n *                            *\n ******************************/\n\n:host([plain]) {\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);\n}\n\n:host([plain]) button {\n  --pf-c-button--after--BorderWidth: 0;\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n  color: var(--pf-c-button--m-plain--Color,\n    var(--pf-global--Color--200, #6a6e73));\n  background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    transparent);\n}\n\n:host([plain]) button:active {\n  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,\n    tranparent);\n}\n\n:host([plain]) button:focus {\n  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,\n    transparent);\n}\n\n:host([plain]) button:hover {\n  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,\n    transparent);\n}\n\n:host([plain]) .hasIcon [part=icon],\n:host([loading][plain]) [part=icon] {\n  left: 16px;\n}\n\n:host([plain][disabled]),\n:host([plain][disabled][variant=link]) button,\n:host([plain][disabled]) button,\n:host([plain]) button[aria-disabled=true],\n:host([plain]) button:disabled {\n  color: var(--pf-c-button--disabled--Color,\n    var(--pf-c-button--m-plain--disabled--Color,\n      var(--pf-global--disabled--color--200, #d2d2d2)));\n}\n\n/******************************\n *                            *\n *            ICON            *\n *                            *\n ******************************/\n\n.hasIcon {\n  gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,\n    var(--pf-global--spacer--xs, 0.25rem)));\n}\n\n.hasIcon [part=icon] {\n  --pf-icon--size: 16px;\n  position: relative;\n}\n\n/******************************\n *                            *\n *    ICON POSITION RIGHT     *\n *                            *\n ******************************/\n\n:host([icon-position=right]) .hasIcon [part=icon],\n:host([icon-position=right][loading]) [part=icon] {\n  order: 1;\n}\n\n:host([icon-position=right]) .hasIcon button {\n  padding-left: var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  padding-right: calc(16px + 8px + var(--pf-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)));\n}\n\n/******************************\n *                            *\n *          LOADING           *\n *                            *\n ******************************/\n\n:host([loading]) button {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host([loading]) button [part=icon] {\n  display: inline-block;\n  z-index: 1;\n  position: absolute;\n  cursor: pointer;\n  top: var(--pf-c-button__progress--Top, 50%);\n  left: var(--pf-c-button__progress--Left,\n    var(--pf-global--spacer--md, 1rem));\n  line-height: 1;\n  transform: translate(\n    var(--pf-c-button__progress--TranslateX, 0),\n    var(--pf-c-button__progress--TranslateY, -50%));\n  margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,\n    var(--pf-global--spacer--xs, 0.25rem));\n}\n\n:host([loading][variant=primary]:not([plain])),\n:host([loading][danger]) {\n  --pf-c-spinner--Color: white;\n}\n\n:host([loading]:not([plain])) {\n  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));\n  --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));\n}\n\n:host([loading]:not([plain])) button {\n  padding-left: calc(12px + var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));\n}\n\n/******************************\n *                            *\n *         SECONDARY          *\n *                            *\n ******************************/\n\n:host([variant=secondary]) {\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger-color--100, #c9190b));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n}\n\n:host([variant=secondary]) button {\n  color: var(--pf-c-button--m-secondary--Color,\n    var(--pf-global--primary-color--100, #06c));\n  background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([variant=secondary]) button:active {\n  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,\n    var(--pf-global--primary-color--100, #06c));\n  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,\n    var(--pf-global--danger--color--200, #a30000));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);\n}\n\n:host([variant=secondary]) button:focus {\n  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,\n    var(--pf-global--primary-color--100, #06c));\n  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color,\n    var(--pf-global--danger--color--200, #a30000));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent);\n}\n\n:host([variant=secondary]) button:hover {\n  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color,\n    var(--pf-global--primary-color--100, #06c));\n  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor,\n    transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color,\n    var(--pf-global--danger--color--200, #a30000));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);\n}\n\n:host([variant=secondary][danger]) button {\n  color: var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger--color--100, #c9190b));\n  background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b));\n}\n\n:host([variant=secondary][danger]) button:active {\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b));\n}\n\n:host([variant=secondary][danger]) button:focus {\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b));\n}\n\n:host([variant=secondary][danger]) button:hover {\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b));\n}\n\n/******************************\n *                            *\n *         TERTIARY           *\n *                            *\n ******************************/\n\n:host([variant=tertiary]) button {\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n  color: var(--pf-c-button--m-tertiary--Color,\n    var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);\n}\n\n:host([variant=tertiary]) button:active {\n  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n}\n\n:host([variant=tertiary]) button:focus {\n  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n    transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n}\n\n:host([variant=tertiary]) button:hover {\n  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n}\n\n/******************************\n *                            *\n *          CONTROL           *\n *                            *\n ******************************/\n\n:host([variant=control]) button {\n  --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius, 0);\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-button--after--BorderRadius: 0;\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-button--after--BorderColor:\n    var(--pf-c-button--m-control--after--BorderTopColor,\n      var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-button--m-control--after--BorderRightColor,\n      var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-button--m-control--after--BorderBottomColor,\n      var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-button--m-control--after--BorderLeftColor,\n      var(--pf-global--BorderColor--300, #f0f0f0));\n  color: var(--pf-c-button--m-control--Color,\n    var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-button--m-control--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));\n}\n\n:host([variant=control]) button:active {\n  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));\n  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c));\n}\n\n:host([variant=control]) button:focus {\n  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));\n  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c));\n}\n\n:host([variant=control]) button:hover {\n  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));\n  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c));\n}\n\n:host([variant=control]) button:active::after {\n  border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n}\n\n:host([variant=control]) button:focus::after {\n  border-block-end-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n}\n\n:host([variant=control]) button:hover::after {\n  border-block-end-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n}\n\n/******************************\n *                            *\n *           LINK             *\n *                            *\n ******************************/\n\n:host([variant=link]) button {\n  color: var(--pf-c-button--m-link--Color,\n    var(--pf-global--link--Color, #06c));\n}\n\n:host([variant=link]) button {\n  background-color: var(--pf-c-button--m-link--BackgroundColor,\n    var(--pf-c-button--m-link--hover--BackgroundColor, transparent));\n}\n\n:host([variant=link][inline]),\n:host([variant=link][inline]) button {\n  display: inline;\n}\n\n:host([variant=link][inline]) {\n  --pf-c-button--PaddingTop: 0;\n  --pf-c-button--PaddingLeft: 0;\n  --pf-c-button--PaddingBottom: 0;\n  --pf-c-button--PaddingRight: 0;\n}\n\n:host([variant=link][inline]) button:hover {\n  text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,\n    var(--pf-global--link--TextDecoration--hover, underline));\n}\n\n:host([variant=link]) {\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor, transparent);\n}\n\n:host(:hover) {\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n}\n\n:host(:focus),\n:host(:focus-within) {\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n}\n\n:host(:not([inline])) button:active {\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);\n}\n\n:host(:not([inline]):has(button:active)) {\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);\n}\n\n:host([variant=link][danger]) button {\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,\n      var(--pf-global--danger-color--100, #c9190b));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);\n}\n\n:host([variant=link][danger]) button:hover {\n  --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));\n  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent);\n}\n\n:host([variant=link][danger]) button:active {\n  --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));\n  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);\n}\n\n:host([variant=link][danger]:has(button:active)) {\n  --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));\n  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);\n}\n\n:host([variant=link][danger]:is(:focus, :focus-within)) {\n  --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));\n  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);\n}\n\n/******************************\n *                            *\n *         DISABLED           *\n *                            *\n ******************************/\n\n:host(:is(:disabled, [aria-disabled=true])),\n:host(:is(:disabled, [aria-disabled=true])) button,\n:host(:is(:disabled, [aria-disabled=true])[danger]) button,\n:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {\n  color: var(--pf-c-button--disabled--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-button--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:is(:disabled, [aria-disabled=true])) button::after {\n  border-color: var(--pf-c-button--disabled--after--BorderColor, transparent);\n}\n\n/******************************\n *                            *\n *           BLOCK            *\n *                            *\n ******************************/\n\n:host([block]),\n:host([block]) button {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n}\n\n/******************************\n *                            *\n *           LARGE            *\n *                            *\n ******************************/\n\n:host([size=large]) button {\n  --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight,\n    var(--pf-global--spacer--xl, 2rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft,\n    var(--pf-global--spacer--xl, 2rem));\n  --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight,\n    var(--pf-global--FontWeight--bold, 700));\n}\n\n/******************************\n *                            *\n *           SMALL            *\n *                            *\n ******************************/\n\n:host([size=small]) button {\n  --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize,\n    var(--pf-global--FontSize--md, 1rem));\n}\n\n/******************************\n *                            *\n *          DANGER            *\n *                            *\n ******************************/\n\n:host([danger]) button {\n  color: var(--pf-c-button--m-danger--Color,\n    var(--pf-global--Color--light-100, #fff));\n  background-color: var(--pf-c-button--m-danger--BackgroundColor,\n    var(--pf-global--danger-color--100, #c9190b));\n}\n\n`;
+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))}`;
 /**
  * Buttons allow users to perform an action when triggered. They feature a text
  * label, a background or a border, and icons.

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,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqIG;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;sCAAwB;AAGf;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, property } from 'lit/decorators.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 * Buttons allow users to perform an action when triggered. They feature a text\n * label, a background or a border, and icons.\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 * @csspart state - Container for the state 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 *\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqIG;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;sCAAwB;AAGf;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 * Buttons allow users to perform an action when triggered. They feature a text\n * label, a background or a border, and icons.\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 * @csspart state - Container for the state 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 *\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

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

package/pf-card/README.md

@@ -0,0 +1,34 @@
+# PatternFly Elements Card
+         
+Read more about Card in the [PatternFly Elements Card documentation](https://patternflyelements.org/components/card)
+
+##  Installation
+
+Load `<pf-card>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-card/pf-card.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-card/pf-card.js';
+```
+
+## Usage
+
+```html
+<pf-card>
+  <h2 slot="header">Card header</h2>
+  <p>This is the pf-card body.</p>
+  <a href="#" slot="footer">Footer link</a>
+</pf-card>
+```
+

package/pf-card/pf-card.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-const style = css `:host {\n  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));\n  box-shadow: var(--pf-c-card--BoxShadow, var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)));\n}\n\n:host([size="compact"]) {\n  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));\n  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));\n}\n\n:host([size="large"]) {\n  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));\n  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));\n  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n:host([flat]) {\n  --pf-c-card--BoxShadow: none;\n  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([plain]) {\n  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);\n  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);\n}\n\n:host([rounded]) {\n  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([full-height]) {\n  height: var(--pf-c-card--m-full-height--Height, 100%);\n  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="body"] {\n  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));\n  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);\n}\n\nheader {\n  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));\n  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));\n}\n\nheader ::slotted(*) {\n  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));\n  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700));\n  margin-block: 0;\n}\n\n[part="footer"] {\n  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));\n  margin-block-start: auto;\n}\n\n`;
+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';
 /**
  * This element creates a header, body, and footer region in which to place

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,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;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, property } from 'lit/decorators.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\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 *\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;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 * 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 *\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"]}