@classic-homes/theme-svelte 1.26.0 → 1.27.1

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

@@ -32,6 +32,7 @@
   import MediaEmbed from './MediaEmbed.svelte';
   import Video from './Video.svelte';
   import MediaTile from './internal/MediaTile.svelte';
+  import TriggerChild, { type TriggerSnippetProps } from '../internal/TriggerChild.svelte';
 
   /** Horizontal distance that counts as a swipe rather than a tap */
   const SWIPE_THRESHOLD = 60;
@@ -59,8 +60,14 @@
     zoomable?: boolean;
     /** Show a download link for items that expose a URL */
     downloadable?: boolean;
-    /** Optional trigger rendered inline; omit when controlling `open` yourself */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element; omit when controlling `open` yourself. It
+     * receives `{ props }`: spread them on your own button
+     * (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Additional classes for the dialog surface */
     class?: string;
   }
@@ -81,6 +88,10 @@
     class: className,
   }: Props = $props();
 
+  const uid = $props.id();
+  // Changes once if the trigger snippet ignores its props (see TriggerChild)
+  let triggerId = $state(`${uid}-trigger`);
+
   let swipeStartX = 0;
   let swipeStartY = 0;
   let swipeActive = false;
@@ -265,11 +276,9 @@
 
 <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   {#if trigger}
-    <DialogPrimitive.Trigger>
+    <DialogPrimitive.Trigger id={triggerId}>
       {#snippet child({ props })}
-        <span {...props}>
-          {@render trigger()}
-        </span>
+        <TriggerChild {props} {trigger} onfallback={() => (triggerId = `${uid}-trigger-wrap`)} />
       {/snippet}
     </DialogPrimitive.Trigger>
   {/if}

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

@@ -1,5 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { MediaItem } from '../../types/components.js';
+import { type TriggerSnippetProps } from '../internal/TriggerChild.svelte';
 interface Props {
     /** Items to page through */
     items: MediaItem[];
@@ -23,8 +24,14 @@ interface Props {
     zoomable?: boolean;
     /** Show a download link for items that expose a URL */
     downloadable?: boolean;
-    /** Optional trigger rendered inline; omit when controlling `open` yourself */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element; omit when controlling `open` yourself. It
+     * receives `{ props }`: spread them on your own button
+     * (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Additional classes for the dialog surface */
     class?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",