docs: tweak copy

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 */

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>

docs/src/pages/components/InlineLoading.svx

@@ -13,10 +13,10 @@
 
 ### Status states
 
-<InlineLoading status="active" />
+<InlineLoading status="active" description="Submitting..." />
-<InlineLoading status="inactive" />
+<InlineLoading status="inactive" description="Cancelling..." />
-<InlineLoading status="finished" />
+<InlineLoading status="finished" description="Success" />
-<InlineLoading status="error" />
+<InlineLoading status="error" description="An error occurred" />
 
 ### UX example
 

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

docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte

@@ -5,7 +5,7 @@
   const descriptionMap = {
     active: "Submitting...",
     finished: "Success",
-    inactive: "Cancelled",
+    inactive: "Cancelling...",
   };
 
   const stateMap = {