@patternfly/elements 3.0.1 → 4.0.0

package/pf-progress-stepper/pf-progress-stepper.d.ts

@@ -1,7 +1,122 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
+ * @cssprop [--pf-c-progress-stepper--m-vertical--GridAutoFlow=row]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--GridTemplateColumns=auto 1fr]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Top=0]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Left=calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Width=auto]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Height=100%]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor=var(--pf-global--BorderColor--100, #d2d2d2)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth=0]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor=transparent]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Transform=translateX(-50%)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginRight=0]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginBottom=var(--pf-global--spacer--xl, 2rem)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns=1fr]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow=auto]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight=0]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight=0]
+ * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal--GridAutoFlow=column]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal--GridTemplateColumns=initial]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Top=calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Left=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Width=100%]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Height=auto]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor=unset]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform=translateY(-50%)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns=repeat(auto-fill, 1.75rem)]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom=0]
+ * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow=2]
+ * @cssprop [--pf-c-progress-stepper--m-compact--GridAutoFlow=row]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginTop=0]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--MinWidth=1.75rem]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--Width=1.125rem]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__pficon--MarginTop=2px]
+ * @cssprop [--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop=-3px]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Left=50%]
+ * @cssprop [--pf-c-progress-stepper--m-center--GridTemplateColumns=1fr]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-connector--JustifyContent=center]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-main--TextAlign=center]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginRight=0]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginLeft=0]
+ * @cssprop [--pf-c-progress-stepper--GridTemplateRows=auto 1fr]
+ * @cssprop [--pf-c-progress-stepper__step-connector--JustifyContent=start]
+ * @cssprop [--pf-c-progress-stepper__step-icon--ZIndex=var(--pf-global--ZIndex--xs, 100)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--Width=1.75rem]
+ * @cssprop [--pf-c-progress-stepper__step-icon--Height=var(--pf-c-progress-stepper__step-icon--Width)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--FontSize=var(--pf-global--FontSize--md, 1rem)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--BackgroundColor=var(--pf-global--BackgroundColor--light-200, #fafafa)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--BorderWidth=var(--pf-global--BorderWidth--md, 2px)]
+ * @cssprop [--pf-c-progress-stepper__step-icon--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]
+ * @cssprop [--pf-c-progress-stepper__pficon--MarginTop=3px]
+ * @cssprop [--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop=-5px]
+ * @cssprop [--pf-c-progress-stepper__step-title--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step-title--TextAlign=left]
+ * @cssprop [--pf-c-progress-stepper__step-title--FontSize=var(--pf-global--FontSize--md, 1rem)]
+ * @cssprop [--pf-c-progress-stepper__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]
+ * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--FontWeight=var(--pf-global--FontWeight--bold, 700)]
+ * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step--m-pending__step-title--Color=var(--pf-global--Color--200, #6a6e73)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--Color=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor=var(--pf-global--BorderColor--200, #8a8d90)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness=var(--pf-global--BorderWidth--sm, 1px)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset=0.25rem]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--Color=var(--pf-global--Color--100, #151515)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color=var(--pf-global--danger-color--200, #a30000)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color=var(--pf-global--danger-color--200, #a30000)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor=var(--pf-global--danger-color--100, #c9190b)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--danger-color--200, #a30000)]
+ * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor=var(--pf-global--danger-color--200, #a30000)]
+ * @cssprop [--pf-c-progress-stepper__step-description--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]
+ * @cssprop [--pf-c-progress-stepper__step-description--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]
+ * @cssprop [--pf-c-progress-stepper__step-description--Color=var(--pf-global--Color--200, #6a6e73)]
+ * @cssprop [--pf-c-progress-stepper__step-description--TextAlign=left]
+ * @cssprop [--pf-c-progress-stepper--GridAutoFlow=var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)]
+ * @cssprop [--pf-c-progress-stepper--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Top=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Left=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Width=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Height=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor)]
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Transform=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform)]
+ * @cssprop [--pf-c-progress-stepper__step-main--MarginTop=var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop)]
+ * @cssprop [--pf-c-progress-stepper__step-main--MarginRight=var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight)]
+ * @cssprop [--pf-c-progress-stepper__step-main--MarginBottom=var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom)]
+ * @cssprop [--pf-c-progress-stepper__step-main--MarginLeft=var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft)]
+ * @cssprop [--pf-c-progress-stepper--m-compact--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--GridRow=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow)]
+ * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom)]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Content=none]
+ * @cssprop [--pf-c-progress-stepper--m-center__step-main--before--Content='']
+ * @cssprop [--pf-c-progress-stepper__step-connector--before--Content='']
+ * @cssprop [--pf-c-progress-stepper__step-main--before--Content=none]
  */
 export declare class PfProgressStepper extends LitElement {
     #private;
@@ -16,7 +131,8 @@ export declare class PfProgressStepper extends LitElement {
     compact: boolean;
     get value(): number;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
+    updated(changed: PropertyValues<this>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,23 +1,18 @@
 var _PfProgressStepper_instances, _PfProgressStepper_internals, _PfProgressStepper_mo, _PfProgressStepper_onMutation;
-var PfProgressStepper_1;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.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`;
 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';
-/**
- * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
- */
-let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends LitElement {
+let PfProgressStepper = class PfProgressStepper extends LitElement {
     get value() {
         const { childTagName } = this.constructor;
-        const steps = this.querySelectorAll(childTagName);
-        const current = this.querySelector(`${childTagName}[current]`);
+        const steps = this.querySelectorAll?.(childTagName) ?? [];
+        const current = this.querySelector?.(`${childTagName}[current]`);
         const n = Array.from(steps).indexOf(current) + 1;
         return (n / steps.length) * 100;
     }
@@ -42,6 +37,11 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
         // eslint-disable-next-line lit-a11y/accessible-name
         return html `<div role="listbox" style="display:contents;"><slot></slot></div>`;
     }
+    updated(changed) {
+        if (changed.has('compact')) {
+            this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate());
+        }
+    }
 };
 _PfProgressStepper_internals = new WeakMap();
 _PfProgressStepper_mo = new WeakMap();
@@ -52,6 +52,7 @@ _PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
 PfProgressStepper.childTagName = 'pf-progress-step';
 PfProgressStepper.styles = [style];
 PfProgressStepper.formAssociated = true;
+PfProgressStepper.version = "4.0.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "vertical", void 0);
@@ -59,12 +60,9 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "center", void 0);
 __decorate([
-    observed(function () {
-        this.querySelectorAll('pf-progress-step').forEach(step => step.requestUpdate());
-    }),
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "compact", void 0);
-PfProgressStepper = PfProgressStepper_1 = __decorate([
+PfProgressStepper = __decorate([
     customElement('pf-progress-stepper')
 ], PfProgressStepper);
 export { PfProgressStepper };

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,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEI,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA0B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,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;;QA5BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAII,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;;;;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAxCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAE1B,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;AAMf;IAH3C,QAAQ,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAClF,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAjBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAgD7B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.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 */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [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  @observed(function(this: PfProgressStepper) {\n    this.querySelectorAll('pf-progress-step').forEach(step => step.requestUpdate());\n  })\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() {\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() {\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\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;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"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-progress-stepper';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-progress-stepper.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.e2e.js","sourceRoot":"","sources":["pf-progress-stepper.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-progress-stepper';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-progress-stepper.e2e.js","sourceRoot":"","sources":["pf-progress-stepper.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-progress-stepper';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-select/pf-option-group.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Group of options within a listbox
  * @slot - `<pf-option>` or `<hr>` elements
@@ -11,7 +11,7 @@ export declare class PfOptionGroup extends LitElement {
     label?: string;
     /** whether group is disabled */
     disabled: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-select/pf-option-group.js

@@ -7,11 +7,6 @@ import { property } from 'lit/decorators/property.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: block;\n  border-bottom: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  cursor: not-allowed;\n  color: var(--pf-global--Color--200, #6a6e73) !important;\n  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  --_svg-color: var(--pf-global--Color--200, #6a6e73) !important;\n}\n\nslot {\n  display: block;\n  padding: var(--pf-global--spacer--md, 1rem) 0;\n}\n\nslot[name="label"] {\n  font-size: var(--pf-global--FontSize--xs, 0.75rem);\n  color: var(--pf-global--Color--dark-200, #6a6e73);\n  padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem) 0;\n}\n`;
-/**
- * Group of options within a listbox
- * @slot - `<pf-option>` or `<hr>` elements
- * @slot label - Group label. Overrides the `label` attribute.
- */
 let PfOptionGroup = class PfOptionGroup extends LitElement {
     constructor() {
         super(...arguments);
@@ -35,6 +30,7 @@ let PfOptionGroup = class PfOptionGroup extends LitElement {
 };
 _PfOptionGroup_internals = new WeakMap();
 PfOptionGroup.styles = [styles];
+PfOptionGroup.version = "4.0.0";
 __decorate([
     property()
 ], PfOptionGroup.prototype, "label", void 0);

package/pf-select/pf-option-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-option-group.js","sourceRoot":"","sources":["pf-option-group.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAML,gCAAgC;QACY,aAAQ,GAAG,KAAK,CAAC;QAE7D,eAAe;QACf,2DAA2D;QAC3D,mCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAC;IAa/D,CAAC;IAXC,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;uBAGQ,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;6BAChB,IAAI,CAAC,KAAK;;qBAElB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;KACtC,CAAC;IACJ,CAAC;;;AAtBe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGtB;IAAX,QAAQ,EAAE;4CAAgB;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAPlD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAwBzB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-option-group.css';\n\n/**\n * Group of options within a listbox\n * @slot - `<pf-option>` or `<hr>` elements\n * @slot label - Group label. Overrides the `label` attribute.\n */\n@customElement('pf-option-group')\nexport class PfOptionGroup extends LitElement {\n  static readonly styles = [styles];\n\n  /** Group description. Overridden by `label` slot. */\n  @property() label?: string;\n\n  /** whether group is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // for the role\n  // eslint-disable-next-line no-unused-private-class-members\n  #internals = InternalsController.of(this, { role: 'group' });\n\n  render() {\n    const { disabled } = this;\n    return html`\n      <div id=\"label-container\"\n           role=\"presentation\">\n        <slot class=\"${classMap({ disabled })}\"\n              name=\"label\">${this.label}</slot>\n      </div>\n      <slot class=\"${classMap({ disabled })}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-option-group': PfOptionGroup;\n  }\n}\n"]}
+{"version":3,"file":"pf-option-group.js","sourceRoot":"","sources":["pf-option-group.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAUxF,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAML,gCAAgC;QACY,aAAQ,GAAG,KAAK,CAAC;QAE7D,eAAe;QACf,2DAA2D;QAC3D,mCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAC;;IAE7D,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;uBAGQ,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;6BAChB,IAAI,CAAC,KAAK;;qBAElB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;KACtC,CAAC;IACJ,CAAC;;;AAtBe,oBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGvC;IAAX,QAAQ,EAAE;4CAAgB;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAPlD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-option-group.css';\n\n/**\n * Group of options within a listbox\n * @slot - `<pf-option>` or `<hr>` elements\n * @slot label - Group label. Overrides the `label` attribute.\n */\n@customElement('pf-option-group')\nexport class PfOptionGroup extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** Group description. Overridden by `label` slot. */\n  @property() label?: string;\n\n  /** whether group is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // for the role\n  // eslint-disable-next-line no-unused-private-class-members\n  #internals = InternalsController.of(this, { role: 'group' });\n\n  render(): TemplateResult<1> {\n    const { disabled } = this;\n    return html`\n      <div id=\"label-container\"\n           role=\"presentation\">\n        <slot class=\"${classMap({ disabled })}\"\n              name=\"label\">${this.label}</slot>\n      </div>\n      <slot class=\"${classMap({ disabled })}\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-option-group': PfOptionGroup;\n  }\n}\n"]}

package/pf-select/pf-option.css

@@ -14,7 +14,7 @@
 
 :host(:focus) #outer,
 :host(:hover) #outer,
-:host([aria-selected="true"]) {
+#outer.selected {
   background-color: #e0e0e0;
 }
 

package/pf-select/pf-option.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Option within a listbox
  * @slot -
@@ -33,9 +33,9 @@ export declare class PfOption extends LitElement {
      */
     set setSize(setSize: number | null);
     get setSize(): number | null;
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult<1>;
+    private selectedChanged;
+    private disabledChanged;
     /**
      * text content within option (used for filtering)
      */

package/pf-select/pf-option.js

@@ -5,19 +5,10 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: block;\n}\n\n:host([hidden]),\n*[hidden] {\n  display: none !important;\n}\n\n:host([disabled]) {\n  pointer-events: none !important;\n  cursor: not-allowed !important;\n}\n\n:host(:focus) #outer,\n:host(:hover) #outer,\n:host([aria-selected="true"]) {\n  background-color: #e0e0e0;\n}\n\n#outer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);\n  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));\n  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));\n}\n\n#outer.active {\n  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));\n}\n\n:host([disabled]) #outer {\n  color: var(--pf-global--Color--dark-200, #6a6e73) !important;\n}\n\ninput[type="checkbox"] {\n  margin-inline-end: 1em;\n  display: var(--_pf-option-checkboxes-display, none);\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\nspan {\n  flex: 1 1 auto;\n}\n\nsvg {\n  font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));\n  color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));\n  width: 1em;\n  height: 1em;\n  margin-inline-start: 1em;\n  text-align: right;\n  flex: 0 0 auto;\n  display: var(--_pf-option-svg-display, block);\n}\n\n#description {\n  display: block;\n  flex: 1 0 100%;\n}\n\nslot[name="description"] {\n  font-size: var(--pf-global--FontSize--xs, 0.75rem);\n  color: var(--pf-global--Color--dark-200, #6a6e73);\n}\n\n::slotted([slot="icon"]) {\n  margin-inline-end: 0.5em;\n}\n\n`;
-/**
- * Option within a listbox
- * @slot -
- *        option text
- * @slot icon
- *        optional icon
- * @slot description
- *        optional description
- */
+const styles = css `:host {\n  display: block;\n}\n\n:host([hidden]),\n*[hidden] {\n  display: none !important;\n}\n\n:host([disabled]) {\n  pointer-events: none !important;\n  cursor: not-allowed !important;\n}\n\n:host(:focus) #outer,\n:host(:hover) #outer,\n#outer.selected {\n  background-color: #e0e0e0;\n}\n\n#outer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);\n  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));\n  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));\n}\n\n#outer.active {\n  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));\n}\n\n:host([disabled]) #outer {\n  color: var(--pf-global--Color--dark-200, #6a6e73) !important;\n}\n\ninput[type="checkbox"] {\n  margin-inline-end: 1em;\n  display: var(--_pf-option-checkboxes-display, none);\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\nspan {\n  flex: 1 1 auto;\n}\n\nsvg {\n  font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));\n  color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));\n  width: 1em;\n  height: 1em;\n  margin-inline-start: 1em;\n  text-align: right;\n  flex: 0 0 auto;\n  display: var(--_pf-option-svg-display, block);\n}\n\n#description {\n  display: block;\n  flex: 1 0 100%;\n}\n\nslot[name="description"] {\n  font-size: var(--pf-global--FontSize--xs, 0.75rem);\n  color: var(--pf-global--Color--dark-200, #6a6e73);\n}\n\n::slotted([slot="icon"]) {\n  margin-inline-end: 0.5em;\n}\n\n`;
 let PfOption = class PfOption extends LitElement {
     constructor() {
         super(...arguments);
@@ -69,16 +60,12 @@ let PfOption = class PfOption extends LitElement {
             return 0;
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.id || (this.id = getRandomId());
-    }
     render() {
-        const { disabled, active } = this;
+        const { disabled, active, selected } = this;
         return html `
-      <div id="outer" class="${classMap({ active, disabled })}">
+      <div id="outer" class="${classMap({ active, disabled, selected })}">
         <input type="checkbox"
-               aria-hidden="true"
+               inert
                role="presentation"
                tabindex="-1"
                ?checked="${this.selected}"
@@ -86,7 +73,7 @@ let PfOption = class PfOption extends LitElement {
         <slot name="icon"></slot>
         <span>
           <slot name="create"></slot>
-          <slot></slot>
+          <slot>${this.value}</slot>
         </span>
         <svg ?hidden="${!this.selected}"
              viewBox="0 0 512 512"
@@ -98,15 +85,11 @@ let PfOption = class PfOption extends LitElement {
       </div>
     `;
     }
-    willUpdate(changed) {
-        if (changed.has('selected')
-            // don't fire on initialization
-            && !(changed.get('selected') === undefined) && this.selected === false) {
-            __classPrivateFieldGet(this, _PfOption_internals, "f").ariaSelected = this.selected ? 'true' : 'false';
-        }
-        if (changed.has('disabled')) {
-            __classPrivateFieldGet(this, _PfOption_internals, "f").ariaDisabled = String(!!this.disabled);
-        }
+    selectedChanged() {
+        __classPrivateFieldGet(this, _PfOption_internals, "f").ariaSelected = String(!!this.selected);
+    }
+    disabledChanged() {
+        __classPrivateFieldGet(this, _PfOption_internals, "f").ariaDisabled = String(!!this.disabled);
     }
     /**
      * text content within option (used for filtering)
@@ -118,6 +101,7 @@ let PfOption = class PfOption extends LitElement {
 _PfOption_value = new WeakMap();
 _PfOption_internals = new WeakMap();
 PfOption.styles = [styles];
+PfOption.version = "4.0.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfOption.prototype, "disabled", void 0);
@@ -125,10 +109,10 @@ __decorate([
     property({ reflect: true })
 ], PfOption.prototype, "value", null);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], PfOption.prototype, "selected", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], PfOption.prototype, "active", void 0);
 __decorate([
     property()
@@ -136,6 +120,12 @@ __decorate([
 __decorate([
     queryAssignedNodes({ slot: '', flatten: true })
 ], PfOption.prototype, "_slottedText", void 0);
+__decorate([
+    observes('selected')
+], PfOption.prototype, "selectedChanged", null);
+__decorate([
+    observes('disabled')
+], PfOption.prototype, "disabledChanged", null);
 PfOption = __decorate([
     customElement('pf-option')
 ], PfOption);

package/pf-select/pf-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-option.js","sourceRoot":"","sources":["pf-option.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-option.css';\n\n/**\n * Option within a listbox\n * @slot -\n *        option text\n * @slot icon\n *        optional icon\n * @slot description\n *        optional description\n */\n@customElement('pf-option')\nexport class PfOption extends LitElement {\n  static readonly styles = [styles];\n\n  /** whether option is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** form value for this option */\n  @property({ reflect: true })\n  get value() {\n    return (this.#value ?? this.textContent ?? '').trim();\n  }\n\n  set value(v: string) {\n    this.#value = v;\n  }\n\n  /** whether option is selected */\n  @property({ type: Boolean }) selected = false;\n\n  /** whether option is active descendant */\n  @property({ type: Boolean }) active = false;\n\n  /** Optional option description; overridden by description slot. */\n  @property() description = '';\n\n  @queryAssignedNodes({ slot: '', flatten: true })\n  private _slottedText!: Node[];\n\n  /**\n   * this option's position relative to the other options\n   */\n  set posInSet(posInSet: number | null) {\n    this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;\n  }\n\n  get posInSet() {\n    const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  /**\n   * total number of options\n   */\n  set setSize(setSize: number | null) {\n    this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;\n  }\n\n  get setSize() {\n    try {\n      const int = parseInt(this.#internals.ariaSetSize ?? '0');\n      if (Number.isNaN(int)) {\n        return 0;\n      } else {\n        return int;\n      }\n    } catch {\n      return 0;\n    }\n  }\n\n  #value?: string;\n\n  #internals = InternalsController.of(this, { role: 'option' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId();\n  }\n\n  render() {\n    const { disabled, active } = this;\n    return html`\n      <div id=\"outer\" class=\"${classMap({ active, disabled })}\">\n        <input type=\"checkbox\"\n               aria-hidden=\"true\"\n               role=\"presentation\"\n               tabindex=\"-1\"\n               ?checked=\"${this.selected}\"\n               ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"></slot>\n        <span>\n          <slot name=\"create\"></slot>\n          <slot></slot>\n        </span>\n        <svg ?hidden=\"${!this.selected}\"\n             viewBox=\"0 0 512 512\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('selected')\n      // don't fire on initialization\n      && !(changed.get('selected') === undefined) && this.selected === false) {\n      this.#internals.ariaSelected = this.selected ? 'true' : 'false';\n    }\n    if (changed.has('disabled')) {\n      this.#internals.ariaDisabled = String(!!this.disabled);\n    }\n  }\n\n  /**\n   * text content within option (used for filtering)\n   */\n  get optionText() {\n    return this._slottedText.map(node => node.textContent).join('').trim();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-option': PfOption;\n  }\n}\n"]}
+{"version":3,"file":"pf-option.js","sourceRoot":"","sources":["pf-option.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\n\nimport styles from './pf-option.css';\n\n/**\n * Option within a listbox\n * @slot -\n *        option text\n * @slot icon\n *        optional icon\n * @slot description\n *        optional description\n */\n@customElement('pf-option')\nexport class PfOption extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** whether option is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** form value for this option */\n  @property({ reflect: true })\n  get value() {\n    return (this.#value ?? this.textContent ?? '').trim();\n  }\n\n  set value(v: string) {\n    this.#value = v;\n  }\n\n  /** whether option is selected */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** whether option is active descendant */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Optional option description; overridden by description slot. */\n  @property() description = '';\n\n  @queryAssignedNodes({ slot: '', flatten: true })\n  private _slottedText!: Node[];\n\n  /**\n   * this option's position relative to the other options\n   */\n  set posInSet(posInSet: number | null) {\n    this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;\n  }\n\n  get posInSet() {\n    const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  /**\n   * total number of options\n   */\n  set setSize(setSize: number | null) {\n    this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;\n  }\n\n  get setSize() {\n    try {\n      const int = parseInt(this.#internals.ariaSetSize ?? '0');\n      if (Number.isNaN(int)) {\n        return 0;\n      } else {\n        return int;\n      }\n    } catch {\n      return 0;\n    }\n  }\n\n  #value?: string;\n\n  #internals = InternalsController.of(this, { role: 'option' });\n\n  render(): TemplateResult<1> {\n    const { disabled, active, selected } = this;\n    return html`\n      <div id=\"outer\" class=\"${classMap({ active, disabled, selected })}\">\n        <input type=\"checkbox\"\n               inert\n               role=\"presentation\"\n               tabindex=\"-1\"\n               ?checked=\"${this.selected}\"\n               ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"></slot>\n        <span>\n          <slot name=\"create\"></slot>\n          <slot>${this.value}</slot>\n        </span>\n        <svg ?hidden=\"${!this.selected}\"\n             viewBox=\"0 0 512 512\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"></path>\n        </svg>\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>\n    `;\n  }\n\n  @observes('selected')\n  private selectedChanged() {\n    this.#internals.ariaSelected = String(!!this.selected);\n  }\n\n  @observes('disabled')\n  private disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  /**\n   * text content within option (used for filtering)\n   */\n  get optionText(): string {\n    return this._slottedText.map(node => node.textContent).join('').trim();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-option': PfOption;\n  }\n}\n"]}

package/pf-select/pf-select.css

@@ -278,6 +278,11 @@
   padding: var(--pf-global--spacer--sm, 0.5rem);
 }
 
+#toggle-button:focus:before {
+  border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
+}
+
 #outer.typeahead #toggle-button {
   flex: 0 0 auto;
 }
@@ -323,13 +328,16 @@ pf-badge {
   display: none !important;
 }
 
-.offscreen {
-  position: absolute;
-  left: -99999;
-  width: 0;
-  height: 0;
-  opacity: 0;
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
 ::slotted(hr) {