@bspk/ui 1.2.0 → 1.3.0

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

@@ -6,6 +6,7 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
   width: 100%;
   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);
@@ -13,7 +14,6 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
   gap: var(--spacing-sizing-03);
   padding: var(--spacing-sizing-02);
   justify-items: stretch;
-  background: unset;
   border: unset;
   margin: unset;
   text-decoration: unset;
@@ -24,16 +24,12 @@ style.appendChild(document.createTextNode(`[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-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -68,6 +64,10 @@ style.appendChild(document.createTextNode(`[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;
 }
@@ -80,6 +80,9 @@ style.appendChild(document.createTextNode(`[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/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,9 +1,8 @@
-import { ReactNode } from 'react';
-import { PortalProps } from '-/components/Portal';
-import { CommonProps, ElementProps, SetRef } from '-/types/common';
 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 type MenuProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
+export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role'> & {
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
     /**
@@ -13,44 +12,18 @@ export type MenuProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'contain
      */
     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.
-     *
-     * @default true
-     */
-    portal?: boolean;
-    /**
-     * The number of items to show in the menu. This is used to determine the height of the menu.
-     *
-     * @default 1
-     */
-    itemDisplayCount?: number;
-    /**
-     * The number of items in the menu.
+     * A label for the menu for screen readers.
      *
-     * @default 1
+     * This is required if the role is set to "menu" or "listbox".
      */
-    itemCount?: number;
+    label?: string;
     /**
-     * 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.
-     *
-     * @required
-     */
-    onOutsideClick: () => void;
-    /**
-     * Whether or not the menu is scrollable.
-     *
-     * Setting to false will override itemDisplayCount.
+     * The element type to render as.
      *
-     * @default true
+     * @default div
+     * @type ElementType
      */
-    scroll?: boolean;
+    as?: As;
 };
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
@@ -62,7 +35,7 @@ export type MenuProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'contain
  *
  *     export function Example() {
  *         return (
- *             <Menu scroll={false}>
+ *             <Menu>
  *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
@@ -73,5 +46,5 @@ export type MenuProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'contain
  * @name Menu
  * @phase UXReview
  */
-export declare function Menu({ innerRef, id: idProp, children, portal, itemDisplayCount, itemCount, floating, onOutsideClick, owner, scroll, container, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+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 */

package/dist/components/Menu/Menu.js

@@ -1,11 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// import { ReactNode, useMemo, useRef } from 'react';
-import { useRef } from 'react';
-import { Portal } from '../Portal';
-import { useId } from '../../hooks/useId';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { cssWithVars } from '../../utils/cwv';
+import { jsx as _jsx } from "react/jsx-runtime";
 import './menu.css.js';
+import { useId } from '../../hooks/useId';
 export function menuItemId(menuId, index) {
     return `menu-${menuId}-item-${index}`;
 }
@@ -19,7 +14,7 @@ export function menuItemId(menuId, index) {
  *
  *     export function Example() {
  *         return (
- *             <Menu scroll={false}>
+ *             <Menu>
  *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
@@ -30,24 +25,9 @@ export function menuItemId(menuId, index) {
  * @name Menu
  * @phase UXReview
  */
-export function Menu({ 
-//
-innerRef, id: idProp, children, portal = true, itemDisplayCount = 1, itemCount = 1, floating = true, onOutsideClick, owner, scroll = true, container, ...props }) {
+export function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }) {
     const menuId = useId(idProp);
-    const menuElement = useRef(null);
-    const scrollDefault = scroll === true && itemCount > itemDisplayCount;
-    useOutsideClick({
-        elements: [menuElement.current],
-        callback: () => onOutsideClick?.(),
-        disabled: !onOutsideClick,
-    });
-    const menu = (_jsx(_Fragment, { children: _jsx("div", { ...props, "data-bspk": "menu", "data-bspk-owner": owner || undefined, "data-floating": floating || undefined, "data-scroll": scroll || scrollDefault || undefined, id: menuId, ref: (node) => {
-                innerRef?.(node);
-                menuElement.current = node;
-            }, style: cssWithVars({
-                ...props.style,
-                '--item-display-count': itemDisplayCount,
-            }), children: children }) }));
-    return portal ? _jsx(Portal, { container: container, children: menu }) : menu;
+    const As = as || 'div';
+    return (_jsx(As, { ...props, "aria-label": label || undefined, "data-bspk-owner": owner || undefined, "data-bspk-utility": "menu", id: menuId, ref: innerRef, children: children }));
 }
 //# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,EAAa,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAqDD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAAC;AACjB,EAAE;AACF,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,gBAAgB,GAAG,CAAC,EACpB,SAAS,GAAG,CAAC,EACb,QAAQ,GAAG,IAAI,EACf,cAAc,EACd,KAAK,EACL,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,KAAK,EACqB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,WAAW,GAAG,MAAM,CAAC,IAA6B,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,MAAM,KAAK,IAAI,IAAI,SAAS,GAAG,gBAAgB,CAAC;IAEtE,eAAe,CAAC;QACZ,QAAQ,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;QAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE;QAClC,QAAQ,EAAE,CAAC,cAAc;KAC5B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,CACT,4BACI,iBACQ,KAAK,eACC,MAAM,qBACC,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,iBACvB,MAAM,IAAI,aAAa,IAAI,SAAS,EACjD,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gBACV,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;gBACjB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,CAAC,EACD,KAAK,EAAE,WAAW,CAAC;gBACf,GAAG,KAAK,CAAC,KAAK;gBACd,sBAAsB,EAAE,gBAAgB;aAC3C,CAAC,YAED,QAAQ,GACP,GACP,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YAAG,IAAI,GAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AACzE,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AA0BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAkC;IAC/G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAEvB,OAAO,CACH,KAAC,EAAE,OACK,KAAK,gBACG,KAAK,IAAI,SAAS,qBACb,KAAK,IAAI,SAAS,uBACjB,MAAM,EACxB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

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

@@ -1,6 +1,6 @@
 import { MenuProps } from '.';
-import { ElementProps } from '-/types/common';
 import { ComponentExampleFn } from '-/utils/demo';
-export declare const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
-    'data-dark-mode': boolean;
+export declare const MenuExample: ComponentExampleFn<MenuProps & {
+    style?: unknown;
+    'data-dark-mode'?: boolean;
 }>;

package/dist/components/Menu/MenuExample.js

@@ -13,36 +13,13 @@ import { ListItem } from '../ListItem';
 import { Switch } from '../Switch';
 export const MenuExample = ({ action, }) => ({
     render: ({ props, Component, setState }) => {
-        return (_jsxs(Component, { ...props, floating: false, portal: false, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/profile2.jpg", name: "Michael Scott" }), subText: "michael.scott@email.com" }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/my-profile", label: "My profile", leading: _jsx(SvgAccountCircle, {}) }), _jsx(ListItem, { href: "#/settings", label: "Settings", leading: _jsx(SvgSettings, {}) }), _jsx(ListItem, { as: "label", label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
+        return (_jsxs(Component, { ...props, style: { padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }, children: [_jsx(ListItem, { label: "Michael Scott", leading: _jsx(Avatar, { image: "/profile2.jpg", name: "Michael Scott" }), subText: "michael.scott@email.com" }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/my-profile", label: "My profile", leading: _jsx(SvgAccountCircle, {}) }), _jsx(ListItem, { href: "#/settings", label: "Settings", leading: _jsx(SvgSettings, {}) }), _jsx(ListItem, { as: "label", label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
                             setState((prev) => ({ 'data-dark-mode': !prev['data-dark-mode'] }));
                             action('Dark mode toggled');
                         } }) }), _jsx(Divider, { inset: 2, padding: false, thickness: "light" }), _jsx(ListItem, { href: "#/guide-tutorial", label: "Guide and tutorial", leading: _jsx(SvgMenuBook, {}) }), _jsx(ListItem, { href: "#/help-center", label: "Help center", leading: _jsx(SvgHelp, {}) }), _jsx(Divider, { inset: 2, padding: true }), _jsx(ListItem, { href: "#/go-premium", label: "Go premium", leading: _jsx(SvgLicense, {}) }), _jsx(ListItem, { label: "Log out", leading: _jsx(SvgLogout, {}), onClick: () => {
                         action('Log out clicked');
                     }, role: "button" })] }));
     },
-    presets: [
-        {
-            label: 'Scroll = False',
-            propState: {
-                floating: false,
-                portal: false,
-                itemDisplayCount: 5,
-                itemCount: 11,
-                scroll: false,
-            },
-        },
-        {
-            label: 'Item Display Count',
-            propState: {
-                floating: false,
-                portal: false,
-                itemDisplayCount: 5,
-                itemCount: 11,
-                scroll: true,
-            },
-        },
-    ],
-    disableProps: ['floating', 'portal'],
     variants: false,
 });
 //# sourceMappingURL=MenuExample.js.map

package/dist/components/Menu/MenuExample.js.map

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

package/dist/components/Menu/menu.css

@@ -1,4 +1,4 @@
-[data-bspk=menu] {
+[data-bspk-utility=menu] {
   --overflow-y: hidden;
   width: 332px;
   box-sizing: border-box;
@@ -8,16 +8,9 @@
   border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-}
-[data-bspk=menu][data-scroll=true] {
-  overflow: hidden scroll;
-  max-height: calc(var(--item-display-count, 1) * var(--list-item-height) + 2px);
-}
-[data-bspk=menu][data-floating] {
+  overflow: hidden auto;
+  height: fit-content;
   z-index: var(--z-index-dropdown);
 }
-[data-bspk=menu] [data-bspk=list-item][data-selected] {
-  background-color: var(--surface-brand-primary-highlight);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Menu/menu.css.js

@@ -1,7 +1,7 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=menu] {
+style.appendChild(document.createTextNode(`[data-bspk-utility=menu] {
   --overflow-y: hidden;
   width: 332px;
   box-sizing: border-box;
@@ -11,17 +11,10 @@ style.appendChild(document.createTextNode(`[data-bspk=menu] {
   border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-}
-[data-bspk=menu][data-scroll=true] {
-  overflow: hidden scroll;
-  max-height: calc(var(--item-display-count, 1) * var(--list-item-height) + 2px);
-}
-[data-bspk=menu][data-floating] {
+  overflow: hidden auto;
+  height: fit-content;
   z-index: var(--z-index-dropdown);
 }
-[data-bspk=menu] [data-bspk=list-item][data-selected] {
-  background-color: var(--surface-brand-primary-highlight);
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/MenuButton/MenuButton.d.ts

@@ -1,6 +1,6 @@
+import './menu-button.scss';
 import { ButtonProps } from '-/components/Button';
 import { ElementProps } from '-/types/common';
-import './menu-button.scss';
 export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
 /**
  * Utility component used within top navigation.