@duro-app/ui 0.39.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.39.0"
+    "@duro-app/tokens": "^0.41.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   overlay: {
@@ -63,8 +64,8 @@ export const styles = css.create({
     },
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Checkbox/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -28,8 +29,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   boxUnchecked: {
     backgroundColor: colors.bg,

package/src/components/ColorMode/styles.css.ts

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   button: {
@@ -22,8 +23,8 @@ export const styles = css.create({
     color: colors.text,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,

package/src/components/Combobox/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -24,7 +25,7 @@ export const styles = css.create({
     },
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   inputWrapperFocused: {
     borderColor: colors.accent,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

package/src/components/Dialog/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   // --- Backdrop ---
@@ -19,7 +20,7 @@ export const styles = css.create({
       to: {opacity: 1},
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -29,7 +30,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -75,7 +76,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   popupClosing: {
@@ -91,7 +92,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -174,7 +175,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper (for Trigger / Close children) ---

package/src/components/Drawer/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   // --- Backdrop ---
@@ -17,8 +18,8 @@ export const styles = css.create({
       from: {opacity: 0},
       to: {opacity: 1},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -27,7 +28,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -104,8 +105,8 @@ export const styles = css.create({
       from: {transform: 'translateX(100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutRight: {
@@ -114,7 +115,7 @@ export const styles = css.create({
       to: {transform: 'translateX(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -124,8 +125,8 @@ export const styles = css.create({
       from: {transform: 'translateX(-100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutLeft: {
@@ -134,7 +135,7 @@ export const styles = css.create({
       to: {transform: 'translateX(-100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -144,8 +145,8 @@ export const styles = css.create({
       from: {transform: 'translateY(100%)'},
       to: {transform: 'translateY(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutBottom: {
@@ -154,7 +155,7 @@ export const styles = css.create({
       to: {transform: 'translateY(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -232,7 +233,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper ---

package/src/components/Icon/Icon.tsx

@@ -21,6 +21,12 @@ export type IconName =
   | 'git-branch'
   | 'menu'
   | 'pin'
+  // People / access / admin glyphs
+  | 'users'
+  | 'user-plus'
+  | 'mail'
+  | 'file-text'
+  | 'plug'
   // Color-mode glyphs
   | 'sun'
   | 'moon'
@@ -153,6 +159,46 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
       <line x1="3" y1="18" x2="21" y2="18" />
     </>
   ),
+  // ---- people / access / admin ----
+  users: (
+    <>
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </>
+  ),
+  'user-plus': (
+    <>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="8.5" cy="7" r="4" />
+      <line x1="20" y1="8" x2="20" y2="14" />
+      <line x1="23" y1="11" x2="17" y2="11" />
+    </>
+  ),
+  mail: (
+    <>
+      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+      <polyline points="22,6 12,13 2,6" />
+    </>
+  ),
+  'file-text': (
+    <>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </>
+  ),
+  plug: (
+    <>
+      <path d="M12 22v-5" />
+      <path d="M9 8V2" />
+      <path d="M15 8V2" />
+      <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" />
+    </>
+  ),
   pin: (
     <>
       <line x1="12" y1="17" x2="12" y2="22" />

package/src/components/Input/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -19,8 +20,8 @@ export const styles = css.create({
     borderStyle: 'solid',
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/InputGroup/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   wrapper: {
@@ -16,8 +17,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     overflow: 'hidden',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addon: {
     display: 'inline-flex',
@@ -51,8 +52,8 @@ export const styles = css.create({
       ':active': colors.bg,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addonDisabled: {
     opacity: 0.4,

package/src/components/LinkButton/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -17,8 +18,8 @@ export const styles = css.create({
     cursor: 'pointer',
     textDecoration: 'none',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   sizeDefault: {
     paddingTop: spacing.sm,

package/src/components/Menu/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -30,7 +31,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   backdrop: {
     position: 'fixed',
@@ -74,7 +75,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemHighlighted: {
     backgroundColor: colors.bgCardHover,

package/src/components/RadioGroup/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -36,8 +37,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   circleUnchecked: {
     backgroundColor: colors.bg,

package/src/components/ScrollArea/styles.css.ts

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -26,8 +27,8 @@ export const styles = css.create({
     touchAction: 'none',
     userSelect: 'none',
     transitionProperty: 'opacity',
-    transitionDuration: '200ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.standard,
   },
   scrollbarVertical: {
     top: 0,
@@ -64,7 +65,7 @@ export const styles = css.create({
     },
     borderRadius: radii.full,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   // Dynamic styles — simple identifier params only (StyleX constraint)
   viewportMaxHeight: (maxHeight: number | string) => ({

package/src/components/Select/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -31,7 +32,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   value: {
     color: colors.text,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

package/src/components/SideNav/SideNav.meta.ts

@@ -2,27 +2,33 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Vertical side navigation with collapsible groups. Supports controlled and uncontrolled active item. Compound component — Root is required.',
-  whenToUse: ['App-level sidebar navigation', 'Settings navigation with grouped sections'],
+    'Vertical side navigation. Use collapsible `Group`s (chevron accordion) or static `Section`s (always-open headers) — or a mix. `Item`s take an optional `icon` and show an active left-marker. Supports controlled and uncontrolled active item. Compound component — Root is required.',
+  whenToUse: [
+    'App-level sidebar navigation',
+    'Settings navigation with grouped sections',
+    'Flat menu with labelled, always-open regions — use Section instead of Group',
+  ],
   whenNotToUse: [
     'In-page content switching — use Tabs',
     'Top-level horizontal nav — use Inline with LinkButton',
   ],
   anatomy: {
-    required: ['Root', 'Group', 'Item'],
+    required: ['Root', 'Item'],
+    optional: ['Group', 'Section'],
   },
   relatedTo: [
     {component: 'Tabs', relationship: 'Tabs switch content in-place; SideNav navigates pages'},
     {component: 'PageShell', relationship: 'Often placed alongside PageShell'},
   ],
-  example: `<SideNav.Root defaultValue="dashboard">
-  <SideNav.Group label="Main">
-    <SideNav.Item value="dashboard">Dashboard</SideNav.Item>
-    <SideNav.Item value="analytics">Analytics</SideNav.Item>
-  </SideNav.Group>
-  <SideNav.Group label="Settings" defaultExpanded={false}>
-    <SideNav.Item value="profile">Profile</SideNav.Item>
-    <SideNav.Item value="billing">Billing</SideNav.Item>
+  example: `<SideNav.Root defaultValue="identities">
+  {/* Static, always-open sections with icons (flat menu) */}
+  <SideNav.Section label="People & access">
+    <SideNav.Item value="identities" icon={<Icon name="users" size={18} />}>Identities</SideNav.Item>
+    <SideNav.Item value="grants" icon={<Icon name="key" size={18} />}>Grants</SideNav.Item>
+  </SideNav.Section>
+  {/* Or collapsible groups (accordion) */}
+  <SideNav.Group label="Advanced" defaultExpanded={false}>
+    <SideNav.Item value="plugins" icon={<Icon name="plug" size={18} />}>Plugins</SideNav.Item>
   </SideNav.Group>
 </SideNav.Root>`,
 }

package/src/components/SideNav/SideNav.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {SideNav} from './SideNav'
+import {Icon} from '../Icon/Icon'
 
 const meta: Meta<typeof SideNav.Root> = {
   title: 'Components/SideNav',
@@ -31,7 +32,7 @@ export const Default: Story = {
     const nav = canvas.getByRole('navigation')
     await expect(nav).toBeInTheDocument()
 
-    const activeItem = canvas.getByText('Dashboard')
+    const activeItem = canvas.getByRole('button', {name: 'Dashboard'})
     await expect(activeItem).toHaveAttribute('aria-current', 'page')
   },
 }
@@ -74,7 +75,7 @@ export const DefaultExpandedWithActiveItem: Story = {
   play: async ({canvas}) => {
     const trigger = canvas.getByText('Settings')
     await expect(trigger).toHaveAttribute('aria-expanded', 'true')
-    const active = canvas.getByText('Security')
+    const active = canvas.getByRole('button', {name: 'Security'})
     await expect(active).toBeInTheDocument()
     await expect(active).toHaveAttribute('aria-current', 'page')
   },
@@ -91,9 +92,52 @@ export const Interactive: Story = {
     </SideNav.Root>
   ),
   play: async ({canvas, userEvent, args}) => {
-    const aboutItem = canvas.getByText('About')
+    const aboutItem = canvas.getByRole('button', {name: 'About'})
     await userEvent.click(aboutItem)
     await expect(args.onValueChange).toHaveBeenCalledWith('about')
     await expect(aboutItem).toHaveAttribute('aria-current', 'page')
   },
 }
+
+// Flat menu: static (non-collapsible) Section headers + per-item icons + the
+// active left-marker. This is the AppChrome-style layout — no chevrons, every
+// section always open.
+export const FlatWithIcons: Story = {
+  render: (args) => (
+    <SideNav.Root {...args} defaultValue="grants">
+      <SideNav.Section label="People & access">
+        <SideNav.Item value="identities" icon={<Icon name="users" size={18} />}>
+          Identities
+        </SideNav.Item>
+        <SideNav.Item value="grants" icon={<Icon name="key" size={18} />}>
+          Grants
+        </SideNav.Item>
+      </SideNav.Section>
+      <SideNav.Section label="Requests & invites">
+        <SideNav.Item value="invitations" icon={<Icon name="mail" size={18} />}>
+          Invitations
+        </SideNav.Item>
+        <SideNav.Item value="invites" icon={<Icon name="user-plus" size={18} />}>
+          User Invites
+        </SideNav.Item>
+      </SideNav.Section>
+    </SideNav.Root>
+  ),
+  play: async ({canvas, userEvent, args}) => {
+    // Static section headers render as plain text (no toggle button).
+    await expect(canvas.getByText('People & access')).toBeInTheDocument()
+    await expect(canvas.queryByRole('button', {name: 'People & access'})).toBeNull()
+
+    // All items are visible immediately (nothing is collapsed).
+    const grants = canvas.getByRole('button', {name: 'Grants'})
+    await expect(grants).toHaveAttribute('aria-current', 'page')
+    await expect(canvas.getByRole('button', {name: 'Identities'})).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: 'User Invites'})).toBeInTheDocument()
+
+    // Selecting another item moves the active state.
+    const identities = canvas.getByRole('button', {name: 'Identities'})
+    await userEvent.click(identities)
+    await expect(args.onValueChange).toHaveBeenCalledWith('identities')
+    await expect(identities).toHaveAttribute('aria-current', 'page')
+  },
+}

package/src/components/SideNav/SideNav.tsx

@@ -150,14 +150,39 @@ function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
   )
 }
 
+// --- Section ---
+
+interface SectionProps {
+  children: ReactNode
+  label: string
+}
+
+/**
+ * A static, non-collapsible grouping: an always-visible uppercase header with
+ * its items below. Unlike `Group` there is no chevron, toggle, or hidden state
+ * — use it when every section should stay open at a glance (a flat menu with
+ * labelled regions rather than an accordion).
+ */
+function Section({children, label}: SectionProps) {
+  return (
+    <html.div style={styles.section}>
+      <html.div style={styles.sectionLabel}>{label}</html.div>
+      {children}
+    </html.div>
+  )
+}
+
 // --- Item ---
 
 interface ItemProps {
   value: string
   children: ReactNode
+  /** Optional leading glyph (e.g. a design-system `<Icon />`). Inherits the
+   *  item's text color, so it turns accent when the item is active. */
+  icon?: ReactNode
 }
 
-function Item({value, children}: ItemProps) {
+function Item({value, children, icon}: ItemProps) {
   const {activeValue, onSelect, registerItem} = useSideNav()
   const isActive = activeValue === value
 
@@ -173,7 +198,13 @@ function Item({value, children}: ItemProps) {
       style={[styles.item, isActive && styles.itemActive]}
       aria-current={isActive ? 'page' : undefined}
     >
-      {children}
+      <html.span aria-hidden style={[styles.marker, isActive && styles.markerActive]} />
+      {icon ? (
+        <html.span aria-hidden style={styles.itemIcon}>
+          {icon}
+        </html.span>
+      ) : null}
+      <html.span style={styles.itemLabel}>{children}</html.span>
     </html.button>
   )
 }
@@ -181,5 +212,6 @@ function Item({value, children}: ItemProps) {
 export const SideNav = {
   Root,
   Group,
+  Section,
   Item,
 }