fix: address Storybook review findings

src/lib/ui/stories/FocusPreview.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount, tick, type Snippet } from "svelte";
+
+  let {
+    children,
+    selector = "button, a[href]",
+  }: {
+    children?: Snippet;
+    selector?: string;
+  } = $props();
+
+  let root: HTMLDivElement;
+
+  onMount(async () => {
+    await tick();
+    root.querySelector<HTMLElement>(selector)?.focus();
+  });
+</script>
+
+<div class="focus-preview" bind:this={root}>
+  {@render children?.()}
+</div>
+
+<style>
+  .focus-preview {
+    display: inline-grid;
+    padding: var(--ui-space-2);
+  }
+
+  .focus-preview :global(:is(a, button)) {
+    box-shadow: var(--ui-focus-ring);
+  }
+</style>

src/lib/ui/stories/IconButton.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import IconButton from "../components/IconButton.svelte";
+  import FocusPreview from "./FocusPreview.svelte";
 
   const { Story } = defineMeta({
     title: "Base UI/IconButton",
@@ -14,4 +15,8 @@
 <Story name="Inspect" args={{ icon: "mdi:magnify-scan", label: "Inspect" }} />
 <Story name="Disabled" args={{ icon: "mdi:refresh", label: "Disabled", disabled: true }} />
 <Story name="Active" args={{ icon: "mdi:refresh", label: "Active", active: true }} />
-<Story name="Focus Visible" args={{ icon: "mdi:keyboard", label: "Focus visible", active: true }} />
+<Story name="Focus Visible" asChild>
+  <FocusPreview>
+    <IconButton icon="mdi:keyboard" label="Focus visible" />
+  </FocusPreview>
+</Story>

src/lib/ui/stories/ServiceRow.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ServiceRow from "../components/ServiceRow.svelte";
+  import FocusPreview from "./FocusPreview.svelte";
   import { serviceRows } from "./story-data";
 
   const { Story } = defineMeta({
@@ -16,4 +17,8 @@
 <Story name="Stale" args={{ service: serviceRows.stale }} />
 <Story name="No Link" args={{ service: serviceRows.noLink }} />
 <Story name="Long Title Description" args={{ service: serviceRows.long }} />
-<Story name="Keyboard Focus" args={{ service: serviceRows.normal }} />
+<Story name="Keyboard Focus" asChild>
+  <FocusPreview selector="a">
+    <ServiceRow service={serviceRows.normal} />
+  </FocusPreview>
+</Story>