@common-origin/design-system 3.0.0 → 3.2.0

package/dist/components/molecules/Menu/Menu.mjs

@@ -0,0 +1,476 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign, __spreadArray } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect, createContext, useContext } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion, forcedColorsEdge, interactiveRow } from '../../../lib/styleUtils.mjs';
+import { usePresence } from '../../../lib/usePresence.mjs';
+import { laidOutElement } from '../../../lib/floatingPosition.mjs';
+import { ANCHOR_WIDTH_VAR, useIsomorphicLayoutEffect, useFloatingLayer } from '../../../lib/useFloatingLayer.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  motion = semantic.motion,
+  radius = semantic.radius,
+  size = semantic.size,
+  elevation = semantic.elevation,
+  border = semantic.border,
+  typography = semantic.typography;
+// Typeahead keeps typed characters together for this long. An input timing, not a motion value.
+var TYPEAHEAD_RESET_MS = 500;
+var ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+var MenuContext = /*#__PURE__*/createContext(null);
+var useMenu = function useMenu(component) {
+  var context = useContext(MenuContext);
+  if (!context) throw new Error("".concat(component, " must be used inside a Menu"));
+  return context;
+};
+var enter = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"])), motion.distance.sm);
+var fade = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+// Dropdown's panel (P5): the raised surface with a decorative outline and floating elevation,
+// dropping in over duration.fast (0037); under reduced motion it only fades (0015)
+])));
+// Dropdown's panel (P5): the raised surface with a decorative outline and floating elevation,
+// dropping in over duration.fast (0037); under reduced motion it only fades (0015)
+var Panel = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Menu__Panel",
+  componentId: "sc-13mple2-0"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  /* At least the trigger's width when matchTriggerWidth sets the variable, within the usual range */\n  min-width: min(max(", ", var(", ", 0px)), ", ");\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  /* At least the trigger's width when matchTriggerWidth sets the variable, within the usual range */\n  min-width: min(max(", ", var(", ", 0px)), ", ");\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"
+// The trigger's wrapper takes no box of its own
+])), size[4500], ANCHOR_WIDTH_VAR, size[7500], size[7500], size.menu.maxHeight, space[100], semantic.surface.overlay, color.text["default"], border["default"], radius.md, elevation.floating, enter, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+}, reducedMotion, fade, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+}, forcedColorsEdge);
+// The trigger's wrapper takes no box of its own
+var Anchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Anchor",
+  componentId: "sc-13mple2-1"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var focusItem = function focusItem(menu, which) {
+  var _a;
+  var items = menu ? Array.from(menu.querySelectorAll(ITEM_SELECTOR)) : [];
+  (_a = which === 'first' ? items[0] : items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+};
+/**
+ * A menu of actions and choices that opens from a trigger (#329), following the WAI-ARIA menu
+ * button pattern. Not a select: for choosing a form value, use Dropdown.
+ */
+var Menu = function Menu(_a) {
+  var trigger = _a.trigger,
+    children = _a.children,
+    openProp = _a.open,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    onOpenChange = _a.onOpenChange,
+    _c = _a.side,
+    side = _c === void 0 ? 'bottom' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'start' : _d,
+    _e = _a.matchTriggerWidth,
+    matchTriggerWidth = _e === void 0 ? false : _e,
+    dataTestId = _a["data-testid"];
+  var menuId = useId();
+  var triggerId = useId();
+  var anchorRef = useRef(null);
+  var panelRef = useRef(null);
+  // Which item to focus once the menu has opened
+  var initialFocus = useRef('first');
+  var openedFromTrigger = useRef(false);
+  var typeahead = useRef({
+    text: '',
+    timer: undefined
+  });
+  var _f = useState(defaultOpen),
+    uncontrolledOpen = _f[0],
+    setUncontrolledOpen = _f[1];
+  var isControlled = openProp !== undefined;
+  var isOpen = isControlled ? openProp : uncontrolledOpen;
+  var _g = usePresence(isOpen),
+    isPresent = _g.isPresent,
+    isExiting = _g.isExiting;
+  var triggerElement = function triggerElement() {
+    return laidOutElement(anchorRef.current);
+  };
+  var setOpen = useCallback(function (next) {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+  }, [isControlled, onOpenChange]);
+  var close = useCallback(function (_a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a,
+      _d = _c.returnFocus,
+      returnFocus = _d === void 0 ? true : _d;
+    setOpen(false);
+    if (returnFocus) (_b = triggerElement()) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [setOpen]);
+  var openWith = function openWith(focus) {
+    initialFocus.current = focus;
+    openedFromTrigger.current = true;
+    setOpen(true);
+  };
+  // The trigger's ARIA is set on the element itself, so it reaches the real control even when the
+  // trigger is wrapped (a Tooltip inside the trigger, for example)
+  useEffect(function () {
+    var element = triggerElement();
+    if (!element) return;
+    if (!element.id) element.id = triggerId;
+    element.setAttribute('aria-haspopup', 'menu');
+    element.setAttribute('aria-expanded', String(isOpen));
+    if (isOpen) element.setAttribute('aria-controls', menuId);else element.removeAttribute('aria-controls');
+  });
+  // The menu is named by its trigger, whose own id is kept if it has one
+  useIsomorphicLayoutEffect(function () {
+    var panel = panelRef.current;
+    var element = triggerElement();
+    if (!isPresent || !panel || !element) return;
+    if (!element.id) element.id = triggerId;
+    panel.setAttribute('aria-labelledby', element.id);
+  }, [isPresent]);
+  // In the top layer beside the trigger; scrolling or resizing closes it, since the trigger moves
+  var detach = useCallback(function () {
+    return close({
+      returnFocus: false
+    });
+  }, [close]);
+  useFloatingLayer({
+    isPresent: isPresent,
+    floatingRef: panelRef,
+    anchorRef: anchorRef,
+    side: side,
+    align: align,
+    matchAnchorWidth: matchTriggerWidth,
+    onDetach: detach
+  });
+  // Opening from the trigger focuses the first or last item. An open that didn't come from the
+  // trigger (defaultOpen, or a controlled open) leaves focus where it is
+  useEffect(function () {
+    if (!isOpen || !openedFromTrigger.current) return;
+    openedFromTrigger.current = false;
+    focusItem(panelRef.current, initialFocus.current);
+  }, [isOpen]);
+  // A press outside the trigger and the menu closes it, leaving focus where the press put it
+  useEffect(function () {
+    if (!isOpen) return;
+    var onPointerDown = function onPointerDown(event) {
+      var _a, _b;
+      var target = event.target;
+      if (((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = anchorRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) return;
+      close({
+        returnFocus: false
+      });
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return function () {
+      return document.removeEventListener('pointerdown', onPointerDown, true);
+    };
+  }, [isOpen, close]);
+  useEffect(function () {
+    return function () {
+      return clearTimeout(typeahead.current.timer);
+    };
+  }, []);
+  var onTriggerKeyDown = function onTriggerKeyDown(event) {
+    var _a;
+    if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) return;
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openWith('first');
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      openWith('last');
+    }
+  };
+  var onTriggerClick = function onTriggerClick(event) {
+    var _a;
+    if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) return;
+    // A keyboard click (Enter, Space) is handled on keydown
+    if (event.detail === 0) return;
+    if (isOpen) close({
+      returnFocus: false
+    });else openWith('first');
+  };
+  var onMenuKeyDown = function onMenuKeyDown(event) {
+    var _a;
+    var items = Array.from(event.currentTarget.querySelectorAll(ITEM_SELECTOR));
+    var current = items.indexOf(document.activeElement);
+    var move = function move(index) {
+      var _a;
+      event.preventDefault();
+      (_a = items[(index + items.length) % items.length]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    switch (event.key) {
+      case 'ArrowDown':
+        return move(current + 1);
+      case 'ArrowUp':
+        return move(current - 1);
+      case 'Home':
+        return move(0);
+      case 'End':
+        return move(items.length - 1);
+      case 'Escape':
+        event.preventDefault();
+        event.stopPropagation();
+        return close();
+      case 'Tab':
+        // Focus moves on to the next element after the trigger, and the menu closes
+        return close({
+          returnFocus: false
+        });
+      default:
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== ' ') {
+          var state_1 = typeahead.current;
+          clearTimeout(state_1.timer);
+          state_1.text += event.key.toLowerCase();
+          state_1.timer = setTimeout(function () {
+            state_1.text = '';
+          }, TYPEAHEAD_RESET_MS);
+          // The label alone: not a leading Avatar's initials, the description or the shortcut
+          var label_1 = function label_1(item) {
+            var _a, _b, _c;
+            return ((_c = (_a = item.dataset.label) !== null && _a !== void 0 ? _a : (_b = item.querySelector('[data-menu-label]')) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : '').trim().toLowerCase();
+          };
+          var ordered = __spreadArray(__spreadArray([], items.slice(current + 1), true), items.slice(0, current + 1), true);
+          var search = state_1.text.length > 1 ? __spreadArray([items[current]], ordered, true) : ordered;
+          (_a = search.find(function (item) {
+            return item && label_1(item).startsWith(state_1.text);
+          })) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+  };
+  return jsx(MenuContext.Provider, {
+    value: {
+      close: close
+    },
+    children: jsxs(Anchor, {
+      ref: anchorRef,
+      onKeyDown: onTriggerKeyDown,
+      onClick: onTriggerClick,
+      children: [trigger, isPresent && jsx(Panel, {
+        ref: panelRef,
+        id: menuId,
+        role: "menu",
+        tabIndex: -1,
+        "$exiting": isExiting,
+        onKeyDown: onMenuKeyDown,
+        "data-testid": dataTestId,
+        children: children
+      })]
+    })
+  });
+};
+Menu.displayName = 'Menu';
+var Row = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Menu__Row",
+  componentId: "sc-13mple2-2"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.md, typography.small, function (_a) {
+  var $destructive = _a.$destructive;
+  return $destructive ? color.text.danger : color.text["default"];
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $checked = _a.$checked,
+    $focused = _a.$focused,
+    $disabled = _a.$disabled;
+  return interactiveRow({
+    selected: $checked,
+    focused: $focused,
+    disabled: $disabled
+  });
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color.text.disabled);
+}, border.focus, border.focusOffset);
+var Leading = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Leading",
+  componentId: "sc-13mple2-3"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n"])));
+var Text = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Text",
+  componentId: "sc-13mple2-4"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"])));
+var Description = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Description",
+  componentId: "sc-13mple2-5"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var Shortcut = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Shortcut",
+  componentId: "sc-13mple2-6"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var Check = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Check",
+  componentId: "sc-13mple2-7"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: inherit;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: inherit;\n"])));
+var RowItem = function RowItem(_a) {
+  var role = _a.role,
+    children = _a.children,
+    icon = _a.icon,
+    description = _a.description,
+    shortcut = _a.shortcut,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    _c = _a.destructive,
+    destructive = _c === void 0 ? false : _c,
+    checked = _a.checked,
+    textValue = _a.textValue,
+    onActivate = _a.onActivate,
+    dataTestId = _a["data-testid"];
+  var _d = useState(false),
+    focused = _d[0],
+    setFocused = _d[1];
+  var checkable = role !== 'menuitem';
+  var activate = function activate() {
+    if (!disabled) onActivate();
+  };
+  return jsxs(Row, {
+    role: role,
+    tabIndex: -1,
+    "aria-disabled": disabled || undefined,
+    "aria-checked": checkable ? Boolean(checked) : undefined,
+    "aria-keyshortcuts": shortcut === null || shortcut === void 0 ? void 0 : shortcut.keys,
+    "data-label": textValue,
+    "data-testid": dataTestId,
+    "$checked": Boolean(checked),
+    "$focused": focused,
+    "$disabled": disabled,
+    "$destructive": destructive,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onPointerMove: function onPointerMove(event) {
+      // The pointer moves focus, so hover and keyboard share one highlighted item
+      if (document.activeElement !== event.currentTarget) event.currentTarget.focus();
+    },
+    onClick: activate,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        activate();
+      }
+    },
+    children: [icon && jsx(Leading, {
+      "aria-hidden": "true",
+      children: icon
+    }), jsxs(Text, {
+      children: [jsx("span", {
+        "data-menu-label": "",
+        children: children
+      }), description && jsx(Description, {
+        children: description
+      })]
+    }), shortcut && jsx(Shortcut, {
+      "aria-hidden": "true",
+      children: shortcut.label
+    }), checkable && checked && jsx(Check, {
+      children: jsx(Icon, {
+        name: "check",
+        size: "sm",
+        iconColor: "inherit"
+      })
+    })]
+  });
+};
+/** An action. Activating it closes the menu. */
+var MenuItem = function MenuItem(_a) {
+  var onSelect = _a.onSelect,
+    props = __rest(_a, ["onSelect"]);
+  var close = useMenu('MenuItem').close;
+  return jsx(RowItem, __assign({
+    role: "menuitem"
+  }, props, {
+    onActivate: function onActivate() {
+      close();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    }
+  }));
+};
+/** One choice of a set, inside a MenuGroup. Choosing it closes the menu. */
+var MenuItemRadio = function MenuItemRadio(_a) {
+  var onSelect = _a.onSelect,
+    checked = _a.checked,
+    props = __rest(_a, ["onSelect", "checked"]);
+  var close = useMenu('MenuItemRadio').close;
+  return jsx(RowItem, __assign({
+    role: "menuitemradio",
+    checked: checked
+  }, props, {
+    onActivate: function onActivate() {
+      close();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    }
+  }));
+};
+/** An on/off option, inside a MenuGroup. Toggling it keeps the menu open. */
+var MenuItemCheckbox = function MenuItemCheckbox(_a) {
+  var onCheckedChange = _a.onCheckedChange,
+    checked = _a.checked,
+    props = __rest(_a, ["onCheckedChange", "checked"]);
+  useMenu('MenuItemCheckbox');
+  return jsx(RowItem, __assign({
+    role: "menuitemcheckbox",
+    checked: checked
+  }, props, {
+    onActivate: function onActivate() {
+      return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
+    }
+  }));
+};
+var GroupLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Menu__GroupLabel",
+  componentId: "sc-13mple2-8"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"
+/** Groups related items. Radio and checkbox items always sit in a group. */])), space.inset.xs, space.inset.md, typography.caption, color.text.muted);
+/** Groups related items. Radio and checkbox items always sit in a group. */
+var MenuGroup = function MenuGroup(_a) {
+  var label = _a.label,
+    children = _a.children;
+  var labelId = useId();
+  return jsxs("div", {
+    role: "group",
+    "aria-labelledby": label ? labelId : undefined,
+    children: [label && jsx(GroupLabel, {
+      id: labelId,
+      "aria-hidden": "true",
+      children: label
+    }), children]
+  });
+};
+// Divider's smallest spacing (16px each side) is too loose between dense rows, so the menu draws
+// its own 1px rule with the decorative border
+var Separator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Menu__Separator",
+  componentId: "sc-13mple2-9"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin: ", " 0;\n  border-top: ", ";\n"], ["\n  margin: ", " 0;\n  border-top: ", ";\n"
+/** Separates groups */])), space[100], border["default"]);
+/** Separates groups */
+var MenuDivider = function MenuDivider() {
+  return jsx(Separator, {
+    role: "separator",
+    "aria-orientation": "horizontal"
+  });
+};
+MenuItem.displayName = 'MenuItem';
+MenuItemRadio.displayName = 'MenuItemRadio';
+MenuItemCheckbox.displayName = 'MenuItemCheckbox';
+MenuGroup.displayName = 'MenuGroup';
+MenuDivider.displayName = 'MenuDivider';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+
+export { Menu, MenuDivider, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio };
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/molecules/Menu/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/Menu/index.d.mts

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuItemRadio, MenuItemCheckbox, MenuGroup, MenuDivider } from './Menu.mjs';
+export type { MenuProps, MenuSide, MenuAlign, MenuItemProps, MenuItemRadioProps, MenuItemCheckboxProps, MenuGroupProps, } from './Menu.mjs';

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

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuItemRadio, MenuItemCheckbox, MenuGroup, MenuDivider } from './Menu';
+export type { MenuProps, MenuSide, MenuAlign, MenuItemProps, MenuItemRadioProps, MenuItemCheckboxProps, MenuGroupProps, } from './Menu';

package/dist/components/molecules/Modal/Modal.mjs

@@ -54,7 +54,7 @@ var StyledDialog = /*#__PURE__*/styled.div.withConfig({
 })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic.layer.modal, function (_a) {
   var $width = _a.$width;
   return $width;
-}, space[400], space[400], semantic.surface.raised, semantic.radius.xl, elevation.overlay, css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+}, space[400], space[400], semantic.surface.overlay, tokens.component.overlay.borderRadius, elevation.overlay, css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }), reducedMotion, fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {

package/dist/components/molecules/NumberInput/NumberInput.mjs

@@ -7,6 +7,7 @@ const styled = styled$module.default || styled$module;
 import { StyledInputBase } from '../TextField/InputBase.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
+import { fieldButtonRadius } from '../../../lib/styleUtils.mjs';
 
 var field = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
@@ -34,7 +35,7 @@ var StyledNumberInput = /*#__PURE__*/styled(StyledInputBase).withConfig({
 var StyledStepperContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NumberInput__StyledStepperContainer",
   componentId: "sc-qotc3w-5"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), tokens.semantic.space[200], tokens.semantic.space[200]);
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], fieldButtonRadius);
 var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"

package/dist/components/molecules/PasswordField/PasswordField.mjs

@@ -7,6 +7,7 @@ const styled = styled$module.default || styled$module;
 import { StyledInputBase } from '../TextField/InputBase.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
+import { fieldButtonRadius } from '../../../lib/styleUtils.mjs';
 
 var field = tokens.component.field;
 // Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
@@ -37,7 +38,7 @@ var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
 var StyledToggleButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "PasswordField__StyledToggleButton",
   componentId: "sc-1p15zk0-5"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n"
 /**
  * PasswordField component for secure password input with visibility toggle
  *
@@ -49,7 +50,7 @@ var StyledToggleButton = /*#__PURE__*/styled.div.withConfig({
  *   required
  * />
  * ```
- */])), tokens.semantic.space[200]);
+ */])), tokens.semantic.space[200], fieldButtonRadius);
 /**
  * PasswordField component for secure password input with visibility toggle
  *

package/dist/components/molecules/SearchField/SearchField.mjs

@@ -8,7 +8,7 @@ import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import { ListItem } from '../List/ListItem.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
-import { rowStates } from '../../../lib/styleUtils.mjs';
+import { fieldButtonRadius, rowStates } from '../../../lib/styleUtils.mjs';
 
 var semantic = tokens.semantic,
   component = tokens.component;
@@ -19,7 +19,7 @@ var StyledSearchContainer = /*#__PURE__*/styled.div.withConfig({
 var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.size.control.lg, semantic.space[200], semantic.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (props) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.size.control.lg, semantic.space[200], semantic.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, fieldButtonRadius, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (props) {
   return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  ");
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
@@ -31,7 +31,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
 var StyledSuggestionsList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic.space[100], tokens.semantic.size.menu.maxHeight, semantic.surface.raised, semantic.border.width.thin, semantic.color.border["default"], semantic.radius.md, semantic.elevation.floating, semantic.space[100], semantic.layer.dropdown, rowStates.unselected.hover.background);
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic.space[100], tokens.semantic.size.menu.maxHeight, semantic.surface.overlay, semantic.border.width.thin, semantic.color.border["default"], semantic.radius.md, semantic.elevation.floating, semantic.space[100], semantic.layer.dropdown, rowStates.unselected.hover.background);
 var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"
@@ -296,6 +296,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
             role: "option",
             primary: "Clear recent searches",
             interactive: true,
+            // Deprecated prop (0051), kept for this padding until 4.0 removes it
             spacing: "compact",
             onClick: function onClick() {
               return handleSuggestionClick(item);
@@ -324,6 +325,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
           }) : undefined,
           interactive: true,
           "data-highlighted": index === highlightedIndex || undefined,
+          // Deprecated prop (0051), kept for this padding until 4.0 removes it
           spacing: "compact",
           onClick: function onClick() {
             return handleSuggestionClick(item);

package/dist/components/molecules/Sheet/Sheet.mjs

@@ -34,14 +34,14 @@ var StyledSheet = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Sheet__StyledSheet",
   componentId: "sc-8abisx-1"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic.surface.base, semantic.elevation.overlay, semantic.layer.overlay, function (_a) {
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic.surface.overlay, semantic.elevation.overlay, semantic.layer.overlay, function (_a) {
   var $position = _a.$position,
     $variant = _a.$variant,
     $width = _a.$width,
     $height = _a.$height;
   var isDrawer = $variant === 'drawer';
   var margin = isDrawer ? semantic.space[400] : '0';
-  var borderRadius = isDrawer ? semantic.radius.md : '0';
+  var borderRadius = isDrawer ? tokens.component.overlay.borderRadius : '0';
   switch ($position) {
     case 'right':
       return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
@@ -67,7 +67,7 @@ var StyledSheet = /*#__PURE__*/styled.div.withConfig({
 }, reducedMotion, fadeIn, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, semantic.space[200], semantic.surface.raised, semantic.color.border["default"], semantic.radius.full, semantic.color.fill.inverse);
+}, semantic.space[200], semantic.surface.overlay, semantic.color.border["default"], semantic.radius.full, semantic.color.fill.inverse);
 var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"