@estiva-app/ui 0.50.4 → 0.52.0

package/dist/looks.d.ts

@@ -36,4 +36,11 @@ export declare const BARE_INPUT_CLASSES = "bg-transparent text-text-primary plac
 /** 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";
+/**
+ * A panel that slides open and shut on Base UI's Collapsible: Base UI measures
+ * it and writes its height to a variable, `auto` again once the slide ends, and
+ * the panel is 0 high on its opening and closing frames. None under
+ * prefers-reduced-motion. CollapsibleSection's rows, and the rows under a NavItem.
+ */
+export declare const COLLAPSIBLE_PANEL_CLASSES = "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";
 //# 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;AAE7G,4IAA4I;AAC5I,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,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;AAErF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,kLAAkL,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.50.4",
+  "version": "0.52.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -88,6 +88,7 @@
     "eslint-plugin-better-tailwindcss": "^4.7.0",
     "typescript-eslint": "^8.0.0",
     "@tiptap/core": "^3.22.1",
+    "@tiptap/extension-mention": "^3.22.1",
     "@tiptap/pm": "^3.22.1",
     "@tiptap/react": "^3.22.1",
     "@tiptap/suggestion": "^3.22.1"
@@ -105,6 +106,9 @@
     "@tiptap/core": {
       "optional": true
     },
+    "@tiptap/extension-mention": {
+      "optional": true
+    },
     "@tiptap/pm": {
       "optional": true
     },
@@ -126,6 +130,7 @@
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-mention": "^3.31.3",
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.50.4",
-    "exports": 104,
-    "typeExports": 113,
+    "packageVersion": "0.52.0",
+    "exports": 120,
+    "typeExports": 128,
     "files": null
   },
   "storybook": {
@@ -15,6 +15,25 @@
     "devUrl": "http://localhost:6008"
   },
   "entries": [
+    {
+      "name": "applyFormat",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "Apply one format to the current block. `set*` wherever Tiptap has one: choosing Heading should make a heading, not turn one off.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "AppShell",
       "repo": "estiva-ui",
@@ -583,6 +602,25 @@
         "signal:bg-transparent signal:border signal:border-border-default signal:text-text-primary signal:shadow-none signal:hover:bg-success-muted signal:hover:border-success-outline signal:hover:text-success-default signal:transition-colors"
       ]
     },
+    {
+      "name": "CaptionedReference",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "A reference mid-sentence, drawn as `label: snippet` and written as its `uri` verbatim (SPEC §13.1).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Card",
       "repo": "estiva-ui",
@@ -1089,6 +1127,12 @@
           "required": false,
           "note": "`heading` (default): the title is a section heading."
         },
+        {
+          "name": "indent",
+          "takes": "true/false",
+          "required": false,
+          "note": "With the `heading` look: the rows start under the title, past the chevron — a folder in a sidebar, its files lightly indented under its name (Katerina, 2 October)."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -2170,6 +2214,63 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "filterPeople",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The people whose name holds the query, the first {@link PEOPLE_LIMIT} of them.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "filterReferences",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The references whose label or text holds the query — the last {@link REFERENCE_LIMIT}, in the order given: a thread is unbounded, and a list that grew with it would be a hundred rows of prose.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "filterSlashSections",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The sections narrowed to a query — the text typed after the `/`.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Form",
       "repo": "estiva-ui",
@@ -2233,6 +2334,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "FORMATS",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The formats `/` offers, in order. The hint is what you would type, not a key chord.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "formatSection",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The Format section every app's `/` opens with.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "hueFor",
       "repo": "estiva-ui",
@@ -3512,6 +3651,36 @@
           "required": false,
           "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
         },
+        {
+          "name": "hint",
+          "takes": "anything",
+          "required": false,
+          "note": "Shown only while the row is pointed at or focused, left of the count: a neutral `Chip`, typically."
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": false,
+          "note": "Rows under this one, folding under it: `NavItem`s."
+        },
+        {
+          "name": "defaultOpen",
+          "takes": "true/false",
+          "required": false,
+          "note": "With `children`: open unless told otherwise."
+        },
+        {
+          "name": "open",
+          "takes": "true/false",
+          "required": false,
+          "note": "With `children`: the caller owns the state."
+        },
+        {
+          "name": "onOpenChange",
+          "takes": "a handler",
+          "required": false,
+          "note": null
+        },
         {
           "name": "className",
           "takes": "text",
@@ -3520,7 +3689,12 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "frame-navitem--docs",
@@ -3531,9 +3705,66 @@
         "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"
+        "text-center font-mono text-caption tabular-nums text-text-muted transition-opacity",
+        "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none"
       ]
     },
+    {
+      "name": "NavTree",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/NavTree.tsx",
+      "purpose": "A sidebar's tree from one nested list: a quiet label, groups that fold under the standard heading with their rows lightly indented, and rows under rows to any depth.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "title",
+          "takes": "text",
+          "required": false,
+          "note": "The quiet label over the groups. Absent, none is drawn."
+        },
+        {
+          "name": "groups",
+          "takes": "NavTreeGroup[] | null",
+          "required": true,
+          "note": "`null` while the first read is on its way: a skeleton in the rows' place."
+        },
+        {
+          "name": "selected",
+          "takes": "text",
+          "required": false,
+          "note": "The row that is current: `active`, and its group starts open."
+        },
+        {
+          "name": "onSelect",
+          "takes": "a handler",
+          "required": false,
+          "note": "A row was clicked. A router app prevents the default and navigates."
+        },
+        {
+          "name": "emptyMessage",
+          "takes": "text",
+          "required": true,
+          "note": "What to say when there are no groups. The words are the caller's."
+        },
+        {
+          "name": "storageKey",
+          "takes": "text",
+          "required": false,
+          "note": "Remember each group open or closed in this browser, under this key and the group's id."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "frame-navtree--docs",
+      "storyId": "frame-navtree--default",
+      "docPage": "src/NavTree.mdx",
+      "app": null,
+      "looks": []
+    },
     {
       "name": "normalizeHref",
       "repo": "estiva-ui",
@@ -3627,6 +3858,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "peopleMenu",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The people list `@` and `!@` open: the face, the name, the second line, and the Enter hint while highlighted — `MenuItem` at its tall size.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Person",
       "repo": "estiva-ui",
@@ -3677,6 +3927,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "PersonMention",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "`@` — a person, as a chip that writes their key (SPEC §13.1).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "PersonTrigger",
       "repo": "estiva-ui",
@@ -4312,6 +4581,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "referenceMenu",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The list `[` opens: one section of `label: snippet` rows, the same box as the people list.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "takes": "text",
+          "required": true,
+          "note": "Names the list, e.g. what can be referenced."
+        },
+        {
+          "name": "sectionLabel",
+          "takes": "text",
+          "required": true,
+          "note": "The section's heading."
+        },
+        {
+          "name": "icon",
+          "takes": "anything",
+          "required": true,
+          "note": "At each row's start: a 16px icon."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "ReferenceNode",
       "repo": "estiva-ui",
@@ -4331,6 +4638,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "ReferenceTrigger",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "`[` — reference something, inserted as a {@link CaptionedReference} chip.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "RichText",
       "repo": "estiva-ui",
@@ -4686,6 +5012,12 @@
           "required": false,
           "note": "Cut a long label short with an ellipsis instead of letting it wrap or spill."
         },
+        {
+          "name": "folds",
+          "takes": "true/false",
+          "required": false,
+          "note": "The title of a group that opens and closes."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -4711,6 +5043,12 @@
       "docPage": "src/SectionLabel.mdx",
       "app": null,
       "looks": [
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted truncate",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary",
+        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary truncate",
         "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary",
         "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary truncate",
         "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted",
@@ -5058,6 +5396,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "SlashCommands",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "`/` — format the line or insert something, at the caret, mid-sentence too.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "SuggestionMenu",
       "repo": "estiva-ui",
@@ -6065,6 +6422,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "typeTrigger",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "A row that types another trigger, so its own list opens — `@` from `/`.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "UnknownBlock",
       "repo": "estiva-ui",
@@ -6084,6 +6460,51 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "UrgentPersonMention",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "`!@` — a person, urgently: the same chip in the urgent tone.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "urgentPubkeys",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/ComposerTriggers.tsx",
+      "purpose": "The keys the document's urgent mentions name — what the write turns into `[\"urgent\", <pubkey>]` tags.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "state",
+          "takes": "{ doc: Doc }",
+          "required": true,
+          "note": null
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-composertriggers--docs",
+      "storyId": "primitives-composertriggers--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "useToast",
       "repo": "estiva-ui",

package/src/CollapsibleSection.mdx

@@ -28,6 +28,12 @@ toggle, and the rows under it, sliding shut and open.
 
 <Canvas of={CollapsibleSectionStories.AsARow} />
 
+- `indent` with the standard heading: its rows start under its title, past
+  the chevron — a group in a sidebar whose rows read as inside it. **NavTree**
+  draws its groups this way.
+
+<Canvas of={CollapsibleSectionStories.Indented} />
+
 In a sidebar — the Sidebar's own Composed canvas, which is where that
 composition lives:
 

package/src/CollapsibleSection.stories.tsx

@@ -47,3 +47,8 @@ export const Remembered: Story = { args: { storageKey: 'estiva-ui.stories.collap
 export const AsARow: Story = {
   args: { title: 'Folder', look: 'row' },
 }
+
+/** `indent`: the heading look, its rows starting under its title, past the chevron — a folder in a sidebar. */
+export const Indented: Story = {
+  args: { title: 'Group', indent: true },
+}

package/src/CollapsibleSection.tsx

@@ -2,6 +2,7 @@ import { useState, type ReactNode } from 'react'
 import { Collapsible } from '@base-ui/react/collapsible'
 import { cn } from './cn'
 import { SectionHeader, type SectionAction } from './SectionHeader'
+import { COLLAPSIBLE_PANEL_CLASSES } from './looks'
 
 /**
  * A section that opens and closes: a `SectionHeader` whose title is the
@@ -42,6 +43,12 @@ export interface CollapsibleSectionProps {
    * its title, past the chevron (`SectionHeader`'s `look`).
    */
   look?: 'heading' | 'row'
+  /**
+   * With the `heading` look: the rows start under the title, past the
+   * chevron — a folder in a sidebar, its files lightly indented under its
+   * name (Katerina, 2 October). The `row` look always indents.
+   */
+  indent?: boolean
   /** The rows. */
   children: ReactNode
   /** On the section's box: `mt-2` between groups, `shrink-0` in a scrolling column. */
@@ -72,7 +79,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -91,10 +98,11 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
           prefers-reduced-motion. */}
       <Collapsible.Panel
         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"
+        className={COLLAPSIBLE_PANEL_CLASSES}
       >
-        {/* 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>
+        {/* A row's rows start under its title: the 16px chevron and its 8px gap
+            (pl-6). An indented heading's: its 12px chevron and 4px gap (pl-4). */}
+        <div className={cn('flex flex-col', look === 'row' ? 'pl-6' : indent && 'pl-4', contentClassName)}>{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )