@bspk/ui 1.3.11 → 1.3.16

package/dist/components/PageHeader/page-header.css.js

@@ -0,0 +1,40 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=page-header] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--background-base);
+}
+[data-bspk=page-header] [data-breadcrumb] {
+  padding: var(--spacing-sizing-05) var(--spacing-sizing-05) 0;
+}
+[data-bspk=page-header] [data-header] {
+  padding: var(--spacing-sizing-05);
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+[data-bspk=page-header] [data-header] [data-title] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=page-header] [data-header] [data-title] h1 {
+  margin: 0;
+  font: var(--heading-h3);
+}
+[data-bspk=page-header] [data-header][data-has-avatar] {
+  align-items: center;
+}
+[data-bspk=page-header] [data-subheader] {
+  padding: 0 var(--spacing-sizing-05);
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Pagination/Pagination.d.ts

@@ -32,7 +32,7 @@ export type PaginationProps = {
  *     }
  *
  * @name Pagination
- * @phase UXReview
+ * @phase Stable
  */
-export declare function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pagination({ numPages, value, onChange: onChangeProp, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Pagination/Pagination.js

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { PageList } from './PageList';
 import { Button } from '../Button';
 import { InputElement } from '../Input';
+import { sendAriaLiveMessage } from '../../utils/sendAriaLiveMessage';
 // After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
 const INPUT_TYPE_THRESHOLD = 7;
 /**
@@ -21,9 +22,13 @@ const INPUT_TYPE_THRESHOLD = 7;
  *     }
  *
  * @name Pagination
- * @phase UXReview
+ * @phase Stable
  */
-export function Pagination({ numPages, value, onChange, ...ariaProps }) {
+export function Pagination({ numPages, value, onChange: onChangeProp, ...ariaProps }) {
+    const onChange = (newPage) => {
+        onChangeProp(newPage);
+        sendAriaLiveMessage(`Page ${newPage} of ${numPages}`);
+    };
     const nextPage = () => {
         if (value < numPages)
             onChange(value + 1);
@@ -53,6 +58,6 @@ export function Pagination({ numPages, value, onChange, ...ariaProps }) {
     return (_jsxs("span", { "data-bspk": "pagination", role: "group", ...ariaProps, children: [_jsx(Button, { disabled: !inBounds(value - 1), icon: _jsx(SvgIcon, { name: "ChevronLeft" }), iconOnly: true, label: value === 1 ? 'First page' : `Previous page (${value - 1})`, onClick: previousPage, owner: "pagination", size: "small", variant: "tertiary" }), numPages > INPUT_TYPE_THRESHOLD ? (_jsxs("form", { "data-input-form": true, onSubmit: (e) => {
                     e.preventDefault();
                     submitInputChange();
-                }, children: [_jsx(InputElement, { name: "page-number", onBlur: () => submitInputChange(), onChange: setInputValue, owner: "pagination", showClearButton: false, type: "number", value: inputValue }), "of ", numPages] })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: !inBounds(value + 1), icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: value === numPages ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
+                }, children: [_jsx(InputElement, { name: "page-number", onBlur: () => submitInputChange(), onChange: setInputValue, owner: "pagination", showClearButton: false, type: "number", value: inputValue }), _jsxs("span", { children: ["of ", numPages] })] })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: !inBounds(value + 1), icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: value === numPages ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
 }
 //# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,mHAAmH;AACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAsB/B;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,QAAQ,EAAE,YAAY,EACtB,GAAG,SAAS,EACmB;IAC/B,MAAM,QAAQ,GAAG,CAAC,OAAe,EAAE,EAAE;QACjC,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,mBAAmB,CAAC,QAAQ,OAAO,OAAO,QAAQ,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,IAAI,KAAK,GAAG,QAAQ;YAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,GAAG,CAAC;YAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,GAAG,KAAK,EAAE,CAAC,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QACnD,IAAI,KAAK,CAAC,WAAW,CAAC;YAAE,OAAO,aAAa,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QAEzD,IAAI,IAAI,GAAG,WAAW,CAAC;QACvB,IAAI,WAAW,GAAG,CAAC;YAAE,IAAI,GAAG,CAAC,CAAC;QAC9B,IAAI,WAAW,GAAG,QAAQ;YAAE,IAAI,GAAG,QAAQ,CAAC;QAE5C,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,IAAI,KAAK,WAAW;YAAE,aAAa,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC;IAExD,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACH,6BAAgB,YAAY,EAAC,IAAI,EAAC,OAAO,KAAK,SAAS,aACnD,KAAC,MAAM,IACH,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAC9B,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,aAAa,GAAG,EACpC,QAAQ,QACR,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,CAAC,GAAG,EAClE,OAAO,EAAE,YAAY,EACrB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,EACD,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAC/B,yCAEI,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,iBAAiB,EAAE,CAAC;gBACxB,CAAC,aAED,KAAC,YAAY,IACT,IAAI,EAAC,aAAa,EAClB,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,EACjC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAC,YAAY,EAClB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,GACnB,EACF,kCAAU,QAAQ,IAAQ,IACvB,CACV,CAAC,CAAC,CAAC,CACA,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACrE,EAED,KAAC,MAAM,IACH,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAC9B,IAAI,EAAE,KAAC,OAAO,IAAC,IAAI,EAAC,cAAc,GAAG,EACrC,QAAQ,QACR,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,GAAG,EACpE,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,IACC,CACV,CAAC;AACN,CAAC"}

package/dist/components/Pagination/pagination.css

@@ -9,12 +9,18 @@
 [data-bspk=pagination] [data-input-form] {
   display: contents;
 }
-[data-bspk=pagination] [data-bspk=input] {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] {
   max-width: var(--spacing-sizing-12);
+  margin-right: var(--spacing-sizing-01);
 }
-[data-bspk=pagination] [data-bspk=input] input {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] input {
   text-align: center;
 }
+[data-bspk=pagination] [data-input-form] span {
+  display: block;
+  white-space: nowrap;
+  font: var(--body-small);
+}
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;
 }

package/dist/components/Pagination/pagination.css.js

@@ -12,12 +12,18 @@ style.appendChild(document.createTextNode(`[data-bspk=pagination] {
 [data-bspk=pagination] [data-input-form] {
   display: contents;
 }
-[data-bspk=pagination] [data-bspk=input] {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] {
   max-width: var(--spacing-sizing-12);
+  margin-right: var(--spacing-sizing-01);
 }
-[data-bspk=pagination] [data-bspk=input] input {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] input {
   text-align: center;
 }
+[data-bspk=pagination] [data-input-form] span {
+  display: block;
+  white-space: nowrap;
+  font: var(--body-small);
+}
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;
 }

package/dist/components/Password/Password.d.ts

@@ -9,34 +9,29 @@ export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef'
  *
  * @example
  *     import { Password } from '@bspk/ui/Password';
- *     import { useState } from 'react';
+ *     import { Field, FieldLabel, FieldDescription } from '-/components/Field';
  *
  *     () => {
- *         const [value, setValue] = useState('');
+ *         const [value, setValue] = useState<string | undefined>('');
  *
  *         return (
- *             <>
- *                 // standalone password example
- *                 <Password
- *                     aria-label="Enter password"
- *                     value={value}
- *                     onChange={setValue}
- *                     aria-label="password"
- *                     name="password"
- *                 />
- *                 <br />
- *                 // password used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Password</FieldLabel>
- *                     <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                     <Password
+ *                         aria-label="password"
+ *                         name="password"
+ *                         onChange={(next) => setValue(next)}
+ *                         value={value}
+ *                     />
  *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name Password
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Password({ inputProps, inputRef, name, onChange, required, containerRef, invalid: invalidProp, readOnly, disabled, id: idProp, 'aria-label': ariaLabel, ...props }: PasswordProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Password/Password.js

@@ -11,34 +11,29 @@ import { InputElement } from '../Input';
  *
  * @example
  *     import { Password } from '@bspk/ui/Password';
- *     import { useState } from 'react';
+ *     import { Field, FieldLabel, FieldDescription } from '../Field';
  *
  *     () => {
- *         const [value, setValue] = useState('');
+ *         const [value, setValue] = useState<string | undefined>('');
  *
  *         return (
- *             <>
- *                 // standalone password example
- *                 <Password
- *                     aria-label="Enter password"
- *                     value={value}
- *                     onChange={setValue}
- *                     aria-label="password"
- *                     name="password"
- *                 />
- *                 <br />
- *                 // password used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Password</FieldLabel>
- *                     <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                     <Password
+ *                         aria-label="password"
+ *                         name="password"
+ *                         onChange={(next) => setValue(next)}
+ *                         value={value}
+ *                     />
  *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name Password
- * @phase UXReview
+ * @phase Stable
  */
 export function Password({ inputProps, inputRef, name, onChange, required = false, containerRef, invalid: invalidProp, readOnly, disabled, id: idProp, 'aria-label': ariaLabel, ...props }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({

package/dist/components/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sourceRoot":"","sources":["../../../src/components/Password/Password.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAK9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,OACL,KAAK,sBACS,eAAe,uBACd,gBAAgB,gBACvB,SAAS,IAAI,SAAS,EAClC,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,qBACV,UAAU,EAC1B,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QACtE,CAAC,EACD,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,QAAQ,EACJ,CAAC,QAAQ;YACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,2CAEH,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC/C,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Password.js","sourceRoot":"","sources":["../../../src/components/Password/Password.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAK9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,OACL,KAAK,sBACS,eAAe,uBACd,gBAAgB,gBACvB,SAAS,IAAI,SAAS,EAClC,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,YAAY,qBACV,UAAU,EAC1B,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,CAAC,CAAC,aAA6B,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QACtE,CAAC,EACD,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,EACtB,QAAQ,EACJ,CAAC,QAAQ;YACT,CAAC,QAAQ,IAAI,CACT,KAAC,MAAM,2CAEH,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAC,UAAU,GACpB,CACL,EAEL,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC/C,CACL,CAAC;AACN,CAAC"}

package/dist/components/Password/PasswordExample.d.ts

@@ -1,3 +1,4 @@
 import { PasswordProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 export declare const PasswordExample: ComponentExample<PasswordProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Password/PasswordExample.js

@@ -1,6 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Password } from '.';
+import { Field, FieldLabel, FieldDescription } from '../Field';
 export const PasswordExample = {
     defaultState: {
         'aria-label': 'password aria-label',
     },
+    containerStyle: { width: 320, padding: 0 },
+};
+export const Usage = () => {
+    const [value, setValue] = useState('');
+    return (_jsx("div", { children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Password" }), _jsx(Password, { "aria-label": "password", name: "password", onChange: (next) => setValue(next), value: value }), _jsx(FieldDescription, { children: "The password field allows you to enter a secure password." })] }) }));
 };
 //# sourceMappingURL=PasswordExample.js.map

package/dist/components/Password/PasswordExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordExample.js","sourceRoot":"","sources":["../../../src/components/Password/PasswordExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,YAAY,EAAE;QACV,YAAY,EAAE,qBAAqB;KACtC;CACJ,CAAC"}
+{"version":3,"file":"PasswordExample.js","sourceRoot":"","sources":["../../../src/components/Password/PasswordExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,GAAG,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,YAAY,EAAE;QACV,YAAY,EAAE,qBAAqB;KACtC;IACD,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAE3D,OAAO,CACH,wBACI,MAAC,KAAK,eACF,KAAC,UAAU,2BAAsB,EACjC,KAAC,QAAQ,kBAAY,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,gBAAgB,4EAA6E,IAC1F,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/PasswordField/PasswordField.d.ts

@@ -7,7 +7,7 @@ export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
  * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/PasswordField/PasswordField.js

@@ -7,7 +7,7 @@ import { Password } from '../Password';
  * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/Popover/Popover.d.ts

@@ -61,7 +61,7 @@ export type PopoverProps = CommonProps<'disabled'> & Pick<UseFloatingProps, 'ref
  *     </Popover>;
  *
  * @name Popover
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Popover({ placement, header, content, callToAction, secondaryCallToAction, children, disabled, refWidth, ...props }: ElementProps<PopoverProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Popover/Popover.js

@@ -31,7 +31,7 @@ import { cssWithVars } from '../../utils/cwv';
  *     </Popover>;
  *
  * @name Popover
- * @phase UXReview
+ * @phase Stable
  */
 export function Popover({ placement = 'top', header, content, callToAction, secondaryCallToAction, children, disabled = false, refWidth, ...props }) {
     const id = useId();

package/dist/components/Popover/PopoverExample.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button } from '../Button';
 import { Txt } from '../Txt';
 export const PopoverExample = ({ action }) => ({
-    containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         return (_jsxs(_Fragment, { children: [_jsx(Txt, { style: { marginBottom: `var(--spacing-sizing-02)` }, children: "Click for a Popover" }), _jsx(Component, { ...props, children: (triggerProps) => _jsx(Button, { label: `${props.placement}`, variant: "secondary", ...triggerProps }) })] }));
     },

package/dist/components/Popover/PopoverExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,oCAA2B,EACnF,KAAC,SAAS,OAAK,KAAK,YACf,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,KAAK,YAAY,GAAI,GACxF,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,mBAAmB;gBAC3B,OAAO,EAAE,wBAAwB;gBACjC,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,MAAM,EAAE,yBAAyB;gBACjC,OAAO,EAAE,8BAA8B;gBACvC,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"version":3,"file":"PopoverExample.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,CAAC,MAAM,cAAc,GAAqC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,8BACI,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,0BAA0B,EAAE,oCAA2B,EACnF,KAAC,SAAS,OAAK,KAAK,YACf,CAAC,YAAY,EAAE,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,KAAK,YAAY,GAAI,GACxF,IACb,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,mBAAmB;gBAC3B,OAAO,EAAE,wBAAwB;gBACjC,YAAY,EAAE;oBACV,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;QACD;YACI,KAAK,EAAE,yBAAyB;YAChC,SAAS,EAAE;gBACP,MAAM,EAAE,yBAAyB;gBACjC,OAAO,EAAE,8BAA8B;gBACvC,YAAY,EAAE;oBACV,KAAK,EAAE,SAAS;oBAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC;iBAC3D;gBACD,qBAAqB,EAAE;oBACnB,KAAK,EAAE,WAAW;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC;iBAC7D;gBACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

package/dist/components/Popover/popover.css

@@ -8,11 +8,6 @@
   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;
@@ -25,6 +20,13 @@
   margin-right: calc(var(--spacing-sizing-02) * -1);
   margin-top: calc(var(--spacing-sizing-02) * -1);
 }
+[data-bspk=popover] {
+  --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] [data-arrow] {
   z-index: 1;
   position: absolute;

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

@@ -11,11 +11,6 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   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;
@@ -28,6 +23,13 @@ style.appendChild(document.createTextNode(`[data-bspk=popover] {
   margin-right: calc(var(--spacing-sizing-02) * -1);
   margin-top: calc(var(--spacing-sizing-02) * -1);
 }
+[data-bspk=popover] {
+  --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] [data-arrow] {
   z-index: 1;
   position: absolute;

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

@@ -52,7 +52,7 @@ export type ProgressBarProps = {
  *     <ProgressBar label="Example label" completion={50} />;
  *
  * @name ProgressBar
- * @phase UXReview
+ * @phase Stable
  */
 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

@@ -12,7 +12,7 @@ import { cssWithVars } from '../../utils/cwv';
  *     <ProgressBar label="Example label" completion={50} />;
  *
  * @name ProgressBar
- * @phase UXReview
+ * @phase Stable
  */
 export function ProgressBar({ size = 'large', completion: completionProp = 0, align = 'center', label, successColor = false, successHidden = false, }) {
     const id = useId();

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

@@ -24,7 +24,7 @@ export type ProgressCircleProps = {
  *     <ProgressCircle label="Example label" />;
  *
  * @name ProgressCircle
- * @phase UXReview
+ * @phase Stable
  */
 declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressCircle {

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -12,7 +12,7 @@ import { useId } from '../../hooks/useId';
  *     <ProgressCircle label="Example label" />;
  *
  * @name ProgressCircle
- * @phase UXReview
+ * @phase Stable
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }) {
     let variant = 'labels-base';

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

@@ -61,7 +61,7 @@ export type ProgressionStepperProps = {
  *     <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *
  * @name ProgressionStepper
- * @phase UXReview
+ * @phase Stable
  */
 export declare function ProgressionStepper({ steps, completedStep: completedStepProp, 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

@@ -10,7 +10,7 @@ import { SvgCheck } from '@bspk/icons/Check';
  *     <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *
  * @name ProgressionStepper
- * @phase UXReview
+ * @phase Stable
  */
 export function ProgressionStepper({ steps = [], completedStep: completedStepProp = 0, variant = 'horizontal', ...containerProps }) {
     const completedStepNumber = Math.max(0, Math.min(completedStepProp, steps.length));

package/dist/components/ProgressionStepper/ProgressionStepperExample.js

@@ -62,7 +62,6 @@ export const presets = [
     },
 ];
 export const ProgressionStepperExample = {
-    containerStyle: { width: '100%' },
     presets,
 };
 //# sourceMappingURL=ProgressionStepperExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepperExample.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepperExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAsC;IACtD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,OAAO,EAAE,YAAY;YACrB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;SAC9F;KACJ;IACD;QACI,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE;YACP,OAAO,EAAE,UAAU;YACnB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;gBACD;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;gBACD;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;aACJ;SACJ;KACJ;IACD;QACI,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE;aACrB;SACJ;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,uBAAuB,EAAE;aACvD;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAA8C;IAChF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO;CACV,CAAC"}
+{"version":3,"file":"ProgressionStepperExample.js","sourceRoot":"","sources":["../../../src/components/ProgressionStepper/ProgressionStepperExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAsC;IACtD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,OAAO,EAAE,YAAY;YACrB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;SAC9F;KACJ;IACD;QACI,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE;YACP,OAAO,EAAE,UAAU;YACnB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;gBACD;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;gBACD;oBACI,IAAI,EAAE,gBAAgB;oBACtB,OAAO,EAAE,mBAAmB;iBAC/B;aACJ;SACJ;KACJ;IACD;QACI,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE;aACrB;SACJ;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,gBAAgB,EAAE;gBAC1B,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,uBAAuB,EAAE;aACvD;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAA8C;IAChF,OAAO;CACV,CAAC"}

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

@@ -54,15 +54,17 @@
   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 [data-content] {
+  padding: 0 var(--spacing-sizing-10);
+  font: var(--body-small);
+  text-align: center;
+}
 [data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
   visibility: hidden;
 }

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

@@ -57,15 +57,17 @@ style.appendChild(document.createTextNode(`[data-bspk=progression-stepper] {
   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 [data-content] {
+  padding: 0 var(--spacing-sizing-10);
+  font: var(--body-small);
+  text-align: center;
+}
 [data-bspk=progression-stepper] ol li:first-of-type [data-line=before] {
   visibility: hidden;
 }

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

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

package/dist/components/ProgressionStepperBar/ProgressionStepperBar.js

@@ -5,7 +5,7 @@ import { cssWithVars } from '../../utils/cwv';
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase UXReview
+ * @phase Stable
  */
 export function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp = 0, size = 'large', ...containerProps }) {
     const stepCompleted = Math.min(stepCompletedProp, stepCount);

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

@@ -1,15 +1,15 @@
-[data-bspk=progression-stepper-bar] {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: var(--spacing-sizing-01);
-}
 [data-bspk=progression-stepper-bar][data-size=large] {
   --height: var(--spacing-sizing-02);
 }
 [data-bspk=progression-stepper-bar][data-size=small] {
   --height: var(--spacing-sizing-01);
 }
+[data-bspk=progression-stepper-bar] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+}
 [data-bspk=progression-stepper-bar] [data-steps] {
   display: flex;
   flex-direction: row;

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

@@ -1,18 +1,18 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=progression-stepper-bar] {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: var(--spacing-sizing-01);
-}
-[data-bspk=progression-stepper-bar][data-size=large] {
+style.appendChild(document.createTextNode(`[data-bspk=progression-stepper-bar][data-size=large] {
   --height: var(--spacing-sizing-02);
 }
 [data-bspk=progression-stepper-bar][data-size=small] {
   --height: var(--spacing-sizing-01);
 }
+[data-bspk=progression-stepper-bar] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+}
 [data-bspk=progression-stepper-bar] [data-steps] {
   display: flex;
   flex-direction: row;

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

@@ -57,7 +57,7 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  *     };
  *
  * @name RadioGroup
- * @phase UXReview
+ * @phase Stable
  */
 export declare function RadioGroup({ onChange, options, name, value: groupValue, disabled, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...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

@@ -33,7 +33,7 @@ import { RadioOption } from '../RadioOption';
  *     };
  *
  * @name RadioGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function RadioGroup({ onChange, options = [], name, value: groupValue, disabled = false, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({

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

@@ -3,5 +3,5 @@
   flex-direction: column;
   gap: 0;
   max-width: 100%;
-  --list-item-height: "auto";
+  --list-item-height: 'auto';
 }

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

@@ -6,7 +6,7 @@ style.appendChild(document.createTextNode(`[data-bspk=radio-group] {
   flex-direction: column;
   gap: 0;
   max-width: 100%;
-  --list-item-height: "auto";
+  --list-item-height: 'auto';
 }
 `));
 document.head.appendChild(style);

package/dist/components/RadioGroupField/RadioGroupField.d.ts

@@ -7,7 +7,7 @@ export type RadioGroupFieldProps = FormFieldControlProps<RadioGroupProps>;
  * This component takes properties from the FormField and RadioGroup components.
  *
  * @name RadioGroupField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */