@common-origin/design-system 3.0.0 → 3.2.0

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

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+export interface SidebarNavContextValue {
+    /** The nav is the icon rail: rows show their icon only */
+    collapsed: boolean;
+    /** A router's link component for internal URLs, set once on SidebarNav (decision 0008) */
+    linkComponent?: ComponentType<any>;
+    /** SidebarNav draws one gliding hover highlight, so rows don't colour their own hover (0053) */
+    glide: boolean;
+    /** Inside a SidebarNav, whose body is one list: a section is one of its items */
+    inNav?: boolean;
+}
+export declare const SidebarNavContext: import("react").Context<SidebarNavContextValue>;
+export declare const useSidebarNav: () => SidebarNavContextValue;

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

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+export interface SidebarNavContextValue {
+    /** The nav is the icon rail: rows show their icon only */
+    collapsed: boolean;
+    /** A router's link component for internal URLs, set once on SidebarNav (decision 0008) */
+    linkComponent?: ComponentType<any>;
+    /** SidebarNav draws one gliding hover highlight, so rows don't colour their own hover (0053) */
+    glide: boolean;
+    /** Inside a SidebarNav, whose body is one list: a section is one of its items */
+    inNav?: boolean;
+}
+export declare const SidebarNavContext: import("react").Context<SidebarNavContextValue>;
+export declare const useSidebarNav: () => SidebarNavContextValue;

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

@@ -0,0 +1,13 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+var SidebarNavContext = /*#__PURE__*/createContext({
+  collapsed: false,
+  glide: false
+});
+var useSidebarNav = function useSidebarNav() {
+  return useContext(SidebarNavContext);
+};
+
+export { SidebarNavContext, useSidebarNav };
+//# sourceMappingURL=SidebarNavContext.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavContext.mjs","sources":["../../../../src/components/molecules/SidebarNavItem/SidebarNavContext.ts"],"sourcesContent":["import { createContext, useContext, type ComponentType } from 'react'\n\n// What SidebarNav (#331) tells the rows and sections inside it. Outside a SidebarNav, the\n// defaults apply: expanded, plain links, and each row's own hover colour.\nexport interface SidebarNavContextValue {\n  /** The nav is the icon rail: rows show their icon only */\n  collapsed: boolean\n  /** A router's link component for internal URLs, set once on SidebarNav (decision 0008) */\n  linkComponent?: ComponentType<any> // eslint-disable-line @typescript-eslint/no-explicit-any\n  /** SidebarNav draws one gliding hover highlight, so rows don't colour their own hover (0053) */\n  glide: boolean\n  /** Inside a SidebarNav, whose body is one list: a section is one of its items */\n  inNav?: boolean\n}\n\nexport const SidebarNavContext = createContext<SidebarNavContextValue>({ collapsed: false, glide: false })\n\nexport const useSidebarNav = () => useContext(SidebarNavContext)\n"],"names":["SidebarNavContext","createContext","collapsed","glide","useSidebarNav","useContext"],"mappings":";;;AAeaA,IAAAA,iBAAiB,gBAAGC,aAAa,CAAyB;AAAEC,EAAAA,SAAS,EAAE,KAAK;AAAEC,EAAAA,KAAK,EAAE,KAAA;AAAK,CAAE,EAAC;IAE7FC,aAAa,GAAG,SAAhBA,aAAaA,GAAS;EAAA,OAAAC,UAAU,CAACL,iBAAiB,CAAC,CAAA;AAA7B;;;;"}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { IconName } from '../../../types/icons.mjs';
+export interface SidebarNavItemProps {
+    /** The item's label. In the rail it becomes the accessible name and shows in a Tooltip. */
+    label: string;
+    /** A leading icon. Items without one are hidden in the rail. */
+    icon?: IconName;
+    /**
+     * Where the item goes. With a `url` the item is a link (using SidebarNav's `linkComponent`
+     * for internal URLs, decision 0008); without one it's a button for `onClick`.
+     */
+    url?: string;
+    /** Called when the item is activated. Without a `url`, the item is a button. */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * The page the user is on: `aria-current="page"` and the light-blue selected treatment
+     * (decisions 0016, 0030).
+     * @default false
+     */
+    current?: boolean;
+    /** Quiet text at the end of the row, such as "3/10". Hidden in the rail. */
+    meta?: string;
+    /**
+     * New or unread items (decision 0045): a count, or `'dot'` for "something new". Shown as an
+     * 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';
+    /**
+     * How the badge reads in the item's name, such as "3 unread".
+     * @default "{count} new", or "new" for a dot
+     */
+    badgeLabel?: string;
+    /** Test identifier for the item's link or button */
+    'data-testid'?: string;
+}
+/**
+ * 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.
+ */
+export declare const SidebarNavItem: {
+    ({ 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

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { IconName } from '../../../types/icons';
+export interface SidebarNavItemProps {
+    /** The item's label. In the rail it becomes the accessible name and shows in a Tooltip. */
+    label: string;
+    /** A leading icon. Items without one are hidden in the rail. */
+    icon?: IconName;
+    /**
+     * Where the item goes. With a `url` the item is a link (using SidebarNav's `linkComponent`
+     * for internal URLs, decision 0008); without one it's a button for `onClick`.
+     */
+    url?: string;
+    /** Called when the item is activated. Without a `url`, the item is a button. */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * The page the user is on: `aria-current="page"` and the light-blue selected treatment
+     * (decisions 0016, 0030).
+     * @default false
+     */
+    current?: boolean;
+    /** Quiet text at the end of the row, such as "3/10". Hidden in the rail. */
+    meta?: string;
+    /**
+     * New or unread items (decision 0045): a count, or `'dot'` for "something new". Shown as an
+     * 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';
+    /**
+     * How the badge reads in the item's name, such as "3 unread".
+     * @default "{count} new", or "new" for a dot
+     */
+    badgeLabel?: string;
+    /** Test identifier for the item's link or button */
+    'data-testid'?: string;
+}
+/**
+ * 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.
+ */
+export declare const SidebarNavItem: {
+    ({ 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

@@ -0,0 +1,235 @@
+'use client';
+import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+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 { 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,
+  size = semantic.size,
+  border = semantic.border,
+  typography = semantic.typography;
+// Anything without a scheme (https:, mailto:) or a protocol-relative start is the app's own URL,
+// relative ones included, so it goes through the router's link
+var isInternalUrl = function isInternalUrl(url) {
+  return !/^[a-z][a-z\d+.-]*:/i.test(url) && !url.startsWith('//');
+};
+var Row = /*#__PURE__*/styled.a.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavItem__Row",
+  componentId: "sc-1nfqk5n-0"
+})(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
+  });
+}, function (_a) {
+  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    "])));
+}, 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-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-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
+// 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
+// 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.
+ */])));
+/**
+ * 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.
+ */
+var SidebarNavItem = function SidebarNavItem(_a) {
+  var label = _a.label,
+    icon = _a.icon,
+    url = _a.url,
+    onClick = _a.onClick,
+    _b = _a.current,
+    current = _b === void 0 ? false : _b,
+    meta = _a.meta,
+    badge = _a.badge,
+    badgeLabel = _a.badgeLabel,
+    dataTestId = _a["data-testid"];
+  var _c = useSidebarNav(),
+    collapsed = _c.collapsed,
+    linkComponent = _c.linkComponent,
+    glide = _c.glide;
+  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 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 && 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
+      }), 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,
+    // The icon is decorative (0028)
+    'aria-label': name,
+    'data-testid': dataTestId,
+    // SidebarNav's gliding highlight finds rows by this (0053)
+    'data-sidebar-row': '',
+    onClick: onClick
+  };
+  var row = url ? jsx(Row, __assign({}, shared, linkComponent && isInternalUrl(url) ? {
+    as: linkComponent
+  } : {}, {
+    href: url,
+    "aria-current": current ? 'page' : undefined,
+    children: content
+  })) :
+  // aria-current="page" marks a link to the current page; a button isn't one
+  jsx(Row, __assign({}, shared, {
+    as: "button",
+    type: "button",
+    children: content
+  }));
+  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, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+
+export { SidebarNavItem };
+//# sourceMappingURL=SidebarNavItem.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { SidebarNavItem } from './SidebarNavItem.mjs';
+export type { SidebarNavItemProps } from './SidebarNavItem.mjs';

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

@@ -0,0 +1,2 @@
+export { SidebarNavItem } from './SidebarNavItem';
+export type { SidebarNavItemProps } from './SidebarNavItem';

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface SidebarNavSectionProps {
+    /** The section's visible label, which also names its list */
+    label: string;
+    /** The section's `SidebarNavItem`s */
+    children: React.ReactNode;
+    /**
+     * Whether the label is a disclosure button that shows and hides the items.
+     * @default false
+     */
+    collapsible?: boolean;
+    /** Whether the items are shown (controlled). Use with `onExpandedChange`. */
+    expanded?: boolean;
+    /**
+     * Whether the items start shown (uncontrolled).
+     * @default true
+     */
+    defaultExpanded?: boolean;
+    /** Called when a collapsible section is shown or hidden */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * One action for the section, such as an IconButton for "New chat" or "Search". Hidden in the
+     * rail.
+     */
+    action?: React.ReactElement;
+    /** Test identifier for the section */
+    'data-testid'?: string;
+}
+/**
+ * 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.
+ */
+export declare const SidebarNavSection: {
+    ({ label, children, collapsible, expanded: expandedProp, defaultExpanded, onExpandedChange, action, "data-testid": dataTestId, }: SidebarNavSectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface SidebarNavSectionProps {
+    /** The section's visible label, which also names its list */
+    label: string;
+    /** The section's `SidebarNavItem`s */
+    children: React.ReactNode;
+    /**
+     * Whether the label is a disclosure button that shows and hides the items.
+     * @default false
+     */
+    collapsible?: boolean;
+    /** Whether the items are shown (controlled). Use with `onExpandedChange`. */
+    expanded?: boolean;
+    /**
+     * Whether the items start shown (uncontrolled).
+     * @default true
+     */
+    defaultExpanded?: boolean;
+    /** Called when a collapsible section is shown or hidden */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * One action for the section, such as an IconButton for "New chat" or "Search". Hidden in the
+     * rail.
+     */
+    action?: React.ReactElement;
+    /** Test identifier for the section */
+    'data-testid'?: string;
+}
+/**
+ * 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.
+ */
+export declare const SidebarNavSection: {
+    ({ label, children, collapsible, expanded: expandedProp, defaultExpanded, onExpandedChange, action, "data-testid": dataTestId, }: SidebarNavSectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};