@bspk/ui 1.1.34 → 1.2.0

package/dist/components/Listbox/Listbox.js

@@ -40,9 +40,9 @@ const DEFAULT = {
  *     }
  *
  * @name Listbox
- * @phase Backlog
+ * @phase Utility
  */
-function Listbox({ itemDisplayCount, items = [], innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, ...props }) {
+export function Listbox({ includeAriaLabel, itemDisplayCount, itemCount, items = [], innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, owner, ...props }) {
     const menuId = useId(idProp);
     const selectAll = useMemo(() => {
         if (!isMulti)
@@ -52,9 +52,9 @@ function Listbox({ itemDisplayCount, items = [], innerRef, onChange, activeIndex
         return selectAllProp === true ? DEFAULT.selectAll : false;
     }, [isMulti, selectAllProp]);
     const allSelected = useMemo(() => !!(items.length && items.every((item) => selectedValues.includes(item.value))), [items, selectedValues]);
-    return (_jsxs(Menu, { ...props, "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: innerRef, itemCount: items.length, itemDisplayCount: itemDisplayCount, role: "listbox", children: [isMulti && selectAll && (_jsx(ListItem, { "data-selected": allSelected || undefined, id: `${menuId}-select-all`, label: selectAll, onClick: (event) => {
+    return (_jsxs(Menu, { ...props, "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-bspk-owner": owner || undefined, "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: innerRef, itemCount: itemCount || items.length, itemDisplayCount: itemDisplayCount || items.length, role: "listbox", children: [isMulti && selectAll && (_jsx(ListItem, { as: "label", "data-selected": allSelected || undefined, id: `${menuId}-select-all`, label: selectAll, onClick: (event) => {
                     onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                }, role: "option", tabIndex: -1, trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, indeterminate: !allSelected && selectedValues.length > 0, name: "", onChange: (checked) => {
+                }, role: "option", trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, indeterminate: !allSelected && selectedValues.length > 0, name: "", onChange: (checked) => {
                         onChange?.(checked ? items.map((item) => item.value) : []);
                     }, value: "" }) }, "select-all")), items.map((item, index) => {
                 const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
@@ -63,7 +63,7 @@ function Listbox({ itemDisplayCount, items = [], innerRef, onChange, activeIndex
                     index,
                     item,
                 });
-                return (_createElement(ListItem, { ...item, ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", disabled: item.disabled || undefined, id: `${menuId}-item-${index}`, key: `${menuId}-item-${index}`, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
+                return (_createElement(ListItem, { ...item, ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-selected": selected || undefined, as: isMulti ? 'label' : 'button', disabled: item.disabled || undefined, id: `${menuId}-item-${index}`, includeAriaLabel: includeAriaLabel, key: `${menuId}-item-${index}`, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
                         if (onChange) {
                             if (!isMulti) {
                                 onChange?.([item.value], event);
@@ -73,13 +73,11 @@ function Listbox({ itemDisplayCount, items = [], innerRef, onChange, activeIndex
                                 ? selectedValues.filter((value) => value !== item.value)
                                 : [...selectedValues, item.value], event);
                         }
-                    }, role: "option", tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                    }, role: "option", trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
                             onChange?.(checked
                                 ? selectedValues.filter((value) => value !== item.value)
                                 : [...selectedValues, item.value]);
                         }, value: item.value })) : (renderProps?.trailing || item.trailing || undefined) }));
             }), children] }));
 }
-Listbox.bspkName = 'Listbox';
-export { Listbox };
 //# sourceMappingURL=Listbox.js.map

package/dist/components/Listbox/Listbox.js.map

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

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

@@ -1,10 +1,9 @@
 import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
+import { PortalProps } from '-/components/Portal';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 import './menu.scss';
 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 = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
     /**
@@ -14,8 +13,8 @@ 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.
+     * 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
      */
@@ -23,18 +22,13 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
     /**
      * The number of items to show in the menu. This is used to determine the height of the menu.
      *
-     * - 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 1
      */
-    itemDisplayCount?: number | false;
+    itemDisplayCount?: number;
     /**
      * 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
+     * @default 1
      */
     itemCount?: number;
     /**
@@ -43,8 +37,20 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
      * @default true
      */
     floating?: boolean;
-    /** A function that is called when the user clicks outside of the menu. */
-    onOutsideClick?: () => void;
+    /**
+     * 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.
+     *
+     * @default true
+     */
+    scroll?: boolean;
 };
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
@@ -56,18 +62,16 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
  *
  *     export function Example() {
  *         return (
- *             <Menu>
+ *             <Menu scroll={false}>
+ *                 <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({ innerRef, id: idProp, children, portal, itemDisplayCount, itemCount, floating, onOutsideClick, owner, scroll, container, ...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,25 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+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 { Scrim } from '../Scrim';
 import { useId } from '../../hooks/useId';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { cssWithVars } from '../../utils/cwv';
 import './menu.css.js';
 export function menuItemId(menuId, index) {
     return `menu-${menuId}-item-${index}`;
 }
-export const MIN_ITEM_COUNT = 3;
-export const MAX_ITEM_COUNT = 10;
-// returns the item count to display based on the items and the itemDisplayCount bounded by the MIN_ITEM_COUNT and MAX_ITEM_COUNT
-function boundCount(itemLength = 0, itemDisplayCount = 0) {
-    const minItemCount = Math.max(MIN_ITEM_COUNT, itemLength);
-    const maxItemCount = Math.min(MAX_ITEM_COUNT, itemLength);
-    return (
-    // Ensure we don't display less than the minimum item count
-    Math.min(minItemCount, 
-    // Ensure we don't display more items than available
-    Math.min(maxItemCount, itemDisplayCount)));
-}
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
  *
@@ -30,31 +19,35 @@ function boundCount(itemLength = 0, itemDisplayCount = 0) {
  *
  *     export function Example() {
  *         return (
- *             <Menu>
+ *             <Menu scroll={false}>
+ *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
  *             </Menu>
  *         );
  *     }
  *
  * @name Menu
- * @phase DesignReview
+ * @phase UXReview
  */
-function Menu({ 
+export function Menu({ 
 //
-innerRef, id: idProp, children, portal = true, itemDisplayCount: itemDisplayCountProp, itemCount, floating = true, onOutsideClick, ...props }) {
+innerRef, id: idProp, children, portal = true, itemDisplayCount = 1, itemCount = 1, floating = true, onOutsideClick, owner, scroll = true, container, ...props }) {
     const menuId = useId(idProp);
-    const itemDisplayCount = useMemo(() => {
-        return itemDisplayCountProp && boundCount(itemCount, itemDisplayCountProp);
-    }, [itemCount, itemDisplayCountProp]);
-    const menu = (_jsxs(_Fragment, { children: [floating && _jsx(Scrim, { "data-bspk-owner": "menu", onClick: () => onOutsideClick?.(), variant: "dropdown" }), _jsx("div", { role: "listbox", ...props, "data-bspk": "menu", "data-floating": floating || undefined, id: menuId, ref: innerRef, style: cssWithVars({
-                    ...props.style,
-                    '--overflow-y': itemCount && itemDisplayCount && itemCount > itemDisplayCount ? 'scroll' : undefined,
-                    maxHeight: itemDisplayCount === false
-                        ? 'auto'
-                        : `calc(calc(${itemDisplayCount} * var(--list-item-height)) + 2px /* borders */)`,
-                }), children: children })] }));
-    return portal ? _jsx(Portal, { children: menu }) : menu;
+    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;
 }
-Menu.bspkName = 'Menu';
-export { Menu };
 //# 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,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAChC,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,iIAAiI;AACjI,SAAS,UAAU,CAAC,UAAU,GAAG,CAAC,EAAE,gBAAgB,GAAG,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAC1D,OAAO;IACH,2DAA2D;IAC3D,IAAI,CAAC,GAAG,CACJ,YAAY;IACZ,oDAAoD;IACpD,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAC3C,CACJ,CAAC;AACN,CAAC;AA6CD;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,IAAI,CAAC;AACV,EAAE;AACF,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,cAAc,EACd,GAAG,KAAK,EACqB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,oBAAoB,IAAI,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,CACT,8BACK,QAAQ,IAAI,KAAC,KAAK,uBAAiB,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,GAAG,EACnG,cACI,IAAI,EAAC,SAAS,KACV,KAAK,eACC,MAAM,mBACD,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;oBACf,GAAG,KAAK,CAAC,KAAK;oBACd,cAAc,EACV,SAAS,IAAI,gBAAgB,IAAI,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACxF,SAAS,EACL,gBAAgB,KAAK,KAAK;wBACtB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,aAAa,gBAAgB,kDAAkD;iBAC5F,CAAC,YAED,QAAQ,GACP,IACP,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,cAAE,IAAI,GAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AACnD,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"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"}

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

@@ -1,6 +1,6 @@
-import { ComponentExampleFn } from '../../utils/demo';
-import { ElementProps } from '../..';
 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;
 }>;

package/dist/components/Menu/MenuExample.js

@@ -13,13 +13,36 @@ import { ListItem } from '../ListItem';
 import { Switch } from '../Switch';
 export const MenuExample = ({ action, }) => ({
     render: ({ props, Component, setState }) => {
-        return (_jsxs(Component, { ...props, "aria-label": "Settings Menu", 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, { label: "Dark mode", leading: props['data-dark-mode'] ? _jsx(SvgDarkModeFill, {}) : _jsx(SvgDarkMode, {}), role: "checkbox", trailing: _jsx(Switch, { "aria-label": "Toggle dark mode", checked: !!props['data-dark-mode'], name: "dark-mode", onChange: () => {
+        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: () => {
                             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

@@ -5,10 +5,13 @@
   border: 1px solid var(--stroke-neutral-low);
   background-color: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  overflow: hidden var(--overflow-y);
+}
+[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] {
   z-index: var(--z-index-dropdown);

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

@@ -8,10 +8,13 @@ style.appendChild(document.createTextNode(`[data-bspk=menu] {
   border: 1px solid var(--stroke-neutral-low);
   background-color: var(--surface-neutral-t1-base);
   box-shadow: var(--drop-shadow-float);
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  overflow: hidden var(--overflow-y);
+}
+[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] {
   z-index: var(--z-index-dropdown);
@@ -23,4 +26,3 @@ style.appendChild(document.createTextNode(`[data-bspk=menu] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,5 +1,5 @@
-import { ElementProps } from '../../index.js';
-import { ButtonProps } from '../Button';
+import { ButtonProps } from '-/components/Button';
+import { ElementProps } from '-/types/common';
 import './menu-button.scss';
 export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
 /**
@@ -15,9 +15,5 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  * @name MenuButton
  * @phase Utility
  */
-declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
-declare namespace MenuButton {
-    var bspkName: string;
-}
-export { MenuButton };
+export declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/MenuButton/MenuButton.js

@@ -14,9 +14,7 @@ import './menu-button.css.js';
  * @name MenuButton
  * @phase Utility
  */
-function MenuButton(props) {
+export function MenuButton(props) {
     return (_jsx("button", { "data-bspk": "menu-button", ...props, children: _jsx(SvgMenu, {}) }));
 }
-MenuButton.bspkName = 'MenuButton';
-export { MenuButton };
 //# sourceMappingURL=MenuButton.js.map

package/dist/components/MenuButton/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAI3C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;;;GAYG;AACH,SAAS,UAAU,CAAC,KAA8C;IAC9D,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAK3C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,KAA8C;IACrE,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC"}

package/dist/components/MenuButton/menu-button.css.js

@@ -19,4 +19,3 @@ style.appendChild(document.createTextNode(`[data-bspk=menu-button] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { CallToActionButton } from '../../index.js';
-import { ButtonProps } from '../Button';
-import { DialogProps } from '../Dialog';
+import { ButtonProps } from '-/components/Button';
+import { DialogProps } from '-/components/Dialog';
+import { CallToActionButton } from '-/types/common';
 import './modal.scss';
 export type ModalCallToAction = Pick<ButtonProps, 'destructive'> & Pick<CallToActionButton, 'label' | 'onClick'>;
-export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef' | 'onClose' | 'open'> & {
+export type ModalProps = Pick<DialogProps, 'container' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'> & {
     /**
      * Modal header.
      *
@@ -91,11 +91,7 @@ export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef'
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Modal {
-    var bspkName: string;
-}
-export { Modal };
+export declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/Modal.js

@@ -69,9 +69,9 @@ function useDialogHeight() {
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
+export function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
     const { isMobile } = useUIContext();
     const buttons = useMemo(() => {
         const nextButtons = [];
@@ -93,8 +93,6 @@ function Modal({ header, description, children, callToAction, cancelButton, butt
         return nextButtons;
     }, [callToAction, cancelButton, dialogProps.onClose, isMobile]);
     const { setModalRefs } = useDialogHeight();
-    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("header", { children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), label: "close", onClick: dialogProps.onClose, showLabel: false, variant: "tertiary" })] }), _jsx("main", { children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("footer", { "data-button-format": buttonFormat, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
+    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("div", { "data-modal-header": true, children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: dialogProps.onClose, variant: "tertiary" })] }), _jsx("div", { "data-modal-main": true, children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("div", { "data-button-format": buttonFormat, "data-modal-footer": true, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
 }
-Modal.bspkName = 'Modal';
-export { Modal };
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

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

package/dist/components/Modal/ModalExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExampleFn } from '../../utils/demo';
 import { ModalProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const ModalExample: ComponentExampleFn<ModalProps>;

package/dist/components/Modal/ModalExample.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ListItem } from '../ListItem';
-import { Modal } from '.';
 export const ModalExample = ({ action }) => ({
-    hideVariants: true,
+    variants: false,
     render: ({ props, setState }) => {
         const label = 'Open Modal';
         const { children, ...modalProps } = props;
@@ -34,7 +34,7 @@ export const ModalExample = ({ action }) => ({
                 description: 'This modal has no buttons.',
                 children: (_jsxs(_Fragment, { children: [_jsx("p", { children: "This is a demo of a scrolling modal. Most modals won't scroll but mobile uses modals as dropdowns which may have more items than can fit in the screen." }), Array(30)
                             .fill('')
-                            .map((_, index) => (_jsx(ListItem, { label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
+                            .map((_, index) => (_jsx(ListItem, { as: "label", label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
             },
         },
     ],

package/dist/components/Modal/ModalExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAE3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IAEL,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IACL,EAAE,EAAC,OAAO,EAEV,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/Modal/modal.css

@@ -3,36 +3,28 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/modal.css.js

@@ -6,39 +6,30 @@ style.appendChild(document.createTextNode(`[data-bspk=modal] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-