From f66833c0897c10e8450af775450b1dec9b9daefa Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 20 Apr 2025 15:14:47 -0700
Subject: [PATCH] docs(content-switcher): improve docs

---
 docs/src/pages/components/ContentSwitcher.svx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 5c98d9ba..73d10640 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -9,8 +9,12 @@ components: ["ContentSwitcher", "Switch"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`ContentSwitcher` lets users switch between different views or sections of content. Use it to organize related content into distinct categories or states.
+
 ## Default
 
+Create a content switcher with `Switch` components. Each switch needs a `text` prop.
+
 <ContentSwitcher>
   <Switch text="Latest news" />
   <Switch text="Trending" />
@@ -18,6 +22,8 @@ components: ["ContentSwitcher", "Switch"]
 
 ## Initial selected index
 
+Set `selectedIndex` to pre-select a switch when the content switcher loads.
+
 <ContentSwitcher selectedIndex={1}>
   <Switch text="Latest news" />
   <Switch text="Trending" />
@@ -26,10 +32,16 @@ components: ["ContentSwitcher", "Switch"]
 
 ## Reactive example
 
+This example demonstrates how to programmatically control the content switcher using
+the `bind:selectedIndex` directive. Update the selected index based on user
+interactions or application state.
+
 <FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
 
 ## Custom switch slot
 
+Override the default slot in `Switch` to customize how each option displays.
+
 <ContentSwitcher>
   <Switch>
     <div style="display: flex; align-items: center;">
@@ -45,6 +57,8 @@ components: ["ContentSwitcher", "Switch"]
 
 ## Extra-large size
 
+Set `size` to `"xl"` for an extra-large content switcher.
+
 <ContentSwitcher size="xl">
   <Switch text="All" />
   <Switch text="Archived" />
@@ -52,6 +66,8 @@ components: ["ContentSwitcher", "Switch"]
 
 ## Small size
 
+Set `size` to `"sm"` for a small content switcher.
+
 <ContentSwitcher size="sm">
   <Switch text="All" />
   <Switch text="Archived" />
@@ -59,6 +75,8 @@ components: ["ContentSwitcher", "Switch"]
 
 ## Disabled
 
+Set `disabled` to `true` on individual switches to prevent interaction.
+
 <ContentSwitcher>
   <Switch disabled text="All" />
   <Switch disabled text="Archived" />