From 28973ea98bdd58db5fed30254f39cf155974f341 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Wed, 19 Aug 2026 21:53:22 +0000
Subject: [PATCH] feat(configurator): grouped, named navigation IA
 (Foundations/Composition/Quality/Project)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the flat, unlabelled icon rail with a grouped, always-labelled
navigation so users reason about areas of the design system instead of decoding
icons. The rail is now organised into four named groups:

- Foundations: Colors, Typography, Spacing, Shape, Motion
- Composition: Layout, Shadows, Effects, Macros, Components, Misc
- Quality:     Changes, Accessibility
- Project:     Presets, Install & export, Reference

Renames per the plan: Borders→Shape (it already holds radius), WCAG→
Accessibility, Themes→Presets, Install→"Install & export", Classes→Reference.
Labels update in App's panel-heading map and HomePanel too, so the sidebar, the
panel header and the Home overview all tell the same story (same order, names,
descriptions and counts).

Responsive: desktop shows the labelled column (w-52) with group headers and a
trailing count pill; mobile keeps the compact icon rail (w-14) with corner-dot
counts and tooltips — no change to the mobile fold behaviour.

Scope: this is the information-architecture + naming half of the redesign's
phase 4. Domain/panel ids, token classification and preview mapping are
unchanged, so it's non-disruptive. Content-level panel merges (a single Depth
panel combining Shadows+Effects, the Misc split, and moving focus-ring/touch
into an expanded Accessibility panel) are deliberately deferred to their own
focused follow-ups.

Updated tests-e2e/shell.spec.js NAV_LABELS to the new names. check, lint, all
257 unit tests and the shell e2e suite pass; desktop + mobile screenshot-verified.
---
 configurator/src/App.svelte                   |   5 +-
 .../src/components/panels/HomePanel.svelte    | 156 +++++++--------
 .../src/components/shell/SidebarNav.svelte    | 182 ++++++++++--------
 configurator/tests-e2e/shell.spec.js          |   6 +-
 4 files changed, 191 insertions(+), 158 deletions(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 41265ac6e..fa63e96a6 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -18,9 +18,10 @@
 
   const DOMAIN_LABELS: Record<string, string> = {
     home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
-    layout: "Layout", borders: "Borders", shadows: "Shadows", motion: "Motion",
+    layout: "Layout", borders: "Shape", shadows: "Shadows", motion: "Motion",
     effects: "Effects", macros: "Macros", misc: "Misc", components: "Components",
-    changes: "Changes", themes: "Themes", wcag: "WCAG", setup: "Install", cheatsheet: "Classes",
+    changes: "Changes", themes: "Presets", wcag: "Accessibility",
+    setup: "Install & export", cheatsheet: "Reference",
   };
 
   function overridesByDomain(ov: Record<string, string>): Record<string, number> {
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 0078d853b..846a64191 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
     Sparkles, Palette, Type, Ruler, Layout, Square, Layers, Zap,
-    Puzzle, Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, Save,
+    Puzzle, Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, Save, ListChecks,
   } from '@lucide/svelte';
   import type { SavedSlot } from '../../types';
   import { listSavedThemes, saveTheme } from '../../lib/savedThemes';
@@ -14,38 +14,61 @@
     onResetAll: () => void;
   } = $props();
 
-  const TOKEN_DOMAINS = [
-    { id: "colors",     icon: Palette,  label: "Colors",     desc: "Brand, semantic & neutral palettes" },
-    { id: "typography", icon: Type,     label: "Typography", desc: "Font families & fluid type scale" },
-    { id: "spacing",    icon: Ruler,    label: "Spacing",    desc: "Space scale & section rhythm" },
-    { id: "layout",     icon: Layout,   label: "Layout",     desc: "Containers, grids & primitives" },
-    { id: "borders",    icon: Square,   label: "Borders",    desc: "Corner radius & border widths" },
-    { id: "shadows",    icon: Layers,   label: "Shadows",    desc: "Elevation & depth control" },
-    { id: "motion",     icon: Zap,      label: "Motion",     desc: "Duration & easing curves" },
-    { id: "effects",    icon: Sparkles, label: "Effects",    desc: "Blur, opacity & scrollbars" },
-    { id: "macros",     icon: Blocks,    label: "Macros",     desc: "Flow, prose, aspect & scrim" },
-    { id: "misc",       icon: Puzzle,    label: "Misc",       desc: "Z-index & remaining tokens" },
-    { id: "components", icon: Component, label: "Components", desc: "Button & card component tokens" },
+  // Mirrors SidebarNav's grouped information architecture so Home and the rail
+  // always tell the same story (same order, names and descriptions).
+  const GROUPS = [
+    {
+      label: "Foundations",
+      items: [
+        { id: "colors",     icon: Palette,   label: "Colors",     desc: "Brand, semantic & neutral palettes" },
+        { id: "typography", icon: Type,      label: "Typography", desc: "Font families & fluid type scale" },
+        { id: "spacing",    icon: Ruler,     label: "Spacing",    desc: "Space scale & section rhythm" },
+        { id: "borders",    icon: Square,    label: "Shape",      desc: "Corner radius & border widths" },
+        { id: "motion",     icon: Zap,       label: "Motion",     desc: "Duration & easing curves" },
+      ],
+    },
+    {
+      label: "Composition",
+      items: [
+        { id: "layout",     icon: Layout,    label: "Layout",     desc: "Containers, grids & primitives" },
+        { id: "shadows",    icon: Layers,    label: "Shadows",    desc: "Elevation & depth control" },
+        { id: "effects",    icon: Sparkles,  label: "Effects",    desc: "Blur, opacity & scrollbars" },
+        { id: "macros",     icon: Blocks,    label: "Macros",     desc: "Flow, prose, aspect & scrim" },
+        { id: "components", icon: Component, label: "Components", desc: "Button & card component tokens" },
+        { id: "misc",       icon: Puzzle,    label: "Misc",       desc: "Z-index & remaining tokens" },
+      ],
+    },
+    {
+      label: "Quality",
+      items: [
+        { id: "changes",    icon: ListChecks,  label: "Changes",       desc: "Review every active override" },
+        { id: "wcag",       icon: ShieldCheck, label: "Accessibility", desc: "Contrast checker & fixes" },
+      ],
+    },
+    {
+      label: "Project",
+      items: [
+        { id: "themes",     icon: SwatchBook, label: "Presets",          desc: "Save & re-apply configurations" },
+        { id: "setup",      icon: Package,    label: "Install & export", desc: "Export overrides & setup" },
+        { id: "cheatsheet", icon: BookOpen,   label: "Reference",        desc: "Class & token catalogue" },
+      ],
+    },
   ] as const;
 
-  const TOOLS = [
-    { id: "themes",     icon: SwatchBook,  label: "Themes",  desc: "Save & re-apply configurations" },
-    { id: "wcag",       icon: ShieldCheck, label: "WCAG",    desc: "Contrast checker & fixes" },
-    { id: "setup",      icon: Package,     label: "Install", desc: "Export overrides & setup" },
-    { id: "cheatsheet", icon: BookOpen,    label: "Classes", desc: "Utility class reference" },
-  ] as const;
+  let overridesCount = $derived(Object.keys(overrides).length);
 
-  // Per-domain override counts for the Home screen tiles — uses the same
-  // canonical, ordered domainOf() classification as the sidebar badges and
-  // App.svelte's "Reset N" button, so counts can't disagree or double-count
-  // (unlike independent substring-per-domain matching, where e.g.
-  // --sf-btn-radius could match both "components" and a loose "radius"
-  // pattern in another domain's own list).
-  function domainCount(id: string): number {
+  // Per-destination override count — the same canonical domainOf() classifier
+  // the sidebar and Reset use, so counts never disagree. `changes` shows the
+  // total; non-token tools show nothing.
+  const NON_TOKEN_IDS = new Set<string>(["changes", "wcag", "themes", "setup", "cheatsheet"]);
+  const TOKEN_DOMAIN_IDS = new Set<string>(
+    GROUPS.flatMap((g) => g.items.map((i) => i.id as string)).filter((id) => !NON_TOKEN_IDS.has(id)),
+  );
+  function countFor(id: string): number {
+    if (id === "changes") return overridesCount;
+    if (!TOKEN_DOMAIN_IDS.has(id)) return 0;
     return Object.keys(overrides).filter((k) => domainOf(k) === id).length;
   }
-
-  let overridesCount = $derived(Object.keys(overrides).length);
   let savedThemes = $state<SavedSlot[]>(listSavedThemes());
   let newName = $state("");
 
@@ -81,60 +104,39 @@
     {/if}
   </div>
 
-  <!-- Token domains -->
-  <div>
-    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div>
-    <div class="space-y-1">
-      {#each TOKEN_DOMAINS as d (d.id)}
-        {@const count = domainCount(d.id)}
-        {@const DomainIcon = d.icon}
-        <button
-          onclick={() => onSelect(d.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
-        >
-          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
-            <DomainIcon class="w-4 h-4" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{d.label}</div>
-            <div class="text-[9px] text-slate-400 dark:text-slate-600">{d.desc}</div>
-          </div>
-          {#if count > 0}
-            <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
-          {/if}
-          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
-        </button>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Tools -->
-  <div>
-    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Tools</div>
-    <div class="space-y-1">
-      {#each TOOLS as t (t.id)}
-        {@const ToolIcon = t.icon}
-        <button
-          onclick={() => onSelect(t.id)}
-          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
-        >
-          <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
-            <ToolIcon class="w-4 h-4" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t.label}</div>
-            <div class="text-[9px] text-slate-400 dark:text-slate-600">{t.desc}</div>
-          </div>
-          <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
-        </button>
-      {/each}
+  <!-- Grouped destinations (mirror of the sidebar IA) -->
+  {#each GROUPS as group (group.label)}
+    <div>
+      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{group.label}</div>
+      <div class="space-y-1">
+        {#each group.items as d (d.id)}
+          {@const count = countFor(d.id)}
+          {@const DomainIcon = d.icon}
+          <button
+            onclick={() => onSelect(d.id)}
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-black/6 dark:hover:bg-white/6 transition-colors cursor-pointer group text-left"
+          >
+            <div class="text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300 transition-colors shrink-0">
+              <DomainIcon class="w-4 h-4" />
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="text-[11px] font-semibold text-slate-700 dark:text-slate-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{d.label}</div>
+              <div class="text-[9px] text-slate-400 dark:text-slate-600">{d.desc}</div>
+            </div>
+            {#if count > 0}
+              <span class="text-[9px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0">{count}</span>
+            {/if}
+            <span class="text-slate-300 dark:text-slate-700 group-hover:text-slate-500 text-[10px]">→</span>
+          </button>
+        {/each}
+      </div>
     </div>
-  </div>
+  {/each}
 
   <!-- Saved themes -->
   <div>
     <div class="flex items-center justify-between mb-2">
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Saved themes</div>
+      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Presets</div>
       <button
         onclick={() => onSelect("themes")}
         class="text-[10px] text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer"
diff --git a/configurator/src/components/shell/SidebarNav.svelte b/configurator/src/components/shell/SidebarNav.svelte
index 1e300b5c1..224b0ee44 100644
--- a/configurator/src/components/shell/SidebarNav.svelte
+++ b/configurator/src/components/shell/SidebarNav.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
-    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Puzzle,
-    Blocks, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
+    Home, Palette, Type, Ruler, Layout, Square, Layers, Zap, Sparkles, Blocks,
+    Puzzle, Component, SwatchBook, ShieldCheck, Package, BookOpen, ListChecks,
   } from '@lucide/svelte';
 
   let { activeId, onSelect, overridesByDomain = {} }: {
@@ -10,88 +10,118 @@
     overridesByDomain?: Record<string, number>;
   } = $props();
 
-  const NAV_ITEMS = [
-    { id: "home",       icon: Home,        label: "Home",       group: "tokens" },
-    { id: "colors",     icon: Palette,     label: "Colors",     group: "tokens" },
-    { id: "typography", icon: Type,        label: "Typography", group: "tokens" },
-    { id: "spacing",    icon: Ruler,       label: "Spacing",    group: "tokens" },
-    { id: "layout",     icon: Layout,      label: "Layout",     group: "tokens" },
-    { id: "borders",    icon: Square,      label: "Borders",    group: "tokens" },
-    { id: "shadows",    icon: Layers,      label: "Shadows",    group: "tokens" },
-    { id: "motion",     icon: Zap,         label: "Motion",     group: "tokens" },
-    { id: "effects",    icon: Sparkles,    label: "Effects",    group: "tokens" },
-    { id: "macros",     icon: Blocks,      label: "Macros",     group: "tokens" },
-    { id: "misc",       icon: Puzzle,      label: "Misc",       group: "tokens" },
-    { id: "components", icon: Component,   label: "Components", group: "tokens" },
-    { id: "changes",    icon: ListChecks,  label: "Changes",    group: "tools" },
-    { id: "themes",     icon: SwatchBook,  label: "Themes",     group: "tools" },
-    { id: "wcag",       icon: ShieldCheck, label: "WCAG",       group: "tools" },
-    { id: "setup",      icon: Package,     label: "Install",    group: "tools" },
-    { id: "cheatsheet", icon: BookOpen,    label: "Classes",    group: "tools" },
-  ] as const;
-
-  let tokens = $derived(NAV_ITEMS.filter((i) => i.group === "tokens"));
-  let tools = $derived(NAV_ITEMS.filter((i) => i.group === "tools"));
+  // Grouped information architecture. Every destination lives under one of four
+  // named groups so a user reasons about *areas of the design system* instead
+  // of decoding an unlabelled icon rail. `home` sits above the groups; the
+  // labels are shown on desktop and collapse to tooltips on mobile.
+  type NavItem = { id: string; icon: typeof Home; label: string };
+  const HOME: NavItem = { id: "home", icon: Home, label: "Home" };
+  const GROUPS: { label: string; items: NavItem[] }[] = [
+    {
+      label: "Foundations",
+      items: [
+        { id: "colors",     icon: Palette,   label: "Colors" },
+        { id: "typography", icon: Type,      label: "Typography" },
+        { id: "spacing",    icon: Ruler,     label: "Spacing" },
+        { id: "borders",    icon: Square,    label: "Shape" },
+        { id: "motion",     icon: Zap,       label: "Motion" },
+      ],
+    },
+    {
+      label: "Composition",
+      items: [
+        { id: "layout",     icon: Layout,    label: "Layout" },
+        { id: "shadows",    icon: Layers,    label: "Shadows" },
+        { id: "effects",    icon: Sparkles,  label: "Effects" },
+        { id: "macros",     icon: Blocks,    label: "Macros" },
+        { id: "components", icon: Component, label: "Components" },
+        { id: "misc",       icon: Puzzle,    label: "Misc" },
+      ],
+    },
+    {
+      label: "Quality",
+      items: [
+        { id: "changes",    icon: ListChecks,  label: "Changes" },
+        { id: "wcag",       icon: ShieldCheck, label: "Accessibility" },
+      ],
+    },
+    {
+      label: "Project",
+      items: [
+        { id: "themes",     icon: SwatchBook, label: "Presets" },
+        { id: "setup",      icon: Package,    label: "Install & export" },
+        { id: "cheatsheet", icon: BookOpen,   label: "Reference" },
+      ],
+    },
+  ];
 
   // Every override maps to exactly one token domain, so their sum is the total
-  // override count — which is what the Changes overview badge should show.
+  // override count — what the Changes overview badge should show.
   let totalOverrides = $derived(Object.values(overridesByDomain).reduce((a, b) => a + b, 0));
   const countFor = (id: string): number =>
     id === "changes" ? totalOverrides : (overridesByDomain[id] || 0);
 </script>
 
-<nav class="w-14 bg-slate-50 dark:bg-[#0a0a0f] border-r border-black/8 dark:border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden">
-  <div class="flex flex-col items-center gap-1 w-full px-2">
-    {#each tokens as item (item.id)}
-      {@const isActive = activeId === item.id}
-      {@const count = overridesByDomain[item.id] || 0}
-      {@const Icon = item.icon}
-      <button
-        onclick={() => onSelect(item.id)}
-        title={item.label}
-        class={`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${
-          isActive
-            ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
-            : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
-        }`}
-      >
-        <Icon class="w-4 h-4" />
-        {#if count > 0 && !isActive}
-          <span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center">
-            {count > 9 ? "+" : count}
-          </span>
-        {/if}
-        <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
-          {item.label}
+<nav
+  class="w-14 md:w-52 bg-slate-50 dark:bg-[#0a0a0f] border-r border-black/8 dark:border-white/8 flex flex-col items-center md:items-stretch py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"
+  aria-label="Panels"
+>
+  {#snippet navButton(item: NavItem)}
+    {@const isActive = activeId === item.id}
+    {@const count = countFor(item.id)}
+    {@const Icon = item.icon}
+    <button
+      onclick={() => onSelect(item.id)}
+      title={item.label}
+      aria-current={isActive ? "page" : undefined}
+      class={`relative flex items-center justify-center md:justify-start gap-2.5 w-10 md:w-full h-10 md:h-8 px-0 md:px-2.5 rounded-xl transition-all cursor-pointer group ${
+        isActive
+          ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
+          : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
+      }`}
+    >
+      <Icon class="w-4 h-4 shrink-0" />
+      <span class="hidden md:block text-[11px] font-semibold truncate">{item.label}</span>
+
+      {#if count > 0}
+        <!-- Mobile: corner dot. Desktop: trailing count pill. -->
+        <span
+          class={`md:hidden absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full text-[8px] font-black flex items-center justify-center ${
+            isActive ? "bg-white text-indigo-700" : "bg-indigo-500 text-white"
+          }`}
+        >
+          {count > 9 ? "+" : count}
         </span>
-      </button>
-    {/each}
-  </div>
-  <div class="w-8 h-px bg-black/8 dark:bg-white/8 my-2"></div>
-  <div class="flex flex-col items-center gap-1 w-full px-2">
-    {#each tools as item (item.id)}
-      {@const isActive = activeId === item.id}
-      {@const count = countFor(item.id)}
-      {@const Icon = item.icon}
-      <button
-        onclick={() => onSelect(item.id)}
-        title={item.label}
-        class={`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${
-          isActive
-            ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
-            : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-black/8 dark:hover:bg-white/8"
-        }`}
-      >
-        <Icon class="w-4 h-4" />
-        {#if count > 0 && !isActive}
-          <span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center">
-            {count > 9 ? "+" : count}
-          </span>
-        {/if}
-        <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
-          {item.label}
+        <span
+          class={`hidden md:flex ml-auto min-w-4 h-4 px-1 rounded-full text-[9px] font-black items-center justify-center ${
+            isActive ? "bg-white/25 text-white" : "bg-indigo-500/15 text-indigo-600 dark:text-indigo-400"
+          }`}
+        >
+          {count > 99 ? "99+" : count}
         </span>
-      </button>
-    {/each}
+      {/if}
+
+      <!-- Tooltip: mobile only (desktop shows the label inline). -->
+      <span class="md:hidden absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10">
+        {item.label}
+      </span>
+    </button>
+  {/snippet}
+
+  <!-- Home -->
+  <div class="flex flex-col items-center md:items-stretch gap-1 w-full px-2">
+    {@render navButton(HOME)}
   </div>
+
+  {#each GROUPS as group (group.label)}
+    <div class="w-8 md:w-auto md:mx-2.5 h-px bg-black/8 dark:bg-white/8 my-2"></div>
+    <div class="hidden md:block px-3 pb-1 text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-600">
+      {group.label}
+    </div>
+    <div class="flex flex-col items-center md:items-stretch gap-1 w-full px-2">
+      {#each group.items as item (item.id)}
+        {@render navButton(item)}
+      {/each}
+    </div>
+  {/each}
 </nav>
diff --git a/configurator/tests-e2e/shell.spec.js b/configurator/tests-e2e/shell.spec.js
index 0b7e72376..7cd2e8fc4 100644
--- a/configurator/tests-e2e/shell.spec.js
+++ b/configurator/tests-e2e/shell.spec.js
@@ -5,9 +5,9 @@ import { test, expect } from '@playwright/test';
 import { watchErrors, gotoClean, navButton } from './helpers.js';
 
 const NAV_LABELS = [
-  'Home', 'Colors', 'Typography', 'Spacing', 'Layout',
-  'Borders', 'Shadows', 'Motion', 'Effects', 'Misc', 'Components',
-  'Themes', 'WCAG', 'Install', 'Classes',
+  'Home', 'Colors', 'Typography', 'Spacing', 'Shape',
+  'Layout', 'Shadows', 'Motion', 'Effects', 'Misc', 'Components',
+  'Changes', 'Accessibility', 'Presets', 'Install & export', 'Reference',
 ];
 
 test('loads with the SLASHED Studio branding', async ({ page }) => {