@bspk/ui 1.1.33 → 1.2.0

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);
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  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;
   background: unset;
   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);
@@ -34,17 +31,6 @@ body[data-bspk] a[data-bspk=list-item] {
 [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,7 +68,7 @@ body[data-bspk] a[data-bspk=list-item] {
 [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;

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);
+  user-select: none;
+  color: var(--foreground-neutral-on-surface);
+  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;
   background: unset;
   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);
@@ -37,17 +34,6 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 [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] {
@@ -85,7 +71,7 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 [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;
@@ -98,4 +84,3 @@ style.appendChild(document.createTextNode(`body[data-bspk] a[data-bspk=list-item
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Listbox/Listbox.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
-import { ListItemProps } from '../ListItem';
-import { MenuProps } from '../Menu';
+import { ListItemProps } from '-/components/ListItem';
+import { MenuProps } from '-/components/Menu';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 /** The props for the listbox items. */
 export type ListboxItemProps = CommonProps<'disabled'> & ListItemProps & {
     /** The content to display in the listbox item. */
@@ -9,7 +9,7 @@ export type ListboxItemProps = CommonProps<'disabled'> & ListItemProps & {
     /** The value of the listbox item. */
     value: string;
 };
-export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> & Pick<MenuProps, 'itemDisplayCount'> & {
+export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> & Pick<MenuProps, 'itemCount' | 'itemDisplayCount' | 'onOutsideClick' | 'owner'> & {
     /**
      * Content to display in the listbox.
      *
@@ -76,6 +76,7 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
      * Usually only used for showing no items found.
      */
     children?: ReactNode;
+    includeAriaLabel?: boolean;
 };
 /**
  * A utility widget that allows users to select one or more items from a list of choices.
@@ -109,11 +110,7 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
  *     }
  *
  * @name Listbox
- * @phase Backlog
+ * @phase Utility
  */
-declare function Listbox<Item extends ListboxItemProps>({ itemDisplayCount, items, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, ...props }: ElementProps<ListboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Listbox {
-    var bspkName: string;
-}
-export { Listbox };
+export declare function Listbox<Item extends ListboxItemProps>({ includeAriaLabel, itemDisplayCount, itemCount, items, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, listItemProps, isMulti, selectAll: selectAllProp, children, owner, ...props }: ElementProps<ListboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.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 */