@common-origin/design-system 3.1.0 → 3.3.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
- * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
+ * Badge variants: `default`, the count on the strongest neutral fill, and `accent`, the blue highlight (decision 0045).
  */
 export type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
@@ -12,7 +12,7 @@ export interface BadgeProps {
     max?: number;
     /**
      * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
-     * the blue highlight, and `default` the near-black count. A badge's colour alone can't carry a
+     * the blue highlight, and `default` the count on the strongest neutral fill. A badge's colour alone can't carry a
      * status, so a count of items with a status uses the status pattern instead ("3 failed" with
      * StatusLabel).
      * @default 'default'

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

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
- * Badge variants: `default`, the near-black count, and `accent`, the blue highlight (decision 0045).
+ * Badge variants: `default`, the count on the strongest neutral fill, and `accent`, the blue highlight (decision 0045).
  */
 export type BadgeVariant = 'default' | 'accent';
 export interface BadgeProps {
@@ -12,7 +12,7 @@ export interface BadgeProps {
     max?: number;
     /**
      * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
-     * the blue highlight, and `default` the near-black count. A badge's colour alone can't carry a
+     * the blue highlight, and `default` the count on the strongest neutral fill. A badge's colour alone can't carry a
      * status, so a count of items with a status uses the status pattern instead ("3 failed" with
      * StatusLabel).
      * @default 'default'

package/dist/components/atoms/Badge/Badge.mjs

@@ -5,7 +5,6 @@ import styled$module, { keyframes } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { reducedMotion, forcedColors, visuallyHidden } from '../../../lib/styleUtils.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
-import { Typography } from '../Typography/Typography.mjs';
 
 var semantic = tokens.semantic;
 var color = semantic.color;
@@ -25,7 +24,10 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"])), function (props) {
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  box-shadow: 0 0 0 ", " ", ";\n  animation: ", " ", " ", ";\n\n  ", " {\n    animation: none;\n  }\n\n  /* Forced colours drop fills (decision 0038): a dot is only a fill, so it keeps one in the\n     text colour; a count gets an edge around its number */\n  ", "\n  \n  ", "\n"
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? dot.size : count.minWidth;
@@ -38,15 +40,21 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
 }, function (props) {
   switch (props.$variant) {
     case 'accent':
-      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text['on-fill'], ";\n        ");
     default:
       return "\n          background-color: ".concat(color.fill.emphasis, ";\n          color: ").concat(color.text.inverse, ";\n        ");
   }
 });
+// The count takes the indicator's colour, so each variant's content colour reaches it: inverse on
+// the strong fill, on-fill on the accent fill (decision 0056)
+var Count = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Badge__Count",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  text-transform: uppercase;\n"], ["\n  font: ", ";\n  text-transform: uppercase;\n"])), semantic.typography.caption);
 var ScreenReaderOnly = /*#__PURE__*/styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
-  componentId: "sc-tjz4pp-2"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+  componentId: "sc-tjz4pp-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -74,9 +82,7 @@ var Badge = function Badge(_a) {
       "$isVisible": isVisible,
       role: "status",
       "aria-live": "polite",
-      children: [!dot && jsx(Typography, {
-        variant: "caption",
-        color: "inverse",
+      children: [!dot && jsx(Count, {
         children: displayCount
       }), jsx(ScreenReaderOnly, {
         children: label
@@ -84,7 +90,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 export { Badge };
 //# sourceMappingURL=Badge.mjs.map

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

@@ -47,8 +47,9 @@ export interface BoxProps {
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
-     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards),
+     * `surface.overlay` (floating layers such as menus and dialogs), `surface.scrim`, or a
+     * `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

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

@@ -47,8 +47,9 @@ export interface BoxProps {
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
     /**
-     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
-     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`.
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards),
+     * `surface.overlay` (floating layers such as menus and dialogs), `surface.scrim`, or a
+     * `color.fill.*` fill such as `color.fill.muted`.
      */
     bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];

package/dist/components/atoms/Button/Button.mjs

@@ -15,7 +15,7 @@ var button = tokens.component.button,
 var inset = semantic.space.inset;
 var control = semantic.size.control;
 // Base styles shared between button and link
-var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
 // Dynamic variant styles using component tokens
 var getVariantStyles = function getVariantStyles(_a) {
   var _b;

package/dist/components/atoms/Chip/shared/ChipBase.mjs

@@ -36,7 +36,7 @@ var CloseButton = /*#__PURE__*/styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic.size.label.medium, semantic.size.label.medium, tokens.semantic.radius.xs, function (props) {
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic.size.label.medium, semantic.size.label.medium, tokens.semantic.radius.full, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, semantic.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic.border.focusOffset, chip["default"].borderRadius);
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -8,7 +8,7 @@ export interface IconProps {
     /**
      * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
      * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
-     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * human-readable name, never the internal icon name; the icon's `ariaLabelDefault` in `iconSet` is a
      * starting point.
      */
     'aria-label'?: string;

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

@@ -8,7 +8,7 @@ export interface IconProps {
     /**
      * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
      * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
-     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * human-readable name, never the internal icon name; the icon's `ariaLabelDefault` in `iconSet` is a
      * starting point.
      */
     'aria-label'?: string;

package/dist/components/atoms/Icon/Icon.mjs

@@ -1,10 +1,11 @@
 'use client';
 import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import iconsJson from '../../../styles/icons.json.mjs';
+import { iconSet } from '../../../types/iconSet.mjs';
 
 var IconStyled = /*#__PURE__*/styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -12,7 +13,10 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -45,6 +49,25 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
       return tokens.semantic.color.icon["default"];
   }
 });
+// How each paint draws, in currentColor. Lines are 2px on the 24px grid, so they scale with the
+// icon (decision 0058).
+var LINE = {
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+};
+var PAINT = {
+  stroke: __assign({
+    fill: 'none'
+  }, LINE),
+  fill: {
+    fill: 'currentColor'
+  },
+  both: __assign({
+    fill: 'currentColor'
+  }, LINE)
+};
 var Icon = function Icon(_a) {
   var name = _a.name,
     _b = _a.size,
@@ -56,10 +79,9 @@ var Icon = function Icon(_a) {
     dataTestId = _a["data-testid"];
   // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
   var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
-  // Get the icon data from the JSON file
-  var iconData = iconsJson[name];
-  if (!iconData) {
-    console.warn("Icon \"".concat(name, "\" not found in icons.json"));
+  var icon = iconSet[name];
+  if (!icon) {
+    console.warn("Icon \"".concat(name, "\" not found in iconSet"));
     return jsx(IconStyled, {
       "$size": size,
       "$iconColor": iconColor,
@@ -72,9 +94,8 @@ var Icon = function Icon(_a) {
     "data-testid": dataTestId,
     children: jsxs("svg", __assign({
       viewBox: "0 0 24 24",
-      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg"
-    }, label ? {
+    }, PAINT[icon.paint], label ? {
       role: 'img',
       'aria-label': label
     } : {
@@ -83,8 +104,12 @@ var Icon = function Icon(_a) {
     }, {
       children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsx("title", {
         children: title
-      }), jsx("path", {
-        d: iconData.path
+      }), icon.elements.map(function (_a, index) {
+        var tag = _a[0],
+          attributes = _a[1];
+        return /*#__PURE__*/React.createElement(tag, __assign({
+          key: index
+        }, attributes));
       })]
     }))
   });

package/dist/components/atoms/IconButton/IconButton.mjs

@@ -66,7 +66,7 @@ var IconButtonStyled = /*#__PURE__*/styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  /* The system ring for keyboard focus only: a click doesn't leave it behind (P2, P5) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
   var $variant = _a.$variant;
   return colours($variant).bg;
 }, function (_a) {

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

@@ -4,7 +4,7 @@ export interface ProgressBarProps {
     value: number;
     /** Orientation of the progress bar */
     variant?: 'horizontal' | 'vertical';
-    /** Fill colour: `default` is near-black (`background.emphasis`); `success` and `error` use their status colours */
+    /** Fill colour: `default` is the strongest neutral fill (`color.fill.emphasis`: near-black in light, near-white in dark); `success` and `error` use their status colours */
     color?: 'success' | 'error' | 'default';
     /** Height size for horizontal progress bar (default: md) */
     height?: 'sm' | 'md' | 'lg' | 'xl';

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

@@ -4,7 +4,7 @@ export interface ProgressBarProps {
     value: number;
     /** Orientation of the progress bar */
     variant?: 'horizontal' | 'vertical';
-    /** Fill colour: `default` is near-black (`background.emphasis`); `success` and `error` use their status colours */
+    /** Fill colour: `default` is the strongest neutral fill (`color.fill.emphasis`: near-black in light, near-white in dark); `success` and `error` use their status colours */
     color?: 'success' | 'error' | 'default';
     /** Height size for horizontal progress bar (default: md) */
     height?: 'sm' | 'md' | 'lg' | 'xl';

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

@@ -5,7 +5,7 @@ export interface TagProps {
      */
     children: React.ReactNode;
     /**
-     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (the strongest neutral fill) to make a
      * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */

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

@@ -5,7 +5,7 @@ export interface TagProps {
      */
     children: React.ReactNode;
     /**
-     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (the strongest neutral fill) to make a
      * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */

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

@@ -23,6 +23,12 @@ export interface TooltipProps {
      * @default 'center'
      */
     align?: TooltipAlign;
+    /**
+     * Turns the tooltip off while keeping the trigger where it is, such as when the label it repeats
+     * is visible. Changing it never remounts the trigger.
+     * @default false
+     */
+    disabled?: boolean;
     /** One focusable element: the trigger */
     children: React.ReactElement;
     /** Test identifier for the tooltip bubble */
@@ -36,6 +42,6 @@ export interface TooltipProps {
  * 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;
+    ({ text, kind, side, align, disabled, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -23,6 +23,12 @@ export interface TooltipProps {
      * @default 'center'
      */
     align?: TooltipAlign;
+    /**
+     * Turns the tooltip off while keeping the trigger where it is, such as when the label it repeats
+     * is visible. Changing it never remounts the trigger.
+     * @default false
+     */
+    disabled?: boolean;
     /** One focusable element: the trigger */
     children: React.ReactElement;
     /** Test identifier for the tooltip bubble */
@@ -36,6 +42,6 @@ export interface TooltipProps {
  * 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;
+    ({ text, kind, side, align, disabled, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -70,6 +70,8 @@ var Tooltip = function Tooltip(_a) {
     side = _c === void 0 ? 'top' : _c,
     _d = _a.align,
     align = _d === void 0 ? 'center' : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
     children = _a.children,
     dataTestId = _a["data-testid"];
   var descriptionId = useId();
@@ -82,12 +84,20 @@ var Tooltip = function Tooltip(_a) {
   })[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 _f = useState(false),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
+  // Turned off while showing (its label became visible): close it on the same render
+  var _g = useState(disabled),
+    wasDisabled = _g[0],
+    setWasDisabled = _g[1];
+  if (wasDisabled !== disabled) {
+    setWasDisabled(disabled);
+    if (disabled) setIsOpen(false);
+  }
+  var _h = usePresence(isOpen),
+    isPresent = _h.isPresent,
+    isExiting = _h.isExiting;
   var clearTimers = function clearTimers() {
     clearTimeout(openTimer.current);
     clearTimeout(closeTimer.current);
@@ -111,7 +121,7 @@ var Tooltip = function Tooltip(_a) {
   }, [owner, close]);
   var scheduleOpen = function scheduleOpen() {
     clearTimeout(closeTimer.current);
-    if (isOpen) return;
+    if (isOpen || disabled) 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();
@@ -168,7 +178,7 @@ var Tooltip = function Tooltip(_a) {
         pressed.current = false;
         return;
       }
-      if (isKeyboardFocus(event.target)) open();
+      if (!disabled && isKeyboardFocus(event.target)) open();
     },
     onBlur: function onBlur() {
       // A press on an already focused trigger has no focus to skip; don't carry it over

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

@@ -32,7 +32,7 @@ var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
 var StyledActionSheet = /*#__PURE__*/styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.overlay, tokens.component.overlay.borderRadius, tokens.component.overlay.borderRadius, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
 }, reducedMotion, fadeIn, motion.duration.slow, motion.easing.decelerate, function (_a) {
@@ -50,7 +50,7 @@ var StyledHeaderContent = /*#__PURE__*/styled.div.withConfig({
 var StyledCloseButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "ActionSheet__StyledCloseButton",
   componentId: "sc-regbol-4"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.sm, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.md, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
 var StyledActionsList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "ActionSheet__StyledActionsList",
   componentId: "sc-regbol-5"

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

@@ -62,7 +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"])), semantic.space[300], 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.lg, semantic.border.width.thin, function (_a) {
   var _b = _a.$variant,
     $variant = _b === void 0 ? 'info' : _b;
   return alert.severity[$variant].background;

package/dist/components/molecules/Checkbox/SelectableInputBase.mjs

@@ -36,7 +36,7 @@ var StyledCheckbox = /*#__PURE__*/styled.span.withConfig({
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
- */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.input["default"].borderRadius, tokens.component.input["default"].borderWidth, function (props) {
+ */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.borderRadius, tokens.component.input["default"].borderWidth, function (props) {
   return props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return tokens.component.input.error.borderColor;

package/dist/components/molecules/Dropdown/Dropdown.mjs

@@ -66,7 +66,7 @@ var DropdownMenu = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border["default"], input["default"].borderRadius, elevation.floating, space[100], function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  /* The panel radius Menu and SearchField share, not the control token (decision 0055) */\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  /* The panel radius Menu and SearchField share, not the control token (decision 0055) */\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, tokens.semantic.surface.overlay, border["default"], tokens.semantic.radius.md, elevation.floating, space[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {

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

@@ -7,7 +7,7 @@ const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { Typography } from '../../atoms/Typography/Typography.mjs';
-import { interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { rowRadius, interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
 import { ListSpacingContext } from './ListContext.mjs';
 
 var semantic = tokens.semantic;
@@ -40,7 +40,7 @@ var StyledItemContent = /*#__PURE__*/styled.div.withConfig({
 })(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.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) {
+}, rowRadius, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
   var $interactive = _a.$interactive,
     $disabled = _a.$disabled;
   if ($disabled) return 'not-allowed';
@@ -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    /* 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  ");
+  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(rowRadius, ";\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

@@ -29,6 +29,13 @@ export interface MenuProps {
      * @default 'start'
      */
     align?: MenuAlign;
+    /**
+     * Makes the menu at least as wide as its trigger, for a full-width trigger such as
+     * WorkspaceSwitcher's, so the two line up. It still grows with its content, up to the usual
+     * maximum, and never goes below the usual minimum for a small trigger.
+     * @default false
+     */
+    matchTriggerWidth?: boolean;
     /** Test identifier for the menu */
     'data-testid'?: string;
 }
@@ -37,7 +44,7 @@ export interface MenuProps {
  * 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;
+    ({ trigger, children, open: openProp, defaultOpen, onOpenChange, side, align, matchTriggerWidth, "data-testid": dataTestId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 interface ItemBaseProps {

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

@@ -29,6 +29,13 @@ export interface MenuProps {
      * @default 'start'
      */
     align?: MenuAlign;
+    /**
+     * Makes the menu at least as wide as its trigger, for a full-width trigger such as
+     * WorkspaceSwitcher's, so the two line up. It still grows with its content, up to the usual
+     * maximum, and never goes below the usual minimum for a small trigger.
+     * @default false
+     */
+    matchTriggerWidth?: boolean;
     /** Test identifier for the menu */
     'data-testid'?: string;
 }
@@ -37,7 +44,7 @@ export interface MenuProps {
  * 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;
+    ({ trigger, children, open: openProp, defaultOpen, onOpenChange, side, align, matchTriggerWidth, "data-testid": dataTestId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 interface ItemBaseProps {