@bspk/ui 1.1.34 → 1.2.0

package/src/components/ProgressBar/progress-bar.scss

@@ -34,6 +34,12 @@
         }
     }
 
+    &[data-success='color'] {
+        [data-bar]::after {
+            background-color: var(--status-success);
+        }
+    }
+
     label {
         font-size: var(--labels-small);
         width: 100%;

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,7 +1,8 @@
-/* eslint-disable react/no-multi-comp */ import { useId } from 'react';
-
+import { ProgressCircleSVG } from './ProgressCircleSVG';
 import { Txt } from '-/components/Txt';
+import { useId } from '-/hooks/useId';
 import { TxtVariant } from '-/utils/txtVariants';
+
 import './progress-circle.scss';
 
 export type ProgressCircleProps = {
@@ -32,7 +33,7 @@ export type ProgressCircleProps = {
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
     let variant: TxtVariant = 'labels-base';
@@ -58,47 +59,8 @@ function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircl
     );
 }
 
-ProgressCircle.bspkName = 'ProgressCircle';
+ProgressCircle.SVG = ProgressCircleSVG;
 
 export { ProgressCircle };
 
-const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
-    const strokeWidth = props.strokeWidth || 10;
-    const width = 100;
-    const id = useId();
-
-    return (
-        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
-            <defs>
-                <linearGradient id={`${id}spinner-secondHalf`}>
-                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-                <linearGradient id={`${id}spinner-firstHalf`}>
-                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-            </defs>
-            <g strokeWidth={strokeWidth * 2}>
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
-                    stroke={`url(#${id}spinner-secondHalf)`}
-                />
-                <path
-                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
-                    stroke={`url(#${id}spinner-firstHalf)`}
-                />
-                {/* 1deg extra path to have the round end cap */}
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                />
-            </g>
-        </svg>
-    );
-};
-
-ProgressCircle.SVG = ProgressCircleSVG;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressCircle/ProgressCircleSVG.tsx

@@ -0,0 +1,38 @@
+import { useId } from '-/hooks/useId';
+
+export const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+
+    return (
+        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
+            <defs>
+                <linearGradient id={`${id}spinner-secondHalf`}>
+                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+                <linearGradient id={`${id}spinner-firstHalf`}>
+                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+            </defs>
+            <g strokeWidth={strokeWidth * 2}>
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
+                    stroke={`url(#${id}spinner-secondHalf)`}
+                />
+                <path
+                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
+                    stroke={`url(#${id}spinner-firstHalf)`}
+                />
+                {/* 1deg extra path to have the round end cap */}
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                />
+            </g>
+        </svg>
+    );
+};

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -1,6 +1,7 @@
 import { SvgCheck } from '@bspk/icons/Check';
 
-import { ElementProps } from '-';
+import { ElementProps } from '-/types/common';
+
 import './progression-stepper.scss';
 
 /** A progress stepper item is a single step in the progress bar. */
@@ -31,11 +32,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
@@ -73,9 +70,9 @@ export type ProgressionStepperProps = {
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-function ProgressionStepper({
+export function ProgressionStepper({
     steps = [],
     currentStep: currentStepProp = 0,
     variant = 'horizontal',
@@ -99,19 +96,27 @@ function ProgressionStepper({
                 </label>
             )}
             <ol>
-                {steps.flatMap(({ name, subtext }, index) => {
+                {steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
-                    if (stepNum < currentStep) status = 'complete';
-                    else if (stepNum === currentStep) status = 'current';
+                    if (currentStep > stepNum) status = 'complete';
+                    else if (currentStep === stepNum) status = 'current';
 
                     return (
-                        <li data-status={status} data-step={stepNum} key={`step-${index}`}>
-                            <span aria-hidden data-line-circle>
+                        <li
+                            aria-current={status === 'current' ? 'step' : undefined}
+                            data-status={status}
+                            data-step={stepNum}
+                            key={`step-${index}`}
+                        >
+                            <span data-line-circle>
                                 <span data-line="before" />
                                 <span data-circle>
-                                    <span>{stepNum}</span>
-                                    {status === 'complete' && <SvgCheck />}
+                                    {status === 'complete' ? (
+                                        <SvgCheck aria-hidden={true} />
+                                    ) : (
+                                        (variant !== 'widget' || status === 'current') && <span>{stepNum}</span>
+                                    )}
                                 </span>
                                 <span data-line="after" />
                             </span>
@@ -129,8 +134,4 @@ function ProgressionStepper({
     );
 }
 
-ProgressionStepper.bspkName = 'ProgressionStepper';
-
-export { ProgressionStepper };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { ProgressionStepperProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps> = {
+    containerStyle: { width: '100%' },
     presets: [
         {
             label: 'Horizontal',
@@ -37,7 +37,7 @@ export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps
             label: 'Widget',
             propState: {
                 variant: 'widget',
-                currentStep: 2,
+                currentStep: 3,
                 steps: [
                     { name: 'Name of step 1' },
                     { name: 'Name of step 2' },

package/src/components/ProgressionStepper/progression-stepper.scss

@@ -9,6 +9,7 @@
 
     ol {
         display: flex;
+        flex-direction: row;
         width: 100%;
         margin: 0;
         padding: 0;
@@ -20,6 +21,7 @@
             margin: 0;
             padding: 0;
             gap: var(--spacing-sizing-02);
+            flex-grow: 1;
 
             [data-line-circle] {
                 display: flex;
@@ -54,8 +56,19 @@
 
             [data-content] {
                 display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                [data-variant='horizontal'] & {
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                }
+
                 padding: 0 var(--spacing-sizing-10);
                 font: var(--body-small);
+                text-align: center;
             }
 
             &:first-of-type {

package/src/components/ProgressionStepperBar/ProgressionStepperBar.tsx

@@ -1,4 +1,5 @@
 import { cssWithVars } from '-/utils/cwv';
+
 import './progression-stepper-bar.scss';
 
 export type ProgressionStepperBarProps = {
@@ -35,9 +36,9 @@ export type ProgressionStepperBarProps = {
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressionStepperBar({
+export function ProgressionStepperBar({
     stepCount,
     stepCompleted: stepCompletedProp = 0,
     size = 'large',
@@ -51,15 +52,11 @@ function ProgressionStepperBar({
                     <div data-complete={i < stepCompleted || undefined} data-step={i} key={i} />
                 ))}
             </div>
-            <label>
+            <span data-label>
                 {stepCompleted} of {stepCount} steps completed.
-            </label>
+            </span>
         </div>
     );
 }
 
-ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
-
-export { ProgressionStepperBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressionStepperBar/progression-stepper-bar.scss

@@ -31,7 +31,7 @@
         }
     }
 
-    label {
+    [data-label] {
         font: var(--labels-small);
     }
 }

package/src/components/Radio/Radio.tsx

@@ -1,11 +1,10 @@
 import { ChangeEvent } from 'react';
 
-import { ElementProps, InvalidPropsLibrary, CommonProps } from '-';
+import { ElementProps, CommonProps } from '-/types/common';
 
 import './radio.scss';
 
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
     Required<CommonProps<'value'>> & {
         /**
          * Marks the radio as checked.
@@ -30,15 +29,14 @@ export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
  * @name Radio
  * @phase Utility
  */
-function Radio(props: ElementProps<RadioProps, 'input'>) {
-    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
+export function Radio(props: ElementProps<RadioProps, 'input'>) {
+    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
 
     return (
         <span data-bspk="radio">
             <input
                 {...otherProps}
                 checked={!!checked}
-                data-errormessage={errorMessage || undefined}
                 data-invalid={invalid || undefined}
                 disabled={disabled || undefined}
                 onChange={(event) => onChange(!!event.target.checked, event)}
@@ -49,8 +47,4 @@ function Radio(props: ElementProps<RadioProps, 'input'>) {
     );
 }
 
-Radio.bspkName = 'Radio';
-
-export { Radio };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Radio/radio.scss

@@ -39,7 +39,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;
         }
     }

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,65 +1,66 @@
-import { useId } from 'react';
+import { RadioOption, RadioOptionProps } from '-/components/RadioOption';
+import { useId } from '-/hooks/useId';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-import { ElementProps, CommonProps } from '-';
-import { Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
 import './radio-group.scss';
 
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> &
+    Required<CommonProps<'value'>>;
 
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
-    /**
-     * The value of the control.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: string;
-    /**
-     * The function to call when the radios are changed.
-     *
-     * @example
-     *     (value) => setState({ value }),
-     *
-     * @required
-     */
-    onChange: (value: string) => void;
-    /**
-     * The options for the radios.
-     *
-     * @example
-     *     [
-     *         {
-     *             value: '1',
-     *             label: 'Option 1',
-     *         },
-     *         {
-     *             value: '2',
-     *             label: 'Option 2',
-     *             description: 'Description here',
-     *         },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<RadioGroupOption>
-     * @required
-     */
-    options: RadioGroupOption[];
-    /**
-     * The label of the radio group.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-};
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> &
+    FormFieldControlProps & {
+        /**
+         * The value of the control.
+         *
+         * @example
+         *     1;
+         *
+         * @required
+         */
+        value: string;
+        /**
+         * The function to call when the radios are changed.
+         *
+         * @example
+         *     (value) => setState({ value }),
+         *
+         * @required
+         */
+        onChange: (value: string) => void;
+        /**
+         * The options for the radios.
+         *
+         * @example
+         *     [
+         *         {
+         *             value: '1',
+         *             label: 'Option 1',
+         *         },
+         *         {
+         *             value: '2',
+         *             label: 'Option 2',
+         *             description: 'Description here',
+         *         },
+         *         { value: '3', label: 'Option 3' },
+         *     ];
+         *
+         * @type Array<RadioGroupOption>
+         * @required
+         */
+        options: RadioGroupOption[];
+        /**
+         * The label of the radio group.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+         *
+         * @default false
+         */
+        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.
@@ -90,16 +91,16 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function RadioGroup({
+export function RadioGroup({
     onChange,
     options = [],
     name,
     value: groupValue,
     label: groupLabel,
-    showLabel = true,
-    disabled,
+    hideLabel: hideLabelProp = false,
+    disabled: disabledGroup = false,
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
     const id = `radio-group-${useId()}`;
@@ -107,27 +108,28 @@ function RadioGroup({
     return (
         <div
             {...props}
-            aria-label={!showLabel ? groupLabel : undefined}
-            aria-labelledby={showLabel ? `${id}-label` : undefined}
+            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"
-            data-disabled={disabled || undefined}
             id={id}
-            role="group"
+            role="radiogroup"
         >
-            {showLabel && <label id={`${id}-label`}>{groupLabel}</label>}
+            {!hideLabelProp && <label id={`${id}-label`}>{groupLabel}</label>}
             <div role="radiogroup">
-                {options.map(({ label, description, value }, index) => {
+                {options.map(({ label, description, disabled, value }, index) => {
                     return (
-                        <ToggleOption description={description} key={`toggle-option-${value || index}`} label={label}>
-                            <Radio
-                                aria-label={label}
-                                checked={groupValue === value}
-                                disabled={disabled}
-                                name={name}
-                                onChange={(checked) => checked && onChange(value)}
-                                value={value}
-                            />
-                        </ToggleOption>
+                        <RadioOption
+                            checked={groupValue === value}
+                            description={description}
+                            disabled={disabledGroup || disabled}
+                            key={`radio-option-${value || index}`}
+                            label={label}
+                            name={name}
+                            onChange={(checked) => checked && onChange(value)}
+                            value={value}
+                        />
                     );
                 })}
             </div>
@@ -135,8 +137,4 @@ function RadioGroup({
     );
 }
 
-RadioGroup.bspkName = 'RadioGroup';
-
-export { RadioGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/RadioGroup/RadioGroupExample.tsx

@@ -1,30 +1,9 @@
+import { RadioGroupProps } from '.';
+import { CheckboxGroupExample } from '-/components/CheckboxGroup/CheckboxGroupExample';
 import { RadioExample } from '-/components/Radio/RadioExample';
 import { ComponentExample } from '-/utils/demo';
 
-import { RadioGroupProps } from '.';
-
 export const RadioGroupExample: ComponentExample<RadioGroupProps> = {
     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 as ComponentExample<RadioGroupProps>['presets'],
 };

package/src/components/RadioGroup/radio-group.scss

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

package/src/components/RadioOption/RadioOption.tsx

@@ -1,19 +1,7 @@
-import { ChangeEvent } from 'react';
-
-import { InvalidPropsLibrary } from '-';
 import { RadioProps, Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type RadioOptionProps = InvalidPropsLibrary &
-    Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
+export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -23,19 +11,16 @@ export type RadioOptionProps = InvalidPropsLibrary &
  * @name RadioOption
  * @phase Utility
  */
-function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps) {
+export function RadioOption({ label: labelProp, description, disabled, ...radioProps }: RadioOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="radio-option" description={description} label={label}>
-                <Radio {...checkboxProps} aria-label={label} />
+            <ToggleOption data-bspk="radio-option" description={description} disabled={disabled} label={label}>
+                <Radio {...radioProps} aria-label={ariaLabel} />
             </ToggleOption>
         )
     );
 }
 
-RadioOption.bspkName = 'RadioOption';
-
-export { RadioOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */