@bspk/ui 1.1.33 → 1.2.0

package/dist/components/Popover/popover.css.js

@@ -7,13 +7,15 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   background: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
   padding: var(--spacing-sizing-04);
-  width: 300px;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
+  max-width: 300px;
   --arrow-size: var(--spacing-sizing-02);
   --arrow-offset: calc(var(--arrow-size) * -2);
   --arrow-background-color: var(--surface-neutral-t1-base);
+  --position-left: 0px;
+  --position-top: 0px;
 }
 [data-bspk=popover] header {
   display: flex;
@@ -27,7 +29,6 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   border: none;
   cursor: pointer;
   padding: 0;
-  margin: 0 0 0 auto;
   color: var(--foreground-neutral-on-surface-variant-01);
   height: var(--spacing-sizing-06);
   width: var(--spacing-sizing-06);
@@ -47,47 +48,40 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
 }
 [data-bspk=popover][data-placement^=top] [data-arrow] {
   bottom: var(--arrow-offset);
+  left: var(--position-left);
   border-top-color: var(--arrow-background-color);
-  filter: drop-shadow(0 2px 1px var(--shadow-10));
+  filter: drop-shadow(0 1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=right] [data-arrow] {
+  top: var(--position-top);
   margin-left: calc(var(--arrow-offset) * 2);
   border-right-color: var(--arrow-background-color);
-  filter: drop-shadow(-2px 0 1px var(--shadow-10));
+  filter: drop-shadow(-1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=bottom] [data-arrow] {
-  top: var(--arrow-offset);
+  left: var(--position-left);
+  top: -15px;
   border-bottom-color: var(--arrow-background-color);
-  filter: drop-shadow(0 -2px 1px var(--shadow-10));
-}
-[data-bspk=popover][data-placement=bottom-start] [data-arrow] {
-  margin-left: var(--arrow-offset);
-}
-[data-bspk=popover][data-placement=bottom-end] [data-arrow] {
-  margin-left: calc(var(--arrow-offset) * -1);
+  filter: drop-shadow(0 -1px 1px var(--shadow-10));
 }
 [data-bspk=popover][data-placement^=left] [data-arrow] {
+  top: var(--position-top);
   right: var(--arrow-offset);
   border-left-color: var(--arrow-background-color);
-  filter: drop-shadow(2px 0 1px var(--shadow-10));
+  filter: drop-shadow(1px 0 1px var(--shadow-10));
 }
 [data-bspk=popover] [data-content] {
   gap: var(--spacing-sizing-04);
   display: flex;
   flex-direction: column;
 }
-[data-bspk=popover] [data-call-to-action] {
+[data-bspk=popover] [data-cta-row] {
+  display: flex;
+  align-items: end;
+  gap: var(--spacing-sizing-02);
   margin: 0 0 0 auto;
-  /* background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 var(--spacing-sizing-03);
-  height: var(--spacing-sizing-12);
-  font: var(--labels-small);
-  color: var(--foreground-brand-primary); */
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Portal/Portal.d.ts

@@ -21,9 +21,5 @@ export type PortalProps = {
  * @name Portal
  * @phase Utility
  */
-declare function Portal({ children, container }: PortalProps): import("react").ReactPortal | null;
-declare namespace Portal {
-    var bspkName: string;
-}
-export { Portal };
+export declare function Portal({ children, container }: PortalProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Portal/Portal.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 /**
@@ -8,16 +9,15 @@ import { createPortal } from 'react-dom';
  * @name Portal
  * @phase Utility
  */
-function Portal({ children, container }) {
+export function Portal({ children, container }) {
     const [portalContainer, setPortalContainer] = useState(container || null);
     useEffect(() => {
         if (!portalContainer && typeof window !== 'undefined')
             setPortalContainer(document.body);
     }, [portalContainer]);
+    if (!portalContainer)
+        return null;
     // data-bspk="portal" can't be used here
-    return portalContainer && createPortal(children, portalContainer);
+    return _jsx(_Fragment, { children: createPortal(children, portalContainer) });
 }
-Portal.bspkName = 'Portal';
-export { Portal };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;;GAOG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;;GAOG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IACvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;IAElC,wCAAwC;IACxC,OAAO,4BAAG,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,GAAI,CAAC;AAC1D,CAAC"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -27,6 +27,20 @@ export type ProgressBarProps = {
     align?: 'center' | 'left';
     /** The label of the progressbar. */
     label: string;
+    /**
+     * If true and completion = 100, displays the progress bar in the success color.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successColor?: boolean;
+    /**
+     * Whether to hide the success color when the progress bar is complete.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successHidden?: boolean;
 };
 /**
  * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
@@ -40,11 +54,7 @@ export type ProgressBarProps = {
  *     }
  *
  * @name ProgressBar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ProgressBar {
-    var bspkName: string;
-}
-export { ProgressBar };
+export declare function ProgressBar({ size, completion: completionProp, align, label, successColor, successHidden, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.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

@@ -13,20 +13,23 @@
   width: 100%;
   height: var(--spacing-sizing-02);
   background-color: var(--surface-neutral-t3-low);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
 }
 [data-bspk=progress-bar] [data-bar]::after {
   content: "";
   display: block;
   height: 100%;
   background-color: var(--foreground-brand-primary);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   width: var(--width);
   transition: width 0.3s;
 }
 [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

@@ -16,20 +16,23 @@ style.appendChild(document.createTextNode(`[data-bspk=progress-bar] {
   width: 100%;
   height: var(--spacing-sizing-02);
   background-color: var(--surface-neutral-t3-low);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
 }
 [data-bspk=progress-bar] [data-bar]::after {
   content: "";
   display: block;
   height: 100%;
   background-color: var(--foreground-brand-primary);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   width: var(--width);
   transition: width 0.3s;
 }
 [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

@@ -20,13 +20,13 @@
   width: 100%;
   height: var(--height);
   min-width: var(--spacing-sizing-02);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   background: var(--surface-neutral-t3-low);
 }
 [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

@@ -23,17 +23,16 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper-bar] {
   width: 100%;
   height: var(--height);
   min-width: var(--spacing-sizing-02);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   background: var(--surface-neutral-t3-low);
 }
 [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);
-