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

package/pf-modal/pf-modal.js

@@ -10,7 +10,7 @@ import { bound, deprecation, initializer, observed } from '@patternfly/pfe-core/
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const style = css `:host {\n\tdisplay: block;\n\tposition: relative;\n  --_spacer-align-top: var(--pf-c-modal-box--m-align-top--spacer,\n    var(--pf-global--spacer--sm, 0.5rem));\n  --_height-offset: min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem));\n}\n\n[hidden] {\n  display: none !important;\n}\n\nsection {\n  display: flex;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--pf-c-modal-box--ZIndex,\n    var(--pf-global--ZIndex--xl,\n      500));\n}\n\n#container {\n  position: relative;\n  max-height: inherit;\n}\n\n[part=overlay] {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: var(--pf-c-backdrop--BackgroundColor,\n      var(--pf-global--BackgroundColor--dark-transparent-100,\n        rgba(3, 3, 3, 0.62)));\n}\n\n[part=dialog] {\n  position: relative;\n  margin: 0 auto;\n\n  width: var(--pf-c-modal-box--Width,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-width: var(--pf-c-modal-box--MaxWidth,\n    calc(100% - var(--pf-global--spacer--xl,2rem)));\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100% - var(--pf-global--spacer--2xl,3rem)));\n\n  box-shadow: var(--pf-c-modal-box--BoxShadow,\n    var(--pf-global--BoxShadow--xl,\n      0 1rem 2rem 0 rgba(3, 3, 3, 0.16),\n      0 0 0.5rem 0 rgba(3, 3, 3, 0.1)));\n\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100, #fff)));\n\n  padding: var(--pf-global--spacer--lg, 1.5rem);\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n}\n\n:host([width]) [part=dialog],\n:host([variant]) [part=dialog] {\n  margin-inline: 0;\n}\n\n:host([width="small"]) [part=dialog],\n:host([variant="small"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem);\n}\n\n:host([width="medium"]) [part=dialog],\n:host([variant="medium"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem);\n}\n\n:host([width="large"]) [part=dialog],\n:host([variant="large"]) [part=dialog] {\n  --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem);\n}\n\n[part=content] {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  max-height: var(--pf-c-modal-box--MaxHeight,\n    calc(100vh - var(--pf-global--spacer--2xl,\n      3rem)));\n\n  box-sizing: border-box;\n}\n\n[part=content] ::slotted([slot="header"]) {\n  margin-top: 0 !important;\n}\n\nheader {\n  position: sticky;\n  top: 0;\n\tbackground-color: var(--pf-c-modal-box--BackgroundColor,\n    var(--pf-global--BackgroundColor--100,\n      var(--pf-global--BackgroundColor--100,\n        #fff)));\n}\n\nheader ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) {\n  font-size: var(--pf-c-modal-box__title--FontSize,\n    var(--pf-global--FontSize--2xl,\n      1.5rem));\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  font-family: var(--pf-c-modal-box__title--FontFamily,\n    var(--pf-global--FontFamily--heading--sans-serif,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)));\n}\n\n[part=close-button] {\n  background-color: transparent;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n\n  position: absolute;\n  cursor: pointer;\n  line-height: 24px;\n  padding-block:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem));\n  padding-inline:\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem));\n  top: 0;\n  right: calc(var(--pf-global--spacer--lg, 1.5rem) / -3);\n  color: var(--pf-c-button--m-plain--Color,\n    var(--pf-global--Color--200,\n      #6a6e73));\n  font-size: var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md,\n      1rem));\n}\n\n[part=close-button]:is(:focus-within, :focus-visible, :hover) {\n  color: var(--pf-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part=close-button] > svg {\n  font-size: 16px;\n  width: var(--pf-global--spacer--md, 1rem);\n  aspect-ratio: 1/1;\n}\n\n:host([position="top"]) #dialog {\n  align-self: start;\n\n  margin-block: var(--pf-c-modal-box--m-align-top--MarginTop,\n    var(--pf-c-modal-box--m-align-top--spacer,\n      2rem));\n\n  margin-inline: var(--pf-global--spacer--md, 1rem);\n\n  width: 100%;\n\n  max-width: var(--pf-c-modal-box--m-align-top--MaxWidth,\n    calc(100% - min(\n      var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,\n      var(--pf-global--spacer--xl, 2rem))));\n\n  max-height: var(--pf-c-modal-box--m-align-top--MaxHeight,\n    calc(100% - var(--_height-offset) - var(--_spacer-align-top)));\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  gap: var(--pf-global--spacer--xl, 0.5rem);\n}\n`;
+const style = css `:host{display:block;position:relative;--_spacer-align-top:var(--pf-c-modal-box--m-align-top--spacer,\n    var(--pf-global--spacer--sm, 0.5rem));--_height-offset:min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem))}[hidden]{display:none!important}section{display:flex;position:fixed;height:100%;width:100%;top:0;left:0;align-items:center;justify-content:center;z-index:var(--pf-c-modal-box--ZIndex,var(--pf-global--ZIndex--xl,500))}#container{position:relative;max-height:inherit}[part=overlay]{position:fixed;height:100%;width:100%;top:0;left:0;background-color:var(--pf-c-backdrop--BackgroundColor,var(--pf-global--BackgroundColor--dark-transparent-100,rgba(3,3,3,.62)))}[part=dialog]{position:relative;margin:0 auto;width:var(--pf-c-modal-box--Width,calc(100% - var(--pf-global--spacer--xl,2rem)));max-width:var(--pf-c-modal-box--MaxWidth,calc(100% - var(--pf-global--spacer--xl,2rem)));max-height:var(--pf-c-modal-box--MaxHeight,calc(100% - var(--pf-global--spacer--2xl,3rem)));box-shadow:var(--pf-c-modal-box--BoxShadow,var(--pf-global--BoxShadow--xl,0 1rem 2rem 0 rgba(3,3,3,.16),0 0 .5rem 0 rgba(3,3,3,.1)));background-color:var(--pf-c-modal-box--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--100,#fff)));padding:var(--pf-global--spacer--lg,1.5rem);margin-inline:var(--pf-global--spacer--md,1rem)}:host([variant]) [part=dialog],:host([width]) [part=dialog]{margin-inline:0}:host([variant=small]) [part=dialog],:host([width=small]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem)}:host([variant=medium]) [part=dialog],:host([width=medium]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-md--Width, 52.5rem)}:host([variant=large]) [part=dialog],:host([width=large]) [part=dialog]{--pf-c-modal-box--Width:var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem)}[part=content]{overflow-y:auto;overscroll-behavior:contain;max-height:var(--pf-c-modal-box--MaxHeight,calc(100vh - var(--pf-global--spacer--2xl,3rem)));box-sizing:border-box}[part=content] ::slotted([slot=header]){margin-top:0!important}header{position:sticky;top:0;background-color:var(--pf-c-modal-box--BackgroundColor,var(--pf-global--BackgroundColor--100,var(--pf-global--BackgroundColor--100,#fff)))}header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot=header]){font-size:var(--pf-c-modal-box__title--FontSize,\n    var(--pf-global--FontSize--2xl,\n      1.5rem));font-weight:var(--pf-global--FontWeight--normal,400);font-family:var(--pf-c-modal-box__title--FontFamily,\n    var(--pf-global--FontFamily--heading--sans-serif,\n      var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,\n        "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)))}[part=close-button]{background-color:transparent;border:none;margin:0;padding:0;text-align:left;position:absolute;cursor:pointer;line-height:24px;padding-block:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,0.375rem));padding-inline:var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem));top:0;right:calc(var(--pf-global--spacer--lg,1.5rem)/ -3);color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));font-size:var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md,\n      1rem))}[part=close-button]:is(:focus-within,:focus-visible,:hover){color:var(--pf-c-button--m-plain--focus--Color,var(--pf-global--Color--100,#151515))}[part=close-button]>svg{font-size:16px;width:var(--pf-global--spacer--md,1rem);aspect-ratio:1/1}:host([position=top]) #dialog{align-self:start;margin-block:var(--pf-c-modal-box--m-align-top--MarginTop,var(--pf-c-modal-box--m-align-top--spacer,2rem));margin-inline:var(--pf-global--spacer--md,1rem);width:100%;max-width:var(--pf-c-modal-box--m-align-top--MaxWidth,calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer,2rem) * 2,var(--pf-global--spacer--xl,2rem))));max-height:var(--pf-c-modal-box--m-align-top--MaxHeight,calc(100% - var(--_height-offset) - var(--_spacer-align-top)))}footer{display:flex;align-items:center;gap:var(--pf-global--spacer--xl,.5rem)}`;
 export class ModalCancelEvent extends ComposedEvent {
     constructor() {
         super('cancel');

package/pf-panel/README.md

@@ -0,0 +1,10 @@
+# Panel
+Panel contains content with optional header and footer content.
+
+## Usage
+
+```html
+<pf-panel>
+  <p>Panel content</p>
+</pf-panel>
+```

package/pf-panel/pf-panel.js

@@ -4,7 +4,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
-const styles = css `:host {\n  /* NB: upstream sets these on the container, which is why we do not use fallbacks here. */\n  --pf-c-panel--Width: auto;\n  --pf-c-panel--MinWidth: auto;\n  --pf-c-panel--MaxWidth: none;\n  --pf-c-panel--ZIndex: auto;\n  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n  --pf-c-panel--BoxShadow: none;\n  --pf-c-panel--before--BorderWidth: 0;\n  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-panel--m-raised--BoxShadow: pfglobalvar(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);\n  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main--MaxHeight: none;\n  --pf-c-panel__main--Overflow: visible;\n  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-panel__footer--BoxShadow: none;\n  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;\n  --pf-c-panel--m-scrollable__main--Overflow: auto;\n  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);\n  position: relative;\n  z-index: var(--pf-c-panel--ZIndex);\n  width: var(--pf-c-panel--Width);\n  min-width: var(--pf-c-panel--MinWidth);\n  max-width: var(--pf-c-panel--MaxWidth);\n  background-color: var(--pf-c-panel--BackgroundColor);\n  box-shadow: var(--pf-c-panel--BoxShadow);\n}\n\n:host([variant="bordered"])::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: "";\n  border:\n    var(--pf-c-panel--before--BorderWidth,\n      var(--pf-c-panel--m-bordered--before--BorderWidth,\n        var(--pf-global--BorderWidth--sm, 1px)))\n    solid\n    var(--pf-c-panel--before--BorderColor,\n      var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host([variant="raised"]) {\n  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200));\n}\n\n:host([scrollable]) {\n  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);\n  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);\n  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot {\n  display: block;\n}\n\nslot:not([name]) {\n  max-height: var(--pf-c-panel__main--MaxHeight);\n  overflow: var(--pf-c-panel__main--Overflow);\n  padding:\n    var(--pf-c-panel__main-body--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-panel__main-body--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n}\n\nslot[name="header"] {\n  padding:\n    var(--pf-c-panel__header--PaddingTop)\n    var(--pf-c-panel__header--PaddingRight)\n    var(--pf-c-panel__header--PaddingBottom)\n    var(--pf-c-panel__header--PaddingLeft);\n}\n\nslot[name="footer"] {\n  padding:\n    var(--pf-c-panel__footer--PaddingTop)\n    var(--pf-c-panel__footer--PaddingRight)\n    var(--pf-c-panel__footer--PaddingBottom)\n    var(--pf-c-panel__footer--PaddingLeft);\n  box-shadow: var(--pf-c-panel__footer--BoxShadow);\n}\n\nhr {\n  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);\n  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);\n  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);\n  --pf-c-divider--after--FlexBasis: 100%;\n  --pf-c-divider--after--Inset: 0%;\n  --pf-c-divider--m-vertical--after--FlexBasis: 100%;\n  --pf-c-divider--m-horizontal--Display: flex;\n  --pf-c-divider--m-horizontal--FlexDirection: row;\n  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);\n  --pf-c-divider--m-horizontal--after--Width: auto;\n  --pf-c-divider--m-vertical--Display: inline-flex;\n  --pf-c-divider--m-vertical--FlexDirection: column;\n  --pf-c-divider--m-vertical--after--Height: auto;\n  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);\n  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);\n  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);\n  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);\n  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);\n  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);\n  width: 100%;\n  height: auto;\n  display: var(--pf-c-divider--Display);\n  flex-direction: var(--pf-c-divider--FlexDirection);\n  align-items: center;\n  align-self: stretch;\n  flex-shrink: 0;\n  justify-content: center;\n  border: 0;\n}\n\nhr::after {\n  align-self: stretch;\n  width: var(--pf-c-divider--after--Width);\n  height: var(--pf-c-divider--after--Height);\n  content: "";\n  background-color: var(--pf-c-divider--after--BackgroundColor);\n  justify-self: center;\n  padding: 0;\n  margin: 0;\n  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):first-of-type) {\n  margin-block-start: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):last-of-type) {\n  margin-block-end: 0;\n}\n\n::slotted(:is(p, h1, h2, h3, h4, h5, h6):is(:last-of-type, :first-of-type)) {\n  margin-block: 0;\n}\n`;
+const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:pfglobalvar(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--pf-c-panel--m-scrollable__footer--BoxShadow:0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);position:relative;z-index:var(--pf-c-panel--ZIndex);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow)}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--before--BorderWidth,var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px))) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,\n    var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`;
 /**
  * Panel
  * @slot header - Place header content here

package/pf-progress-stepper/README.md

@@ -0,0 +1,41 @@
+# PatternFly Elements Progress Stepper
+
+A component that gives the user a visual representation of the current state of 
+their progress through an application (typically a multistep form).
+
+Read more about Progress Stepper in the [PatternFly Elements Progress Steps 
+documentation][docs].
+
+##  Installation
+
+Load `<pf-progress-stepper>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-progress-stepper/pf-progress-stepper.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-progress-stepper/pf-progress-stepper.js';
+```
+
+## Usage
+
+```html
+<pf-progress-stepper>
+  <pf-progress-step variant="success">Completed</pf-progress-step>
+  <pf-progress-step variant="warning">Issue</pf-progress-step>
+  <pf-progress-step variant="danger">Failure</pf-progress-step>
+  <pf-progress-step current variant="info">Running</pf-progress-step>
+  <pf-progress-step>Last</pf-progress-step>
+</pf-progress-stepper>
+```
+
+[docs]: https://patternflyelements.org/components/progress-stepper

package/pf-progress-stepper/pf-progress-step.js

@@ -8,7 +8,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n#icon {\n  z-index: var(--pf-c-progress-stepper__step-icon--ZIndex);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--pf-c-progress-stepper__step-icon--Width);\n  height: var(--pf-c-progress-stepper__step-icon--Height);\n  color: var(--pf-c-progress-stepper__step-icon--Color);\n  background-color: var(--pf-c-progress-stepper__step-icon--BackgroundColor);\n  border: var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);\n  border-radius: 50%;\n  font-size: var(--pf-c-progress-stepper__step-icon--FontSize);\n  --pf-icon--size: 1.125em;\n}\n\n#main {\n  position: var(--pf-c-progress-stepper__step-main--Position, initial);\n  min-width: 0;\n  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);\n  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);\n  overflow-wrap: anywhere;\n}\n\n:host(:not([current])) #main.compact {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  margin-bottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n}\n\n:host([current]) #main.compact {\n  grid-column: 1/-1;\n  grid-row: 1/2;\n}\n\n#title {\n  font-size: var(--pf-c-progress-stepper__step-title--FontSize);\n  font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);\n  color: var(--pf-c-progress-stepper__step-title--Color);\n  text-align: var(--pf-c-progress-stepper__step-title--TextAlign);\n  border: 0;\n}\n\n#description {\n  margin-top: var(--pf-c-progress-stepper__step-description--MarginTop);\n  font-size: var(--pf-c-progress-stepper__step-description--FontSize);\n  color: var(--pf-c-progress-stepper__step-description--Color);\n  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);\n  display: block;\n}\n\n:host {\n  display: contents;\n}\n\n#connector {\n  position: relative;\n  display: flex;\n  justify-content: var(--pf-c-progress-stepper__step-connector--JustifyContent);\n  width: 100%;\n}\n\n#connector.compact {\n  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);\n  grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);\n  padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);\n}\n\n:host(:not(:last-of-type)) #main::before {\n  content: var(--pf-c-progress-stepper__step-main--before--Content);\n  position: absolute;\n  top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));\n  left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);\n  width: auto;\n  height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n}\n\n:host(:not(:last-of-type)) #connector::before {\n  position: absolute;\n  top: var(--pf-c-progress-stepper__step-connector--before--Top);\n  left: var(--pf-c-progress-stepper__step-connector--before--Left);\n  width: var(--pf-c-progress-stepper__step-connector--before--Width);\n  height: var(--pf-c-progress-stepper__step-connector--before--Height);\n  content: var(--pf-c-progress-stepper__step-connector--before--Content);\n  border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);\n  border-bottom: var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);\n  transform: var(--pf-c-progress-stepper__step-connector--before--Transform);\n}\n\n:host([current]) {\n  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-current__step-title--Color);\n}\n\n:host([variant="success"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--success-color--100, #3e8635);\n}\n\n:host([variant="info"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100, #2b9af3);\n}\n\n:host([variant="warning"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n}\n\n:host([variant="danger"]) {\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);\n}\n`;
+const style = css `[hidden]{display:none!important}#icon{z-index:var(--pf-c-progress-stepper__step-icon--ZIndex);display:flex;align-items:center;justify-content:center;width:var(--pf-c-progress-stepper__step-icon--Width);height:var(--pf-c-progress-stepper__step-icon--Height);color:var(--pf-c-progress-stepper__step-icon--Color);background-color:var(--pf-c-progress-stepper__step-icon--BackgroundColor);border:var(--pf-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-c-progress-stepper__step-icon--BorderColor);border-radius:50%;font-size:var(--pf-c-progress-stepper__step-icon--FontSize);--pf-icon--size:1.125em}#main{position:var(--pf-c-progress-stepper__step-main--Position,initial);min-width:0;margin:var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);text-align:var(--pf-c-progress-stepper--step-main--TextAlign,auto);overflow-wrap:anywhere}:host(:not([current])) #main.compact{position:fixed;top:0;left:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin-bottom:var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom)}:host([current]) #main.compact{grid-column:1/-1;grid-row:1/2}#title{font-size:var(--pf-c-progress-stepper__step-title--FontSize);font-weight:var(--pf-c-progress-stepper__step-title--FontWeight);color:var(--pf-c-progress-stepper__step-title--Color);text-align:var(--pf-c-progress-stepper__step-title--TextAlign);border:0}#description{margin-top:var(--pf-c-progress-stepper__step-description--MarginTop);font-size:var(--pf-c-progress-stepper__step-description--FontSize);color:var(--pf-c-progress-stepper__step-description--Color);text-align:var(--pf-c-progress-stepper__step-description--TextAlign);display:block}:host{display:contents}#connector{position:relative;display:flex;justify-content:var(--pf-c-progress-stepper__step-connector--JustifyContent);width:100%}#connector.compact{min-width:var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);grid-row:var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);padding-bottom:var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom)}:host(:not(:last-of-type)) #main::before{content:var(--pf-c-progress-stepper__step-main--before--Content);position:absolute;top:calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));left:calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth)/ 2);width:auto;height:calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));border-right:var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor)}:host(:not(:last-of-type)) #connector::before{position:absolute;top:var(--pf-c-progress-stepper__step-connector--before--Top);left:var(--pf-c-progress-stepper__step-connector--before--Left);width:var(--pf-c-progress-stepper__step-connector--before--Width);height:var(--pf-c-progress-stepper__step-connector--before--Height);content:var(--pf-c-progress-stepper__step-connector--before--Content);border-right:var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);border-bottom:var(--pf-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderBottomColor);transform:var(--pf-c-progress-stepper__step-connector--before--Transform)}:host([current]){--pf-c-progress-stepper__step-title--FontWeight:var(--pf-c-progress-stepper__step--m-current__step-title--FontWeight);--pf-c-progress-stepper__step-title--Color:var(--pf-c-progress-stepper__step--m-current__step-title--Color)}:host([variant=success]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--success-color--100, #3e8635)}:host([variant=info]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--info-color--100, #2b9af3)}:host([variant=warning]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--warning-color--100, #f0ab00)}:host([variant=danger]){--pf-c-progress-stepper__step-icon--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step-title--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--Color);--pf-c-progress-stepper__step-title--m-help-text--hover--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);--pf-c-progress-stepper__step-title--m-help-text--focus--Color:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor:var(--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor)}`;
 const ICONS = new Map(Object.entries({
     success: { icon: 'circle-check' },
     danger: { icon: 'circle-exclamation' },

package/pf-progress-stepper/pf-progress-stepper.js

@@ -5,7 +5,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 import { css } from "lit";
-const style = css `[hidden] {\n  display: none !important;\n}\n\n:host {\n  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;\n  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;\n  --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;\n  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;\n  --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;\n  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;\n  --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;\n  --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;\n  --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;\n  --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);\n  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;\n  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;\n  --pf-c-progress-stepper--m-compact--GridAutoFlow: row;\n  --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;\n  --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;\n  --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;\n  --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n  --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;\n  --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;\n  --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;\n  --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;\n  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;\n  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;\n  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;\n  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;\n  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;\n  --pf-c-progress-stepper__step-connector--JustifyContent: start;\n  --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);\n  --pf-c-progress-stepper__step-icon--Width: 1.75rem;\n  --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);\n  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n  --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n  --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-progress-stepper__pficon--MarginTop: 3px;\n  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;\n  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--TextAlign: left;\n  --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);\n  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);\n  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;\n  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);\n  --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);\n  --pf-c-progress-stepper__step-description--TextAlign: left;\n  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n  --pf-c-progress-stepper__step-connector--before--Content: '';\n  --pf-c-progress-stepper__step-main--before--Content: none;\n  position: relative;\n  display: grid;\n  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);\n  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);\n  grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);\n  grid-auto-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n  :host {\n    --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);\n    --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);\n    --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);\n    --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);\n    --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);\n    --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);\n    --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);\n    --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);\n    --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);\n    --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);\n    --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);\n    --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);\n    --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);\n    --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);\n    --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);\n    --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);\n    --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);\n    --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);\n    --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n    --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n    --pf-c-progress-stepper--m-center__step-connector--before--Content: '';\n    --pf-c-progress-stepper--m-center__step-main--before--Content: none;\n  }\n}\n\n:host([center]) {\n  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);\n  --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);\n  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);\n  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);\n  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);\n  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);\n  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n\n  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);\n}\n\n:host([center]:not([compact])) {\n  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n}\n\n:host([vertical]) ::slotted(pf-progress-step) {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n:host([vertical]) {\n  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n  --pf-c-progress-stepper__step-connector--before--Content: '';\n  --pf-c-progress-stepper__step-main--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n  --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n  --pf-c-progress-stepper__step-main--Position: relative;\n}\n\n:host([vertical][center]) {\n  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n}\n\n:host([compact]) {\n  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);\n  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n  --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);\n  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);\n  --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);\n  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);\n  --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);\n  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);\n  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);\n  display: inline-grid;\n  grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);\n  grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);\n}\n`;
+const style = css `[hidden]{display:none!important}:host{--pf-c-progress-stepper--m-vertical--GridAutoFlow:row;--pf-c-progress-stepper--m-vertical--GridTemplateColumns:auto 1fr;--pf-c-progress-stepper--m-vertical__step-connector--before--Top:0;--pf-c-progress-stepper--m-vertical__step-connector--before--Left:calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);--pf-c-progress-stepper--m-vertical__step-connector--before--Width:auto;--pf-c-progress-stepper--m-vertical__step-connector--before--Height:100%;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth:0;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor:transparent;--pf-c-progress-stepper--m-vertical__step-connector--before--Transform:translateX(-50%);--pf-c-progress-stepper--m-vertical__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical__step-main--MarginBottom:var(--pf-global--spacer--xl, 2rem);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow:auto;--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--GridAutoFlow:column;--pf-c-progress-stepper--m-horizontal--GridTemplateColumns:initial;--pf-c-progress-stepper--m-horizontal__step-connector--before--Top:calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Left:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--Width:100%;--pf-c-progress-stepper--m-horizontal__step-connector--before--Height:auto;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor:unset;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform:translateY(-50%);--pf-c-progress-stepper--m-horizontal__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom:0;--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns:repeat(auto-fill, 1.75rem);--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom:0;--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow:2;--pf-c-progress-stepper--m-compact--GridAutoFlow:row;--pf-c-progress-stepper--m-compact__step-main--MarginTop:0;--pf-c-progress-stepper--m-compact__step-main--MarginBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-compact__step-connector--MinWidth:1.75rem;--pf-c-progress-stepper--m-compact__step-icon--Width:1.125rem;--pf-c-progress-stepper--m-compact__step-icon--FontSize:var(--pf-global--icon--FontSize--sm, 0.625rem);--pf-c-progress-stepper--m-compact__step-title--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper--m-compact__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper--m-compact__pficon--MarginTop:2px;--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop:-3px;--pf-c-progress-stepper--m-center__step-connector--before--Left:50%;--pf-c-progress-stepper--m-center--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-center__step-connector--JustifyContent:center;--pf-c-progress-stepper--m-center__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--TextAlign:center;--pf-c-progress-stepper--m-center__step-description--MarginRight:0;--pf-c-progress-stepper--m-center__step-description--MarginLeft:0;--pf-c-progress-stepper--GridTemplateRows:auto 1fr;--pf-c-progress-stepper__step-connector--JustifyContent:start;--pf-c-progress-stepper__step-icon--ZIndex:var(--pf-global--ZIndex--xs, 100);--pf-c-progress-stepper__step-icon--Width:1.75rem;--pf-c-progress-stepper__step-icon--Height:var(--pf-c-progress-stepper__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-icon--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-icon--BackgroundColor:var(--pf-global--BackgroundColor--light-200, #fafafa);--pf-c-progress-stepper__step-icon--BorderWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper__step-icon--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper__pficon--MarginTop:3px;--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:-5px;--pf-c-progress-stepper__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--TextAlign:left;--pf-c-progress-stepper__step-title--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-global--FontWeight--bold, 700);--pf-c-progress-stepper__step--m-current__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-pending__step-title--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step--m-danger__step-title--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor:var(--pf-global--BorderColor--200, #8a8d90);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness:var(--pf-global--BorderWidth--sm, 1px);--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset:0.25rem;--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--hover--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step-description--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper__step-description--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper__step-description--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step-description--TextAlign:left;--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;position:relative;display:grid;grid-auto-flow:var(--pf-c-progress-stepper--GridAutoFlow);grid-template-columns:var(--pf-c-progress-stepper--GridTemplateColumns);grid-template-rows:var(--pf-c-progress-stepper--GridTemplateRows);grid-auto-columns:1fr}@media (min-width:768px){:host{--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper--m-center__step-connector--before--Content:'';--pf-c-progress-stepper--m-center__step-main--before--Content:none}}:host([center]){--pf-c-progress-stepper__step-connector--JustifyContent:var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-center__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);--pf-c-progress-stepper--step-main--TextAlign:var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);--pf-c-progress-stepper__step-title--TextAlign:var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);--pf-c-progress-stepper__step-description--MarginRight:var(--pf-c-progress-stepper--m-center__step-description--MarginRight);--pf-c-progress-stepper__step-description--MarginLeft:var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);--pf-c-progress-stepper__step-description--TextAlign:var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left);grid-template-columns:var(--pf-c-progress-stepper--m-center--GridTemplateColumns)}:host([center]:not([compact])){--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content)}:host([vertical]) ::slotted(pf-progress-step){flex-direction:row;align-items:flex-start}:host([vertical]){--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-main--Position:relative}:host([vertical][center]){--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left)}:host([compact]){--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);--pf-c-progress-stepper__step-icon--Width:var(--pf-c-progress-stepper--m-compact__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);--pf-c-progress-stepper__step-title--FontSize:var(--pf-c-progress-stepper--m-compact__step-title--FontSize);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);--pf-c-progress-stepper__pficon--MarginTop:var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);display:inline-grid;grid-template-columns:var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);grid-auto-flow:var(--pf-c-progress-stepper--m-compact--GridAutoFlow)}`;
 import { PfProgressStep } from './pf-progress-step.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';

package/pf-spinner/BaseSpinner.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 styles = css `:host {\n  display: inline-block;\n  width: min-content;\n  min-height: 0;\n  aspect-ratio: 1 / 1;\n}\n\nsvg {\n  overflow: hidden;\n}\n\ncircle {\n  width: 100%;\n  height: 100%;\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n  stroke-dasharray: 283;\n  stroke-dashoffset: 280;\n}\n\n`;
+const styles = css `:host{display:inline-block;width:min-content;min-height:0;aspect-ratio:1/1}svg{overflow:hidden}circle{width:100%;height:100%;transform-origin:50% 50%;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:280}`;
 /**
  * Base spinner class
  *

package/pf-spinner/README.md

@@ -0,0 +1,46 @@
+# PatternFly Elements Spinner
+     
+`<pf-spinner>` is used to indicate to users that an action is in progress.
+
+Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)
+
+##  Installation
+
+Load `<pf-spinner>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-spinner/pf-spinner.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-spinner/pf-spinner.js';
+```
+
+## Usage
+```html
+<pf-spinner>Loading...</pf-spinner>
+```
+
+### Size variations
+
+```html
+<pf-spinner size="sm">Loading...</pf-spinner>
+<pf-spinner size="md">Loading...</pf-spinner>
+<pf-spinner size="lg">Loading...</pf-spinner>
+<pf-spinner size="xl">Loading...</pf-spinner>
+```
+
+### Custom size
+
+```html
+<pf-spinner diameter="80px">Loading...</pf-spinner>
+```
+

package/pf-spinner/pf-spinner.js

@@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { BaseSpinner } from './BaseSpinner.js';
 import { css } from "lit";
-const styles = css `[hidden] {\n  display: none !important;\n}\n\ndiv {\n  display: contents;\n}\n\nsvg {\n  width: var(--pf-c-spinner--Width,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  height: var(--pf-c-spinner--Height,\n    var(--pf-c-spinner--diameter,\n      var(--pf-global--icon--FontSize--xl, 3.375rem)));\n  animation:\n    pf-c-spinner-animation-rotate\n    calc(var(--pf-c-spinner--AnimationDuration, 1.4s) * 2)\n    var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;\n}\n\n:host([size="sm"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem));\n}\n\n:host([size="md"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem));\n}\n\n:host([size="lg"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem));\n}\n\n:host([size="xl"]) div {\n  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem));\n}\n\ncircle {\n  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));\n  stroke-width: var(--pf-c-spinner--stroke-width, 10);\n  animation:\n    pf-c-spinner-animation-dash\n    var(--pf-c-spinner--AnimationDuration, 1.4s)\n    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;\n}\n\n@keyframes pf-c-spinner-animation-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pf-c-spinner-animation-dash {\n  0% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n  15% {\n    stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth, 10) - 4);\n  }\n  40% {\n    stroke-dashoffset: 150;\n    stroke-dasharray: 220;\n  }\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(720deg);\n  }\n}\n`;
+const styles = css `[hidden]{display:none!important}div{display:contents}svg{width:var(--pf-c-spinner--Width,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));height:var(--pf-c-spinner--Height,var(--pf-c-spinner--diameter,var(--pf-global--icon--FontSize--xl,3.375rem)));animation:pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration,1.4s) * 2) var(--pf-c-spinner--AnimationTimingFunction,linear) infinite}:host([size=sm]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-sm--diameter,\n    var(--pf-global--icon--FontSize--sm, 0.625rem))}:host([size=md]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-md--diameter,\n    var(--pf-global--icon--FontSize--md, 1.125rem))}:host([size=lg]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-lg--diameter,\n    var(--pf-global--icon--FontSize--lg, 1.5rem))}:host([size=xl]) div{--pf-c-spinner--diameter:var(--pf-c-spinner--m-xl--diameter,\n    var(--pf-global--icon--FontSize--xl, 3.375rem))}circle{stroke:var(--pf-c-spinner--Color,var(--pf-global--primary-color--100,#06c));stroke-width:var(--pf-c-spinner--stroke-width,10);animation:pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration,1.4s) var(--pf-c-spinner__path--AnimationTimingFunction,ease-in-out) infinite}@keyframes pf-c-spinner-animation-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes pf-c-spinner-animation-dash{0%{stroke-dashoffset:280;transform:rotate(0)}15%{stroke-width:calc(var(--pf-c-spinner__path--StrokeWidth,10) - 4)}40%{stroke-dashoffset:150;stroke-dasharray:220}100%{stroke-dashoffset:280;transform:rotate(720deg)}}`;
 /**
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}

package/pf-switch/BaseSwitch.js

@@ -3,7 +3,7 @@ import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host(:disabled) {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n:host(:disabled) #container {\n  cursor: not-allowed;\n}\n\n:host(:disabled:focus-within) #container {\n  outline: none;\n}\n\n#container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n#container::before {\n  position: absolute;\n  display: block;\n  content: "";\n}\n`;
+const styles = css `:host{display:inline-block}svg{fill:currentcolor}[hidden]{display:none!important}:host(:disabled){pointer-events:none;cursor:not-allowed}:host(:disabled) #container{cursor:not-allowed}:host(:disabled:focus-within) #container{outline:0}#container{position:relative;display:inline-flex;align-items:center}#container::before{position:absolute;display:block;content:""}`;
 /**
  * Switch
  */

package/pf-switch/README.md

@@ -0,0 +1,91 @@
+# PatternFly Elements Switch
+     
+`<pf-switch>` is a switch that toggles the state of a setting (between on and 
+off). Switches provide a more explicit, visible representation on a setting.
+
+Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)
+
+##  Installation
+
+Load `<pf-switch>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-switch/pf-switch.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-switch/pf-switch.js';
+```
+
+### Note
+For `<pf-switch>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
+
+## Usage
+```html
+<pf-switch id="switch"></pf-switch>
+<label for="switch" data-state="on">Message when on</label>
+<label for="switch" data-state="off" hidden>Message when off</label>
+```
+
+### Form Associated
+
+`<pf-switch>` is a form-associated custom element. That means that it can
+participate in HTML forms just like a native `<input>`. For example, if you add
+the `name` attribute, or the `id` attribute, the element will appear in the
+FormData object. For example, if you add the `name` attribute, or the `id`
+attribute, the element will appear in the `FormData` object.
+
+```html
+<form>
+  <label> Dark Mode
+    <pf-switch name="dark"></pf-switch>
+  </label>
+  <script>
+  document.currentScript.closest('form').addEventListener('submit', function() {
+    console.log(this.elements.dark) // <pf-switch>
+  })
+  </script>
+</form>
+```
+
+
+### Without label
+
+```html
+<pf-switch></pf-switch>
+```
+
+### Checked with label
+
+```html
+<pf-switch show-check-icon></pf-switch>
+<label for="switch" data-state="on">Message when on</label>
+<label for="switch" data-state="off" hidden>Message when off</label>
+```
+
+### Disabled Switches
+
+```html
+<form>
+  <fieldset>
+    <legend>Checked and Disabled</legend>
+    <pf-switch id="checked-disabled" checked disabled></pf-switch>
+    <label for="checked-disabled" data-state="on">Message when on</label>
+    <label for="checked-disabled" data-state="off">Message when off</label>
+  </fieldset>
+
+  <fieldset>
+    <pf-switch id="disabled" disabled></pf-switch>
+    <label for="disabled" data-state="on">Message when on</label>
+    <label for="disabled" data-state="off">Message when off</label>
+  </fieldset>
+</form>
+```

package/pf-switch/pf-switch.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { BaseSwitch } from './BaseSwitch.js';
 import { css } from "lit";
-const styles = css `:host([checked]) #container {\n  color: var(--pf-c-switch__input--checked__label--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([checked]) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n:host(:disabled) #container {\n  color: var(--pf-c-switch__input--disabled__label--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:disabled) #container::before {\n  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,\n    var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([checked]:disabled) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n#container {\n  width: var(--pf-c-switch__toggle--Width,\n    calc(var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n            calc(var(--pf-c-switch--FontSize,\n              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));\n  height: var(--pf-c-switch__toggle--Height,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5))));\n  background-color: var(--pf-c-switch__toggle--BackgroundColor,\n    var(--pf-global--palette--black-500, #8a8d90));\n  border-radius: var(--pf-c-switch__toggle--BorderRadius,\n    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5)))));\n}\n\n#container::before {\n  top: var(--pf-c-switch__toggle--before--Top,\n    calc((var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n            var(--pf-c-switch__toggle--before--Width,\n              calc(var(--pf-c-switch--FontSize,\n                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));\n  left: var(--pf-c-switch__toggle--before--Left,\n    var(--pf-c-switch__toggle--before--Top,\n      calc((var(--pf-c-switch__toggle--Height,\n        calc(var(--pf-c-switch--FontSize,\n          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n              var(--pf-c-switch__toggle--before--Width,\n                calc(var(--pf-c-switch--FontSize,\n                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));\n  width: var(--pf-c-switch__toggle--before--Width,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n  height: var(--pf-c-switch__toggle--before--Height,\n    var(--pf-c-switch__toggle--before--Width,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));\n  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,\n    var(--pf-global--backgroundcolor--100, #fff));\n  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 30em));\n  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  transition: var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;\n}\n\n:host(:focus-within) #container {\n  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,\n    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,\n      var(--pf-global--primary-color--100, #06c));\n  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,\n    var(--pf-global--spacer--sm, 0.5rem));\n}\n\nsvg {\n  margin-inline: var(--pf-c-switch__toggle-icon--Left,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .4));\n  font-size: var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));\n  color: var(--pf-c-switch__toggle-icon--Color,\n    var(--pf-global--Color--light-100, #fff));\n}\n`;
+const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--checked__label--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-switch__input--checked__toggle--BackgroundColor,var(--pf-global--primary-color--100,#06c))}:host([checked]) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}:host(:disabled) #container{color:var(--pf-c-switch__input--disabled__label--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-switch__input--disabled__toggle--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:disabled) #container::before{background-color:var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5))}:host([checked]:disabled) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}#container{width:var(--pf-c-switch__toggle--Width,calc(var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) + var(--pf-c-switch__toggle-icon--Offset,.125rem) + var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))));height:var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5))));background-color:var(--pf-c-switch__toggle--BackgroundColor,var(--pf-global--palette--black-500,#8a8d90));border-radius:var(--pf-c-switch__toggle--BorderRadius,var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))))}#container::before{top:var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2));left:var(--pf-c-switch__toggle--before--Left,var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2)));width:var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)));height:var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem))));background-color:var(--pf-c-switch__toggle--before--backgroundcolor,var(--pf-global--backgroundcolor--100,#fff));border-radius:var(--pf-c-switch__toggle--before--BorderRadius,var(--pf-global--BorderRadius--lg,30em));box-shadow:var(--pf-c-switch__toggle--before--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));transition:var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s))}:host(:focus-within) #container{outline:var(--pf-c-switch__input--focus__toggle--OutlineWidth,var(--pf-global--BorderWidth--md,2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,var(--pf-global--primary-color--100,#06c));outline-offset:var(--pf-c-switch__input--focus__toggle--OutlineOffset,var(--pf-global--spacer--sm,0.5rem))}svg{margin-inline:var(--pf-c-switch__toggle-icon--Left,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * .4));font-size:var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));color:var(--pf-c-switch__toggle-icon--Color,var(--pf-global--Color--light-100,#fff))}`;
 /**
  * Switch
  * @cssprop --pf-c-switch--FontSize {@default `1rem`}

package/pf-tabs/BaseTab.d.ts

@@ -16,6 +16,7 @@ export declare abstract class BaseTab extends LitElement {
         customElements?: CustomElementRegistry | undefined;
     };
     private icons;
+    private button;
     /** `active` should be observed, and true when the tab is selected */
     abstract active: boolean;
     /** `active` should be observed, and true when the tab is disabled */

package/pf-tabs/BaseTab.js

@@ -1,10 +1,10 @@
 var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
 import { __classPrivateFieldGet, __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { queryAssignedElements, query } from 'lit/decorators.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { css } from "lit";
-const style = css `:host {\n  display: flex;\n  flex: none;\n}\n\n:host([vertical]) [part="text"] {\n  max-width: 100%;\n  overflow-wrap: break-word;\n}\n\n[hidden] {\n  display: none !important;\n}\n\nslot[name="icon"] {\n  display: block;\n}\n\nbutton {\n  margin: 0;\n  font-family: inherit;\n  font-size: 100%;\n  border: 0;\n  position: relative;\n  display: flex;\n  flex: 1;\n  text-decoration: none;\n  cursor: pointer;\n}\n\nbutton::before,\nbutton::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\nbutton::before {\n  pointer-events: none;\n}\n\n:host([fill]) button {\n  flex-basis: 100%;\n  justify-content: center;\n}\n\n:host(:disabled) button {\n  pointer-events: none;\n}\n\n:host([aria-disabled="true"]) button {\n  cursor: default;\n}\n`;
+const style = css `:host{display:flex;flex:none}:host([vertical]) [part=text]{max-width:100%;overflow-wrap:break-word}[hidden]{display:none!important}slot[name=icon]{display:block}button{margin:0;font-family:inherit;font-size:100%;border:0;position:relative;display:flex;flex:1;text-decoration:none;cursor:pointer}button::after,button::before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";border-style:solid;padding:0;margin:0;background-color:transparent}button::before{pointer-events:none}:host([fill]) button{flex-basis:100%;justify-content:center}:host(:disabled) button{pointer-events:none}:host([aria-disabled=true]) button{cursor:default}`;
 export class TabExpandEvent extends ComposedEvent {
     constructor(active, tab) {
         super('expand');
@@ -21,11 +21,11 @@ export class BaseTab extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_clickHandler));
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").role = 'tab';
     }
     render() {
-        const tabIndex = (this.active && !this.disabled) ? null : '-1';
         return html `
-      <button part="button" role="tab" tabindex="${tabIndex ?? nothing}">
+      <button part="button" ?disabled="${this.disabled}">
         <slot name="icon"
               part="icon"
               ?hidden="${!this.icons.length}"
@@ -45,7 +45,7 @@ export class BaseTab extends LitElement {
     }
 }
 _BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab_clickHandler = function _BaseTab_clickHandler() {
-    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true') {
+    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
         this.active = true;
     }
 }, _BaseTab_activeChanged = function _BaseTab_activeChanged() {
@@ -64,4 +64,7 @@ BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: t
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], BaseTab.prototype, "icons", void 0);
+__decorate([
+    query('button')
+], BaseTab.prototype, "button", void 0);
 //# sourceMappingURL=BaseTab.js.map

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAcE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/D,OAAO,IAAI,CAAA;mDACoC,QAAQ,IAAI,OAAO;;;yBAG7C,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7D,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAjEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html, nothing } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n  }\n\n  render() {\n    const tabIndex = (this.active && !this.disabled) ? null : '-1';\n    return html`\n      <button part=\"button\" role=\"tab\" tabindex=\"${tabIndex ?? nothing}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAM,OAAgB,OAAQ,SAAQ,UAAU;IAAhD;;;QAgBE,6BAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAqDtC,CAAC;IAnDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,iDAAc,CAAC,CAAC;QACnD,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,uBAAA,IAAI,kDAAe,MAAnB,IAAI,CAAiB,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,uBAAA,IAAI,oDAAiB,MAArB,IAAI,CAAmB,CAAC;SACzB;IACH,CAAC;;;IAGC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,0BAAW,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC;KACvC;SAAM;QACL,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,OAAO,CAAC;KACxC;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC;IAQC,uBAAA,IAAI,0BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAnEe,cAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1B,yBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGrF;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAElB;IAAhB,KAAK,CAAC,QAAQ,CAAC;uCAAoC","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements, query } from 'lit/decorators.js';\n\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabPanel.js

@@ -2,7 +2,7 @@ var _BaseTabPanel_internals;
 import { __classPrivateFieldGet } from "tslib";
 import { LitElement, html } from 'lit';
 import { css } from "lit";
-const style = css `:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n`;
+const style = css `:host{display:block}:host([hidden]){display:none}`;
 export class BaseTabPanel extends LitElement {
     constructor() {
         super(...arguments);

package/pf-tabs/BaseTabs.d.ts

@@ -25,6 +25,12 @@ export declare abstract class BaseTabs extends LitElement {
     private panels;
     private tabList;
     id: string;
+    /**
+     * Tab activation
+     * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated
+     * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)
+     */
+    manual: boolean;
     get activeIndex(): number;
     set activeIndex(index: number);
     connectedCallback(): void;