@bspk/ui 1.1.34 → 1.2.0

package/src/components/Badge/badge.scss

@@ -4,14 +4,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-circular);
+    border-radius: var(--radius-full);
     height: var(--size);
     width: fit-content;
     min-width: var(--size);
     font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
     padding: 0 var(--spacing-sizing-02);
+    background-color: var(--background);
+    color: var(--foreground);
+
+    &[data-color='primary'] {
+        --foreground: var(--foreground-brand-on-primary);
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --foreground: var(--foreground-brand-on-secondary);
+        --background: var(--foreground-brand-secondary);
+    }
 
     &[data-size='x-small'] {
         --size: var(--spacing-sizing-05);
@@ -19,9 +29,11 @@
         padding: 2px var(--spacing-sizing-01);
     }
 
-    &[data-variant='secondary'] {
-        color: var(--foreground-brand-on-secondary);
-        background: var(--surface-brand-secondary);
+    &[data-variant='notification'] {
+        --size: 6px;
+
+        padding: 0;
+        display: block;
     }
 
     &[data-surface-border] {
@@ -29,23 +41,4 @@
     }
 }
 
-[data-bspk='badge-wrapper'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: fit-content;
-    height: fit-content;
-    flex-shrink: 0;
-
-    [data-bspk='badge'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: scale(1) translate(50%, -50%);
-        transform-origin: 100% 0%;
-        z-index: 2;
-    }
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/BadgeDot.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react';
+import { cssWithVars } from '-/utils/cwv';
+
+import './badge-dot.scss';
+
+type BadgeDotSize = 6 | 8 | 10 | 12;
+
+const OUTLINE_WIDTHS: Record<BadgeDotSize, number> = {
+    6: 1,
+    8: 2,
+    10: 2,
+    12: 2,
+};
+
+export type BadgeDotProps = {
+    /**
+     * The color variant of the badge-dot.
+     *
+     * @default primary
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The context for which the badge-dot is applied.
+     *
+     * Could be a button, link, or any other element that the badge-dot is associated with.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the badge-dot.
+     *
+     * @default 6
+     */
+    size?: BadgeDotSize;
+    /**
+     * Whether the badge-dot should have an outline.
+     *
+     * @default false
+     */
+    outline?: boolean;
+};
+
+/**
+ * A non-numeric badge used to indicate something new or its current status.
+ *
+ * @example
+ *     import { BadgeDot } from '@bspk/ui/BadgeDot';
+ *
+ *     function Example() {
+ *         return <BadgeDot color="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
+ *
+ * @name BadgeDot
+ * @phase UXReview
+ */
+export function BadgeDot({ children, color = 'primary', size = 6, outline = false }: BadgeDotProps) {
+    const badgeDot = (
+        <sup
+            data-attachment={!!children || undefined}
+            data-bspk="badge-dot"
+            data-color={color}
+            data-outline={outline || undefined}
+            style={cssWithVars({
+                '--size': `${size}px`,
+                '--outline-width': `${OUTLINE_WIDTHS[size]}px`,
+            })}
+        />
+    );
+
+    if (children) {
+        return (
+            <span data-attachment-wrapper>
+                {children}
+                {badgeDot}
+            </span>
+        );
+    }
+
+    return badgeDot;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -0,0 +1,25 @@
+import { BadgeDotProps } from '.';
+import { Avatar } from '-/components/Avatar';
+import { Button } from '-/components/Button';
+import { ComponentExample } from '-/utils/demo';
+
+export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                {props.outline === true ? (
+                    <Button label="Button" size="large" />
+                ) : (
+                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                )}
+            </Component>
+        );
+    },
+    sections: [],
+    variants: {
+        outline: { size: { options: [6, 8, 10, 12] } },
+    },
+};

package/src/components/BadgeDot/badge-dot.scss

@@ -0,0 +1,26 @@
+[data-bspk='badge-dot'] {
+    /*! 
+    --size: is set via inline style 
+    --outline-width: is set via inline style
+    */
+
+    display: block;
+    width: var(--size, 6px);
+    height: var(--size, 6px);
+    border-radius: var(--radius-full);
+    background-color: var(--background);
+
+    &[data-color='primary'] {
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --background: var(--foreground-brand-secondary);
+    }
+
+    &[data-outline] {
+        border: var(--outline-width) solid var(--surface-neutral-t1-base);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/index.tsx

@@ -0,0 +1 @@
+export * from './BadgeDot';

package/src/components/BannerAlert/BannerAlert.tsx

@@ -4,7 +4,8 @@ import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
 
-import { ElementProps, AlertVariant, CallToActionButton } from '-';
+import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
+
 import './banner-alert.scss';
 
 export type BannerAlertProps = {
@@ -60,6 +61,10 @@ export type BannerAlertProps = {
  *             header="Error"
  *             body="There was an error processing your request."
  *             onClose={() => console.log('Alert closed')}
+ *             callToAction={{
+ *                 label = 'Click me',
+ *                 onClick = () => action('Call to action clicked!'),
+ *             }}
  *         />;
  *     }
  *
@@ -69,9 +74,9 @@ export type BannerAlertProps = {
  *
  *
  * @name BannerAlert
- * @phase DesignReview
+ * @phase UXReview
  */
-function BannerAlert({
+export function BannerAlert({
     variant = 'informational',
     onClose,
     header,
@@ -80,7 +85,7 @@ function BannerAlert({
     elevated = false,
 }: ElementProps<BannerAlertProps, 'div'>) {
     return (
-        <article data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant}>
+        <div data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant} role="alert">
             <div data-icon-bar>
                 {variant === 'error' && <SvgErrorFill />}
                 {variant === 'informational' && <SvgInfoFill />}
@@ -105,12 +110,8 @@ function BannerAlert({
                     )}
                 </div>
             </div>
-        </article>
+        </div>
     );
 }
 
-BannerAlert.bspkName = 'BannerAlert';
-
-export { BannerAlert };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BannerAlert/BannerAlertExample.tsx

@@ -1,16 +1,15 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { BannerAlertProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
-    render: ({ props, context, Component }) => {
+    render: ({ props, variant, Component }) => {
         let nextHeader = props.header || 'This is a banner alert';
-        if (context?.variantName === 'variant') {
-            if (context?.variantValue === 'informational') nextHeader = 'This is informational banner';
-            if (context?.variantValue === 'success') nextHeader = 'This is success banner';
-            if (context?.variantValue === 'warning') nextHeader = 'This is warning banner';
-            if (context?.variantValue === 'error') nextHeader = 'This is error banner';
+        if (variant && variant.name === 'variant') {
+            if (variant.value === 'informational') nextHeader = 'This is informational banner';
+            if (variant.value === 'success') nextHeader = 'This is success banner';
+            if (variant.value === 'warning') nextHeader = 'This is warning banner';
+            if (variant.value === 'error') nextHeader = 'This is error banner';
         }
         return <Component {...props} header={nextHeader} />;
     },

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-multi-comp */ import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
 
-import { CommonProps } from '-';
 import { Button } from '-/components/Button';
 import { Link } from '-/components/Link';
 import { ListItem } from '-/components/ListItem';
@@ -9,14 +8,17 @@ import { Menu } from '-/components/Menu';
 import { Txt } from '-/components/Txt';
 import { useCombobox } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
+import { CommonProps } from '-/types/common';
+
 import './breadcrumb.scss';
+import '-/components/ListItem/list-item.scss';
 
 export type BreadcrumbItem = {
     /**
      * The label of the breadcrumb item.
      *
      * @example
-     *     'Page 1';
+     *     Page 1
      *
      * @required
      */
@@ -25,7 +27,7 @@ export type BreadcrumbItem = {
      * The href of the breadcrumb item.
      *
      * @example
-     *     'https://bspk.anywhere.re';
+     *     https://bspk.anywhere.re
      *
      * @required
      */
@@ -59,8 +61,6 @@ export type BreadcrumbProps = CommonProps<'id'> & {
     items: BreadcrumbItem[];
 };
 
-const BreadcrumbDivider = () => <SvgChevronRight aria-hidden={true} />;
-
 /**
  * Used to indicate the current page's location within a navigational hierarchy.
  *
@@ -87,9 +87,9 @@ const BreadcrumbDivider = () => <SvgChevronRight aria-hidden={true} />;
  *     }
  *
  * @name Breadcrumb
- * @phase DesignReview
+ * @phase UXReview
  */
-function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
+export function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
     const id = useId(propId);
     const items = Array.isArray(itemsProp) ? itemsProp : [];
 
@@ -106,15 +106,15 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
             <ol>
                 <li>
                     <Link href={items[0].href} label={items[0].label} />
-                    <BreadcrumbDivider />
+                    <SvgChevronRight aria-hidden />
                 </li>
                 {items.length > 5 ? (
                     <li>
                         <Button
                             icon={<SvgMoreHoriz />}
+                            iconOnly
                             innerRef={elements.setReference}
                             label={`Access to ${middleItems.length} pages`}
-                            showLabel={false}
                             size="small"
                             toolTip={`${middleItems.length} pages`}
                             variant="tertiary"
@@ -123,8 +123,10 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
                         {isOpen && (
                             <Menu
                                 innerRef={elements.setFloating}
-                                itemDisplayCount={false}
+                                itemCount={middleItems.length}
+                                itemDisplayCount={middleItems.length <= 10 ? middleItems.length : 10}
                                 {...menuProps}
+                                role="navigation"
                                 style={{
                                     ...menuProps.style,
                                     width: '200px',
@@ -140,13 +142,13 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
                                 ))}
                             </Menu>
                         )}
-                        <BreadcrumbDivider />
+                        <SvgChevronRight aria-hidden />
                     </li>
                 ) : (
                     middleItems.map((item, idx) => (
                         <li key={`Breadcrumb-${idx}`}>
                             <Link {...item} />
-                            <BreadcrumbDivider />
+                            <SvgChevronRight aria-hidden />
                         </li>
                     ))
                 )}
@@ -158,8 +160,4 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
     );
 }
 
-Breadcrumb.bspkName = 'Breadcrumb';
-
-export { Breadcrumb };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Breadcrumb/BreadcrumbExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { BreadcrumbProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
     presets: [
@@ -88,5 +87,72 @@ export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
                 ],
             },
         },
+        {
+            label: 'NOT recommended',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        href: '#link-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        href: '#link-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        href: '#link-5',
+                    },
+                    {
+                        label: 'Item 6',
+                        href: '#link-6',
+                    },
+                    {
+                        label: 'Item 7',
+                        href: '#link-7',
+                    },
+                    {
+                        label: 'Item 8',
+                        href: '#link-8',
+                    },
+                    {
+                        label: 'Item 9',
+                        href: '#link-9',
+                    },
+                    {
+                        label: 'Item 10',
+                        href: '#link-10',
+                    },
+                    {
+                        label: 'Item 11',
+                        href: '#link-11',
+                    },
+                    {
+                        label: 'Item 12',
+                        href: '#link-12',
+                    },
+                    {
+                        label: 'Item 13',
+                        href: '#link-13',
+                    },
+                    {
+                        label: 'Item 14',
+                        href: '#link-14',
+                    },
+                    {
+                        label: 'Item 15',
+                        href: '#link-15',
+                    },
+                ],
+            },
+        },
     ],
 };

package/src/components/Button/Button.tsx

@@ -1,14 +1,13 @@
-import { ElementType, ReactNode, isValidElement } from 'react';
+import { AriaAttributes, ElementType, ReactNode, isValidElement } from 'react';
+
+import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
-import { ButtonSize, CommonProps, ElementProps, SetRef } from '-';
-import { Tooltip } from '-/components/Tooltip';
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
 import './button.scss';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -22,11 +21,14 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     icon?: ReactNode;
     /**
-     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
+     * and as the aria-label prop.
+     *
+     * Ignored if `icon` is not provided.
      *
-     * @default true
+     * @default false
      */
-    showLabel?: boolean;
+    iconOnly?: boolean;
     /**
      * The element type to render as.
      *
@@ -92,9 +94,11 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element {
+export function Button<As extends ElementType = 'button'>(
+    props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
+): JSX.Element {
     const {
         size = 'medium',
         variant = 'primary',
@@ -104,60 +108,71 @@ function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonPro
         disabled = false,
         label: labelProp,
         icon,
-        // showLabel: showLabelProp = true,
-        showLabel = true,
+        iconOnly: iconOnlyProp = false,
         toolTip: toolTipProp,
         children,
         innerRef,
+        owner,
         ...containerProps
     } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
 
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
+    // ignore iconOnly if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
+    // if toolTip label is not provided and iconOnly is true, toolTip should be label
+    const toolTip = toolTipProp || (iconOnly ? label : undefined);
 
-    const button = (
+    const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...containerProps}
+            aria-describedby={triggerProps['aria-describedby'] || containerProps['aria-describedby']}
             aria-label={label}
             data-bspk="button"
+            data-bspk-owner={owner || undefined}
             data-destructive={destructive || undefined}
             data-size={size}
             data-touch-target-parent
             data-variant={variant}
             data-width={width}
             disabled={disabled || undefined}
+            onFocus={(e) => {
+                triggerProps.onFocus?.();
+                containerProps.onFocus?.(e);
+            }}
+            onMouseLeave={(e) => {
+                triggerProps.onMouseLeave?.();
+                containerProps.onMouseLeave?.(e);
+            }}
+            onMouseOver={(e) => {
+                triggerProps.onMouseOver?.();
+                containerProps.onMouseOver?.(e);
+            }}
             ref={innerRef}
         >
             {children && typeof children !== 'string' ? (
                 children
             ) : (
                 <>
-                    {!!icon && isValidElement(icon) && <span data-button-icon>{icon}</span>}
-                    {!hideLabel && <span data-button-label>{label}</span>}
+                    {!!icon && isValidElement(icon) && (
+                        <span aria-hidden={true} data-button-icon>
+                            {icon}
+                        </span>
+                    )}
+                    {!iconOnly && <span data-button-label>{label}</span>}
                 </>
             )}
             <span data-touch-target />
         </As>
     );
 
-    if (toolTip) {
+    if (toolTip)
         return (
             <Tooltip label={toolTip} placement="top">
                 {button}
             </Tooltip>
         );
-    }
 
-    return button;
+    return button({});
 }
 
-Button.bspkName = 'Button';
-
-export { Button };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Button/ButtonExample.tsx

@@ -1,6 +1,6 @@
-import { ComponentExample } from '-/utils/demo';
-
+import { SvgPerson } from '@bspk/icons/Person';
 import { ButtonProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ButtonExample: ComponentExample<ButtonProps> = {
     presets: [
@@ -9,6 +9,7 @@ export const ButtonExample: ComponentExample<ButtonProps> = {
             propState: {
                 icon: 'Add',
                 label: 'Add',
+                iconOnly: false,
             },
         },
         {
@@ -16,15 +17,19 @@ export const ButtonExample: ComponentExample<ButtonProps> = {
             propState: {
                 label: 'Add',
                 icon: undefined,
+                iconOnly: false,
             },
         },
         {
             label: 'Icon only',
             propState: {
-                showLabel: false,
+                iconOnly: true,
                 icon: 'Add',
                 label: 'Add',
             },
         },
     ],
+    variants: {
+        iconOnly: () => ({ icon: <SvgPerson />, label: 'Person' }),
+    },
 };

package/src/components/Button/button.scss

@@ -109,7 +109,7 @@
     &[data-variant='primary'] {
         --primary-background: var(--surface-brand-primary);
 
-        background: linear-gradient(var(--primary-background), var(--primary-background));
+        background-color: var(--primary-background);
         color: var(--foreground-brand-on-primary);
         border-radius: var(--radius-sm);