@estiva-app/ui 0.45.0 → 0.46.0

package/dist/looks.d.ts

@@ -33,4 +33,7 @@ export declare const FLOATING_SURFACE_CLASSES = "rounded-lg border border-border
 export declare const CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums";
 /** Words typed straight into an input with no box of its own: SearchInput and ChipInput. */
 export declare const BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
+/** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
+export declare const SIDEBAR_ROW_CLASSES = "rounded-md transition-colors";
+export declare const SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
 //# sourceMappingURL=looks.d.ts.map

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA;AAE7G,4IAA4I;AAC5I,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.45.0",
+    "packageVersion": "0.46.0",
     "exports": 100,
     "typeExports": 109,
     "files": null
@@ -832,14 +832,14 @@
       "docPage": "src/Chip.mdx",
       "app": null,
       "looks": [
-        "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+        "bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
         "bg-info-muted text-info-default signal:border signal:border-info-outline",
         "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "bg-success-muted text-success-default signal:border signal:border-success-outline",
         "bg-error-muted text-error-default signal:border signal:border-error-outline",
         "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
         "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide",
-        "rounded-full bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+        "rounded-full bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
         "rounded-full bg-info-muted text-info-default signal:border signal:border-info-outline",
         "rounded-full bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "rounded-full bg-success-muted text-success-default signal:border signal:border-success-outline",
@@ -1045,6 +1045,12 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "look",
+          "takes": "heading | row",
+          "required": false,
+          "note": "`heading` (default): the title is a section heading."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -1071,6 +1077,13 @@
             "hover",
             "always"
           ]
+        },
+        {
+          "prop": "look",
+          "values": [
+            "heading",
+            "row"
+          ]
         }
       ],
       "ownsBehaviours": [
@@ -3449,6 +3462,18 @@
           "required": false,
           "note": "16px, stroke 1.5."
         },
+        {
+          "name": "menu",
+          "takes": "anything",
+          "required": false,
+          "note": "The row's \"More options\" menu: `MenuItem`s."
+        },
+        {
+          "name": "menuLabel",
+          "takes": "text",
+          "required": false,
+          "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -3465,9 +3490,10 @@
       "docPage": "src/NavItem.mdx",
       "app": null,
       "looks": [
-        "rounded-md text-body-2 transition-colors bg-bg-active text-text-primary",
-        "rounded-md text-body-2 transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        "text-center font-mono text-caption tabular-nums text-text-muted"
+        "text-body-2 rounded-md transition-colors bg-bg-active text-text-primary",
+        "text-body-2 rounded-md transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
+        "text-center font-mono text-caption tabular-nums text-text-muted",
+        "text-center font-mono text-caption tabular-nums text-text-muted transition-opacity"
       ]
     },
     {
@@ -4186,9 +4212,9 @@
       "docPage": "src/Reaction.mdx",
       "app": null,
       "looks": [
-        "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary",
+        "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary",
         "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
-        "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary",
+        "border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary",
         "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
         "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums"
       ]
@@ -4518,6 +4544,12 @@
           "required": false,
           "note": "`fill` lights the row under the pointer when it does something (a toggle, actions); `none` keeps it still — a heading whose actions are always shown, where the buttons light up on their own (UIG-14, Katerina, 19 September)."
         },
+        {
+          "name": "look",
+          "takes": "heading | quiet | row",
+          "required": false,
+          "note": "`heading` (default): a section's title, the `SectionLabel`."
+        },
         {
           "name": "render",
           "takes": "useRender.RenderProp",
@@ -4545,6 +4577,14 @@
             "fill",
             "none"
           ]
+        },
+        {
+          "prop": "look",
+          "values": [
+            "heading",
+            "quiet",
+            "row"
+          ]
         }
       ],
       "ownsBehaviours": [],
@@ -4555,7 +4595,9 @@
       "docPage": "src/SectionHeader.mdx",
       "app": null,
       "looks": [
-        "text-text-secondary transition-transform duration-150 rotate-90",
+        "transition-transform duration-150 text-text-secondary rotate-90",
+        "rounded-md transition-colors text-text-secondary hover:text-text-primary",
+        "rounded-md transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
         "-mr-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100",
         "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
       ]

package/src/Chip.tsx

@@ -33,7 +33,7 @@ export interface ChipProps {
 
 const typeStyles: Record<ChipType, string> = {
   neutral: 'bg-bg-inset text-text-primary',
-  brand: 'bg-accent-muted text-accent-primary signal:border signal:border-accent-outline',
+  brand: 'bg-accent-muted text-accent-text signal:border signal:border-accent-outline',
   info: 'bg-info-muted text-info-default signal:border signal:border-info-outline',
   warning: 'bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning',
   success: 'bg-success-muted text-success-default signal:border signal:border-success-outline',

package/src/CollapsibleSection.mdx

@@ -22,6 +22,11 @@ toggle, and the rows under it, sliding shut and open.
 - `open` + `onOpenChange` when the app owns the state.
 - `actions` for add, sort, filter beside the title — SectionHeader's,
   revealed on hover or focus.
+- `look="row"` when the section is a row among rows — a folder in a
+  sidebar, under a quiet label: the title at a row's weight, and its rows
+  indented under it, past the chevron.
+
+<Canvas of={CollapsibleSectionStories.AsARow} />
 
 In a sidebar — the Sidebar's own Composed canvas, which is where that
 composition lives:

package/src/CollapsibleSection.stories.tsx

@@ -42,3 +42,8 @@ export const WithTrailing: Story = {
 /** Close it and reload the page: still closed. This browser remembers, under the key. */
 export const Remembered: Story = { args: { storageKey: 'estiva-ui.stories.collapsible-section' } }
 
+
+/** `look="row"`: a fold that is a row among rows — a folder in a sidebar. The title at a row's weight, the rows indented under it, past the chevron. */
+export const AsARow: Story = {
+  args: { title: 'Folder', look: 'row' },
+}

package/src/CollapsibleSection.tsx

@@ -36,6 +36,12 @@ export interface CollapsibleSectionProps {
   /** Beside the title, revealed on hover or focus — `SectionHeader`'s. */
   actions?: SectionAction[]
   showActions?: 'hover' | 'always'
+  /**
+   * `heading` (default): the title is a section heading. `row`: the fold is a
+   * row among rows — a folder in a sidebar — and its rows sit indented under
+   * its title, past the chevron (`SectionHeader`'s `look`).
+   */
+  look?: 'heading' | 'row'
   /** The rows. */
   children: ReactNode
   /** On the section's box: `mt-2` between groups, `shrink-0` in a scrolling column. */
@@ -66,7 +72,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -76,7 +82,7 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
   }
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} className="shrink-0" render={<Collapsible.Trigger />} />
+      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame
@@ -87,7 +93,8 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
         hiddenUntilFound
         className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0"
       >
-        <div className={cn('flex flex-col', contentClassName)}>{children}</div>
+        {/* A row's rows start under its title: the 16px chevron and its 8px gap (pl-6). */}
+        <div className={cn('flex flex-col', look === 'row' && 'pl-6', contentClassName)}>{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )

package/src/CommandPalette.tsx

@@ -639,7 +639,7 @@ export function CommandPaletteAnswer({ children, note }: CommandPaletteAnswerPro
               before "[1]" would stand between them as a gap. */}
           {paragraph.split(/\s*(\[\d+\])/).map((part, j) =>
             /^\[\d+\]$/.test(part) ? (
-              <sup key={j} className="ml-0.5 font-mono text-small text-accent-primary">
+              <sup key={j} className="ml-0.5 font-mono text-small text-accent-text">
                 {part.slice(1, -1)}
               </sup>
             ) : (

package/src/InlineChip.test.tsx

@@ -52,7 +52,7 @@ describe('InlineChip', () => {
     expect(neutral).toContain('text-text-primary')
     const person = inlineChipClassName('person').split(' ')
     expect(person).toContain('text-body-2')
-    expect(person).toContain('text-accent-primary')
+    expect(person).toContain('text-accent-text')
     const urgent = inlineChipClassName('urgent').split(' ')
     expect(urgent).toContain('text-warning-default')
     // quiet is smaller: its caption size replaces the body size, and its colour survives beside it

package/src/InlineChip.tsx

@@ -33,7 +33,7 @@ export const INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
   neutral: 'bg-bg-active text-text-primary',
   /** A person. */
-  person: 'bg-accent-muted text-accent-primary',
+  person: 'bg-accent-muted text-accent-text',
   /** A person, called urgently. */
   urgent: 'bg-warning-muted text-warning-default',
   /**

package/src/NavItem.mdx

@@ -22,6 +22,12 @@ count — a muted mono number whose tooltip says what it counts.
 
 <Canvas of={NavItemStories.ZeroDrawsNothing} />
 
+- A row with things to do to it — move it, rename it — takes them as
+  `menu`: pass `MenuItem`s, and the row draws the ⋮, shows it while the row
+  is pointed at or focused, and moves the count aside for it.
+
+<Canvas of={NavItemStories.WithMenu} />
+
 ## When not
 
 - An icon rail's tile → **RailItem**.
@@ -47,6 +53,8 @@ import { NavItem } from '@estiva-app/ui'
   `active` from the location, intercept the click, navigate — every
   anchor prop passes through.
 - The label truncates; the count never gives up its width.
+- `menu` is the items only: `menu={<MenuItem label="Move to Folder…" onClick={move} />}`.
+  The ⋮'s name is `More options for {label}` unless `menuLabel` says otherwise.
 
 - A row is 32px tall, 8px in on each side, 8px between the icon and the label,
   the label 14px regular, 6px corners.
@@ -59,6 +67,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Marks the current place for assistive technology when `active` | `aria-current` |  |
 | Keeps its 32px in a scrolling column | `shrink-0` |  |
+| Shows a ⋮ over the count while pointed at, focused or open, and keeps the row's hover look under it | a positioned `IconButton` + `Menu` over the row, `group-hover` reveals |  |
 
 ## Props
 

package/src/NavItem.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconSquareRounded } from '@tabler/icons-react'
+import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
 
 const placeholder = <IconSquareRounded size={16} stroke={1.5} />
@@ -37,3 +38,25 @@ export const ZeroDrawsNothing: Story = {
 export const LongLabelTruncates: Story = {
   args: { label: 'An item whose label runs much longer than the column has room for', count: 7, countLabel: '7 open' },
 }
+
+const MENU = (
+  <>
+    <MenuItem label="Action one" onClick={() => {}} />
+    <MenuItem label="Action two" onClick={() => {}} />
+  </>
+)
+
+/** A row with a menu: point at it (or Tab to it) and a ⋮ takes the count's place; the count comes back when you leave. */
+export const WithMenu: Story = {
+  args: { icon: placeholder, count: 6, countLabel: '6 open', menu: MENU },
+}
+
+/** The active row keeps its fill; the ⋮ sits on it the same way. */
+export const WithMenuActive: Story = {
+  args: { icon: placeholder, count: 6, countLabel: '6 open', menu: MENU, active: true },
+}
+
+/** No count: the ⋮ still appears in the same place, and a long label stops short of it. */
+export const WithMenuNoCount: Story = {
+  args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, menu: MENU },
+}

package/src/NavItem.tsx

@@ -1,5 +1,9 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import { IconDotsVertical } from '@tabler/icons-react'
 import { cn } from './cn'
+import { SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES } from './looks'
+import { IconButton } from './IconButton'
+import { Menu } from './Menu'
 import { WithTooltip } from './Tooltip'
 
 /**
@@ -12,6 +16,12 @@ import { WithTooltip } from './Tooltip'
  * count draws its zero (see Tabs) — both rulings stand, deliberately.
  *
  * Active is the same fill as a selected tab — `bg-active`, neutral.
+ *
+ * `menu` gives the row a "More options" menu (UIG-44, Katerina, 30
+ * September): a ⋮ that shows while the row is pointed at, focused or its
+ * menu is open, in the count's place — the count steps aside rather than
+ * sitting under it. The ⋮ is beside the link, not inside it (a button inside
+ * an anchor is not a button), and follows it in the Tab order.
  */
 export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
   label: string
@@ -23,12 +33,15 @@ export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'
   active?: boolean
   /** 16px, stroke 1.5. */
   icon?: ReactNode
+  /** The row's "More options" menu: `MenuItem`s. Absent, the row has no menu and is exactly the plain row. */
+  menu?: ReactNode
+  /** The ⋮'s accessible name and tooltip. Default "More options for {label}". */
+  menuLabel?: string
   className?: string
 }
 
-export function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }: NavItemProps) {
-  return (
-    // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
+export function NavItem({ label, href, count, countLabel, active = false, icon, menu, menuLabel, className, ...props }: NavItemProps) {
+  const row = (
     <a
       href={href}
       aria-current={active ? 'page' : undefined}
@@ -36,8 +49,12 @@ export function NavItem({ label, href, count, countLabel, active = false, icon,
         // shrink-0: the row keeps its 32px inside an overflowing flex column
         // — without it the list compresses instead of scrolling (the missing-
         // shrink-0 family; Katerina, 2026-09-02).
-        'flex h-8 min-w-0 shrink-0 items-center gap-2 rounded-md px-2 text-body-2 transition-colors',
-        active ? 'bg-bg-active text-text-primary' : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
+        'flex h-8 min-w-0 shrink-0 items-center gap-2 px-2 text-body-2',
+        SIDEBAR_ROW_CLASSES,
+        active ? 'bg-bg-active text-text-primary' : cn(SIDEBAR_ROW_TEXT_CLASSES, 'hover:bg-bg-hover'),
+        // With a menu the ⋮ sits beside the link, so the row keeps its hover
+        // look while the ⋮ is pointed at and while its menu is open.
+        menu != null && !active && 'group-hover/nav:bg-bg-hover group-hover/nav:text-text-primary group-has-[[aria-expanded=true]]/nav:bg-bg-hover group-has-[[aria-expanded=true]]/nav:text-text-primary',
         className,
       )}
       {...props}
@@ -50,9 +67,42 @@ export function NavItem({ label, href, count, countLabel, active = false, icon,
               here sits on the same axis as a SectionHeader's action above it
               — right edges alone left a digit 4px off a 16px icon (Katerina,
               2026-09-09). A three-digit count grows the box leftwards. */}
-          <span className="min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted">{count}</span>
+          <span
+            className={cn(
+              'min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted',
+              // With a menu, the ⋮ takes this place while it shows.
+              menu != null && 'transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0 group-has-[[aria-expanded=true]]/nav:opacity-0',
+            )}
+          >
+            {count}
+          </span>
         </WithTooltip>
+      ) : menu != null ? (
+        // No count, but a menu: the count's place is kept free, so a long
+        // label truncates before the ⋮ instead of running under it.
+        <span aria-hidden="true" className="min-w-4 shrink-0" />
       ) : null}
     </a>
   )
+  if (menu == null) return row
+  const name = menuLabel ?? `More options for ${label}`
+  return (
+    <div className="group/nav relative shrink-0">
+      {row}
+      {/* `right-1`: the 24px button's 16px icon then ends 8px from the row's
+          edge, where the count ends (px-2), so the ⋮ lands on the number. */}
+      <div className="absolute inset-y-0 right-1 flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100">
+        <Menu
+          align="right"
+          trigger={
+            <IconButton tooltip="More options" aria-label={name}>
+              <IconDotsVertical size={16} stroke={1.5} />
+            </IconButton>
+          }
+        >
+          {menu}
+        </Menu>
+      </div>
+    </div>
+  )
 }

package/src/Reaction.tsx

@@ -81,7 +81,7 @@ export function Reaction({ emoji, count, pressed = false, className, ...props }:
                (Katerina, 2026-09-08). The number reads in the text colour
                there; the accent keeps the edge and the fill. Signal keeps
                Peek's blue-on-wash, which reads. */
-            'border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary'
+            'border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary'
           : 'border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover',
         className,
       )}

package/src/SectionHeader.mdx

@@ -24,6 +24,15 @@ title the toggle — that is where a section folds.
 
 <Canvas of={SectionHeaderStories.PersistentActions} />
 
+- `look="quiet"`: a small grey label over a list whose rows are rows, not
+  headings — "Folders" over the folders — with its action held on screen.
+  It never lights up under the pointer; its button does.
+
+<Canvas of={SectionHeaderStories.Quiet} />
+
+- `look="row"`: the header is a row among rows — a folder in a sidebar. Use
+  it through **CollapsibleSection**'s `look="row"`.
+
 ## When not
 
 - A section that opens and closes → **CollapsibleSection**: the header,

package/src/SectionHeader.stories.tsx

@@ -56,3 +56,18 @@ export const WithTrailing: Story = {
     actions: [{ icon: <IconPlus size={16} stroke={1.5} />, tooltip: 'Add', onClick: () => {} }],
   },
 }
+
+/** `look="quiet"`: a small grey label over a list, with its action always on screen — "Folders" over the folders. The row never lights up; the button does. */
+export const Quiet: Story = {
+  args: {
+    title: 'Folders',
+    look: 'quiet',
+    showActions: 'always',
+    actions: [{ icon: <IconPlus size={16} stroke={1.5} />, tooltip: 'New folder', onClick: () => {} }],
+  },
+}
+
+/** `look="row"`: a row among rows — the chevron and the title at a sidebar row's size and colour, brightening under the pointer. CollapsibleSection's `look="row"` draws this. */
+export const Row: Story = {
+  args: { title: 'Folder', look: 'row', chevron: true, isExpanded: true, onToggle: () => {} },
+}

package/src/SectionHeader.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { IconChevronRight } from '@tabler/icons-react'
 import { useRender } from '@base-ui/react/use-render'
 import { cn } from './cn'
+import { SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES } from './looks'
 import { IconButton } from './IconButton'
 import { SectionLabel } from './SectionLabel'
 
@@ -65,6 +66,14 @@ export interface SectionHeaderProps {
    * where the buttons light up on their own (UIG-14, Katerina, 19 September).
    */
   hover?: 'fill' | 'none'
+  /**
+   * `heading` (default): a section's title, the `SectionLabel`. `quiet`: a
+   * small grey label over a list (12px, muted) — "Folders" over the folders,
+   * which never reads as one of them. `row`: a row among rows — the chevron
+   * and the title at a row's weight and colour, as a sidebar row is (Katerina,
+   * 30 September: Leaf's folders, in Ship).
+   */
+  look?: 'heading' | 'quiet' | 'row'
   /**
    * What the title renders as, in Base UI's manner. A plain button with
    * `onToggle` by default; `CollapsibleSection` hands in `Collapsible.Trigger`.
@@ -73,24 +82,32 @@ export interface SectionHeaderProps {
   className?: string
 }
 
-export function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = 'hover', hover = 'fill', render, className }: SectionHeaderProps) {
+export function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = 'hover', hover = 'fill', look = 'heading', render, className }: SectionHeaderProps) {
+  const row = look === 'row'
   const titleElement = useRender({
     render: render ?? (chevron ? <button type="button" onClick={onToggle} aria-expanded={isExpanded} /> : <span />),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
-      className: 'flex h-full min-w-0 flex-1 items-center gap-1 text-left',
+      className: cn('flex h-full min-w-0 flex-1 items-center text-left', row ? 'gap-2' : 'gap-1'),
       children: (
         <>
           {chevron && (
             <IconChevronRight
-              size={12}
+              size={row ? 16 : 12}
               stroke={1.5}
-              className={cn('shrink-0 text-text-secondary transition-transform duration-150', isExpanded && 'rotate-90')}
+              className={cn('shrink-0 transition-transform duration-150', !row && 'text-text-secondary', isExpanded && 'rotate-90')}
             />
           )}
-          <SectionLabel>{title}</SectionLabel>
+          {look === 'quiet' ? (
+            <span className="min-w-0 truncate text-caption text-text-muted">{title}</span>
+          ) : row ? (
+            // A row's words: NavItem's size and colour, brightening under the pointer with the row.
+            <span className="min-w-0 flex-1 truncate text-body-2">{title}</span>
+          ) : (
+            <SectionLabel>{title}</SectionLabel>
+          )}
         </>
       ),
     },
@@ -99,11 +116,15 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
   return (
     <div
       className={cn(
-        'group flex h-[32px] shrink-0 items-center gap-1 rounded-lg px-2 transition-colors',
+        'group flex h-[32px] shrink-0 items-center gap-1 px-2',
+        !row && 'transition-colors',
+        // A row is NavItem's shape and colour: 6px corners, secondary words that brighten on hover.
+        row ? cn(SIDEBAR_ROW_CLASSES, SIDEBAR_ROW_TEXT_CLASSES) : 'rounded-lg',
         // The fill says "this does something": a row with a toggle or actions
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).
-        hover === 'fill' && (chevron || (actions && actions.length > 0)) && 'hover:bg-bg-hover',
+        // A quiet label never lights up: it is a label; its button does.
+        hover === 'fill' && look !== 'quiet' && (chevron || (actions && actions.length > 0)) && 'hover:bg-bg-hover',
         className,
       )}
     >

package/src/eslint/no-restyled-part.ts

@@ -125,6 +125,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   Card: ['fill', 'hover', 'attention', 'selected', 'active', 'hovered', 'quietUntilHover', 'unreadable', 'clip'],
   Checkbox: ['row'],
   Chip: ['type'],
+  CollapsibleSection: ['look'],
   Divider: ['tone', 'orientation'],
   EmptyState: ['scope'],
   FieldLine: ['tone'],
@@ -142,7 +143,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   Reaction: ['pressed'],
   ReactionPicker: ['surface'],
   RichText: ['size'],
-  SectionHeader: ['hover'],
+  SectionHeader: ['hover', 'look'],
   SectionLabel: ['tone', 'truncate'],
   Select: ['size'],
   Tabs: ['size'],

package/src/looks.ts

@@ -42,3 +42,7 @@ export const CHIP_TEXT_CLASSES = 'text-chip signal:font-mono signal:text-small s
 
 /** Words typed straight into an input with no box of its own: SearchInput and ChipInput. */
 export const BARE_INPUT_CLASSES = 'bg-transparent text-text-primary placeholder:text-text-muted outline-none'
+
+/** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
+export const SIDEBAR_ROW_CLASSES = 'rounded-md transition-colors'
+export const SIDEBAR_ROW_TEXT_CLASSES = 'text-text-secondary hover:text-text-primary'

package/tailwind-preset.js

@@ -175,6 +175,7 @@ export default {
         'accent-primary': 'var(--accent-primary)',
         'accent-hover':   'var(--accent-hover)',
         'accent-muted':   'var(--accent-muted)',
+        'accent-text':    'var(--accent-text)',
         // semantic
         'info-default':    'var(--info-default)',
         'info-muted':      'var(--info-muted)',