@common-origin/design-system 2.23.0 → 3.1.0

package/dist/components/layout/GridSystem/GridSystem.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens';
+/**
+ * A grid gap: a `base.dimension` step (the 4px scale, so `4` is 16px), or `auto`. Before 3.0 the
+ * gap props took `base.spacing` keys, which had the same values (#188).
+ */
+type GridGap = keyof Tokens['base']['dimension'] | 'auto';
 interface GridProps {
     cols?: number;
-    gap?: keyof Tokens['base']['spacing'];
-    gapX?: keyof Tokens['base']['spacing'];
-    gapY?: keyof Tokens['base']['spacing'];
+    gap?: GridGap;
+    gapX?: GridGap;
+    gapY?: GridGap;
     className?: string;
     /** Test identifier for automated testing */
     'data-testid'?: string;
@@ -34,21 +39,21 @@ interface ResponsiveGridProps {
     colsMd?: number;
     colsLg?: number;
     colsXl?: number;
-    gap?: keyof Tokens['base']['spacing'];
-    gapSm?: keyof Tokens['base']['spacing'];
-    gapMd?: keyof Tokens['base']['spacing'];
-    gapLg?: keyof Tokens['base']['spacing'];
-    gapXl?: keyof Tokens['base']['spacing'];
-    gapX?: keyof Tokens['base']['spacing'];
-    gapXSm?: keyof Tokens['base']['spacing'];
-    gapXMd?: keyof Tokens['base']['spacing'];
-    gapXLg?: keyof Tokens['base']['spacing'];
-    gapXXl?: keyof Tokens['base']['spacing'];
-    gapY?: keyof Tokens['base']['spacing'];
-    gapYSm?: keyof Tokens['base']['spacing'];
-    gapYMd?: keyof Tokens['base']['spacing'];
-    gapYLg?: keyof Tokens['base']['spacing'];
-    gapYXl?: keyof Tokens['base']['spacing'];
+    gap?: GridGap;
+    gapSm?: GridGap;
+    gapMd?: GridGap;
+    gapLg?: GridGap;
+    gapXl?: GridGap;
+    gapX?: GridGap;
+    gapXSm?: GridGap;
+    gapXMd?: GridGap;
+    gapXLg?: GridGap;
+    gapXXl?: GridGap;
+    gapY?: GridGap;
+    gapYSm?: GridGap;
+    gapYMd?: GridGap;
+    gapYLg?: GridGap;
+    gapYXl?: GridGap;
     className?: string;
     /** Test identifier for automated testing */
     'data-testid'?: string;

package/dist/components/layout/GridSystem/GridSystem.mjs

@@ -1,14 +1,16 @@
 'use client';
-import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { __assign, __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
 import { jsx } from 'react/jsx-runtime';
 import styled$module, { css } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
 
-// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
-// so they are looked up in base.spacing until they accept semantic keys.
-// eslint-disable-next-line no-restricted-syntax
-var gapSpacing = tokens.base.spacing;
+// Exception to decision 0014: the gap props are typed as base dimension keys (public API),
+// so they are looked up in the base tier until they accept semantic keys.
+var gapSpacing = __assign(__assign({}, tokens.base.dimension), {
+  // eslint-disable-next-line no-restricted-syntax
+  auto: tokens.base.spacing.auto
+});
 // Breakpoints using base tokens
 var breakpoints = {
   xs: tokens.semantic.breakpoint.xs,

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/AgentInput/AgentInput.d.mts

@@ -35,6 +35,11 @@ export interface AgentInputProps {
     maxLength?: number;
     disabled?: boolean;
     isSubmitting?: boolean;
+    /**
+     * Web Speech API voice capture, with a mic control in the field, where the browser supports it.
+     * Off by default from 3.0 (#266): a product turns it on when it handles voice.
+     * @default false
+     */
     enableVoice?: boolean;
     autoSubmitOnVoiceFinal?: boolean;
     voiceLanguage?: string;

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

@@ -35,6 +35,11 @@ export interface AgentInputProps {
     maxLength?: number;
     disabled?: boolean;
     isSubmitting?: boolean;
+    /**
+     * Web Speech API voice capture, with a mic control in the field, where the browser supports it.
+     * Off by default from 3.0 (#266): a product turns it on when it handles voice.
+     * @default false
+     */
     enableVoice?: boolean;
     autoSubmitOnVoiceFinal?: boolean;
     voiceLanguage?: string;

package/dist/components/molecules/AgentInput/AgentInput.mjs

@@ -236,7 +236,7 @@ function AgentInputWithRef(_a, ref) {
     disabled = _e === void 0 ? false : _e,
     isSubmitting = _a.isSubmitting,
     _f = _a.enableVoice,
-    enableVoice = _f === void 0 ? true : _f,
+    enableVoice = _f === void 0 ? false : _f,
     _g = _a.autoSubmitOnVoiceFinal,
     autoSubmitOnVoiceFinal = _g === void 0 ? true : _g,
     _h = _a.voiceLanguage,

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

@@ -41,14 +41,6 @@ export interface AlertProps {
      * Optional action button or component, placed below the message and left-aligned with it
      */
     action?: React.ReactNode;
-    /**
-     * Compact inline variant with reduced padding
-     * @default false
-     * @deprecated Use `InlineAlert` for a short, local message (decision 0019). `inline` keeps
-     * working until it is removed in 3.0. An inline alert that needs a title, action or dismiss
-     * button stays an Alert.
-     */
-    inline?: boolean;
     /**
      * ARIA live region behavior
      * - polite: Non-urgent announcements
@@ -63,6 +55,6 @@ export interface AlertProps {
     'data-testid'?: string;
 }
 export declare const Alert: {
-    ({ variant, appearance, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ variant, appearance, children, title, dismissible, onDismiss, action, ariaLive, "data-testid": dataTestId, ...restProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -41,14 +41,6 @@ export interface AlertProps {
      * Optional action button or component, placed below the message and left-aligned with it
      */
     action?: React.ReactNode;
-    /**
-     * Compact inline variant with reduced padding
-     * @default false
-     * @deprecated Use `InlineAlert` for a short, local message (decision 0019). `inline` keeps
-     * working until it is removed in 3.0. An inline alert that needs a title, action or dismiss
-     * button stays an Alert.
-     */
-    inline?: boolean;
     /**
      * ARIA live region behavior
      * - polite: Non-urgent announcements
@@ -63,6 +55,6 @@ export interface AlertProps {
     'data-testid'?: string;
 }
 export declare const Alert: {
-    ({ variant, appearance, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ variant, appearance, children, title, dismissible, onDismiss, action, ariaLive, "data-testid": dataTestId, ...restProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -62,13 +62,7 @@ var StyledAlert = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Alert__StyledAlert",
   componentId: "sc-18tq5d-0"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic.space[200] : semantic.space[300];
-}, function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic.space[200] : semantic.space[300];
-}, semantic.radius.sm, semantic.border.width.thin, function (_a) {
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), semantic.space[300], semantic.space[300], semantic.radius.sm, semantic.border.width.thin, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'info' : _b;
   return alert.severity[$variant].background;
@@ -81,10 +75,7 @@ var StyledAlert = /*#__PURE__*/styled.div.withConfig({
     $variant = _b === void 0 ? 'info' : _b,
     $appearance = _a.$appearance;
   return alert.appearance[$appearance].borderColor[$variant];
-}, semantic.breakpoint.md, function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? semantic.space[200] : semantic.space[400];
-}, function (_a) {
+}, semantic.breakpoint.md, semantic.space[400], function (_a) {
   var $isExiting = _a.$isExiting,
     $reducedExit = _a.$reducedExit;
   return $isExiting && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration.fast, easing.accelerate) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing.accelerate));
@@ -100,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"
@@ -130,21 +121,16 @@ var StyledDismissSlot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Alert__StyledDismissSlot",
   componentId: "sc-18tq5d-6"
 })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"
-// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
-// alert's padding is too small for that, so its button stays inside the padding.
+// The glyph sits on the padding edge, mirroring the severity icon on the left
 ])), function (_a) {
   var $lineHeight = _a.$lineHeight;
   return $lineHeight;
 });
-// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
-// alert's padding is too small for that, so its button stays inside the padding.
+// The glyph sits on the padding edge, mirroring the severity icon on the left
 var StyledDismissButton = /*#__PURE__*/styled(IconButton).withConfig({
   displayName: "Alert__StyledDismissButton",
   componentId: "sc-18tq5d-7"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
-  var $inline = _a.$inline;
-  return $inline ? 0 : "calc((".concat(semantic.size.control.sm, " - ").concat(semantic.size.icon.sm, ") / -2)");
-});
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin-right: calc((", " - ", ") / -2);\n"], ["\n  margin-right: calc((", " - ", ") / -2);\n"])), semantic.size.control.sm, semantic.size.icon.sm);
 var Alert = function Alert(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'info' : _b,
@@ -156,12 +142,15 @@ var Alert = function Alert(_a) {
     dismissible = _d === void 0 ? false : _d,
     onDismiss = _a.onDismiss,
     action = _a.action,
-    _e = _a.inline,
-    inline = _e === void 0 ? false : _e,
-    _f = _a.ariaLive,
-    ariaLive = _f === void 0 ? 'polite' : _f,
+    _e = _a.ariaLive,
+    ariaLive = _e === void 0 ? 'polite' : _e,
     dataTestId = _a["data-testid"],
-    props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
+    restProps = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "ariaLive", 'data-testid']);
+  // `inline` was removed in 3.0 (use InlineAlert, decision 0019); plain JavaScript that still
+  // passes it gets a block alert, with the prop kept off the DOM
+  var _f = restProps;
+    _f.inline;
+    var props = __rest(_f, ["inline"]);
   var _g = React.useState('visible'),
     phase = _g[0],
     setPhase = _g[1];
@@ -237,7 +226,6 @@ var Alert = function Alert(_a) {
     "aria-live": ariaLive,
     "$variant": variant,
     "$appearance": appearance,
-    "$inline": inline,
     "$isExiting": isExiting,
     "$reducedExit": reducedExit,
     "data-testid": dataTestId
@@ -270,7 +258,6 @@ var Alert = function Alert(_a) {
         iconName: "close",
         size: "small",
         variant: "naked",
-        "$inline": inline,
         onClick: handleDismiss,
         "aria-label": "Dismiss alert",
         "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined

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

@@ -1,7 +1,6 @@
 import React from 'react';
 export type ChipGroupProps = {
     labels: string[];
-    variant?: 'default' | 'dark';
     'data-testid'?: string;
 };
 export declare const ChipGroup: React.FC<ChipGroupProps>;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 export type ChipGroupProps = {
     labels: string[];
-    variant?: 'default' | 'dark';
     'data-testid'?: string;
 };
 export declare const ChipGroup: React.FC<ChipGroupProps>;

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

@@ -7,7 +7,6 @@ import '../../atoms/Avatar/Avatar.mjs';
 import '../../atoms/Badge/Badge.mjs';
 import '../../atoms/Box/Box.mjs';
 import '../../atoms/Button/Button.mjs';
-import '../../atoms/CategoryBadge/CategoryBadge.mjs';
 import '../../atoms/CategoryLabel/CategoryLabel.mjs';
 import { Chip } from '../../atoms/Chip/Chip.mjs';
 import '../../atoms/Icon/Icon.mjs';
@@ -21,9 +20,9 @@ import '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
 import '../../atoms/ProgressBar/ProgressBar.mjs';
 import '../../atoms/Divider/Divider.mjs';
 import { Stack } from '../../atoms/Stack/Stack.mjs';
-import '../../atoms/StatusBadge/StatusBadge.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';
 
@@ -33,8 +32,6 @@ var ChipGroupWrapper = /*#__PURE__*/styled.div.withConfig({
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b,
     dataTestId = _a["data-testid"];
   return jsx(ChipGroupWrapper, {
     "data-testid": dataTestId,
@@ -43,8 +40,7 @@ var ChipGroup = function ChipGroup(_a) {
       gap: "sm",
       children: labels && labels.map(function (title, index) {
         return jsx(Chip, {
-          title: title,
-          variant: variant
+          title: title
         }, index);
       })
     })

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

@@ -6,8 +6,7 @@ export interface DateGroupProps {
     /** Children to render under the date header (typically transactions) */
     children: React.ReactNode;
     /**
-     * Format mode for the date header, passed to DateFormatter's `mode`. `'relative'` is
-     * deprecated: it behaves exactly like `'smart'`, so use `'smart'` (#82).
+     * Format mode for the date header, passed to DateFormatter's `mode`.
      */
     format?: DateFormatMode;
     /** Whether to show total amount for this date group */

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

@@ -6,8 +6,7 @@ export interface DateGroupProps {
     /** Children to render under the date header (typically transactions) */
     children: React.ReactNode;
     /**
-     * Format mode for the date header, passed to DateFormatter's `mode`. `'relative'` is
-     * deprecated: it behaves exactly like `'smart'`, so use `'smart'` (#82).
+     * Format mode for the date header, passed to DateFormatter's `mode`.
      */
     format?: DateFormatMode;
     /** Whether to show total amount for this date group */

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 {};