@bspk/ui 1.3.8 → 1.3.10

package/dist/utils/createCustomEvent.d.ts

@@ -0,0 +1,17 @@
+export type CustomEventDetail = Array<CustomEventDetail> | Function | boolean | number | string | {
+    [key: string]: CustomEventDetail;
+} | null | undefined;
+export type CustomEventHandler<TDetail extends CustomEventDetail> = (detail: TDetail) => void;
+/**
+ * Like React.createContext but for custom events using the DOM's CustomEvent system.
+ *
+ * This allows for communication between components without using React.Context, which can cause unnecessary re-renders.
+ *
+ * This generator ensures only safe detail types are used. !important;
+ */
+export declare function createCustomEvent<TDetail extends CustomEventDetail>(
+/** The name of the custom event to create. Prefix with 'bspk-' to avoid conflicts. */
+eventName: string): {
+    send(detail: TDetail): void;
+    useEventListener(listener: CustomEventHandler<TDetail>): void;
+};

package/dist/utils/createCustomEvent.js

@@ -0,0 +1,21 @@
+import { useEventListener } from '../hooks/useAddEventListener';
+/**
+ * Like React.createContext but for custom events using the DOM's CustomEvent system.
+ *
+ * This allows for communication between components without using React.Context, which can cause unnecessary re-renders.
+ *
+ * This generator ensures only safe detail types are used. !important;
+ */
+export function createCustomEvent(
+/** The name of the custom event to create. Prefix with 'bspk-' to avoid conflicts. */
+eventName) {
+    return {
+        send(detail) {
+            document.dispatchEvent(new CustomEvent(eventName, { detail }));
+        },
+        useEventListener(listener) {
+            useEventListener(eventName, (event) => listener(event.detail), document);
+        },
+    };
+}
+//# sourceMappingURL=createCustomEvent.js.map

package/dist/utils/createCustomEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCustomEvent.js","sourceRoot":"","sources":["../../src/utils/createCustomEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAe/D;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB;AAC7B,sFAAsF;AACtF,SAAiB;IAEjB,OAAO;QACH,IAAI,CAAC,MAAe;YAChB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAU,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC;QACD,gBAAgB,CAAC,QAAqC;YAClD,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAE,KAA8B,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;QACvG,CAAC;KACJ,CAAC;AACN,CAAC"}

package/dist/utils/createExampleChildElement.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
 import { SvgDiamond } from '@bspk/icons/Diamond';
 import { Avatar } from '../components/Avatar';
+import { Button } from '../components/Button';
 import { Checkbox } from '../components/Checkbox';
 import { Img } from '../components/Img';
-import { ListItem } from '../components/ListItem';
 import { Radio } from '../components/Radio';
 import { Switch } from '../components/Switch';
 import { Tag } from '../components/Tag';
@@ -29,9 +29,9 @@ export function createExampleChildElement({ exampleState, name, setState, action
             componentName,
         };
     }
-    if (componentName === 'ListItemButton')
+    if (componentName === 'Button')
         return {
-            element: (_jsx(ListItem.Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') })),
+            element: (_jsx(Button, { icon: _jsx(SvgContentCopy, {}), label: "LI Button", onClick: () => action('ListItem button clicked') })),
             componentName,
         };
     if (componentName === 'Img')

package/dist/utils/createExampleChildElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"createExampleChildElement.js","sourceRoot":"","sources":["../../src/utils/createExampleChildElement.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"createExampleChildElement.js","sourceRoot":"","sources":["../../src/utils/createExampleChildElement.tsx"],"names":[],"mappings":"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"}

package/dist/utils/demo.d.ts

@@ -1,20 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AlertVariant, DataProps } from '-/types/common';
-import { ComponentMeta } from '-/types/meta';
-export type TypeProperty = {
-    name: string;
-    description?: string;
-    type?: string[] | string;
-    default?: unknown;
-    required?: boolean;
-    options?: number[] | string[];
-    variants?: string[];
-    references?: string[];
-    minimum?: number;
-    maximum?: number;
-    example?: string;
-    exampleType?: string;
-};
+import { ComponentMeta, TypeProperty } from '-/types/meta';
 export type DemoAction = (message: string, variant?: AlertVariant) => void;
 export type DemoSetState<Props = Record<string, unknown>> = (next: Partial<Props> | ((prev: Props) => Partial<Props>)) => void;
 export type TypePropertyDemo = Omit<TypeProperty, 'example'> & {
@@ -45,8 +31,18 @@ export type ComponentVariantOverride<Props> = {
         options: Props[K][];
     };
 };
+export type ComponentPageSection<Props = Record<string, unknown>> = {
+    title: string;
+    content: (params: {
+        Component?: React.ComponentType<Props>;
+        props: Props;
+        CodeExample: CodeExample;
+        Syntax: Syntax;
+    }) => React.ReactNode;
+    location?: 'afterDemo' | 'beforeDemo';
+};
 export type ComponentVariantOverrides<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
-    [Key in PropName]?: ComponentVariantOverride<Props> | false | ((props: Props) => ComponentVariantOverride<Props>);
+    [Key in PropName]?: ComponentVariantOverride<Props> | false;
 };
 export type ComponentExample<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
     /**
@@ -91,16 +87,7 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
      */
     disableProps?: PropName[] | true;
     /** The sections of the example. */
-    sections?: {
-        title: string;
-        content: (params: {
-            Component: React.ComponentType<Props>;
-            props: Props;
-            CodeExample: CodeExample;
-            Syntax: Syntax;
-        }) => React.ReactNode;
-        location?: 'afterDemo' | 'beforeDemo';
-    }[];
+    sections?: ComponentPageSection<Props>[];
 };
 export type Syntax = (params: {
     code: string;
@@ -125,6 +112,11 @@ export type ComponentExampleFn<Props = Record<string, unknown>> = (params: {
 }) => ComponentExample<Props>;
 export type OnHandlers = `on${string}`;
 export type Preset<Props> = {
+    /**
+     * A description of the design pattern this preset demonstrates. When applied, it showcases the specific use case or
+     * behavior of the component.
+     */
+    designPattern?: string;
     /** The name of the preset. This is used to display the preset in the UI. */
     label: string;
     /** The props of the component. This is used to set props of the component. These values can't be changed in the UI. */

package/dist/utils/demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAiKvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/utils/demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AA8JvD,MAAM,UAAU,SAAS,CAAC,SAAiB,KAAK;IAC5C,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AACrE,CAAC"}

package/meta.ts

@@ -332,17 +332,22 @@ function generateTypes() {
             ? context.componentFile?.jsDocs?.find(({ id }) => id === kebabCase(definition.description!))
             : undefined;
 
+        const type = definition.type?.toString();
+
+        const arrayType = type?.match(/Array<(.+)>/)?.[1];
+
         const next: TypeProperty = {
             name,
             required: required?.includes(name),
             description: jsDoc?.description || definition.description,
             default: definition.default === 'undefined' ? undefined : definition.default,
-            type: definition.type?.toString(),
+            type,
             exampleType: jsDoc?.exampleType,
             minimum: definition.minimum,
             maximum: definition.maximum,
             options: jsDoc?.options?.split(',').map((o) => o.trim()),
             example: jsDoc?.example,
+            arrayType,
         };
 
         if (next.name.match(/^on[A-Z]/)) next.type = 'function';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.8",
+    "version": "1.3.10",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 import './accordion.scss';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
@@ -68,9 +69,25 @@ export type AccordionProps = {
  * @example
  *     import { Accordion } from '@bspk/ui/Accordion';
  *
- *     function Example() {
- *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
- *     }
+ *     <Accordion
+ *         singleOpen={true}
+ *         items={[
+ *             {
+ *                 id: 1,
+ *                 title: 'Lawrence Welk',
+ *                 subtitle: 'The Champagne Music Maker',
+ *                 children:
+ *                     'Lawrence Welk was an American accordionist, bandleader, and television impresario, who hosted The Lawrence Welk Show from 1951 to 1982.',
+ *             },
+ *             {
+ *                 id: 2,
+ *                 title: 'Myron Floren',
+ *                 subtitle: 'The Happy Norwegian',
+ *                 children:
+ *                     'Myron Floren was an American accordionist best known as the featured accordionist on The Lawrence Welk Show.',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name Accordion
  * @phase UXReview

package/src/components/Avatar/Avatar.tsx

@@ -85,21 +85,20 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *
  * @example
  *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 color="blue"
- *                 icon={<SvgPerson />}
- *                 image="/avatar-01.png"
- *                 initials="AR"
- *                 name="Andre Giant"
- *                 showTooltip
- *                 size="large"
- *             />
- *         );
- *     }
+ *     <Avatar
+ *         color="blue"
+ *         showIcon
+ *         image="/avatar-01.png"
+ *         initials="AR"
+ *         name="Andre Giant"
+ *         hideTooltip
+ *         size="large"
+ *         disabled={false}
+ *         onClick={() => action('Launch avatar popover')}
+ *         showIcon={false}
+ *         hideTooltip={true}
+ *     />;
  *
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -42,7 +42,7 @@ export type AvatarGroupProps = CommonProps<'style'> & {
     /**
      * The variant of the avatar group.
      *
-     * @default auto
+     * @default stacked
      */
     variant?: 'spread' | 'stacked';
 };
@@ -53,22 +53,39 @@ export type AvatarGroupProps = CommonProps<'style'> & {
  * @example
  *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
  *
- *     function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                     { name: 'Princess Buttercup' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <AvatarGroup
+ *         style={{ marginLeft: 'var(--spacing-sizing-12)' }}
+ *         size="medium"
+ *         max={4}
+ *         variant="stacked"
+ *         items={[
+ *             {
+ *                 name: 'Alice Johnson',
+ *                 image: '/avatar-01.png',
+ *             },
+ *             {
+ *                 name: 'Bob Smith',
+ *                 image: '/avatar-02.png',
+ *             },
+ *             {
+ *                 name: 'Charlie Brown',
+ *                 image: '/avatar-03.png',
+ *             },
+ *             {
+ *                 name: 'Diana Prince',
+ *                 image: '/avatar-04.png',
+ *             },
+ *             {
+ *                 name: 'Ethan Hunt',
+ *                 image: '/avatar-05.png',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name AvatarGroup
  * @phase UXReview
  */
-export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'spread', style }: AvatarGroupProps) {
+export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'stacked', style }: AvatarGroupProps) {
     const max = maxProp > items.length ? items.length : maxProp;
     const overflowItems = items.slice(max);
 

package/src/components/Badge/Badge.tsx

@@ -49,9 +49,7 @@ export type BadgeProps = {
  * @example
  *     import { Badge } from '@bspk/ui/Badge';
  *
- *     function Example() {
- *         return <Badge count={5} size="small" color="primary" />;
- *     }
+ *     <Badge count={5} size="small" color="primary" surfaceBorder={true} />;
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *

package/src/components/BadgeDot/BadgeDot.tsx

@@ -44,16 +44,18 @@ export type BadgeDotProps = {
  * @example
  *     import { BadgeDot } from '@bspk/ui/BadgeDot';
  *
- *     function Example() {
- *         return <BadgeDot color="primary" />;
- *     }
+ *     <BadgeDot color="secondary" size={12} outline={true}>
+ *         <Button>Messages</Button>
+ *     </BadgeDot>;
  *
  * @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) {
+export function BadgeDot({ children, color = 'primary', size: sizeProp = 6, outline = false }: BadgeDotProps) {
+    const size = sizeProp in OUTLINE_WIDTHS ? sizeProp : 6;
+
     const badgeDot = (
         <sup
             data-attachment={!!children || undefined}

package/src/components/BannerAlert/BannerAlert.tsx

@@ -54,18 +54,17 @@ export type BannerAlertProps = {
  * @example
  *     import { BannerAlert } from '@bspk/ui/BannerAlert';
  *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             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!'),
- *             }}
- *         />;
- *     }
+ *     <BannerAlert
+ *         elevated={true}
+ *         variant="success"
+ *         header="Success"
+ *         body="Your request was processed successfully."
+ *         onClose={() => sendSnackbar('Alert closed')}
+ *         callToAction={{
+ *             label: 'Click me',
+ *             onClick: () => action('Call to action clicked!'),
+ *         }}
+ *     />;
  *
  * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
  *

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -23,13 +23,16 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState<string>('1');
  *
  *         return (
  *             <BottomNavigation
+ *                 variant="elevated"
+ *                 mode="inline"
+ *                 label="Bottom Navigation Example"
  *                 value={value}
- *                 onChange={onChange}
+ *                 onChange={(next) => setValue(next)}
  *                 options={[
  *                     {
  *                         value: '1',
@@ -46,7 +49,7 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *                 ]}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name BottomNavigation
  * @phase Dev

package/src/components/BottomNavigation/BottomNavigationExample.tsx

@@ -1,13 +1,3 @@
-import { SvgCloud } from '@bspk/icons/Cloud';
-import { SvgCloudFill } from '@bspk/icons/CloudFill';
-import { SvgEvent } from '@bspk/icons/Event';
-import { SvgEventFill } from '@bspk/icons/EventFill';
-import { SvgPerson } from '@bspk/icons/Person';
-import { SvgPersonFill } from '@bspk/icons/PersonFill';
-import { SvgSettings } from '@bspk/icons/Settings';
-import { SvgSettingsFill } from '@bspk/icons/SettingsFill';
-import { SvgSmartphone } from '@bspk/icons/Smartphone';
-import { SvgSmartphoneFill } from '@bspk/icons/SmartphoneFill';
 import { BottomNavigationProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
@@ -19,20 +9,20 @@ export const presets: Preset<BottomNavigationProps>[] = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
                     label: 'Item 3',
-                    icon: <SvgSmartphone />,
-                    iconSelected: <SvgSmartphoneFill />,
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
             ],
             value: '1',
@@ -45,33 +35,33 @@ export const presets: Preset<BottomNavigationProps>[] = [
             options: [
                 {
                     value: '1',
-                    label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    label: 'Item 1 With Longer Label',
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
-                    label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    label: 'Item 2 With Longer Label',
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
-                    label: 'Item 3',
-                    icon: <SvgSmartphone />,
-                    iconSelected: <SvgSmartphoneFill />,
+                    label: 'Item 3 With Longer Label',
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
                 {
                     value: '4',
-                    label: 'Item 4',
-                    icon: <SvgEvent />,
-                    iconSelected: <SvgEventFill />,
+                    label: 'Item 4 With Longer Label',
+                    icon: 'Event',
+                    iconSelected: 'EventFill',
                 },
                 {
                     value: '5',
-                    label: 'Item 5',
-                    icon: <SvgPerson />,
-                    iconSelected: <SvgPersonFill />,
+                    label: 'Item 5 With Longer Label',
+                    icon: 'Person',
+                    iconSelected: 'PersonFill',
                 },
             ],
             value: '1',
@@ -85,14 +75,14 @@ export const presets: Preset<BottomNavigationProps>[] = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: <SvgSettings />,
-                    iconSelected: <SvgSettingsFill />,
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: <SvgCloud />,
-                    iconSelected: <SvgCloudFill />,
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                     disabled: true,
                 },
             ],
@@ -111,7 +101,12 @@ export const BottomNavigationExample: ComponentExample<BottomNavigationProps> =
     },
     defaultState: {
         value: '1',
-        options: presets[0].propState.options,
+        options: presets[0].propState.options.map((option) => ({
+            ...option,
+            icon: undefined,
+            iconSelected: undefined,
+        })),
+        label: 'Single Icon',
     },
     disableProps: [],
     presets,

package/src/components/BottomNavigation/bottom-navigation.scss

@@ -4,6 +4,7 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
     box-sizing: border-box;
     background-color: var(--background-base);
     height: var(--spacing-sizing-13);
+    gap: var(--spacing-sizing-02);
 
     &[data-variant='elevated'] {
         box-shadow: var(--drop-shadow-north);
@@ -20,7 +21,7 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
         color: var(--foreground-neutral-on-surface-variant-02);
         font: var(--labels-x-small);
         flex-direction: column;
-        gap: 0;
+        justify-content: center;
         overflow: hidden;
 
         &[data-pseudo='focus'] > &,
@@ -59,6 +60,14 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
         }
     }
 
+    li:first-child {
+        padding-left: var(--spacing-sizing-02);
+    }
+
+    li:last-child {
+        padding-right: var(--spacing-sizing-02);
+    }
+
     &[data-mode='fixed'] {
         position: fixed;
         bottom: 0;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -41,24 +41,23 @@ export type BreadcrumbProps = CommonProps<'id'> &
  * @example
  *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
  *
- *     function Example() {
- *         return (
- *             <Breadcrumb
- *                 items={[
- *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <Breadcrumb
+ *         id="example-breadcrumb"
+ *         scrollLimit={5}
+ *         items={[
+ *             { label: 'Brioche', href: '#brioche' },
+ *             { label: 'Whole Wheat', href: '#whole-wheat' },
+ *             { label: 'Sourdough', href: '#sourdough' },
+ *             { label: 'Rye', href: '#rye' },
+ *             { label: 'Multigrain', href: '#multigrain' },
+ *             { label: 'Baguette', href: '#baguette' },
+ *             { label: 'Focaccia', href: '#focaccia' },
+ *             { label: 'Ciabatta', href: '#ciabatta' },
+ *             { label: 'Pita', href: '#pita' },
+ *             { label: 'Naan', href: '#naan' },
+ *             { label: 'Flatbread', href: '#flatbread' },
+ *         ]}
+ *     />;
  *
  * @name Breadcrumb
  * @phase UXReview

package/src/components/Breadcrumb/BreadcrumbDropdown.tsx

@@ -37,6 +37,12 @@ export type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
     id: string;
 };
 
+/**
+ * The BreadcrumbDropdown component is used to display a dropdown menu within a breadcrumb navigation.
+ *
+ * @name BreadcrumbDropdown
+ * @parent Breadcrumb
+ */
 export function BreadcrumbDropdown({ items: itemsProp, id, scrollLimit }: BreadcrumbDropdownProps) {
     const menuId = `${id}-menu`;