@common-origin/design-system 3.0.0 → 3.1.0

package/dist/components/atoms/Tooltip/Tooltip.d.mts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition.mjs';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Tooltip/Tooltip.mjs

@@ -0,0 +1,204 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useRef, useState, useCallback, useEffect } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import tokensJson from '../../../styles/tokens.json.mjs';
+import { exitAnimation, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import { usePresence } from '../../../lib/usePresence.mjs';
+import { useFloatingLayer } from '../../../lib/useFloatingLayer.mjs';
+import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
+
+var semantic = tokens.semantic;
+var motion = tokensJson.semantic.motion;
+// How long the pointer rests before the tooltip opens (#326)
+var HINT_DELAY_MS = parseInt(motion.delay.hint, 10);
+// Moving to another trigger within this window opens its tooltip at once, so a rail feels immediate
+var SKIP_DELAY_MS = parseInt(motion.duration.slow, 10);
+// The grace period for the pointer to cross from the trigger onto the tooltip (WCAG 1.4.13)
+var CLOSE_GRACE_MS = parseInt(motion.duration.fast, 10);
+// Shared by every Tooltip: only one is open at a time, and the next one opens at once while one
+// is open or within the skip-delay window after it closed
+var lastClosedAt = 0;
+var active = null;
+var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+])));
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+var Bubble = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tooltip__Bubble",
+  componentId: "sc-ajez94-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"], ["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"])), semantic.size[7500], semantic.space.inset.xs, semantic.space.inset.sm, semantic.radius.sm, semantic.color.fill.inverse, semantic.color.text.inverse, semantic.typography.small, fadeIn, semantic.motion.duration.fast, semantic.motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+}, forcedColorsEdge);
+var Description = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Description",
+  componentId: "sc-ajez94-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+])), visuallyHidden);
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+var Anchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Anchor",
+  componentId: "sc-ajez94-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */])));
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+var Tooltip = function Tooltip(_a) {
+  var text = _a.text,
+    _b = _a.kind,
+    kind = _b === void 0 ? 'label' : _b,
+    _c = _a.side,
+    side = _c === void 0 ? 'top' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'center' : _d,
+    children = _a.children,
+    dataTestId = _a["data-testid"];
+  var descriptionId = useId();
+  var anchorRef = useRef(null);
+  var bubbleRef = useRef(null);
+  var openTimer = useRef(undefined);
+  var closeTimer = useRef(undefined);
+  var owner = useState(function () {
+    return {};
+  })[0];
+  // Set by a press, so the focus that follows a click or tap doesn't reopen the tooltip
+  var pressed = useRef(false);
+  var _e = useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var _f = usePresence(isOpen),
+    isPresent = _f.isPresent,
+    isExiting = _f.isExiting;
+  var clearTimers = function clearTimers() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+  };
+  var close = useCallback(function () {
+    clearTimers();
+    if ((active === null || active === void 0 ? void 0 : active.owner) === owner) {
+      active = null;
+      lastClosedAt = Date.now();
+    }
+    setIsOpen(false);
+  }, [owner]);
+  var open = useCallback(function () {
+    clearTimers();
+    if (active && active.owner !== owner) active.close();
+    active = {
+      owner: owner,
+      close: close
+    };
+    setIsOpen(true);
+  }, [owner, close]);
+  var scheduleOpen = function scheduleOpen() {
+    clearTimeout(closeTimer.current);
+    if (isOpen) return;
+    // Moving straight from one trigger to the next (another tooltip still open) or just after one
+    // closed skips the delay, so a rail feels immediate
+    if (active || Date.now() - lastClosedAt < SKIP_DELAY_MS) return open();
+    clearTimeout(openTimer.current);
+    openTimer.current = setTimeout(open, HINT_DELAY_MS);
+  };
+  var scheduleClose = function scheduleClose() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(close, CLOSE_GRACE_MS);
+  };
+  useEffect(function () {
+    return function () {
+      clearTimers();
+      if ((active === null || active === void 0 ? void 0 : active.owner) === owner) active = null;
+    };
+  }, [owner]);
+  // While open: Escape closes it without moving focus, and before anything else hears the key
+  // (an Escape meant for the tooltip mustn't also close a Modal)
+  useEffect(function () {
+    if (!isOpen) return;
+    var onKeyDown = function onKeyDown(event) {
+      if (event.key !== 'Escape') return;
+      event.stopPropagation();
+      close();
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    return function () {
+      return window.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [isOpen, close]);
+  // In the top layer beside the trigger; scrolling or resizing closes it, since the trigger moves
+  useFloatingLayer({
+    isPresent: isPresent,
+    floatingRef: bubbleRef,
+    anchorRef: anchorRef,
+    side: side,
+    align: align,
+    onDetach: close
+  });
+  var child = React.Children.only(children);
+  var describedBy = [child.props['aria-describedby'], kind === 'description' ? descriptionId : undefined].filter(Boolean).join(' ') || undefined;
+  return jsxs(Anchor, {
+    ref: anchorRef,
+    onPointerEnter: function onPointerEnter(event) {
+      return event.pointerType !== 'touch' && scheduleOpen();
+    },
+    onPointerLeave: function onPointerLeave(event) {
+      return event.pointerType !== 'touch' && scheduleClose();
+    },
+    onFocus: function onFocus(event) {
+      // Keyboard focus opens it at once; a click's or tap's focus doesn't
+      if (pressed.current) {
+        pressed.current = false;
+        return;
+      }
+      if (isKeyboardFocus(event.target)) open();
+    },
+    onBlur: function onBlur() {
+      // A press on an already focused trigger has no focus to skip; don't carry it over
+      pressed.current = false;
+      close();
+    },
+    // Pressing the trigger acts on it, so the hint has done its job
+    onPointerDown: function onPointerDown() {
+      pressed.current = true;
+      close();
+    },
+    children: [/*#__PURE__*/React.cloneElement(child, {
+      'aria-describedby': describedBy
+    }), kind === 'description' && jsx(Description, {
+      id: descriptionId,
+      children: text
+    }), isPresent &&
+    // Hidden from assistive technology: a label repeats the trigger's name, and a
+    // description reaches it through aria-describedby on the always-present text above
+    jsx(Bubble, {
+      ref: bubbleRef,
+      "aria-hidden": "true",
+      "$exiting": isExiting,
+      "data-testid": dataTestId,
+      children: text
+    })]
+  });
+};
+Tooltip.displayName = 'Tooltip';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/atoms/Tooltip/Tooltip.mjs.map

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

package/dist/components/atoms/Tooltip/index.d.mts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip.mjs';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip.mjs';

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip';

package/dist/components/atoms/index.d.mts

@@ -15,5 +15,6 @@ export * from './Divider/index.mjs';
 export * from './Stack/index.mjs';
 export * from './StatusLabel/index.mjs';
 export * from './Tag/index.mjs';
+export * from './Tooltip/index.mjs';
 export * from './Typography/index.mjs';
 export * from './AILabel/index.mjs';

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

@@ -15,5 +15,6 @@ export * from './Divider';
 export * from './Stack';
 export * from './StatusLabel';
 export * from './Tag';
+export * from './Tooltip';
 export * from './Typography';
 export * from './AILabel';

package/dist/components/index.d.mts

@@ -1,4 +1,5 @@
 export * from './atoms//index.mjs';
 export * from './molecules//index.mjs';
+export * from './organisms//index.mjs';
 export * from './layout//index.mjs';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem/index.mjs';

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './atoms/';
 export * from './molecules/';
+export * from './organisms/';
 export * from './layout/';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem';

package/dist/components/molecules/ActionSheet/ActionSheet.mjs

@@ -269,6 +269,7 @@ var ActionSheet = function ActionSheet(_a) {
               },
               disabled: action.disabled,
               destructive: action.destructive,
+              // Deprecated prop (0051), kept for this padding until 4.0 removes it
               spacing: "compact"
             })]
           }, action.id);

package/dist/components/molecules/Alert/Alert.mjs

@@ -91,7 +91,7 @@ var StyledContent = /*#__PURE__*/styled.div.withConfig({
 var StyledTitle = /*#__PURE__*/styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.lineHeight);
 var StyledMessage = /*#__PURE__*/styled.span.withConfig({
   displayName: "Alert__StyledMessage",
   componentId: "sc-18tq5d-4"

package/dist/components/molecules/ChipGroup/ChipGroup.mjs

@@ -22,6 +22,7 @@ import '../../atoms/Divider/Divider.mjs';
 import { Stack } from '../../atoms/Stack/Stack.mjs';
 import '../../atoms/StatusLabel/StatusLabel.mjs';
 import '../../atoms/Tag/Tag.mjs';
+import '../../atoms/Tooltip/Tooltip.mjs';
 import '../../atoms/Typography/Typography.mjs';
 import '../../atoms/AILabel/AILabel.mjs';
 

package/dist/components/molecules/List/List.d.mts

@@ -13,6 +13,8 @@ export interface ListProps {
     /**
      * Density of the list's items: their padding. A ListItem's own `spacing` overrides it (#77).
      * @default 'comfortable'
+     * @deprecated Set density on a region with `data-co-density` instead: rows follow it (P9,
+     * decision 0051). `spacing` still sets the padding, but not the height, until it's removed in 4.0.
      */
     spacing?: ListSpacing;
     /**

package/dist/components/molecules/List/List.d.ts

@@ -13,6 +13,8 @@ export interface ListProps {
     /**
      * Density of the list's items: their padding. A ListItem's own `spacing` overrides it (#77).
      * @default 'comfortable'
+     * @deprecated Set density on a region with `data-co-density` instead: rows follow it (P9,
+     * decision 0051). `spacing` still sets the padding, but not the height, until it's removed in 4.0.
      */
     spacing?: ListSpacing;
     /**

package/dist/components/molecules/List/ListItem.d.mts

@@ -59,6 +59,8 @@ export interface ListItemProps {
     /**
      * Density of this item. Defaults to the parent List's `spacing`, or `comfortable` outside a
      * List; set it to override the List for this item (#77).
+     * @deprecated Set density on a region with `data-co-density` instead: rows follow it (P9,
+     * decision 0051). `spacing` still sets the padding, but not the height, until it's removed in 4.0.
      */
     spacing?: ListSpacing;
     /**

package/dist/components/molecules/List/ListItem.d.ts

@@ -59,6 +59,8 @@ export interface ListItemProps {
     /**
      * Density of this item. Defaults to the parent List's `spacing`, or `comfortable` outside a
      * List; set it to override the List for this item (#77).
+     * @deprecated Set density on a region with `data-co-density` instead: rows follow it (P9,
+     * decision 0051). `spacing` still sets the padding, but not the height, until it's removed in 4.0.
      */
     spacing?: ListSpacing;
     /**

package/dist/components/molecules/List/ListItem.mjs

@@ -20,7 +20,7 @@ var StyledListItem = /*#__PURE__*/styled.li.withConfig({
   },
   displayName: "ListItem__StyledListItem",
   componentId: "sc-1wzzt21-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic.size.touchTarget, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic.size.row.md, function (_a) {
   var $interactive = _a.$interactive;
   return $interactive && 'user-select: none;';
 }, function (_a) {
@@ -37,9 +37,9 @@ var StyledItemContent = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "ListItem__StyledItemContent",
   componentId: "sc-1wzzt21-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic.space[300], function (_a) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  /* Insets, so the row's padding follows density with its height (decision 0051) */\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic.space[300], function (_a) {
   var $spacing = _a.$spacing;
-  return $spacing === 'compact' ? "".concat(semantic.space[200], " ").concat(semantic.space[300]) : "".concat(semantic.space[300], " ").concat(semantic.space[400]);
+  return $spacing === 'compact' ? "".concat(semantic.space.inset.sm, " ").concat(semantic.space.inset.md) : "".concat(semantic.space.inset.md, " ").concat(semantic.space.inset.lg);
 }, semantic.radius.sm, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
@@ -84,7 +84,7 @@ var StyledExpandedContent = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "ListItem__StyledExpandedContent",
   componentId: "sc-1wzzt21-6"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, function (_a) {
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              margin ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1000px' : '0';
 }, function (_a) {
@@ -96,7 +96,7 @@ var StyledExpandedContent = /*#__PURE__*/styled.div.withConfig({
 }, reducedMotion, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, function (_a) {
   var $expanded = _a.$expanded,
     $spacing = _a.$spacing;
-  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic.space[200], " ").concat(semantic.space[300], " ").concat(semantic.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic.space[200], " ").concat(semantic.space[400], " ").concat(semantic.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic.surface.raised, ";\n    border-radius: ").concat(semantic.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic.space[300] : semantic.space[400], " ").concat($spacing === 'compact' ? semantic.space[200] : semantic.space[300], ";\n  ");
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic.space[200], " ").concat(semantic.space[300], " ").concat(semantic.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic.space[200], " ").concat(semantic.space[400], " ").concat(semantic.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic.surface.raised, ";\n    border-radius: ").concat(semantic.radius.sm, ";\n    /* The row's own insets, so the panel lines up with the row in every density (0051) */\n    margin: 0 ").concat($spacing === 'compact' ? semantic.space.inset.md : semantic.space.inset.lg, " ").concat($spacing === 'compact' ? semantic.space.inset.sm : semantic.space.inset.md, ";\n  ");
 });
 var ListItem = function ListItem(_a) {
   var primary = _a.primary,

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition.mjs';
+export type MenuSide = FloatingSide;
+export type MenuAlign = FloatingAlign;
+export interface MenuProps {
+    /**
+     * The element that opens the menu, such as a Button or IconButton. Menu gives it
+     * `aria-haspopup`, `aria-expanded` and `aria-controls`, and the menu takes its name from it.
+     */
+    trigger: React.ReactElement;
+    /** `MenuItem`, `MenuItemRadio`, `MenuItemCheckbox`, `MenuGroup` and `MenuDivider` */
+    children: React.ReactNode;
+    /** Whether the menu is open (controlled). Use with `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Whether the menu starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The side of the trigger it opens on. It flips when there's no room.
+     * @default 'bottom'
+     */
+    side?: MenuSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'start'
+     */
+    align?: MenuAlign;
+    /** Test identifier for the menu */
+    'data-testid'?: string;
+}
+/**
+ * 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.
+ */
+export declare const Menu: {
+    ({ trigger, children, open: openProp, defaultOpen, onOpenChange, side, align, "data-testid": dataTestId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ItemBaseProps {
+    /** The item's label */
+    children: React.ReactNode;
+    /** A leading Icon or Avatar. Decorative: the label names the item (decision 0028). */
+    icon?: React.ReactNode;
+    /** Secondary text under the label, such as a workspace's plan */
+    description?: React.ReactNode;
+    /**
+     * A keyboard shortcut shown at the end of the item: `label` is shown (such as "⌘K") and `keys` is
+     * exposed as `aria-keyshortcuts` (such as "Meta+K"). Display only: Menu doesn't bind the keys.
+     */
+    shortcut?: {
+        label: string;
+        keys: string;
+    };
+    /** Whether the item can be activated. A disabled item can still be focused (WAI-ARIA). */
+    disabled?: boolean;
+    /** Text for typeahead, when the label isn't plain text */
+    textValue?: string;
+    /** Test identifier for the item */
+    'data-testid'?: string;
+}
+export interface MenuItemProps extends ItemBaseProps {
+    /** Called when the item is activated. The menu then closes. */
+    onSelect?: () => void;
+    /**
+     * A destructive action, shown in the danger colour as ActionSheet's are.
+     * @default false
+     */
+    destructive?: boolean;
+}
+export interface MenuItemRadioProps extends ItemBaseProps {
+    /** Whether this is the chosen item of its group */
+    checked: boolean;
+    /** Called when the item is chosen. The menu then closes. */
+    onSelect?: () => void;
+}
+export interface MenuItemCheckboxProps extends ItemBaseProps {
+    /** Whether the item is on */
+    checked: boolean;
+    /** Called with the new state when the item is toggled. The menu stays open. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** An action. Activating it closes the menu. */
+export declare const MenuItem: {
+    ({ onSelect, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** One choice of a set, inside a MenuGroup. Choosing it closes the menu. */
+export declare const MenuItemRadio: {
+    ({ onSelect, checked, ...props }: MenuItemRadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** An on/off option, inside a MenuGroup. Toggling it keeps the menu open. */
+export declare const MenuItemCheckbox: {
+    ({ onCheckedChange, checked, ...props }: MenuItemCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface MenuGroupProps {
+    /** A visible label for the group, which also names it for assistive technology */
+    label?: string;
+    /** The group's items */
+    children: React.ReactNode;
+}
+/** Groups related items. Radio and checkbox items always sit in a group. */
+export declare const MenuGroup: {
+    ({ label, children }: MenuGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Separates groups */
+export declare const MenuDivider: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};