@classic-homes/theme-svelte 1.21.0 → 1.22.1

package/dist/lib/components/Alert.svelte

@@ -7,17 +7,15 @@
     base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
     variants: {
       variant: {
-        default:
-          'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100',
+        // Status tokens follow the theme into dark mode. Text stays foreground:
+        // the status hues are tuned for fills and icons, not body-text contrast.
+        default: 'bg-muted/50 border-border text-foreground',
         destructive:
-          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
-        error:
-          'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 [&>svg]:text-red-700 dark:[&>svg]:text-red-400',
-        success:
-          'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 [&>svg]:text-green-700 dark:[&>svg]:text-green-400',
-        warning:
-          'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-700 dark:[&>svg]:text-yellow-400',
-        info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-400 [&>svg]:text-blue-700 dark:[&>svg]:text-blue-400',
+          'bg-destructive/10 border-destructive/40 text-foreground [&>svg]:text-destructive',
+        error: 'bg-destructive/10 border-destructive/40 text-foreground [&>svg]:text-destructive',
+        success: 'bg-success/10 border-success/40 text-foreground [&>svg]:text-success',
+        warning: 'bg-warning/10 border-warning/40 text-foreground [&>svg]:text-warning',
+        info: 'bg-info/10 border-info/40 text-foreground [&>svg]:text-info',
       },
     },
     defaultVariants: {

package/dist/lib/components/DataPanel.svelte

@@ -169,6 +169,10 @@
     class: className,
   }: Props = $props();
 
+  // Unique per instance: two panels on a page must not share a title id.
+  const uid = $props.id();
+  const titleId = `data-panel-${uid}-title`;
+
   // Resolve constraints and card config (use $derived to react to prop changes)
   const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
   const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
@@ -440,6 +444,15 @@
     handleExpandedChange(!isExpanded);
   }
 
+  // Keyboard activation for the card's role="button" header areas. Space must
+  // not also scroll the page, and a held key must not toggle repeatedly.
+  function handleCardToggleKeyDown(e: KeyboardEvent) {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    if (e.repeat) return;
+    handleToggleExpand();
+  }
+
   // Header collapse button. A detached full panel collapses by re-pinning to its
   // last edge (edge always holds the previous pin, or the default) and showing the
   // collapsed tab. Pinned/card just toggle expanded.
@@ -1357,7 +1370,8 @@
         .join(';')}
       role={mode === 'detached' || variant === 'card' ? 'dialog' : 'complementary'}
       aria-modal={isDialog ? 'true' : undefined}
-      aria-labelledby={title ? 'data-panel-title' : undefined}
+      aria-labelledby={title && !header ? titleId : undefined}
+      aria-label={title && header ? title : undefined}
       aria-expanded={variant === 'card' ? isExpanded : undefined}
       tabindex="-1"
       onpointerdown={variant === 'full' &&
@@ -1388,7 +1402,7 @@
         {#if variant === 'card' && resolvedCardConfig.showDragHandle}
           <div
             class="absolute top-1.5 left-1/2 -translate-x-1/2 w-10 h-1.5 rounded-full bg-muted-foreground/30 cursor-pointer touch-none"
-            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            onkeydown={handleCardToggleKeyDown}
             onpointerdown={handleCardHeaderPointerDown}
             role="button"
             tabindex="0"
@@ -1399,7 +1413,7 @@
         {#if variant === 'card'}
           <div
             class="flex-1 min-w-0"
-            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            onkeydown={handleCardToggleKeyDown}
             role="button"
             tabindex="0"
           >
@@ -1410,7 +1424,7 @@
                 <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
               {/if}
               {#if title}
-                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+                <h3 id={titleId} class="text-lg font-semibold truncate">{title}</h3>
               {/if}
             {/if}
           </div>
@@ -1423,7 +1437,7 @@
                 <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
               {/if}
               {#if title}
-                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+                <h3 id={titleId} class="text-lg font-semibold truncate">{title}</h3>
               {/if}
             {/if}
           </div>

package/dist/lib/components/HeaderSearch.svelte

@@ -134,14 +134,15 @@
     document.getElementById(optionId(selectedIndex))?.scrollIntoView?.({ block: 'nearest' });
   });
 
-  // Keyboard shortcut handler
+  // Keyboard shortcut handler. Not registered while disabled, so the browser's
+  // own Ctrl+K stays usable and no hidden open is queued for later.
   $effect(() => {
-    if (!enableShortcut || typeof window === 'undefined') return;
+    if (!enabled || !enableShortcut || typeof window === 'undefined') return;
 
     const handleKeydown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
         e.preventDefault();
-        open = true;
+        setOpen(true);
       }
     };
 
@@ -193,17 +194,24 @@
 
   function handleSelect(item: SearchResultItem) {
     onSelect?.(item);
-    open = false;
-    query = '';
+    setOpen(false);
   }
 
-  function handleOpenChange(isOpen: boolean) {
+  /**
+   * Every open/close goes through here. bits-ui only reports its own
+   * (Escape, outside click) changes, so the triggers, shortcut and selection
+   * must notify `onOpenChange` themselves.
+   */
+  function setOpen(isOpen: boolean) {
+    if (open === isOpen) return;
     open = isOpen;
-    onOpenChange?.(isOpen);
     if (!isOpen) {
       query = '';
       selectedIndex = 0;
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = null;
     }
+    onOpenChange?.(isOpen);
   }
 </script>
 
@@ -213,7 +221,7 @@
     <!-- Icon-only variant -->
     <button
       type="button"
-      onclick={() => (open = true)}
+      onclick={() => setOpen(true)}
       class={cn(
         'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8 w-8' : 'h-9 w-9',
@@ -235,7 +243,7 @@
     <!-- Default full search box variant -->
     <button
       type="button"
-      onclick={() => (open = true)}
+      onclick={() => setOpen(true)}
       class={cn(
         'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         size === 'sm' ? 'h-8' : 'h-9',
@@ -263,7 +271,7 @@
   {/if}
 
   <!-- Search Dialog -->
-  <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <DialogPrimitive.Root {open} onOpenChange={setOpen}>
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
         class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"

package/dist/lib/components/Skeleton.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 declare const Skeleton: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    variant?: "default" | "button" | "text" | "title" | "avatar" | "card" | undefined;
+    variant?: "text" | "default" | "button" | "title" | "avatar" | "card" | undefined;
     /** Animation style for the skeleton */
     animation?: "pulse" | "shimmer" | "none";
     class?: string;

package/dist/lib/components/layout/AppShell.svelte

@@ -64,7 +64,7 @@
   <!-- Skip Link for Accessibility -->
   <a
     href="#{skipToId}"
-    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-80 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
   >
     {skipToText}
   </a>

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -244,13 +244,22 @@
         return;
       }
 
-      // Focus search with / key (when not in input/textarea)
-      if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName || '')) {
-        e.preventDefault();
-        const searchInput = document.querySelector<HTMLInputElement>('[data-sidebar-search]');
-        if (searchInput) {
-          searchInput.focus();
+      // Focus search with / key - only when a sidebar search exists and the
+      // key isn't meant for something else (a text field, rich-text editor,
+      // a select, a modified shortcut, or a handler that already claimed it).
+      if (e.key === '/') {
+        if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+        const target = e.target as HTMLElement | null;
+        if (
+          target?.isContentEditable ||
+          ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '')
+        ) {
+          return;
         }
+        const searchInput = document.querySelector<HTMLInputElement>('[data-sidebar-search]');
+        if (!searchInput) return;
+        e.preventDefault();
+        searchInput.focus();
       }
     };
 

package/dist/lib/components/layout/Footer.svelte

@@ -52,9 +52,9 @@
   aria-label="Site footer"
   class={cn(
     // Base styles
-    isDark ? 'bg-gray-600 text-white' : 'bg-muted/30',
+    isDark ? 'bg-brand-grey-1 text-white' : 'bg-muted/30',
     // Border styles - strong accent border or standard
-    strongBorder ? 'border-t-[10px] border-gray-500' : 'border-t border-border',
+    strongBorder ? 'border-t-[10px] border-brand-grey-2' : 'border-t border-border',
     className
   )}
 >
@@ -119,7 +119,7 @@
     {/if}
 
     {#if children}
-      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-gray-500' : 'border-border')}>
+      <div class={cn('mt-8 border-t pt-8', isDark ? 'border-brand-grey-2' : 'border-border')}>
         {@render children()}
       </div>
     {/if}
@@ -127,15 +127,15 @@
     <div
       class={cn(
         'mt-8 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row',
-        isDark ? 'border-gray-500' : 'border-border'
+        isDark ? 'border-brand-grey-2' : 'border-border'
       )}
     >
       {#if showLogo}
         <LogoMain variant="horizontal" color={isDark ? 'light' : 'dark'} size="sm" />
       {/if}
 
-      <!-- gray-300, not gray-400: #9ca3af is 3.22:1 on the gray-600 footer -->
-      <p class={cn('text-center text-sm', isDark ? 'text-gray-300' : 'text-muted-foreground')}>
+      <!-- white/80 on brand grey 1 is ~6:1; a mid grey (gray-400) fell to 3.22:1 -->
+      <p class={cn('text-center text-sm', isDark ? 'text-white/80' : 'text-muted-foreground')}>
         {displayCopyright}
       </p>
     </div>

package/dist/lib/components/layout/FormPageLayout.svelte

@@ -73,10 +73,11 @@
         </aside>
       {/if}
 
-      <!-- Main Content -->
-      <main id="form-content" class={hasSidebar ? 'order-last lg:order-first' : ''}>
+      <!-- Main Content. A div, not <main>: this layout sits inside PublicLayout or
+           DashboardLayout, which already render the page's main landmark. -->
+      <div id="form-content" class={hasSidebar ? 'order-last lg:order-first' : ''}>
         {@render children()}
-      </main>
+      </div>
     </div>
 
     <!-- Help Text Footer -->

package/dist/lib/components/layout/Sidebar.svelte

@@ -273,29 +273,33 @@
     if (query === prevSearchQuery) return;
     prevSearchQuery = query;
 
-    if (query) {
-      // Force expand all sections during search
-      const allSectionIds = roleFilteredNavigation.map((section) => section.id);
-      sidebarStore.forceExpandSections(allSectionIds);
-
-      // Force expand items with matching children
-      const itemsToExpand: string[] = [];
-
-      const collectMatchingParents = (items: NavItem[]) => {
-        items.forEach((item) => {
-          if (item.children) {
-            if (hasMatchingDescendant(item, query)) {
-              itemsToExpand.push(item.id);
-            }
-            collectMatchingParents(item.children);
+    if (!query) {
+      // Search cleared: put back what the user had expanded before it.
+      sidebarStore.restoreSearchExpansion();
+      return;
+    }
+
+    // Force expand all sections during search
+    const allSectionIds = roleFilteredNavigation.map((section) => section.id);
+    sidebarStore.forceExpandSections(allSectionIds);
+
+    // Force expand items with matching children
+    const itemsToExpand: string[] = [];
+
+    const collectMatchingParents = (items: NavItem[]) => {
+      items.forEach((item) => {
+        if (item.children) {
+          if (hasMatchingDescendant(item, query)) {
+            itemsToExpand.push(item.id);
           }
-        });
-      };
+          collectMatchingParents(item.children);
+        }
+      });
+    };
 
-      roleFilteredNavigation.forEach((section) => collectMatchingParents(section.items));
-      if (itemsToExpand.length > 0) {
-        sidebarStore.forceExpandItems(itemsToExpand);
-      }
+    roleFilteredNavigation.forEach((section) => collectMatchingParents(section.items));
+    if (itemsToExpand.length > 0) {
+      sidebarStore.forceExpandItems(itemsToExpand);
     }
   });
 

package/dist/lib/components/media/Image.svelte.d.ts

@@ -25,7 +25,7 @@ declare const Image: import("svelte").Component<Omit<HTMLImgAttributes, "class"
      */
     ratio?: MediaAspectRatio | number;
     /** How the image fills its box */
-    fit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+    fit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
     /** Corner rounding */
     rounded?: "sm" | "md" | "lg" | "xl" | "none" | "full" | undefined;
     /**

package/dist/lib/components/media/Lightbox.svelte

@@ -89,6 +89,10 @@
   const zoom = useMediaZoom();
 
   const activeItem = $derived(items[index]);
+  // Zoom only applies to images. Gating the keys and the pan mode on this keeps
+  // '+' on a video or embed from leaving an invisible zoom that hijacks arrows.
+  const canZoom = $derived(zoomable && activeItem?.kind === 'image');
+  const panning = $derived(canZoom && zoom.zoomed);
   const hasMultiple = $derived(items.length > 1);
   const canGoPrevious = $derived(loop || index > 0);
   const canGoNext = $derived(loop || index < items.length - 1);
@@ -157,7 +161,7 @@
     switch (event.key) {
       case 'ArrowLeft':
         // While zoomed, arrows pan the image instead of changing items.
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(40, 0);
         } else if (hasMultiple) {
@@ -166,7 +170,7 @@
         }
         break;
       case 'ArrowRight':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(-40, 0);
         } else if (hasMultiple) {
@@ -175,13 +179,13 @@
         }
         break;
       case 'ArrowUp':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(0, 40);
         }
         break;
       case 'ArrowDown':
-        if (zoom.zoomed) {
+        if (panning) {
           event.preventDefault();
           zoom.panBy(0, -40);
         }
@@ -196,18 +200,18 @@
         break;
       case '+':
       case '=':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.zoomIn();
         break;
       case '-':
       case '_':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.zoomOut();
         break;
       case '0':
-        if (!zoomable) return;
+        if (!canZoom) return;
         event.preventDefault();
         zoom.reset();
         break;
@@ -215,7 +219,7 @@
   }
 
   function handleSwipeStart(event: PointerEvent) {
-    if (zoom.zoomed || !hasMultiple) return;
+    if (panning || !hasMultiple) return;
     swipeActive = true;
     swipeStartX = event.clientX;
     swipeStartY = event.clientY;
@@ -280,7 +284,7 @@
           {/if}
         </div>
 
-        {#if zoomable && activeItem?.kind === 'image'}
+        {#if canZoom}
           <button
             type="button"
             class={chromeButtonClass}

package/dist/lib/components/media/MediaCarousel.svelte

@@ -145,6 +145,10 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
+    // Only keys pressed on the track itself. A video player or seek slider
+    // inside a slide handles the same arrows; acting on the bubbled event too
+    // would seek and change slides at once.
+    if (event.defaultPrevented || event.target !== event.currentTarget) return;
     switch (event.key) {
       case 'ArrowLeft':
         event.preventDefault();
@@ -221,6 +225,7 @@
           aria-roledescription="slide"
           aria-label="{slideIndex + 1} of {items.length}"
           aria-hidden={slideIndex !== index ? 'true' : undefined}
+          inert={slideIndex !== index}
           class="w-full shrink-0 snap-center"
         >
           {#if item.kind === 'image'}

package/dist/lib/components/media/MediaGrid.svelte

@@ -164,6 +164,9 @@
   let activeIndex = $state(0);
   let lightboxOpen = $state(false);
   let lightboxIndex = $state(0);
+  // The roving tab stop, clamped so a shrinking `items` list never leaves
+  // every tile at tabindex=-1.
+  const tabStop = $derived(Math.min(activeIndex, Math.max(items.length - 1, 0)));
 
   const gapClass = $derived(
     ({ none: 'gap-0', sm: 'gap-2', md: 'gap-4', lg: 'gap-6' } as const)[gap]
@@ -315,7 +318,7 @@
           onselect={handleSelect}
           class="h-full"
           data-media-tile
-          tabindex={!singleTabStop || index === activeIndex ? 0 : -1}
+          tabindex={!singleTabStop || index === tabStop ? 0 : -1}
         />
       </li>
     {/each}

package/dist/lib/components/notifications/NotificationDialog.svelte

@@ -15,6 +15,7 @@
     getPriorityLabel,
   } from '@classic-homes/notifications/core';
   import { cn } from '../../utils.js';
+  import { safeHref } from '../../utils/url.js';
   import Dialog from '../Dialog.svelte';
   import Button from '../Button.svelte';
   import Icon, { type IconName } from '../Icon.svelte';
@@ -57,6 +58,8 @@
   const formattedTime = $derived(notification ? formatFullTimestamp(notification.createdAt) : '');
   const typeLabel = $derived(notification ? getTypeLabel(notification.type) : '');
   const priorityLabel = $derived(notification ? getPriorityLabel(notification.priority) : '');
+  // actionUrl is API data: drop javascript:/data: and other unsafe schemes
+  const actionHref = $derived(safeHref(notification?.actionUrl));
 
   function handleOpenChange(newOpen: boolean) {
     if (!newOpen) {
@@ -94,7 +97,7 @@
         <div
           class={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-            notification.read ? 'bg-muted' : 'bg-blue-100'
+            notification.read ? 'bg-muted' : 'bg-info/15'
           )}
         >
           <Icon name={iconName} size={20} class={iconColor} />
@@ -138,10 +141,10 @@
         </div>
 
         <!-- Action link -->
-        {#if notification.actionUrl && notification.actionLabel}
+        {#if actionHref && notification.actionLabel}
           <div class="pt-2">
             <a
-              href={notification.actionUrl}
+              href={actionHref}
               class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"
             >
               {notification.actionLabel}
@@ -202,8 +205,8 @@
               {/snippet}
             </Button>
           {/if}
-          {#if notification.actionUrl}
-            <Button class={footerButtonClass} href={notification.actionUrl}>
+          {#if actionHref}
+            <Button class={footerButtonClass} href={actionHref}>
               {#snippet children()}
                 {notification.actionLabel || 'View Details'}
               {/snippet}

package/dist/lib/components/notifications/NotificationItem.svelte

@@ -15,6 +15,7 @@
     getTypeLabel,
   } from '@classic-homes/notifications/core';
   import { cn } from '../../utils.js';
+  import { safeHref } from '../../utils/url.js';
   import Icon, { type IconName } from '../Icon.svelte';
   import Badge from '../Badge.svelte';
   import Checkbox from '../Checkbox.svelte';
@@ -49,6 +50,8 @@
   const priorityBadgeVariant = $derived(getPriorityBadgeVariant(notification.priority));
   const relativeTime = $derived(formatRelativeTime(notification.createdAt));
   const typeLabel = $derived(getTypeLabel(notification.type));
+  // actionUrl is API data: drop javascript:/data: and other unsafe schemes
+  const actionHref = $derived(safeHref(notification.actionUrl));
 
   function handleClick() {
     onClick?.(notification);
@@ -59,6 +62,9 @@
   }
 
   function handleKeyDown(e: KeyboardEvent) {
+    // Only keys pressed on the row itself; Enter on the nested action link
+    // must follow the link, not activate the row.
+    if (e.target !== e.currentTarget) return;
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       onClick?.(notification);
@@ -70,7 +76,7 @@
 <div
   class={cn(
     'group relative flex gap-3 rounded-lg border p-4',
-    !notification.read && 'bg-blue-50/50 border-blue-200',
+    !notification.read && 'bg-info/5 border-info/30',
     notification.read && 'bg-card border-border',
     onClick && 'cursor-pointer hover:bg-muted/50',
     isSelected && 'ring-2 ring-primary ring-offset-2',
@@ -88,7 +94,11 @@
       onclick={(e) => e.stopPropagation()}
       onkeydown={(e) => e.stopPropagation()}
     >
-      <Checkbox checked={isSelected} onCheckedChange={handleCheckboxChange} />
+      <Checkbox
+        checked={isSelected}
+        onCheckedChange={handleCheckboxChange}
+        aria-label={`Select notification: ${notification.title}`}
+      />
     </div>
   {/if}
 
@@ -96,7 +106,7 @@
   <div
     class={cn(
       'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-      notification.read ? 'bg-muted' : 'bg-blue-100'
+      notification.read ? 'bg-muted' : 'bg-info/15'
     )}
   >
     <Icon name={iconName} size={20} class={iconColor} />
@@ -132,15 +142,15 @@
           {relativeTime}
         </span>
         {#if !notification.read}
-          <span class="h-2 w-2 rounded-full bg-blue-500" aria-label="Unread"></span>
+          <span class="h-2 w-2 rounded-full bg-info" aria-label="Unread"></span>
         {/if}
       </div>
     </div>
 
-    {#if notification.actionUrl && notification.actionLabel}
+    {#if actionHref && notification.actionLabel}
       <div class="mt-2">
         <a
-          href={notification.actionUrl}
+          href={actionHref}
           class="text-sm font-medium text-primary hover:underline"
           onclick={(e) => e.stopPropagation()}
         >

package/dist/lib/components/studio/InsertPalette.svelte

@@ -93,8 +93,11 @@
     onSelect(item.id);
   }
 
+  // Disabled entries can't take focus, so arrow navigation must skip them.
   function entries() {
-    return Array.from(listEl?.querySelectorAll<HTMLButtonElement>('[data-palette-item]') ?? []);
+    return Array.from(
+      listEl?.querySelectorAll<HTMLButtonElement>('[data-palette-item]:not(:disabled)') ?? []
+    );
   }
 
   function searchKeydown(event: KeyboardEvent) {

package/dist/lib/components/studio/StudioCanvas.svelte

@@ -24,7 +24,11 @@
     toolbar?: Snippet;
     /** Accessible name of the canvas region (default: "Canvas") */
     label?: string;
-    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    /**
+     * Clicked on the backdrop, outside any item: usually clears the selection.
+     * Also called on Escape pressed inside the canvas (outside a text field),
+     * the keyboard path back to "nothing selected".
+     */
     onBackgroundClick?: () => void;
     /** Classes for the frame that holds the content */
     frameClass?: string;
@@ -47,6 +51,20 @@
   // On a phone the canvas already is phone width; the switch would do nothing
   const showDevices = $derived(deviceToggle && studio?.layout !== 'compact');
   const width = $derived(device === 'phone' && showDevices ? '390px' : maxWidth);
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key !== 'Escape' || e.defaultPrevented || !onBackgroundClick) return;
+    // Escape in a field belongs to the field (clearing, closing its own UI).
+    const target = e.target as HTMLElement | null;
+    if (
+      target?.isContentEditable ||
+      ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    onBackgroundClick();
+  }
 </script>
 
 <section aria-label={label} class={cn('flex h-full flex-col', className)}>
@@ -67,12 +85,15 @@
     </div>
   {/if}
 
-  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <!-- Backdrop click clears the selection; Escape (bubbling from a focused
+       item) is the keyboard equivalent. -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="min-h-0 flex-1 overflow-y-auto px-3 pb-20 pt-3 md:px-6 md:pb-10"
     onclick={(e) => {
       if (e.target === e.currentTarget) onBackgroundClick?.();
     }}
+    onkeydown={handleKeydown}
   >
     <div
       class={cn(