@common-origin/design-system 3.1.0 → 3.3.0

package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.mjs

@@ -0,0 +1,69 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { reducedMotion } from '../../../lib/styleUtils.mjs';
+
+// How SidebarNav's pieces move between expanded and the rail (issue 348), shared by the nav, its rows
+// and its sections so they move as one: nothing unmounts or re-lays out mid-move.
+var semantic = tokens.semantic,
+  component = tokens.component;
+var motion = semantic.motion,
+  space = semantic.space,
+  size = semantic.size;
+/**
+ * SidebarNav sets this on itself: its expanded width. Content inside keeps that width while the nav
+ * narrows, so the nav's edge clips it instead of it reflowing or ellipsising mid-move.
+ */
+var EXPANDED_WIDTH_VAR = '--co-sidebar-nav-expanded';
+/**
+ * SidebarNav sets this to its body's scrollbar width (0 for overlay scrollbars), measured while
+ * expanded, since a classic scrollbar narrows every row
+ */
+var SCROLLBAR_VAR = '--co-sidebar-nav-scrollbar';
+/** The nav's own side padding: the rail's inner width is the rail less twice this */
+var NAV_PADDING = space[200];
+/** A row's left inset: centres an icon in the rail, and stays the same expanded, so icons never move */
+var ROW_INSET = "calc((".concat(component.sidebarNav.width.rail, " - 2 * ").concat(NAV_PADDING, " - ").concat(size.icon.md, ") / 2)");
+/**
+ * Fades content that the rail doesn't show (labels, meta text, the badge count, the header and
+ * footer). Leaving is quick and accelerates; arriving decelerates over the width's duration (0037).
+ * Hidden content also leaves the keyboard and screen readers once the fade ends.
+ */
+var fade = function fade(hidden) {
+  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: ", ";\n  /* Shown content inherits, so anything hidden around it (a folded section) still wins */\n  visibility: ", ";\n  transition: ", ";\n"], ["\n  opacity: ", ";\n  /* Shown content inherits, so anything hidden around it (a folded section) still wins */\n  visibility: ", ";\n  transition: ", ";\n"
+  /**
+   * Folds something away (its height animates to nothing, with a fade), for what the rail leaves out:
+   * a section's header, a section with nothing to show, an item without an icon. Under reduced motion
+   * the height changes at once and only the fade remains (0015).
+   */])), hidden ? 0 : 1, hidden ? 'hidden' : 'inherit', hidden ? "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.accelerate, ", visibility ").concat(motion.duration.fast, " ").concat(motion.easing.accelerate) : "opacity ".concat(motion.duration.moderate, " ").concat(motion.easing.decelerate, ", visibility ").concat(motion.duration.moderate, " ").concat(motion.easing.decelerate));
+};
+/**
+ * Folds something away (its height animates to nothing, with a fade), for what the rail leaves out:
+ * a section's header, a section with nothing to show, an item without an icon. Under reduced motion
+ * the height changes at once and only the fade remains (0015).
+ */
+var Fold = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "sidebarNavMotion__Fold",
+  componentId: "sc-1h4byrj-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  ", "\n  transition: grid-template-rows ", " ", ",\n    ", ";\n\n  /* Clipped only while folded: once open, focus rings outside a control aren't cut off */\n  & > * {\n    min-height: 0;\n    overflow: ", ";\n  }\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  ", "\n  transition: grid-template-rows ", " ", ",\n    ", ";\n\n  /* Clipped only while folded: once open, focus rings outside a control aren't cut off */\n  & > * {\n    min-height: 0;\n    overflow: ", ";\n  }\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"])), function (_a) {
+  var $open = _a.$open;
+  return $open ? '1fr' : '0fr';
+}, function (_a) {
+  var $open = _a.$open;
+  return fade(!$open);
+}, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $open = _a.$open;
+  return $open ? "opacity ".concat(motion.duration.moderate, " ").concat(motion.easing.decelerate, ", visibility ").concat(motion.duration.moderate, " ").concat(motion.easing.decelerate) : "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.accelerate, ", visibility ").concat(motion.duration.moderate, " ").concat(motion.easing.accelerate);
+}, function (_a) {
+  var $open = _a.$open;
+  return $open ? 'visible' : 'hidden';
+}, reducedMotion, motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate);
+var templateObject_1, templateObject_2;
+
+export { EXPANDED_WIDTH_VAR, Fold, NAV_PADDING, ROW_INSET, SCROLLBAR_VAR, fade };
+//# sourceMappingURL=sidebarNavMotion.mjs.map

package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.mjs.map

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

package/dist/components/molecules/SidebarNavSection/SidebarNavSection.mjs

@@ -1,14 +1,16 @@
 'use client';
 import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useState, useEffect } from 'react';
 import styled$module, { 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 { visuallyHidden, interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { rowRadius, interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { useSidebarNav } from '../SidebarNavItem/SidebarNavContext.mjs';
+import { SidebarNavItem } from '../SidebarNavItem/SidebarNavItem.mjs';
+import { Fold } from '../SidebarNavItem/sidebarNavMotion.mjs';
 
 // How long the items take to show or hide: the clip lifts after this even if no transition ran
 // (reduced motion, or a background tab)
@@ -17,46 +19,44 @@ var semantic = tokens.semantic;
 var space = semantic.space,
   color = semantic.color,
   motion = semantic.motion,
-  radius = semantic.radius,
   size = semantic.size,
   border = semantic.border,
   typography = semantic.typography;
-var Section = /*#__PURE__*/styled.div.withConfig({
+// The space above a section is the same expanded and in the rail, so the switch never shifts rows;
+// only the rule's colour changes: clear when the label separates the section, visible in the rail,
+// where there's no label (issue 348)
+var Section = /*#__PURE__*/styled(Fold).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Section",
   componentId: "sc-16cbmnb-0"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* In the rail there's no label, so a rule separates sections */\n  ", "\n"], ["\n  /* In the rail there's no label, so a rule separates sections */\n  ", "\n"])), function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"], ["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"])), space[200], space[100], border.width.thin, function (_a) {
   var $collapsed = _a.$collapsed;
-  return $collapsed && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: ", ";\n      padding-top: ", ";\n      margin-top: ", ";\n\n      /* Nothing above to separate it from */\n      &:first-child {\n        border-top: none;\n        padding-top: 0;\n        margin-top: 0;\n      }\n    "], ["\n      border-top: ", ";\n      padding-top: ", ";\n      margin-top: ", ";\n\n      /* Nothing above to separate it from */\n      &:first-child {\n        border-top: none;\n        padding-top: 0;\n        margin-top: 0;\n      }\n    "])), border["default"], space[100], space[100]);
+  return $collapsed ? color.border["default"] : 'transparent';
 });
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNavSection__Header",
   componentId: "sc-16cbmnb-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"
 // The label's look: quiet, small and muted, so the items lead
 ])), space[100], size.row.sm);
 // The label's look: quiet, small and muted, so the items lead
-var labelText = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var labelText = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
 var StaticLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNavSection__StaticLabel",
   componentId: "sc-16cbmnb-2"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"], ["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"])), labelText, space.inset.sm);
-var HiddenLabel = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SidebarNavSection__HiddenLabel",
-  componentId: "sc-16cbmnb-3"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyHidden);
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"], ["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"])), labelText, space.inset.sm);
 var Disclosure = /*#__PURE__*/styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Disclosure",
-  componentId: "sc-16cbmnb-4"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"
+  componentId: "sc-16cbmnb-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"
 // The items' height animates from nothing to their own height with grid rows, so no
 // "no limit" max-height is needed. Once hidden, the items leave the keyboard and screen readers.
-])), labelText, space[100], size.row.sm, space.inset.sm, radius.sm, motion.duration.fast, motion.easing.decelerate, interactiveRow(), border.focus, border.focusOffset, motion.duration.fast, motion.easing.standard, function (_a) {
+])), labelText, space[100], size.row.sm, space.inset.sm, rowRadius, motion.duration.fast, motion.easing.decelerate, interactiveRow(), border.focus, border.focusOffset, motion.duration.fast, motion.easing.standard, function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '0deg' : '-90deg';
 }, reducedMotion);
@@ -67,24 +67,27 @@ var Collapse = /*#__PURE__*/styled.div.withConfig({
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__Collapse",
-  componentId: "sc-16cbmnb-5"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  visibility: ", ";\n  transition: grid-template-rows ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  visibility: ", ";\n  transition: grid-template-rows ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"
+  componentId: "sc-16cbmnb-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"
 // Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
 ])), function (_a) {
   var $expanded = _a.$expanded;
   return $expanded ? '1fr' : '0fr';
 }, function (_a) {
   var $expanded = _a.$expanded;
-  return $expanded ? 'visible' : 'hidden';
-}, motion.duration.moderate, motion.easing.standard, motion.duration.moderate, motion.easing.standard, reducedMotion);
+  return $expanded ? 1 : 0;
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 'inherit' : 'hidden';
+}, motion.duration.moderate, motion.easing.decelerate, motion.duration.moderate, motion.easing.decelerate, motion.duration.moderate, motion.easing.decelerate, reducedMotion, motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate);
 // Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
 var List = /*#__PURE__*/styled.ul.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "SidebarNavSection__List",
-  componentId: "sc-16cbmnb-6"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"
+  componentId: "sc-16cbmnb-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"
 /**
  * A labelled group of SidebarNavItems (#328), optionally collapsible, with one optional action.
  * In the rail its label and action are hidden and a rule separates it from the section above.
@@ -137,12 +140,14 @@ var SidebarNavSection = function SidebarNavSection(_a) {
     if (!isControlled) setUncontrolledExpanded(next);
     onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
   };
-  var header = collapsed ?
-  // The rail shows no label, but the list keeps its name
-  jsx(HiddenLabel, {
-    id: labelId,
-    children: label
-  }) : jsxs(Header, {
+  // The rail shows items by their icons only; a section with none has nothing to show there, so it
+  // isn't drawn at all, not even its separating rule. Items wrapped in other components count as
+  // showing, since their icons can't be seen from here.
+  var showsInRail = React.Children.toArray(children).some(function (child) {
+    return ! /*#__PURE__*/React.isValidElement(child) || child.type !== SidebarNavItem || Boolean(child.props.icon);
+  });
+  // The header stays mounted, folding away in the rail; the list keeps its name from it there
+  var header = jsxs(Header, {
     children: [collapsible ? jsxs(Disclosure, {
       type: "button",
       id: labelId,
@@ -162,27 +167,36 @@ var SidebarNavSection = function SidebarNavSection(_a) {
   });
   return (
     // In a SidebarNav the body is one list, so the section is one of its items
-    jsxs(Section, {
+    // In the rail, a section with nothing to show folds away, rule and all
+    jsx(Section, {
       as: inNav ? 'li' : 'div',
+      "$open": !collapsed || showsInRail,
       "$collapsed": collapsed,
       "data-testid": dataTestId,
-      children: [header, jsx(Collapse, {
-        "$expanded": expanded,
-        onTransitionEnd: function onTransitionEnd(event) {
-          if (event.target === event.currentTarget && event.propertyName === 'grid-template-rows') setAnimating(false);
-        },
-        children: jsx(List, {
-          id: listId,
-          "aria-labelledby": labelId,
-          "$clip": !expanded || animating,
-          children: children
-        })
-      })]
+      children: jsxs("div", {
+        children: [jsx(Fold, {
+          "$open": !collapsed,
+          children: jsx("div", {
+            children: header
+          })
+        }), jsx(Collapse, {
+          "$expanded": expanded,
+          onTransitionEnd: function onTransitionEnd(event) {
+            if (event.target === event.currentTarget && event.propertyName === 'grid-template-rows') setAnimating(false);
+          },
+          children: jsx(List, {
+            id: listId,
+            "aria-labelledby": labelId,
+            "$clip": !expanded || animating,
+            children: children
+          })
+        })]
+      })
     })
   );
 };
 SidebarNavSection.displayName = 'SidebarNavSection';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 export { SidebarNavSection };
 //# sourceMappingURL=SidebarNavSection.mjs.map

package/dist/components/molecules/TabBar/TabBar.mjs

@@ -5,7 +5,7 @@ import { useRef, useState, useEffect } from 'react';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { forcedColors } from '../../../lib/styleUtils.mjs';
+import { rowRadius, forcedColors } from '../../../lib/styleUtils.mjs';
 
 var semantic = tokens.semantic;
 var StyledTabList = /*#__PURE__*/styled.div.withConfig({
@@ -20,7 +20,7 @@ var StyledTab = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1g9ib0y-1"
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.space[200], semantic.space[300], semantic.space[400], tokens.component.button.sizes.medium.font, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic.motion.transition.feedback, semantic.radius.sm, semantic.radius.sm, function (props) {
+}, semantic.motion.transition.feedback, rowRadius, rowRadius, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted'] : 'transparent';
 }, function (props) {
   return props.$isActive ? semantic.color.text.accent : semantic.color.text.muted;
@@ -63,7 +63,7 @@ var StyledBadge = /*#__PURE__*/styled.span.withConfig({
  *   onTabChange={setActiveTab}
  * />
  * ```
- */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text.inverse);
+ */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text['on-fill']);
 /**
  * TabBar component for tabbed navigation
  *

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs

@@ -26,7 +26,7 @@ var Trigger = /*#__PURE__*/styled.button.withConfig({
   },
   displayName: "WorkspaceSwitcher__Trigger",
   componentId: "sc-s35ke-0"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.sm, radius.sm, typography.label, color.text["default"], motion.duration.fast, motion.easing.decelerate, interactiveRow(), function (_a) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.sm, radius.md, typography.label, color.text["default"], motion.duration.fast, motion.easing.decelerate, interactiveRow(), function (_a) {
   var $collapsed = _a.$collapsed;
   return $collapsed && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n      padding: ", ";\n    "], ["\n      justify-content: center;\n      padding: ", ";\n    "])), space.inset.xs);
 }, border.focus, border.focusOffset);
@@ -98,6 +98,8 @@ var WorkspaceSwitcher = function WorkspaceSwitcher(_a) {
     }) : trigger,
     side: collapsed ? 'right' : 'bottom',
     align: "start",
+    // Lines up with the full-width trigger beneath it (issue 350)
+    matchTriggerWidth: true,
     children: [jsx(MenuGroup, {
       label: label,
       children: workspaces.map(function (workspace) {