@surstromming/sidebar-group 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Evgeniy Mnatsakanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,234 @@
+# @surstromming/sidebar-group
+
+A labelled section of sidebar navigation, rendered from data. One group is a
+title plus a menu; each menu item is an icon, a label, and — optionally — a
+**submenu**: either nested nav links that collapse in place, or a `…` dropdown
+of actions for that item.
+
+Drop groups into a `<Sidebar>`; the group knows nothing about the sidebar's
+open/closed state.
+
+## Dependency graph
+
+```mermaid
+graph LR
+  sidebar_group["@surstromming/sidebar-group"]
+  design["@surstromming/design"]
+  dropdown_menu["@surstromming/dropdown-menu"]
+  icon["@surstromming/icon"]
+  popover["@surstromming/popover"]
+  scroll_area["@surstromming/scroll-area"]
+  util["@surstromming/util"]
+  sidebar_group --> design
+  sidebar_group --> dropdown_menu
+  dropdown_menu --> design
+  dropdown_menu --> icon
+  dropdown_menu --> popover
+  popover --> design
+  popover --> scroll_area
+  scroll_area --> design
+  scroll_area --> util
+  sidebar_group --> icon
+```
+
+## Usage
+
+```vue
+<template>
+  <Sidebar v-model:open="sidebar.open">
+    <SidebarGroup label="Platform" :items="platform" @select="go" @toggle="toggleSection" />
+    <SidebarGroup label="Projects" :items="projects" @select="go" @action="onAction" />
+  </Sidebar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Sidebar } from '@surstromming/sidebar'
+import { SidebarGroup } from '@surstromming/sidebar-group'
+import type { SidebarGroupItem } from '@surstromming/sidebar-group'
+import { Bot, Frame, SquareTerminal, Folder, Trash2 } from 'lucide'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+const go = (value: string) => router.push(value)
+const onAction = (item: string, action: string) => console.log(item, action)
+
+// The app owns both `active` (derived from the route) and `expanded`.
+const openSection = ref<string | null>('/playground')
+const toggleSection = (value: string) => {
+  openSection.value = openSection.value === value ? null : value
+}
+
+// Nested nav: submenu.type 'items'
+const platform = computed<SidebarGroupItem[]>(() => [
+  {
+    label: 'Playground',
+    value: '/playground',
+    icon: SquareTerminal,
+    active: route.path.startsWith('/playground'),
+    expanded: openSection.value === '/playground',
+    submenu: {
+      type: 'items',
+      entries: [
+        { label: 'History', value: '/playground/history' },
+        { label: 'Starred', value: '/playground/starred', active: route.path === '/playground/starred' },
+      ],
+    },
+  },
+  { label: 'Models', value: '/models', icon: Bot },
+])
+
+// Per-item action menu: submenu.type 'menu'
+const projects: SidebarGroupItem[] = [
+  {
+    label: 'Design Engineering',
+    value: '/projects/design',
+    icon: Frame,
+    submenu: {
+      type: 'menu',
+      entries: [
+        { label: 'View project', value: 'view', icon: Folder },
+        { separator: true },
+        { label: 'Delete', value: 'delete', icon: Trash2, destructive: true },
+      ],
+    },
+  },
+]
+</script>
+```
+
+## Props
+
+| Prop             | Type                | Default | Notes                                                   |
+| ---------------- | ------------------- | ------- | ------------------------------------------------------- |
+| `label`          | `string`            | —       | Group title. Omit for an unlabelled group.              |
+| `items`          | `SidebarGroupItem[]` | —      | Required.                                               |
+| `side`           | `left \| right`     | `left`  | Where the *sidebar* is; the action menu opens opposite. |
+| `layer`          | `popover \| menu \| modal` | `menu` | Stacking for the (teleported) action menu. |
+
+### Item
+
+| Field     | Type                 | Notes                                                        |
+| --------- | -------------------- | ------------------------------------------------------------ |
+| `label`   | `string`             | Visible text.                                                 |
+| `value`   | `string`             | Identity; what `select` emits. A route path reads well.       |
+| `href`    | `string`             | Renders the row as a real `<a>` — see below. Absent → `<button>`. |
+| `icon`    | `IconNode`           | A lucide icon (`import { Bot } from 'lucide'`).               |
+| `active`  | `boolean`            | Paints the current page's row. The app owns "current".         |
+| `expanded` | `boolean`           | Opens the nested list. The app owns it — see below.            |
+| `submenu` | `SidebarGroupSubmenu` | See below. Absent → a plain row.                             |
+
+### Rows, links, and clicks
+
+A row with `href` is an `<a href>`; without one it's a `<button>`. The element
+is picked by a `computed` returning `{ is, props }`, so the row's children are
+written once.
+
+`href` exists for the behaviors only a genuine link has: middle-click and
+Cmd/Ctrl+click open a new tab, the context menu offers "Open in new tab", the
+browser previews the URL on hover. Faking those on a `<button>` with `auxclick`
++ `window.open` gets one of them right and lies about the rest, so it isn't done.
+
+Plain left clicks are still intercepted (`preventDefault`) and emitted as
+`select`, leaving navigation to the app's router; modified clicks fall through
+to the browser untouched, and middle-click never reaches the handler at all
+(it fires `auxclick`, not `click`). This is `RouterLink`'s contract. The
+consequence to know: **an item with `href` whose `select` nobody handles does
+nothing on a plain click** — the href only carries modified clicks.
+
+### Submenu
+
+Nested links and an action menu both hang off an item's trailing control, so
+they can't coexist — the data names which one it is:
+
+```ts
+export type SidebarGroupSubmenu =
+  | { type: 'items'; entries: SidebarGroupSubItem[] } // collapsible nested nav
+  | { type: 'menu'; entries: DropdownMenuItem[] }     // '…' dropdown of actions
+```
+
+`type: 'items'` renders a chevron that expands `entries` beneath the row
+(`{ label, value, active? }` — same `select` emit as a top-level item).
+`type: 'menu'` renders a `…` trigger — appearing on hover or keyboard focus —
+that opens a `DropdownMenu` built from `entries`
+(`@surstromming/dropdown-menu`'s own item type, separators and `destructive`
+included). The menu teleports to `<body>` and opens on the side away from the
+sidebar (`side` flips it), so a sidebar's `overflow` never clips it.
+
+## Emits
+
+| Event    | Payload                          | Fired when                                          |
+| -------- | -------------------------------- | --------------------------------------------------- |
+| `select` | `value: string`                  | An item or sub-item row is plain-clicked.           |
+| `action` | `item: string, action: string`   | A dropdown entry is chosen; `item` is whose menu.   |
+| `toggle` | `value: string`                  | The chevron is clicked; flip that item's `expanded`. |
+
+The component emits and the app decides (`router.push`, a store call, anything)
+— the package never navigates and never imports a router.
+
+## Fallthrough
+
+Single root (`<div>`), default `inheritAttrs` — `class`, `aria-*` and listeners
+land on the group. The action menu is teleported to `<body>`, so it's stacked
+by `layer` (default `menu`) — above the sidebar's own rung, since on mobile the
+drawer is teleported too and a lower menu would render *behind* it.
+
+## Anatomy
+
+```
+div.root                        the group
+├── div.label                   `label` (omitted when unset)
+└── ul.menu
+    └── li.item
+        ├── a|button .button    icon + label (`href` picks) → select
+        ├── button.action       chevron, type 'items'       → toggle
+        ├── DropdownMenu        '…', type 'menu'            → action
+        └── div.sub             collapse wrapper (0fr → 1fr)
+            └── ul > li > button.subButton                  → select
+```
+
+Nested rows collapse with `grid-template-rows: 0fr → 1fr` plus `overflow:
+hidden` (Accordion's trick) — real height, no JS measuring.
+
+## Expanded state
+
+`expanded` is item data, like `active` — the component is fully controlled and
+holds no open/closed state of its own. The chevron emits `toggle(value)`; the
+app flips the flag (usually in the same `computed` that derives `active`).
+Nothing auto-opens from `active` either — that's the app's call too.
+
+Policy lives where the state does. One-section-at-a-time isn't a prop, it's
+the app holding a single value:
+
+```ts
+const openSection = ref<string | null>('playground')
+const toggleSection = (value: string) => {
+  openSection.value = openSection.value === value ? null : value
+}
+// in the items computed:  expanded: openSection.value === 'playground'
+```
+
+Several-at-once is the same handler over a `string[]` instead.
+
+## Tokens
+
+`sidebar-foreground` (label at 70% via `with-alpha`, rows at full), `sidebar-accent`
+/ `sidebar-accent-foreground` (hover and the `active` row), `sidebar-border` (the
+nested list's leading rule), `sidebar-ring` (focus). Spacing and radii come from
+`design.spacing()` / `design.radius()`.
+
+## Accessibility
+
+The menu is a `<ul>` of `<li>`s; every row is a real `<button>` or `<a href>`,
+so Tab, Enter and the link affordances are the browser's. The chevron carries `aria-expanded` and controls the
+nested list; an `active` row gets `aria-current="page"`. The `…` trigger is
+labelled `aria-label="More"`.
+
+## Recipes
+
+**Flat group, no submenus** — pass items without `submenu` (shadcn's
+`nav-secondary`).
+
+**Push a group to the bottom** — `class` falls through:
+`<SidebarGroup class="mt-auto" …>`, or `margin-block-start: auto` in the app.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@surstromming/sidebar-group",
+  "version": "0.1.0",
+  "description": "A labelled group of sidebar navigation, rendered from data.",
+  "license": "MIT",
+  "author": "Evgeniy Mnatsakanov <evgeniy.mnatsakanov@gmail.com>",
+  "homepage": "https://github.com/hackteck/surstromming/tree/main/packages/sidebar-group#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hackteck/surstromming.git",
+    "directory": "packages/sidebar-group"
+  },
+  "bugs": "https://github.com/hackteck/surstromming/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "design-system",
+    "ui",
+    "scss",
+    "css-modules",
+    "shadcn",
+    "sidebar-group"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@surstromming/design": "^0.1.0",
+    "@surstromming/dropdown-menu": "^0.1.0",
+    "@surstromming/icon": "^0.1.0",
+    "@surstromming/popover": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/SidebarGroup.vue

@@ -0,0 +1,195 @@
+<template>
+  <div :class="$style.root">
+    <div v-if="label" :class="$style.label">{{ label }}</div>
+
+    <ul :class="$style.menu">
+      <li v-for="item in items" :key="item.value" :class="$style.item">
+        <component
+          :is="rowElement(item)"
+          :class="buttonClasses(item)"
+          :href="item.href"
+          :type="rowType(item)"
+          :aria-current="ariaCurrent(item)"
+          @click="select($event, item)"
+        >
+          <Icon v-if="item.icon" :icon="item.icon" :size="16" />
+          <span :class="$style.text">{{ item.label }}</span>
+        </component>
+
+        <button
+          v-if="nestedEntries(item).length"
+          :class="[$style.action, $style.control]"
+          type="button"
+          :aria-label="`Toggle ${item.label}`"
+          :aria-expanded="Boolean(item.expanded)"
+          @click="emit('toggle', item.value)"
+        >
+          <Icon :class="chevronClasses(item)" :icon="ChevronRight" :size="16" />
+        </button>
+
+        <DropdownMenu
+          v-else-if="menuEntries(item).length"
+          :class="$style.action"
+          :items="menuEntries(item)"
+          :side="menuSide"
+          :layer="layer"
+          align="start"
+          @select="(action) => emit('action', item.value, action)"
+        >
+          <template #trigger="{ open, toggle: toggleMenu }">
+            <button
+              :class="triggerClasses(open)"
+              type="button"
+              aria-label="More"
+              @click="toggleMenu"
+            >
+              <Icon :icon="Ellipsis" :size="16" />
+            </button>
+          </template>
+        </DropdownMenu>
+
+        <!-- inert while collapsed: the rows are clipped, not gone — Tab would
+             otherwise walk into links nobody can see. -->
+        <div
+          v-if="nestedEntries(item).length"
+          :class="nestedClasses(item)"
+          :inert="!item.expanded"
+        >
+          <div :class="$style.subInner">
+            <ul :class="$style.subList">
+              <li v-for="sub in nestedEntries(item)" :key="sub.value">
+                <component
+                  :is="rowElement(sub)"
+                  :class="subButtonClasses(sub)"
+                  :href="sub.href"
+                  :type="rowType(sub)"
+                  :aria-current="ariaCurrent(sub)"
+                  @click="select($event, sub)"
+                >
+                  {{ sub.label }}
+                </component>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+import { DropdownMenu } from '@surstromming/dropdown-menu'
+import type { PopoverLayer } from '@surstromming/popover'
+import { Icon } from '@surstromming/icon'
+import { ChevronRight, Ellipsis } from 'lucide'
+import type { SidebarGroupItem, SidebarGroupSide, SidebarGroupSubItem } from './index'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    items: SidebarGroupItem[]
+    side?: SidebarGroupSide
+    /**
+     * Stacking for the action menu, which is teleported to <body>. The `menu`
+     * rung by default, above the sidebar's own: on mobile the drawer is
+     * teleported too, and a menu opened inside it would otherwise render
+     * behind it.
+     */
+    layer?: PopoverLayer
+  }>(),
+  { side: 'left', layer: 'menu' },
+)
+
+// The menu opens away from the sidebar, over the content. Flipping with the
+// sidebar's side is also what an RTL layout will want.
+const menuSide = computed(() => (props.side === 'left' ? 'right' : 'left'))
+
+// Fully controlled: `expanded` lives in the data, so the chevron only asks.
+const emit = defineEmits<{
+  select: [value: string]
+  action: [item: string, action: string]
+  toggle: [value: string]
+}>()
+
+// Empty arrays rather than undefined: the template can count them and loop
+// them without narrowing a union across two calls.
+const nestedEntries = (item: SidebarGroupItem): SidebarGroupSubItem[] =>
+  item.submenu?.type === 'items' ? item.submenu.entries : []
+
+const menuEntries = (item: SidebarGroupItem) =>
+  item.submenu?.type === 'menu' ? item.submenu.entries : []
+
+// `href` buys the link affordances a <button> can't have: middle-click,
+// Cmd+click, "Open in new tab", the URL preview on hover.
+const rowElement = (item: SidebarGroupSubItem) => (item.href ? 'a' : 'button')
+const rowType = (item: SidebarGroupSubItem) => (item.href ? undefined : 'button')
+const ariaCurrent = (item: SidebarGroupSubItem) => (item.active ? 'page' : undefined)
+
+const select = (event: MouseEvent, item: SidebarGroupSubItem) => {
+  // A modified click on a real link is the browser's — that's the whole point
+  // of the <a>. (Middle-click fires auxclick, so it never lands here.)
+  if (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) return
+  event.preventDefault()
+  emit('select', item.value)
+}
+
+const $style = useCssModule()
+const buttonClasses = (item: SidebarGroupItem) => [
+  $style.button,
+  {
+    [$style.isActive]: item.active,
+    [$style.hasAction]: Boolean(item.submenu),
+  },
+]
+// The '…' hides until the row is hovered; an open menu holds it visible —
+// :focus-within can't, now that the menu it opens is teleported to <body>.
+const triggerClasses = (open: boolean) => [
+  $style.control,
+  $style.onHover,
+  { [$style.isOpen]: open },
+]
+const subButtonClasses = (sub: SidebarGroupSubItem) => [
+  $style.subButton,
+  { [$style.isActive]: sub.active },
+]
+const chevronClasses = (item: SidebarGroupItem) => [
+  $style.chevron,
+  { [$style.isExpanded]: item.expanded },
+]
+const nestedClasses = (item: SidebarGroupItem) => [
+  $style.sub,
+  { [$style.isExpanded]: item.expanded },
+]
+</script>
+
+<style module lang="scss">
+@use '@surstromming/design' as design;
+@use 'css/sidebar-group-menu';
+@use 'css/sidebar-group-sub';
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: design.spacing(1);
+  padding: design.spacing(2);
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  height: design.spacing(8);
+  padding: 0 design.spacing(2);
+  color: design.with-alpha(sidebar-foreground, 70%);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sub,
+  .chevron,
+  .onHover {
+    transition: none;
+  }
+}
+</style>

package/src/css/sidebar-group-menu.scss

@@ -0,0 +1,119 @@
+@use '@surstromming/design' as design;
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: design.spacing(1);
+  padding: 0; // the reset zeroes margins, not the UA's list indent
+  list-style: none;
+}
+
+// The trailing control (chevron / '…') is positioned against the row.
+.item {
+  position: relative;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  gap: design.spacing(2);
+  width: 100%;
+  height: design.spacing(8);
+  border-radius: design.radius(md);
+  background-color: transparent;
+  padding: 0 design.spacing(2);
+  color: inherit;
+  font-size: 0.875rem;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:hover {
+    background-color: design.color(sidebar-accent);
+    color: design.color(sidebar-accent-foreground);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px design.color(sidebar-ring);
+  }
+
+  svg {
+    flex-shrink: 0;
+    color: design.color(muted-foreground);
+  }
+}
+
+// The current page: same paint as hover, held on.
+.button.isActive {
+  background-color: design.color(sidebar-accent);
+  color: design.color(sidebar-accent-foreground);
+  font-weight: 500;
+}
+
+// Room for the trailing control, so a long label never runs under it.
+.button.hasAction {
+  padding-inline-end: design.spacing(8);
+}
+
+.text {
+  flex: 1;
+  min-width: 0; // without it a flex item refuses to shrink below its text
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action {
+  position: absolute;
+  top: design.spacing(1);
+  right: design.spacing(1);
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: design.spacing(6);
+  height: design.spacing(6);
+  border-radius: design.radius(sm);
+  background-color: transparent;
+  color: design.color(muted-foreground);
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    background-color: design.color(sidebar-accent);
+    color: design.color(sidebar-accent-foreground);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px design.color(sidebar-ring);
+  }
+}
+
+// The action menu stays out of the way until the row is hovered — but a
+// keyboard user must still find it, and an open menu can't have its trigger
+// fade out from under the pointer.
+.onHover {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+
+  .item:hover &,
+  &:focus-visible,
+  &.isOpen {
+    opacity: 1;
+  }
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.isExpanded {
+  transform: rotate(90deg);
+}

package/src/css/sidebar-group-sub.scss

@@ -0,0 +1,61 @@
+@use '@surstromming/design' as design;
+
+// The row collapses to 0fr and expands to 1fr — the nested list keeps its
+// natural height, so nothing has to be measured in JS.
+.sub {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+}
+
+.sub.isExpanded {
+  grid-template-rows: 1fr;
+}
+
+.subInner {
+  overflow: hidden; // required: a grid item won't shrink below its content without it
+}
+
+.subList {
+  display: flex;
+  flex-direction: column;
+  gap: design.spacing(1);
+  margin: design.spacing(1) 0 design.spacing(1) design.spacing(3.5);
+  border-inline-start: 1px solid design.color(sidebar-border);
+  padding-inline-start: design.spacing(2.5);
+  list-style: none;
+}
+
+.subButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: design.spacing(7);
+  border-radius: design.radius(md);
+  background-color: transparent;
+  padding: 0 design.spacing(2);
+  color: design.with-alpha(sidebar-foreground, 70%);
+  font-size: 0.875rem;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:hover {
+    background-color: design.color(sidebar-accent);
+    color: design.color(sidebar-accent-foreground);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px design.color(sidebar-ring);
+  }
+}
+
+.subButton.isActive {
+  background-color: design.color(sidebar-accent);
+  color: design.color(sidebar-accent-foreground);
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+import type { DropdownMenuItem } from '@surstromming/dropdown-menu'
+import type { IconNode } from '@surstromming/icon'
+
+/**
+ * Which side the *sidebar* is on — mirror the `side` given to `<Sidebar>`.
+ * An item's action menu opens on the opposite side, towards the content.
+ */
+export type SidebarGroupSide = 'left' | 'right'
+
+export interface SidebarGroupSubItem {
+  label: string
+  value: string
+  /** Renders the row as a real <a>: middle-click and Cmd+click open a tab. */
+  href?: string
+  active?: boolean
+}
+
+/**
+ * Nested nav and an action menu both hang off the row's trailing control, so
+ * they can't coexist — the data names which one it is.
+ */
+export type SidebarGroupSubmenu =
+  | { type: 'items'; entries: SidebarGroupSubItem[] }
+  | { type: 'menu'; entries: DropdownMenuItem[] }
+
+export interface SidebarGroupItem extends SidebarGroupSubItem {
+  icon?: IconNode
+  submenu?: SidebarGroupSubmenu
+  /**
+   * Opens the nested list (`submenu.type: 'items'`; ignored otherwise). The
+   * chevron doesn't write it — it emits `toggle`, and the app flips the flag.
+   */
+  expanded?: boolean
+}
+
+export { default as SidebarGroup } from './SidebarGroup.vue'