@bspk/ui 1.1.34 → 1.3.0

package/dist/components/ListItem/ListItemExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,8FAA8F;YACrG,OAAO,EAAE,mDAAmD;YAC5D,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,QAAQ;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAsC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;QACtB,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,IAAI,EAAE,GAAgB,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC;QAExC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,EAAE,GAAG,OAAO,CAAC;QAE7G,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAI,CAAC;IACjG,CAAC;IACD,OAAO;CACV,CAAC,CAAC"}

package/dist/components/ListItem/list-item.css

@@ -1,22 +1,19 @@
-body[data-bspk] a[data-bspk=list-item] {
-  color: unset !important;
-  text-decoration: !important;
-  font: !important;
-}
-
 [data-bspk=list-item] {
-  display: block;
+  display: flex;
   width: 100%;
-  padding: 0 var(--spacing-sizing-02);
-  background: unset;
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
+  height: 100%;
+  overflow: hidden;
+  min-height: var(--list-item-height);
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  padding: var(--spacing-sizing-02);
+  justify-items: stretch;
   border: unset;
   margin: unset;
   text-decoration: unset;
-  user-select: none;
-  color: var(--foreground-neutral-on-surface);
-}
-[data-bspk=list-item]:is(a), [data-bspk=list-item]:is(button), [data-bspk=list-item][onclick], [data-bspk=list-item][role=button] {
-  cursor: pointer;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
@@ -24,27 +21,12 @@ body[data-bspk] a[data-bspk=list-item] {
 [data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
   border-color: transparent;
 }
-[data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover {
+[data-bspk=list-item][data-action][data-active], [data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover, [data-bspk=list-item]:is(label)[data-active], [data-pseudo=hover] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):hover {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action][data-active], [data-bspk=list-item][data-action]:active {
+[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:active, [data-pseudo=active] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=list-item][aria-disabled] [data-text],
-[data-bspk=list-item][aria-disabled] [data-sub-text] {
-  color: var(--foreground-neutral-disabled-on-surface);
-}
-[data-bspk=list-item] [data-inner] {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  min-height: var(--list-item-height);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-sizing-03);
-  padding: var(--spacing-sizing-02) 0;
-  justify-items: stretch;
-}
 [data-bspk=list-item] [data-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -79,10 +61,14 @@ body[data-bspk] a[data-bspk=list-item] {
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
+[data-bspk=list-item][aria-disabled] [data-text],
+[data-bspk=list-item][aria-disabled] [data-sub-text] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
 [data-bspk=list-item] [data-trailing]:has(input) {
   pointer-events: none;
 }
-[data-bspk=list-item] [data-component=Img] > img {
+[data-bspk=list-item] img {
   height: 36px;
   width: 36px;
   max-width: unset;
@@ -91,5 +77,8 @@ body[data-bspk] a[data-bspk=list-item] {
   border-bottom: 0;
   gap: var(--spacing-sizing-02);
 }
+[data-bspk=list-item][aria-selected=true] {
+  background-color: var(--surface-brand-primary-highlight);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ListItem/list-item.css.js

@@ -1,25 +1,22 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item] {
-  color: unset !important;
-  text-decoration: !important;
-  font: !important;
-}
-
-[data-bspk=list-item] {
-  display: block;
+style.appendChild(document.createTextNode(`[data-bspk=list-item] {
+  display: flex;
   width: 100%;
-  padding: 0 var(--spacing-sizing-02);
-  background: unset;
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
+  height: 100%;
+  overflow: hidden;
+  min-height: var(--list-item-height);
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  padding: var(--spacing-sizing-02);
+  justify-items: stretch;
   border: unset;
   margin: unset;
   text-decoration: unset;
-  user-select: none;
-  color: var(--foreground-neutral-on-surface);
-}
-[data-bspk=list-item]:is(a), [data-bspk=list-item]:is(button), [data-bspk=list-item][onclick], [data-bspk=list-item][role=button] {
-  cursor: pointer;
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
@@ -27,27 +24,12 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 [data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
   border-color: transparent;
 }
-[data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover {
+[data-bspk=list-item][data-action][data-active], [data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover, [data-bspk=list-item]:is(label)[data-active], [data-pseudo=hover] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):hover {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action][data-active], [data-bspk=list-item][data-action]:active {
+[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:active, [data-pseudo=active] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=list-item][aria-disabled] [data-text],
-[data-bspk=list-item][aria-disabled] [data-sub-text] {
-  color: var(--foreground-neutral-disabled-on-surface);
-}
-[data-bspk=list-item] [data-inner] {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  min-height: var(--list-item-height);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-sizing-03);
-  padding: var(--spacing-sizing-02) 0;
-  justify-items: stretch;
-}
 [data-bspk=list-item] [data-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -82,10 +64,14 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
+[data-bspk=list-item][aria-disabled] [data-text],
+[data-bspk=list-item][aria-disabled] [data-sub-text] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
 [data-bspk=list-item] [data-trailing]:has(input) {
   pointer-events: none;
 }
-[data-bspk=list-item] [data-component=Img] > img {
+[data-bspk=list-item] img {
   height: 36px;
   width: 36px;
   max-width: unset;
@@ -94,8 +80,10 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
   border-bottom: 0;
   gap: var(--spacing-sizing-02);
 }
+[data-bspk=list-item][aria-selected=true] {
+  background-color: var(--surface-brand-primary-highlight);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/ListItemMenu/ListItemMenu.d.ts

@@ -0,0 +1,146 @@
+import { AriaAttributes, CSSProperties, HTMLAttributes, ReactNode, KeyboardEvent, MouseEvent, Dispatch, SetStateAction } from 'react';
+import { ListItemProps } from '-/components/ListItem';
+import { MenuProps } from '-/components/Menu';
+import { ArrowKeyNavigationCallbackParams } from '-/hooks/useArrowNavigation';
+import { UseFloatingProps } from '-/hooks/useFloating';
+import { CommonProps, SetRef } from '-/types/common';
+export type MenuListItem = Omit<ListItemProps, 'id'> & {
+    id: string;
+};
+export type ListItemMenuRole = keyof typeof LIST_ITEM_ROLES;
+declare const LIST_ITEM_ROLES: {
+    readonly group: undefined;
+    readonly listbox: "option";
+    readonly menu: "menuitem";
+    readonly tree: "treeitem";
+};
+/** Props for the toggle element that opens the ListItemMenu. */
+export type ToggleProps = Pick<AriaAttributes, 'aria-activedescendant' | 'aria-controls' | 'aria-disabled' | 'aria-errormessage' | 'aria-expanded' | 'aria-haspopup' | 'aria-invalid' | 'aria-owns' | 'aria-readonly'> & Pick<HTMLAttributes<HTMLElement>, 'role' | 'tabIndex'> & {
+    /** Event handler for the toggle element that change the menu state. */
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    /** Event handler for keydown events on the toggle element that change the menu state. */
+    onKeyDownCapture: (event: KeyboardEvent) => void;
+};
+/** Props for internal toggle functionality provided to the children render prop. */
+export type InternalToggleProps = {
+    /**
+     * Sets a ref to the toggle element that opens the ListItemMenu.
+     *
+     * Used in determining the position of the floating menu.
+     *
+     * May also be used to set the menu width if `width="reference"` is provided in the ListItemMenu props.
+     */
+    setRef: SetRef<HTMLElement | null>;
+    /**
+     * Function to toggle the menu open or closed.
+     *
+     * If `force` is provided as a boolean, it will set the menu to that state (true = open, false = closed). If `force`
+     * is not provided, it will toggle the current state.
+     */
+    toggleMenu: (force?: boolean) => void;
+    /** The number of items in the menu. */
+    itemCount: number;
+    /** Whether or not the menu is currently open. */
+    show?: boolean;
+    /** The reference element the menu is anchored to. */
+    reference: HTMLElement | null;
+};
+export type ListItemMenuProps = CommonProps<'disabled' | 'readOnly'> & Pick<MenuProps, 'id' | 'label' | 'owner'> & Pick<UseFloatingProps, 'offsetOptions' | 'placement'> & {
+    /**
+     * The children to render inside the menu.
+     *
+     * @required
+     */
+    children: (toggleProps: ToggleProps, internal: InternalToggleProps) => ReactNode;
+    /**
+     * The element that the menu is anchored to.
+     *
+     * @default listbox
+     */
+    role?: ListItemMenuRole;
+    /**
+     * The width of the menu. If 'reference' is provided, the menu will match the width of the useFloating reference
+     * element.
+     *
+     * @default reference
+     */
+    width?: CSSProperties['width'] | 'reference';
+    /**
+     * The items to display in the menu as ListItems.
+     *
+     * If an item does not have an `id` property, one will be generated automatically.
+     *
+     * @required
+     */
+    items: MenuListItem[] | ((params: {
+        show?: boolean;
+    }) => MenuListItem[]);
+    /**
+     * Content to display in the floating menu element before the ListItems.
+     *
+     * If provided `scrollLimit` will be ignored.
+     */
+    leading?: ReactNode;
+    /**
+     * Content to display in the floating menu element after the ListItems.
+     *
+     * If provided `scrollLimit` will be ignored.
+     */
+    trailing?: ReactNode;
+    /** The ID of the currently active element. */
+    activeElementId?: string | null;
+    /** Optional callback fired when an item is clicked/selected. */
+    itemOnClick?: (params: {
+        event: MouseEvent;
+        currentId: string;
+        show: boolean;
+        setShow: Dispatch<SetStateAction<boolean>>;
+    }) => void;
+    /**
+     * Optional callback fired when the arrow keys are used for navigation.
+     *
+     * If the callback returns `true`, the change is accepted; if it returns `false`, the change is ignored.
+     */
+    arrowKeyNavigationCallback?: (params: ArrowKeyNavigationCallbackParams) => boolean;
+    /** Optional callback fired when the menu is closed. */
+    onClose?: () => void;
+    /** The maximum number of items to show before scrolling is enabled. */
+    scrollLimit?: number;
+    /** Remove menu from dom when closed for performance and to prevent tabbing to hidden menu items. */
+    hideWhenClosed?: boolean;
+};
+/**
+ * A floating list Item menu for displaying additional actions or options presented as ListItems in a Menu.
+ *
+ * Includes keyboard navigation and accessibility features.
+ *
+ * The menu is anchored to a reference element provided as a children function with params that include the necessary
+ * ARIA attributes and event handlers.
+ *
+ * @example
+ *     import { ListItemMenu } from '@bspk/ui/ListItemMenu';
+ *
+ *     function Example() {
+ *         return (
+ *             <ListItemMenu
+ *                 items={[{ id: '1', label: 'Item 1' }]}
+ *                 label="Example Menu"
+ *                 role="menu"
+ *                 scrollLimit={5}
+ *                 width="200px"
+ *             >
+ *                 {(toggleProps, { setRef, toggleMenu }) => (
+ *                     <button {...toggleProps} onClick={() => toggleMenu()} ref={setRef}>
+ *                         Toggle Menu
+ *                     </button>
+ *                 )}
+ *             </ListItemMenu>
+ *         );
+ *     }
+ *
+ * @name ListItemMenu
+ * @phase Utility
+ */
+export declare function ListItemMenu({ activeElementId: activeElementIdProp, children, disabled, id: idProp, items: itemsProp, label, leading: menuLeading, offsetOptions, arrowKeyNavigationCallback, itemOnClick, owner, placement, readOnly, role: containerRole, scrollLimit, trailing: menuTrailing, width: menuWidth, onClose, hideWhenClosed, ...ariaProps }: ListItemMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ListItemMenu/ListItemMenu.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, } from 'react';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
+import { useId } from '../../hooks/useId';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+const LIST_ITEM_ROLES = {
+    group: undefined,
+    listbox: 'option',
+    menu: 'menuitem',
+    tree: 'treeitem',
+};
+/**
+ * A floating list Item menu for displaying additional actions or options presented as ListItems in a Menu.
+ *
+ * Includes keyboard navigation and accessibility features.
+ *
+ * The menu is anchored to a reference element provided as a children function with params that include the necessary
+ * ARIA attributes and event handlers.
+ *
+ * @example
+ *     import { ListItemMenu } from '@bspk/ui/ListItemMenu';
+ *
+ *     function Example() {
+ *         return (
+ *             <ListItemMenu
+ *                 items={[{ id: '1', label: 'Item 1' }]}
+ *                 label="Example Menu"
+ *                 role="menu"
+ *                 scrollLimit={5}
+ *                 width="200px"
+ *             >
+ *                 {(toggleProps, { setRef, toggleMenu }) => (
+ *                     <button {...toggleProps} onClick={() => toggleMenu()} ref={setRef}>
+ *                         Toggle Menu
+ *                     </button>
+ *                 )}
+ *             </ListItemMenu>
+ *         );
+ *     }
+ *
+ * @name ListItemMenu
+ * @phase Utility
+ */
+export function ListItemMenu({ activeElementId: activeElementIdProp = null, children, disabled, id: idProp, items: itemsProp, label, leading: menuLeading, offsetOptions = 4, arrowKeyNavigationCallback, itemOnClick, owner, placement = 'bottom', readOnly, role: containerRole = 'listbox', scrollLimit, trailing: menuTrailing, width: menuWidth = 'reference', onClose, hideWhenClosed = false, ...ariaProps }) {
+    const containerId = useId(idProp);
+    const [show, setShowBase] = useState(false);
+    const items = useMemo(() => (typeof itemsProp === 'function' ? itemsProp({ show }) : itemsProp), [itemsProp, show]);
+    const setShow = (next) => {
+        if (disabled || readOnly)
+            return;
+        setShowBase((prev) => {
+            if (prev && !next) {
+                // closing
+                onClose?.();
+            }
+            if (typeof next === 'function')
+                return next(prev);
+            return next;
+        });
+    };
+    const { floatingStyles, elements, currentPlacement } = useFloating({
+        hide: !show,
+        offsetOptions,
+        placement,
+        refWidth: menuWidth === 'reference',
+        strategy: 'fixed',
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => setShow(false),
+        disabled: !show,
+    });
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.flatMap((item) => (item.disabled ? [] : item.id)),
+        callback: (params) => {
+            if (!show)
+                setShow(true);
+            if (typeof arrowKeyNavigationCallback === 'function' && arrowKeyNavigationCallback)
+                return arrowKeyNavigationCallback(params);
+            return true;
+        },
+    });
+    const tabEscape = () => {
+        setShow(false);
+        setActiveElementId(null);
+    };
+    const enterSpace = (event) => {
+        event.preventDefault();
+        if (!show) {
+            setShow(true);
+            return;
+        }
+        getElementById(activeElementId)?.click();
+    };
+    return (_jsxs(_Fragment, { children: [children({
+                'aria-disabled': disabled || undefined,
+                'aria-expanded': show,
+                'aria-haspopup': show && containerRole !== 'group' ? containerRole : undefined,
+                'aria-controls': containerId,
+                'aria-readonly': readOnly || undefined,
+                'aria-owns': containerId,
+                'aria-activedescendant': show ? activeElementId || undefined : undefined,
+                role: 'combobox',
+                tabIndex: 0,
+                onClick: (event) => {
+                    const nextShow = !show;
+                    setShow(nextShow);
+                    setActiveElementId(nextShow ? activeElementIdProp || items[0]?.id || null : null);
+                    event.preventDefault();
+                },
+                onKeyDownCapture: handleKeyDown({
+                    ...arrowKeyCallbacks,
+                    Enter: enterSpace,
+                    Space: enterSpace,
+                    Tab: tabEscape,
+                    Escape: tabEscape,
+                }),
+            }, {
+                setRef: elements.setReference,
+                toggleMenu: () => setShow(true),
+                itemCount: items.length,
+                reference: elements.reference,
+            }), (!hideWhenClosed || show) && (_jsxs(Menu, { ...ariaProps, "aria-label": label, as: "ul", "data-placement": currentPlacement, "data-scroll": !!scrollLimit && items.length > scrollLimit, id: containerId, innerRef: (node) => {
+                    elements.setFloating(node);
+                }, owner: owner, role: containerRole, style: {
+                    width: menuWidth !== 'reference' ? menuWidth : undefined,
+                    ...floatingStyles,
+                    ...scrollLimitStyle(scrollLimit, items.length),
+                }, children: [menuLeading, items.map((item, index) => {
+                        return (_jsx(ListItem, { as: "li", ...item, active: activeElementId === item.id || undefined, onClick: (event) => {
+                                elements.reference?.focus();
+                                setActiveElementId(item.id);
+                                item?.onClick?.(event);
+                                itemOnClick?.({ event, currentId: item.id, show, setShow });
+                            }, role: item.role || LIST_ITEM_ROLES[containerRole] || undefined, tabIndex: 0 }, index));
+                    }), menuTrailing] }))] }));
+}
+const scrollLimitStyle = (scrollLimitProp, itemCount) => {
+    const scrollLimit = Number(scrollLimitProp);
+    // Check:
+    // 1. scrollLimit is valid
+    // 2. itemCount is a number
+    // 3. scrollLimit is less than itemCount
+    // If any of these fail, return undefined (no scrolling)
+    if (Number.isNaN(scrollLimit) || scrollLimit <= 0 || typeof itemCount !== 'number' || scrollLimit > itemCount)
+        return {};
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: `calc(var(--list-item-height) * ${scrollLimit})`,
+        overflow: 'hidden auto',
+    };
+};
+//# sourceMappingURL=ListItemMenu.js.map

package/dist/components/ListItemMenu/ListItemMenu.js.map

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

package/dist/components/ListItemMenu/index.d.ts

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

package/dist/components/ListItemMenu/index.js

@@ -0,0 +1,2 @@
+export * from './ListItemMenu';
+//# sourceMappingURL=index.js.map

package/dist/components/ListItemMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListItemMenu/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/Menu/Menu.d.ts

@@ -1,10 +1,8 @@
-import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
 import './menu.scss';
+import { ElementType, ReactNode } from 'react';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 export declare function menuItemId(menuId: string, index: number): string;
-export declare const MIN_ITEM_COUNT = 3;
-export declare const MAX_ITEM_COUNT = 10;
-export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
+export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role'> & {
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
     /**
@@ -14,37 +12,18 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
      */
     children: ReactNode;
     /**
-     * Should the menu be rendered in a portal? This is useful for menus that need to be rendered outside of the normal
-     * DOM flow, such as dropdowns or modals.
+     * A label for the menu for screen readers.
      *
-     * @default true
+     * This is required if the role is set to "menu" or "listbox".
      */
-    portal?: boolean;
+    label?: string;
     /**
-     * The number of items to show in the menu. This is used to determine the height of the menu.
+     * The element type to render as.
      *
-     * - If set to `false`, the menu will not have a maximum height and will grow to fit its content.
-     * - If set to a number, the menu will display that many items before scrolling.
-     * - If not set or set to `undefined`, the menu will default to showing a minimum of 3 items and a maximum of 10
-     *   items.
+     * @default div
+     * @type ElementType
      */
-    itemDisplayCount?: number | false;
-    /**
-     * The number of items in the menu.
-     *
-     * This is used to determine the maximum height of the menu when `itemDisplayCount` is set to a number.
-     *
-     * @required
-     */
-    itemCount?: number;
-    /**
-     * Whether the menu is rendered as a floating element.
-     *
-     * @default true
-     */
-    floating?: boolean;
-    /** A function that is called when the user clicks outside of the menu. */
-    onOutsideClick?: () => void;
+    as?: As;
 };
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
@@ -58,16 +37,14 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
  *         return (
  *             <Menu>
  *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
  *             </Menu>
  *         );
  *     }
  *
  * @name Menu
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Menu({ innerRef, id: idProp, children, portal, itemDisplayCount: itemDisplayCountProp, itemCount, floating, onOutsideClick, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Menu {
-    var bspkName: string;
-}
-export { Menu };
+export declare function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */