diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml
index c7bcb6d..d27d5e2 100644
--- a/.github/workflows/qa.yml
+++ b/.github/workflows/qa.yml
@@ -39,7 +39,7 @@ jobs:
           QA_TIMEOUT_SCALE: 2
         run: |
           for group in \
-            actions calendar data-display docs feedback input \
+            actions calendar coverage data-display docs feedback input \
             layout navigation showcase surfaces theming unlisted
           do
             ps-qa --app tests/ps-qa/ps-qa.ron \
diff --git a/README.md b/README.md
index fbb0302..a33d679 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ The kitchen sink demo and documentation for our UI components.
 ## Native QA
 
 Build the site, then run every declared outcome with the font-enabled chuzz host
-and ps-qa 0.7.1 or newer:
+and ps-qa 0.7.2 or newer:
 
 ```sh
 bun run build
@@ -14,8 +14,9 @@ ps-qa --app tests/ps-qa/ps-qa.ron qa-hosted \
   --checks tests/ps-qa/checks
 ```
 
-The UI 3.2 registry build passes all 330 native checks across 12 groups,
-including Calendar selection and month navigation. CI includes every group.
+The UI 3.2 registry build passes all 600 native checks across 13 groups,
+including Calendar selection, month navigation, and keyboard and pointer-driven
+Slider and Color Picker outcomes. CI includes every group.
 The Layouts route uses its own document marker, and decorative cards are
 articles rather than controls that promise an action.
 
diff --git a/package.json b/package.json
index b54bcb5..b5d3e65 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@iconify-json/lucide": "^1.2.127",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind4": "^1.0.6",
-    "@pathscale/ui": "^3.1.0",
+    "@pathscale/ui": "^3.2.1",
     "@rsbuild/core": "^1.3.20",
     "@rsbuild/plugin-babel": "^1.0.5",
     "@solidjs/router": "2.0.0-next.19",
diff --git a/src/App.tsx b/src/App.tsx
index 701edd6..1af6c26 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,18 @@
-import { createRouter } from "@solidjs/router";
-import { ParentComponent } from "solid-js";
+import { createRouter, useLocation } from "@solidjs/router";
+import { ParentComponent, createEffect } from "solid-js";
 import { routes } from "./routes";
 
 import { BaseLayout } from "./layouts/BaseLayout";
 import { MarketingHeader } from "./components/layout/Header/MarketingHeader";
 
 const Layout: ParentComponent = (props) => {
+  const location = useLocation();
+
+  createEffect(
+    () => location.pathname,
+    () => window.scrollTo(0, 0),
+  );
+
   return (
     <BaseLayout
       header={MarketingHeader}
diff --git a/src/ThemeToggle.tsx b/src/ThemeToggle.tsx
index 4668962..2af404c 100644
--- a/src/ThemeToggle.tsx
+++ b/src/ThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "@pathscale/ui";
+import { Button, Icon } from "@pathscale/ui";
 import { setTheme, theme } from "./lib/theme";
 
 export default function ThemeToggle() {
@@ -8,12 +8,16 @@ export default function ThemeToggle() {
   };
 
   return (
-    <button
+    <Button
       onClick={toggleTheme}
-      class="p-2 rounded-md bg-primary text-primary-content"
+      variant="solid"
+      flavor="primary"
+      size="sm"
+      width="square"
+      radius="md"
       aria-label="Switch theme"
     >
       {theme() === "dark" ? <Icon src="icon-[lucide--sun]" width={20} height={20} /> : <Icon src="icon-[lucide--moon]" width={20} height={20} />}
-    </button>
+    </Button>
   );
 }
diff --git a/src/components/AlertShowcase.tsx b/src/components/AlertShowcase.tsx
index 9edc4f6..0fedd3a 100644
--- a/src/components/AlertShowcase.tsx
+++ b/src/components/AlertShowcase.tsx
@@ -1,11 +1,14 @@
-import { Component } from "solid-js";
+import { Component, createSignal } from "solid-js";
 import ShowcaseLayout from "./ShowcaseLayout";
 import { Alert, Button, Flex } from "@pathscale/ui";
 import { PropsTable } from "./showcase/PropsTable";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 const AlertShowcase: Component = () => {
+  const [cookieChoice, setCookieChoice] = createSignal<"accept" | "deny" | null>(null);
+  const actions = createActionStatus();
   const sections = [
     { id: "contents", title: "Contents" },
     { id: "default", title: "Default" },
@@ -154,15 +157,20 @@ const AlertShowcase: Component = () => {
             justify="start"
             gap="md"
           >
-            <Alert class="shadow-lg">
-              we use cookies for no reason.
-              <div class="space-x-1">
-                <Button size="sm">Deny</Button>
-                <Button size="sm" flavor="primary">
-                  Accept
-                </Button>
-              </div>
-            </Alert>
+            <div>
+              <Alert class="shadow-lg">
+                we use cookies for no reason.
+                <div class="space-x-1">
+                  <Button size="sm" onClick={() => setCookieChoice("deny")}>Deny</Button>
+                  <Button size="sm" flavor="primary" onClick={() => setCookieChoice("accept")}>
+                    Accept
+                  </Button>
+                </div>
+              </Alert>
+              <p role="status" aria-live="polite" class="mt-3 text-sm text-base-content/70">
+                {cookieChoice() ? `Cookie preference saved: ${cookieChoice()}.` : "Choose a cookie preference."}
+              </p>
+            </div>
           </Flex>
           <CodeBlock
             code={`<Alert>
@@ -182,8 +190,9 @@ const AlertShowcase: Component = () => {
           >
             <Alert class="shadow-lg">
               You have 1 unread message
-              <Button size="sm">See</Button>
+              <Button size="sm" onClick={actions.handler("Unread message opened")}>See</Button>
             </Alert>
+            <ActionStatus message={actions.message()} />
           </Flex>
           <CodeBlock
             code={`<Alert>
diff --git a/src/components/BadgeShowcase.tsx b/src/components/BadgeShowcase.tsx
index 21380ab..ccbd711 100644
--- a/src/components/BadgeShowcase.tsx
+++ b/src/components/BadgeShowcase.tsx
@@ -1,8 +1,10 @@
 import { Badge, Button, Chip, Flex, Icon } from "@pathscale/ui";
+import { createSignal } from "solid-js";
 import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { PropsTable } from "./showcase/PropsTable";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 const badgeProps = [
   { name: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "Indicator size." },
@@ -13,19 +15,21 @@ const badgeProps = [
 ];
 
 export default function BadgeShowcase() {
+  const [selectedPlacement, setSelectedPlacement] = createSignal<"top-right" | "top-left" | "bottom-right" | "bottom-left">("top-right");
+  const actions = createActionStatus();
   return (
     <ShowcaseLayout>
       <Flex direction="col" gap="xl">
         <ShowcaseSection id="anchor" title="Anchored badge">
           <Flex gap="xl" align="center" wrap="wrap">
             <Badge.Anchor>
-              <Button variant="outline" width="square" aria-label="Inbox">
+              <Button variant="outline" width="square" aria-label="Inbox" onClick={actions.handler("Inbox opened")}>
                 <Icon src="mdi--inbox" width={20} height={20} />
               </Button>
               <Badge flavor="destructive">3</Badge>
             </Badge.Anchor>
             <Badge.Anchor>
-              <Button variant="outline">Messages</Button>
+              <Button variant="outline" onClick={actions.handler("Messages opened")}>Messages</Button>
               <Badge flavor="accent" placement="bottom-right">12</Badge>
             </Badge.Anchor>
           </Flex>
@@ -38,12 +42,23 @@ export default function BadgeShowcase() {
         <ShowcaseSection id="placements" title="Placements">
           <Flex gap="xl" align="center" wrap="wrap">
             {(["top-left", "top-right", "bottom-left", "bottom-right"] as const).map((placement) => (
-              <Badge.Anchor>
-                <Button variant="outline">{placement}</Button>
-                <Badge placement={placement} flavor="accent" />
-              </Badge.Anchor>
+              <Button
+                variant="outline"
+                aria-pressed={selectedPlacement() === placement ? "true" : "false"}
+                onClick={() => {
+                  setSelectedPlacement(placement);
+                  actions.announce(`Badge placement set to ${placement}`);
+                }}
+              >
+                {placement}
+              </Button>
             ))}
+            <Badge.Anchor>
+              <span class="inline-flex min-w-28 justify-center">Preview</span>
+              <Badge placement={selectedPlacement()} flavor="accent" />
+            </Badge.Anchor>
           </Flex>
+          <ActionStatus message={actions.message()} />
         </ShowcaseSection>
 
         <ShowcaseSection id="labels" title="Standalone labels use Tag">
diff --git a/src/components/ButtonShowcase.tsx b/src/components/ButtonShowcase.tsx
index aa673bd..35a33fa 100644
--- a/src/components/ButtonShowcase.tsx
+++ b/src/components/ButtonShowcase.tsx
@@ -1,8 +1,10 @@
 import { Button, Flex, Icon } from "@pathscale/ui";
+import { createSignal } from "solid-js";
 import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { PropsTable } from "./showcase/PropsTable";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 const buttonProps = [
   { name: "variant", type: '"primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "danger-soft"', default: '"primary"', description: "Semantic visual treatment." },
@@ -16,6 +18,8 @@ const buttonProps = [
 ];
 
 export default function ButtonShowcase() {
+  const actions = createActionStatus();
+  const [pressed, setPressed] = createSignal(true);
   const startIcon = <Icon src="mdi--arrow-left" width={18} height={18} />;
   const endIcon = <Icon src="mdi--arrow-right" width={18} height={18} />;
 
@@ -24,13 +28,13 @@ export default function ButtonShowcase() {
       <Flex direction="col" gap="xl">
         <ShowcaseSection id="variants" title="Variants">
           <Flex gap="md" wrap="wrap">
-            <Button flavor="primary">Primary</Button>
-            <Button flavor="secondary">Secondary</Button>
-            <Button flavor="accent">Accent</Button>
-            <Button variant="outline">Outline</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button flavor="destructive">Danger</Button>
-            <Button flavor="destructive" variant="soft">Danger soft</Button>
+            <Button flavor="primary" onClick={actions.handler("Primary button activated")}>Primary</Button>
+            <Button flavor="secondary" onClick={actions.handler("Secondary button activated")}>Secondary</Button>
+            <Button flavor="accent" onClick={actions.handler("Accent button activated")}>Accent</Button>
+            <Button variant="outline" onClick={actions.handler("Outline button activated")}>Outline</Button>
+            <Button variant="ghost" onClick={actions.handler("Ghost button activated")}>Ghost</Button>
+            <Button flavor="destructive" onClick={actions.handler("Danger button activated")}>Danger</Button>
+            <Button flavor="destructive" variant="soft" onClick={actions.handler("Danger soft button activated")}>Danger soft</Button>
           </Flex>
           <CodeBlock code={`<Button flavor="primary">Primary</Button>
 <Button variant="outline">Outline</Button>
@@ -39,9 +43,9 @@ export default function ButtonShowcase() {
 
         <ShowcaseSection id="sizes" title="Sizes">
           <Flex gap="md" align="center" wrap="wrap">
-            <Button size="sm">Small</Button>
-            <Button size="md">Medium</Button>
-            <Button size="lg">Large</Button>
+            <Button size="sm" onClick={actions.handler("Small button activated")}>Small</Button>
+            <Button size="md" onClick={actions.handler("Medium button activated")}>Medium</Button>
+            <Button size="lg" onClick={actions.handler("Large button activated")}>Large</Button>
           </Flex>
           <CodeBlock code={`<Button size="sm">Small</Button>
 <Button size="md">Medium</Button>
@@ -50,9 +54,9 @@ export default function ButtonShowcase() {
 
         <ShowcaseSection id="icons" title="Icons">
           <Flex gap="md" align="center" wrap="wrap">
-            <Button variant="outline" startIcon={startIcon}>Previous</Button>
-            <Button flavor="primary" endIcon={endIcon}>Continue</Button>
-            <Button variant="ghost" width="square" aria-label="Settings">
+            <Button variant="outline" startIcon={startIcon} onClick={actions.handler("Moved to the previous step")}>Previous</Button>
+            <Button flavor="primary" endIcon={endIcon} onClick={actions.handler("Continued to the next step")}>Continue</Button>
+            <Button variant="ghost" width="square" aria-label="Settings" onClick={actions.handler("Settings opened")}>
               <Icon src="mdi--cog" width={20} height={20} />
             </Button>
           </Flex>
@@ -65,7 +69,14 @@ export default function ButtonShowcase() {
           <Flex gap="md" align="center" wrap="wrap">
             <Button state="loading">Saving</Button>
             <Button state="disabled">Unavailable</Button>
-            <Button variant="outline" aria-pressed="true">Pressed</Button>
+            <Button
+              variant="outline"
+              aria-pressed={pressed() ? "true" : "false"}
+              onClick={() => {
+                setPressed((value) => !value);
+                actions.announce(`Pressed state ${pressed() ? "on" : "off"}`);
+              }}
+            >Pressed</Button>
           </Flex>
           <CodeBlock code={`<Button state="loading">Saving</Button>
 <Button state="disabled">Unavailable</Button>
@@ -73,10 +84,12 @@ export default function ButtonShowcase() {
         </ShowcaseSection>
 
         <ShowcaseSection id="width" title="Full width">
-          <Button width="full" flavor="primary">Continue</Button>
+          <Button width="full" flavor="primary" aria-label="Continue full width" onClick={actions.handler("Full-width action continued")}>Continue</Button>
           <CodeBlock code={`<Button width="full" flavor="primary">Continue</Button>`} />
         </ShowcaseSection>
 
+        <ActionStatus message={actions.message()} />
+
         <ShowcaseSection id="native-link" title="Navigation styled as an action">
           <p class="mb-4 text-base-content/70">
             Button deliberately renders a button. Use a native anchor or the Link component for
diff --git a/src/components/CalendarShowcase.tsx b/src/components/CalendarShowcase.tsx
index af16cb9..e7b1b0f 100644
--- a/src/components/CalendarShowcase.tsx
+++ b/src/components/CalendarShowcase.tsx
@@ -142,9 +142,8 @@ export default function CalendarShowcase() {
     setRangePreview(undefined);
   };
 
-  const today = new Date();
-  const minDate = new Date(today.getFullYear(), today.getMonth(), 1);
-  const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, 0);
+  const minDate = new Date(2025, 5, 1);
+  const maxDate = new Date(2025, 6, 31);
 
   return (
     <ShowcaseLayout>
@@ -164,7 +163,7 @@ export default function CalendarShowcase() {
 
         <ShowcaseSection id="default" title="Default">
           <Flex direction="col" gap="md">
-            <Calendar />
+            <Calendar id="default-calendar" defaultValue={new Date(2025, 5, 15)} />
             <CodeBlock code={`<Calendar />`} />
           </Flex>
         </ShowcaseSection>
@@ -172,6 +171,7 @@ export default function CalendarShowcase() {
         <ShowcaseSection id="controlled" title="Controlled Value">
           <Flex direction="col" gap="md">
             <Calendar
+              id="controlled-calendar"
               value={selectedDate()}
               onChange={(value) => setSelectedDate(value)}
             />
@@ -191,6 +191,8 @@ export default function CalendarShowcase() {
         <ShowcaseSection id="range" title="Range Selection">
           <Flex direction="col" gap="md">
             <Calendar
+              id="range-calendar"
+              defaultValue={new Date(2025, 5, 15)}
               selectionMode="range"
               rangeStart={rangeStart()}
               rangeEnd={rangeEnd()}
@@ -221,14 +223,14 @@ export default function CalendarShowcase() {
 
         <ShowcaseSection id="disabled" title="Disabled">
           <Flex direction="col" gap="md">
-            <Calendar state="disabled" />
+            <Calendar id="disabled-calendar" state="disabled" />
             <CodeBlock code={`<Calendar state="disabled" />`} />
           </Flex>
         </ShowcaseSection>
 
         <ShowcaseSection id="min-max" title="Min / Max">
           <Flex direction="col" gap="md">
-            <Calendar minValue={minDate} maxValue={maxDate} />
+            <Calendar id="bounded-calendar" minValue={minDate} maxValue={maxDate} />
             <CodeBlock
               code={`const today = new Date();
 const minDate = new Date(today.getFullYear(), today.getMonth(), 1);
diff --git a/src/components/CardShowcase.tsx b/src/components/CardShowcase.tsx
index 0d87f7f..5b2935b 100644
--- a/src/components/CardShowcase.tsx
+++ b/src/components/CardShowcase.tsx
@@ -3,8 +3,12 @@ import { CodeBlock } from "./showcase/CodeBlock";
 import { PropsTable } from "./showcase/PropsTable";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
 import ShowcaseLayout from "./ShowcaseLayout";
+import { createSignal } from "solid-js";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 export default function CardShowcase() {
+  const actions = createActionStatus();
+  const [cardPressed, setCardPressed] = createSignal(false);
   const sections = [
     { id: "default", title: "Default" },
     { id: "with-header-footer", title: "Header & Footer" },
@@ -102,7 +106,7 @@ export default function CardShowcase() {
                 <h2 class="text-lg font-semibold">Shoes!</h2>
                 <p>If a dog chews shoes whose shoes does he choose?</p>
                 <Flex justify="end" class="mt-4">
-                  <Button flavor="primary">Buy Now</Button>
+                  <Button flavor="primary" onClick={actions.handler("Shoes added to cart")}>Buy Now</Button>
                 </Flex>
               </Card.Body>
             </Card>
@@ -131,8 +135,8 @@ export default function CardShowcase() {
               </Card.Body>
               <Card.Footer>
                 <Flex justify="end" gap="sm">
-                  <Button variant="ghost">Cancel</Button>
-                  <Button flavor="primary">Confirm</Button>
+                  <Button variant="ghost" onClick={actions.handler("Card changes cancelled")}>Cancel</Button>
+                  <Button flavor="primary" onClick={actions.handler("Card changes confirmed")}>Confirm</Button>
                 </Flex>
               </Card.Footer>
             </Card>
@@ -167,7 +171,7 @@ export default function CardShowcase() {
                 <h2 class="text-lg font-semibold">Shoes!</h2>
                 <p>If a dog chews shoes whose shoes does he choose?</p>
                 <Flex justify="end" class="mt-4">
-                  <Button flavor="primary">Buy Now</Button>
+                  <Button flavor="primary" aria-label="Buy pictured shoes" onClick={actions.handler("Pictured shoes added to cart")}>Buy Now</Button>
                 </Flex>
               </Card.Body>
             </Card>
@@ -250,13 +254,18 @@ export default function CardShowcase() {
           <Flex direction="col" gap="md">
             <Card
               isInteractive
-              onClick={() => console.log("card pressed")}
+              aria-pressed={cardPressed() ? "true" : "false"}
+              onClick={() => {
+                setCardPressed((value) => !value);
+                actions.announce(`Pressable card ${cardPressed() ? "selected" : "cleared"}`);
+              }}
             >
               <Card.Body>
                 <h2 class="text-lg font-semibold">Press me</h2>
                 <p>Acts like a button; Enter/Space activates.</p>
               </Card.Body>
             </Card>
+            <ActionStatus message={actions.message()} />
             <CodeBlock
               code={`<Card
   isInteractive
diff --git a/src/components/ComponentVariants.tsx b/src/components/ComponentVariants.tsx
index fc872d8..5a9b2c7 100644
--- a/src/components/ComponentVariants.tsx
+++ b/src/components/ComponentVariants.tsx
@@ -1,20 +1,34 @@
 import { Button, Card, Flex, Input } from "@pathscale/ui";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 export default function ComponentVariants() {
+  const actionStatus = createActionStatus("Choose a button variant");
+  const variants = [
+    ["Button", {}],
+    ["Primary", { flavor: "primary" }],
+    ["Secondary", { flavor: "secondary" }],
+    ["Accent", { flavor: "accent" }],
+    ["Outline", { variant: "outline" }],
+    ["Ghost", { variant: "ghost" }],
+    ["Danger", { flavor: "destructive" }],
+    ["Danger Soft", { flavor: "destructive", variant: "soft" }],
+  ] as const;
+
   return (
     <Flex direction="col" gap="lg">
+      <ActionStatus message={actionStatus.message()} />
       <Card class="bg-base-100">
         <Card.Body>
           <h5 class="text-lg font-semibold mb-2">Buttons</h5>
           <Flex gap="sm" class="flex-wrap">
-            <Button>Button</Button>
-            <Button flavor="primary">Primary</Button>
-            <Button flavor="secondary">Secondary</Button>
-            <Button flavor="accent">Accent</Button>
-            <Button variant="outline">Outline</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button flavor="destructive">Danger</Button>
-            <Button flavor="destructive" variant="soft">Danger Soft</Button>
+            {variants.map(([label, props]) => (
+              <Button
+                {...props}
+                onClick={actionStatus.handler(`${label} variant activated`)}
+              >
+                {label}
+              </Button>
+            ))}
           </Flex>
         </Card.Body>
       </Card>
diff --git a/src/components/ComponentsDemo.tsx b/src/components/ComponentsDemo.tsx
index 9d039c8..e25b355 100644
--- a/src/components/ComponentsDemo.tsx
+++ b/src/components/ComponentsDemo.tsx
@@ -2,13 +2,31 @@ import { createSignal } from "solid-js";
 import { Alert, Avatar, Breadcrumb, BreadcrumbItem, Button, Card, ChatBubble, Checkbox, Chip, Dialog, Drawer, Dropdown, Flex, Form, Icon, Input, Navbar, Pagination, Progress, Radio, Select, Skeleton, Slider, Spinner, Switch, Table, Tabs, Tooltip, TooltipContent, TooltipTrigger } from "@pathscale/ui";
 import { Menu, Join } from "@pathscale/ui/lab";
 import { ROUTES } from "../config/routes";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 export default function ComponentsDemo() {
   const [modalOpen, setModalOpen] = createSignal(false);
   const [page, setPage] = createSignal(2);
+  const [price, setPrice] = createSignal(25);
+  const [selectedDay, setSelectedDay] = createSignal(5);
+  const [hoodies, setHoodies] = createSignal(false);
+  const [bags, setBags] = createSignal(true);
+  const [shoes, setShoes] = createSignal(false);
+  const [accessories, setAccessories] = createSignal(false);
+  const [eventSearch, setEventSearch] = createSignal("");
+  const [showAllDay, setShowAllDay] = createSignal(false);
+  const [minimumPrice, setMinimumPrice] = createSignal("");
+  const [maximumPrice, setMaximumPrice] = createSignal("");
+  const [themeSwitch, setThemeSwitch] = createSignal(false);
+  const [previewSearch, setPreviewSearch] = createSignal("");
+  const [recommendation, setRecommendation] = createSignal("yes");
+  const actionStatus = createActionStatus("Preview ready");
 
   return (
     <div class="text-base-content mx-auto grid gap-6 pb-20 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <div class="md:col-span-2 lg:col-span-3">
+        <ActionStatus message={actionStatus.message()} />
+      </div>
       <Flex direction="col" gap="md">
         <Card class="bg-base-100">
           <Card.Body>
@@ -17,7 +35,7 @@ export default function ComponentsDemo() {
                 <Icon src="mdi--filter-variant" width={16} height={16} />
                 <span class="font-semibold">Filters</span>
               </Flex>
-              <Button variant="ghost" size="sm">
+              <Button id="preview-more-filters" variant="ghost" size="sm" onClick={actionStatus.handler("More filters requested")}>
                 more
               </Button>
             </Flex>
@@ -28,7 +46,7 @@ export default function ComponentsDemo() {
             <Flex direction="col" gap="sm" class="mt-4">
               <Flex justify="between" align="center">
                 <Flex align="center" gap="sm">
-                  <Checkbox />
+                  <Checkbox id="preview-filter-hoodies" aria-label="Hoodies" checked={hoodies()} onChange={setHoodies} />
                   <span class="text-sm">Hoodies</span>
                 </Flex>
                 <Chip size="sm" variant="flat">
@@ -37,7 +55,7 @@ export default function ComponentsDemo() {
               </Flex>
               <Flex justify="between" align="center">
                 <Flex align="center" gap="sm">
-                  <Checkbox checked />
+                  <Checkbox id="preview-filter-bags" aria-label="Bags" checked={bags()} onChange={setBags} />
                   <span class="text-sm">Bags</span>
                 </Flex>
                 <Chip size="sm" variant="flat">
@@ -46,7 +64,7 @@ export default function ComponentsDemo() {
               </Flex>
               <Flex justify="between" align="center">
                 <Flex align="center" gap="sm">
-                  <Checkbox />
+                  <Checkbox id="preview-filter-shoes" aria-label="Shoes" checked={shoes()} onChange={setShoes} />
                   <span class="text-sm">Shoes</span>
                 </Flex>
                 <Chip size="sm" variant="flat">
@@ -55,7 +73,7 @@ export default function ComponentsDemo() {
               </Flex>
               <Flex justify="between" align="center">
                 <Flex align="center" gap="sm">
-                  <Checkbox />
+                  <Checkbox id="preview-filter-accessories" aria-label="Accessories" checked={accessories()} onChange={setAccessories} />
                   <span class="text-sm">Accessories</span>
                 </Flex>
                 <Chip size="sm" variant="flat">
@@ -95,36 +113,34 @@ export default function ComponentsDemo() {
                 <Flex class="font-semibold opacity-60" justify="center">
                   S
                 </Flex>
-                <Button size="sm" variant="outline" class="p-2">
-                  1
-                </Button>
-                <Button size="sm" variant="outline" class="p-2">
-                  2
-                </Button>
-                <Button size="sm" variant="outline" class="p-2">
-                  3
-                </Button>
-                <Button size="sm" variant="outline" class="p-2">
-                  4
-                </Button>
-                <Button size="sm" flavor="primary" class="p-2">
-                  5
-                </Button>
-                <Button size="sm" variant="outline" class="p-2">
-                  6
-                </Button>
-                <Button size="sm" variant="outline" class="p-2">
-                  7
-                </Button>
+                {[1, 2, 3, 4, 5, 6, 7].map((day) => (
+                  <Button
+                    id={`preview-calendar-day-${day}`}
+                    size="sm"
+                    variant={selectedDay() === day ? "solid" : "outline"}
+                    flavor={selectedDay() === day ? "primary" : undefined}
+                    class="p-2"
+                    aria-pressed={selectedDay() === day ? "true" : "false"}
+                    onClick={() => {
+                      setSelectedDay(day);
+                      actionStatus.announce(`Calendar day ${day} selected`);
+                    }}
+                  >
+                    {day}
+                  </Button>
+                ))}
               </Flex>
               <Input
+                id="preview-event-search"
                 placeholder="Search events..."
                 startIcon={<Icon src="mdi--magnify" width={16} height={16} />}
                 size="sm"
+                value={eventSearch()}
+                onInput={(event) => setEventSearch(event.currentTarget.value)}
               />
               <Flex justify="between" align="center">
                 <span class="text-sm">Show all day events</span>
-                <Switch size="sm" />
+                <Switch id="preview-all-day-events" aria-label="Show all day events" size="sm" checked={showAllDay()} onChange={setShowAllDay} />
               </Flex>
               <Card class="mt-2">
                 <Card.Body class="p-2">
@@ -142,7 +158,7 @@ export default function ComponentsDemo() {
 
         <Card class="bg-base-100">
           <Card.Body>
-            <Tabs defaultSelectedKey="tab-1">
+            <Tabs id="preview-content-tabs" defaultSelectedKey="tab-1">
               <Tabs.List>
                 <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
                 <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
@@ -166,7 +182,16 @@ export default function ComponentsDemo() {
               <Icon src="mdi--currency-usd" width={16} height={16} />
               <span class="font-semibold">Price Range</span>
             </Flex>
-            <Slider value={25} min={0} max={100} step={25} onChange={() => {}} />
+            <Slider
+              id="preview-price-range"
+              label="Price range"
+              value={price()}
+              min={0}
+              max={100}
+              step={25}
+              formatValue={(value) => `$${value}`}
+              onChange={setPrice}
+            />
             <Flex justify="between" class="w-full text-xs px-2">
               <span>$0</span>
               <span>$25</span>
@@ -176,11 +201,11 @@ export default function ComponentsDemo() {
             </Flex>
             <Flex direction="col" gap="sm" class="mt-4">
               <Flex justify="between" align="center">
-                <Input placeholder="Min" size="sm" />
+                <Input id="preview-min-price" placeholder="Min" size="sm" value={minimumPrice()} onInput={(event) => setMinimumPrice(event.currentTarget.value)} />
                 <span class="text-sm opacity-60">to</span>
-                <Input placeholder="Max" size="sm" />
+                <Input id="preview-max-price" placeholder="Max" size="sm" value={maximumPrice()} onInput={(event) => setMaximumPrice(event.currentTarget.value)} />
               </Flex>
-              <Button size="sm" flavor="primary" width="full">
+              <Button id="preview-apply-price" size="sm" flavor="primary" width="full" onClick={actionStatus.handler("Price range applied")}>
                 Apply
               </Button>
             </Flex>
@@ -255,7 +280,7 @@ export default function ComponentsDemo() {
               </Flex>
               <Skeleton class="h-4 w-3/4" />
               <Skeleton class="h-4 w-1/2" />
-              <Button size="sm" state="loading">
+              <Button id="preview-submitting" size="sm" state="loading">
                 Submitting
               </Button>
             </Flex>
@@ -294,7 +319,7 @@ export default function ComponentsDemo() {
               </Alert>
               <Alert flavor="warning">
                 <span class="text-xs">
-                  <Button variant="ghost" size="sm" class="p-0 h-auto">
+                  <Button id="preview-verify-email" variant="ghost" size="sm" class="p-0 h-auto" onClick={actionStatus.handler("Email verification requested")}>
                     Click
                   </Button>{" "}
                   to verify email
@@ -303,7 +328,7 @@ export default function ComponentsDemo() {
               <Alert flavor="destructive">
                 <Flex justify="between" align="center" class="w-full">
                   <span class="text-xs">Access denied</span>
-                  <Button variant="ghost" size="sm">
+                  <Button id="preview-support" variant="ghost" size="sm" onClick={actionStatus.handler("Support requested")}>
                     Support
                   </Button>
                 </Flex>
@@ -342,7 +367,7 @@ export default function ComponentsDemo() {
 
         <Card class="bg-base-100">
           <Card.Body>
-            <Tabs defaultSelectedKey="monthly">
+            <Tabs id="preview-billing-tabs" defaultSelectedKey="monthly">
               <Tabs.List>
                 <Tabs.Tab id="monthly">Monthly</Tabs.Tab>
                 <Tabs.Tab id="yearly">
@@ -368,7 +393,7 @@ export default function ComponentsDemo() {
                   <span class="text-sm opacity-50">Advanced analytics</span>
                 </Flex>
               </Flex>
-              <Button flavor="primary" width="full" class="mt-4">
+              <Button id="preview-choose-plan" flavor="primary" width="full" class="mt-4" onClick={actionStatus.handler("Plan selected")}>
                 Choose Plan
               </Button>
             </Flex>
@@ -436,7 +461,7 @@ export default function ComponentsDemo() {
         <Card class="bg-base-100">
           <Card.Body>
             <Flex direction="col" gap="sm">
-              <Button size="sm" onClick={() => setModalOpen(true)}>
+              <Button id="preview-open-dialog" size="sm" onClick={() => setModalOpen(true)}>
                 Open Dialog
               </Button>
               <Dialog
@@ -452,8 +477,8 @@ export default function ComponentsDemo() {
                   <Dialog.Body>Are you sure you want to continue?</Dialog.Body>
                   <Dialog.Footer>
                     <Flex gap="sm" class="mt-2">
-                      <Button onClick={() => setModalOpen(false)}>Cancel</Button>
-                      <Button flavor="primary" onClick={() => setModalOpen(false)}>
+                      <Button id="preview-dialog-cancel" onClick={() => { setModalOpen(false); actionStatus.announce("Dialog cancelled"); }}>Cancel</Button>
+                      <Button id="preview-dialog-confirm" flavor="primary" onClick={() => { setModalOpen(false); actionStatus.announce("Dialog confirmed"); }}>
                         Confirm
                       </Button>
                     </Flex>
@@ -470,7 +495,7 @@ export default function ComponentsDemo() {
               <Flex align="center" gap="sm">
                 <Tooltip>
                   <TooltipTrigger>
-                    <Button size="sm" variant="outline">
+                    <Button id="preview-tooltip" size="sm" variant="outline">
                       Hover me
                     </Button>
                   </TooltipTrigger>
@@ -480,13 +505,13 @@ export default function ComponentsDemo() {
                   <Chip size="sm">
                     3
                   </Chip>
-                  <Button size="sm" variant="outline" width="square">
+                  <Button id="preview-notifications" aria-label="Notifications" size="sm" variant="outline" width="square" onClick={actionStatus.handler("Notifications opened")}>
                     <Icon src="mdi--bell" width={16} height={16} />
                   </Button>
                 </Flex>
               </Flex>
               <Flex gap="sm">
-                <Switch />
+                <Switch id="preview-theme-switch" aria-label="Theme switch" checked={themeSwitch()} onChange={setThemeSwitch} />
                 <span class="text-sm">Theme Switch</span>
               </Flex>
             </Flex>
@@ -518,13 +543,13 @@ export default function ComponentsDemo() {
               </ChatBubble>
             </Flex>
             <Flex gap="sm" class="mt-4 justify-center">
-              <Button size="sm" variant="outline" width="square">
+              <Button id="preview-start-call" aria-label="Start call" size="sm" variant="outline" width="square" onClick={actionStatus.handler("Call started")}>
                 <Icon src="mdi--phone" width={16} height={16} />
               </Button>
-              <Button size="sm" variant="outline" width="square">
+              <Button id="preview-open-messages" aria-label="Open messages" size="sm" variant="outline" width="square" onClick={actionStatus.handler("Messages opened")}>
                 <Icon src="mdi--message" width={16} height={16} />
               </Button>
-              <Button size="sm" variant="outline" width="square">
+              <Button id="preview-conversation-settings" aria-label="Conversation settings" size="sm" variant="outline" width="square" onClick={actionStatus.handler("Conversation settings opened")}>
                 <Icon src="mdi--cog" width={16} height={16} />
               </Button>
             </Flex>
@@ -533,7 +558,7 @@ export default function ComponentsDemo() {
 
         <Card class="bg-base-100">
           <Card.Body>
-            <Menu>
+            <Menu id="preview-menu" onAction={(key) => actionStatus.announce(`Menu opened: ${String(key)}`)}>
               <Menu.Item id="database">
                 <Flex justify="between" align="center" class="w-full">
                   <Flex align="center" gap="sm">
@@ -594,17 +619,17 @@ export default function ComponentsDemo() {
             <Flex direction="col" gap="sm">
               <Flex justify="between" align="center">
                 <Flex align="center" gap="sm">
-                  <Button size="sm" width="square">
+                  <Button id="preview-previous-track" aria-label="Previous track" size="sm" width="square" onClick={actionStatus.handler("Previous track selected")}>
                     <Icon src="mdi--skip-previous" width={16} height={16} />
                   </Button>
-                  <Button size="sm" width="square" flavor="primary">
+                  <Button id="preview-play-track" aria-label="Play track" size="sm" width="square" flavor="primary" onClick={actionStatus.handler("Playback started")}>
                     <Icon src="mdi--play" width={16} height={16} />
                   </Button>
-                  <Button size="sm" width="square">
+                  <Button id="preview-next-track" aria-label="Next track" size="sm" width="square" onClick={actionStatus.handler("Next track selected")}>
                     <Icon src="mdi--skip-next" width={16} height={16} />
                   </Button>
                 </Flex>
-                <Button size="sm" variant="outline">
+                <Button id="preview-toggle-volume" aria-label="Toggle volume" size="sm" variant="outline" onClick={actionStatus.handler("Volume toggled")}>
                   <Icon src="mdi--volume-high" width={16} height={16} />
                 </Button>
               </Flex>
@@ -633,16 +658,14 @@ export default function ComponentsDemo() {
           <Card.Body class="p-0">
             <Navbar class="bg-base-200 px-4">
               <Navbar.Start>
-                <Dropdown>
-                  <Dropdown.Trigger>
-                    <Button variant="ghost" width="square" size="sm">
-                      <Icon src="mdi--menu" width={16} height={16} />
-                    </Button>
+                <Dropdown id="preview-navigation">
+                  <Dropdown.Trigger aria-label="Open navigation menu" class="btn btn-ghost btn-sm btn-square">
+                    <Icon src="mdi--menu" width={16} height={16} />
                   </Dropdown.Trigger>
                   <Dropdown.Menu class="w-52 mt-3 z-[1]">
-                    <Dropdown.Item>Dashboard</Dropdown.Item>
-                    <Dropdown.Item>Settings</Dropdown.Item>
-                    <Dropdown.Item>Logout</Dropdown.Item>
+                    <Dropdown.Item id="preview-navigation-dashboard" onClick={actionStatus.handler("Dashboard opened")}>Dashboard</Dropdown.Item>
+                    <Dropdown.Item id="preview-navigation-settings" onClick={actionStatus.handler("Navigation settings opened")}>Settings</Dropdown.Item>
+                    <Dropdown.Item id="preview-navigation-logout" onClick={actionStatus.handler("Preview logout requested")}>Logout</Dropdown.Item>
                   </Dropdown.Menu>
                 </Dropdown>
               </Navbar.Start>
@@ -650,7 +673,7 @@ export default function ComponentsDemo() {
                 <span class="font-bold text-sm">Brand</span>
               </Navbar.Center>
               <Navbar.End>
-                <Button variant="ghost" width="square" size="sm">
+                <Button id="preview-open-account" aria-label="Open account" variant="ghost" width="square" size="sm" onClick={actionStatus.handler("Account opened")}>
                   <Icon src="mdi--account" width={16} height={16} />
                 </Button>
               </Navbar.End>
@@ -685,23 +708,26 @@ export default function ComponentsDemo() {
           <Card.Body>
             <Flex direction="col" gap="sm">
               <Join>
-                <Button size="sm">
+                <Button id="preview-joined-button-1" size="sm" onClick={actionStatus.handler("Button 1 activated")}>
                   Button 1
                 </Button>
-                <Button size="sm" flavor="primary">
+                <Button id="preview-joined-button-2" size="sm" flavor="primary" onClick={actionStatus.handler("Button 2 activated")}>
                   Button 2
                 </Button>
-                <Button size="sm">
+                <Button id="preview-joined-button-3" size="sm" onClick={actionStatus.handler("Button 3 activated")}>
                   Button 3
                 </Button>
               </Join>
               <Join>
                 <Input
+                  id="preview-search"
                   placeholder="Search..."
                   class="flex-1"
                   size="sm"
+                  value={previewSearch()}
+                  onInput={(event) => setPreviewSearch(event.currentTarget.value)}
                 />
-                <Button size="sm" flavor="primary">
+                <Button id="preview-search-submit" aria-label="Search preview" size="sm" flavor="primary" onClick={actionStatus.handler("Preview search submitted")}>
                   <Icon src="mdi--magnify" width={16} height={16} />
                 </Button>
               </Join>
@@ -714,7 +740,7 @@ export default function ComponentsDemo() {
             <Flex direction="col" gap="sm">
               <Form>
                 <span class="text-sm font-medium">How did you hear about us?</span>
-                <Select placeholder="Select an option">
+                <Select id="preview-referral-source" placeholder="Select an option">
                   <Select.Option value="search">Search Engine</Select.Option>
                   <Select.Option value="social">Social Media</Select.Option>
                   <Select.Option value="friend">Friend</Select.Option>
@@ -732,10 +758,12 @@ export default function ComponentsDemo() {
                 </Flex>
               </Form>
               <Flex gap="sm" class="mt-2">
-                <Radio name="recommend" checked />
+                <Radio id="preview-recommend-yes" aria-label="Would recommend" name="recommend" checked={recommendation() === "yes"} onChange={(checked) => checked && setRecommendation("yes")} />
                 <span class="text-sm">Would recommend</span>
+                <Radio id="preview-recommend-no" aria-label="Would not recommend" name="recommend" checked={recommendation() === "no"} onChange={(checked) => checked && setRecommendation("no")} />
+                <span class="text-sm">Would not recommend</span>
               </Flex>
-              <Button size="sm" flavor="primary">
+              <Button id="preview-feedback-submit" size="sm" flavor="primary" onClick={actionStatus.handler("Feedback submitted")}>
                 Submit
               </Button>
             </Flex>
@@ -745,12 +773,12 @@ export default function ComponentsDemo() {
         <Card class="bg-base-100">
           <Card.Body>
             <Breadcrumb>
-              <BreadcrumbItem href={ROUTES.HOME}>Home</BreadcrumbItem>
-              <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+              <BreadcrumbItem id="preview-breadcrumb-home" href={ROUTES.HOME}>Home</BreadcrumbItem>
+              <BreadcrumbItem id="preview-breadcrumb-products" href="#products" onClick={(event) => { event.preventDefault(); actionStatus.announce("Products opened"); }}>Products</BreadcrumbItem>
               <BreadcrumbItem isCurrent>Details</BreadcrumbItem>
             </Breadcrumb>
             <div class="my-3 border-t opacity-20" />
-            <Pagination page={page()} total={3} onChange={setPage} />
+            <Pagination id="preview-pagination" page={page()} total={3} onChange={(nextPage) => { setPage(nextPage); actionStatus.announce(`Page ${nextPage} selected`); }} />
           </Card.Body>
         </Card>
       </Flex>
diff --git a/src/components/CoverageShowcase.tsx b/src/components/CoverageShowcase.tsx
index 802d231..6def452 100644
--- a/src/components/CoverageShowcase.tsx
+++ b/src/components/CoverageShowcase.tsx
@@ -1,7 +1,60 @@
 import type { JSX } from "@solidjs/web";
-import { createErrorBoundary, For } from "solid-js";
-import { Accordion, Button, Card, Checkbox, Chip, Collapsible, createI18n, Empty, Flex, Header, Input, InputOTP, LanguageSwitcher, ListBox, LiveChatBubble, MetalBorder, Popover, Progress, ScrollArea, Separator, Slider, Spinner, Text, Textarea, ThemeColorPicker } from "@pathscale/ui";
-import { ButtonGroup, CheckboxGroup, CloseButton, Meter, RadialProgress, SizePicker, TimeField, DateField, ColorPicker, ColorArea, ColorField, ColorSlider, ComboBox, DatePicker, DateRangePicker, RangeCalendar, Toolbar, Kbd } from "@pathscale/ui/lab";
+import { createErrorBoundary, createSignal, For, onCleanup, Show } from "solid-js";
+import {
+  Accordion,
+  Address,
+  AuthCard,
+  AuthFieldGroup,
+  AuthFooterLinks,
+  AuthMessage,
+  AuthPoweredBy,
+  AuthSubmitButton,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  Collapsible,
+  ColorSwatch,
+  ColorWheel,
+  ComplexColorWheel,
+  Composer,
+  ConnectionSettings,
+  CookieConsent,
+  createConnectionSettings,
+  createI18n,
+  Empty,
+  FieldGroup,
+  FirefoxPWABanner,
+  Flex,
+  FlexGrid,
+  Header,
+  ImmersiveLanding,
+  InlineEdit,
+  Input,
+  InputOTP,
+  Label,
+  LanguageSwitcher,
+  ListBox,
+  LiveChatBubble,
+  LiveChatPanel,
+  MetalBorder,
+  PanelToggle,
+  PasswordField,
+  PasswordRequirements,
+  Popover,
+  Progress,
+  PWAInstallPrompt,
+  ScrollArea,
+  Separator,
+  Slider,
+  Spinner,
+  Text,
+  Textarea,
+  ThemeColorPicker,
+  type ComponentFamilyId,
+} from "@pathscale/ui";
+import CloseButton from "@pathscale/ui/components/close-button";
+import { ButtonGroup, CheckboxGroup, Meter, RadialProgress, SizePicker, TimeField, DateField, ColorPicker, ColorArea, ColorField, ColorSlider, ColorSwatchPicker, ColorWheelFlower, ComboBox, DatePicker, DateRangePicker, RangeCalendar, Toolbar, Kbd } from "@pathscale/ui/lab";
 import ShowcaseLayout from "./ShowcaseLayout";
 
 /**
@@ -22,26 +75,448 @@ type Example = {
   render: () => JSX.Element;
 };
 
+function CloseButtonExample() {
+  const [closed, setClosed] = createSignal(false);
+  return (
+    <>
+      <CloseButton
+        id="coverage-close-button"
+        aria-label="Dismiss coverage notice"
+        state={closed() ? "disabled" : "default"}
+        onClick={() => setClosed(true)}
+      />
+      <p role="status">{closed() ? "Dismissed" : "Coverage notice open"}</p>
+    </>
+  );
+}
+
+const [activeFullscreenExample, setActiveFullscreenExample] = createSignal<string | null>(null);
+
+const savedDocumentStyle: Record<string, string> = {};
+
+function openFullscreenExample(name: string) {
+  const root = document.documentElement.style;
+  const body = document.body.style;
+  for (const [key, value] of [
+    ["rootHeight", root.height],
+    ["rootMinHeight", root.minHeight],
+    ["rootOverflow", root.overflow],
+    ["bodyHeight", body.height],
+    ["bodyMinHeight", body.minHeight],
+    ["bodyOverflow", body.overflow],
+  ]) savedDocumentStyle[key] = value;
+  root.height = "100vh";
+  root.minHeight = "0";
+  root.overflow = "hidden";
+  body.height = "100vh";
+  body.minHeight = "0";
+  body.overflow = "hidden";
+  window.scrollTo({ top: 0, behavior: "instant" });
+  setActiveFullscreenExample(name);
+}
+
+function closeFullscreenExample() {
+  setActiveFullscreenExample(null);
+  const root = document.documentElement.style;
+  const body = document.body.style;
+  root.height = savedDocumentStyle.rootHeight ?? "";
+  root.minHeight = savedDocumentStyle.rootMinHeight ?? "";
+  root.overflow = savedDocumentStyle.rootOverflow ?? "";
+  body.height = savedDocumentStyle.bodyHeight ?? "";
+  body.minHeight = savedDocumentStyle.bodyMinHeight ?? "";
+  body.overflow = savedDocumentStyle.bodyOverflow ?? "";
+}
+
+function DeferredExample(props: { name: string; render: () => JSX.Element }) {
+  return (
+    <>
+      {activeFullscreenExample() === props.name
+        ? props.render()
+        : <Button
+            id={`coverage-load-${props.name.toLowerCase()}`}
+            type="button"
+            onClick={() => openFullscreenExample(props.name)}
+          >
+            Load {props.name}
+          </Button>}
+    </>
+  );
+}
+
+function AddressExample() {
+  const [copied, setCopied] = createSignal("Nothing copied");
+  return (
+    <>
+      <Address id="coverage-address" value="0x1234567890abcdef" onCopy={(value) => setCopied(`Copied ${value}`)} />
+      <p role="status">{copied()}</p>
+    </>
+  );
+}
+
+function AuthActionsExample() {
+  const [result, setResult] = createSignal("No auth action yet");
+  return (
+    <AuthCard title="Sign in" description="Use the account attached to this showcase.">
+      <AuthFieldGroup>
+        <Label for="coverage-email">Email</Label>
+        <Input id="coverage-email" type="email" />
+        <AuthMessage flavor="info" message="This is a complete auth composition." />
+        <AuthSubmitButton id="coverage-auth-submit" type="button" onClick={() => setResult("Sign in submitted")}>Sign in</AuthSubmitButton>
+      </AuthFieldGroup>
+      <AuthFooterLinks
+        id="coverage-auth-footer-links"
+        items={[
+          { key: "privacy", label: "Privacy", onClick: () => setResult("Privacy opened") },
+          { key: "help", label: "Help", onClick: () => setResult("Help opened") },
+        ]}
+      />
+      <AuthPoweredBy id="coverage-auth-powered-by" href="#coverage-honey" />
+      <p role="status">{result()}</p>
+    </AuthCard>
+  );
+}
+
+function ComposerExample() {
+  const [value, setValue] = createSignal("");
+  const [sent, setSent] = createSignal("Nothing sent");
+  return (
+    <>
+      <Composer
+        id="coverage-composer"
+        value={value()}
+        placeholder="Write a showcase message"
+        onChange={setValue}
+        onSubmit={(message) => setSent(`Sent ${message}`)}
+      />
+      <p role="status">{sent()}</p>
+    </>
+  );
+}
+
+function ConnectionSettingsExample() {
+  const [result, setResult] = createSignal("Default backend active");
+  const store = createConnectionSettings({
+    storageKey: "js-software-coverage-connection",
+    endpoints: [{ name: "api", fallback: "https://api.example.com" }],
+    onApply: ({ urls }) => {
+      setResult(`Connected to ${urls.api}`);
+    },
+  });
+  return (
+    <>
+      <ConnectionSettings
+        id="coverage-connection-settings"
+        store={store}
+        endpoints={[{ name: "api", label: "API URL" }]}
+        labels={{ useCustom: "Use custom backend", save: "Save connection", reset: "Reset connection" }}
+        onSaved={() => { setResult(`Saved ${store.urls.api}`); }}
+        onResetDone={() => { setResult("Default backend restored"); }}
+      />
+      <p role="status">{result()}</p>
+    </>
+  );
+}
+
+function InlineEditExample() {
+  const [value, setValue] = createSignal("Showcase title");
+  return (
+    <>
+      <InlineEdit id="coverage-inline-edit" value={value()} label="Edit showcase title" onCommit={setValue} />
+      <p role="status">Saved title: {value()}</p>
+    </>
+  );
+}
+
+function PanelToggleExample() {
+  const [expanded, setExpanded] = createSignal(true);
+  return (
+    <div class="relative min-h-24 pl-8">
+      <PanelToggle
+        id="coverage-panel-toggle"
+        expanded={expanded()}
+        aria-controls="coverage-panel"
+        aria-label={expanded() ? "Hide coverage panel" : "Show coverage panel"}
+        side="left"
+        onClick={() => setExpanded((value) => !value)}
+      />
+      <Show when={expanded()}><aside id="coverage-panel">Coverage panel content</aside></Show>
+    </div>
+  );
+}
+
+function PasswordFieldExample() {
+  const [value, setValue] = createSignal("");
+  return (
+    <>
+      <PasswordField
+        id="coverage-password"
+        label="Coverage password"
+        showLabel="Show password"
+        hideLabel="Hide password"
+        value={value()}
+        onChange={setValue}
+      />
+      <PasswordRequirements
+        title="Password progress"
+        results={[
+          { key: "length", message: "At least eight characters", passed: value().length >= 8 },
+          { key: "number", message: "Contains a number", passed: /\d/.test(value()) },
+        ]}
+      />
+    </>
+  );
+}
+
+function LiveChatPanelExample() {
+  const [sent, setSent] = createSignal("Nothing sent");
+  const [closed, setClosed] = createSignal(false);
+  return (
+    <Show when={!closed()} fallback={<p role="status">Chat closed</p>}>
+      <LiveChatPanel
+        title="Component support"
+        sendLabel="Send chat message"
+        onClose={() => setClosed(true)}
+        onSendMessage={async ({ message }) => {
+          setSent(`Sent ${message}`);
+          return { messageId: "coverage-message", timestamp: Date.now() };
+        }}
+      />
+      <p role="status">{sent()}</p>
+    </Show>
+  );
+}
+
+function ImmersiveLandingExample() {
+  const [page, setPage] = createSignal("intro");
+  return (
+    <>
+      <ImmersiveLanding
+        pages={["intro", "details"]}
+        initialPage="intro"
+        transitionDuration={0}
+        onNavigate={(_from, to) => setPage(to)}
+      >
+        <ImmersiveLanding.Page id="intro"><h3>Introduction</h3></ImmersiveLanding.Page>
+        <ImmersiveLanding.Page id="details"><h3>Details</h3></ImmersiveLanding.Page>
+      </ImmersiveLanding>
+      <p role="status">Landing page: {page()}</p>
+    </>
+  );
+}
+
+function PWAExamples() {
+  const [result, setResult] = createSignal("No install choice");
+  setTimeout(() => {
+    const installEvent = new Event("beforeinstallprompt", { cancelable: true });
+    Object.defineProperties(installEvent, {
+      prompt: { value: () => undefined },
+      userChoice: { value: Promise.resolve({ outcome: "accepted", platform: "web" }) },
+    });
+    window.dispatchEvent(installEvent);
+  }, 0);
+  return (
+    <>
+      <PWAInstallPrompt
+        storageKey="js-software-coverage-pwa"
+        texts={{ installButton: "Install showcase", notNowButton: "Install later", closeLabel: "Close install prompt" }}
+        onInstall={() => setResult("Install accepted")}
+        onDismiss={() => setResult("Install dismissed")}
+      />
+      <p role="status">{result()}</p>
+    </>
+  );
+}
+
+function FirefoxPWAExample() {
+  const [result, setResult] = createSignal("Firefox prompt open");
+  const descriptor = Object.getOwnPropertyDescriptor(navigator, "userAgent");
+  Object.defineProperty(navigator, "userAgent", {
+    configurable: true,
+    value: "Mozilla/5.0 Firefox/130.0",
+  });
+  const originalOpen = globalThis.open;
+  globalThis.open = (() => null) as typeof globalThis.open;
+  onCleanup(() => {
+    if (descriptor) Object.defineProperty(navigator, "userAgent", descriptor);
+    globalThis.open = originalOpen;
+  });
+  return (
+    <>
+      <FirefoxPWABanner
+        storageKey="js-software-coverage-firefox"
+        showDelayMs={0}
+        texts={{ installButton: "Install Firefox extension", dismissButton: "Maybe later", closeLabel: "Close Firefox prompt" }}
+        onInstall={() => setResult("Firefox install opened")}
+        onDismiss={() => setResult("Firefox prompt dismissed")}
+      />
+      <p role="status">{result()}</p>
+    </>
+  );
+}
+
+function CookieConsentExample() {
+  const [result, setResult] = createSignal("No cookie choice");
+  return (
+    <>
+      <CookieConsent
+        storageKeys={{
+          consentKey: "js-software-coverage-cookie",
+          analyticsKey: "js-software-coverage-analytics",
+          marketingKey: "js-software-coverage-marketing",
+        }}
+        texts={{
+          acceptAll: "Accept all coverage cookies",
+          decline: "Decline coverage cookies",
+          manage: "Manage coverage cookies",
+          manageTitle: "Manage coverage cookie preferences",
+          marketing: "Coverage marketing cookies",
+          save: "Save coverage cookie preferences",
+        }}
+        onConsentChange={({ type }) => setResult(`Cookie consent ${type}`)}
+      />
+      <p role="status">{result()}</p>
+    </>
+  );
+}
+
+function LanguageSwitcherExample() {
+  const [result, setResult] = createSignal("No language selected");
+  const i18n = createI18n({
+    languages: [
+      { code: "en", name: "English" },
+      { code: "es", name: "Espanol" },
+    ],
+    storageKey: "coverage-locale",
+  });
+  return (
+    <>
+      <LanguageSwitcher
+        id="coverage-language-switcher"
+        i18n={i18n}
+        onLanguageChange={(code) => setResult(`Language selected ${code}`)}
+      />
+      <p role="status">{result()}</p>
+    </>
+  );
+}
+
 const EXAMPLES: Example[] = [
+  { name: "Address", render: () => <AddressExample /> },
+  { name: "Auth composition", render: () => <AuthActionsExample /> },
   {
-    name: "ButtonGroup",
+    name: "FieldGroup",
     render: () => (
-      <ButtonGroup>
-        <Button>One</Button>
-        <Button>Two</Button>
-      </ButtonGroup>
+      <FieldGroup>
+        <Label for="coverage-field-group">Grouped field</Label>
+        <Input id="coverage-field-group" />
+      </FieldGroup>
     ),
   },
+  { name: "Composer", render: () => <ComposerExample /> },
+  { name: "ConnectionSettings", render: () => <ConnectionSettingsExample /> },
+  {
+    name: "ColorSwatch",
+    render: () => {
+      const [selected, setSelected] = createSignal("No swatch selected");
+      return (
+        <>
+          <ColorSwatch id="coverage-indigo-swatch" color="#6366f1" colorName="Indigo swatch" onSelect={(value) => setSelected(`Selected ${value}`)} />
+          <p role="status">{selected()}</p>
+        </>
+      );
+    },
+  },
+  {
+    name: "ColorSwatchPicker",
+    render: () => {
+      const [value, setValue] = createSignal("#ef4444");
+      return (
+        <ColorSwatchPicker value={value()} onChange={setValue}>
+          <ColorSwatch id="coverage-red-swatch" color="#ef4444" colorName="Red swatch" />
+          <ColorSwatch id="coverage-blue-swatch" color="#3b82f6" colorName="Blue swatch" />
+        </ColorSwatchPicker>
+      );
+    },
+  },
+  {
+    name: "ColorWheel",
+    render: () => {
+      const [value, setValue] = createSignal("#6366f1");
+      return <ColorWheel id="coverage-color-wheel" aria-label="Coverage color wheel" value={value()} onChange={setValue} />;
+    },
+  },
+  {
+    name: "ColorWheelFlower",
+    render: () => {
+      const [value, setValue] = createSignal("#6366f1");
+      return <ColorWheelFlower id="coverage-standalone-color-wheel-flower" color={value()} onChange={(next) => setValue(next.hex)} />;
+    },
+  },
+  {
+    name: "ComplexColorWheel",
+    render: () => {
+      const [value, setValue] = createSignal("#6366f1");
+      const [strength, setStrength] = createSignal(10);
+      return (
+        <ComplexColorWheel
+          id="coverage-complex-color-wheel"
+          aria-label="Coverage complex color wheel"
+          value={value()}
+          onChange={setValue}
+          adjustments={[{ id: "strength", label: "Strength", get value() { return strength(); }, stops: [10, 20], onChange: setStrength }]}
+        />
+      );
+    },
+  },
+  { name: "InlineEdit", render: () => <InlineEditExample /> },
+  { name: "PanelToggle", render: () => <PanelToggleExample /> },
+  { name: "PasswordField and PasswordRequirements", render: () => <PasswordFieldExample /> },
+  {
+    name: "FlexGrid",
+    render: () => (
+      <FlexGrid
+        rows={["Alpha", "Beta", "Gamma"]}
+        pageSize={2}
+        autoLoad={false}
+        more={({ count, reveal }) => <Button id="coverage-flex-grid-more" onClick={reveal}>Show {count} more</Button>}
+      >
+        {(row) => <div>{String(row)}</div>}
+      </FlexGrid>
+    ),
+  },
+  { name: "LiveChatPanel", render: () => <DeferredExample name="LiveChatPanel" render={() => <LiveChatPanelExample />} /> },
+  { name: "ImmersiveLanding", render: () => <DeferredExample name="ImmersiveLanding" render={() => <ImmersiveLandingExample />} /> },
+  { name: "CookieConsent", render: () => <DeferredExample name="CookieConsent" render={() => <CookieConsentExample />} /> },
+  { name: "PWAInstallPrompt", render: () => <DeferredExample name="PWAInstallPrompt" render={() => <PWAExamples />} /> },
+  { name: "FirefoxPWABanner", render: () => <DeferredExample name="FirefoxPWABanner" render={() => <FirefoxPWAExample />} /> },
+  {
+    name: "ButtonGroup",
+    render: () => {
+      const [selected, setSelected] = createSignal("");
+      return (
+        <>
+          <ButtonGroup>
+            <Button id="coverage-button-group-one" aria-pressed={selected() === "One" ? "true" : "false"} onClick={() => setSelected("One")}>One</Button>
+            <Button id="coverage-button-group-two" aria-pressed={selected() === "Two" ? "true" : "false"} onClick={() => setSelected("Two")}>Two</Button>
+          </ButtonGroup>
+          <p role="status">{selected() ? `Selected ${selected()}` : "No button selected"}</p>
+        </>
+      );
+    },
+  },
   {
     name: "CheckboxGroup",
     render: () => (
       <CheckboxGroup>
-        <Checkbox>First</Checkbox>
-        <Checkbox>Second</Checkbox>
+        <Checkbox id="coverage-checkbox-first">First</Checkbox>
+        <Checkbox id="coverage-checkbox-second">Second</Checkbox>
       </CheckboxGroup>
     ),
   },
-  { name: "CloseButton", render: () => <CloseButton /> },
+  {
+    name: "CloseButton",
+    render: () => <CloseButtonExample />,
+  },
   {
     // Kbd itself is shown on its own page, but its Abbr is used nowhere: it
     // renders a glyph for a named key and titles itself with that key's name.
@@ -53,12 +528,12 @@ const EXAMPLES: Example[] = [
       </Kbd>
     ),
   },
-  { name: "Input (placeholder)", render: () => <Input placeholder="Helper text." /> },
+  { name: "Input (placeholder)", render: () => <Input id="coverage-helper-input" aria-label="Coverage helper input" placeholder="Helper text." /> },
   {
     name: "Collapsible",
     render: () => (
-      <Collapsible>
-        <Collapsible.Trigger>More</Collapsible.Trigger>
+      <Collapsible id="coverage-collapsible">
+        <Collapsible.Trigger id="coverage-collapsible-trigger">More</Collapsible.Trigger>
         <Collapsible.Content>Hidden until opened.</Collapsible.Content>
       </Collapsible>
     ),
@@ -66,9 +541,9 @@ const EXAMPLES: Example[] = [
   {
     name: "Accordion",
     render: () => (
-      <Accordion>
-        <Collapsible>
-          <Collapsible.Trigger>First</Collapsible.Trigger>
+      <Accordion id="coverage-accordion">
+        <Collapsible id="coverage-accordion-first">
+          <Collapsible.Trigger id="coverage-accordion-first-trigger">First</Collapsible.Trigger>
           <Collapsible.Content>One.</Collapsible.Content>
         </Collapsible>
       </Accordion>
@@ -83,18 +558,32 @@ const EXAMPLES: Example[] = [
       </Empty>
     ),
   },
-  { name: "Input (issues)", render: () => <Input issues={[{ code: "required", message: "Required." }]} /> },
-  { name: "Input (invalid)", render: () => <Input state="invalid" /> },
+  { name: "Input (issues)", render: () => <Input id="coverage-issues-input" aria-label="Coverage input with issues" issues={[{ code: "required", message: "Required." }]} /> },
+  { name: "Input (invalid)", render: () => <Input id="coverage-invalid-input" aria-label="Coverage invalid input" state="invalid" /> },
   {
     name: "Input (grouped)",
-    render: () => (
-      <Flex gap="sm">
-        <Input type="text" />
-        <Button>Go</Button>
-      </Flex>
-    ),
+    render: () => {
+      const [value, setValue] = createSignal("");
+      const [submitted, setSubmitted] = createSignal("Nothing submitted");
+      let submissions = 0;
+      return (
+        <>
+          <Flex gap="sm">
+            <Input
+              id="coverage-grouped-input"
+              type="text"
+              aria-label="Grouped input"
+              value={value()}
+              onInput={(event) => setValue(event.currentTarget.value)}
+            />
+            <Button id="coverage-grouped-submit" onClick={() => setSubmitted(`Submitted ${value() || "empty value"} · ${++submissions}`)}>Go</Button>
+          </Flex>
+          <p role="status">{submitted()}</p>
+        </>
+      );
+    },
   },
-  { name: "InputOTP", render: () => <InputOTP /> },
+  { name: "InputOTP", render: () => <InputOTP id="coverage-verification-code" aria-label="Coverage verification code" /> },
   {
     name: "ListBox",
     render: () => (
@@ -105,19 +594,35 @@ const EXAMPLES: Example[] = [
     name: "MetalBorder",
     render: () => <MetalBorder>Bordered</MetalBorder>,
   },
-  { name: "Meter", render: () => <Meter value={60} /> },
-  { name: "Input (number)", render: () => <Input type="number" /> },
+  { name: "Meter", render: () => <Meter id="coverage-meter" value={60} /> },
+  { name: "Input (number)", render: () => <Input id="coverage-number-input" aria-label="Coverage number input" type="number" /> },
   {
     name: "Popover",
     render: () => (
-      <Popover>
-        <Popover.Trigger>Open</Popover.Trigger>
+      <Popover id="coverage-popover">
+        <Popover.Trigger id="coverage-popover-trigger">Open</Popover.Trigger>
         <Popover.Content>Content.</Popover.Content>
       </Popover>
     ),
   },
-  { name: "Progress", render: () => <Progress value={40} /> },
-  { name: "RadialProgress", render: () => <RadialProgress value={40} /> },
+  {
+    name: "Progress",
+    render: () => {
+      const [value, setValue] = createSignal(40);
+      return (
+        <Flex direction="col" gap="sm">
+          <Progress id="coverage-progress" label="Coverage progress" value={value()} showValue />
+          <Button
+            id="coverage-progress-advance"
+            onClick={() => setValue((current) => current === 40 ? 75 : 40)}
+          >
+            Advance coverage progress
+          </Button>
+        </Flex>
+      );
+    },
+  },
+  { name: "RadialProgress", render: () => <RadialProgress id="coverage-radial-progress" value={40} /> },
   {
     name: "ScrollArea",
     render: () => (
@@ -126,12 +631,15 @@ const EXAMPLES: Example[] = [
       </ScrollArea>
     ),
   },
-  { name: "Input (search)", render: () => <Input type="search" /> },
+  { name: "Input (search)", render: () => <Input id="coverage-search-input" aria-label="Coverage search input" type="search" /> },
   { name: "Separator", render: () => <Separator /> },
-  { name: "SizePicker", render: () => <SizePicker /> },
+  { name: "SizePicker", render: () => <SizePicker id="coverage-size-picker" /> },
   {
     name: "Slider",
-    render: () => <Slider label="Volume" value={40} onChange={() => {}} />,
+    render: () => {
+      const [value, setValue] = createSignal(40);
+      return <Slider id="coverage-volume" label="Volume" value={value()} onChange={setValue} />;
+    },
   },
   { name: "Spinner", render: () => <Spinner /> },
   { name: "Card (surface)", render: () => <Card>On a surface.</Card> },
@@ -146,10 +654,22 @@ const EXAMPLES: Example[] = [
     ),
   },
   { name: "Text", render: () => <Text>Body text.</Text> },
-  { name: "Textarea", render: () => <Textarea /> },
-  { name: "Input (text)", render: () => <Input type="text" /> },
-  { name: "TimeField", render: () => <TimeField /> },
-  { name: "DateField", render: () => <DateField /> },
+  { name: "Textarea", render: () => <Textarea id="coverage-textarea" aria-label="Coverage textarea" /> },
+  { name: "Input (text)", render: () => <Input id="coverage-text-input" aria-label="Coverage text input" type="text" /> },
+  {
+    name: "TimeField",
+    render: () => {
+      const [value, setValue] = createSignal("");
+      return <TimeField value={value()} onChange={setValue}><TimeField.Group><TimeField.Input id="coverage-time" aria-label="Coverage time" /></TimeField.Group></TimeField>;
+    },
+  },
+  {
+    name: "DateField",
+    render: () => {
+      const [value, setValue] = createSignal("");
+      return <DateField value={value()} onChange={setValue}><DateField.Group><DateField.Input id="coverage-date" aria-label="Coverage date" /></DateField.Group></DateField>;
+    },
+  },
 ];
 
 /**
@@ -164,97 +684,259 @@ const EXAMPLES: Example[] = [
 const COMPOSED: Example[] = [
   {
     name: "ColorPicker",
-    render: () => (
-      <ColorPicker value="#6366f1">
-        <ColorPicker.Area />
-        <ColorPicker.Slider />
-        <ColorPicker.Field />
-      </ColorPicker>
-    ),
+    render: () => {
+      const [value, setValue] = createSignal("#6366f1");
+      return (
+        <ColorPicker id="coverage-color-picker" value={value()} onChange={setValue}>
+          <ColorPicker.Area id="coverage-color-picker-area" aria-label="Coverage color area" />
+          <ColorPicker.Slider id="coverage-color-picker-hue" aria-label="Coverage color hue" />
+          <ColorPicker.Field id="coverage-color-picker-value" aria-label="Coverage color value" />
+        </ColorPicker>
+      );
+    },
   },
   {
     name: "ColorArea",
-    render: () => <ColorArea value={{ h: 250, s: 0.7, v: 0.9 }} />,
+    render: () => {
+      const [value, setValue] = createSignal({ h: 250, s: 0.7, v: 0.9 });
+      return <ColorArea id="coverage-standalone-color-area" aria-label="Standalone color area" value={value()} onChange={setValue} />;
+    },
+  },
+  {
+    name: "ColorField",
+    render: () => {
+      const [value, setValue] = createSignal("#6366f1");
+      return <ColorField id="coverage-standalone-color-value" aria-label="Standalone color value" value={value()} onChange={setValue} />;
+    },
+  },
+  {
+    name: "ColorSlider",
+    render: () => {
+      const [value, setValue] = createSignal(250);
+      return (
+        <ColorSlider
+          id="coverage-standalone-hue"
+          aria-label="Standalone hue"
+          value={value()}
+          type="hue"
+          onChange={setValue}
+        />
+      );
+    },
   },
-  { name: "ColorField", render: () => <ColorField value="#6366f1" /> },
-  { name: "ColorSlider", render: () => <ColorSlider value={250} type="hue" /> },
   {
     name: "ComboBox",
-    render: () => (
-      <ComboBox
-        items={[
-          { id: "a", label: "Alpha" },
-          { id: "b", label: "Beta" },
-        ]}
-      >
-        <ComboBox.InputGroup>
-          <ComboBox.Input />
-          <ComboBox.Trigger />
-        </ComboBox.InputGroup>
-      </ComboBox>
-    ),
+    render: () => {
+      const [selected, setSelected] = createSignal<string | null>(null);
+      return (
+        <ComboBox
+          id="coverage-combo-box"
+          items={[
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Beta" },
+          ]}
+          selectedKey={selected()}
+          onSelectionChange={setSelected}
+        >
+          <ComboBox.InputGroup>
+            <ComboBox.Input id="coverage-combo-box-input" aria-label="Coverage combo box" />
+            <ComboBox.Trigger id="coverage-combo-box-trigger" />
+          </ComboBox.InputGroup>
+          <ComboBox.Popover><ComboBox.List /></ComboBox.Popover>
+        </ComboBox>
+      );
+    },
+  },
+  {
+    name: "DatePicker",
+    render: () => {
+      const [value, setValue] = createSignal(new Date());
+      return <DatePicker id="coverage-date-picker" value={value()} onChange={setValue} />;
+    },
   },
-  { name: "DatePicker", render: () => <DatePicker value={new Date()} /> },
   {
     name: "DateRangePicker",
-    render: () => <DateRangePicker value={{ start: new Date(), end: new Date() }} />,
+    render: () => {
+      const [value, setValue] = createSignal({ start: new Date(), end: new Date() });
+      return <DateRangePicker id="coverage-date-range-picker" value={value()} onChange={setValue} />;
+    },
   },
   {
     name: "RangeCalendar",
-    render: () => <RangeCalendar value={{ start: new Date(), end: new Date() }} />,
+    render: () => {
+      const [value, setValue] = createSignal({ start: new Date(), end: new Date() });
+      return <RangeCalendar id="coverage-range-calendar" value={value()} onChange={setValue} />;
+    },
   },
   { name: "Header", render: () => <Header>Header content</Header> },
-  { name: "Toolbar", render: () => <Toolbar>Toolbar content</Toolbar> },
+  {
+    name: "Toolbar",
+    render: () => {
+      const [result, setResult] = createSignal("No coverage tool selected");
+      return (
+        <>
+          <Toolbar id="coverage-toolbar" aria-label="Coverage tools">
+            <Button id="coverage-toolbar-first" onClick={() => setResult("First coverage tool selected")}>First coverage tool</Button>
+            <Button id="coverage-toolbar-second" onClick={() => setResult("Second coverage tool selected")}>Second coverage tool</Button>
+          </Toolbar>
+          <p role="status">{result()}</p>
+        </>
+      );
+    },
+  },
   {
     // Needs an i18n store. The library exports the factory for it, so the
     // example builds one rather than faking the shape.
     name: "LanguageSwitcher",
-    render: () => (
-      <LanguageSwitcher
-        i18n={createI18n({
-          languages: [
-            { code: "en", name: "English" },
-            { code: "es", name: "Espanol" },
-          ],
-          storageKey: "coverage-locale",
-        })}
-      />
-    ),
+    render: () => <LanguageSwitcherExample />,
   },
-  { name: "ThemeColorPicker", render: () => <ThemeColorPicker /> },
+  { name: "ThemeColorPicker", render: () => <ThemeColorPicker id="coverage-theme-color-picker" aria-label="Change coverage theme color" storagePrefix="js-software-coverage" /> },
   {
     // There is no `LiveChat` export — the tracker names components after their
     // recipe file, and this one ships as a bubble and a panel.
     name: "LiveChatBubble",
-    render: () => <LiveChatBubble />,
+    render: () => <DeferredExample name="LiveChatBubble" render={() => {
+      const [opened, setOpened] = createSignal(false);
+      return (
+        <>
+          <LiveChatBubble onOpen={() => setOpened(true)} />
+          <p role="status">{opened() ? "Chat bubble opened" : "Chat bubble closed"}</p>
+        </>
+      );
+    }} />,
   },
 ];
 
+const familyIdsByExampleName = {
+  Address: ["address"],
+  "Auth composition": ["auth-card", "auth-field-group", "auth-footer-links", "auth-message", "auth-powered-by", "auth-submit-button", "label"],
+  FieldGroup: ["field-group"],
+  Composer: ["composer"],
+  ConnectionSettings: ["connection-settings"],
+  ColorSwatch: ["color-swatch"],
+  ColorSwatchPicker: ["color-swatch-picker"],
+  ColorWheel: ["color-wheel"],
+  ColorWheelFlower: ["color-wheel-flower"],
+  ComplexColorWheel: ["complex-color-wheel"],
+  InlineEdit: ["inline-edit"],
+  PanelToggle: ["panel-toggle"],
+  "PasswordField and PasswordRequirements": ["password-field", "password-requirements"],
+  FlexGrid: ["flex-grid"],
+  LiveChatPanel: ["live-chat-panel"],
+  ImmersiveLanding: ["immersive-landing"],
+  CookieConsent: ["cookie-consent"],
+  PWAInstallPrompt: ["pwa-install-prompt"],
+  FirefoxPWABanner: ["firefox-pwa-banner"],
+  ButtonGroup: ["button-group"],
+  CheckboxGroup: ["checkbox-group"],
+  CloseButton: ["close-button"],
+  "Kbd.Abbr": ["kbd"],
+  "Input (placeholder)": ["input"],
+  Collapsible: ["collapsible"],
+  Accordion: ["accordion"],
+  Empty: ["empty"],
+  "Input (issues)": ["input"],
+  "Input (invalid)": ["input"],
+  "Input (grouped)": ["input"],
+  InputOTP: ["input-otp"],
+  ListBox: ["list-box"],
+  MetalBorder: ["metal-border"],
+  Meter: ["meter"],
+  "Input (number)": ["input"],
+  Popover: ["popover"],
+  Progress: ["progress"],
+  RadialProgress: ["radial-progress"],
+  ScrollArea: ["scroll-area"],
+  "Input (search)": ["input"],
+  Separator: ["separator"],
+  SizePicker: ["size-picker"],
+  Slider: ["slider"],
+  Spinner: ["spinner"],
+  "Card (surface)": ["card"],
+  Tag: ["chip"],
+  "Chip (grouped)": ["chip"],
+  Text: ["text"],
+  Textarea: ["textarea"],
+  "Input (text)": ["input"],
+  TimeField: ["time-field"],
+  DateField: ["date-field"],
+  ColorPicker: ["color-picker"],
+  ColorArea: ["color-area"],
+  ColorField: ["color-field"],
+  ColorSlider: ["color-slider"],
+  ComboBox: ["combo-box"],
+  DatePicker: ["date-picker"],
+  DateRangePicker: ["date-range-picker"],
+  RangeCalendar: ["range-calendar"],
+  Header: ["header"],
+  Toolbar: ["toolbar"],
+  LanguageSwitcher: ["language-switcher"],
+  ThemeColorPicker: ["theme-color-picker"],
+  LiveChatBubble: ["live-chat-bubble"],
+} as const satisfies Record<string, readonly ComponentFamilyId[]>;
+
+const examples = [...EXAMPLES, ...COMPOSED];
+const exampleNames = new Set(examples.map((example) => example.name));
+const staleMappings = Object.keys(familyIdsByExampleName).filter((name) => !exampleNames.has(name));
+const unmappedExamples = examples.filter((example) => !(example.name in familyIdsByExampleName));
+if (staleMappings.length > 0 || unmappedExamples.length > 0) {
+  throw new Error(
+    `coverage example registry differs; stale mappings: ${staleMappings.join(", ") || "none"}; unmapped examples: ${unmappedExamples.map((example) => example.name).join(", ") || "none"}`,
+  );
+}
+
+export const coverageFamilyIds = [
+  ...new Set(Object.values(familyIdsByExampleName).flat()),
+] as ComponentFamilyId[];
+
 export default function CoverageShowcase() {
+  onCleanup(() => {
+    if (activeFullscreenExample()) closeFullscreenExample();
+  });
+  const activeExample = () => examples.find((example) => example.name === activeFullscreenExample());
   return (
     <ShowcaseLayout>
-      <Flex direction="col" gap="lg" id="gallery">
-        <For each={[...EXAMPLES, ...COMPOSED]}>
-          {(example) => (
-            <div
-              data-coverage={example.name}
-              class="border border-[hsl(var(--color-border)/1)] rounded-lg p-4"
+      <Show
+        when={activeExample()}
+        fallback={
+          <Flex direction="col" gap="lg" id="gallery">
+            <For each={examples}>
+              {(example) => (
+                <div
+                  data-coverage={example.name}
+                  data-families={familyIdsByExampleName[example.name as keyof typeof familyIdsByExampleName]?.join(" ")}
+                  class="border border-[hsl(var(--color-border)/1)] rounded-lg p-4"
+                >
+                  <div class="text-xs uppercase tracking-wide opacity-60 mb-3">
+                    {example.name}
+                  </div>
+                  {createErrorBoundary(
+                    () => example.render(),
+                    (error) => (
+                        <div data-coverage-error={example.name} class="text-sm">
+                          {String((error() as Error)?.message ?? error())}
+                        </div>
+                    ),
+                  )()}
+                </div>
+              )}
+            </For>
+          </Flex>
+        }
+      >
+        {(example) => (
+          <div data-fullscreen-example={example().name}>
+            <Button
+              type="button"
+              class="fixed top-4 left-4 z-[100]"
+              onClick={closeFullscreenExample}
             >
-              <div class="text-xs uppercase tracking-wide opacity-60 mb-3">
-                {example.name}
-              </div>
-              {createErrorBoundary(
-                () => example.render(),
-                (error) => (
-                    <div data-coverage-error={example.name} class="text-sm">
-                      {String((error() as Error)?.message ?? error())}
-                    </div>
-                ),
-              )()}
-            </div>
-          )}
-        </For>
-      </Flex>
+              Return to coverage
+            </Button>
+            {example().render()}
+          </div>
+        )}
+      </Show>
     </ShowcaseLayout>
   );
 }
diff --git a/src/components/DataGridShowcase.tsx b/src/components/DataGridShowcase.tsx
index 034f7e8..606a5f2 100644
--- a/src/components/DataGridShowcase.tsx
+++ b/src/components/DataGridShowcase.tsx
@@ -5,6 +5,7 @@ import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { PropsTable } from "./showcase/PropsTable";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 type Person = {
   id: number;
@@ -35,6 +36,7 @@ function seed(grid: ReturnType<typeof createDataGrid<Person>>) {
 }
 
 export default function DataGridShowcase() {
+  const actions = createActionStatus("Select rows, then inspect the selection.");
   const sections = [
     { id: "contents", title: "Contents" },
     { id: "default", title: "Default" },
@@ -309,10 +311,18 @@ grid.addColumn("lastName", "Last Name", "string", { searchable: true });
             <Button
               size="sm"
               variant="outline"
-              onClick={() => console.log(selectable.selectedRows())}
+              onClick={() => {
+                const rows = selectable.selectedRows();
+                actions.announce(
+                  rows.length
+                    ? `Selected ${rows.map((row) => row.firstName).join(", ")}`
+                    : "No rows selected",
+                );
+              }}
             >
               Log selection
             </Button>
+            <ActionStatus message={actions.message()} />
           </Flex>
           <CodeBlock
             code={`const grid = createDataGrid<Person>({ selection: "multiple" });   // or "single"
diff --git a/src/components/DrawerShowcase.tsx b/src/components/DrawerShowcase.tsx
index 4ab8f5b..415b950 100644
--- a/src/components/DrawerShowcase.tsx
+++ b/src/components/DrawerShowcase.tsx
@@ -92,9 +92,7 @@ export default function DrawerShowcase() {
         <ShowcaseSection id="default" title="Default">
           <Flex direction="col" gap="md">
             <Drawer placement="left" size="md">
-              <Drawer.Trigger>
-                <Button flavor="primary">Open drawer</Button>
-              </Drawer.Trigger>
+              <Drawer.Trigger as={Button}>Open drawer</Drawer.Trigger>
               <Drawer.Backdrop>
                 <Drawer.Content>
                   <Drawer.Dialog>
@@ -107,9 +105,7 @@ export default function DrawerShowcase() {
             </Drawer>
             <CodeBlock
               code={`<Drawer placement="left" size="md">
-  <Drawer.Trigger>
-    <Button flavor="primary">Open drawer</Button>
-  </Drawer.Trigger>
+  <Drawer.Trigger as={Button} flavor="primary">Open drawer</Drawer.Trigger>
   <Drawer.Backdrop>
     <Drawer.Content>
       <Drawer.Dialog>
@@ -125,9 +121,7 @@ export default function DrawerShowcase() {
         <ShowcaseSection id="right" title="Right Side">
           <Flex direction="col" gap="md">
             <Drawer placement="right" size="md">
-              <Drawer.Trigger>
-                <Button flavor="primary">Open from right</Button>
-              </Drawer.Trigger>
+              <Drawer.Trigger as={Button}>Open from right</Drawer.Trigger>
               <Drawer.Backdrop>
                 <Drawer.Content>
                   <Drawer.Dialog>
@@ -145,9 +139,7 @@ export default function DrawerShowcase() {
         <ShowcaseSection id="with-header" title="With Header / Footer">
           <Flex direction="col" gap="md">
             <Drawer placement="left" size="md">
-              <Drawer.Trigger>
-                <Button flavor="primary">Open with header</Button>
-              </Drawer.Trigger>
+              <Drawer.Trigger as={Button}>Open with header</Drawer.Trigger>
               <Drawer.Backdrop>
                 <Drawer.Content>
                   <Drawer.Dialog>
@@ -166,7 +158,7 @@ export default function DrawerShowcase() {
             </Drawer>
             <CodeBlock
               code={`<Drawer placement="left" size="md">
-  <Drawer.Trigger><Button>Open</Button></Drawer.Trigger>
+  <Drawer.Trigger as={Button}>Open</Drawer.Trigger>
   <Drawer.Backdrop>
     <Drawer.Content>
       <Drawer.Dialog>
diff --git a/src/components/DropdownShowcase.tsx b/src/components/DropdownShowcase.tsx
index 6771286..cb67fed 100644
--- a/src/components/DropdownShowcase.tsx
+++ b/src/components/DropdownShowcase.tsx
@@ -1,10 +1,15 @@
 import ShowcaseLayout from "./ShowcaseLayout";
 import { Button, Card, Dropdown, Flex, Navbar } from "@pathscale/ui";
+import { createSignal } from "solid-js";
 import { PropsTable } from "./showcase/PropsTable";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus } from "./showcase/ActionStatus";
 
 export default function DropdownShowcase() {
+  const [placementStatus, setPlacementStatus] = createSignal(
+    "No placement menu opened",
+  );
   const sections = [
     { id: "default", title: "Default" },
     { id: "as-card", title: "As Card" },
@@ -220,7 +225,13 @@ export default function DropdownShowcase() {
         <ShowcaseSection id="placement" title="Placement">
           <Flex direction="col" gap="md">
             <Flex justify="center" align="center" gap="md" class="my-16">
-              <Dropdown placement="left">
+              <Dropdown
+                id="left-placement"
+                placement="left"
+                onOpenChange={(open) =>
+                  setPlacementStatus(`Left menu ${open ? "opened" : "closed"}`)
+                }
+              >
                 <Dropdown.Trigger>Left</Dropdown.Trigger>
                 <Dropdown.Menu class="w-52">
                   <Dropdown.Item>Item 1</Dropdown.Item>
@@ -228,7 +239,13 @@ export default function DropdownShowcase() {
                 </Dropdown.Menu>
               </Dropdown>
 
-              <Dropdown placement="right">
+              <Dropdown
+                id="right-placement"
+                placement="right"
+                onOpenChange={(open) =>
+                  setPlacementStatus(`Right menu ${open ? "opened" : "closed"}`)
+                }
+              >
                 <Dropdown.Trigger>Right</Dropdown.Trigger>
                 <Dropdown.Menu class="w-52">
                   <Dropdown.Item>Item 1</Dropdown.Item>
@@ -236,7 +253,13 @@ export default function DropdownShowcase() {
                 </Dropdown.Menu>
               </Dropdown>
 
-              <Dropdown placement="top">
+              <Dropdown
+                id="top-placement"
+                placement="top"
+                onOpenChange={(open) =>
+                  setPlacementStatus(`Top menu ${open ? "opened" : "closed"}`)
+                }
+              >
                 <Dropdown.Trigger>Top</Dropdown.Trigger>
                 <Dropdown.Menu class="w-52">
                   <Dropdown.Item>Item 1</Dropdown.Item>
@@ -244,7 +267,13 @@ export default function DropdownShowcase() {
                 </Dropdown.Menu>
               </Dropdown>
 
-              <Dropdown placement="bottom">
+              <Dropdown
+                id="bottom-placement"
+                placement="bottom"
+                onOpenChange={(open) =>
+                  setPlacementStatus(`Bottom menu ${open ? "opened" : "closed"}`)
+                }
+              >
                 <Dropdown.Trigger>Bottom</Dropdown.Trigger>
                 <Dropdown.Menu class="w-52">
                   <Dropdown.Item>Item 1</Dropdown.Item>
@@ -252,6 +281,7 @@ export default function DropdownShowcase() {
                 </Dropdown.Menu>
               </Dropdown>
             </Flex>
+            <ActionStatus message={placementStatus()} />
             <CodeBlock
               code={`<Dropdown placement="left">...</Dropdown>
 <Dropdown placement="right">...</Dropdown>
diff --git a/src/components/FormActionsShowcase.tsx b/src/components/FormActionsShowcase.tsx
index 675e361..7fb8510 100644
--- a/src/components/FormActionsShowcase.tsx
+++ b/src/components/FormActionsShowcase.tsx
@@ -2,18 +2,21 @@ import { Button, Fieldset } from "@pathscale/ui";
 import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 export default function FormActionsShowcase() {
+  const actions = createActionStatus();
   return (
     <ShowcaseLayout>
       <ShowcaseSection id="form-actions" title="Fieldset Actions">
         <Fieldset>
           <Fieldset.Legend>Profile</Fieldset.Legend>
           <Fieldset.Actions>
-            <Button variant="ghost">Cancel</Button>
-            <Button flavor="primary">Save changes</Button>
+            <Button variant="ghost" onClick={actions.handler("Profile changes cancelled")}>Cancel</Button>
+            <Button flavor="primary" onClick={actions.handler("Profile changes saved")}>Save changes</Button>
           </Fieldset.Actions>
         </Fieldset>
+        <ActionStatus message={actions.message()} />
         <CodeBlock
           code={`<Fieldset>
   <Fieldset.Legend>Profile</Fieldset.Legend>
diff --git a/src/components/JoinShowcase.tsx b/src/components/JoinShowcase.tsx
index fb3fdcf..0064917 100644
--- a/src/components/JoinShowcase.tsx
+++ b/src/components/JoinShowcase.tsx
@@ -3,16 +3,25 @@ import { Join } from "@pathscale/ui/lab";
 import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { createSignal } from "solid-js";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 export default function JoinShowcase() {
+  const [page, setPage] = createSignal(2);
+  const actions = createActionStatus();
+  const choose = (next: number) => {
+    setPage(next);
+    actions.announce(`Page ${next} selected`);
+  };
   return (
     <ShowcaseLayout>
       <ShowcaseSection id="join" title="Join">
         <Join>
-          <Button variant="outline">Previous</Button>
-          <Button variant="outline">Current</Button>
-          <Button variant="outline">Next</Button>
+          <Button variant="outline" onClick={() => choose(Math.max(1, page() - 1))}>Previous</Button>
+          <Button variant="outline" aria-label="Current" aria-pressed="true" onClick={() => choose(page())}>Current {page()}</Button>
+          <Button variant="outline" onClick={() => choose(page() + 1)}>Next</Button>
         </Join>
+        <ActionStatus message={actions.message()} />
         <CodeBlock
           code={`<Join>
   <Button variant="outline">Previous</Button>
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
index d2d7415..494a415 100644
--- a/src/components/Preview.tsx
+++ b/src/components/Preview.tsx
@@ -28,19 +28,20 @@ export default function Preview(props: PreviewProps) {
       <div class="flex items-center justify-between gap-4 px-8 ps-10">
         <h2 class="font-title text-lg md:max-lg:hidden">{TAB_TITLES[selectedKey()]}</h2>
         <Tabs
+          id="theme-preview-tabs"
           variant="primary"
           selectedKey={selectedKey()}
           onSelectionChange={handleSelectionChange as never}
           class="bg-base-300"
         >
           <Tabs.List>
-            <Tabs.Tab id="demo">
+            <Tabs.Tab id="demo" aria-label="Components Demo">
               <Icon src="mdi--apps" width={16} height={16} />
             </Tabs.Tab>
-            <Tabs.Tab id="variants">
+            <Tabs.Tab id="variants" aria-label="Component Variants">
               <Icon src="mdi--format-list-bulleted" width={16} height={16} />
             </Tabs.Tab>
-            <Tabs.Tab id="palette">
+            <Tabs.Tab id="palette" aria-label="Color Palette">
               <Icon src="mdi--palette" width={16} height={16} />
             </Tabs.Tab>
           </Tabs.List>
diff --git a/src/components/TableShowcase.tsx b/src/components/TableShowcase.tsx
index b03f29e..961297a 100644
--- a/src/components/TableShowcase.tsx
+++ b/src/components/TableShowcase.tsx
@@ -5,10 +5,15 @@ import ShowcaseLayout from "./ShowcaseLayout";
 import { CodeBlock } from "./showcase/CodeBlock";
 import { PropsTable } from "./showcase/PropsTable";
 import { ShowcaseSection } from "./showcase/ShowcaseSection";
+import { ActionStatus, createActionStatus } from "./showcase/ActionStatus";
 
 // Mask avatars, Tag "ghost" color, Button size "xs") are no longer part of the public API.
 // The new compound: Table -> ScrollContainer -> Content -> Header/Column + Body/Row/Cell.
 export default function TableShowcase() {
+  const actions = createActionStatus("Choose a row to inspect its details.");
+  const showDetails = (name: string) => {
+    actions.announce(`Showing details for ${name}`);
+  };
   const sections = [
     { id: "contents", title: "Contents" },
     { id: "default", title: "Default" },
@@ -212,7 +217,7 @@ export default function TableShowcase() {
                       </Table.Cell>
                       <Table.Cell>Purple</Table.Cell>
                       <Table.Cell>
-                        <Button variant="ghost" size="sm">
+                        <Button variant="ghost" size="sm" aria-label="View Hart Hagerty details" onClick={() => showDetails("Hart Hagerty")}>
                           details
                         </Button>
                       </Table.Cell>
@@ -244,7 +249,7 @@ export default function TableShowcase() {
                       </Table.Cell>
                       <Table.Cell>Red</Table.Cell>
                       <Table.Cell>
-                        <Button variant="ghost" size="sm">
+                        <Button variant="ghost" size="sm" aria-label="View Brice Swyre details" onClick={() => showDetails("Brice Swyre")}>
                           details
                         </Button>
                       </Table.Cell>
@@ -276,7 +281,7 @@ export default function TableShowcase() {
                       </Table.Cell>
                       <Table.Cell>Crimson</Table.Cell>
                       <Table.Cell>
-                        <Button variant="ghost" size="sm">
+                        <Button variant="ghost" size="sm" aria-label="View Marjy Ferencz details" onClick={() => showDetails("Marjy Ferencz")}>
                           details
                         </Button>
                       </Table.Cell>
@@ -308,7 +313,7 @@ export default function TableShowcase() {
                       </Table.Cell>
                       <Table.Cell>Indigo</Table.Cell>
                       <Table.Cell>
-                        <Button variant="ghost" size="sm">
+                        <Button variant="ghost" size="sm" aria-label="View Yancy Tear details" onClick={() => showDetails("Yancy Tear")}>
                           details
                         </Button>
                       </Table.Cell>
@@ -318,6 +323,7 @@ export default function TableShowcase() {
               </Table.ScrollContainer>
               <Table.Footer>Footer content area</Table.Footer>
             </Table>
+            <ActionStatus message={actions.message()} />
 
             <CodeBlock
               code={`<Table>
diff --git a/src/components/VideoPreviewShowcase.tsx b/src/components/VideoPreviewShowcase.tsx
index e4b05d2..6327b4c 100644
--- a/src/components/VideoPreviewShowcase.tsx
+++ b/src/components/VideoPreviewShowcase.tsx
@@ -14,13 +14,20 @@ export default function VideoPreviewShowcase() {
   ] as const;
 
   const [stream, setStream] = createSignal<MediaStream | null>(null);
+  const [cameraStatus, setCameraStatus] = createSignal("Camera is off.");
+  let cameraAttempts = 0;
 
   const startCamera = async () => {
+    cameraAttempts += 1;
+    const attempt = cameraAttempts;
+    setCameraStatus(`Requesting camera access · attempt ${attempt}`);
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
       setStream(mediaStream);
+      setCameraStatus(`Camera is active · attempt ${attempt}`);
     } catch (err) {
       console.error("Failed to access camera:", err);
+      setCameraStatus(`Camera unavailable · attempt ${attempt}`);
     }
   };
 
@@ -31,6 +38,7 @@ export default function VideoPreviewShowcase() {
         track.stop();
       }
       setStream(null);
+      setCameraStatus("Camera stopped.");
     }
   };
 
@@ -102,6 +110,9 @@ export default function VideoPreviewShowcase() {
                 </Button>
               )}
             </Flex>
+            <p role="status" aria-live="polite" class="text-sm text-base-content/70">
+              {cameraStatus()}
+            </p>
             <VideoPreview
               stream={stream}
               class="w-80 rounded-lg bg-black"
diff --git a/src/components/content/Search.tsx b/src/components/content/Search.tsx
index ae74934..b86c555 100644
--- a/src/components/content/Search.tsx
+++ b/src/components/content/Search.tsx
@@ -8,6 +8,7 @@ import {
   Show,
 } from "solid-js";
 import { createStore } from "solid-js";
+import { Button, Icon, Input } from "@pathscale/ui";
 import { ROUTES } from "../../config/routes";
 
 export interface SearchResult {
@@ -217,23 +218,16 @@ export const Search: Component<SearchProps> = (props) => {
   });
 
   const SearchIcon = () => (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <circle cx="11" cy="11" r="8" />
-      <path d="M21 21l-4.35-4.35" />
-    </svg>
+    <Icon src="icon-[lucide--search]" width={20} height={20} />
   );
 
   return (
     <>
-      <button
+      <Button
         onClick={openSearch}
+        variant="outline"
+        flavor="neutral"
+        radius="lg"
         class={`flex items-center gap-2 px-3 py-2 text-sm bg-base-100 border border-base-300 rounded-lg hover:bg-base-200 transition-colors ${
           props.class || ""
         }`}
@@ -245,7 +239,7 @@ export const Search: Component<SearchProps> = (props) => {
         <kbd class="hidden sm:flex items-center gap-1 ml-auto text-xs text-base-content/70">
           <span class="text-xs">⌘</span>K
         </kbd>
-      </button>
+      </Button>
 
       <Show when={isOpen()}>
         <div class="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-[10vh] px-4">
@@ -255,7 +249,7 @@ export const Search: Component<SearchProps> = (props) => {
           >
             <div class="flex items-center px-4 py-3 border-b border-base-300">
               <SearchIcon />
-              <input
+              <Input
                 ref={searchRef}
                 type="text"
                 placeholder="Search documentation..."
@@ -278,7 +272,11 @@ export const Search: Component<SearchProps> = (props) => {
               >
                 <For each={results}>
                   {(result, index) => (
-                    <button
+                    <Button
+                      variant="plain"
+                      flavor="neutral"
+                      radius="none"
+                      width="full"
                       class={`w-full text-left p-4 hover:bg-base-200 transition-colors border-b border-base-300 last:border-b-0 ${
                         index() === selectedIndex() ? "bg-base-200" : ""
                       }`}
@@ -299,7 +297,7 @@ export const Search: Component<SearchProps> = (props) => {
                           </span>
                         </div>
                       </div>
-                    </button>
+                    </Button>
                   )}
                 </For>
               </Show>
diff --git a/src/components/layout/Header/MarketingHeader.tsx b/src/components/layout/Header/MarketingHeader.tsx
index afa64b9..2d03b92 100644
--- a/src/components/layout/Header/MarketingHeader.tsx
+++ b/src/components/layout/Header/MarketingHeader.tsx
@@ -38,6 +38,7 @@ export const MarketingHeader: Component<MarketingHeaderProps> = (props) => {
           <Button
             variant="ghost"
             width="square"
+            aria-label={navigation.isOpen() ? "Close navigation" : "Open navigation"}
             onClick={() => navigation.setIsOpen(!navigation.isOpen())}
           >
             <HamburgerIcon />
@@ -66,9 +67,11 @@ export const MarketingHeader: Component<MarketingHeaderProps> = (props) => {
         <Navbar.End class="hidden lg:flex">
           <Flex gap="md" align="center">
             <a
+              id="github-source-link"
               href={EXTERNAL_ROUTES.GITHUB}
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="View UI on GitHub"
               class="hover:text-primary p-2 rounded-full transition-colors"
             >
               <GitHubIcon />
@@ -87,6 +90,7 @@ export const MarketingHeader: Component<MarketingHeaderProps> = (props) => {
             href={EXTERNAL_ROUTES.GITHUB}
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="View UI on GitHub from mobile navigation"
             class="p-2 rounded-full"
           >
             <GitHubIcon />
diff --git a/src/components/layout/Header/components/ComponentsMenu.tsx b/src/components/layout/Header/components/ComponentsMenu.tsx
index e8d21cb..33026ed 100644
--- a/src/components/layout/Header/components/ComponentsMenu.tsx
+++ b/src/components/layout/Header/components/ComponentsMenu.tsx
@@ -24,6 +24,7 @@ export const ComponentsMenu: Component<ComponentsMenuProps> = (props) => {
           <For each={componentsItem?.subcategories || []}>
             {(subcategory) => (
               <Button
+                id={`component-category-${subcategory.title.toLowerCase().replace(/\s+/g, "-")}`}
                 variant="ghost"
                 size="sm"
                 onClick={() => {
@@ -63,4 +64,4 @@ export const ComponentsMenu: Component<ComponentsMenuProps> = (props) => {
       </Navbar.Row>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/layout/Header/components/MobileSidebar.tsx b/src/components/layout/Header/components/MobileSidebar.tsx
index f062e2b..c4b1843 100644
--- a/src/components/layout/Header/components/MobileSidebar.tsx
+++ b/src/components/layout/Header/components/MobileSidebar.tsx
@@ -39,6 +39,7 @@ export const MobileSidebar: Component<MobileSidebarProps> = (props) => {
               variant="ghost"
               size="sm"
               width="square"
+              aria-label="Close navigation"
               onClick={() => setIsOpen(false)}
             >
               <CloseIcon />
@@ -120,4 +121,4 @@ export const MobileSidebar: Component<MobileSidebarProps> = (props) => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/navbar-showcase/MultilevelSection.tsx b/src/components/navbar-showcase/MultilevelSection.tsx
index 7dd2731..05e0198 100644
--- a/src/components/navbar-showcase/MultilevelSection.tsx
+++ b/src/components/navbar-showcase/MultilevelSection.tsx
@@ -31,7 +31,15 @@ export const MultilevelSection = () => {
         <Navbar.Stack sticky>
           <Navbar.Row flavor="primary" padded>
             <Navbar.Start>
-              <Button variant="ghost" class="text-xl font-bold text-white">
+              <Button
+                variant="ghost"
+                class="text-xl font-bold text-white"
+                aria-pressed={activeMain() === "Dashboard" ? "true" : "false"}
+                onClick={() => {
+                  setActiveMain("Dashboard");
+                  setActiveStrategy(null);
+                }}
+              >
                 Trading Platform
               </Button>
             </Navbar.Start>
@@ -45,15 +53,18 @@ export const MultilevelSection = () => {
                   "Performance",
                   "Funding Comparison",
                 ].map((item) => (
-                  <button
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-pressed={activeMain() === item ? "true" : "false"}
                     onClick={() => {
                       setActiveMain(item);
                       setActiveStrategy(null);
                     }}
-                    class={`hover:underline ${activeMain() === item ? "font-bold underline" : ""}`}
+                    class={`text-white hover:underline ${activeMain() === item ? "font-bold underline" : ""}`}
                   >
                     {item}
-                  </button>
+                  </Button>
                 ))}
               </Flex>
             </Navbar.End>
@@ -63,12 +74,15 @@ export const MultilevelSection = () => {
             <Navbar.Row class="bg-pink-500 text-white" padded>
               <Flex gap="md">
                 {strategies.map((s) => (
-                  <button
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-pressed={activeStrategy() === s ? "true" : "false"}
                     class={`relative pb-1 ${activeStrategy() === s ? "border-b-2 border-green-300" : ""}`}
                     onClick={() => setActiveStrategy(s)}
                   >
                     {s}
-                  </button>
+                  </Button>
                 ))}
               </Flex>
             </Navbar.Row>
@@ -98,7 +112,7 @@ export const MultilevelSection = () => {
     <Navbar.End>
       <Flex gap="md" class="text-white">
         {["Dashboard", "Strategies", ...].map((item) => (
-          <button onClick={...}>{item}</button>
+          <Button onClick={...}>{item}</Button>
         ))}
       </Flex>
     </Navbar.End>
@@ -108,7 +122,7 @@ export const MultilevelSection = () => {
     <Navbar.Row class="bg-pink-500 text-white" padded>
       <Flex gap="md">
         {strategies.map((s) => (
-          <button onClick={() => setActiveStrategy(s)}>{s}</button>
+          <Button onClick={() => setActiveStrategy(s)}>{s}</Button>
         ))}
       </Flex>
     </Navbar.Row>
diff --git a/src/components/showcase/ActionStatus.tsx b/src/components/showcase/ActionStatus.tsx
new file mode 100644
index 0000000..0736393
--- /dev/null
+++ b/src/components/showcase/ActionStatus.tsx
@@ -0,0 +1,27 @@
+import { createSignal, type Component } from "solid-js";
+
+export function createActionStatus(initial = "Ready") {
+  const [message, setMessage] = createSignal(initial);
+  let sequence = 0;
+
+  const announce = (next: string) => {
+    sequence += 1;
+    setMessage(`${next} · action ${sequence}`);
+  };
+
+  return {
+    message,
+    announce,
+    handler: (next: string) => () => announce(next),
+  };
+}
+
+export const ActionStatus: Component<{ message: string }> = (props) => (
+  <p
+    role="status"
+    aria-live="polite"
+    class="mt-3 min-h-6 text-sm text-base-content/70"
+  >
+    {props.message}
+  </p>
+);
diff --git a/src/components/theming/ColorGroup.tsx b/src/components/theming/ColorGroup.tsx
index 2cecb58..a94d0c4 100644
--- a/src/components/theming/ColorGroup.tsx
+++ b/src/components/theming/ColorGroup.tsx
@@ -29,7 +29,8 @@ export default function ColorGroup(props: ColorGroupProps) {
 
             return (
               <Button
-                onClick={(e: any) => props.onColorClick(colorKey, e)}
+                id={`theme-color-${colorKey.replace(/^--/, "").replace(/[^a-z0-9_-]+/gi, "-")}`}
+                onClick={(event: MouseEvent) => props.onColorClick(colorKey, event)}
                 class="w-8 h-8 rounded border border-gray-300 hover:border-gray-400 transition-colors relative group flex items-center justify-center"
                 style={{ background: backgroundColor() }}
                 title={colorKey}
@@ -52,4 +53,4 @@ export default function ColorGroup(props: ColorGroupProps) {
       <div class="text-base-content/60 text-xs">{props.group.name}</div>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/theming/ColorPickerPopover.tsx b/src/components/theming/ColorPickerPopover.tsx
index e42ed0d..5f76d2b 100644
--- a/src/components/theming/ColorPickerPopover.tsx
+++ b/src/components/theming/ColorPickerPopover.tsx
@@ -41,13 +41,19 @@ export default function ColorPickerPopover(props: ColorPickerPopoverProps) {
     >
       <Dialog.Content>
         <Dialog.Body>
-          <div class="grid grid-cols-10 w-full" role="listbox">
+          <div class="grid grid-cols-10 w-full" role="group" aria-label="Material colors">
             <For each={Object.entries(MATERIAL_COLORS)}>
               {([colorName, colorValue]) => (
-                <button
-                  class="appearance-none cursor-pointer w-full"
+                <Button
+                  id={`theme-material-${colorName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
+                  variant="plain"
+                  flavor="neutral"
+                  size="xs"
+                  width="full"
+                  radius="none"
+                  class="appearance-none cursor-pointer w-full !min-h-4 !p-0"
                   aria-label={colorName}
-                  aria-selected={color() === colorValue ? "true" : "false"}
+                  aria-pressed={color() === colorValue ? "true" : "false"}
                   onClick={() => handleColorSelect(colorValue)}
                 >
                   <div
@@ -61,7 +67,7 @@ export default function ColorPickerPopover(props: ColorPickerPopoverProps) {
                     }}
                     title={colorName}
                   />
-                </button>
+                </Button>
               )}
             </For>
           </div>
@@ -77,7 +83,7 @@ export default function ColorPickerPopover(props: ColorPickerPopoverProps) {
           </div>
         </Dialog.Body>
         <Dialog.Footer class="bg-base-100">
-          <Button onClick={props.onClose} flavor="primary">
+          <Button id="theme-color-picker-done" onClick={props.onClose} flavor="primary">
             Done
           </Button>
         </Dialog.Footer>
diff --git a/src/components/theming/EffectsSection.tsx b/src/components/theming/EffectsSection.tsx
index 457d53b..24d4e58 100644
--- a/src/components/theming/EffectsSection.tsx
+++ b/src/components/theming/EffectsSection.tsx
@@ -32,6 +32,7 @@ export default function EffectsSection(props: EffectsSectionProps) {
         <For each={EFFECTS}>
           {(effect) => (
             <Switch
+              id={`theme-effect-${effect.key.replace(/^--/, "")}`}
               class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
               size="sm"
               checked={props.theme[effect.key] === "1"}
diff --git a/src/components/theming/GlassSection.tsx b/src/components/theming/GlassSection.tsx
index 6c4670c..14b0722 100644
--- a/src/components/theming/GlassSection.tsx
+++ b/src/components/theming/GlassSection.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Separator } from "@pathscale/ui";
+import { Button, Icon, Separator, Slider } from "@pathscale/ui";
 import {
   BLUR_MAX,
   DEPTH_MAX,
@@ -11,7 +11,7 @@ import { Theme } from "../../utils/themeUtils";
 
 interface GlassSectionProps {
   theme: Theme;
-  onThemeUpdate: (key: string, value: string) => void;
+  onThemeUpdate: (values: Record<string, string>) => void;
 }
 
 export default function GlassSection(props: GlassSectionProps) {
@@ -27,9 +27,7 @@ export default function GlassSection(props: GlassSectionProps) {
       depth: next.depth ?? current.depth,
     };
     const cssVars = resolveGlassCssVariables(merged);
-    for (const [key, value] of Object.entries(cssVars)) {
-      props.onThemeUpdate(key, value);
-    }
+    props.onThemeUpdate(cssVars);
   };
 
   const resetToHype4 = () => applyTuning(HYPE4_DEFAULTS);
@@ -40,6 +38,7 @@ export default function GlassSection(props: GlassSectionProps) {
           <Icon src="mdi--blur" width={16} height={16} class="opacity-40" />
           Glass
           <Button
+            id="theme-glass-reset"
             size="sm"
             variant="ghost"
             class="ml-auto"
@@ -51,65 +50,46 @@ export default function GlassSection(props: GlassSectionProps) {
         </span></span><Separator class="flex-1" /></h3>
 
       <div class="flex flex-col gap-2">
-        <label class="bg-base-200 rounded-lg flex flex-col gap-1 p-2">
-          <span class="flex items-center justify-between gap-2">
-            <span class="text-base-content/70 text-xs">Blur</span>
-            <span class="text-base-content/50 font-mono text-xs">
-              {tuning().blur}px
-            </span>
-          </span>
-          <input
-            type="range"
-            class="w-full accent-primary"
+        <div class="bg-base-200 rounded-lg p-2">
+          <Slider
+            id="theme-glass-blur"
+            label="Blur"
+            size="sm"
             min={0}
             max={BLUR_MAX}
             step={1}
             value={tuning().blur}
-            onInput={(event) =>
-              applyTuning({ blur: Number(event.currentTarget.value) })
-            }
+            formatValue={(value) => `${value}px`}
+            onChange={(value) => applyTuning({ blur: value })}
           />
-        </label>
+        </div>
 
-        <label class="bg-base-200 rounded-lg flex flex-col gap-1 p-2">
-          <span class="flex items-center justify-between gap-2">
-            <span class="text-base-content/70 text-xs">Refraction</span>
-            <span class="text-base-content/50 font-mono text-xs">
-              {tuning().refraction.toFixed(2)}
-            </span>
-          </span>
-          <input
-            type="range"
-            class="w-full accent-primary"
+        <div class="bg-base-200 rounded-lg p-2">
+          <Slider
+            id="theme-glass-refraction"
+            label="Refraction"
+            size="sm"
             min={0}
             max={REFRACTION_MAX}
             step={0.01}
             value={tuning().refraction}
-            onInput={(event) =>
-              applyTuning({ refraction: Number(event.currentTarget.value) })
-            }
+            formatValue={(value) => value.toFixed(2)}
+            onChange={(value) => applyTuning({ refraction: value })}
           />
-        </label>
+        </div>
 
-        <label class="bg-base-200 rounded-lg flex flex-col gap-1 p-2">
-          <span class="flex items-center justify-between gap-2">
-            <span class="text-base-content/70 text-xs">Depth</span>
-            <span class="text-base-content/50 font-mono text-xs">
-              {tuning().depth}
-            </span>
-          </span>
-          <input
-            type="range"
-            class="w-full accent-primary"
+        <div class="bg-base-200 rounded-lg p-2">
+          <Slider
+            id="theme-glass-depth"
+            label="Depth"
+            size="sm"
             min={0}
             max={DEPTH_MAX}
             step={1}
             value={tuning().depth}
-            onInput={(event) =>
-              applyTuning({ depth: Number(event.currentTarget.value) })
-            }
+            onChange={(value) => applyTuning({ depth: value })}
           />
-        </label>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/theming/RadiusSection.tsx b/src/components/theming/RadiusSection.tsx
index 14e8bd0..d1145e5 100644
--- a/src/components/theming/RadiusSection.tsx
+++ b/src/components/theming/RadiusSection.tsx
@@ -53,6 +53,7 @@ export default function RadiusSection(props: RadiusSectionProps) {
                 <For each={RADIUS_VALUES}>
                   {(value) => (
                     <Radio
+                      id={`theme-radius-${radiusType.key.replace(/^--/, "")}-${value.replace(/[^a-z0-9]+/gi, "-")}`}
                       value={value}
                       aria-label={`${radiusType.label} radius ${radiusLabel(value)}`}
                       class="h-8 w-10 [&_[data-slot=radio-control]]:mt-0 [&_[data-slot=radio-control]]:h-8 [&_[data-slot=radio-control]]:w-10 [&_[data-slot=radio-control]]:rounded-lg [&_[data-slot=radio-control]]:border-base-content/20 [&_[data-slot=radio-control]]:bg-base-200"
diff --git a/src/components/theming/SizesSection.tsx b/src/components/theming/SizesSection.tsx
index c63ad5d..d8eabeb 100644
--- a/src/components/theming/SizesSection.tsx
+++ b/src/components/theming/SizesSection.tsx
@@ -92,7 +92,7 @@ export default function SizesSection(props: SizesSectionProps) {
                         <div class="flex flex-col items-center gap-1">
                           <div 
                             class="flex items-end" 
-                            style={{ height: `${maxHeightFor(FIELD_SCALE) / 4}px` }}
+                            style={{ height: `${maxHeightFor(sizeType.scale) / 4}px` }}
                           >
                             <div 
                               class="bg-base-content w-1 rounded-full" 
@@ -110,6 +110,7 @@ export default function SizesSection(props: SizesSectionProps) {
                 </div>
                 
                 <Slider
+                  id={`theme-size-${sizeType.key.replace(/^--/, "")}`}
                   label={`${sizeType.label} base size`}
                   size="sm"
                   min={0}
@@ -141,6 +142,7 @@ export default function SizesSection(props: SizesSectionProps) {
               </div>
               
               <Slider
+                id="theme-border-width"
                 label="Border width"
                 size="sm"
                 min={0}
diff --git a/src/components/theming/ThemeCSSModal.tsx b/src/components/theming/ThemeCSSModal.tsx
index f56a750..e6c6733 100644
--- a/src/components/theming/ThemeCSSModal.tsx
+++ b/src/components/theming/ThemeCSSModal.tsx
@@ -149,6 +149,7 @@ export default function ThemeCSSModal(props: ThemeCSSModalProps) {
 
           <div class="relative">
             <Textarea
+              id="theme-generated-css"
               aria-label="Generated theme CSS"
               class="h-80 w-full resize-none font-mono text-xs"
               value={cssText()}
@@ -157,6 +158,7 @@ export default function ThemeCSSModal(props: ThemeCSSModalProps) {
             />
 
             <Button
+              id="theme-copy-css"
               class="absolute top-2 right-5"
               size="sm"
               flavor={isClipboardButtonPressed() ? "primary" : "secondary"}
@@ -178,7 +180,7 @@ export default function ThemeCSSModal(props: ThemeCSSModalProps) {
         </Dialog.Body>
 
         <Dialog.Footer>
-          <Button onClick={props.onClose}>Close</Button>
+          <Button id="theme-close-css" onClick={props.onClose}>Close</Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog>
diff --git a/src/components/theming/ThemeEditor.tsx b/src/components/theming/ThemeEditor.tsx
index 8429969..9f6974a 100644
--- a/src/components/theming/ThemeEditor.tsx
+++ b/src/components/theming/ThemeEditor.tsx
@@ -1,38 +1,52 @@
 import { For, createSignal } from "solid-js";
-import { Button, Dropdown, Grid, Icon, Separator, Switch } from "@pathscale/ui";
+import { Button, Grid, Icon, Input, Separator, Switch } from "@pathscale/ui";
 import { Theme, COLOR_GROUPS } from "../../utils/themeUtils";
 import ColorGroup from "./ColorGroup";
 import RadiusSection from "./RadiusSection";
 import EffectsSection from "./EffectsSection";
 import GlassSection from "./GlassSection";
 import SizesSection from "./SizesSection";
+import { ActionStatus } from "../showcase/ActionStatus";
 
 interface ThemeEditorProps {
   theme: Theme;
+  onThemeNameChange: (name: string) => void;
   onColorClick: (colorKey: string, event: MouseEvent) => void;
   onThemePropertyUpdate: (key: string, value: string) => void;
+  onGlassThemeUpdate: (values: Record<string, string>) => void;
   onRandomizeTheme: () => void;
   onExportCSS: (isDefault: boolean, isPrefersDark: boolean, colorScheme: "light" | "dark") => void;
   dockActiveItem: string;
+  applyToWholeSite: boolean;
+  rememberTheme: boolean;
+  onApplyToWholeSiteChange: (checked: boolean) => void;
+  onRememberThemeChange: (checked: boolean) => void;
+  status: string;
 }
 
 export default function ThemeEditor(props: ThemeEditorProps) {
   const [isDefault, setIsDefault] = createSignal(false);
   const [isPrefersDark, setIsPrefersDark] = createSignal(false);
   const [colorScheme, setColorScheme] = createSignal<"light" | "dark">("light");
-  const [applyToWholeSite, setApplyToWholeSite] = createSignal(false);
-  const [rememberTheme, setRememberTheme] = createSignal(false);
 
   return (
     <div
       class={`bg-base-100 flex w-full shrink-0 flex-col items-center gap-2 p-2 pb-20 md:sticky md:top-16 md:items-start lg:items-stretch ${props.dockActiveItem !== "editor" ? "max-md:hidden" : ""}`}
     >
+      <Input
+        id="theme-name"
+        aria-label="Theme name"
+        value={props.theme.name}
+        onInput={(event) => props.onThemeNameChange(event.currentTarget.value)}
+      />
+      <ActionStatus message={props.status} />
+
       <Grid cols="2" gap="sm" class="w-full">
-        <Button onClick={props.onRandomizeTheme}>
+        <Button id="theme-randomize" onClick={props.onRandomizeTheme}>
           <Icon src="mdi--dice" width={16} height={16} class="group-active:scale-95" />
           Random
         </Button>
-        <Button flavor="secondary" onClick={() => props.onExportCSS(isDefault(), isPrefersDark(), colorScheme())}>
+        <Button id="theme-export-css" flavor="secondary" onClick={() => props.onExportCSS(isDefault(), isPrefersDark(), colorScheme())}>
           <Icon src="mdi--code-braces" width={16} height={16} />
           CSS
         </Button>
@@ -40,19 +54,21 @@ export default function ThemeEditor(props: ThemeEditorProps) {
 
       <div class="flex flex-col gap-2 w-full">
         <Switch
+          id="theme-apply-whole-site"
           class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
           size="sm"
-          checked={applyToWholeSite()}
-          onChange={setApplyToWholeSite}
+          checked={props.applyToWholeSite}
+          onChange={props.onApplyToWholeSiteChange}
         >
           Apply to whole site
         </Switch>
 
         <Switch
+          id="theme-remember"
           class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
           size="sm"
-          checked={rememberTheme()}
-          onChange={setRememberTheme}
+          checked={props.rememberTheme}
+          onChange={props.onRememberThemeChange}
         >
           Remember this theme
         </Switch>
@@ -87,7 +103,7 @@ export default function ThemeEditor(props: ThemeEditorProps) {
 
       <GlassSection
         theme={props.theme}
-        onThemeUpdate={props.onThemePropertyUpdate}
+        onThemeUpdate={props.onGlassThemeUpdate}
       />
 
       <SizesSection
@@ -102,6 +118,7 @@ export default function ThemeEditor(props: ThemeEditorProps) {
       
       <div class="flex flex-col gap-3 w-full">
         <Switch
+          id="theme-default"
           class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
           size="sm"
           checked={isDefault()}
@@ -111,6 +128,7 @@ export default function ThemeEditor(props: ThemeEditorProps) {
         </Switch>
 
         <Switch
+          id="theme-default-dark"
           class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
           size="sm"
           checked={isPrefersDark()}
@@ -120,6 +138,7 @@ export default function ThemeEditor(props: ThemeEditorProps) {
         </Switch>
 
         <Switch
+          id="theme-color-scheme-dark"
           class="w-full justify-between [&_[data-slot=switch-content]]:order-first"
           size="sm"
           checked={colorScheme() === "dark"}
diff --git a/src/components/theming/ThemeList.tsx b/src/components/theming/ThemeList.tsx
new file mode 100644
index 0000000..cf6dc99
--- /dev/null
+++ b/src/components/theming/ThemeList.tsx
@@ -0,0 +1,80 @@
+import { Button, Icon } from "@pathscale/ui";
+import { For, Show } from "solid-js";
+import type { Theme } from "../../utils/themeUtils";
+
+interface ThemeListProps {
+  themes: Theme[];
+  currentTheme: Theme;
+  onThemeSelect: (theme: Theme) => void;
+  onThemeRemove: (theme: Theme) => void;
+  onCreateNewTheme: () => void;
+  onClearAllThemes: () => void;
+}
+
+const themeIdentity = (theme: Theme) => theme._id || theme.name;
+const themeDomId = (theme: Theme) =>
+  String(themeIdentity(theme)).toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+
+export default function ThemeList(props: ThemeListProps) {
+  return (
+    <aside class="bg-base-100 border-base-300 flex min-w-0 flex-col gap-3 border-b p-3 md:border-b-0 md:border-e">
+      <div class="flex items-center justify-between gap-2">
+        <h2 class="text-sm font-semibold">My themes</h2>
+        <Button
+          id="theme-add"
+          size="sm"
+          flavor="secondary"
+          onClick={props.onCreateNewTheme}
+          aria-label="Add new theme"
+        >
+          <Icon src="mdi--plus" width={16} height={16} />
+          Add
+        </Button>
+      </div>
+
+      <div class="flex flex-col gap-1" aria-label="Saved themes">
+        <For each={props.themes}>
+          {(theme) => {
+            const selected = () =>
+              themeIdentity(theme) === themeIdentity(props.currentTheme);
+            return (
+              <div class="flex min-w-0 items-center gap-1">
+                <Button
+                  id={`theme-select-${themeDomId(theme)}`}
+                  class="min-w-0 flex-1 justify-start"
+                  size="sm"
+                  flavor={selected() ? "primary" : "secondary"}
+                  aria-pressed={selected() ? "true" : "false"}
+                  onClick={() => props.onThemeSelect(theme)}
+                >
+                  <span class="truncate">{theme.name}</span>
+                </Button>
+                <Button
+                  id={`theme-delete-${themeDomId(theme)}`}
+                  size="sm"
+                  flavor="secondary"
+                  aria-label={`Delete theme ${theme.name}`}
+                  onClick={() => props.onThemeRemove(theme)}
+                >
+                  Delete
+                </Button>
+              </div>
+            );
+          }}
+        </For>
+      </div>
+
+      <Show when={props.themes.length > 1}>
+        <Button
+          id="theme-clear-all"
+          class="justify-start"
+          size="sm"
+          flavor="secondary"
+          onClick={props.onClearAllThemes}
+        >
+          Clear saved themes
+        </Button>
+      </Show>
+    </aside>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 1f6b72a..6b8b112 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@
 // else mounted it, so the site was rendering with no theme attribute at all
 // and falling through to whatever `:root` happened to declare.
 import "./lib/theme";
+import { restoreAppliedTheme } from "./lib/themeEditorPersistence";
 /* @refresh reload */
 import "./index.css";
 import { render } from "@solidjs/web";
@@ -10,6 +11,8 @@ import App from "./App";
 
 const root = document.getElementById("root");
 
+restoreAppliedTheme();
+
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   throw new Error(
     "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
diff --git a/src/lib/themeEditorPersistence.ts b/src/lib/themeEditorPersistence.ts
new file mode 100644
index 0000000..4af24c2
--- /dev/null
+++ b/src/lib/themeEditorPersistence.ts
@@ -0,0 +1,77 @@
+import type { Theme } from "../types/theme";
+
+const STORAGE_KEY = "js-software-theme-editor";
+const appliedProperties = new Set<string>();
+
+export interface PersistedThemeEditorState {
+  currentTheme: Theme;
+  themes: Theme[];
+  applyToWholeSite: boolean;
+}
+
+const isTheme = (value: unknown): value is Theme => {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate.name === "string" &&
+    Object.keys(candidate).some(
+      (key) => key.startsWith("--") && typeof candidate[key] === "string",
+    )
+  );
+};
+
+export const readThemeEditorState = (): PersistedThemeEditorState | null => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const value = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null") as {
+      currentTheme?: unknown;
+      themes?: unknown;
+      applyToWholeSite?: unknown;
+    } | null;
+
+    if (!value || !isTheme(value.currentTheme)) return null;
+    const themes = Array.isArray(value.themes)
+      ? value.themes.filter(isTheme)
+      : [];
+
+    return {
+      currentTheme: value.currentTheme,
+      themes,
+      applyToWholeSite: value.applyToWholeSite === true,
+    };
+  } catch {
+    return null;
+  }
+};
+
+export const writeThemeEditorState = (state: PersistedThemeEditorState) => {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+};
+
+export const clearThemeEditorState = () => {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(STORAGE_KEY);
+};
+
+export const applyThemeToDocument = (theme: Theme | null) => {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+  for (const property of appliedProperties) root.style.removeProperty(property);
+  appliedProperties.clear();
+
+  if (!theme) return;
+  for (const [property, value] of Object.entries(theme)) {
+    if (property.startsWith("--")) {
+      root.style.setProperty(property, value);
+      appliedProperties.add(property);
+    }
+  }
+};
+
+export const restoreAppliedTheme = () => {
+  const state = readThemeEditorState();
+  if (state?.applyToWholeSite) applyThemeToDocument(state.currentTheme);
+};
diff --git a/src/pages/Showcases.tsx b/src/pages/Showcases.tsx
index aa7c5b1..a952e40 100644
--- a/src/pages/Showcases.tsx
+++ b/src/pages/Showcases.tsx
@@ -1,6 +1,6 @@
 import { Component, For } from "solid-js";
 import { ContentContainer } from "../components/content/ContentContainer";
-import { Button, Card, Chip, Flex, Grid } from "@pathscale/ui";
+import { Button, Card, Chip, componentFamilies, Flex, Grid } from "@pathscale/ui";
 import { routes } from "../routes";
 import { ROUTES } from "../config/routes";
 
@@ -43,13 +43,13 @@ const Showcases: Component = () => {
         <div class="text-center">
           <h1 class="text-5xl font-bold mb-6">Component Showcases</h1>
           <p class="text-xl text-base-content/70 mb-8 max-w-3xl mx-auto leading-relaxed">
-            {showcaseRoutes.length} focused family demonstrations plus a complete
-            coverage lab for the current @pathscale/ui 3.x public surface.
+            All {componentFamilies.length} public @pathscale/ui component families,
+            with focused demonstrations and a complete coverage lab.
           </p>
 
           <Flex gap="md" justify="center" wrap="wrap" class="mb-8">
             <Chip class="px-4 py-2">
-              {showcaseRoutes.length} Interactive Demos
+              {componentFamilies.length} Component Families
             </Chip>
             <Chip class="px-4 py-2">
               Live Code Examples
diff --git a/src/pages/Theming.tsx b/src/pages/Theming.tsx
index 128e5f1..d99ae82 100644
--- a/src/pages/Theming.tsx
+++ b/src/pages/Theming.tsx
@@ -59,17 +59,69 @@ import {
   withGlassThemeDefaults,
 } from "../utils/themeUtils";
 import ThemeEditor from "../components/theming/ThemeEditor";
+import ThemeList from "../components/theming/ThemeList";
 import ColorPickerPopover from "../components/theming/ColorPickerPopover";
 import ThemeCSSModal from "../components/theming/ThemeCSSModal";
 import { ContentContainer } from "../components/content/ContentContainer";
+import {
+  applyThemeToDocument,
+  clearThemeEditorState,
+  readThemeEditorState,
+  writeThemeEditorState,
+} from "../lib/themeEditorPersistence";
+import { createActionStatus } from "../components/showcase/ActionStatus";
+
+const withIdentity = (theme: Theme): Theme => ({
+  ...theme,
+  _id: theme._id || `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+});
+
+const restoreThemeLibrary = (
+  persisted: ReturnType<typeof readThemeEditorState>,
+): { currentTheme: Theme; themes: Theme[] } => {
+  if (!persisted) {
+    const currentTheme = withIdentity(
+      withGlassThemeDefaults({ ...generateRandomTheme(), name: "Theme 1" }),
+    );
+    return { currentTheme, themes: [currentTheme] };
+  }
+
+  const currentTheme = withIdentity(
+    withGlassThemeDefaults(persisted.currentTheme),
+  );
+  let linkedCurrentTheme = false;
+  const themes = persisted.themes.map((theme) => {
+    const isCurrentTheme =
+      !linkedCurrentTheme &&
+      (theme._id === currentTheme._id ||
+        (!persisted.currentTheme._id && theme.name === currentTheme.name));
+    if (isCurrentTheme) {
+      linkedCurrentTheme = true;
+      return currentTheme;
+    }
+    return withIdentity(withGlassThemeDefaults(theme));
+  });
+
+  return { currentTheme, themes };
+};
 
 export default function Theming() {
-  const initialTheme = withGlassThemeDefaults(generateRandomTheme());
+  const persisted = readThemeEditorState();
+  const restored = restoreThemeLibrary(persisted);
+  const initialTheme = restored.currentTheme;
   const [currentTheme, setCurrentTheme] = createSignal<Theme>(initialTheme);
+  const [customThemes, setCustomThemes] = createSignal<Theme[]>(restored.themes);
   const [showColorPicker, setShowColorPicker] = createSignal(false);
   const [selectedColorKey, setSelectedColorKey] = createSignal("");
   const [pickerPosition, setPickerPosition] = createSignal({ x: 0, y: 0 });
   const [showCSSModal, setShowCSSModal] = createSignal(false);
+  const [applyToWholeSite, setApplyToWholeSite] = createSignal(
+    persisted?.applyToWholeSite || false,
+  );
+  const [rememberTheme, setRememberTheme] = createSignal(Boolean(persisted));
+  const actionStatus = createActionStatus(
+    persisted ? "Remembered theme restored" : "Theme editor ready",
+  );
 
   // Detect initial theme type automatically
   const initialIsDark = (initialTheme as any)._themeType === "dark";
@@ -80,6 +132,29 @@ export default function Theming() {
   });
   const [dockActiveItem] = createSignal("editor");
 
+  const identity = (theme: Theme) => theme._id || theme.name;
+
+  const persist = (
+    theme = currentTheme(),
+    themes = customThemes(),
+    apply = applyToWholeSite(),
+  ) => {
+    if (rememberTheme()) {
+      writeThemeEditorState({ currentTheme: theme, themes, applyToWholeSite: apply });
+    }
+  };
+
+  const commitTheme = (theme: Theme) => {
+    const next = withIdentity(withGlassThemeDefaults(theme));
+    setCurrentTheme(next);
+    const themes = customThemes().map((saved) =>
+      identity(saved) === identity(next) ? next : saved,
+    );
+    setCustomThemes(themes);
+    if (applyToWholeSite()) applyThemeToDocument(next);
+    persist(next, themes);
+  };
+
   /**
    * RANDOM THEME GENERATION PROCESS
    *
@@ -110,7 +185,13 @@ export default function Theming() {
    */
   const randomizeTheme = () => {
     const newTheme = withGlassThemeDefaults(generateRandomTheme());
-    setCurrentTheme(newTheme);
+    const replacement = {
+      ...newTheme,
+      name: currentTheme().name,
+      _id: currentTheme()._id,
+    };
+    commitTheme(replacement);
+    actionStatus.announce("Theme randomized");
 
     const isDark = (newTheme as any)._themeType === "dark";
     setThemeOptions((prev) => ({
@@ -119,6 +200,87 @@ export default function Theming() {
     }));
   };
 
+  const createNewTheme = () => {
+    const usedNames = new Set(customThemes().map((theme) => theme.name));
+    let nextThemeNumber = 1;
+    while (usedNames.has(`Theme ${nextThemeNumber}`)) nextThemeNumber += 1;
+    const theme = withIdentity(
+      withGlassThemeDefaults({
+        ...generateRandomTheme(),
+        name: `Theme ${nextThemeNumber}`,
+      }),
+    );
+    const themes = [theme, ...customThemes()];
+    setCurrentTheme(theme);
+    setCustomThemes(themes);
+    if (applyToWholeSite()) applyThemeToDocument(theme);
+    persist(theme, themes);
+    actionStatus.announce(`Theme added: ${theme.name}`);
+  };
+
+  const loadTheme = (theme: Theme) => {
+    commitTheme(theme);
+    actionStatus.announce(`Theme selected: ${theme.name}`);
+  };
+
+  const removeTheme = (theme: Theme) => {
+    const remaining = customThemes().filter(
+      (saved) => identity(saved) !== identity(theme),
+    );
+    if (identity(currentTheme()) !== identity(theme)) {
+      setCustomThemes(remaining);
+      persist(currentTheme(), remaining);
+      actionStatus.announce(`Theme deleted: ${theme.name}`);
+      return;
+    }
+
+    const next = remaining[0] || withIdentity(withGlassThemeDefaults(generateRandomTheme()));
+    setCurrentTheme(next);
+    setCustomThemes(remaining);
+    if (applyToWholeSite()) applyThemeToDocument(next);
+    persist(next, remaining);
+    actionStatus.announce(`Theme deleted: ${theme.name}`);
+  };
+
+  const clearAllThemes = () => {
+    const next = withIdentity(withGlassThemeDefaults(generateRandomTheme()));
+    setCurrentTheme(next);
+    setCustomThemes([]);
+    if (applyToWholeSite()) applyThemeToDocument(next);
+    persist(next, []);
+    actionStatus.announce("Saved themes cleared");
+  };
+
+  const updateThemeName = (name: string) => {
+    commitTheme({ ...currentTheme(), name });
+    actionStatus.announce(`Theme renamed: ${name}`);
+  };
+
+  const changeApplyToWholeSite = (checked: boolean) => {
+    setApplyToWholeSite(checked);
+    applyThemeToDocument(checked ? currentTheme() : null);
+    persist(currentTheme(), customThemes(), checked);
+    actionStatus.announce(
+      checked ? "Theme applied to whole site" : "Theme scoped to preview",
+    );
+  };
+
+  const changeRememberTheme = (checked: boolean) => {
+    setRememberTheme(checked);
+    if (checked) {
+      writeThemeEditorState({
+        currentTheme: currentTheme(),
+        themes: customThemes(),
+        applyToWholeSite: applyToWholeSite(),
+      });
+    } else {
+      clearThemeEditorState();
+    }
+    actionStatus.announce(
+      checked ? "Theme will be remembered" : "Theme will not be remembered",
+    );
+  };
+
   const openColorPicker = (colorKey: string, event: MouseEvent) => {
     const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
     setPickerPosition({
@@ -134,13 +296,20 @@ export default function Theming() {
 
     if (key) {
       const newTheme = updateThemeColor(currentTheme(), key, colorValue);
-      setCurrentTheme(newTheme);
+      commitTheme(newTheme);
+      actionStatus.announce(`Color updated: ${key}`);
     }
   };
 
   const updateThemePropertyValue = (key: string, value: string) => {
     const newTheme = updateThemeProperty(currentTheme(), key, value);
-    setCurrentTheme(newTheme);
+    commitTheme(newTheme);
+    actionStatus.announce(`Theme token updated: ${key}`);
+  };
+
+  const updateGlassThemeValues = (values: Record<string, string>) => {
+    commitTheme({ ...currentTheme(), ...values });
+    actionStatus.announce("Glass settings updated");
   };
 
   const exportCSS = (
@@ -164,14 +333,29 @@ export default function Theming() {
         </p>
       </div>
 
-      <div class="relative grid md:grid-cols-[20rem_1fr]">
+      <div class="relative grid md:grid-cols-[14rem_20rem_minmax(0,1fr)]">
+        <ThemeList
+          themes={customThemes()}
+          currentTheme={currentTheme()}
+          onThemeSelect={loadTheme}
+          onThemeRemove={removeTheme}
+          onCreateNewTheme={createNewTheme}
+          onClearAllThemes={clearAllThemes}
+        />
         <ThemeEditor
           theme={currentTheme()}
+          onThemeNameChange={updateThemeName}
           onColorClick={openColorPicker}
           onThemePropertyUpdate={updateThemePropertyValue}
+          onGlassThemeUpdate={updateGlassThemeValues}
           onRandomizeTheme={randomizeTheme}
           onExportCSS={exportCSS}
           dockActiveItem={dockActiveItem()}
+          applyToWholeSite={applyToWholeSite()}
+          rememberTheme={rememberTheme()}
+          onApplyToWholeSiteChange={changeApplyToWholeSite}
+          onRememberThemeChange={changeRememberTheme}
+          status={actionStatus.message()}
         />
 
         <div class="overflow-x-hidden">
diff --git a/src/pages/docs/Layouts.tsx b/src/pages/docs/Layouts.tsx
index 9b1a6af..9593bc7 100644
--- a/src/pages/docs/Layouts.tsx
+++ b/src/pages/docs/Layouts.tsx
@@ -3,8 +3,10 @@ import { ContentContainer } from "../../components/content/ContentContainer";
 import { Callout } from "../../components/content/Callout";
 import { CodeBlock } from "../../components/showcase/CodeBlock";
 import { ROUTES } from "../../config/routes";
+import { ActionStatus, createActionStatus } from "../../components/showcase/ActionStatus";
 
 export default function Layouts() {
+  const actions = createActionStatus("Choose how to continue the Layouts example.");
   return (
     <ContentContainer maxWidth="2xl" prose={false}>
       <Flex id="layouts-documentation" direction="col" gap="xl">
@@ -99,9 +101,10 @@ export function Actions() {
 }`}
           />
           <Flex gap="md" align="center" wrap="wrap">
-            <Button flavor="primary" size="lg">Continue</Button>
-            <Button variant="outline" size="lg">Cancel</Button>
+            <Button id="layouts-example-continue" flavor="primary" size="lg" onClick={actions.handler("Layouts example continued")}>Continue</Button>
+            <Button id="layouts-example-cancel" variant="outline" size="lg" onClick={actions.handler("Layouts example cancelled")}>Cancel</Button>
           </Flex>
+          <ActionStatus message={actions.message()} />
         </section>
 
         <Callout type="warning" title="Component names are case-sensitive">
@@ -131,9 +134,9 @@ export const SettingsPanel = () => <SaveActions />;`}
         </section>
 
         <Flex gap="md" wrap="wrap">
-          <Button href={ROUTES.DOCS_INSTALLATION} flavor="primary">Installation</Button>
-          <Button href={ROUTES.DOCS_USAGE} variant="outline">Usage cheatsheet</Button>
-          <Button href={ROUTES.SHOWCASES} variant="outline">Component showcases</Button>
+          <Button id="layouts-installation" href={ROUTES.DOCS_INSTALLATION} flavor="primary">Installation</Button>
+          <Button id="layouts-usage" href={ROUTES.DOCS_USAGE} variant="outline">Usage cheatsheet</Button>
+          <Button id="layouts-showcases" href={ROUTES.SHOWCASES} variant="outline">Component showcases</Button>
         </Flex>
       </Flex>
     </ContentContainer>
diff --git a/src/routes.ts b/src/routes.ts
index 121e8be..1d44485 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,4 +1,5 @@
 import type { Component } from "solid-js";
+import { componentFamilies, type ComponentFamilyId } from "@pathscale/ui";
 import { ROUTES } from "./config/routes";
 import Home from "./pages/Home";
 import Showcases from "./pages/Showcases";
@@ -18,7 +19,7 @@ import CardShowcase from "./components/CardShowcase";
 import ChatBubbleShowcase from "./components/ChatBubbleShowcase";
 import CheckboxShowcase from "./components/CheckboxShowcase";
 import ColorPickerShowcase from "./components/ColorPickerShowcase";
-import CoverageShowcase from "./components/CoverageShowcase";
+import CoverageShowcase, { coverageFamilyIds } from "./components/CoverageShowcase";
 import DataGridShowcase from "./components/DataGridShowcase";
 import CollapsibleShowcase from "./components/CollapsibleShowcase";
 import DrawerShowcase from "./components/DrawerShowcase";
@@ -68,6 +69,60 @@ export interface RouteConfig {
   description: string;
 }
 
+const dedicatedFamiliesByRoute = {
+  Accordion: ["accordion"],
+  Alert: ["alert"],
+  Avatar: ["avatar"],
+  Badge: ["badge"],
+  Breadcrumb: ["breadcrumb"],
+  Button: ["button"],
+  Calendar: ["calendar"],
+  Card: ["card"],
+  "Chat Bubble": ["chat-bubble"],
+  Checkbox: ["checkbox"],
+  "Color Picker": ["color-picker"],
+  Collapsible: ["collapsible"],
+  Drawer: ["drawer"],
+  Dropdown: ["dropdown"],
+  Empty: ["empty"],
+  Fieldset: ["fieldset"],
+  "File Input": ["input"],
+  Flex: ["flex"],
+  Dock: ["dock"],
+  Footer: ["footer"],
+  Form: ["form"],
+  "Fieldset Actions": ["fieldset"],
+  "Glow Card": ["glow-card"],
+  Grid: ["grid"],
+  Icon: ["icon"],
+  Input: ["input"],
+  Join: ["join"],
+  Kbd: ["kbd"],
+  Link: ["link"],
+  Menu: ["menu"],
+  Dialog: ["dialog"],
+  Navbar: ["navbar"],
+  "Noise Background": ["noise-background"],
+  Pagination: ["pagination"],
+  Progress: ["progress"],
+  "Radial Progress": ["radial-progress"],
+  Radio: ["radio"],
+  "Radio Group": ["radio-group"],
+  Select: ["select"],
+  Separator: ["separator"],
+  Skeleton: ["skeleton"],
+  Slider: ["slider"],
+  Spinner: ["spinner"],
+  "Data Grid": ["data-grid"],
+  Table: ["table"],
+  Tabs: ["tabs"],
+  Textarea: ["textarea"],
+  Toast: ["toast"],
+  Switch: ["switch"],
+  Tooltip: ["tooltip"],
+  "Video Preview": ["video-preview"],
+} as const satisfies Record<string, readonly ComponentFamilyId[]>;
+
 const componentRoutes = ([
   ["Accordion", ROUTES.ACCORDION, AccordionShowcase, "Expandable content sections."],
   ["Alert", ROUTES.ALERT, AlertShowcase, "Important status and feedback messages."],
@@ -126,6 +181,21 @@ const componentRoutes = ([
   ([name, path, component, description]): RouteConfig => ({ name, path, component, description }),
 );
 
+const demonstratedFamilies = new Set<ComponentFamilyId>(coverageFamilyIds);
+for (const ids of Object.values(dedicatedFamiliesByRoute)) {
+  for (const id of ids) demonstratedFamilies.add(id);
+}
+const missingFamilies = componentFamilies.filter(
+  (family) => !demonstratedFamilies.has(family.id),
+);
+if (missingFamilies.length > 0) {
+  throw new Error(
+    `js.software has no showcase for: ${missingFamilies
+      .map((family) => `${family.id} (${family.name})`)
+      .join(", ")}`,
+  );
+}
+
 export const routes: RouteConfig[] = [
   { name: "Home", path: ROUTES.HOME, component: Home, description: "PathScale UI documentation." },
   { name: "Theming", path: ROUTES.THEMING, component: Theming, description: "Theme and glass token playground." },
diff --git a/tests/ps-qa/checks/actions.ron b/tests/ps-qa/checks/actions.ron
index f1a1aae..f2b6338 100644
--- a/tests/ps-qa/checks/actions.ron
+++ b/tests/ps-qa/checks/actions.ron
@@ -53,7 +53,7 @@
         open: None,
         hover: None,
         click: Some("Components"),
-        subject: "button:Actions",
+        subject: "#component-category-actions",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -63,7 +63,7 @@
         what: "picking a category lists the pages under it",
         open: None,
         hover: None,
-        click: Some("button:Actions"),
+        click: Some("#component-category-actions"),
         subject: "link:Button",
         expect: Paints,
         outcome_timeout_ms: 8000,
diff --git a/tests/ps-qa/checks/calendar.ron b/tests/ps-qa/checks/calendar.ron
index a46645c..9dcf671 100644
--- a/tests/ps-qa/checks/calendar.ron
+++ b/tests/ps-qa/checks/calendar.ron
@@ -165,8 +165,8 @@
         open: None,
         prepare: Some("link:Controlled Value"),
         hover: None,
-        click: Some("gridcell:Tuesday, June 24, 2025"),
-        subject: "gridcell:Tuesday, June 24, 2025",
+        click: Some("#controlled-calendar--2025-06-24"),
+        subject: "#controlled-calendar--2025-06-24",
         expect: SelectionChanges,
         outcome_timeout_ms: 8000,
     ),
@@ -185,8 +185,8 @@
         prepare: Some("link:Controlled Value"),
         hover: None,
         // The July grid runs Sunday 29 June to Saturday 9 August 2025.
-        click: Some("gridcell:Saturday, July 12, 2025"),
-        subject: "gridcell:Friday, August 1, 2025",
+        click: Some("#controlled-calendar--2025-07-12"),
+        subject: "#controlled-calendar--2025-08-01",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -206,7 +206,98 @@
         // accumulates months instead of replacing them -- but it is only
         // evidence at all once every check above it is green. Do not read a
         // pass here on its own.
-        subject: "gridcell:Sunday, June 1, 2025",
+        subject: "#controlled-calendar--2025-06-01",
         expect: Absent,
     ),
+
+    // Each calendar navigation button is addressed by a stable authored id.
+    (
+        id: "default-calendar-previous-calendar-month",
+        group: "calendar",
+        what: "default-calendar Previous month changes its own visible heading",
+        open: None,
+        hover: None,
+        click: Some("#default-calendar--previous-month"),
+        subject: "#default-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "default-calendar-next-calendar-month",
+        group: "calendar",
+        what: "default-calendar Next month changes its own visible heading back",
+        open: None,
+        hover: None,
+        click: Some("#default-calendar--next-month"),
+        subject: "#default-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "controlled-calendar-previous-calendar-month",
+        group: "calendar",
+        what: "controlled-calendar Previous month changes its own visible heading",
+        open: None,
+        hover: None,
+        click: Some("#controlled-calendar--previous-month"),
+        subject: "#controlled-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "controlled-calendar-next-calendar-month",
+        group: "calendar",
+        what: "controlled-calendar Next month changes its own visible heading back",
+        open: None,
+        hover: None,
+        click: Some("#controlled-calendar--next-month"),
+        subject: "#controlled-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "range-calendar-previous-calendar-month",
+        group: "calendar",
+        what: "range-calendar Previous month changes its own visible heading",
+        open: None,
+        hover: None,
+        click: Some("#range-calendar--previous-month"),
+        subject: "#range-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "range-calendar-next-calendar-month",
+        group: "calendar",
+        what: "range-calendar Next month changes its own visible heading back",
+        open: None,
+        hover: None,
+        click: Some("#range-calendar--next-month"),
+        subject: "#range-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "bounded-calendar-previous-calendar-month",
+        group: "calendar",
+        what: "the bounded calendar moves backward within its allowed range",
+        open: None,
+        hover: None,
+        click: Some("#bounded-calendar--previous-month"),
+        subject: "#bounded-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "bounded-calendar-next-calendar-month",
+        group: "calendar",
+        what: "the bounded calendar returns forward within its allowed range",
+        open: None,
+        hover: None,
+        click: Some("#bounded-calendar--next-month"),
+        subject: "#bounded-calendar--heading",
+        expect: NameChanges,
+        outcome_timeout_ms: 8000,
+    ),
+
 ]
diff --git a/tests/ps-qa/checks/coverage.ron b/tests/ps-qa/checks/coverage.ron
new file mode 100644
index 0000000..6e79d0d
--- /dev/null
+++ b/tests/ps-qa/checks/coverage.ron
@@ -0,0 +1,663 @@
+// The public package manifest, the route registry and this page are one
+// contract: every @pathscale/ui family has either a focused route or one of
+// these real consumer compositions. These outcomes cover the families added
+// to the lab as part of that contract; the focused-route groups cover the rest.
+[
+    (
+        id: "coverage-starts-from-a-closed-menu",
+        group: "coverage",
+        what: "the coverage run starts from a stable surface",
+        open: Some("Docs"), hover: None, click: None,
+        subject: "heading:Quick Start", expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-opens-the-component-menu",
+        group: "coverage",
+        what: "the public component navigation opens",
+        open: None, hover: None, click: Some("Components"),
+        subject: "#component-category-surfaces", expect: Paints,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-opens-the-surfaces-category",
+        group: "coverage",
+        what: "the coverage lab is listed in the component navigation",
+        open: None, hover: None, click: Some("#component-category-surfaces"),
+        subject: "link:Complete Coverage", expect: Paints,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-opens-the-complete-public-gallery",
+        group: "coverage",
+        what: "the full gallery builds from the local UI package candidate",
+        open: None, hover: None, click: Some("link:Complete Coverage"),
+        subject: "heading:Complete Coverage", expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-address-copies",
+        group: "coverage",
+        what: "Address calls its owner with the copied value",
+        open: None, hover: None, click: Some("button:Copy address"),
+        subject: "status:Copied 0x1234567890abcdef", expect: Present,
+    ),
+    (
+        id: "coverage-auth-email-accepts-input",
+        group: "coverage",
+        what: "the auth composition contains a real labelled email field",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Email"), text: Some("qa@example.com"),
+        subject: "textbox:Email", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-auth-submit-acts",
+        group: "coverage",
+        what: "AuthSubmitButton invokes the form owner",
+        open: None, hover: None, click: Some("button:Sign in"),
+        subject: "status:Sign in submitted", expect: Present,
+    ),
+    (
+        id: "coverage-auth-privacy-acts",
+        group: "coverage",
+        what: "an AuthFooterLinks button invokes its item callback",
+        open: None, hover: None, click: Some("button:Privacy"),
+        subject: "status:Privacy opened", expect: Present,
+        covers: ["button:Help"],
+    ),
+    (
+        id: "coverage-field-group-input-acts",
+        group: "coverage",
+        what: "FieldGroup and Label preserve a field's accessible input contract",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Grouped field"), text: Some("grouped value"),
+        subject: "textbox:Grouped field", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-composer-accepts-input",
+        group: "coverage",
+        what: "Composer retains a controlled draft",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Write a showcase message"), text: Some("Hello showcase"),
+        subject: "textbox:Write a showcase message", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-composer-sends",
+        group: "coverage",
+        what: "Composer sends the draft to its owner",
+        open: None, hover: None, click: Some("button:Send"),
+        subject: "status:Sent Hello showcase", expect: Present,
+    ),
+    (
+        id: "coverage-connection-settings-open",
+        group: "coverage",
+        what: "ConnectionSettings reveals its editable endpoint",
+        open: None, hover: None, click: Some("switch:Use custom backend"),
+        subject: "textbox:API URL", expect: Paints,
+        covers: ["button:Save connection", "button:Reset connection"],
+    ),
+    (
+        id: "coverage-standalone-swatch-acts",
+        group: "coverage",
+        what: "ColorSwatch reports the selected colour",
+        open: None, hover: None, click: Some("option:Indigo swatch"),
+        subject: "status:Selected #6366f1", expect: Present,
+    ),
+    (
+        id: "coverage-swatch-picker-selects",
+        group: "coverage",
+        what: "ColorSwatchPicker changes its controlled selection",
+        open: None, hover: None, click: Some("radio:Blue swatch"),
+        subject: "radio:Blue swatch", expect: SelectionChanges,
+        covers: ["radio:Red swatch"],
+    ),
+    (
+        id: "coverage-color-wheel-selects",
+        group: "coverage",
+        what: "the public ColorWheel reacts to a palette choice",
+        open: None, hover: None, click: Some("radio:Reset to neutral"),
+        subject: "radio:Reset to neutral", expect: SelectionChanges,
+        covers: ["radio:Theme color *"],
+    ),
+    (
+        id: "coverage-complex-wheel-adjusts",
+        group: "coverage",
+        what: "ComplexColorWheel changes an authored adjustment",
+        open: None, hover: None, click: Some("button:Strength 20"),
+        subject: "button:Strength 20", expect: SelectionChanges,
+        covers: ["button:Strength *"],
+    ),
+    (
+        id: "coverage-inline-edit-opens",
+        group: "coverage",
+        what: "InlineEdit exposes its editor on demand",
+        open: None, hover: None, click: Some("button:Edit showcase title"),
+        subject: "textbox:Edit showcase title", expect: Paints,
+    ),
+    (
+        id: "coverage-panel-toggle-acts",
+        group: "coverage",
+        what: "PanelToggle updates its action name and controlled panel",
+        open: None, hover: None, click: Some("button:Hide coverage panel"),
+        subject: "button:Show coverage panel", expect: Paints,
+    ),
+    (
+        id: "coverage-password-accepts-input",
+        group: "coverage",
+        what: "PasswordField controls the password and requirements",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage password"), text: Some("secret123"),
+        subject: "textbox:Coverage password", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-password-reveals",
+        group: "coverage",
+        what: "PasswordField exposes its visibility action",
+        open: None, hover: None, click: Some("button:Show password"),
+        subject: "button:Hide password", expect: Paints,
+    ),
+    (
+        id: "coverage-flex-grid-reveals-more",
+        group: "coverage",
+        what: "FlexGrid's explicit pagination builds the remaining row",
+        open: None, hover: None, click: Some("button:Show 1 more"),
+        subject: "text:Gamma", expect: Present,
+    ),
+    (
+        id: "coverage-loads-live-chat-panel",
+        group: "coverage",
+        what: "the large LiveChatPanel specimen loads without taking the gallery down",
+        open: None, hover: None, click: Some("button:Load LiveChatPanel"),
+        subject: "heading:Component support", expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-live-chat-accepts-message",
+        group: "coverage",
+        what: "LiveChatPanel accepts a message",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Message support..."), text: Some("Need help"),
+        subject: "textbox:Message support...", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-live-chat-sends-message",
+        group: "coverage",
+        what: "LiveChatPanel hands the message to its owner",
+        open: None, hover: None, click: Some("button:Send chat message"),
+        subject: "status:Sent Need help", expect: Present,
+    ),
+    (
+        id: "coverage-live-chat-closes",
+        group: "coverage",
+        what: "LiveChatPanel closes cleanly before the next overlay example",
+        open: None, hover: None, click: Some("button:Close chat"),
+        subject: "status:Chat closed", expect: Present,
+    ),
+    (
+        id: "coverage-returns-from-live-chat",
+        group: "coverage",
+        what: "the fullscreen specimen returns to the complete gallery",
+        open: None, hover: None, click: Some("button:Return to coverage"),
+        subject: "button:Load LiveChatPanel", expect: Paints,
+    ),
+    (
+        id: "coverage-loads-immersive-landing",
+        group: "coverage",
+        what: "ImmersiveLanding mounts its first real page",
+        open: None, hover: None, click: Some("button:Load ImmersiveLanding"),
+        subject: "heading:Introduction", expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-immersive-landing-navigates",
+        group: "coverage",
+        what: "ImmersiveLanding moves to its second page",
+        open: None, hover: None, click: Some("button:Go to page 2 of 2"),
+        subject: "heading:Details", expect: Present,
+        covers: ["button:Go to page 1 of 2", "button:Next page"],
+    ),
+    (
+        id: "coverage-returns-from-immersive-landing",
+        group: "coverage",
+        what: "the immersive specimen returns to the component gallery",
+        open: None, hover: None, click: Some("button:Return to coverage"),
+        subject: "button:Load ImmersiveLanding", expect: Paints,
+    ),
+    (
+        id: "coverage-loads-cookie-consent",
+        group: "coverage",
+        what: "CookieConsent mounts its real choice surface",
+        open: None, hover: None, click: Some("button:Load CookieConsent"),
+        subject: "button:Manage coverage cookies", expect: Paints,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-cookie-consent-manages",
+        group: "coverage",
+        what: "CookieConsent opens preference management",
+        open: None, hover: None, click: Some("button:Manage coverage cookies"),
+        subject: "heading:Manage coverage cookie preferences", expect: Present,
+        covers: ["button:Accept all coverage cookies", "button:Decline coverage cookies"],
+    ),
+    (
+        id: "coverage-cookie-consent-saves",
+        group: "coverage",
+        what: "CookieConsent saves and dismisses its managed choice",
+        open: None, hover: None, click: Some("button:Save coverage cookie preferences"),
+        subject: "status:Cookie consent custom", expect: Present,
+    ),
+    (
+        id: "coverage-returns-from-cookie-consent",
+        group: "coverage",
+        what: "the cookie specimen returns after saving",
+        open: None, hover: None, click: Some("button:Return to coverage"),
+        subject: "button:Load CookieConsent", expect: Paints,
+    ),
+    (
+        id: "coverage-loads-pwa-prompt",
+        group: "coverage",
+        what: "PWAInstallPrompt receives the browser install event",
+        open: None, hover: None, click: Some("button:Load PWAInstallPrompt"),
+        subject: "button:Install showcase", expect: Paints,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-pwa-prompt-dismisses",
+        group: "coverage",
+        what: "PWAInstallPrompt reports a later choice and closes",
+        open: None, hover: None, click: Some("button:Install later"),
+        subject: "status:Install dismissed", expect: Present,
+        covers: ["button:Install showcase", "button:Close install prompt"],
+    ),
+    (
+        id: "coverage-returns-from-pwa-prompt",
+        group: "coverage",
+        what: "the PWA specimen returns after dismissal",
+        open: None, hover: None, click: Some("button:Return to coverage"),
+        subject: "button:Load PWAInstallPrompt", expect: Paints,
+    ),
+    (
+        id: "coverage-loads-firefox-banner",
+        group: "coverage",
+        what: "FirefoxPWABanner mounts under a Firefox user agent",
+        open: None, hover: None, click: Some("button:Load FirefoxPWABanner"),
+        subject: "button:Install Firefox extension", expect: Paints,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "coverage-firefox-banner-dismisses",
+        group: "coverage",
+        what: "FirefoxPWABanner reports dismissal and closes",
+        open: None, hover: None, click: Some("button:Maybe later"),
+        subject: "status:Firefox prompt dismissed", expect: Present,
+        covers: ["button:Install Firefox extension", "button:Close Firefox prompt"],
+    ),
+    (
+        id: "coverage-returns-from-firefox-banner",
+        group: "coverage",
+        what: "the Firefox specimen returns after dismissal",
+        open: None, hover: None, click: Some("button:Return to coverage"),
+        subject: "button:Load FirefoxPWABanner", expect: Paints,
+    ),
+    (
+        id: "coverage-button-group-acts",
+        group: "coverage",
+        what: "ButtonGroup carries controlled button outcomes",
+        open: None, hover: None, click: Some("button:One"),
+        subject: "status:Selected One", expect: Present,
+        covers: ["button:Two"],
+    ),
+    (
+        id: "coverage-checkbox-group-acts",
+        group: "coverage",
+        what: "CheckboxGroup contains operable labelled choices",
+        open: None, hover: None, click: Some("checkbox:Second"),
+        subject: "checkbox:Second", expect: SelectionChanges,
+        covers: ["checkbox:First"],
+    ),
+    (
+        id: "coverage-close-button-acts",
+        group: "coverage",
+        what: "CloseButton invokes its owner",
+        open: None, hover: None, click: Some("button:Dismiss coverage notice"),
+        subject: "status:Dismissed", expect: Present,
+    ),
+    (
+        id: "coverage-collapsible-opens",
+        group: "coverage",
+        what: "Collapsible reveals its content",
+        open: None, hover: None, click: Some("button:More"),
+        subject: "text:Hidden until opened.", expect: Present,
+    ),
+    (
+        id: "coverage-accordion-opens",
+        group: "coverage",
+        what: "Accordion reveals its content",
+        open: None, hover: None, click: Some("button:First"),
+        subject: "text:One.", expect: Present,
+    ),
+    (
+        id: "coverage-grouped-input-accepts",
+        group: "coverage",
+        what: "the composed Input retains text before submission",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Grouped input"), text: Some("grouped"),
+        subject: "textbox:Grouped input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-grouped-input-submits",
+        group: "coverage",
+        what: "the composed input action reports its current value",
+        open: None, hover: None, click: Some("button:Go"),
+        subject: "status:Submitted grouped", expect: Present,
+    ),
+    (
+        id: "coverage-input-otp-accepts",
+        group: "coverage",
+        what: "InputOTP accepts a verification code in the public consumer",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage verification code"), text: Some("123456"),
+        subject: "textbox:Coverage verification code", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-popover-opens",
+        group: "coverage",
+        what: "Popover opens its portalled content",
+        open: None, hover: None, click: Some("button:Open"),
+        subject: "text:Content.", expect: Present,
+    ),
+    (
+        id: "coverage-size-picker-selects",
+        group: "coverage",
+        what: "SizePicker changes the selected preset",
+        open: None, hover: None, click: Some("radio:Size L"),
+        subject: "radio:Size L", expect: SelectionChanges,
+        covers: ["radio:Size XL"],
+    ),
+    (
+        id: "coverage-size-picker-restores-default",
+        group: "coverage",
+        what: "SizePicker restores the document scale before leaving the gallery",
+        open: None, hover: None, click: Some("radio:Size M"),
+        subject: "radio:Size M", expect: SelectionChanges,
+    ),
+    (
+        id: "coverage-combobox-opens",
+        group: "coverage",
+        what: "ComboBox opens its alternatives",
+        open: None, hover: None, click: Some("button:Toggle options"),
+        subject: "option:Beta", expect: Paints,
+    ),
+    (
+        id: "coverage-combobox-selects",
+        group: "coverage",
+        what: "ComboBox changes the selected option",
+        open: None, hover: None, click: Some("option:Beta"),
+        subject: "combobox:Coverage combo box", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-language-switcher-opens",
+        group: "coverage",
+        what: "LanguageSwitcher exposes its alternative locale",
+        open: None, hover: None, click: Some("button:Current language: English"),
+        subject: "menuitem:Espanol", expect: Paints,
+    ),
+    (
+        id: "coverage-language-switcher-selects",
+        group: "coverage",
+        what: "LanguageSwitcher changes the current locale",
+        open: None, hover: None, click: Some("menuitem:Espanol"),
+        subject: "status:Language selected es", expect: Present,
+    ),
+    (
+        id: "coverage-language-switcher-updates-trigger",
+        group: "coverage",
+        what: "LanguageSwitcher updates the visible current-language control",
+        open: None, hover: None, click: None,
+        subject: "button:Current language: Espanol", expect: Present,
+    ),
+    (
+        id: "coverage-loads-live-chat-bubble",
+        group: "coverage",
+        what: "the fixed LiveChatBubble is reachable in a viewport-sized consumer",
+        open: None, hover: None, click: Some("button:Load LiveChatBubble"),
+        subject: "button:Open chat", expect: Present,
+    ),
+    (
+        id: "coverage-live-chat-bubble-acts",
+        group: "coverage",
+        what: "LiveChatBubble invokes its open callback",
+        open: None, hover: None, click: Some("button:Open chat"),
+        subject: "status:Chat bubble opened", expect: Present,
+    ),
+    (
+        id: "coverage-leaves-live-chat-bubble-through-navigation",
+        group: "coverage",
+        what: "normal navigation unmounts the fullscreen specimen cleanly",
+        open: Some("Home"), hover: None, click: None,
+        subject: "heading:Build Exceptional UIs", expect: Present,
+    ),
+    (
+        id: "coverage-reopens-the-component-menu-after-fullscreen-navigation",
+        group: "coverage",
+        what: "the global component navigation still works after fullscreen teardown",
+        open: None, hover: None, click: Some("Components"),
+        subject: "#component-category-surfaces", expect: Paints,
+    ),
+    (
+        id: "coverage-reopens-the-surfaces-category-after-fullscreen-navigation",
+        group: "coverage",
+        what: "the coverage route remains reachable after fullscreen teardown",
+        open: None, hover: None, click: Some("#component-category-surfaces"),
+        subject: "link:Complete Coverage", expect: Paints,
+    ),
+    (
+        id: "coverage-reopens-after-fullscreen-navigation",
+        group: "coverage",
+        what: "restored document scrolling reaches the bottom of the coverage gallery",
+        open: None, hover: None, click: Some("link:Complete Coverage"),
+        subject: "button:Load LiveChatBubble", expect: Paints,
+    ),
+    (
+        id: "coverage-read_only_progress_updates",
+        group: "coverage",
+        what: "a caller can address and update a read-only component by its stable DOM identity",
+        open: Some("Complete Coverage"), hover: None,
+        click: Some("#coverage-progress-advance"),
+        subject: "#coverage-progress", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-auth-provider-link_acts",
+        group: "coverage",
+        what: "the authentication provider mark remains an operable link",
+        open: Some("Complete Coverage"), hover: None,
+        click: Some("link:Secure Auth by Honey"),
+        subject: "link:Secure Auth by Honey", expect: TargetPaints,
+    ),
+    (
+        id: "coverage-inline-editor_accepts_input",
+        group: "coverage",
+        what: "the editor revealed by InlineEdit retains entered text",
+        open: None,
+        prepare: Some("button:Edit showcase title"),
+        prepare_unless: Some("@inline-edit-field"),
+        hover: None, click: None,
+        type_into: Some("@inline-edit-field"), text: Some("Release title"),
+        subject: "@inline-edit-field", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-helper_input_accepts_text",
+        group: "coverage",
+        what: "the labelled helper input retains entered text",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage helper input"), text: Some("helper"),
+        subject: "textbox:Coverage helper input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-issues_input_accepts_text",
+        group: "coverage",
+        what: "an input displaying issues remains editable",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage input with issues"), text: Some("resolved"),
+        subject: "textbox:Coverage input with issues", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-invalid_input_accepts_text",
+        group: "coverage",
+        what: "an invalid input remains editable for correction",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage invalid input"), text: Some("corrected"),
+        subject: "textbox:Coverage invalid input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-number_input_accepts_value",
+        group: "coverage",
+        what: "the numeric input retains a valid numeric value",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage number input"), text: Some("42"),
+        subject: "textbox:Coverage number input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-search_input_accepts_text",
+        group: "coverage",
+        what: "the search input retains its query",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage search input"), text: Some("query"),
+        subject: "textbox:Coverage search input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-textarea_accepts_text",
+        group: "coverage",
+        what: "the textarea retains multiline-capable text input",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage textarea"), text: Some("Longer coverage note"),
+        subject: "textbox:Coverage textarea", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-text_input_accepts_text",
+        group: "coverage",
+        what: "the plain text input retains entered text",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage text input"), text: Some("plain text"),
+        subject: "textbox:Coverage text input", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-time_field_accepts_value",
+        group: "coverage",
+        what: "TimeField accepts and exposes a native time value",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage time"), text: Some("13:45"),
+        subject: "textbox:Coverage time", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-date_field_accepts_value",
+        group: "coverage",
+        what: "DateField accepts and exposes a native date value",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage date"), text: Some("2026-09-12"),
+        subject: "textbox:Coverage date", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-color_field_accepts_value",
+        group: "coverage",
+        what: "the composed ColorPicker field updates its controlled colour",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Coverage color value"), text: Some("#ff0000"),
+        subject: "textbox:Coverage color value", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-composed_color_area_responds_to_pointer",
+        group: "coverage",
+        what: "the composed ColorPicker area retains a two-dimensional pointer change",
+        open: None, hover: None, click: None,
+        pointer_drag: Some((from: "slider:Coverage color area", dx: 40.0, dy: 30.0, steps: 4)),
+        subject: "slider:Coverage color area", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-composed_color_hue_responds_to_pointer",
+        group: "coverage",
+        what: "the composed ColorPicker hue retains a pointer change",
+        open: None, hover: None, click: None,
+        pointer_drag: Some((from: "slider:Coverage color hue", dx: 60.0, dy: 0.0, steps: 4)),
+        subject: "slider:Coverage color hue", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-standalone_color_area_responds_to_pointer",
+        group: "coverage",
+        what: "the standalone ColorArea retains a two-dimensional pointer change",
+        open: None, hover: None, click: None,
+        pointer_drag: Some((from: "slider:Standalone color area", dx: 40.0, dy: 30.0, steps: 4)),
+        subject: "slider:Standalone color area", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-standalone_color_field_accepts_value",
+        group: "coverage",
+        what: "the standalone ColorField updates its controlled colour",
+        open: None, hover: None, click: None,
+        type_into: Some("textbox:Standalone color value"), text: Some("#00ff00"),
+        subject: "textbox:Standalone color value", expect: ValueChanges,
+    ),
+    (
+        id: "coverage-date_picker_opens",
+        group: "coverage",
+        what: "DatePicker reveals its calendar from the trigger",
+        open: None, hover: None, click: Some("@date-picker-trigger"),
+        subject: "grid:", expect: PaintsMore,
+    ),
+    (
+        id: "coverage-date_picker_closes",
+        group: "coverage",
+        what: "DatePicker returns to the closed state from the same trigger",
+        open: None, hover: None, click: Some("@date-picker-trigger"),
+        subject: "grid:", expect: Count, expect_count: Some(1),
+    ),
+    (
+        id: "coverage-date_range_picker_opens",
+        group: "coverage",
+        what: "DateRangePicker reveals its calendar from the trigger",
+        open: None, hover: None, click: Some("@date-range-picker-trigger"),
+        subject: "grid:", expect: PaintsMore,
+    ),
+    (
+        id: "coverage-date_range_picker_closes",
+        group: "coverage",
+        what: "DateRangePicker returns to the closed state from the same trigger",
+        open: None, hover: None, click: Some("@date-range-picker-trigger"),
+        subject: "grid:", expect: Count, expect_count: Some(1),
+    ),
+    (
+        id: "coverage-range_calendar_moves_previous",
+        group: "coverage",
+        what: "the standalone RangeCalendar moves to the previous month",
+        open: None, hover: None, click: Some("#coverage-range-calendar--calendar--previous-month"),
+        subject: "#coverage-range-calendar--calendar--heading", expect: NameChanges,
+    ),
+    (
+        id: "coverage-range_calendar_moves_next",
+        group: "coverage",
+        what: "the standalone RangeCalendar moves back to the next month",
+        open: None, hover: None, click: Some("#coverage-range-calendar--calendar--next-month"),
+        subject: "#coverage-range-calendar--calendar--heading", expect: NameChanges,
+    ),
+    (
+        id: "coverage-first_toolbar_action_acts",
+        group: "coverage",
+        what: "the first Toolbar action reports its intended result",
+        open: None, hover: None, click: Some("button:First coverage tool"),
+        subject: "status:First coverage tool selected", expect: PaintsNamed,
+    ),
+    (
+        id: "coverage-second_toolbar_action_acts",
+        group: "coverage",
+        what: "the second Toolbar action reports its intended result",
+        open: None, hover: None, click: Some("button:Second coverage tool"),
+        subject: "status:Second coverage tool selected", expect: PaintsNamed,
+    ),
+    (
+        id: "coverage-theme_color_picker_opens",
+        group: "coverage",
+        what: "the ThemeColorPicker reveals its selectable palette",
+        open: None, hover: None, click: Some("button:Change coverage theme color"),
+        subject: "button:Black", expect: Paints,
+    ),
+]
diff --git a/tests/ps-qa/checks/docs.ron b/tests/ps-qa/checks/docs.ron
index 19c25a2..c9376f5 100644
--- a/tests/ps-qa/checks/docs.ron
+++ b/tests/ps-qa/checks/docs.ron
@@ -240,4 +240,36 @@
         subject: "link:Installation",
         expect: Paints,
     ),
+    (
+        id: "the-layouts-primary-example_acts",
+        group: "docs",
+        what: "the primary Layouts example reports its intended action",
+        open: Some("Layouts"),
+        hover: None,
+        click: Some("button:Continue"),
+        subject: "status:Layouts example continued",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the-layouts-installation-link_navigates",
+        group: "docs",
+        what: "the Layouts footer reaches the installation guide",
+        open: Some("Layouts"),
+        hover: None,
+        click: Some("link:Installation"),
+        subject: "heading:Installation",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-layouts-showcases-link_navigates",
+        group: "docs",
+        what: "the Layouts footer reaches the complete showcase index",
+        open: Some("Layouts"),
+        hover: None,
+        click: Some("link:Component showcases"),
+        subject: "heading:Component Showcases",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
 ]
diff --git a/tests/ps-qa/checks/feedback.ron b/tests/ps-qa/checks/feedback.ron
index 2427be2..3410666 100644
--- a/tests/ps-qa/checks/feedback.ron
+++ b/tests/ps-qa/checks/feedback.ron
@@ -28,7 +28,7 @@
         open: None,
         hover: None,
         click: Some("Components"),
-        subject: "button:Feedback",
+        subject: "#component-category-feedback",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -38,7 +38,7 @@
         what: "picking a category lists the pages under it",
         open: None,
         hover: None,
-        click: Some("button:Feedback"),
+        click: Some("#component-category-feedback"),
         subject: "link:Radial Progress",
         expect: Paints,
         outcome_timeout_ms: 8000,
diff --git a/tests/ps-qa/checks/input.ron b/tests/ps-qa/checks/input.ron
index 566f169..80f3ef1 100644
--- a/tests/ps-qa/checks/input.ron
+++ b/tests/ps-qa/checks/input.ron
@@ -4,11 +4,9 @@
 // The Input category: Checkbox, File Input, Form, Input, Radio Group, Select,
 // Slider, Textarea.
 //
-// Two of the ten pages in this category are reached but never opened, and the
-// reason is written into the first two checks. `/calendar` and `/color-picker`
-// both take the whole application down when they mount, and every group runs
-// against one shared browser, so opening either would end the run there and
-// report every later group as a failure of its own.
+// Calendar is reached but never opened. It takes the application down when it
+// mounts, and every group runs against one shared browser, so opening it would
+// end the run there and report every later group as a failure of its own.
 //
 // What takes them down:
 //
@@ -16,16 +14,8 @@
 //                    `Intl`, and the date formatting reaches for it during the
 //                    first render. Not the site's doing.
 //
-//   `/color-picker`  `useColorPickerContext must be used within a
-//                    ColorPickerContext.Provider`. The page renders
-//                    `<ColorWheelFlower />` on its own, and the prose beside it
-//                    says that is supported; it is not. The library's own
-//                    `ColorWheel` wraps the same component in the provider.
-//
-// Both escape every boundary, and Solid 2 answers an escaped error by halting
-// its reactive system for good, so the page paints once and then answers
-// nothing. What is asserted here is that a person can reach them, which is
-// true, and nothing about what they render, which is not.
+// The Color Picker provider failure was fixed in UI 3.2. Its page is now opened
+// and its two-dimensional, hue and alpha controls are driven below.
 [
     (
         id: "the-input-group-starts-from-a-page-that-clears-the-menu",
@@ -442,6 +432,78 @@
         subject: "slider:Volume",
         expect: Paints,
     ),
+    (
+        id: "the-slider-responds-to-the-keyboard",
+        group: "input",
+        what: "the public Slider example changes its controlled value with the keyboard",
+        open: None,
+        prepare: Some("slider:Volume"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        key: Some("End"),
+        key_on: Some("slider:Volume"),
+        subject: "slider:Volume",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-slider-responds-to-a-real-pointer-drag",
+        group: "input",
+        what: "dragging the public Slider example changes the value retained by its caller",
+        open: None,
+        prepare: Some("slider:Volume"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Volume", dx: 160.0, dy: 0.0, steps: 6)),
+        subject: "slider:Volume",
+        expect: ValueChanges,
+    ),
+    // Color Picker.
+    (
+        id: "the-colour-picker-page-opens",
+        group: "input",
+        what: "the menu reaches a live Color Picker showcase",
+        open: None,
+        hover: None,
+        click: Some("link:Color Picker"),
+        subject: "heading:Color Picker",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-colour-picker-area-responds-to-a-real-pointer",
+        group: "input",
+        what: "dragging the default colour area changes its controlled value",
+        open: None,
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Color area", dx: 40.0, dy: 30.0, steps: 4)),
+        subject: "slider:Color area",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-colour-picker-hue-responds-to-a-real-pointer",
+        group: "input",
+        what: "dragging the default hue rail changes its controlled value",
+        open: None,
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Hue", dx: 60.0, dy: 0.0, steps: 4)),
+        subject: "slider:Hue",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-colour-picker-alpha-responds-to-a-real-pointer",
+        group: "input",
+        what: "dragging the alpha rail changes the RGBA value retained by its caller",
+        open: None,
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Alpha", dx: 60.0, dy: 0.0, steps: 4)),
+        subject: "slider:Alpha",
+        expect: ValueChanges,
+    ),
     // Textarea.
     (
         id: "the-textarea-page-opens",
diff --git a/tests/ps-qa/checks/layout.ron b/tests/ps-qa/checks/layout.ron
index 0edc118..e7f222a 100644
--- a/tests/ps-qa/checks/layout.ron
+++ b/tests/ps-qa/checks/layout.ron
@@ -38,7 +38,7 @@
         open: None,
         hover: None,
         click: Some("Components"),
-        subject: "button:Layout",
+        subject: "#component-category-layout",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -48,7 +48,7 @@
         what: "picking a category lists the pages under it",
         open: None,
         hover: None,
-        click: Some("button:Layout"),
+        click: Some("#component-category-layout"),
         subject: "link:Collapsible",
         expect: Paints,
         outcome_timeout_ms: 8000,
diff --git a/tests/ps-qa/checks/navigation.ron b/tests/ps-qa/checks/navigation.ron
index 5bf9f69..af79769 100644
--- a/tests/ps-qa/checks/navigation.ron
+++ b/tests/ps-qa/checks/navigation.ron
@@ -27,7 +27,7 @@
         open: None,
         hover: None,
         click: Some("Components"),
-        subject: "button:Navigation",
+        subject: "#component-category-navigation",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -37,7 +37,7 @@
         what: "picking a category lists the pages under it",
         open: None,
         hover: None,
-        click: Some("button:Navigation"),
+        click: Some("#component-category-navigation"),
         subject: "link:Breadcrumb",
         expect: Paints,
         outcome_timeout_ms: 8000,
@@ -316,4 +316,224 @@
         subject: "tab:Vertical",
         expect: Paints,
     ),
+
+    (
+        id: "the-dropdown-outcomes-reset-navigation",
+        group: "navigation",
+        what: "the placement checks start from a closed global component menu",
+        open: Some("Docs"),
+        hover: None,
+        click: None,
+        subject: "heading:Quick Start",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-dropdown-outcomes-open-components",
+        group: "navigation",
+        what: "the global component menu opens for the dropdown checks",
+        open: None,
+        hover: None,
+        click: Some("Components"),
+        subject: "#component-category-actions",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the-dropdown-outcomes-select-actions",
+        group: "navigation",
+        what: "the Actions category exposes Dropdown",
+        open: None,
+        hover: None,
+        click: Some("#component-category-actions"),
+        subject: "link:Dropdown",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the-dropdown-outcomes-open-the-page",
+        group: "navigation",
+        what: "the dropdown placement checks run on the Dropdown showcase",
+        open: None,
+        hover: None,
+        click: Some("link:Dropdown"),
+        subject: "heading:Dropdown",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    // Placement menus and multilevel navigation get direct outcomes.
+    (
+        id: "dropdown-left-placement-opens",
+        group: "navigation",
+        what: "the left placement trigger opens a visible menu",
+        open: None,
+        hover: None,
+        click: Some("#left-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-left-placement-closes",
+        group: "navigation",
+        what: "Escape closes the left placement menu",
+        open: None,
+        prepare: Some("#left-placement--trigger"),
+        hover: None,
+        click: None,
+        key: Some("Escape"),
+        key_on: Some("#left-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-right-placement-opens",
+        group: "navigation",
+        what: "the right placement trigger opens a visible menu",
+        open: None,
+        hover: None,
+        click: Some("#right-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-right-placement-closes",
+        group: "navigation",
+        what: "Escape closes the right placement menu",
+        open: None,
+        prepare: Some("#right-placement--trigger"),
+        hover: None,
+        click: None,
+        key: Some("Escape"),
+        key_on: Some("#right-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-top-placement-opens",
+        group: "navigation",
+        what: "the top placement trigger opens a visible menu",
+        open: None,
+        hover: None,
+        click: Some("#top-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-top-placement-closes",
+        group: "navigation",
+        what: "Escape closes the top placement menu",
+        open: None,
+        prepare: Some("#top-placement--trigger"),
+        hover: None,
+        click: None,
+        key: Some("Escape"),
+        key_on: Some("#top-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-bottom-placement-opens",
+        group: "navigation",
+        what: "the bottom placement trigger opens a visible menu",
+        open: None,
+        hover: None,
+        click: Some("#bottom-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "dropdown-bottom-placement-closes",
+        group: "navigation",
+        what: "Escape closes the bottom placement menu",
+        open: None,
+        prepare: Some("#bottom-placement--trigger"),
+        hover: None,
+        click: None,
+        key: Some("Escape"),
+        key_on: Some("#bottom-placement--trigger"),
+        subject: "menuitem:Item 1",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-navbar-outcomes-reset-navigation",
+        group: "navigation",
+        what: "the multilevel checks start from a closed global component menu",
+        open: Some("Docs"),
+        hover: None,
+        click: None,
+        subject: "heading:Quick Start",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-navbar-outcomes-open-components",
+        group: "navigation",
+        what: "the global component menu opens for the navbar checks",
+        open: None,
+        hover: None,
+        click: Some("Components"),
+        subject: "#component-category-navigation",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the-navbar-outcomes-select-navigation",
+        group: "navigation",
+        what: "the Navigation category exposes Navbar",
+        open: None,
+        hover: None,
+        click: Some("#component-category-navigation"),
+        subject: "link:Navbar",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the-navbar-outcomes-open-the-page",
+        group: "navigation",
+        what: "the multilevel checks run on the Navbar showcase",
+        open: None,
+        hover: None,
+        click: Some("link:Navbar"),
+        subject: "heading:Navbar",
+        expect: Present,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "navbar-trading-terminal-selects",
+        group: "navigation",
+        what: "the Trading Terminal navigation choice reports its active state",
+        open: None,
+        hover: None,
+        click: Some("button:Trading Terminal"),
+        subject: "button:Trading Terminal",
+        expect: SelectionChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "navbar-performance-selects",
+        group: "navigation",
+        what: "the Performance navigation choice reports its active state",
+        open: None,
+        hover: None,
+        click: Some("button:Performance"),
+        subject: "button:Performance",
+        expect: SelectionChanges,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "navbar-funding-comparison-selects",
+        group: "navigation",
+        what: "the Funding Comparison navigation choice reports its active state",
+        open: None,
+        hover: None,
+        click: Some("button:Funding Comparison"),
+        subject: "button:Funding Comparison",
+        expect: SelectionChanges,
+        outcome_timeout_ms: 8000,
+    ),
+
 ]
diff --git a/tests/ps-qa/checks/showcase.ron b/tests/ps-qa/checks/showcase.ron
index 7ece5f7..afa2284 100644
--- a/tests/ps-qa/checks/showcase.ron
+++ b/tests/ps-qa/checks/showcase.ron
@@ -76,7 +76,7 @@
         open: Some("Home"),
         hover: None,
         click: None,
-        subject: "button:Navigation",
+        subject: "#component-category-navigation",
         expect: Paints,
     ),
     (
@@ -129,11 +129,33 @@
         what: "the header's own name is a link back to the landing page",
         open: Some("Showcases"),
         hover: None,
-        click: Some("Home"),
+        click: Some("link:UI"),
         subject: "heading:Build Exceptional UIs",
         expect: Present,
         outcome_timeout_ms: 3000,
     ),
+    (
+        id: "the-home-navigation-goes-home",
+        group: "showcase",
+        what: "the named Home navigation returns from documentation",
+        open: Some("Docs"),
+        hover: None,
+        click: Some("link:Home"),
+        subject: "heading:Build Exceptional UIs",
+        expect: Present,
+        outcome_timeout_ms: 3000,
+    ),
+    (
+        id: "the-theming-navigation-opens-the-editor",
+        group: "showcase",
+        what: "the visible Theming link reaches the working editor",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:Theming"),
+        subject: "heading:Theme Editor",
+        expect: Present,
+        outcome_timeout_ms: 3000,
+    ),
     // The landing page's own content. Everything above is about the header,
     // which is the same on every route; these are the four calls to action the
     // page exists to offer and the two card rows below them.
@@ -231,4 +253,64 @@
         expect: Present,
         outcome_timeout_ms: 8000,
     ),
+    (
+        id: "the-hero-components-action-reaches-the-showcase-index",
+        group: "showcase",
+        what: "the hero's component action reaches the complete showcase index",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:Explore Components"),
+        subject: "heading:Component Showcases",
+        expect: Present,
+    ),
+    (
+        id: "the-hero-layouts-action-reaches-the-compiler-guide",
+        group: "showcase",
+        what: "the hero's layouts action reaches its compiler explanation",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:How Layouts work"),
+        subject: "heading:The two compiler passes",
+        expect: Present,
+    ),
+    (
+        id: "the-lower-components-action-reaches-the-showcase-index",
+        group: "showcase",
+        what: "the lower component invitation reaches the showcase index",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:Explore all components"),
+        subject: "heading:Component Showcases",
+        expect: Present,
+    ),
+    (
+        id: "the-lower-start-action-reaches-installation",
+        group: "showcase",
+        what: "the lower start invitation reaches installation",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:Get started for free"),
+        subject: "heading:Required Dependencies",
+        expect: Present,
+    ),
+    (
+        id: "the-lower-documentation-action-reaches-docs",
+        group: "showcase",
+        what: "the lower documentation invitation reaches the docs index",
+        open: Some("Home"),
+        hover: None,
+        click: Some("link:View documentation"),
+        subject: "heading:Quick Start",
+        expect: Present,
+    ),
+    (
+        id: "the-github-link-keeps-the-showcase-open",
+        group: "showcase",
+        what: "the labelled external source link is reachable without replacing the current page",
+        open: Some("Home"),
+        hover: Some("#github-source-link"),
+        click: None,
+        subject: "#github-source-link",
+        expect: Paints,
+    ),
 ]
diff --git a/tests/ps-qa/checks/surfaces.ron b/tests/ps-qa/checks/surfaces.ron
index 5fcf92f..2a4aed1 100644
--- a/tests/ps-qa/checks/surfaces.ron
+++ b/tests/ps-qa/checks/surfaces.ron
@@ -32,7 +32,7 @@
         open: None,
         hover: None,
         click: Some("Components"),
-        subject: "button:Surfaces",
+        subject: "#component-category-surfaces",
         expect: Paints,
         outcome_timeout_ms: 8000,
     ),
@@ -42,7 +42,7 @@
         what: "picking a category lists the pages under it",
         open: None,
         hover: None,
-        click: Some("button:Surfaces"),
+        click: Some("#component-category-surfaces"),
         subject: "link:Glow Card",
         expect: Paints,
         outcome_timeout_ms: 8000,
@@ -201,12 +201,37 @@
     (
         id: "and-a-hue-slider-beside-it",
         group: "surfaces",
-        what: "the one-dimensional half of the same picker is there too",
+        what: "the one-dimensional half of the same picker responds to a real pointer",
         open: None,
         hover: None,
         click: None,
+        pointer_drag: Some((from: "slider:Hue", dx: 60.0, dy: 0.0, steps: 4)),
         subject: "slider:Hue",
-        expect: Paints,
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-coverage-slider-retains-a-pointer-change",
+        group: "surfaces",
+        what: "the coverage Slider is a controlled example rather than a frozen specimen",
+        open: None,
+        prepare: Some("slider:Volume"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Volume", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Volume",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-standalone-colour-slider-retains-a-pointer-change",
+        group: "surfaces",
+        what: "the standalone ColorSlider is separately named and interactive",
+        open: None,
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Standalone hue", dx: 60.0, dy: 0.0, steps: 4)),
+        subject: "slider:Standalone hue",
+        expect: ValueChanges,
     ),
     (
         id: "the-coverage-page-builds-a-combobox",
@@ -266,7 +291,7 @@
         open: None,
         hover: None,
         click: None,
-        subject: "button:Change theme color",
+        subject: "#coverage-theme-color-picker--trigger",
         expect: Enabled,
     ),
     (
@@ -295,11 +320,11 @@
     (
         id: "the-coverage-page-builds-a-field-with-helper-text",
         group: "surfaces",
-        what: "a field's description reaches its accessible name rather than sitting beside it",
+        what: "a caller-authored stable identity reaches the semantic field",
         open: None,
         hover: None,
         click: None,
-        subject: "textbox:Helper text.",
+        subject: "#coverage-helper-input",
         expect: Paints,
     ),
 ]
diff --git a/tests/ps-qa/checks/theming.ron b/tests/ps-qa/checks/theming.ron
index e4d9a49..45ea2d9 100644
--- a/tests/ps-qa/checks/theming.ron
+++ b/tests/ps-qa/checks/theming.ron
@@ -180,6 +180,97 @@
         subject: "slider:Border width",
         expect: ValueChanges,
     ),
+    (
+        id: "the-glass-blur-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the UI blur slider stays changed after a real pointer drag",
+        open: None,
+        prepare: Some("slider:Blur"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Blur", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Blur",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-glass-refraction-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the UI refraction slider stays changed after a real pointer drag",
+        open: None,
+        prepare: Some("slider:Refraction"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Refraction", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Refraction",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-glass-depth-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the UI depth slider stays changed after a real pointer drag",
+        open: None,
+        prepare: Some("slider:Depth"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Depth", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Depth",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-field-size-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the field size token changes from the Slider pointer contract",
+        open: None,
+        prepare: Some("slider:Fields base size"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Fields base size", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Fields base size",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-selector-size-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the selector size token changes from the Slider pointer contract",
+        open: None,
+        prepare: Some("slider:Selectors base size"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Selectors base size", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Selectors base size",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-border-slider-responds-to-a-real-pointer",
+        group: "theming",
+        what: "the border token changes from the Slider pointer contract",
+        open: None,
+        prepare: Some("slider:Border width"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Border width", dx: 100.0, dy: 0.0, steps: 4)),
+        subject: "slider:Border width",
+        expect: ValueChanges,
+    ),
+    (
+        id: "the-preview-price-slider-is-labelled-and-interactive",
+        group: "theming",
+        what: "the live component preview retains a price changed by a real pointer drag",
+        open: None,
+        prepare: Some("slider:Price range"),
+        prepare_key: Some("Home"),
+        hover: None,
+        click: None,
+        pointer_drag: Some((from: "slider:Price range", dx: 80.0, dy: 0.0, steps: 4)),
+        subject: "slider:Price range",
+        expect: ValueChanges,
+    ),
     (
         id: "the-depth-effect-switch-updates-the-token",
         group: "theming",
@@ -189,6 +280,7 @@
         click: Some("switch:Depth Effect"),
         subject: "switch:Depth Effect",
         expect: SelectionChanges,
+        covers: ["switch:Depth Effect*"],
     ),
     (
         id: "the-noise-effect-switch-updates-the-token",
@@ -199,6 +291,7 @@
         click: Some("switch:Noise Effect"),
         subject: "switch:Noise Effect",
         expect: SelectionChanges,
+        covers: ["switch:Noise Effect*"],
     ),
     (
         id: "the-whole-site-option-is-a-named-switch",
@@ -210,6 +303,16 @@
         subject: "switch:Apply to whole site",
         expect: SelectionChanges,
     ),
+    (
+        id: "and-the-whole-site-option-is-restored",
+        group: "theming",
+        what: "the editor leaves the showcase theme scoped to its preview",
+        open: None,
+        hover: None,
+        click: Some("switch:Apply to whole site"),
+        subject: "switch:Apply to whole site",
+        expect: SelectionChanges,
+    ),
     (
         id: "the-remember-option-is-a-named-switch",
         group: "theming",
@@ -220,6 +323,16 @@
         subject: "switch:Remember this theme",
         expect: SelectionChanges,
     ),
+    (
+        id: "and-the-remember-option-is-restored",
+        group: "theming",
+        what: "the suite does not persist its generated theme into later runs",
+        open: None,
+        hover: None,
+        click: Some("switch:Remember this theme"),
+        subject: "switch:Remember this theme",
+        expect: SelectionChanges,
+    ),
     (
         id: "the-default-theme-option-is-a-named-switch",
         group: "theming",
@@ -422,6 +535,7 @@
         hover: None,
         click: None,
         subject: "Generated theme CSS",
+        reveal_before_capture: Some("textbox:Generated theme CSS"),
         expect: InteriorInk,
         outcome_timeout_ms: 8000,
     ),
@@ -436,4 +550,1393 @@
         expect: Vanishes,
         outcome_timeout_ms: 8000,
     ),
+
+    // Restored workflows and complete editor-control coverage.
+    (
+        id: "the-theme-library-starts-with-the-current-theme",
+        group: "theming",
+        what: "the editor exposes the current named theme as a selectable UI control",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "button:Theme 1",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "a-new-theme-is-added",
+        group: "theming",
+        what: "Add creates and selects a second editable theme",
+        open: None,
+        hover: None,
+        click: Some("button:Add new theme"),
+        subject: "status:Theme added: Theme 2",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-second-theme-is-reachable",
+        group: "theming",
+        what: "the added theme appears as a selected named control",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "button:Theme 2",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "a-saved-theme-can-be-selected",
+        group: "theming",
+        what: "selecting an earlier theme loads it into the editor",
+        open: None,
+        hover: None,
+        click: Some("button:Theme 1"),
+        subject: "status:Theme selected: Theme 1",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "a-theme-can-be-renamed",
+        group: "theming",
+        what: "typing a new name updates the selected saved theme",
+        open: None,
+        hover: None,
+        click: None,
+        type_into: Some("textbox:Theme name"),
+        text: Some("Ocean"),
+        subject: "status:Theme renamed: Ocean",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the-renamed-theme-remains-selectable",
+        group: "theming",
+        what: "the saved-theme control carries the edited name",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "button:Ocean",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "a-theme-can-be-deleted",
+        group: "theming",
+        what: "Delete removes the selected theme and loads a remaining one",
+        open: None,
+        hover: None,
+        click: Some("button:Delete theme Ocean"),
+        subject: "status:Theme deleted: Ocean",
+        expect: PaintsNamed,
+        covers: ["button:Delete theme *"],
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "another-theme-can-be-added-before-clearing",
+        group: "theming",
+        what: "the library can grow again after a deletion",
+        open: None,
+        hover: None,
+        click: Some("button:Add new theme"),
+        subject: "status:Theme added: Theme 1",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "saved-themes-can-be-cleared",
+        group: "theming",
+        what: "Clear saved themes empties the saved library while retaining a working editor theme",
+        open: None,
+        hover: None,
+        click: Some("button:Clear saved themes"),
+        subject: "status:Saved themes cleared",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "clearing-removes-the-saved-theme-controls",
+        group: "theming",
+        what: "the saved theme controls are absent after the library is cleared",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "button:Theme 2",
+        expect: Absent,
+    ),
+    (
+        id: "the_base_100_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-base-100 control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-base-100"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_100_picker_closes",
+        group: "theming",
+        what: "the --color-base-100 picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_200_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-base-200 control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-base-200"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_200_picker_closes",
+        group: "theming",
+        what: "the --color-base-200 picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_300_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-base-300 control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-base-300"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_300_picker_closes",
+        group: "theming",
+        what: "the --color-base-300 picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-base-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-base-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_base_content_picker_closes",
+        group: "theming",
+        what: "the --color-base-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_primary_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-primary control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-primary"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "selecting_a_material_colour_updates_the_theme",
+        group: "theming",
+        what: "a picker choice writes the selected theme colour",
+        open: None,
+        hover: None,
+        click: Some("button:red-500"),
+        subject: "status:Color updated: --color-primary",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_primary_picker_closes",
+        group: "theming",
+        what: "the --color-primary picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_primary_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-primary-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-primary-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_primary_content_picker_closes",
+        group: "theming",
+        what: "the --color-primary-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_secondary_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-secondary control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-secondary"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_secondary_picker_closes",
+        group: "theming",
+        what: "the --color-secondary picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_secondary_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-secondary-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-secondary-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_secondary_content_picker_closes",
+        group: "theming",
+        what: "the --color-secondary-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_accent_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-accent control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-accent"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_accent_picker_closes",
+        group: "theming",
+        what: "the --color-accent picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_accent_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-accent-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-accent-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_accent_content_picker_closes",
+        group: "theming",
+        what: "the --color-accent-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_neutral_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-neutral control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-neutral"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_neutral_picker_closes",
+        group: "theming",
+        what: "the --color-neutral picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_neutral_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-neutral-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-neutral-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_neutral_content_picker_closes",
+        group: "theming",
+        what: "the --color-neutral-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_info_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-info control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-info"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_info_picker_closes",
+        group: "theming",
+        what: "the --color-info picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_info_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-info-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-info-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_info_content_picker_closes",
+        group: "theming",
+        what: "the --color-info-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_success_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-success control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-success"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_success_picker_closes",
+        group: "theming",
+        what: "the --color-success picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_success_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-success-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-success-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_success_content_picker_closes",
+        group: "theming",
+        what: "the --color-success-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_warning_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-warning control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-warning"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_warning_picker_closes",
+        group: "theming",
+        what: "the --color-warning picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_warning_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-warning-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-warning-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_warning_content_picker_closes",
+        group: "theming",
+        what: "the --color-warning-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_error_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-error control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-error"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_error_picker_closes",
+        group: "theming",
+        what: "the --color-error picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_error_content_swatch_opens_its_picker",
+        group: "theming",
+        what: "the --color-error-content control opens the material colour picker",
+        open: None,
+        hover: None,
+        click: Some("button:--color-error-content"),
+        subject: "button:red-500",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_error_content_picker_closes",
+        group: "theming",
+        what: "the --color-error-content picker can be dismissed cleanly",
+        open: None,
+        hover: None,
+        click: Some("button:Done"),
+        subject: "button:red-500",
+        expect: Vanishes,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "boxes_square_can_be_selected",
+        group: "theming",
+        what: "boxes radius supports square",
+        open: None,
+        prepare: Some("radio:Boxes radius 4 pixels"),
+        hover: None,
+        click: Some("radio:Boxes radius square"),
+        subject: "radio:Boxes radius square",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "boxes_4_pixels_can_be_selected",
+        group: "theming",
+        what: "boxes radius supports 4 pixels",
+        open: None,
+        prepare: Some("radio:Boxes radius square"),
+        hover: None,
+        click: Some("radio:Boxes radius 4 pixels"),
+        subject: "radio:Boxes radius 4 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "boxes_8_pixels_can_be_selected",
+        group: "theming",
+        what: "boxes radius supports 8 pixels",
+        open: None,
+        prepare: Some("radio:Boxes radius square"),
+        hover: None,
+        click: Some("radio:Boxes radius 8 pixels"),
+        subject: "radio:Boxes radius 8 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "boxes_16_pixels_can_be_selected",
+        group: "theming",
+        what: "boxes radius supports 16 pixels",
+        open: None,
+        prepare: Some("radio:Boxes radius square"),
+        hover: None,
+        click: Some("radio:Boxes radius 16 pixels"),
+        subject: "radio:Boxes radius 16 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "boxes_32_pixels_can_be_selected",
+        group: "theming",
+        what: "boxes radius supports 32 pixels",
+        open: None,
+        prepare: Some("radio:Boxes radius square"),
+        hover: None,
+        click: Some("radio:Boxes radius 32 pixels"),
+        subject: "radio:Boxes radius 32 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "fields_square_can_be_selected",
+        group: "theming",
+        what: "fields radius supports square",
+        open: None,
+        prepare: Some("radio:Fields radius 4 pixels"),
+        hover: None,
+        click: Some("radio:Fields radius square"),
+        subject: "radio:Fields radius square",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "fields_4_pixels_can_be_selected",
+        group: "theming",
+        what: "fields radius supports 4 pixels",
+        open: None,
+        prepare: Some("radio:Fields radius square"),
+        hover: None,
+        click: Some("radio:Fields radius 4 pixels"),
+        subject: "radio:Fields radius 4 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "fields_8_pixels_can_be_selected",
+        group: "theming",
+        what: "fields radius supports 8 pixels",
+        open: None,
+        prepare: Some("radio:Fields radius square"),
+        hover: None,
+        click: Some("radio:Fields radius 8 pixels"),
+        subject: "radio:Fields radius 8 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "fields_16_pixels_can_be_selected",
+        group: "theming",
+        what: "fields radius supports 16 pixels",
+        open: None,
+        prepare: Some("radio:Fields radius square"),
+        hover: None,
+        click: Some("radio:Fields radius 16 pixels"),
+        subject: "radio:Fields radius 16 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "fields_32_pixels_can_be_selected",
+        group: "theming",
+        what: "fields radius supports 32 pixels",
+        open: None,
+        prepare: Some("radio:Fields radius square"),
+        hover: None,
+        click: Some("radio:Fields radius 32 pixels"),
+        subject: "radio:Fields radius 32 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "selectors_square_can_be_selected",
+        group: "theming",
+        what: "selectors radius supports square",
+        open: None,
+        prepare: Some("radio:Selectors radius 4 pixels"),
+        hover: None,
+        click: Some("radio:Selectors radius square"),
+        subject: "radio:Selectors radius square",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "selectors_4_pixels_can_be_selected",
+        group: "theming",
+        what: "selectors radius supports 4 pixels",
+        open: None,
+        prepare: Some("radio:Selectors radius square"),
+        hover: None,
+        click: Some("radio:Selectors radius 4 pixels"),
+        subject: "radio:Selectors radius 4 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "selectors_8_pixels_can_be_selected",
+        group: "theming",
+        what: "selectors radius supports 8 pixels",
+        open: None,
+        prepare: Some("radio:Selectors radius square"),
+        hover: None,
+        click: Some("radio:Selectors radius 8 pixels"),
+        subject: "radio:Selectors radius 8 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "selectors_16_pixels_can_be_selected",
+        group: "theming",
+        what: "selectors radius supports 16 pixels",
+        open: None,
+        prepare: Some("radio:Selectors radius square"),
+        hover: None,
+        click: Some("radio:Selectors radius 16 pixels"),
+        subject: "radio:Selectors radius 16 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "selectors_32_pixels_can_be_selected",
+        group: "theming",
+        what: "selectors radius supports 32 pixels",
+        open: None,
+        prepare: Some("radio:Selectors radius square"),
+        hover: None,
+        click: Some("radio:Selectors radius 32 pixels"),
+        subject: "radio:Selectors radius 32 pixels",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "glass_defaults_execute_their_reset_callback",
+        group: "theming",
+        what: "Reset runs the glass-token reset path",
+        open: None,
+        hover: None,
+        click: Some("button:Reset to Hype4 defaults"),
+        subject: "status:Glass settings updated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "whole_site_application_changes_the_document",
+        group: "theming",
+        what: "Apply to whole site changes the surrounding page theme",
+        open: None,
+        hover: None,
+        click: Some("switch:Apply to whole site"),
+        subject: "heading:Theme Editor",
+        expect: PixelsChange,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "whole_site_application_reports_completion",
+        group: "theming",
+        what: "the site-scope callback reports its product outcome",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "status:Theme applied to whole site",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "whole_site_application_can_be_removed",
+        group: "theming",
+        what: "turning site scope off restores preview-only styling",
+        open: None,
+        hover: None,
+        click: Some("switch:Apply to whole site"),
+        subject: "status:Theme scoped to preview",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "remembering_a_theme_writes_persistence",
+        group: "theming",
+        what: "Remember this theme executes the persistence path",
+        open: None,
+        hover: None,
+        click: Some("switch:Remember this theme"),
+        subject: "status:Theme will be remembered",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_remembered_theme_survives_route_teardown",
+        group: "theming",
+        what: "leaving the editor tears down the theming route while retaining storage",
+        open: Some("Home"),
+        hover: None,
+        click: None,
+        subject: "link:Start Building Today",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "the_remembered_theme_is_restored",
+        group: "theming",
+        what: "returning to the editor restores the persisted theme state",
+        open: Some("Theming"),
+        hover: None,
+        click: None,
+        subject: "status:Remembered theme restored",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "returning-to-the-editor-restores-the-page-top",
+        group: "theming",
+        what: "route navigation returns the editor to its heading rather than retaining a deep scroll position",
+        open: None,
+        hover: None,
+        click: None,
+        subject: "heading:Theme Editor",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "remembered_state_can_be_cleared",
+        group: "theming",
+        what: "turning Remember off clears the persisted editor state",
+        open: None,
+        hover: None,
+        click: Some("switch:Remember this theme"),
+        subject: "status:Theme will not be remembered",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_preview_variants_tab_is_named_and_operable",
+        group: "theming",
+        what: "the icon tab exposes a name and switches to variants",
+        open: None,
+        hover: None,
+        click: Some("tab:Component Variants"),
+        subject: "heading:Buttons",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_button_variant_button_acts",
+        group: "theming",
+        what: "the Button specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Button"),
+        subject: "status:Button variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_primary_variant_button_acts",
+        group: "theming",
+        what: "the Primary specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Primary"),
+        subject: "status:Primary variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_secondary_variant_button_acts",
+        group: "theming",
+        what: "the Secondary specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Secondary"),
+        subject: "status:Secondary variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_accent_variant_button_acts",
+        group: "theming",
+        what: "the Accent specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Accent"),
+        subject: "status:Accent variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_outline_variant_button_acts",
+        group: "theming",
+        what: "the Outline specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Outline"),
+        subject: "status:Outline variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_ghost_variant_button_acts",
+        group: "theming",
+        what: "the Ghost specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Ghost"),
+        subject: "status:Ghost variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_danger_variant_button_acts",
+        group: "theming",
+        what: "the Danger specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Danger"),
+        subject: "status:Danger variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_danger_soft_variant_button_acts",
+        group: "theming",
+        what: "the Danger Soft specimen reports its activation",
+        open: None,
+        hover: None,
+        click: Some("button:Danger Soft"),
+        subject: "status:Danger Soft variant activated",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_preview_palette_tab_is_named_and_operable",
+        group: "theming",
+        what: "the palette icon tab switches to the generated colours",
+        open: None,
+        hover: None,
+        click: Some("tab:Color Palette"),
+        subject: "heading:Color Palette",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "the_preview_demo_tab_is_named_and_operable",
+        group: "theming",
+        what: "the demo icon tab returns to interactive components",
+        open: None,
+        hover: None,
+        click: Some("tab:Components Demo"),
+        subject: "heading:Components Demo",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_more_acts",
+        group: "theming",
+        what: "the preview more control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:more"),
+        subject: "status:More filters requested",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_apply_acts",
+        group: "theming",
+        what: "the preview Apply control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Apply"),
+        subject: "status:Price range applied",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_click_acts",
+        group: "theming",
+        what: "the preview Click control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Click"),
+        subject: "status:Email verification requested",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_support_acts",
+        group: "theming",
+        what: "the preview Support control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Support"),
+        subject: "status:Support requested",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_choose_plan_acts",
+        group: "theming",
+        what: "the preview Choose Plan control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Choose Plan"),
+        subject: "status:Plan selected",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_notifications_acts",
+        group: "theming",
+        what: "the preview Notifications control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Notifications"),
+        subject: "status:Notifications opened",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_start_call_acts",
+        group: "theming",
+        what: "the preview Start call control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Start call"),
+        subject: "status:Call started",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_open_messages_acts",
+        group: "theming",
+        what: "the preview Open messages control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Open messages"),
+        subject: "status:Messages opened",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_conversation_settings_acts",
+        group: "theming",
+        what: "the preview Conversation settings control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Conversation settings"),
+        subject: "status:Conversation settings opened",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_previous_track_acts",
+        group: "theming",
+        what: "the preview Previous track control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Previous track"),
+        subject: "status:Previous track selected",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_play_track_acts",
+        group: "theming",
+        what: "the preview Play track control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Play track"),
+        subject: "status:Playback started",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_next_track_acts",
+        group: "theming",
+        what: "the preview Next track control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Next track"),
+        subject: "status:Next track selected",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_toggle_volume_acts",
+        group: "theming",
+        what: "the preview Toggle volume control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Toggle volume"),
+        subject: "status:Volume toggled",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_open_account_acts",
+        group: "theming",
+        what: "the preview Open account control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Open account"),
+        subject: "status:Account opened",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_button_1_acts",
+        group: "theming",
+        what: "the preview Button 1 control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Button 1"),
+        subject: "status:Button 1 activated",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_button_2_acts",
+        group: "theming",
+        what: "the preview Button 2 control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Button 2"),
+        subject: "status:Button 2 activated",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_button_3_acts",
+        group: "theming",
+        what: "the preview Button 3 control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Button 3"),
+        subject: "status:Button 3 activated",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_search_preview_acts",
+        group: "theming",
+        what: "the preview Search preview control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Search preview"),
+        subject: "status:Preview search submitted",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_submit_acts",
+        group: "theming",
+        what: "the preview Submit control reports its intended action",
+        open: None,
+        hover: None,
+        click: Some("button:Submit"),
+        subject: "status:Feedback submitted",
+        expect: PaintsNamed,
+        outcome_timeout_ms: 8000,
+    ),
+    (
+        id: "preview_calendar_day_1_selects",
+        group: "theming",
+        what: "calendar day 1 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:1"),
+        subject: "status:Calendar day 1 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_2_selects",
+        group: "theming",
+        what: "calendar day 2 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:2"),
+        subject: "status:Calendar day 2 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_3_selects",
+        group: "theming",
+        what: "calendar day 3 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:3"),
+        subject: "status:Calendar day 3 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_4_selects",
+        group: "theming",
+        what: "calendar day 4 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:4"),
+        subject: "status:Calendar day 4 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_5_selects",
+        group: "theming",
+        what: "calendar day 5 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:5"),
+        subject: "status:Calendar day 5 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_6_selects",
+        group: "theming",
+        what: "calendar day 6 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:6"),
+        subject: "status:Calendar day 6 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_calendar_day_7_selects",
+        group: "theming",
+        what: "calendar day 7 reports its selected outcome",
+        open: None,
+        hover: None,
+        click: Some("button:7"),
+        subject: "status:Calendar day 7 selected",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_filters_change",
+        group: "theming",
+        what: "the preview filter choices retain a user's selection",
+        open: None,
+        hover: None,
+        click: Some("checkbox:Hoodies"),
+        subject: "checkbox:Hoodies",
+        expect: SelectionChanges,
+        covers: ["checkbox:Bags", "checkbox:Shoes", "checkbox:Accessories"],
+    ),
+    (
+        id: "preview_event_search_accepts_input",
+        group: "theming",
+        what: "the event search field retains entered text",
+        open: None,
+        hover: None,
+        click: None,
+        type_into: Some("textbox:Search events..."),
+        text: Some("release review"),
+        subject: "textbox:Search events...",
+        expect: ValueChanges,
+    ),
+    (
+        id: "preview_all_day_filter_changes",
+        group: "theming",
+        what: "the all-day event filter retains its selected state",
+        open: None,
+        hover: None,
+        click: Some("switch:Show all day events"),
+        subject: "switch:Show all day events",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "preview_content_tabs_change",
+        group: "theming",
+        what: "the preview tab set changes its selected tab",
+        open: None,
+        prepare: Some("tab:Tab 1"),
+        hover: None,
+        click: Some("tab:Tab 2"),
+        subject: "tab:Tab 2",
+        expect: SelectionChanges,
+        covers: ["tab:Tab *"],
+    ),
+    (
+        id: "preview_minimum_price_accepts_input",
+        group: "theming",
+        what: "the preview's explicit price bounds retain entered values",
+        open: None,
+        hover: None,
+        click: None,
+        type_into: Some("textbox:Min"),
+        text: Some("10"),
+        subject: "textbox:Min",
+        expect: ValueChanges,
+        covers: ["textbox:Max"],
+    ),
+    (
+        id: "preview_billing_period_changes",
+        group: "theming",
+        what: "the billing preview changes between monthly and yearly",
+        open: None,
+        prepare: Some("tab:Monthly"),
+        hover: None,
+        click: Some("tab:Yearly"),
+        subject: "tab:Yearly",
+        expect: SelectionChanges,
+        covers: ["tab:Monthly"],
+    ),
+    (
+        id: "preview_theme_switch_changes",
+        group: "theming",
+        what: "the named preview theme switch retains its state",
+        open: None,
+        hover: None,
+        click: Some("switch:Theme switch"),
+        subject: "switch:Theme switch",
+        expect: SelectionChanges,
+    ),
+    (
+        id: "preview_menu_items_act",
+        group: "theming",
+        what: "the preview menu reports the selected destination",
+        open: None,
+        hover: None,
+        click: Some("menuitem:Database"),
+        subject: "status:Menu opened: database",
+        expect: PaintsNamed,
+        covers: ["menuitem:Database *", "menuitem:Products *", "menuitem:Messages *", "menuitem:Access Tokens", "menuitem:Users", "menuitem:Settings"],
+    ),
+    (
+        id: "preview_navigation_menu_opens",
+        group: "theming",
+        what: "the compact navigation trigger reveals its menu",
+        open: None,
+        hover: None,
+        click: Some("button:Open navigation menu"),
+        subject: "menuitem:Dashboard",
+        expect: Paints,
+    ),
+    (
+        id: "preview_navigation_dashboard_acts",
+        group: "theming",
+        what: "the Dashboard destination reports its intended action",
+        open: None,
+        prepare: Some("button:Open navigation menu"),
+        prepare_unless: Some("#preview-navigation-dashboard"),
+        hover: None,
+        click: Some("#preview-navigation-dashboard"),
+        subject: "status:Dashboard opened",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_navigation_settings_acts",
+        group: "theming",
+        what: "the Settings destination reports its intended action",
+        open: None,
+        prepare: Some("button:Open navigation menu"),
+        prepare_unless: Some("#preview-navigation-settings"),
+        hover: None,
+        click: Some("#preview-navigation-settings"),
+        subject: "status:Navigation settings opened",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_navigation_logout_acts",
+        group: "theming",
+        what: "the Logout destination reports the requested session action",
+        open: None,
+        prepare: Some("button:Open navigation menu"),
+        prepare_unless: Some("#preview-navigation-logout"),
+        hover: None,
+        click: Some("#preview-navigation-logout"),
+        subject: "status:Preview logout requested",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_search_accepts_input",
+        group: "theming",
+        what: "the joined preview search retains entered text",
+        open: None,
+        hover: None,
+        click: None,
+        type_into: Some("textbox:Search..."),
+        text: Some("components"),
+        subject: "textbox:Search...",
+        expect: ValueChanges,
+    ),
+    (
+        id: "preview_recommendation_changes",
+        group: "theming",
+        what: "the recommendation choice changes between its two explicit options",
+        open: None,
+        hover: None,
+        click: Some("radio:Would not recommend"),
+        subject: "radio:Would not recommend",
+        expect: SelectionChanges,
+        covers: ["radio:Would recommend"],
+    ),
+    (
+        id: "preview_products_breadcrumb_acts",
+        group: "theming",
+        what: "the Products breadcrumb reports the intended destination",
+        open: None,
+        hover: None,
+        click: Some("link:Products"),
+        subject: "status:Products opened",
+        expect: PaintsNamed,
+    ),
+    (
+        id: "preview_pagination_changes_page",
+        group: "theming",
+        what: "the pagination preview selects another page and reports it",
+        open: None,
+        hover: None,
+        click: Some("button:Go to page 3"),
+        subject: "status:Page 3 selected",
+        expect: PaintsNamed,
+        covers: ["button:Go to previous page", "button:Go to next page", "button:Go to page *"],
+    ),
 ]
diff --git a/tests/ps-qa/ps-qa.ron b/tests/ps-qa/ps-qa.ron
index 36d726b..3373246 100644
--- a/tests/ps-qa/ps-qa.ron
+++ b/tests/ps-qa/ps-qa.ron
@@ -7,7 +7,9 @@ AppProfile(
         (name: "docs", opener: "Docs", marker: Some("Browse Components")),
         (name: "layouts", opener: "Layouts", marker: Some("#layouts-documentation")),
         (name: "showcases", opener: "Showcases", marker: Some("Theme Customization")),
+        (name: "coverage", opener: "Complete Coverage", marker: Some("Load LiveChatPanel")),
     ],
-    navigation_controls: ["Home", "Theming", "Docs", "Layouts", "Showcases", "Components"],
+    navigation_controls: ["Home", "Theming", "Docs", "Layouts", "Showcases", "Components", "Complete Coverage"],
+    inert_controls: ["Bottom with arrow"],
     home_opener: Some("Home"),
 )