@bspk/ui 1.3.18 → 1.3.20

package/src/components/Dialog/dialog.scss

@@ -5,20 +5,24 @@
     display: flex;
     pointer-events: none; // makes scrim clickable
 
+    --height: 100vh;
+    --width: 100vw;
+
     [data-dialog-box] {
         pointer-events: all; // allow pointer events on the dialog box
         text-align: start;
-        position: relative;
+        position: absolute;
         box-shadow: var(--drop-shadow-float);
         background: var(--surface-neutral-t1-base);
         color: var(--foreground-neutral-on-surface);
-        max-height: calc(100vh - var(--spacing-sizing-24));
+        max-height: calc(var(--height) - var(--spacing-sizing-24));
         z-index: 2;
         width: calc(100% - var(--spacing-sizing-08));
         animation-name: var(--box-animation-name);
         animation-duration: 0.5s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
+        animation-delay: 0;
 
         > :first-of-type {
             margin-top: 0;
@@ -89,7 +93,7 @@
         [data-dialog-box] {
             max-height: unset;
             width: 280px;
-            height: 100vh;
+            height: var(--height);
             border-bottom-right-radius: var(--radius-lg);
             border-top-right-radius: var(--radius-lg);
         }
@@ -103,7 +107,7 @@
         [data-dialog-box] {
             max-height: unset;
             width: 280px;
-            height: 100vh;
+            height: var(--height);
             border-bottom-left-radius: var(--radius-lg);
             border-top-left-radius: var(--radius-lg);
         }
@@ -112,6 +116,89 @@
     [data-width-full='true'] {
         width: 100%;
     }
+
+    &[data-contained] {
+        position: absolute;
+
+        --height: 100%;
+        --width: 100%;
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+            transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translate(0, 0);
+        }
+    }
+
+    @keyframes placement-left {
+        0% {
+            opacity: 0;
+        }
+
+        1% {
+            transform: translateX(calc(-1 * var(--width, 100vw)));
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes placement-right {
+        0% {
+            opacity: 0;
+        }
+
+        1% {
+            opacity: 1;
+            transform: translateX(var(--width, 100vw));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes placement-top {
+        0% {
+            opacity: 0;
+        }
+
+        1% {
+            opacity: 1;
+            transform: translateY(calc(-1 * var(--height, 100vh)));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes placement-bottom {
+        0% {
+            opacity: 0;
+        }
+
+        1% {
+            opacity: 1;
+            transform: translateY(var(--height, 100vh));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Flex/Flex.tsx

@@ -36,6 +36,8 @@ export type FlexProps<As extends ElementType = ElementType> = {
     direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
     /** The padding to apply to the Flex. */
     padding?: SizingPixels | SizingPixels[];
+    /** If true the Flex will take up the full width of its container. */
+    full?: boolean;
 };
 
 /**
@@ -83,6 +85,7 @@ export function Flex<As extends ElementType = ElementType>({
                 justifyContent: justify || 'flex-start',
                 flexWrap: wrap ? 'wrap' : 'nowrap',
                 padding: paddingValue,
+                width: props.full ? '100%' : undefined,
                 ...style,
             }}
         >

package/src/components/ListItem/list-item.scss

@@ -67,6 +67,10 @@
     [data-trailing] {
         width: fit-content;
         flex: 0 0 auto;
+
+        &:empty {
+            display: none;
+        }
     }
 
     [data-item-label] {

package/src/components/Modal/Modal.tsx

@@ -3,7 +3,6 @@ import { SvgClose } from '@bspk/icons/Close';
 import { ReactNode, useMemo, useRef } from 'react';
 import { Button, ButtonProps } from '-/components/Button';
 import { DialogProps, Dialog } from '-/components/Dialog';
-import { Txt } from '-/components/Txt';
 import { useDebounceCallback } from '-/hooks/useDebounceCallback';
 import { useEventListener } from '-/hooks/useEventListener';
 import { useUIContext } from '-/hooks/useUIContext';
@@ -183,9 +182,7 @@ export function Modal({
         >
             <div data-bspk="modal" ref={(node) => innerRef?.(node)} style={{ visibility: 'hidden' }}>
                 <div data-modal-header>
-                    <Txt as="div" data-dialog-title variant="heading-h4">
-                        {header}
-                    </Txt>
+                    <div data-modal-title>{header}</div>
                     <Button
                         icon={<SvgClose />}
                         iconOnly

package/src/components/Modal/modal.scss

@@ -15,6 +15,11 @@
         justify-content: space-between;
         align-items: center;
         gap: var(--spacing-sizing-04);
+
+        [data-modal-title] {
+            font: var(--heading-h4);
+            flex: 1;
+        }
     }
 
     [data-modal-main] {

package/src/components/PageHeader/PageHeader.rtl.test.tsx

@@ -1,15 +1,18 @@
 import { PageHeader } from './PageHeader';
-import { presets } from './PageHeaderExample';
+import { PageHeaderExample } from './PageHeaderExample';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
+const props = {
+    ...PageHeaderExample.defaultState,
+    title: 'Page Title',
+};
+
 describe('PageHeader (RTL)', () => {
-    presets.forEach((preset) => {
-        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<PageHeader {...preset.propState} />));
-    });
+    it(`has no basic a11y issues`, hasNoBasicA11yIssues(<PageHeader {...props} />));
 
     it('renders', () => {
-        const { getByText } = render(<PageHeader {...presets[0].propState} />);
+        const { getByText } = render(<PageHeader {...props} />);
 
         expect(getByText('Page Title')).toBeInTheDocument();
     });

package/src/components/PageHeader/PageHeader.tsx

@@ -53,7 +53,7 @@ export type PageHeaderProps = {
  *     />;
  *
  * @name PageHeader
- * @phase Dev
+ * @phase UXReview
  */
 export function PageHeader({ actions, breadcrumb, avatar, subHeader, title }: PageHeaderProps) {
     return (

package/src/components/PageHeader/PageHeaderBlockConfigs.tsx

@@ -0,0 +1,152 @@
+import { PageHeader } from './PageHeader';
+import { Avatar } from '-/components/Avatar';
+import { Breadcrumb } from '-/components/Breadcrumb';
+import { Flex } from '-/components/Flex';
+import { Txt } from '-/components/Txt';
+import { BlockExample, Slot } from '-/utils/blocks';
+
+export const blockConfigs = (
+    <>
+        <BlockExample name="Slots">
+            <BlockExample.Component>
+                <PageHeader
+                    actions={<Slot height={32} label="Page actions slot" width={372} />}
+                    subHeader={
+                        <>
+                            <Slot height="var(--spacing-sizing-06)" label="Slot component" width={200} />
+                            <Slot height="var(--spacing-sizing-06)" label="Slot component 2" width={200} />
+                        </>
+                    }
+                    title="Dashboard"
+                />
+            </BlockExample.Component>
+            <BlockExample.Pattern>
+                <Flex
+                    direction="column"
+                    padding={['20', '20', '0']}
+                    style={{
+                        background: 'var(--background-base)',
+                        width: '100%',
+                    }}
+                >
+                    <Flex align="center" data-header gap="20" justify="space-between" style={{ width: '100%' }}>
+                        <Txt variant="heading-h3">Dashboard</Txt>
+                        <div
+                            data-page-actions-slot
+                            style={{
+                                height: 'var(--spacing-sizing-08)',
+                                width: 'auto',
+                            }}
+                        >
+                            <Slot height="100%" label="Page actions slot" width={372} />
+                        </div>
+                    </Flex>
+                    <Flex
+                        align="end"
+                        data-subheader
+                        justify="space-between"
+                        style={{ height: 'var(--spacing-sizing-11)', width: '100%' }}
+                    >
+                        <Slot height="var(--spacing-sizing-06)" label="Slot component" width={200} />
+                        <Slot height="var(--spacing-sizing-06)" label="Slot component 2" width={200} />
+                    </Flex>
+                </Flex>
+            </BlockExample.Pattern>
+        </BlockExample>
+        <BlockExample name="No Subheader">
+            <BlockExample.Component>
+                <PageHeader actions={<Slot height={32} label="Page actions slot" width={372} />} title="Dashboard" />
+            </BlockExample.Component>
+            <BlockExample.Pattern>
+                <Flex
+                    align="center"
+                    data-header
+                    gap="20"
+                    justify="space-between"
+                    style={{
+                        background: 'var(--background-base)',
+                        padding: 'var(--spacing-sizing-05)',
+                        width: '100%',
+                    }}
+                >
+                    <Txt variant="heading-h3">Dashboard</Txt>
+                    <div data-page-actions-slot style={{ height: 'var(--spacing-sizing-08)', width: 'auto' }}>
+                        <Slot height="100%" label="Page actions slot" width={372} />
+                    </div>
+                </Flex>
+            </BlockExample.Pattern>
+        </BlockExample>
+        <BlockExample name="With Breadcrumbs">
+            <BlockExample.Component>
+                <PageHeader
+                    actions={<Slot height={32} label="Page actions slot" width={372} />}
+                    breadcrumb={{
+                        items: [
+                            { label: 'Home', href: '#' },
+                            { label: 'Analytics', href: '#' },
+                            { label: 'Dashboard', href: '#' },
+                        ],
+                    }}
+                    title="Dashboard"
+                />
+            </BlockExample.Component>
+            <BlockExample.Pattern>
+                <Flex direction="column" style={{ background: 'var(--background-base)', width: '100%' }}>
+                    <div style={{ padding: 'var(--spacing-sizing-05) var(--spacing-sizing-05) 0' }}>
+                        <Breadcrumb
+                            items={[
+                                { label: 'Home', href: '#' },
+                                { label: 'Analytics', href: '#' },
+                                { label: 'Dashboard', href: '#' },
+                            ]}
+                        />
+                    </div>
+                    <Flex
+                        align="center"
+                        data-header
+                        gap="20"
+                        justify="space-between"
+                        padding="20"
+                        style={{ width: '100%' }}
+                    >
+                        <Txt variant="heading-h3">Dashboard</Txt>
+                        <div data-page-actions-slot style={{ height: 'var(--spacing-sizing-08)', width: 'auto' }}>
+                            <Slot height="100%" label="Page actions slot" width={372} />
+                        </div>
+                    </Flex>
+                </Flex>
+                ;
+            </BlockExample.Pattern>
+        </BlockExample>
+        <BlockExample name="Profile">
+            <BlockExample.Component>
+                <PageHeader
+                    actions={<Slot height={32} label="Page actions slot" width={372} />}
+                    avatar={{
+                        name: 'Brian Blake',
+                        size: 'xx-large',
+                    }}
+                    title="Dashboard"
+                />
+            </BlockExample.Component>
+            <BlockExample.Pattern>
+                <Flex
+                    align="center"
+                    data-header
+                    gap="20"
+                    justify="space-between"
+                    padding="20"
+                    style={{ background: 'var(--background-base)', width: '100%' }}
+                >
+                    <Flex align="center" gap="16">
+                        <Avatar name="Brian Blake" size="xx-large" />
+                        <Txt variant="heading-h3">Dashboard</Txt>
+                    </Flex>
+                    <div data-page-actions-slot style={{ height: 'var(--spacing-sizing-08)', width: 'auto' }}>
+                        <Slot height="100%" label="Page actions slot" width={372} />
+                    </div>
+                </Flex>
+            </BlockExample.Pattern>
+        </BlockExample>
+    </>
+);

package/src/components/PageHeader/PageHeaderExample.tsx

@@ -1,48 +1,7 @@
+import { blockConfigs } from './PageHeaderBlockConfigs';
 import { PageHeaderProps } from '.';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { ComponentExample, Preset } from '-/utils/demo';
-
-export const presets: Preset<PageHeaderProps>[] = [
-    {
-        label: 'Title Only',
-        propState: {
-            title: 'Page Title',
-        },
-        designPattern: true,
-    },
-    {
-        label: 'With Actions',
-        propState: {
-            title: 'Page Title',
-            actions: <ExamplePlaceholder height={32} label="Page actions slot" width={372} />,
-        },
-        designPattern: true,
-    },
-    {
-        label: 'With Breadcrumb',
-        propState: {
-            title: 'Page Title',
-            breadcrumb: {
-                items: [
-                    { label: 'Home', href: '#/home' },
-                    { label: 'Section', href: '#/section' },
-                    { label: 'Page Title', href: '#/page' },
-                ],
-            },
-            actions: <ExamplePlaceholder height={32} label="Page actions slot" width={372} />,
-        },
-        designPattern: true,
-    },
-    {
-        label: 'Profile',
-        propState: {
-            title: 'Charlie Brown',
-            avatar: { image: '/avatar-01.png', name: 'CB' },
-            actions: <ExamplePlaceholder height={32} label="Page actions slot" width={372} />,
-        },
-        designPattern: true,
-    },
-];
+import { ComponentExample } from '-/utils/demo';
 
 export const PageHeaderExample: ComponentExample<PageHeaderProps> = {
     defaultState: {
@@ -50,9 +9,12 @@ export const PageHeaderExample: ComponentExample<PageHeaderProps> = {
         actions: <ExamplePlaceholder height={32} label="Page actions slot" width={372} />,
     },
     disableProps: [],
-    presets,
     render: ({ props, Component }) => <Component {...props} />,
     variants: false,
     fullPage: true,
     hideDemo: true,
+    hideUsage: true,
+    presets: [],
 };
+
+export { blockConfigs };

package/src/components/PageHeader/page-header.scss

@@ -17,7 +17,7 @@
         [data-title] {
             display: flex;
             align-items: center;
-            gap: var(--spacing-sizing-03);
+            gap: var(--spacing-sizing-04);
 
             h1 {
                 margin: 0;

package/src/components/Portal/Portal.tsx

@@ -8,7 +8,7 @@ export type PortalProps = {
      * @required
      */
     children: ReactNode;
-    /** The container to render the portal in. */
+    /** The container to render the portal content in. */
     container?: HTMLElement;
 };
 

package/src/components/RadioOption/RadioOption.tsx

@@ -1,7 +1,12 @@
+import { ListItem } from '-/components/ListItem';
 import { RadioProps, Radio } from '-/components/Radio';
-import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
+export type RadioOptionProps = RadioProps & {
+    /** The label of the option. Also used as the aria-label of the control. */
+    label: string;
+    /** The description of the option. */
+    description?: string;
+};
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -12,14 +17,17 @@ export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
  * @phase Utility
  */
 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} disabled={disabled} label={label}>
-                <Radio {...radioProps} aria-label={ariaLabel} disabled={disabled} />
-            </ToggleOption>
-        )
+        <ListItem
+            aria-disabled={disabled || undefined}
+            as="label"
+            label={labelProp}
+            leading={<Radio {...radioProps} aria-label={ariaLabel} disabled={disabled} />}
+            owner="radio-option"
+            subText={description}
+            width="hug"
+        />
     );
 }
 

package/src/components/Scrim/Scrim.tsx

@@ -16,6 +16,8 @@ export type ScrimProps = CommonProps<'owner'> & {
      * @required;
      */
     onClick: () => void;
+    /** If the scrim should be contained within a parent element, or fixed to the viewport. */
+    contained?: boolean;
 };
 
 /**
@@ -25,13 +27,14 @@ export type ScrimProps = CommonProps<'owner'> & {
  * @name Scrim
  * @phase Utility
  */
-export function Scrim({ visible = true, owner, ...props }: ScrimProps) {
+export function Scrim({ visible = true, owner, contained, ...props }: ScrimProps) {
     return (
         <div
             {...props}
             aria-hidden="true"
             data-bspk="scrim"
             data-bspk-owner={owner || undefined}
+            data-contained={contained || undefined}
             data-hidden={!visible || undefined}
         />
     );

package/src/components/Scrim/scrim.scss

@@ -14,6 +14,10 @@
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
 
+    &[data-contained] {
+        position: absolute;
+    }
+
     @keyframes fade-in {
         0% {
             opacity: 0;

package/src/components/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import './switch.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps } from '-/types/common';
 
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name'> & {
     /**
      * Marks the control as checked.
      *

package/src/components/SwitchOption/SwitchOption.tsx

@@ -1,7 +1,22 @@
+import { ListItem } from '-/components/ListItem';
 import { SwitchProps, Switch } from '-/components/Switch';
-import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
+import { CommonProps } from '-/types/common';
 
-export type SwitchOptionProps = ToggleOptionControlProps<SwitchProps>;
+export type SwitchOptionProps = CommonProps<'style'> &
+    SwitchProps & {
+        /**
+         * The label of the option. Also used as the aria-label of the control.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * The description of the option.
+         *
+         * @type multiline
+         */
+        description?: string;
+    };
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -11,16 +26,20 @@ export type SwitchOptionProps = ToggleOptionControlProps<SwitchProps>;
  * @name SwitchOption
  * @phase Stable
  */
-export function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps) {
-    const label = labelProp || description;
+export function SwitchOption({ label: labelProp, description, disabled, style, ...switchProps }: SwitchOptionProps) {
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
 
     return (
-        label && (
-            <ToggleOption data-bspk-owner="switch-option" description={description} label={label}>
-                <Switch {...checkboxProps} aria-label={ariaLabel} />
-            </ToggleOption>
-        )
+        <ListItem
+            aria-disabled={disabled || undefined}
+            as="label"
+            label={labelProp}
+            leading={<Switch {...switchProps} aria-label={ariaLabel} disabled={disabled} />}
+            owner="switch-option"
+            style={style}
+            subText={description}
+            width="hug"
+        />
     );
 }
 

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,6 @@
 import './tag.scss';
 import { Truncated } from '-/components/Truncated';
+import { ElementProps } from '-/types/common';
 import { ColorVariant } from '-/utils/colorVariants';
 
 export type TagProps = {
@@ -40,9 +41,15 @@ export type TagProps = {
  * @name Tag
  * @phase Stable
  */
-export function Tag({ label, color = 'white', size = 'small', variant = 'flat' }: TagProps) {
+export function Tag({
+    label,
+    color = 'grey',
+    size = 'small',
+    variant = 'flat',
+    ...props
+}: ElementProps<TagProps, 'span'>) {
     return (
-        <span data-bspk="tag" data-color={color} data-size={size} data-variant={variant}>
+        <span {...props} data-bspk="tag" data-color={color} data-size={size} data-variant={variant}>
             {label && <Truncated>{label}</Truncated>}
             {variant === 'corner-wrap' && <div data-triangle />}
         </span>