@common-origin/design-system 3.1.0 → 3.2.0

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) {

package/dist/components/organisms/SidebarNav/SidebarNav.mjs

@@ -1,23 +1,23 @@
 'use client';
 import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
-import styled$module, { css } from 'styled-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { reducedMotion, forcedColors } from '../../../lib/styleUtils.mjs';
+import { reducedMotion, rowRadius, forcedColors } from '../../../lib/styleUtils.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
 import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
 import { SidebarNavContext } from '../../molecules/SidebarNavItem/SidebarNavContext.mjs';
+import { fade, EXPANDED_WIDTH_VAR, NAV_PADDING, SCROLLBAR_VAR } from '../../molecules/SidebarNavItem/sidebarNavMotion.mjs';
 
 var semantic = tokens.semantic,
   component = tokens.component;
 var space = semantic.space,
   motion = semantic.motion,
-  radius = semantic.radius,
-  border = semantic.border,
-  color = semantic.color;
+  color = semantic.color,
+  size = semantic.size;
 var widths = component.sidebarNav.width;
 var Nav = /*#__PURE__*/styled.nav.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -25,39 +25,67 @@ var Nav = /*#__PURE__*/styled.nav.withConfig({
   },
   displayName: "SidebarNav__Nav",
   componentId: "sc-1as46tp-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"])), space[200], function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
+])), space[200], function (_a) {
   var $width = _a.$width;
   return $width;
-}, space[200], border["default"], motion.duration.moderate, motion.easing.standard, reducedMotion);
+}, space[200], motion.duration.moderate, motion.easing.decelerate, reducedMotion);
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
 var Header = /*#__PURE__*/styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
   displayName: "SidebarNav__Header",
   componentId: "sc-1as46tp-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), space[100], function (_a) {
-  var $collapsed = _a.$collapsed;
-  return $collapsed && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
-});
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"])), space[100], size.control.sm);
 var HeaderContent = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__HeaderContent",
   componentId: "sc-1as46tp-2"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"], ["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"])));
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING, size.control.sm, space[100]);
+var CollapseSlot = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__CollapseSlot",
+  componentId: "sc-1as46tp-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"
+// Centred in the rail, where the header content starts
+])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+// Centred in the rail, where the header content starts
+var ExpandSlot = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__ExpandSlot",
+  componentId: "sc-1as46tp-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"])), component.sidebarNav.width.rail, NAV_PADDING, size.control.sm, function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 var Body = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNav__Body",
-  componentId: "sc-1as46tp-3"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
+  componentId: "sc-1as46tp-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 ])));
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNav__Content",
-  componentId: "sc-1as46tp-4"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+  componentId: "sc-1as46tp-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 var List = /*#__PURE__*/styled.ul.withConfig({
   displayName: "SidebarNav__List",
-  componentId: "sc-1as46tp-5"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
+  componentId: "sc-1as46tp-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
 // One highlight glides to the hovered or keyboard-focused row (0053): the row hover colour,
 // moving over duration.fast. It jumps under reduced motion and hides in forced colours, where
 // rows outline themselves instead.
@@ -66,61 +94,109 @@ var Highlight = /*#__PURE__*/styled.div.withConfig({
     return !prop.startsWith('$');
   },
   displayName: "SidebarNav__Highlight",
-  componentId: "sc-1as46tp-6"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"])), radius.sm, color.fill.muted, function (_a) {
+  componentId: "sc-1as46tp-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
+])), rowRadius, color.fill.muted, function (_a) {
   var $visible = _a.$visible;
   return $visible ? 1 : 0;
 }, function (_a) {
   var $instant = _a.$instant;
   return $instant ? "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate) : "transform ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    height ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    width ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    opacity ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate);
 }, reducedMotion, motion.duration.fast, motion.easing.decelerate, forcedColors);
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
 var Footer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__Footer",
-  componentId: "sc-1as46tp-7"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"
+  componentId: "sc-1as46tp-9"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"], ["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
- */])));
+ */])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING);
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
  */
 var SidebarNav = function SidebarNav(_a) {
+  var _b;
   var label = _a.label,
     children = _a.children,
     header = _a.header,
     footer = _a.footer,
-    _b = _a.width,
-    width = _b === void 0 ? 'default' : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 'default' : _c,
     collapsedProp = _a.collapsed,
-    _c = _a.defaultCollapsed,
-    defaultCollapsed = _c === void 0 ? false : _c,
+    _d = _a.defaultCollapsed,
+    defaultCollapsed = _d === void 0 ? false : _d,
     onCollapsedChange = _a.onCollapsedChange,
-    _d = _a.collapsible,
-    collapsible = _d === void 0 ? true : _d,
+    _e = _a.collapsible,
+    collapsible = _e === void 0 ? true : _e,
     linkComponent = _a.linkComponent,
     dataTestId = _a["data-testid"];
-  var _e = useState(defaultCollapsed),
-    uncontrolledCollapsed = _e[0],
-    setUncontrolledCollapsed = _e[1];
+  var _f = useState(defaultCollapsed),
+    uncontrolledCollapsed = _f[0],
+    setUncontrolledCollapsed = _f[1];
   var isControlled = collapsedProp !== undefined;
   var collapsed = collapsible && (isControlled ? collapsedProp : uncontrolledCollapsed);
   var contentRef = useRef(null);
-  var _f = useState({
+  var navRef = useRef(null);
+  var bodyRef = useRef(null);
+  // A classic scrollbar narrows every row, so rows need its width. Measured while expanded (the rail
+  // only clips what rows hold) and written straight to a CSS variable, so it re-renders nothing.
+  useEffect(function () {
+    var nav = navRef.current;
+    var body = bodyRef.current;
+    if (!nav || !body || collapsed) return;
+    var measure = function measure() {
+      return nav.style.setProperty(SCROLLBAR_VAR, "".concat(body.offsetWidth - body.clientWidth, "px"));
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(measure);
+    observer.observe(body);
+    if (contentRef.current) observer.observe(contentRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapsed]);
+  var _g = useState({
       box: null,
       visible: false,
       instant: true
     }),
-    highlight = _f[0],
-    setHighlight = _f[1];
+    highlight = _g[0],
+    setHighlight = _g[1];
+  // Focus follows the toggle: the one pressed fades away, so focus moves to the one now shown
+  var collapseSlot = useRef(null);
+  var expandSlot = useRef(null);
+  // Which state a toggle asked for, and when: focus moves only if that state arrives promptly, so a
+  // controlled parent that declined the change can't have focus jump on some later change
+  var focusToggle = useRef(null);
   var toggle = function toggle() {
     var next = !collapsed;
+    focusToggle.current = {
+      to: next,
+      at: Date.now()
+    };
     if (!isControlled) setUncontrolledCollapsed(next);
     onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
   };
+  useEffect(function () {
+    var _a;
+    var request = focusToggle.current;
+    focusToggle.current = null;
+    if (!request || request.to !== collapsed || Date.now() - request.at > 1000) return;
+    var slot = collapsed ? expandSlot.current : collapseSlot.current;
+    (_a = slot === null || slot === void 0 ? void 0 : slot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [collapsed]);
   var hide = function hide() {
     return setHighlight(function (state) {
       return __assign(__assign({}, state), {
@@ -130,9 +206,9 @@ var SidebarNav = function SidebarNav(_a) {
   };
   // Collapsing or expanding moves every row, so the highlight's box is stale: hide it until the
   // pointer or focus finds a row again (adjusted during render, React's pattern for a prop change)
-  var _g = useState(collapsed),
-    layout = _g[0],
-    setLayout = _g[1];
+  var _h = useState(collapsed),
+    layout = _h[0],
+    setLayout = _h[1];
   if (layout !== collapsed) {
     setLayout(collapsed);
     setHighlight(function (state) {
@@ -169,32 +245,64 @@ var SidebarNav = function SidebarNav(_a) {
     glide: true,
     inNav: true
   };
-  var toggleLabel = collapsed ? 'Expand sidebar' : 'Collapse sidebar';
-  var toggleButton = collapsible && jsx(Tooltip, {
-    text: toggleLabel,
-    side: collapsed ? 'right' : 'bottom',
-    children: jsx(IconButton, {
-      variant: "naked",
-      size: "small",
-      iconName: "sidebar",
-      "aria-label": toggleLabel,
-      "aria-expanded": !collapsed,
-      onClick: toggle
-    })
+  // The header content keeps its expanded layout: it fades out in the rail rather than turning into
+  // a rail version of itself mid-move
+  var headerContext = __assign(__assign({}, context), {
+    collapsed: false
   });
   return jsx(SidebarNavContext.Provider, {
     value: context,
     children: jsxs(Nav, {
+      ref: navRef,
       "aria-label": label,
       "$width": collapsed ? widths.rail : widths[width],
       "data-collapsed": collapsed || undefined,
       "data-testid": dataTestId,
-      children: [(header || toggleButton) && jsxs(Header, {
-        "$collapsed": collapsed,
+      style: (_b = {}, _b[EXPANDED_WIDTH_VAR] = widths[width], _b),
+      children: [(header || collapsible) && jsxs(Header, {
         children: [header && jsx(HeaderContent, {
-          children: header
-        }), toggleButton]
+          "$hidden": collapsed,
+          children: jsx("div", {
+            children: jsx(SidebarNavContext.Provider, {
+              value: headerContext,
+              children: header
+            })
+          })
+        }), collapsible && jsxs(Fragment, {
+          children: [jsx(CollapseSlot, {
+            ref: collapseSlot,
+            "$hidden": collapsed,
+            children: jsx(Tooltip, {
+              text: "Collapse sidebar",
+              side: "bottom",
+              children: jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Collapse sidebar",
+                "aria-expanded": true,
+                onClick: toggle
+              })
+            })
+          }), jsx(ExpandSlot, {
+            ref: expandSlot,
+            "$hidden": !collapsed,
+            children: jsx(Tooltip, {
+              text: "Expand sidebar",
+              side: "right",
+              children: jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Expand sidebar",
+                "aria-expanded": false,
+                onClick: toggle
+              })
+            })
+          })]
+        })]
       }), jsx(Body, {
+        ref: bodyRef,
         children: jsxs(Content, {
           ref: contentRef,
           onPointerOver: function onPointerOver(event) {
@@ -222,14 +330,17 @@ var SidebarNav = function SidebarNav(_a) {
             children: children
           })]
         })
-      }), footer && !collapsed && jsx(Footer, {
-        children: footer
+      }), footer && jsx(Footer, {
+        "$hidden": collapsed,
+        children: jsx("div", {
+          children: footer
+        })
       })]
     })
   });
 };
 SidebarNav.displayName = 'SidebarNav';
-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, templateObject_8, templateObject_9, templateObject_10;
 
 export { SidebarNav };
 //# sourceMappingURL=SidebarNav.mjs.map