diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index fda63086..f608f59f 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -62,6 +62,10 @@
     color: #3ddbd9; /* teal 30 */
   }
 
+  .token.function {
+    color: #9ef0f0;
+  }
+
   .token.token.language-javascript,
   .token.attr-value {
     color: #d4bbff; /* purple 30 */
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index bcf9340d..9a653bd9 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -13,28 +13,30 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
 ### Default
 
 <Accordion>
-  <AccordionItem title="Title 1">
-    Content 1
+  <AccordionItem title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### Chevron aligned left
 
 <Accordion align="start">
-  <AccordionItem title="Title 1">
-    Content 1
+  <AccordionItem title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
@@ -42,84 +44,101 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
 
 <Accordion>
   <AccordionItem>
-    <h5 slot="title" style="color: red;">Custom title slot</h5>
-    Content 1
+    <div slot="title">
+      <h5>Natural Language Classifier</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem>
+  <div slot="title">
+      <h5>Natural Language Understanding</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem>
+  <div slot="title">
+      <h5>Language Translator</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### First item open
 
 <Accordion>
-  <AccordionItem title="Title 1" open>
-    Content 1
+  <AccordionItem open title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### Extra-large size
 
 <Accordion size="xl">
-  <AccordionItem title="Title 1">
-    Content 1
+  <AccordionItem title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### Small size
 
 <Accordion size="sm">
-  <AccordionItem title="Title 1">
-    Content 1
+  <AccordionItem title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### Disabled
 
 <Accordion disabled>
-  <AccordionItem title="Title 1">
-    Content 1
+  <AccordionItem title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
 ### Disabled (item)
 
 <Accordion>
-  <AccordionItem disabled title="Title 1">
-    Content 1
+  <AccordionItem disabled title="Natural Language Classifier">
+   <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+   </p>
   </AccordionItem>
-  <AccordionItem title="Title 2">
-    Content 2
+  <AccordionItem title="Natural Language Understanding">
+    Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
   </AccordionItem>
-  <AccordionItem title="Title 3">
-    Content 3
+  <AccordionItem title="Language Translator">
+    <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
 
diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index c642eca6..d6d3c17b 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -10,6 +10,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for building a reusable breadcrumbs component.
+
 ### Default
 
 <Breadcrumb>
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 7b6c8252..0eaffda1 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -45,12 +45,18 @@ let comment = `
 
 <CodeSnippet type="multi" {code} hideCopyButton />
 
-### Wrap text
+### Wrapped text
 
-Note that `wrapText` only applies to the `"multi"` type.
+`wrapText` only applies to the `"multi"` type.
 
 <CodeSnippet wrapText type="multi" code="{comment}" />
 
 ### Skeleton
 
-<CodeSnippet skeleton />
\ No newline at end of file
+The default skeleton type is `"single"`.
+
+<CodeSnippet skeleton />
+
+### Skeleton (multi-line)
+
+<CodeSnippet type="multi" skeleton />
\ No newline at end of file
diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 0b6a5e50..3dc212f8 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -4,24 +4,31 @@ components: ["ContentSwitcher", "Switch"]
 
 <script>
   import { ContentSwitcher, Switch } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
+  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Default
 
 <ContentSwitcher>
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+</ContentSwitcher>
+
+### Initial selected index
+
+<ContentSwitcher selectedIndex={1}>
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+  <Switch text="Recommended" />
 </ContentSwitcher>
 
 ### Light variant
 
 <ContentSwitcher light>
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
 </ContentSwitcher>
 
 ### Custom switch slot
@@ -29,31 +36,33 @@ components: ["ContentSwitcher", "Switch"]
 <ContentSwitcher>
   <Switch>
     <div style="display: flex; align-items: center;">
-        Third section <Add16 style="margin-left: .25rem;" />
-     </div>
+      <Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
+    </div>
+  </Switch>
+  <Switch>
+    <div style="display: flex; align-items: center;">
+      <Analytics16 style="margin-right: 0.5rem;" /> Trending
+    </div>
   </Switch>
-  <Switch text="Switch 2" />
 </ContentSwitcher>
 
 ### Extra-large size
 
 <ContentSwitcher size="xl">
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
+  <Switch text="All" />
+  <Switch text="Archived" />
 </ContentSwitcher>
 
 ### Small size
 
 <ContentSwitcher size="sm">
-  <Switch text="Switch 1" />
-  <Switch text="Switch 2" />
-  <Switch text="Switch 3" />
+  <Switch text="All" />
+  <Switch text="Archived" />
 </ContentSwitcher>
 
 ### Disabled
 
 <ContentSwitcher>
-  <Switch text="Switch 1" disabled />
-  <Switch text="Switch 2" disabled />
+  <Switch disabled text="All" />
+  <Switch disabled text="Archived" />
 </ContentSwitcher>
\ No newline at end of file
diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx
index e4dbe5d4..d4066455 100644
--- a/docs/src/pages/components/InlineLoading.svx
+++ b/docs/src/pages/components/InlineLoading.svx
@@ -13,7 +13,11 @@
 
 ### Status states
 
-<InlineLoading status="active" />
-<InlineLoading status="inactive" />
-<InlineLoading status="finished" />
-<InlineLoading status="error" />
\ No newline at end of file
+<InlineLoading status="active" description="Submitting..." />
+<InlineLoading status="inactive" description="Cancelling..." />
+<InlineLoading status="finished" description="Success" />
+<InlineLoading status="error" description="An error occurred" />
+
+### UX example
+
+<FileSource src="/framed/InlineLoading/InlineLoadingUx" />
\ No newline at end of file
diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx
index 8a10cf35..b155abce 100644
--- a/docs/src/pages/components/Search.svx
+++ b/docs/src/pages/components/Search.svx
@@ -5,6 +5,8 @@
 
 ### Default
 
+The `Search` component is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
+
 <Search />
 
 ### Default value
diff --git a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
new file mode 100644
index 00000000..fdaeb6bc
--- /dev/null
+++ b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
+  import { onDestroy } from "svelte";
+
+  const descriptionMap = {
+    active: "Submitting...",
+    finished: "Success",
+    inactive: "Cancelling...",
+  };
+
+  const stateMap = {
+    active: "finished",
+    inactive: "dormant",
+    finished: "dormant",
+  };
+
+  let timeout = undefined;
+  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
+
+  function reset(incomingState) {
+    if (typeof timeout === "number") {
+      clearTimeout(timeout);
+    }
+
+    if (incomingState) {
+      timeout = setTimeout(() => {
+        state = incomingState;
+      }, 2000);
+    }
+  }
+
+  onDestroy(reset);
+
+  $: reset(stateMap[state]);
+</script>
+
+<ButtonSet>
+  <Button
+    kind="ghost"
+    disabled="{state === 'dormant' || state === 'finished'}"
+    on:click="{() => (state = 'inactive')}"
+  >
+    Cancel
+  </Button>
+  {#if state !== 'dormant'}
+    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+  {:else}
+    <Button on:click="{() => (state = 'active')}">Submit</Button>
+  {/if}
+</ButtonSet>