@common-origin/design-system 2.23.0 → 3.1.0

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,43 @@
+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 on the icon, so it stays visible 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 | null;
+    displayName: string;
+};

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

@@ -0,0 +1,43 @@
+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 on the icon, so it stays visible 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 | null;
+    displayName: string;
+};

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

@@ -0,0 +1,148 @@
+'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 { 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';
+
+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;
+// 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_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) {
+  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    "])));
+}, 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);
+var Label = /*#__PURE__*/styled.span.withConfig({
+  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"])));
+var Meta = /*#__PURE__*/styled.span.withConfig({
+  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"
+// 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);
+// 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"
+/**
+ * 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;
+  // 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 content = jsxs(Fragment, {
+    children: [icon && withBadge(jsx(Icon, {
+      name: icon,
+      size: "md",
+      iconColor: "inherit"
+    })), !collapsed && jsxs(Fragment, {
+      children: [jsx(Label, {
+        children: label
+      }), meta && jsx(Meta, {
+        children: meta
+      }), !icon && hasBadge && withBadge(jsx(BadgeAnchor, {}))]
+    })]
+  });
+  var shared = {
+    $current: current,
+    $glide: glide,
+    $collapsed: collapsed,
+    // 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 jsx("li", {
+    children: collapsed ? jsx(Tooltip, {
+      text: label,
+      side: "right",
+      children: row
+    }) : row
+  });
+};
+SidebarNavItem.displayName = 'SidebarNavItem';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+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/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;
+};

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

@@ -0,0 +1,188 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { 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 { Icon } from '../../atoms/Icon/Icon.mjs';
+import { useSidebarNav } from '../SidebarNavItem/SidebarNavContext.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)
+var COLLAPSE_MS = parseInt(tokensJson.semantic.motion.duration.moderate, 10);
+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({
+  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) {
+  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]);
+});
+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"
+// 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 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);
+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"
+// 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) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '0deg' : '-90deg';
+}, reducedMotion);
+// 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.
+var Collapse = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    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"
+// 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);
+// 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"
+/**
+ * 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.
+ */])), function (_a) {
+  var $clip = _a.$clip;
+  return $clip ? 'hidden' : 'visible';
+});
+/**
+ * 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.
+ */
+var SidebarNavSection = function SidebarNavSection(_a) {
+  var label = _a.label,
+    children = _a.children,
+    _b = _a.collapsible,
+    collapsible = _b === void 0 ? false : _b,
+    expandedProp = _a.expanded,
+    _c = _a.defaultExpanded,
+    defaultExpanded = _c === void 0 ? true : _c,
+    onExpandedChange = _a.onExpandedChange,
+    action = _a.action,
+    dataTestId = _a["data-testid"];
+  var _d = useSidebarNav(),
+    collapsed = _d.collapsed,
+    inNav = _d.inNav;
+  var labelId = useId();
+  var listId = useId();
+  var _e = useState(defaultExpanded),
+    uncontrolledExpanded = _e[0],
+    setUncontrolledExpanded = _e[1];
+  var _f = useState(false),
+    animating = _f[0],
+    setAnimating = _f[1];
+  var isControlled = expandedProp !== undefined;
+  var userExpanded = isControlled ? expandedProp : uncontrolledExpanded;
+  // The rail has no disclosure button, so a section always shows its items there
+  var expanded = !collapsible || collapsed || userExpanded;
+  useEffect(function () {
+    if (!animating) return;
+    var timer = setTimeout(function () {
+      return setAnimating(false);
+    }, COLLAPSE_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [animating]);
+  var toggle = function toggle() {
+    var next = !expanded;
+    setAnimating(true);
+    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, {
+    children: [collapsible ? jsxs(Disclosure, {
+      type: "button",
+      id: labelId,
+      "aria-expanded": expanded,
+      "aria-controls": listId,
+      "$expanded": expanded,
+      onClick: toggle,
+      children: [jsx(Icon, {
+        name: "caretDown",
+        size: "sm",
+        iconColor: "inherit"
+      }), label]
+    }) : jsx(StaticLabel, {
+      id: labelId,
+      children: label
+    }), action]
+  });
+  return (
+    // In a SidebarNav the body is one list, so the section is one of its items
+    jsxs(Section, {
+      as: inNav ? 'li' : 'div',
+      "$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
+        })
+      })]
+    })
+  );
+};
+SidebarNavSection.displayName = 'SidebarNavSection';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { SidebarNavSection };
+//# sourceMappingURL=SidebarNavSection.mjs.map

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

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

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

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

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

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

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

@@ -1,9 +1,3 @@
-/**
- * Tab variant options for TabBar.
- * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
- * as `underline`. The type is removed in 3.0.
- */
-export type TabVariant = 'default' | 'pills' | 'underline';
 /**
  * Individual tab configuration
  */
@@ -42,13 +36,6 @@ export interface TabBarProps {
      * Callback when tab changes
      */
     onTabChange: (tabId: string) => void;
-    /**
-     * Visual variant of the tabs.
-     * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
-     * as `underline`. Remove the prop; it is removed in 3.0.
-     * @default 'underline'
-     */
-    variant?: TabVariant;
     /**
      * Accessible label for the tab list
      */

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

@@ -1,9 +1,3 @@
-/**
- * Tab variant options for TabBar.
- * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
- * as `underline`. The type is removed in 3.0.
- */
-export type TabVariant = 'default' | 'pills' | 'underline';
 /**
  * Individual tab configuration
  */
@@ -42,13 +36,6 @@ export interface TabBarProps {
      * Callback when tab changes
      */
     onTabChange: (tabId: string) => void;
-    /**
-     * Visual variant of the tabs.
-     * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
-     * as `underline`. Remove the prop; it is removed in 3.0.
-     * @default 'underline'
-     */
-    variant?: TabVariant;
     /**
      * Accessible label for the tab list
      */

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

@@ -88,10 +88,8 @@ var StyledBadge = /*#__PURE__*/styled.span.withConfig({
 var TabBar = function TabBar(_a) {
   var tabs = _a.tabs,
     activeTab = _a.activeTab,
-    onTabChange = _a.onTabChange;
-    // Deprecated: every variant renders as underline (decision 0020)
-    _a.variant;
-    var _b = _a["aria-label"],
+    onTabChange = _a.onTabChange,
+    _b = _a["aria-label"],
     ariaLabel = _b === void 0 ? 'Tab navigation' : _b,
     dataTestId = _a["data-testid"];
   var tabRefs = useRef([]);

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

@@ -1,2 +1,2 @@
 export { TabBar } from './TabBar.mjs';
-export type { TabBarProps, Tab, TabVariant } from './TabBar.mjs';
+export type { TabBarProps, Tab } from './TabBar.mjs';

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

@@ -1,2 +1,2 @@
 export { TabBar } from './TabBar';
-export type { TabBarProps, Tab, TabVariant } from './TabBar';
+export type { TabBarProps, Tab } from './TabBar';

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs

@@ -16,7 +16,7 @@ import { interactiveRow } from '../../../lib/styleUtils.mjs';
 var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TransactionListItem__StyledContainer",
   componentId: "sc-7yunm0-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", "; /* follows density with the row's height (decision 0051) */\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", "; /* follows density with the row's height (decision 0051) */\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.semantic.size.row.lg, tokens.semantic.space.inset.md, tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
   var $clickable = _a.$clickable;
   return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
 });