@bspk/ui 1.1.34 → 1.2.0

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId } from '../../hooks/useId';
 import { cssWithVars } from '../../utils/cwv';
 import './progress-bar.css.js';
 /**
@@ -14,12 +14,13 @@ import './progress-bar.css.js';
  *     }
  *
  * @name ProgressBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressBar({ size = 'large', completion = 0, align = 'center', label }) {
+export function ProgressBar({ size = 'large', completion: completionProp = 0, align = 'center', label, successColor = false, successHidden = false, }) {
     const id = useId();
-    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "data-size": size, children: [_jsxs("progress", { "aria-busy": completion < 100, "aria-label": "A bounded progress bar from 0 to 100", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": completion, id: id, max: "100", value: completion, children: [completion, "%"] }), _jsx("div", { "aria-hidden": true, "data-bar": true, style: cssWithVars({ '--width': `${completion}%` }) }), _jsx("label", { htmlFor: id, children: label })] }));
+    const completion = Math.max(0, Math.min(100, Math.round(completionProp))); // Ensure completion is between 0 and 100
+    if (successHidden && completion === 100)
+        return null;
+    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "data-size": size, "data-success": successColor && completion === 100 ? 'color' : undefined, children: [_jsxs("progress", { "aria-busy": completion < 100, "aria-label": "A bounded progress bar from 0 to 100", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": completion, id: id, max: "100", value: completion, children: [completion, "%"] }), _jsx("div", { "aria-hidden": true, "data-bar": true, style: cssWithVars({ '--width': `${completion}%` }) }), _jsx("label", { htmlFor: id, children: label })] }));
 }
-ProgressBar.bspkName = 'ProgressBar';
-export { ProgressBar };
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,qBAAqB,CAAC;AAgC7B;;;;;;;;;;;;;GAaG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,GAAI,EACjF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,qBAAqB,CAAC;AA8C7B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,IAAI,GAAG,OAAO,EACd,UAAU,EAAE,cAAc,GAAG,CAAC,EAC9B,KAAK,GAAG,QAAQ,EAChB,KAAK,EACL,YAAY,GAAG,KAAK,EACpB,aAAa,GAAG,KAAK,GACN;IACf,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,yCAAyC;IAEpH,IAAI,aAAa,IAAI,UAAU,KAAK,GAAG;QAAE,OAAO,IAAI,CAAC;IAErD,OAAO,CACH,6BACgB,KAAK,eACP,cAAc,eACb,IAAI,kBACD,YAAY,IAAI,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,aAEtE,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,GAAI,EACjF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC"}

package/dist/components/ProgressBar/progress-bar.css

@@ -27,6 +27,9 @@
 [data-bspk=progress-bar][data-size=small] [data-bar] {
   height: var(--spacing-sizing-01);
 }
+[data-bspk=progress-bar][data-success=color] [data-bar]::after {
+  background-color: var(--status-success);
+}
 [data-bspk=progress-bar] label {
   font-size: var(--labels-small);
   width: 100%;

package/dist/components/ProgressBar/progress-bar.css.js

@@ -30,6 +30,9 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-bar] {
 [data-bspk=progress-bar][data-size=small] [data-bar] {
   height: var(--spacing-sizing-01);
 }
+[data-bspk=progress-bar][data-success=color] [data-bar]::after {
+  background-color: var(--status-success);
+}
 [data-bspk=progress-bar] label {
   font-size: var(--labels-small);
   width: 100%;
@@ -42,4 +45,3 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-bar] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -26,11 +26,10 @@ export type ProgressCircleProps = {
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressCircle {
-    var bspkName: string;
     var SVG: (props: {
         strokeWidth?: number;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/no-multi-comp */ import { useId } from 'react';
+import { ProgressCircleSVG } from './ProgressCircleSVG';
 import { Txt } from '../Txt';
+import { useId } from '../../hooks/useId';
 import './progress-circle.css.js';
 /**
  * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
@@ -13,7 +14,7 @@ import './progress-circle.css.js';
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }) {
     let variant = 'labels-base';
@@ -24,13 +25,6 @@ function ProgressCircle({ label, labelPosition, size = 'medium' }) {
     const labelId = useId();
     return (_jsxs("div", { "aria-labelledby": labelId, "data-bspk": "progress-circle", "data-label-position": labelPosition, "data-size": size, role: "progressbar", children: [_jsx(ProgressCircle.SVG, {}), _jsx(Txt, { id: labelId, variant: variant, children: label || 'Loading ...' })] }));
 }
-ProgressCircle.bspkName = 'ProgressCircle';
-export { ProgressCircle };
-const ProgressCircleSVG = (props) => {
-    const strokeWidth = props.strokeWidth || 10;
-    const width = 100;
-    const id = useId();
-    return (_jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), _jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), _jsxs("g", { strokeWidth: strokeWidth * 2, children: [_jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), _jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), _jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
-};
 ProgressCircle.SVG = ProgressCircleSVG;
+export { ProgressCircle };
 //# sourceMappingURL=ProgressCircle.js.map

package/dist/components/ProgressCircle/ProgressCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,wBAAwB,CAAC;AAmBhC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,wBAAwB,CAAC;AAmBhC;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ProgressCircle/ProgressCircleSVG.d.ts

@@ -0,0 +1,3 @@
+export declare const ProgressCircleSVG: (props: {
+    strokeWidth?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressCircle/ProgressCircleSVG.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from '../../hooks/useId';
+export const ProgressCircleSVG = (props) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+    return (_jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), _jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), _jsxs("g", { strokeWidth: strokeWidth * 2, children: [_jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), _jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), _jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
+};
+//# sourceMappingURL=ProgressCircleSVG.js.map

package/dist/components/ProgressCircle/ProgressCircleSVG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircleSVG.js","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircleSVG.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/ProgressCircle/progress-circle.css.js

@@ -43,4 +43,3 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-circle] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ProgressionStepper/ProgressionStepper.d.ts

@@ -1,4 +1,4 @@
-import { ElementProps } from '../../index.js';
+import { ElementProps } from '-/types/common';
 import './progression-stepper.scss';
 /** A progress stepper item is a single step in the progress bar. */
 export type ProgressionStepperItem = {
@@ -30,11 +30,7 @@ export type ProgressionStepperProps = {
      * The steps to display in the progress bar.
      *
      * @example
-     *     [
-     *         { name: '[Name of step to proceed forward 1]' },
-     *         { name: '[Name of step to proceed forward 2]' },
-     *         { name: '[Name of step to proceed forward 3]' },
-     *     ];
+     *     [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }];
      *
      * @type Array<ProgressionStepperItem>
      * @required
@@ -71,11 +67,7 @@ export type ProgressionStepperProps = {
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ProgressionStepper {
-    var bspkName: string;
-}
-export { ProgressionStepper };
+export declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepper/ProgressionStepper.js

@@ -12,20 +12,18 @@ import './progression-stepper.css.js';
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
+export function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
     const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
+    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status = 'incomplete';
-                    if (stepNum < currentStep)
+                    if (currentStep > stepNum)
                         status = 'complete';
-                    else if (stepNum === currentStep)
+                    else if (currentStep === stepNum)
                         status = 'current';
-                    return (_jsxs("li", { "data-status": status, "data-step": stepNum, children: [_jsxs("span", { "aria-hidden": true, "data-line-circle": true, children: [_jsx("span", { "data-line": "before" }), _jsxs("span", { "data-circle": true, children: [_jsx("span", { children: stepNum }), status === 'complete' && _jsx(SvgCheck, {})] }), _jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (_jsxs("span", { "data-content": true, children: [_jsx("span", { "data-name": true, children: name }), subtext && _jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
+                    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, "data-status": status, "data-step": stepNum, children: [_jsxs("span", { "data-line-circle": true, children: [_jsx("span", { "data-line": "before" }), _jsx("span", { "data-circle": true, children: status === 'complete' ? (_jsx(SvgCheck, { "aria-hidden": true })) : ((variant !== 'widget' || status === 'current') && _jsx("span", { children: stepNum })) }), _jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (_jsxs("span", { "data-content": true, children: [_jsx("span", { "data-name": true, children: name }), subtext && _jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
                 }) })] }));
 }
-ProgressionStepper.bspkName = 'ProgressionStepper';
-export { ProgressionStepper };
 //# sourceMappingURL=ProgressionStepper.js.map

package/dist/components/ProgressionStepper/ProgressionStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,4BAA4B,CAAC;AA6DpC;;;;;;;;;;;;GAYG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,OAAO,4BAA4B,CAAC;AAyDpC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACpC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,WAAW,GAAG,OAAO;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,WAAW,KAAK,OAAO;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,8BACkB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,iBAC1C,MAAM,eACR,OAAO,aAGlB,qDACI,4BAAgB,QAAQ,GAAG,EAC3B,8CACK,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,mBAAc,IAAI,GAAI,CAClC,CAAC,CAAC,CAAC,CACA,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,KAAK,SAAS,CAAC,IAAI,yBAAO,OAAO,GAAQ,CAC3E,GACE,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAlBI,QAAQ,KAAK,EAAE,CAmBnB,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC"}

package/dist/components/ProgressionStepper/ProgressionStepperExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { ProgressionStepperProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const ProgressionStepperExample: ComponentExample<ProgressionStepperProps>;

package/dist/components/ProgressionStepper/ProgressionStepperExample.js

@@ -1,4 +1,5 @@
 export const ProgressionStepperExample = {
+    containerStyle: { width: '100%' },
     presets: [
         {
             label: 'Horizontal',
@@ -33,7 +34,7 @@ export const ProgressionStepperExample = {
             label: 'Widget',
             propState: {
                 variant: 'widget',
-                currentStep: 2,
+                currentStep: 3,
                 steps: [
                     { name: 'Name of step 1' },
                     { name: 'Name of step 2' },

package/dist/components/ProgressionStepper/ProgressionStepperExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepperExample.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepperExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,yBAAyB,GAA8C;IAChF,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE,YAAY;gBACrB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;aAC9F;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;iBAC7B;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"ProgressionStepperExample.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepperExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,yBAAyB,GAA8C;IAChF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE,YAAY;gBACrB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;aAC9F;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;oBACD;wBACI,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,mBAAmB;qBAC/B;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;iBAC7B;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/ProgressionStepper/progression-stepper.css

@@ -8,6 +8,7 @@
 }
 [data-bspk=progression-stepper] ol {
   display: flex;
+  flex-direction: row;
   width: 100%;
   margin: 0;
   padding: 0;
@@ -19,6 +20,7 @@
   margin: 0;
   padding: 0;
   gap: var(--spacing-sizing-02);
+  flex-grow: 1;
 }
 [data-bspk=progression-stepper] ol li [data-line-circle] {
   display: flex;
@@ -49,8 +51,17 @@
 }
 [data-bspk=progression-stepper] ol li [data-content] {
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   padding: 0 var(--spacing-sizing-10);
   font: var(--body-small);
+  text-align: center;
+}
+[data-variant=horizontal] [data-bspk=progression-stepper] ol li [data-content] {
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 [data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
   visibility: hidden;

package/dist/components/ProgressionStepper/progression-stepper.css.js

@@ -11,6 +11,7 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper] {
 }
 [data-bspk=progression-stepper] ol {
   display: flex;
+  flex-direction: row;
   width: 100%;
   margin: 0;
   padding: 0;
@@ -22,6 +23,7 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper] {
   margin: 0;
   padding: 0;
   gap: var(--spacing-sizing-02);
+  flex-grow: 1;
 }
 [data-bspk=progression-stepper] ol li [data-line-circle] {
   display: flex;
@@ -52,8 +54,17 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper] {
 }
 [data-bspk=progression-stepper] ol li [data-content] {
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   padding: 0 var(--spacing-sizing-10);
   font: var(--body-small);
+  text-align: center;
+}
+[data-variant=horizontal] [data-bspk=progression-stepper] ol li [data-content] {
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 [data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
   visibility: hidden;
@@ -134,4 +145,3 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.d.ts

@@ -32,11 +32,7 @@ export type ProgressionStepperBarProps = {
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ProgressionStepperBar {
-    var bspkName: string;
-}
-export { ProgressionStepperBar };
+export declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js

@@ -5,12 +5,10 @@ import './progression-stepper-bar.css.js';
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp = 0, size = 'large', }) {
+export function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp = 0, size = 'large', }) {
     const stepCompleted = Math.min(stepCompletedProp, stepCount);
-    return (_jsxs("div", { "data-bspk": "progression-stepper-bar", "data-size": size, style: cssWithVars({ '--steps': stepCount }), children: [_jsx("div", { "data-steps": true, children: Array.from({ length: stepCount }, (_, i) => (_jsx("div", { "data-complete": i < stepCompleted || undefined, "data-step": i }, i))) }), _jsxs("label", { children: [stepCompleted, " of ", stepCount, " steps completed."] })] }));
+    return (_jsxs("div", { "data-bspk": "progression-stepper-bar", "data-size": size, style: cssWithVars({ '--steps': stepCount }), children: [_jsx("div", { "data-steps": true, children: Array.from({ length: stepCount }, (_, i) => (_jsx("div", { "data-complete": i < stepCompleted || undefined, "data-step": i }, i))) }), _jsxs("span", { "data-label": true, children: [stepCompleted, " of ", stepCount, " steps completed."] })] }));
 }
-ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
-export { ProgressionStepperBar };
 //# sourceMappingURL=ProgressionStepperBar.js.map

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepperBar/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAgCxC;;;;;GAKG;AACH,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACH,4BAAe,yBAAyB,eAAY,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,aAClG,4CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,+BAAoB,CAAC,GAAG,aAAa,IAAI,SAAS,eAAa,CAAC,IAAO,CAAC,CAAI,CAC/E,CAAC,GACA,EACN,4BACK,aAAa,UAAM,SAAS,yBACzB,IACN,CACT,CAAC;AACN,CAAC;AAED,qBAAqB,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepperBar/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,gCAAgC,CAAC;AAgCxC;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAClC,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACH,4BAAe,yBAAyB,eAAY,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,aAClG,4CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,+BAAoB,CAAC,GAAG,aAAa,IAAI,SAAS,eAAa,CAAC,IAAO,CAAC,CAAI,CAC/E,CAAC,GACA,EACN,+CACK,aAAa,UAAM,SAAS,yBAC1B,IACL,CACT,CAAC;AACN,CAAC"}

package/dist/components/ProgressionStepperBar/progression-stepper-bar.css

@@ -26,7 +26,7 @@
 [data-bspk=progression-stepper-bar] [data-steps] [data-step][data-complete] {
   background: var(--surface-brand-primary);
 }
-[data-bspk=progression-stepper-bar] label {
+[data-bspk=progression-stepper-bar] [data-label] {
   font: var(--labels-small);
 }
 

package/dist/components/ProgressionStepperBar/progression-stepper-bar.css.js

@@ -29,11 +29,10 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper-bar] {
 [data-bspk=progression-stepper-bar] [data-steps] [data-step][data-complete] {
   background: var(--surface-brand-primary);
 }
-[data-bspk=progression-stepper-bar] label {
+[data-bspk=progression-stepper-bar] [data-label] {
   font: var(--labels-small);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Radio/Radio.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
-import { ElementProps, InvalidPropsLibrary, CommonProps } from '../../index.js';
+import { ElementProps, CommonProps } from '-/types/common';
 import './radio.scss';
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> & Required<CommonProps<'value'>> & {
     /**
      * Marks the radio as checked.
      *
@@ -24,9 +24,5 @@ export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & Inval
  * @name Radio
  * @phase Utility
  */
-declare function Radio(props: ElementProps<RadioProps, 'input'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Radio {
-    var bspkName: string;
-}
-export { Radio };
+export declare function Radio(props: ElementProps<RadioProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Radio/Radio.js

@@ -9,10 +9,8 @@ import './radio.css.js';
  * @name Radio
  * @phase Utility
  */
-function Radio(props) {
-    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
-    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-errormessage": errorMessage || undefined, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
+export function Radio(props) {
+    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
+    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
 }
-Radio.bspkName = 'Radio';
-export { Radio };
 //# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAmBtB;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,KAAwC;IACnD,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5F,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,uBACC,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,GACd,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAkBtB;;;;;;;;GAQG;AACH,MAAM,UAAU,KAAK,CAAC,KAAwC;IAC1D,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,kBACJ,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,GACd,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC"}

package/dist/components/Radio/RadioExample.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExample } from '../../utils/demo';
+import { ComponentExample } from '-/utils/demo';
 export declare const RadioExample: ComponentExample;

package/dist/components/Radio/radio.css

@@ -37,7 +37,7 @@
   width: var(--spacing-sizing-03);
   aspect-ratio: 1/1;
   background: var(--inner);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   opacity: 0;
 }
 [data-bspk=radio] input[type=radio]:not(:disabled):hover + span {

package/dist/components/Radio/radio.css.js

@@ -40,7 +40,7 @@ style.appendChild(document.createTextNode(`[data-bspk=radio] {
   width: var(--spacing-sizing-03);
   aspect-ratio: 1/1;
   background: var(--inner);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
   opacity: 0;
 }
 [data-bspk=radio] input[type=radio]:not(:disabled):hover + span {
@@ -70,4 +70,3 @@ style.appendChild(document.createTextNode(`[data-bspk=radio] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,8 +1,8 @@
-import { ElementProps, CommonProps } from '../../index.js';
-import { ToggleOptionProps } from '../ToggleOption';
+import { RadioOptionProps } from '-/components/RadioOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 import './radio-group.scss';
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> & Required<CommonProps<'value'>>;
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> & FormFieldControlProps & {
     /**
      * The value of the control.
      *
@@ -49,11 +49,11 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
      */
     label: string;
     /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+     * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
      *
-     * @default true
+     * @default false
      */
-    showLabel?: boolean;
+    hideLabel?: boolean;
 };
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -84,11 +84,7 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, showLabel, disabled, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioGroup {
-    var bspkName: string;
-}
-export { RadioGroup };
+export declare function RadioGroup({ onChange, options, name, value: groupValue, label: groupLabel, hideLabel: hideLabelProp, disabled: disabledGroup, ...props }: ElementProps<RadioGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { Radio } from '../Radio';
-import { ToggleOption } from '../ToggleOption';
+import { RadioOption } from '../RadioOption';
+import { useId } from '../../hooks/useId';
 import './radio-group.css.js';
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -32,14 +31,12 @@ import './radio-group.css.js';
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, showLabel = true, disabled, ...props }) {
+export function RadioGroup({ onChange, options = [], name, value: groupValue, label: groupLabel, hideLabel: hideLabelProp = false, disabled: disabledGroup = false, ...props }) {
     const id = `radio-group-${useId()}`;
-    return (_jsxs("div", { ...props, "aria-label": !showLabel ? groupLabel : undefined, "aria-labelledby": showLabel ? `${id}-label` : undefined, "data-bspk": "radio-group", "data-disabled": disabled || undefined, id: id, role: "group", children: [showLabel && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, value }, index) => {
-                    return (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, disabled: disabled, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
+    return (_jsxs("div", { ...props, "aria-describedby": props['aria-describedby'], "aria-errormessage": props['aria-errormessage'], "aria-label": hideLabelProp ? groupLabel : undefined, "aria-labelledby": !hideLabelProp ? `${id}-label` : undefined, "data-bspk": "radio-group", id: id, role: "radiogroup", children: [!hideLabelProp && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, disabled, value }, index) => {
+                    return (_jsx(RadioOption, { checked: groupValue === value, description: description, disabled: disabledGroup || disabled, label: label, name: name, onChange: (checked) => checked && onChange(value), value: value }, `radio-option-${value || index}`));
                 }) })] }));
 }
-RadioGroup.bspkName = 'RadioGroup';
-export { RadioGroup };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,oBAAoB,CAAC;AA0D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,mBACR,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IARuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAS/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,oBAAoB,CAAC;AA4D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,aAAa,GAAG,KAAK,EAChC,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,uBACxB,KAAK,CAAC,mBAAmB,CAAC,gBACjC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBACjC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eACjD,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,YAAY,aAEhB,CAAC,aAAa,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EACjE,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAC5D,OAAO,CACH,KAAC,WAAW,IACR,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,IAAI,QAAQ,EAEnC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,IAJP,gBAAgB,KAAK,IAAI,KAAK,EAAE,CAKvC,CACL,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/RadioGroup/RadioGroupExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { RadioGroupProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const RadioGroupExample: ComponentExample<RadioGroupProps>;

package/dist/components/RadioGroup/RadioGroupExample.js

@@ -1,27 +1,7 @@
+import { CheckboxGroupExample } from '../CheckboxGroup/CheckboxGroupExample';
 import { RadioExample } from '../Radio/RadioExample';
 export const RadioGroupExample = {
     render: RadioExample.render,
-    presets: [
-        {
-            label: 'With Descriptions',
-            propState: {
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
-        },
-        {
-            label: 'Long labels',
-            propState: {
-                options: [
-                    { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
-                    { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
-                    { label: 'This is a very long label for option 3', value: 'option3' },
-                ],
-            },
-        },
-    ],
+    presets: CheckboxGroupExample.presets,
 };
 //# sourceMappingURL=RadioGroupExample.js.map

package/dist/components/RadioGroup/RadioGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupExample.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroupExample.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;iBACxE;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"RadioGroupExample.js","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroupExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,YAAY,CAAC,MAAM;IAC3B,OAAO,EAAE,oBAAoB,CAAC,OAAuD;CACxF,CAAC"}

package/dist/components/RadioGroup/radio-group.css

@@ -3,5 +3,4 @@
   flex-direction: column;
   gap: var(--spacing-sizing-01);
   max-width: 100%;
-  overflow: hidden;
 }