@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-progress-bar/pf-progress-bar.js

@@ -0,0 +1,121 @@
+import { clampProgressPercent, progressValueNow } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A horizontal determinate progress track.
+ *
+ * @part track - the unfilled groove.
+ * @part fill - the filled portion.
+ * @part value - the percentage readout.
+ */
+export class PfProgressBar {
+    /** How far along, on the 0..max scale. */
+    value = 0;
+    /** The top of the scale. */
+    max = 100;
+    /** Show the percentage beside the track. Reflected for the stylesheet. */
+    showValue = true;
+    /** Accessible name. */
+    label;
+    render() {
+        // Both layers go through core, so the same value and max always report the
+        // same aria-valuenow and draw the same fill.
+        const percent = clampProgressPercent(this.value, this.max);
+        return (h(Host, { key: '09d62e00646da11864dcc3bb4724da8864d223fe', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progressValueNow(percent, this.max)}` }, h("div", { key: '42db85945311bd44d03058c0cd957b6397624cff', class: "track", part: "track" }, h("div", { key: '8222865b45a18175308f87f4fd30a313bb5452d5', class: "fill", part: "fill", style: { '--pf-progress-fill': `${percent}%` } })), this.showValue && (h("span", { key: '9e7a195ef193fd4e730bdf3eefb2f0170be56ecc', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+    static get is() { return "pf-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How far along, on the 0..max scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top of the scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the percentage beside the track. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-progress-bar.js.map

package/dist/collection/components/pf-progress-bar/pf-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-bar.js","sourceRoot":"","sources":["../../../src/components/pf-progress-bar/pf-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;IACxB,0CAA0C;IAClC,KAAK,GAAG,CAAC,CAAC;IAElB,4BAA4B;IACpB,GAAG,GAAG,GAAG,CAAC;IAElB,0EAA0E;IACjD,SAAS,GAAG,IAAI,CAAC;IAE1C,uBAAuB;IACf,KAAK,CAAU;IAEvB,MAAM;QACJ,2EAA2E;QAC3E,6CAA6C;QAC7C,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAE3D,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACR,GAAG,mBACF,GAAG,IAAI,CAAC,GAAG,EAAE,mBACb,GAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE;YAEvD,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,GAAG,OAAO,GAAG,EAAE,GAAI,CAC5E;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACf,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { clampProgressPercent, progressValueNow } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A horizontal determinate progress track.\n *\n * @part track - the unfilled groove.\n * @part fill - the filled portion.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-bar',\n  styleUrl: 'pf-progress-bar.css',\n  shadow: true,\n})\nexport class PfProgressBar {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Show the percentage beside the track. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    // Both layers go through core, so the same value and max always report the\n    // same aria-valuenow and draw the same fill.\n    const percent = clampProgressPercent(this.value, this.max);\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n      >\n        <div class=\"track\" part=\"track\">\n          <div class=\"fill\" part=\"fill\" style={{ '--pf-progress-fill': `${percent}%` }} />\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-progress-circle/pf-progress-circle.css

@@ -0,0 +1,62 @@
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-progress-circle-in {
+  from {
+    stroke-dashoffset: var(--pf-progress-circ);
+  }
+}
+
+:host {
+  align-items: center;
+  display: inline-flex;
+  height: var(--pf-progress-circle-size, 64px);
+  justify-content: center;
+  position: relative;
+  width: var(--pf-progress-circle-size, 64px);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.svg {
+  display: block;
+  height: 100%;
+  /* Start the arc at twelve o'clock rather than three. */
+  transform: rotate(-90deg);
+  width: 100%;
+}
+
+.circle-track,
+.circle-fill {
+  fill: none;
+}
+
+.circle-track {
+  stroke: var(--pf-progress-track-bg);
+}
+
+.circle-fill {
+  animation: pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);
+  stroke: var(--pf-progress-accent);
+  stroke-dashoffset: var(--pf-progress-dashoffset);
+  stroke-linecap: round;
+  /* Animate in from empty on mount, and smoothly between values on change. */
+  transition: stroke-dashoffset var(--pf-transition-slow);
+}
+
+.value {
+  color: var(--pf-progress-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .circle-fill {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/collection/components/pf-progress-circle/pf-progress-circle.js

@@ -0,0 +1,170 @@
+import { clampProgressPercent, getProgressCircleGeometry, progressValueNow, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A circular determinate progress track.
+ *
+ * @part svg - the drawing surface.
+ * @part track - the unfilled ring.
+ * @part fill - the drawn arc.
+ * @part value - the percentage readout.
+ */
+export class PfProgressCircle {
+    /** How far along, on the 0..max scale. */
+    value = 0;
+    /** The top of the scale. */
+    max = 100;
+    /** Diameter in pixels. */
+    size = 64;
+    /** Ring thickness in pixels. */
+    strokeWidth = 6;
+    /** Show the percentage in the middle. Reflected for the stylesheet. */
+    showValue = true;
+    /** Accessible name. */
+    label;
+    render() {
+        const percent = clampProgressPercent(this.value, this.max);
+        // The arc only lands on the right angle if the dash offset and the dash
+        // array come from the same radius, which is why core returns them together.
+        const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(this.size, this.strokeWidth, percent);
+        return (h(Host, { key: 'b99d70605eb7b981da829d5cda0a194e6c266fc5', role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": `${this.max}`, "aria-valuenow": `${progressValueNow(percent, this.max)}`, style: { '--pf-progress-circle-size': `${this.size}px` } }, h("svg", { key: '1bee11db8cfeebb35fe84bca03621a9e64a84c60', class: "svg", part: "svg", viewBox: `0 0 ${this.size} ${this.size}`, "aria-hidden": "true", focusable: "false" }, h("circle", { key: '8dc237646a40afa9d8f8ddff456367afa3b35718', class: "circle-track", part: "track", cx: `${center}`, cy: `${center}`, r: `${radius}`, "stroke-width": `${this.strokeWidth}` }), h("circle", { key: '34f8f094047de322717ff56dc956de39749de1eb', class: "circle-fill", part: "fill", cx: `${center}`, cy: `${center}`, r: `${radius}`, "stroke-width": `${this.strokeWidth}`, "stroke-dasharray": `${circumference}`, style: {
+                '--pf-progress-dashoffset': `${dashOffset}`,
+                '--pf-progress-circ': `${circumference}`,
+            } })), this.showValue && (h("span", { key: '18a89c9d9f967609f23db7e2a520df4f8400b1ad', class: "value", part: "value" }, Math.round(percent), "%"))));
+    }
+    static get is() { return "pf-progress-circle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-progress-circle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-progress-circle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How far along, on the 0..max scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top of the scale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "64"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ring thickness in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "6"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the percentage in the middle. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-progress-circle.js.map

package/dist/collection/components/pf-progress-circle/pf-progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress-circle.js","sourceRoot":"","sources":["../../../src/components/pf-progress-circle/pf-progress-circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;GAOG;AAMH,MAAM,OAAO,gBAAgB;IAC3B,0CAA0C;IAClC,KAAK,GAAG,CAAC,CAAC;IAElB,4BAA4B;IACpB,GAAG,GAAG,GAAG,CAAC;IAElB,0BAA0B;IAClB,IAAI,GAAG,EAAE,CAAC;IAElB,gCAAgC;IACxB,WAAW,GAAG,CAAC,CAAC;IAExB,uEAAuE;IAC9C,SAAS,GAAG,IAAI,CAAC;IAE1C,uBAAuB;IACf,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,wEAAwE;QACxE,4EAA4E;QAC5E,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,yBAAyB,CAC7E,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,WAAW,EAChB,OAAO,CACR,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACR,GAAG,mBACF,GAAG,IAAI,CAAC,GAAG,EAAE,mBACb,GAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACvD,KAAK,EAAE,EAAE,2BAA2B,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;YAExD,4DACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,iBAC5B,MAAM,EAClB,SAAS,EAAC,OAAO;gBAEjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,GAAG,MAAM,EAAE,EACf,EAAE,EAAE,GAAG,MAAM,EAAE,EACf,CAAC,EAAE,GAAG,MAAM,EAAE,kBACA,GAAG,IAAI,CAAC,WAAW,EAAE,GACnC;gBACF,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,GAAG,MAAM,EAAE,EACf,EAAE,EAAE,GAAG,MAAM,EAAE,EACf,CAAC,EAAE,GAAG,MAAM,EAAE,kBACA,GAAG,IAAI,CAAC,WAAW,EAAE,sBACjB,GAAG,aAAa,EAAE,EACpC,KAAK,EAAE;wBACL,0BAA0B,EAAE,GAAG,UAAU,EAAE;wBAC3C,oBAAoB,EAAE,GAAG,aAAa,EAAE;qBACzC,GACD,CACE;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACf,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  clampProgressPercent,\n  getProgressCircleGeometry,\n  progressValueNow,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A circular determinate progress track.\n *\n * @part svg - the drawing surface.\n * @part track - the unfilled ring.\n * @part fill - the drawn arc.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-circle',\n  styleUrl: 'pf-progress-circle.css',\n  shadow: true,\n})\nexport class PfProgressCircle {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Diameter in pixels. */\n  @Prop() size = 64;\n\n  /** Ring thickness in pixels. */\n  @Prop() strokeWidth = 6;\n\n  /** Show the percentage in the middle. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const percent = clampProgressPercent(this.value, this.max);\n    // The arc only lands on the right angle if the dash offset and the dash\n    // array come from the same radius, which is why core returns them together.\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      this.size,\n      this.strokeWidth,\n      percent,\n    );\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n        style={{ '--pf-progress-circle-size': `${this.size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${this.size} ${this.size}`}\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <circle\n            class=\"circle-track\"\n            part=\"track\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n          />\n          <circle\n            class=\"circle-fill\"\n            part=\"fill\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n            stroke-dasharray={`${circumference}`}\n            style={{\n              '--pf-progress-dashoffset': `${dashOffset}`,\n              '--pf-progress-circ': `${circumference}`,\n            }}\n          />\n        </svg>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-progress-step/pf-progress-step.css

@@ -0,0 +1,167 @@
+:host {
+  display: flex;
+  gap: var(--space-3);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([orientation='horizontal']) {
+  align-items: center;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+:host([orientation='vertical']) {
+  align-items: flex-start;
+  position: relative;
+}
+
+.marker-wrap {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+}
+
+:host([orientation='horizontal']) .marker-wrap {
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  :host([orientation='horizontal']) .marker-wrap {
+    flex: 1;
+    position: relative;
+    width: 100%;
+  }
+}
+
+:host([orientation='vertical']) .marker-wrap {
+  align-items: center;
+  flex-direction: column;
+}
+
+.marker {
+  align-items: center;
+  background: var(--pf-progress-steps-bg);
+  border: 1px solid var(--pf-progress-steps-border);
+  border-radius: var(--radius-full);
+  color: var(--pf-progress-steps-text-muted);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  height: 28px;
+  justify-content: center;
+  position: relative;
+  width: 28px;
+  z-index: 1;
+  /* The marker changes as the current step advances. */
+  transition:
+    background-color var(--pf-transition-medium),
+    border-color var(--pf-transition-medium),
+    color var(--pf-transition-medium),
+    box-shadow var(--pf-transition-medium);
+}
+
+.connector {
+  background: var(--pf-progress-steps-border);
+  display: block;
+  flex: 1;
+  margin-inline-start: var(--space-2);
+  /* The connector fills in as the step completes. */
+  transition: background-color var(--pf-transition-slow);
+}
+
+:host([orientation='horizontal']) .connector {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  :host([orientation='horizontal']) .connector {
+    display: block;
+    height: 1px;
+    left: 50%;
+    margin-inline-start: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    /* Spans the group's own gap, which it reads through the bridge above. */
+    width: calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));
+    z-index: 0;
+  }
+}
+
+:host([orientation='vertical']) .connector {
+  bottom: calc(var(--space-3) * -1);
+  inset-inline-start: 14px;
+  margin: 0;
+  position: absolute;
+  top: 28px;
+  width: 1px;
+}
+
+.content {
+  min-width: 0;
+}
+
+:host([orientation='horizontal']) .content {
+  text-align: center;
+}
+
+.title {
+  color: var(--pf-progress-steps-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-1) 0 0;
+  transition: color var(--pf-transition-medium);
+}
+
+/*
+ * The description is styled through the slot rather than wrapped in a box of
+ * its own, so that a step without one has no stray margin: a wrapper cannot be
+ * collapsed from CSS, while an unassigned slot generates nothing at all.
+ */
+slot[name='description']::slotted(*) {
+  color: var(--pf-progress-steps-text-muted);
+  display: block;
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  margin: var(--space-1) 0 0;
+}
+
+:host([state='complete']) .marker {
+  background: var(--pf-progress-steps-complete-bg);
+  border-color: var(--pf-progress-steps-complete-border);
+  color: var(--pf-progress-steps-complete-text);
+}
+
+:host([state='current']) .marker {
+  background: var(--pf-progress-steps-current-bg);
+  border-color: var(--pf-progress-steps-current-border);
+  /*
+   * `--pf-focus-ring`, not the `--focus-ring-shadow` the React component asked
+   * for: that one is defined nowhere, and an undefined custom property makes
+   * the declaration invalid at computed-value time -- measured in Chromium,
+   * `box-shadow: var(--focus-ring-shadow)` computes to `none`, so the ring had
+   * never been drawn. Fixed in both layers.
+   */
+  box-shadow: var(--pf-focus-ring);
+  color: var(--pf-progress-steps-current-text);
+}
+
+:host([state='complete']) .connector {
+  background: var(--pf-progress-steps-complete-border);
+}
+
+:host([state='current']) .title {
+  color: var(--pf-progress-steps-current-title);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marker,
+  .connector,
+  .title {
+    transition: none;
+  }
+}