From 6269aab0d2bb0926292bfbea759d5acf69ecaa97 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Sat, 25 Apr 2026 00:14:32 +0100
Subject: [PATCH] feat(phase9): SettingsGroup component

Reusable progressive-disclosure wrapper around the native <details>
element. Animated chevron, hover + focus-visible affordances, and
prefers-reduced-motion guard. Designed to host the six collapsed
groups in the Phase 9 SettingsPage restructure.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/SettingsGroup.svelte | 55 +++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/lib/components/SettingsGroup.svelte

diff --git a/src/lib/components/SettingsGroup.svelte b/src/lib/components/SettingsGroup.svelte
new file mode 100644
index 0000000..3a61e1e
--- /dev/null
+++ b/src/lib/components/SettingsGroup.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  // Phase 9. Progressive-disclosure wrapper around the native <details>
+  // element. The chevron animates on open via a CSS transform; height
+  // animation uses interpolate-size where the engine supports it
+  // (modern Chromium / WebKit), and falls back to instant open/close
+  // elsewhere. prefers-reduced-motion disables both.
+  import { ChevronRight } from "lucide-svelte";
+
+  interface Props {
+    title: string;
+    description?: string;
+    open?: boolean;
+    children?: import("svelte").Snippet;
+  }
+
+  let { title, description = "", open = false, children }: Props = $props();
+</script>
+
+<details {open} class="settings-group border-t border-border-subtle">
+  <summary
+    class="flex items-start gap-2 cursor-pointer list-none py-3 px-1 rounded hover:bg-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+  >
+    <ChevronRight
+      class="chevron size-4 mt-0.5 shrink-0 text-text-tertiary"
+      aria-hidden="true"
+    />
+    <div class="flex-1">
+      <p class="text-sm text-text font-medium">{title}</p>
+      {#if description}
+        <p class="text-[11px] text-text-tertiary mt-0.5">{description}</p>
+      {/if}
+    </div>
+  </summary>
+  <div class="pl-6 pr-2 pb-3">
+    {@render children?.()}
+  </div>
+</details>
+
+<style>
+  .settings-group :global(summary)::-webkit-details-marker {
+    display: none;
+  }
+  :global(.chevron) {
+    transition: transform 180ms ease;
+  }
+  details[open] > summary :global(.chevron) {
+    transform: rotate(90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.chevron) {
+      transition: none;
+    }
+  }
+</style>