@patternfly/elements 2.0.0-rc.3 → 2.0.0-rc.5

package/custom-elements.json

@@ -7052,6 +7052,18 @@
                 "module": "pf-tabs/BaseTab.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "BaseTab",
+                "module": "pf-tabs/BaseTab.js"
+              }
+            },
             {
               "kind": "field",
               "name": "#internals",
@@ -7507,6 +7519,16 @@
                 "module": "pf-tabs/BaseTabs.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "#rovingTabindexController",
+              "privacy": "private",
+              "default": "new RovingTabindexController(this)",
+              "inheritedFrom": {
+                "name": "BaseTabs",
+                "module": "pf-tabs/BaseTabs.js"
+              }
+            },
             {
               "kind": "field",
               "name": "#instances",
@@ -10344,6 +10366,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "active",
@@ -10542,6 +10572,12 @@
               "description": "Icon set to use for the scroll buttons",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#rovingTabindexController",
+              "privacy": "private",
+              "default": "new RovingTabindexController(this)"
+            },
             {
               "kind": "field",
               "name": "#instances",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.5",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
@@ -30,6 +30,7 @@
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
     "./pf-icon/BaseIcon.js": "./pf-icon/BaseIcon.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
+    "./pf-icon/icons/*": "./pf-icon/icons/*",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",

package/pf-accordion/BaseAccordion.js

@@ -8,7 +8,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';
 import { BaseAccordionPanel } from './BaseAccordionPanel.js';
 import { css } from "lit";
-const style = css `:host {\n  transition-property: box-shadow, border;\n  transition-timing-function: ease-out;\n  transition-duration: 1ms;\n}\n`;
+const style = css `:host{transition-property:box-shadow,border;transition-timing-function:ease-out;transition-duration:1ms}`;
 const CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;
 export class AccordionExpandEvent extends ComposedEvent {
     constructor(toggle, panel) {

package/pf-accordion/BaseAccordionHeader.js

@@ -8,7 +8,7 @@ import { ComposedEvent } from '@patternfly/pfe-core';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { css } from "lit";
-const style = css `#heading {\n  font-size: 100%;\n  padding: 0;\n  margin: 0;\n}\n\nbutton,\na {\n  cursor: pointer;\n}\n\n.toggle,\n.toggle:before,\n.toggle:after {\n  padding: 0;\n  margin: 0;\n}\n\n.toggle {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border: 0;\n}\n\n.toggle:after {\n  content: "";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\nspan {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n`;
+const style = css `#heading{font-size:100%;padding:0;margin:0}a,button{cursor:pointer}.toggle,.toggle:after,.toggle:before{padding:0;margin:0}.toggle{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;border:0}.toggle:after{content:"";position:absolute;bottom:0;left:0}span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 const isPorHeader = (el) => el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);
 export class AccordionHeaderChangeEvent extends ComposedEvent {
     constructor(expanded, toggle, accordion) {

package/pf-accordion/BaseAccordionPanel.js

@@ -3,7 +3,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { css } from "lit";
-const style = css `:host {\n  display: none;\n  overflow: hidden;\n  will-change: height;\n}\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n}\n\n:host(.animating) {\n  display: block;\n  transition: height 0.3s ease-in-out;\n}\n\n:host([fixed]) {\n  overflow-y: auto;\n}\n\n.body {\n  position: relative;\n}\n\n.body:after {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n`;
+const style = css `:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;transition:height .3s ease-in-out}:host([fixed]){overflow-y:auto}.body{position:relative}.body:after{content:"";position:absolute;top:0;bottom:0;left:0}`;
 export class BaseAccordionPanel extends LitElement {
     constructor() {
         super(...arguments);

package/pf-accordion/README.md

@@ -0,0 +1,44 @@
+# PatternFly Elements Accordion
+     
+`<pf-accordion>` is a web component that provides a collapsible accordion interface for sectioned content.
+
+Read more about Accordion in the [PatternFly Elements Accordion documentation](https://patternflyelements.org/components/accordion)
+
+##  Installation
+
+Load `<pf-accordion>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-accordion/pf-accordion.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-accordion/pf-accordion.js';
+```
+## Usage
+
+```html
+<pf-accordion>
+  <pf-accordion-header>
+    <h3>Consetetur sadipscing elitr?</h3>
+  </pf-accordion-header>
+  <pf-accordion-panel>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+  </pf-accordion-panel>
+  <pf-accordion-header>
+    <h3>Labore et dolore magna aliquyam erat?</h3>
+  </pf-accordion-header>
+  <pf-accordion-panel>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+  </pf-accordion-panel>
+</pf-accordion>
+```
+                                                          

package/pf-accordion/pf-accordion-header.js

@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { BaseAccordionHeader } from './BaseAccordionHeader.js';
 import { css } from "lit";
-const style = css `:host {\n  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px);\n\n  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-global--BackgroundColor--100, #ffffff);\n}\n\n:host([large]) {\n  --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n  --pf-c-accordion__toggle--FontFamily:\n    var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n      "RedHatDisplayUpdated",\n      "Overpass",\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    );\n  --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n  --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--active-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-accordion__toggle--focus-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--focus-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-accordion__toggle--expanded-text--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px);\n}\n\n#heading {\n  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));\n}\n\n.toggle,\n.toggle:before,\n.toggle:after {\n  background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent);\n}\n\n.icon {\n  transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s);\n}\n\n.toggle {\n  padding:\n    var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem))\n    var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-family:\n    var(--pf-c-accordion__toggle--FontFamily,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatTextUpdated",\n        helvetica,\n        arial,\n        sans-serif));\n  font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));\n  font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400));\n  color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515));\n}\n\n.toggle[aria-expanded="true"] {\n  --pf-c-accordion__toggle--after--BackgroundColor:\n    var(\n      --pf-c-accordion__toggle--expanded--before--BackgroundColor,\n      var(\n        --pf-global--primary-color--100,\n        #0066cc\n      )\n    );\n}\n\n.toggle:after {\n  top: var(--pf-c-accordion__toggle--before--Top, -1px);\n  width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent);\n}\n\nspan {\n  max-width: var(--pf-c-accordion__toggle-text--MaxWidth,\n    calc(100% - var(--pf-global--spacer--lg, 1.5rem)));\n}\n\n.toggle[aria-expanded="true"] .icon {\n  rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg);\n}\n\n.toggle:hover,\n.toggle:active,\n.toggle:focus {\n  background-color:\n    var(--pf-c-accordion__toggle--active--BackgroundColor,\n      var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.toggle:hover span,\n.toggle:focus span,\n.toggle:active span {\n  color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc));\n}\n\n.toggle:focus span,\n.toggle:active span {\n  font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight,\n      var(--pf-global--FontWeight--semi-bold, 700));\n}\n`;
+const style = css `:host{--pf-icon--size:var(--pf-c-accordion__toggle--IconSize, 10px);color:var(--pf-c-accordion__toggle--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([large]){--pf-c-accordion__toggle--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingLeft:var(--pf-global--spacer--lg, 1.5rem);--pf-c-accordion__toggle--FontFamily:var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n      "RedHatDisplayUpdated",\n      "Overpass",\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    );--pf-c-accordion__toggle--FontSize:var(--pf-global--FontSize--xl, 1.25rem);--pf-c-accordion__toggle--hover-text--Color:var(--pf-global--Color--100, #151515);--pf-c-accordion__toggle--active-text--Color:var(--pf-global--Color--100, #151515);--pf-c-accordion__toggle--active-text--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-accordion__toggle--focus-text--Color:var(--pf-global--Color--100, #151515);--pf-c-accordion__toggle--focus-text--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-accordion__toggle--expanded-text--Color:var(--pf-global--Color--100, #151515);--pf-c-accordion__toggle--expanded-text--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-icon--size:var(--pf-c-accordion__toggle--IconSize, 12px)}#heading{font-weight:var(--pf-c-accordion__toggle--FontWeight,var(--pf-global--FontWeight--normal,400))}.toggle,.toggle:after,.toggle:before{background-color:var(--pf-c-accordion__toggle--BackgroundColor,transparent)}.icon{transition:var(--pf-c-accordion__toggle-icon--Transition, .2s ease-in 0s)}.toggle{padding:var(--pf-c-accordion__toggle--PaddingTop,var(--pf-global--spacer--md,.5rem)) var(--pf-c-accordion__toggle--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__toggle--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__toggle--PaddingLeft,var(--pf-global--spacer--md,1rem));font-family:var(--pf-c-accordion__toggle--FontFamily,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatTextUpdated",\n        helvetica,\n        arial,\n        sans-serif));font-size:var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem));font-weight:var(--pf-c-accordion__toggle--FontWeight,var(--pf-global--FontWeight--normal,400));color:var(--pf-c-accordion__toggle--Color,var(--pf-global--Color--100,#151515))}.toggle[aria-expanded=true]{--pf-c-accordion__toggle--after--BackgroundColor:var(\n      --pf-c-accordion__toggle--expanded--before--BackgroundColor,\n      var(\n        --pf-global--primary-color--100,\n        #0066cc\n      )\n    )}.toggle:after{top:var(--pf-c-accordion__toggle--before--Top,-1px);width:var(--pf-c-accordion__toggle--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__toggle--after--BackgroundColor,transparent)}span{max-width:var(--pf-c-accordion__toggle-text--MaxWidth,calc(100% - var(--pf-global--spacer--lg,1.5rem)))}.toggle[aria-expanded=true] .icon{rotate:var(--pf-c-accordion__toggle--expanded-icon--Rotate,90deg)}.toggle:active,.toggle:focus,.toggle:hover{background-color:var(--pf-c-accordion__toggle--active--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.toggle:active span,.toggle:focus span,.toggle:hover span{color:var(--pf-c-accordion__toggle--active-text--Color,var(--pf-global--link--Color,#06c))}.toggle:active span,.toggle:focus span{font-weight:var(--pf-c-accordion__toggle--active-text--FontWeight,var(--pf-global--FontWeight--semi-bold,700))}`;
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * Accordion Header

package/pf-accordion/pf-accordion-panel.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.js';
 import { BaseAccordionPanel } from './BaseAccordionPanel.js';
 import { css } from "lit";
-const style = css `:host {\n  color: var(--pf-global--Color--100, #151515);\n  background-color:\n    var(\n      --pf-c-accordion--BackgroundColor,\n      var(--pf-global--BackgroundColor--light-100, #ffffff)\n    );\n}\n\n.body {\n  padding:\n    var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n}\n\n.body:after {\n  width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent);\n}\n\n:host([large]) {\n  --pf-c-accordion__panel-body--PaddingTop:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);\n  --pf-c-accordion__panel-body--PaddingRight:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);\n  --pf-c-accordion__panel-body--PaddingBottom:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);\n  --pf-c-accordion__panel-body--PaddingLeft:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);\n  --pf-c-accordion__panel--FontSize:\n    var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);\n  --pf-c-accordion__panel--Color:\n    var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515);\n}\n\n:host([large]) .body:last-child {\n  --pf-c-accordion__panel-body--PaddingBottom:\n    var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem);\n}\n\n.content {\n  color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73));\n  font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n}\n\n:host([fixed]) {\n  max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem);\n}\n\n.content[expanded],\n:host([expanded]) .content {\n  --pf-c-accordion__panel-body--before--BackgroundColor:\n    var(\n      --pf-c-accordion__panel--content-body--before--BackgroundColor,\n      var(--pf-global--primary-color--100, #0066cc));\n}\n`;
+const style = css `:host{color:var(--pf-global--Color--100,#151515);background-color:var(--pf-c-accordion--BackgroundColor,var(--pf-global--BackgroundColor--light-100,#fff))}.body{padding:var(--pf-c-accordion__panel-body--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__panel-body--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}.body:after{width:var(--pf-c-accordion__panel-body--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__panel-body--before--BackgroundColor,transparent)}:host([large]){--pf-c-accordion__panel-body--PaddingTop:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);--pf-c-accordion__panel-body--PaddingRight:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);--pf-c-accordion__panel-body--PaddingLeft:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);--pf-c-accordion__panel--FontSize:var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);--pf-c-accordion__panel--Color:var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515)}:host([large]) .body:last-child{--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem)}.content{color:var(--pf-c-accordion__panel--Color,var(--pf-global--Color--dark-200,#6a6e73));font-size:var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, .875rem))}:host([fixed]){max-height:var(--pf-c-accordion__panel--m-fixed--MaxHeight,9.375rem)}.content[expanded],:host([expanded]) .content{--pf-c-accordion__panel-body--before--BackgroundColor:var(\n      --pf-c-accordion__panel--content-body--before--BackgroundColor,\n      var(--pf-global--primary-color--100, #0066cc))}`;
 /**
  * Accordion Panel
  *

package/pf-accordion/pf-accordion.js

@@ -7,7 +7,7 @@ import { BaseAccordionHeader } from './BaseAccordionHeader.js';
 export * from './pf-accordion-header.js';
 export * from './pf-accordion-panel.js';
 import { css } from "lit";
-const style = css `:host {\n  --accordion__bordered--Color: var(--rh-color-black-300, #d2d2d2);\n\n  color: var(--pf-global--Color--100, #151515);\n  background-color: var(--pf-global--BackgroundColor--100, #ffffff);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:first-child),\n:host([large]) ::slotted(pf-accordion-header:first-child) {\n  display: block;\n  border-top: 1px solid var(--accordion__bordered--Color);\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),\n:host([large]) ::slotted(pf-accordion-header:not(:first-child)) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n\n:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),\n:host([large]) ::slotted(pf-accordion-header:is([expanded])) {\n  display: block;\n  border-bottom: 0;\n}\n\n:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),\n:host([large]) ::slotted(pf-accordion-panel:is([expanded])) {\n  display: block;\n  border-bottom: 1px solid var(--accordion__bordered--Color);\n}\n`;
+const style = css `:host{--accordion__bordered--Color:var(--rh-color-black-300, #d2d2d2);color:var(--pf-global--Color--100,#151515);background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([bordered]) ::slotted(pf-accordion-header:first-child),:host([large]) ::slotted(pf-accordion-header:first-child){display:block;border-top:1px solid var(--accordion__bordered--Color);border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),:host([large]) ::slotted(pf-accordion-header:not(:first-child)){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),:host([large]) ::slotted(pf-accordion-header:is([expanded])){display:block;border-bottom:0}:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),:host([large]) ::slotted(pf-accordion-panel:is([expanded])){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}`;
 /**
  * Accordions toggle the visibility of sections of content.
  * They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

package/pf-avatar/BaseAvatar.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { css } from "lit";
-const style = css `:host {\n  display: contents;\n}\n\nsvg,\n:host([src]) img {\n  display: inline;\n  object-fit: cover;\n}\n\n:host([hidden]) {\n  display: none;\n}\n`;
+const style = css `:host{display:contents}:host([src]) img,svg{display:inline;object-fit:cover}:host([hidden]){display:none}`;
 export class AvatarLoadEvent extends Event {
     constructor(originalEvent) {
         super('load', { bubbles: true, composed: true });

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { property, customElement } from 'lit/decorators.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-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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.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-button/BaseButton.js

@@ -6,7 +6,7 @@ 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/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

@@ -6,7 +6,7 @@ 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-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>
+```
+