@patternfly/elements 2.4.0 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { 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';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' }\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n *\n * @summary Display completion status of ongoing process or task.\n *\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n *\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n *\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n *\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { 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';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' }\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n *\n * @summary Display completion status of ongoing process or task.\n *\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n *\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n *\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n *\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@ import { LitElement } from 'lit';
 export declare class PfProgressStep extends LitElement {
     #private;
     protected static parentTagName: string;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /** Optional extended description of the step */
     description?: string;
     /** Step Icon */
@@ -23,7 +23,7 @@ export declare class PfProgressStep extends LitElement {
     variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';
     /** Indicates if this item is the current active item. */
     current: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     updated(changed: PropertyValues<this>): void;
 }
 declare global {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'check-circle' },\n  danger: { icon: 'exclamation-circle' },\n  warning: { icon: 'exclamation-triangle' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = InternalsController.of(this, { role: 'listitem' });\n\n  render() {\n    const hasDescription = !!(this.description ?? this.#slots.hasSlotted('description'));\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
 export declare class PfProgressStepper extends LitElement {
     #private;
     protected static childTagName: string;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     static formAssociated: boolean;
     /** Whether to use the vertical layout */
     vertical: boolean;
@@ -16,7 +16,7 @@ export declare class PfProgressStepper extends LitElement {
     compact: boolean;
     get value(): number;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -6,7 +6,7 @@ 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]{display:none!important}:host{--pf-c-progress-stepper--m-vertical--GridAutoFlow:row;--pf-c-progress-stepper--m-vertical--GridTemplateColumns:auto 1fr;--pf-c-progress-stepper--m-vertical__step-connector--before--Top:0;--pf-c-progress-stepper--m-vertical__step-connector--before--Left:calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);--pf-c-progress-stepper--m-vertical__step-connector--before--Width:auto;--pf-c-progress-stepper--m-vertical__step-connector--before--Height:100%;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth:0;--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor:transparent;--pf-c-progress-stepper--m-vertical__step-connector--before--Transform:translateX(-50%);--pf-c-progress-stepper--m-vertical__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical__step-main--MarginBottom:var(--pf-global--spacer--xl, 2rem);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow:auto;--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight:0;--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--GridAutoFlow:column;--pf-c-progress-stepper--m-horizontal--GridTemplateColumns:initial;--pf-c-progress-stepper--m-horizontal__step-connector--before--Top:calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Left:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--Width:100%;--pf-c-progress-stepper--m-horizontal__step-connector--before--Height:auto;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth:0;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor:unset;--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform:translateY(-50%);--pf-c-progress-stepper--m-horizontal__step-main--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom:0;--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft:0;--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns:repeat(auto-fill, 1.75rem);--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom:0;--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow:2;--pf-c-progress-stepper--m-compact--GridAutoFlow:row;--pf-c-progress-stepper--m-compact__step-main--MarginTop:0;--pf-c-progress-stepper--m-compact__step-main--MarginBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-compact__step-connector--MinWidth:1.75rem;--pf-c-progress-stepper--m-compact__step-icon--Width:1.125rem;--pf-c-progress-stepper--m-compact__step-icon--FontSize:var(--pf-global--icon--FontSize--sm, 0.625rem);--pf-c-progress-stepper--m-compact__step-title--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper--m-compact__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper--m-compact__pficon--MarginTop:2px;--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop:-3px;--pf-c-progress-stepper--m-center__step-connector--before--Left:50%;--pf-c-progress-stepper--m-center--GridTemplateColumns:1fr;--pf-c-progress-stepper--m-center__step-connector--JustifyContent:center;--pf-c-progress-stepper--m-center__step-main--MarginRight:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--MarginLeft:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper--m-center__step-main--TextAlign:center;--pf-c-progress-stepper--m-center__step-description--MarginRight:0;--pf-c-progress-stepper--m-center__step-description--MarginLeft:0;--pf-c-progress-stepper--GridTemplateRows:auto 1fr;--pf-c-progress-stepper__step-connector--JustifyContent:start;--pf-c-progress-stepper__step-icon--ZIndex:var(--pf-global--ZIndex--xs, 100);--pf-c-progress-stepper__step-icon--Width:1.75rem;--pf-c-progress-stepper__step-icon--Height:var(--pf-c-progress-stepper__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-icon--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-icon--BackgroundColor:var(--pf-global--BackgroundColor--light-200, #fafafa);--pf-c-progress-stepper__step-icon--BorderWidth:var(--pf-global--BorderWidth--md, 2px);--pf-c-progress-stepper__step-icon--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-progress-stepper__pficon--MarginTop:3px;--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:-5px;--pf-c-progress-stepper__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--TextAlign:left;--pf-c-progress-stepper__step-title--FontSize:var(--pf-global--FontSize--md, 1rem);--pf-c-progress-stepper__step-title--FontWeight:var(--pf-global--FontWeight--normal, 400);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-global--FontWeight--bold, 700);--pf-c-progress-stepper__step--m-current__step-title--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-pending__step-title--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step--m-danger__step-title--Color:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor:var(--pf-global--BorderColor--200, #8a8d90);--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness:var(--pf-global--BorderWidth--sm, 1px);--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset:0.25rem;--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--hover--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step-title--m-help-text--focus--Color:var(--pf-global--Color--100, #151515);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor:var(--pf-global--danger-color--100, #c9190b);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor:var(--pf-global--danger-color--200, #a30000);--pf-c-progress-stepper__step-description--MarginTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-progress-stepper__step-description--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-progress-stepper__step-description--Color:var(--pf-global--Color--200, #6a6e73);--pf-c-progress-stepper__step-description--TextAlign:left;--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;position:relative;display:grid;grid-auto-flow:var(--pf-c-progress-stepper--GridAutoFlow);grid-template-columns:var(--pf-c-progress-stepper--GridTemplateColumns);grid-template-rows:var(--pf-c-progress-stepper--GridTemplateRows);grid-auto-columns:1fr}@media (min-width:768px){:host{--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper--m-center__step-connector--before--Content:'';--pf-c-progress-stepper--m-center__step-main--before--Content:none}}:host([center]){--pf-c-progress-stepper__step-connector--JustifyContent:var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-center__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);--pf-c-progress-stepper--step-main--TextAlign:var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);--pf-c-progress-stepper__step-title--TextAlign:var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);--pf-c-progress-stepper__step-description--MarginRight:var(--pf-c-progress-stepper--m-center__step-description--MarginRight);--pf-c-progress-stepper__step-description--MarginLeft:var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);--pf-c-progress-stepper__step-description--TextAlign:var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content);--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left);grid-template-columns:var(--pf-c-progress-stepper--m-center--GridTemplateColumns)}:host([center]:not([compact])){--pf-c-progress-stepper__step-main--before--Content:var(--pf-c-progress-stepper--m-center__step-main--before--Content);--pf-c-progress-stepper__step-connector--before--Content:var(--pf-c-progress-stepper--m-center__step-connector--before--Content)}:host([vertical]) ::slotted(pf-progress-step){flex-direction:row;align-items:flex-start}:host([vertical]){--pf-c-progress-stepper--GridAutoFlow:var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);--pf-c-progress-stepper--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);--pf-c-progress-stepper__step-connector--before--Top:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);--pf-c-progress-stepper__step-connector--before--Width:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);--pf-c-progress-stepper__step-connector--before--Height:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);--pf-c-progress-stepper__step-connector--before--BorderRightWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);--pf-c-progress-stepper__step-connector--before--BorderRightColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);--pf-c-progress-stepper__step-connector--before--BorderBottomWidth:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);--pf-c-progress-stepper__step-connector--before--BorderBottomColor:var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);--pf-c-progress-stepper__step-connector--before--Transform:var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);--pf-c-progress-stepper__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);--pf-c-progress-stepper--m-compact--GridTemplateColumns:var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);--pf-c-progress-stepper--m-compact__step-connector--GridRow:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom:var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);--pf-c-progress-stepper__step-connector--before--Content:'';--pf-c-progress-stepper__step-main--before--Content:none;--pf-c-progress-stepper--m-center__step-connector--before--Content:none;--pf-c-progress-stepper--m-center__step-main--before--Content:'';--pf-c-progress-stepper__step-main--Position:relative}:host([vertical][center]){--pf-c-progress-stepper__step-connector--before--Left:var(--pf-c-progress-stepper--m-center__step-connector--before--Left)}:host([compact]){--pf-c-progress-stepper__step-main--MarginTop:var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);--pf-c-progress-stepper__step-main--MarginBottom:var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);--pf-c-progress-stepper__step-icon--Width:var(--pf-c-progress-stepper--m-compact__step-icon--Width);--pf-c-progress-stepper__step-icon--FontSize:var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);--pf-c-progress-stepper__step-title--FontSize:var(--pf-c-progress-stepper--m-compact__step-title--FontSize);--pf-c-progress-stepper__step--m-current__step-title--FontWeight:var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);--pf-c-progress-stepper__pficon--MarginTop:var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop:var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);--pf-c-progress-stepper--m-vertical__step-main--MarginLeft:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);--pf-c-progress-stepper--m-vertical__step-main--MarginRight:var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);display:inline-grid;grid-template-columns:var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);grid-auto-flow:var(--pf-c-progress-stepper--m-compact--GridAutoFlow)}`;
+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';
@@ -30,7 +30,7 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
         this.center = false;
         /** Whether to use the compact layout */
         this.compact = false;
-        _PfProgressStepper_internals.set(this, new InternalsController(this, {
+        _PfProgressStepper_internals.set(this, InternalsController.of(this, {
             role: 'progressbar',
             ariaValueNow: this.value.toString(),
         }));
@@ -38,9 +38,9 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
         __classPrivateFieldGet(this, _PfProgressStepper_mo, "f").observe(this, { childList: true });
     }
     render() {
-        return html `
-      <slot role="listbox"></slot>
-    `;
+        // TODO: add label prop
+        // eslint-disable-next-line lit-a11y/accessible-name
+        return html `<div role="listbox" style="display:contents;"><slot></slot></div>`;
     }
 };
 _PfProgressStepper_internals = new WeakMap();
@@ -60,8 +60,7 @@ __decorate([
 ], PfProgressStepper.prototype, "center", void 0);
 __decorate([
     observed(function () {
-        const { childTagName } = this.constructor;
-        this.querySelectorAll(childTagName).forEach(step => step.requestUpdate());
+        this.querySelectorAll('pf-progress-step').forEach(step => step.requestUpdate());
     }),
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "compact", 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,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;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;IA2B/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;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,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,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,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;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","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    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(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    return html`\n      <slot role=\"listbox\"></slot>\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,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"]}

package/pf-select/README.md

@@ -0,0 +1,21 @@
+# Select
+
+A select list enables users to select one or more items from a list.
+
+## Usage
+
+A select component consists of a toggle control to open and close a menu of actions or links.
+Selects differ from dropdowns in that they persist selection, whereas dropdowns are typically used to present a list of actions or links.
+
+```html
+<pf-select>
+  <pf-option>Blue</pf-option>
+  <pf-option>Green</pf-option>
+  <pf-option>Magenta</pf-option>
+  <pf-option>Orange</pf-option>
+  <pf-option>Purple</pf-option>
+  <pf-option>Pink</pf-option>
+  <pf-option>Red</pf-option>
+  <pf-option>Yellow</pf-option>
+</pf-select>
+```

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  border-bottom: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: var(--pf-global--Color--200, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  --_svg-color: var(--pf-global--Color--200, #6a6e73) !important;
+}
+
+slot {
+  display: block;
+  padding: var(--pf-global--spacer--md, 1rem) 0;
+}
+
+slot[name="label"] {
+  font-size: var(--pf-global--FontSize--xs, 0.75rem);
+  color: var(--pf-global--Color--dark-200, #6a6e73);
+  padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem) 0;
+}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Group of options within a listbox
+ * @slot - `<pf-option>` or `<hr>` elements
+ * @slot label - Group label. Overrides the `label` attribute.
+ */
+export declare class PfOptionGroup extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    /** Group description. Overridden by `label` slot. */
+    label?: string;
+    /** whether group is disabled */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-option-group': PfOptionGroup;
+    }
+}

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

@@ -0,0 +1,46 @@
+var _PfOptionGroup_internals;
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+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);
+        /** whether group is disabled */
+        this.disabled = false;
+        _PfOptionGroup_internals.set(this, InternalsController.of(this, { role: 'group' }));
+    }
+    render() {
+        const { disabled } = this;
+        return html `
+      <div id="label-container"
+           role="presentation">
+        <slot class="${classMap({ disabled })}"
+              name="label">${this.label}</slot>
+      </div>
+      <slot class="${classMap({ disabled })}"></slot>
+    `;
+    }
+};
+_PfOptionGroup_internals = new WeakMap();
+PfOptionGroup.styles = [styles];
+__decorate([
+    property()
+], PfOptionGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfOptionGroup.prototype, "disabled", void 0);
+PfOptionGroup = __decorate([
+    customElement('pf-option-group')
+], PfOptionGroup);
+export { PfOptionGroup };
+//# sourceMappingURL=pf-option-group.js.map

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

@@ -0,0 +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,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;;;AApBe,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,CAsBzB","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  #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"]}

package/pf-select/pf-option.css

@@ -0,0 +1,74 @@
+:host {
+  display: block;
+}
+
+:host([hidden]),
+*[hidden] {
+  display: none !important;
+}
+
+:host([disabled]) {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+:host(:focus) #outer,
+:host(:hover) #outer,
+:host([aria-selected="true"]) {
+  background-color: #e0e0e0;
+}
+
+#outer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);
+  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));
+  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));
+}
+
+#outer.active {
+  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));
+}
+
+:host([disabled]) #outer {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+}
+
+input[type="checkbox"] {
+  margin-inline-end: 1em;
+  display: var(--_pf-option-checkboxes-display, none);
+  pointer-events: none;
+  flex: 0 0 auto;
+}
+
+span {
+  flex: 1 1 auto;
+}
+
+svg {
+  font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));
+  color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));
+  width: 1em;
+  height: 1em;
+  margin-inline-start: 1em;
+  text-align: right;
+  flex: 0 0 auto;
+  display: var(--_pf-option-svg-display, block);
+}
+
+#description {
+  display: block;
+  flex: 1 0 100%;
+}
+
+slot[name="description"] {
+  font-size: var(--pf-global--FontSize--xs, 0.75rem);
+  color: var(--pf-global--Color--dark-200, #6a6e73);
+}
+
+::slotted([slot="icon"]) {
+  margin-inline-end: 0.5em;
+}
+

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

@@ -0,0 +1,49 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * Option within a listbox
+ *
+ * @slot -
+ *        option text
+ * @slot icon
+ *        optional icon
+ * @slot description
+ *        optional description
+ */
+export declare class PfOption extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    /** whether option is disabled */
+    disabled: boolean;
+    /** form value for this option */
+    get value(): string;
+    set value(v: string);
+    /** whether option is selected */
+    selected: boolean;
+    /** whether option is active descendant */
+    active: boolean;
+    /** Optional option description; overridden by description slot. */
+    description: string;
+    private _slottedText;
+    /**
+     * this option's position relative to the other options
+     */
+    set posInSet(posInSet: number | null);
+    get posInSet(): number | null;
+    /**
+     * total number of options
+     */
+    set setSize(setSize: number | null);
+    get setSize(): number | null;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * text content within option (used for filtering)
+     */
+    get optionText(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-option': PfOption;
+    }
+}