@patternfly/elements 4.1.0 → 4.2.0

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

@@ -4,7 +4,331 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.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 {
+  /** Grid auto flow for vertical layout */
+  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;
+  /** Grid template columns for vertical layout */
+  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
+  /** Top position for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
+  /** Left position for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
+  /** Width for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
+  /** Height for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
+  /** Right border width for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Right border color for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Bottom border width for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
+  /** Bottom border color for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
+  /** Transform for vertical step connector pseudo-element */
+  --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
+  /** Top margin for vertical step main content */
+  --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right margin for vertical step main content */
+  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
+  /** Bottom margin for vertical step main content */
+  --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);
+  /** Left margin for vertical step main content */
+  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  /** Grid template columns for vertical compact layout */
+  --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
+  /** Padding bottom for vertical compact step connector */
+  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Grid row for vertical compact step connector */
+  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
+  /** Right margin for vertical compact step main content */
+  --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
+  /** Right margin for vertical centered step main content */
+  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
+  /** Left margin for vertical centered step main content */
+  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
+  /** Grid auto flow for horizontal layout */
+  --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;
+  /** Grid template columns for horizontal layout */
+  --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
+  /** Top position for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
+  /** Left position for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;
+  /** Width for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
+  /** Height for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
+  /** Right border width for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
+  /** Right border color for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
+  /** Bottom border width for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Bottom border color for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Transform for horizontal step connector pseudo-element */
+  --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
+  /** Top margin for horizontal step main content */
+  --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right margin for horizontal step main content */
+  --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** Bottom margin for horizontal step main content */
+  --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
+  /** Left margin for horizontal step main content */
+  --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
+  /** Grid template columns for horizontal compact layout */
+  --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
+  /** Padding bottom for horizontal compact step connector */
+  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;
+  /** Grid row for horizontal compact step connector */
+  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
+  /** Grid auto flow for compact layout */
+  --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
+  /** Top margin for compact step main content */
+  --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
+  /** Bottom margin for compact step main content */
+  --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Minimum width for compact step connector */
+  --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
+  /** Width for compact step icon */
+  --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
+  /** Font size for compact step icon */
+  --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+  /** Font size for compact step title */
+  --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Font weight for compact step title */
+  --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  /** Top margin for compact pficon */
+  --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
+  /** Top margin for compact exclamation triangle icon */
+  --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
+  /** Left position for centered step connector pseudo-element */
+  --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
+  /** Grid template columns for centered layout */
+  --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
+  /** Justify content for centered step connector */
+  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
+  /** Right margin for centered step main content */
+  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left margin for centered step main content */
+  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  /** Text alignment for centered step main content */
+  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
+  /** Right margin for centered step description */
+  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
+  /** Left margin for centered step description */
+  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
+  /** Grid template rows */
+  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
+  /** Justify content for step connector */
+  --pf-c-progress-stepper__step-connector--JustifyContent: start;
+  /** Z-index for step icon */
+  --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);
+  /** Width of the step icon */
+  --pf-c-progress-stepper__step-icon--Width: 1.75rem;
+  /** Height of the step icon */
+  --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);
+  /** Font size of the step icon */
+  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);
+  /** Color of the step icon */
+  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);
+  /** Background color of the step icon */
+  --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
+  /** Border width of the step icon */
+  --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+  /** Border color of the step icon */
+  --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  /** Top margin for pficon */
+  --pf-c-progress-stepper__pficon--MarginTop: 3px;
+  /** Top margin for exclamation triangle icon */
+  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
+  /** Color of the step title */
+  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);
+  /** Text alignment of the step title */
+  --pf-c-progress-stepper__step-title--TextAlign: left;
+  /** Font size of the step title */
+  --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);
+  /** Font weight of the step title */
+  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  /** Font weight for current step title */
+  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);
+  /** Color for current step title */
+  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);
+  /** Color for pending step title */
+  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);
+  /** Color for danger step title */
+  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);
+  /** Text decoration color for help text step title */
+  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);
+  /** Text decoration thickness for help text step title */
+  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);
+  /** Text underline offset for help text step title */
+  --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
+  /** Text decoration color for help text step title on hover */
+  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);
+  /** Text decoration color for help text step title on focus */
+  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);
+  /** Color for help text step title on hover */
+  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);
+  /** Color for help text step title on focus */
+  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);
+  /** Color for danger help text step title on hover */
+  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);
+  /** Color for danger help text step title on focus */
+  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);
+  /** Text decoration color for danger help text step title */
+  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Text decoration color for danger help text step title on hover */
+  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);
+  /** Text decoration color for danger help text step title on focus */
+  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);
+  /** Top margin for step description */
+  --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Font size of the step description */
+  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Color of the step description */
+  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);
+  /** Text alignment of the step description */
+  --pf-c-progress-stepper__step-description--TextAlign: left;
+  /** Grid auto flow (defaults to vertical) */
+  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
+  /** Grid template columns (defaults to vertical) */
+  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
+  /** Top position for step connector pseudo-element (defaults to vertical) */
+  --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';
@@ -52,7 +376,7 @@ _PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
 PfProgressStepper.childTagName = 'pf-progress-step';
 PfProgressStepper.styles = [style];
 PfProgressStepper.formAssociated = true;
-PfProgressStepper.version = "4.1.0";
+PfProgressStepper.version = "4.2.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "vertical", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAyH1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAuB/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAiB,YAAY,CAAC,IAAI,EAAE,CAAC;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QACjE,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAzBV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QACI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;YACxC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,uBAAuB;QACvB,oDAAoD;QACpD,OAAO,IAAI,CAAA,mEAAmE,CAAC;IACjF,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACpF,CAAC;IACH,CAAC;;;;;;IAbC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AArCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAE3C,gCAAc,GAAG,IAAI,AAAP,CAAQ;;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAdjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n * @cssprop [--pf-c-progress-stepper--m-vertical--GridAutoFlow=row]\n * @cssprop [--pf-c-progress-stepper--m-vertical--GridTemplateColumns=auto 1fr]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Top=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Left=calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Width=auto]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Height=100%]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor=transparent]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Transform=translateX(-50%)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginBottom=var(--pf-global--spacer--xl, 2rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns=1fr]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow=auto]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--GridAutoFlow=column]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--GridTemplateColumns=initial]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Top=calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Left=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Width=100%]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Height=auto]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor=unset]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform=translateY(-50%)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns=repeat(auto-fill, 1.75rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow=2]\n * @cssprop [--pf-c-progress-stepper--m-compact--GridAutoFlow=row]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginTop=0]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--MinWidth=1.75rem]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--Width=1.125rem]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-progress-stepper--m-compact__pficon--MarginTop=2px]\n * @cssprop [--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop=-3px]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Left=50%]\n * @cssprop [--pf-c-progress-stepper--m-center--GridTemplateColumns=1fr]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--JustifyContent=center]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--TextAlign=center]\n * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--GridTemplateRows=auto 1fr]\n * @cssprop [--pf-c-progress-stepper__step-connector--JustifyContent=start]\n * @cssprop [--pf-c-progress-stepper__step-icon--ZIndex=var(--pf-global--ZIndex--xs, 100)]\n * @cssprop [--pf-c-progress-stepper__step-icon--Width=1.75rem]\n * @cssprop [--pf-c-progress-stepper__step-icon--Height=var(--pf-c-progress-stepper__step-icon--Width)]\n * @cssprop [--pf-c-progress-stepper__step-icon--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-progress-stepper__step-icon--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BackgroundColor=var(--pf-global--BackgroundColor--light-200, #fafafa)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BorderWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper__pficon--MarginTop=3px]\n * @cssprop [--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop=-5px]\n * @cssprop [--pf-c-progress-stepper__step-title--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--TextAlign=left]\n * @cssprop [--pf-c-progress-stepper__step-title--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-progress-stepper__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--FontWeight=var(--pf-global--FontWeight--bold, 700)]\n * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step--m-pending__step-title--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--Color=var(--pf-global--danger-color--100, #c9190b)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor=var(--pf-global--BorderColor--200, #8a8d90)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset=0.25rem]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor=var(--pf-global--danger-color--100, #c9190b)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step-description--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper__step-description--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-progress-stepper__step-description--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-progress-stepper__step-description--TextAlign=left]\n * @cssprop [--pf-c-progress-stepper--GridAutoFlow=var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)]\n * @cssprop [--pf-c-progress-stepper--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Top=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Left=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Width=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Height=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Transform=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginTop=var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginRight=var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginBottom=var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginLeft=var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft)]\n * @cssprop [--pf-c-progress-stepper--m-compact--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--GridRow=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Content=none]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--before--Content='']\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Content='']\n * @cssprop [--pf-c-progress-stepper__step-main--before--Content=none]\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = InternalsController.of(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value(): number {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll?.<PfProgressStep>(childTagName) ?? [];\n    const current = this.querySelector?.(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render(): TemplateResult<1> {\n    // TODO: add label prop\n    // eslint-disable-next-line lit-a11y/accessible-name\n    return html`<div role=\"listbox\" style=\"display:contents;\"><slot></slot></div>`;\n  }\n\n  updated(changed: PropertyValues<this>): void {\n    if (changed.has('compact')) {\n      this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate());\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAItD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAO1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAuB/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAiB,YAAY,CAAC,IAAI,EAAE,CAAC;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QACjE,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAzBV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QACI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;YACxC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,uBAAuB;QACvB,oDAAoD;QACpD,OAAO,IAAI,CAAA,mEAAmE,CAAC;IACjF,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACpF,CAAC;IACH,CAAC;;;;;;IAbC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AArCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAE3C,gCAAc,GAAG,IAAI,AAAP,CAAQ;;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAdjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n * @alias Progress Stepper\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = InternalsController.of(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value(): number {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll?.<PfProgressStep>(childTagName) ?? [];\n    const current = this.querySelector?.(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render(): TemplateResult<1> {\n    // TODO: add label prop\n    // eslint-disable-next-line lit-a11y/accessible-name\n    return html`<div role=\"listbox\" style=\"display:contents;\"><slot></slot></div>`;\n  }\n\n  updated(changed: PropertyValues<this>): void {\n    if (changed.has('compact')) {\n      this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate());\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}