@bspk/ui 1.1.34 → 1.2.0

package/src/components/SegmentedControl/segmented-control.scss

@@ -1,121 +1,69 @@
-[data-bspk='segmented-control'] {
-    display: flex;
-    flex-direction: row;
-    max-width: 100%;
-    overflow: scroll;
-
-    --outer-height: var(--spacing-sizing-10);
-    --inner-height: var(--spacing-sizing-08);
-    --svg-width: 20px;
+ul[data-bspk='segmented-control'] {
+    background: var(--surface-neutral-t3-low);
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-sizing-01);
 
     &[data-width='fill'] {
-        align-items: stretch;
-        width: 100%;
-
-        --btn-flex-grow: 1;
-
         margin: 0 var(--spacing-sizing-04);
     }
 
-    &[data-width='hug'] {
-        width: fit-content;
-
-        --btn-flex-grow: 0;
-    }
+    --padding: var(--spacing-sizing-04);
 
     &[data-size='small'] {
-        --outer-height: var(--spacing-sizing-08);
-        --inner-height: var(--spacing-sizing-06);
-        --svg-width: 16px;
+        --padding: var(--spacing-sizing-03);
     }
 
-    svg {
-        width: var(--svg-width) !important;
+    &[data-size='large'] {
+        --padding: var(--spacing-sizing-05);
     }
 
-    button {
-        border: 0;
-        cursor: pointer;
+    li {
         color: var(--foreground-neutral-on-surface);
-        flex-grow: var(--btn-flex-grow);
-        font: var(--labels-small);
-        margin: 0;
-        height: var(--spacing-sizing-12);
-        background: transparent;
-        position: relative;
-        white-space: nowrap;
+        padding: 0 var(--padding);
+        border-radius: var(--radius-sm);
 
-        [data-focus-ring] {
-            display: none;
-        }
-
-        [data-outer] {
-            height: var(--outer-height);
-            background: var(--surface-neutral-t3-low);
-            margin: var(--spacing-sizing-01) 0;
-            padding: var(--spacing-sizing-01) 0;
-            display: block;
-        }
+        &:has([data-icon]) {
+            // smaller padding for icon-only items
+            padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 
-        [data-inner] {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            height: var(--inner-height);
-            border-bottom: 1px solid transparent;
-            justify-content: center;
-            gap: var(--spacing-sizing-01);
-            border-radius: var(--radius-sm);
-            padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
-        }
-
-        &:first-of-type {
-            [data-outer] {
-                border-top-left-radius: var(--radius-md);
-                border-bottom-left-radius: var(--radius-md);
-                padding-left: var(--spacing-sizing-01);
+            &:has([data-label]) {
+                padding-right: var(--padding);
             }
         }
 
-        &:last-of-type {
-            [data-outer] {
-                border-top-right-radius: var(--radius-md);
-                border-bottom-right-radius: var(--radius-md);
-                padding-right: var(--spacing-sizing-01);
+        &:not([aria-disabled]) {
+            &[aria-selected] {
+                background: var(--surface-neutral-t1-base);
+                box-shadow:
+                    0 0 1px 0 var(--shadow-variant-03),
+                    0 1px 1px 0 var(--shadow-variant-05);
             }
-        }
 
-        &:not(:disabled) {
-            &:hover {
-                [data-inner] {
-                    background: var(--interactions-neutral-hover-opacity);
+            &[data-active],
+            // only show hover effect if no sibling is active
+            &:hover:not(:has(~ [data-active])) {
+                background: var(--interactions-neutral-hover-opacity);
+
+                &[aria-selected] {
+                    background:
+                        linear-gradient(
+                            var(--interactions-neutral-hover-opacity),
+                            var(--interactions-neutral-hover-opacity)
+                        ),
+                        linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
                 }
             }
 
             &:active {
-                [data-inner] {
-                    background: var(--interactions-neutral-press-opacity);
-                }
-            }
-
-            &[data-selected] {
-                [data-inner] {
-                    background: var(--surface-neutral-t1-base);
-                }
-            }
-
-            &:focus-visible {
-                z-index: 2;
-                outline: solid 2px var(--stroke-neutral-focus);
+                background: var(--interactions-neutral-press-opacity);
             }
         }
 
-        &:disabled {
-            pointer-events: none;
+        &[aria-disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
             cursor: not-allowed;
         }
     }
 }
 
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+// /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Select/Select.tsx

@@ -1,10 +1,10 @@
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { useMemo } from 'react';
 
-import { CommonProps, ElementProps } from '-';
 import { Combobox, ComboboxProps } from '-/components/Combobox';
 import { ListItem } from '-/components/ListItem';
 import { useId } from '-/hooks/useId';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 
 import './select.scss';
 
@@ -15,20 +15,11 @@ export type SelectOption = Record<string, unknown> & {
     label: string;
 };
 
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'name' | 'size'> &
+export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'invalid' | 'name' | 'size'> &
+    FormFieldControlProps &
     Pick<
         ComboboxProps<T>,
-        | 'disabled'
-        | 'errorMessage'
-        | 'id'
-        | 'invalid'
-        | 'isMulti'
-        | 'itemDisplayCount'
-        | 'label'
-        | 'onChange'
-        | 'readOnly'
-        | 'selectAll'
-        | 'value'
+        'disabled' | 'id' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'
     > & {
         /**
          * Array of options to display in the select
@@ -99,9 +90,9 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-function Select({
+export function Select({
     options = [],
     value: selected,
     onChange,
@@ -112,38 +103,36 @@ function Select({
     disabled,
     id: propId,
     invalid,
-    errorMessage,
     readOnly,
     name,
     isMulti,
     selectAll,
     description,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<SelectProps, 'button'>) {
     const id = useId(propId);
 
-    const selectedItem: SelectOption = useMemo(() => {
+    const selectedItem: SelectOption | undefined = useMemo(() => {
         if (isMulti)
             return {
                 label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
                 value: selected?.join(', ') || '',
             };
 
-        return options.find((o) => o.value === selected?.[0]) || { label: placeholder, value: '' };
-    }, [isMulti, options, placeholder, selected]);
+        return options.find((o) => o.value === selected?.[0]);
+    }, [isMulti, options, selected]);
 
     return (
         <Combobox
             description={description || ''}
             disabled={disabled}
-            errorMessage={errorMessage}
-            header={placeholder || label}
             id={id}
-            invalid={invalid}
             isMulti={isMulti}
             itemDisplayCount={itemDisplayCount}
             items={options}
-            label={label}
+            label={placeholder || label}
             onChange={onChange}
             readOnly={readOnly}
             selectAll={selectAll}
@@ -152,33 +141,36 @@ function Select({
             {({ setReference, toggleProps }) => (
                 <>
                     <input defaultValue={selected} name={name} type="hidden" />
-                    <button
+                    <span
+                        {...props}
+                        {...toggleProps}
+                        aria-describedby={ariaDescribedBy || undefined}
+                        aria-disabled={disabled || readOnly}
+                        aria-errormessage={ariaErrorMessage || undefined}
                         aria-label={label || selectedItem?.label || placeholder}
                         data-bspk="select"
-                        data-empty={selectedItem?.label ? undefined : ''}
                         data-invalid={invalid || undefined}
                         data-size={size}
-                        disabled={disabled || readOnly}
                         id={id}
                         ref={(node) => {
                             if (node) setReference(node);
                         }}
-                        {...props}
-                        {...toggleProps}
                     >
-                        <ListItem as="span" data-placeholder {...selectedItem} readOnly />
+                        <ListItem
+                            data-bspk-owner="select"
+                            data-placeholder={!selectedItem || undefined}
+                            label={selectedItem?.label || placeholder}
+                            owner="select"
+                            readOnly
+                        />
                         <span data-icon>
                             <SvgChevronRight />
                         </span>
-                    </button>
+                    </span>
                 </>
             )}
         </Combobox>
     );
 }
 
-Select.bspkName = 'Select';
-
-export { Select };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Select/SelectExample.tsx

@@ -1,10 +1,9 @@
+import { SelectProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
 import { ComponentExample } from '-/utils/demo';
 
-import { SelectProps } from '.';
-
 const trailingPrice = (price: number) => (
     <Txt>{`${new Intl.NumberFormat('en-US', {
         style: 'currency',
@@ -60,20 +59,12 @@ export const SelectExample: ComponentExample<SelectProps> = {
                     {
                         value: 'a',
                         label: 'Package A',
-                        trailing: (
-                            <Tag color="blue" size="x-small">
-                                Recommended
-                            </Tag>
-                        ),
+                        trailing: <Tag color="blue" label="Recommended" size="x-small" />,
                     },
                     {
                         value: 'b',
                         label: 'Package B',
-                        trailing: (
-                            <Tag color="green" size="x-small">
-                                Best Value
-                            </Tag>
-                        ),
+                        trailing: <Tag color="green" label="Best Value" size="x-small" />,
                     },
                     { value: 'c', label: 'Package C' },
                     { value: 'd', label: 'Package D' },
@@ -126,5 +117,5 @@ export const SelectExample: ComponentExample<SelectProps> = {
             },
         },
     ],
-    hideVariants: true,
+    variants: false,
 };

package/src/components/Select/select.scss

@@ -18,6 +18,7 @@
     max-height: var(--select-height);
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: var(--spacing-sizing-02);
     flex-grow: 0;
     flex-shrink: 0;
@@ -28,21 +29,27 @@
     background: var(--select-background);
     padding: 0 var(--select-padding);
 
-    [data-placeholder] {
+    * {
+        pointer-events: none;
+    }
+
+    [data-bspk='list-item'][data-bspk-owner='select'] {
         display: block;
         max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         padding: 0;
-
-        [data-inner] {
-            min-height: auto;
-            padding: 0;
-        }
+        min-height: auto;
 
         [data-item-label] [data-text] {
             color: var(--select-text-color);
         }
+
+        &[data-placeholder] {
+            [data-item-label] [data-text] {
+                color: var(--foreground-neutral-on-surface-variant-03);
+            }
+        }
     }
 
     [data-icon] {
@@ -111,10 +118,6 @@
     &[data-invalid] {
         --select-border-color: var(--status-error);
     }
-
-    &[data-empty] {
-        --select-text-color: var(--foreground-neutral-on-surface-variant-03);
-    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SelectField/SelectField.tsx

@@ -1,20 +1,7 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
 import { SelectProps, Select } from '-/components/Select';
 
-export type SelectFieldProps = Pick<
-    SelectProps,
-    | 'disabled'
-    | 'itemDisplayCount'
-    | 'label'
-    | 'name'
-    | 'onChange'
-    | 'options'
-    | 'placeholder'
-    | 'readOnly'
-    | 'size'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'labelTrailing' | 'required'>;
+export type SelectFieldProps = FormFieldWrapProps<SelectProps>;
 
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
@@ -44,36 +31,41 @@ export type SelectFieldProps = Pick<
  *     }
  *
  * @name SelectField
- * @phase DesignReview
+ * @phase Dev
  */
-function SelectField({
+export function SelectField({
     label,
-    errorMessage: errorMessageProp,
     helperText,
-    controlId: id,
+    controlId,
     labelTrailing,
     required,
-    ...selectProps
+    invalid,
+    errorMessage,
+    ...inputProps
 }: SelectFieldProps) {
-    const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
-
     return (
         <FormField
-            controlId={id}
+            controlId={controlId}
             data-bspk="select-field"
             errorMessage={errorMessage}
             helperText={helperText}
+            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
             required={required}
         >
-            {(fieldProps) => <Select {...selectProps} {...fieldProps} id={id} invalid={!!errorMessage} label={label} />}
+            {(fieldProps) => (
+                <Select
+                    //
+                    {...inputProps}
+                    {...fieldProps}
+                    id={controlId}
+                    invalid={invalid}
+                    label={label}
+                />
+            )}
         </FormField>
     );
 }
 
-SelectField.bspkName = 'SelectField';
-
-export { SelectField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Skeleton/Circular.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="circular" />;
+}

package/src/components/Skeleton/Photo.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="photo" />;
+}

package/src/components/Skeleton/Profile.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="profile" />;
+}

package/src/components/Skeleton/Rectangular.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="rectangular" />;
+}

package/src/components/Skeleton/Skeleton.tsx

@@ -1,14 +1,15 @@
-/* eslint-disable react/no-multi-comp */ import { ReactNode } from 'react';
-
+import { ReactNode } from 'react';
 import { cssWithVars } from '-/utils/cwv';
 
+export type SkeletonVariant = 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
+
 export type SkeletonProps = {
     /**
      * The variant of the skeleton that best hints the content being loaded.
      *
      * @default rectangular
      */
-    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
+    variant?: SkeletonVariant;
     /**
      * The width of the skeleton. This is ignored when variant is 'profile' or 'thumbnail'.
      *
@@ -66,9 +67,9 @@ export type SkeletonProps = {
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *
  * @name Skeleton
- * @phase DesignReview
+ * @phase UXReview
  */
-function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }: SkeletonProps) {
+export function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }: SkeletonProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (
@@ -86,28 +87,4 @@ function Skeleton({ width = 100, height = 100, variant = 'rectangular', children
     );
 }
 
-Skeleton.bspkName = 'Skeleton';
-
-function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="circular" />;
-}
-
-function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="photo" />;
-}
-
-function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="profile" />;
-}
-
-function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="rectangular" />;
-}
-
-function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="thumbnail" />;
-}
-
-export { Skeleton, SkeletonCircular, SkeletonPhoto, SkeletonProfile, SkeletonRectangular, SkeletonThumbnail };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Skeleton/SkeletonExample.tsx

@@ -1,15 +1,14 @@
-/* eslint-disable @cspell/spellchecker */ import { useState, useEffect } from 'react';
-
+import { useState } from 'react';
+import { SkeletonProps, SkeletonVariant } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { useTimeout } from '-/hooks/useTimeout';
-import { ComponentExample } from '-/utils/demo';
-
-import { SkeletonProps } from '.';
+import { ComponentExample, ComponentExampleRenderProps } from '-/utils/demo';
 
 export const SkeletonExample: ComponentExample<SkeletonProps> = {
     render: ({ props, preset, Component }) => {
-        if (preset?.label === 'Loading Transition') return <SkeletonTransition {...props} Component={Component} />;
+        if (preset?.label === 'Loading Transition') return <SkeletonTransition Component={Component} props={props} />;
+
         return <Component {...props} />;
     },
     presets: [
@@ -25,38 +24,24 @@ export const SkeletonExample: ComponentExample<SkeletonProps> = {
 
 function SkeletonTransition({
     Component,
-    ...props
-}: SkeletonProps & { Component: React.ComponentType<SkeletonProps> }) {
-    const loadingTimeout = useTimeout();
+    props,
+}: Pick<ComponentExampleRenderProps<SkeletonProps>, 'Component' | 'props'>) {
     const [loaded, setLoaded] = useState(false);
-    useEffect(() => {
-        setLoaded(false);
-        loadingTimeout.set(() => setLoaded(true), 3000);
-    }, [loadingTimeout, props.variant]);
+    useTimeout(() => setLoaded(true), 3000);
 
     return (
-        <Component {...props}>
-            {loaded && (
-                <>
-                    {props.variant === 'rectangular' && (
-                        <ExamplePlaceholder height={props.height} width={props.width} />
-                    )}
-                    {props.variant === 'circular' && (
-                        <ExamplePlaceholder
-                            height={props.height}
-                            style={{ borderRadius: '100%' }}
-                            width={props.width}
-                        />
-                    )}
-                    {props.variant === 'photo' && (
-                        <ExamplePlaceholder height={props.height} width={props.width}>
-                            Loaded
-                        </ExamplePlaceholder>
-                    )}
-                    {props.variant === 'profile' && <Avatar color="red" name="Bob Boberson" />}
-                    {props.variant === 'thumbnail' && <ExamplePlaceholder height={props.height} width={props.width} />}
-                </>
-            )}
-        </Component>
+        <Component {...props}>{loaded && <>{PROP_VARIANT_CHILDREN[props!.variant as SkeletonVariant]}</>}</Component>
     );
 }
+
+const PROP_VARIANT_CHILDREN: Record<SkeletonVariant, SkeletonProps['children']> = {
+    rectangular: <ExamplePlaceholder height="100px" width="100px" />,
+    circular: <ExamplePlaceholder height="100px" style={{ borderRadius: '100%' }} width="100px" />,
+    photo: (
+        <ExamplePlaceholder height="100px" width="100px">
+            Loaded
+        </ExamplePlaceholder>
+    ),
+    profile: <Avatar color="red" name="Bob Robertson" />,
+    thumbnail: <ExamplePlaceholder height="100px" width="100px" />,
+};

package/src/components/Skeleton/Thumbnail.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="thumbnail" />;
+}

package/src/components/Skeleton/index.tsx

@@ -1 +1,6 @@
 export * from './Skeleton';
+export * from './Circular';
+export * from './Photo';
+export * from './Profile';
+export * from './Rectangular';
+export * from './Thumbnail';

package/src/components/SkeletonText/SkeletonText.tsx

@@ -46,9 +46,9 @@ export type SkeletonTextProps = {
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *
  * @name SkeletonText
- * @phase DesignReview
+ * @phase UXReview
  */
-function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps) {
+export function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (
@@ -69,8 +69,4 @@ function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps
     );
 }
 
-SkeletonText.bspkName = 'SkeletonText';
-
-export { SkeletonText };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */