@common-origin/design-system 3.1.0 → 3.2.0

package/dist/components/molecules/SearchField/SearchField.mjs

@@ -8,7 +8,7 @@ import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import { ListItem } from '../List/ListItem.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
-import { rowStates } from '../../../lib/styleUtils.mjs';
+import { fieldButtonRadius, rowStates } from '../../../lib/styleUtils.mjs';
 
 var semantic = tokens.semantic,
   component = tokens.component;
@@ -19,7 +19,7 @@ var StyledSearchContainer = /*#__PURE__*/styled.div.withConfig({
 var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchField__StyledInputWrapper",
   componentId: "sc-qhz9i8-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.size.control.lg, semantic.space[200], semantic.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (props) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n\n  /* Buttons inside the field nest within its corner: a step tighter than the control radius (decision 0055) */\n  & > button {\n    border-radius: ", ";\n  }\n\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.size.control.lg, semantic.space[200], semantic.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, fieldButtonRadius, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (props) {
   return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  ");
 }, function (props) {
   return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
@@ -31,7 +31,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
 var StyledSuggestionsList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "SearchField__StyledSuggestionsList",
   componentId: "sc-qhz9i8-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic.space[100], tokens.semantic.size.menu.maxHeight, semantic.surface.raised, semantic.border.width.thin, semantic.color.border["default"], semantic.radius.md, semantic.elevation.floating, semantic.space[100], semantic.layer.dropdown, rowStates.unselected.hover.background);
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic.space[100], tokens.semantic.size.menu.maxHeight, semantic.surface.overlay, semantic.border.width.thin, semantic.color.border["default"], semantic.radius.md, semantic.elevation.floating, semantic.space[100], semantic.layer.dropdown, rowStates.unselected.hover.background);
 var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "SearchField__StyledSectionHeader",
   componentId: "sc-qhz9i8-4"

package/dist/components/molecules/Sheet/Sheet.mjs

@@ -34,14 +34,14 @@ var StyledSheet = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Sheet__StyledSheet",
   componentId: "sc-8abisx-1"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic.surface.base, semantic.elevation.overlay, semantic.layer.overlay, function (_a) {
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  /* A floating layer: one step above raised content in the dark theme (issue 356) */\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", "; /* matches the panel */\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic.surface.overlay, semantic.elevation.overlay, semantic.layer.overlay, function (_a) {
   var $position = _a.$position,
     $variant = _a.$variant,
     $width = _a.$width,
     $height = _a.$height;
   var isDrawer = $variant === 'drawer';
   var margin = isDrawer ? semantic.space[400] : '0';
-  var borderRadius = isDrawer ? semantic.radius.md : '0';
+  var borderRadius = isDrawer ? tokens.component.overlay.borderRadius : '0';
   switch ($position) {
     case 'right':
       return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
@@ -67,7 +67,7 @@ var StyledSheet = /*#__PURE__*/styled.div.withConfig({
 }, reducedMotion, fadeIn, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
   var $isExiting = _a.$isExiting;
   return $isExiting && exitAnimation;
-}, semantic.space[200], semantic.surface.raised, semantic.color.border["default"], semantic.radius.full, semantic.color.fill.inverse);
+}, semantic.space[200], semantic.surface.overlay, semantic.color.border["default"], semantic.radius.full, semantic.color.fill.inverse);
 var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Sheet__StyledSheetContent",
   componentId: "sc-8abisx-2"

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

@@ -22,7 +22,8 @@ export interface SidebarNavItemProps {
     meta?: string;
     /**
      * New or unread items (decision 0045): a count, or `'dot'` for "something new". Shown as an
-     * accent Badge on the icon, so it stays visible in the rail, and added to the item's name.
+     * accent Badge count at the end of the row, or as a dot inside the icon's corner in the rail, and
+     * added to the item's name.
      */
     badge?: number | 'dot';
     /**
@@ -38,6 +39,6 @@ export interface SidebarNavItemProps {
  * Renders an `li`, so it sits in SidebarNav's or a SidebarNavSection's list.
  */
 export declare const SidebarNavItem: {
-    ({ label, icon, url, onClick, current, meta, badge, badgeLabel, "data-testid": dataTestId, }: SidebarNavItemProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ label, icon, url, onClick, current, meta, badge, badgeLabel, "data-testid": dataTestId, }: SidebarNavItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -22,7 +22,8 @@ export interface SidebarNavItemProps {
     meta?: string;
     /**
      * New or unread items (decision 0045): a count, or `'dot'` for "something new". Shown as an
-     * accent Badge on the icon, so it stays visible in the rail, and added to the item's name.
+     * accent Badge count at the end of the row, or as a dot inside the icon's corner in the rail, and
+     * added to the item's name.
      */
     badge?: number | 'dot';
     /**
@@ -38,6 +39,6 @@ export interface SidebarNavItemProps {
  * Renders an `li`, so it sits in SidebarNav's or a SidebarNavSection's list.
  */
 export declare const SidebarNavItem: {
-    ({ label, icon, url, onClick, current, meta, badge, badgeLabel, "data-testid": dataTestId, }: SidebarNavItemProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ label, icon, url, onClick, current, meta, badge, badgeLabel, "data-testid": dataTestId, }: SidebarNavItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -4,17 +4,17 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import styled$module, { css } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { interactiveRow } from '../../../lib/styleUtils.mjs';
+import { rowRadius, interactiveRow } from '../../../lib/styleUtils.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
 import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
 import { Badge } from '../../atoms/Badge/Badge.mjs';
 import { useSidebarNav } from './SidebarNavContext.mjs';
+import { ROW_INSET, EXPANDED_WIDTH_VAR, SCROLLBAR_VAR, NAV_PADDING, fade, Fold } from './sidebarNavMotion.mjs';
 
 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;
@@ -29,7 +29,10 @@ var Row = /*#__PURE__*/styled.a.withConfig({
   },
   displayName: "SidebarNavItem__Row",
   componentId: "sc-1nfqk5n-0"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\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  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\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.sm, radius.sm, typography.small, color.text["default"], motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate, 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  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  /* The left inset is the same expanded and in the rail, so the icon never moves (issue 348); the row\n     clips what the rail doesn't show as the nav narrows */\n  padding: 0 ", " 0 ", ";\n  overflow: hidden;\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\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  /* The row's height is its token, with the content centred (as controls, 0034): vertical\n     padding would hold a compact row above its 24px (0051) */\n  min-height: ", ";\n  /* The left inset is the same expanded and in the rail, so the icon never moves (issue 348); the row\n     clips what the rail doesn't show as the nav narrows */\n  padding: 0 ", " 0 ", ";\n  overflow: hidden;\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030); the current page takes the light-blue selected ladder */\n  ", "\n\n  /* Inside SidebarNav one highlight glides to the hovered row, so an unselected row stays clear\n     underneath it; pressed and selected rows keep their own fills (0053) */\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"
+// The row's content keeps the nav's expanded width (when it's in a SidebarNav), so the nav's edge
+// clips it as the nav narrows, instead of the label reflowing or ellipsising mid-move
+])), space[200], size.row.sm, space.inset.sm, ROW_INSET, rowRadius, typography.small, color.text["default"], motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate, function (_a) {
   var $current = _a.$current;
   return interactiveRow({
     selected: $current
@@ -38,25 +41,88 @@ var Row = /*#__PURE__*/styled.a.withConfig({
   var $glide = _a.$glide,
     $current = _a.$current;
   return $glide && !$current && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:hover:not(:active) {\n        background-color: transparent;\n      }\n    "], ["\n      &:hover:not(:active) {\n        background-color: transparent;\n      }\n    "])));
-}, function (_a) {
-  var $collapsed = _a.$collapsed;
-  return $collapsed && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      justify-content: center;\n      padding: 0 ", ";\n    "], ["\n      justify-content: center;\n      padding: 0 ", ";\n    "])), space.inset.xs);
 }, border.focus, border.focusOffset);
+// The row's content keeps the nav's expanded width (when it's in a SidebarNav), so the nav's edge
+// clips it as the nav narrows, instead of the label reflowing or ellipsising mid-move
+var Inner = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__Inner",
+  componentId: "sc-1nfqk5n-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  /* The row's content width when expanded: the nav's width less any scrollbar, its padding, the row's\n     insets and, beside an icon, the icon and its gap */\n  width: calc(\n    var(", ", 0px) - var(", ", 0px) - 2 * ", " - ", " - ", "\n      ", "\n  );\n"], ["\n  display: flex;\n  flex: 1 0 auto;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  /* The row's content width when expanded: the nav's width less any scrollbar, its padding, the row's\n     insets and, beside an icon, the icon and its gap */\n  width: calc(\n    var(", ", 0px) - var(", ", 0px) - 2 * ", " - ", " - ", "\n      ", "\n  );\n"])), space[200], EXPANDED_WIDTH_VAR, SCROLLBAR_VAR, NAV_PADDING, ROW_INSET, space.inset.sm, function (_a) {
+  var $withIcon = _a.$withIcon;
+  return $withIcon ? "- ".concat(size.icon.md, " - ").concat(space[200]) : '';
+});
 var Label = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNavItem__Label",
-  componentId: "sc-1nfqk5n-1"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+  componentId: "sc-1nfqk5n-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  ", "\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  ", "\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 var Meta = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNavItem__Meta",
-  componentId: "sc-1nfqk5n-2"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"
+  componentId: "sc-1nfqk5n-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n  ", "\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n  ", "\n"
 // A badge needs something to sit on: the icon, or this mark at the end of an item without one
-])), typography.caption, color.text.muted);
+// Badge normally sits centred on its anchor's top-right corner (0045). At the end of the row the
+// count is laid out in place instead, so a count of any width ("3", "12", "99+") stays inside the
+// row in every density and never reaches the rows around it
+])), typography.caption, color.text.muted, function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 // A badge needs something to sit on: the icon, or this mark at the end of an item without one
-var BadgeAnchor = /*#__PURE__*/styled.span.withConfig({
-  displayName: "SidebarNavItem__BadgeAnchor",
-  componentId: "sc-1nfqk5n-3"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n"
+// Badge normally sits centred on its anchor's top-right corner (0045). At the end of the row the
+// count is laid out in place instead, so a count of any width ("3", "12", "99+") stays inside the
+// row in every density and never reaches the rows around it
+var EndSlot = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__EndSlot",
+  componentId: "sc-1nfqk5n-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  ", "\n\n  & [role='status'] {\n    position: static;\n    transform: none;\n  }\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  ", "\n\n  & [role='status'] {\n    position: static;\n    transform: none;\n  }\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+var EndAnchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SidebarNavItem__EndAnchor",
+  componentId: "sc-1nfqk5n-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-flex;\n  width: 0;\n  height: 0;\n"], ["\n  display: inline-flex;\n  width: 0;\n  height: 0;\n"
+// In the rail there's no room for a count, so a dot sits inside the icon's top-right corner
+])));
+// In the rail there's no room for a count, so a dot sits inside the icon's top-right corner
+var IconBox = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SidebarNavItem__IconBox",
+  componentId: "sc-1nfqk5n-6"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n"])));
+var Corner = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__Corner",
+  componentId: "sc-1nfqk5n-7"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  right: 25%;\n  display: inline-flex;\n  ", "\n"], ["\n  position: absolute;\n  top: 25%;\n  right: 25%;\n  display: inline-flex;\n  ", "\n"
+// An item folds away in the rail when it has no icon to show there
+])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+// An item folds away in the rail when it has no icon to show there
+var Item = /*#__PURE__*/styled(Fold).attrs({
+  as: 'li'
+}).withConfig({
+  displayName: "SidebarNavItem__Item",
+  componentId: "sc-1nfqk5n-8"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""
 /**
  * One row of a SidebarNav (#327): a link to a page, or a button for an action such as "New chat".
  * Renders an `li`, so it sits in SidebarNav's or a SidebarNavSection's list.
@@ -80,39 +146,52 @@ var SidebarNavItem = function SidebarNavItem(_a) {
     collapsed = _c.collapsed,
     linkComponent = _c.linkComponent,
     glide = _c.glide;
-  // The rail shows icons only: an item without one has nothing to show there
-  if (collapsed && !icon) return null;
   var hasBadge = badge === 'dot' || typeof badge === 'number' && badge > 0;
   var badgeText = badgeLabel !== null && badgeLabel !== void 0 ? badgeLabel : badge === 'dot' ? 'new' : "".concat(badge, " new");
   // The badge's own text would make a noisy name, so a badged item is named outright; so is an
   // item in the rail, where the label isn't shown
   var name = hasBadge ? "".concat(label, ", ").concat(badgeText) : collapsed ? label : undefined;
-  var withBadge = function withBadge(anchor) {
-    return hasBadge ? jsx(Badge, {
-      variant: "accent",
-      dot: badge === 'dot',
-      count: typeof badge === 'number' ? badge : 0,
-      "aria-label": badgeText,
-      children: anchor
-    }) : anchor;
-  };
+  var count = typeof badge === 'number' ? badge : 0;
+  // Everything stays mounted and fades, so collapsing and expanding never jump (issue 348). Hidden
+  // content leaves screen readers once its fade ends; the rail names the row with aria-label.
   var content = jsxs(Fragment, {
-    children: [icon && withBadge(jsx(Icon, {
-      name: icon,
-      size: "md",
-      iconColor: "inherit"
-    })), !collapsed && jsxs(Fragment, {
+    children: [icon && jsxs(IconBox, {
+      children: [jsx(Icon, {
+        name: icon,
+        size: "md",
+        iconColor: "inherit"
+      }), hasBadge && jsx(Corner, {
+        "$hidden": !collapsed,
+        children: jsx(Badge, {
+          variant: "accent",
+          dot: true,
+          "aria-label": badgeText,
+          children: jsx("span", {})
+        })
+      })]
+    }), jsxs(Inner, {
+      "$withIcon": Boolean(icon),
       children: [jsx(Label, {
+        "$hidden": collapsed,
         children: label
       }), meta && jsx(Meta, {
+        "$hidden": collapsed,
         children: meta
-      }), !icon && hasBadge && withBadge(jsx(BadgeAnchor, {}))]
+      }), hasBadge && jsx(EndSlot, {
+        "$hidden": collapsed,
+        children: jsx(Badge, {
+          variant: "accent",
+          dot: badge === 'dot',
+          count: count,
+          "aria-label": badgeText,
+          children: jsx(EndAnchor, {})
+        })
+      })]
     })]
   });
   var shared = {
     $current: current,
     $glide: glide,
-    $collapsed: collapsed,
     // The icon is decorative (0028)
     'aria-label': name,
     'data-testid': dataTestId,
@@ -133,16 +212,24 @@ var SidebarNavItem = function SidebarNavItem(_a) {
     type: "button",
     children: content
   }));
-  return jsx("li", {
-    children: collapsed ? jsx(Tooltip, {
-      text: label,
-      side: "right",
-      children: row
-    }) : row
-  });
+  return (
+    // The Tooltip is always there, turned off while the label is visible, so collapsing never
+    // remounts the row (which would lose focus and skip its transitions)
+    jsx(Item, {
+      "$open": !collapsed || Boolean(icon),
+      children: jsx("div", {
+        children: jsx(Tooltip, {
+          text: label,
+          side: "right",
+          disabled: !collapsed,
+          children: row
+        })
+      })
+    })
+  );
 };
 SidebarNavItem.displayName = 'SidebarNavItem';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 export { SidebarNavItem };
 //# sourceMappingURL=SidebarNavItem.mjs.map

package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.d.mts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+export declare const 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
+ */
+export declare const SCROLLBAR_VAR = "--co-sidebar-nav-scrollbar";
+/** The nav's own side padding: the rail's inner width is the rail less twice this */
+export declare const NAV_PADDING: string;
+/** A row's left inset: centres an icon in the rail, and stays the same expanded, so icons never move */
+export declare const ROW_INSET: string;
+/**
+ * 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.
+ */
+export declare const fade: (hidden: boolean) => import("styled-components").RuleSet<object>;
+/**
+ * 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).
+ */
+export declare const Fold: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, {
+    $open: boolean;
+}>> & string;

package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+export declare const 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
+ */
+export declare const SCROLLBAR_VAR = "--co-sidebar-nav-scrollbar";
+/** The nav's own side padding: the rail's inner width is the rail less twice this */
+export declare const NAV_PADDING: string;
+/** A row's left inset: centres an icon in the rail, and stays the same expanded, so icons never move */
+export declare const ROW_INSET: string;
+/**
+ * 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.
+ */
+export declare const fade: (hidden: boolean) => import("styled-components").RuleSet<object>;
+/**
+ * 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).
+ */
+export declare const Fold: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $open: boolean;
+}>> & string;

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":""}