@classic-homes/theme-svelte 1.26.0 → 1.28.0

package/dist/lib/components/DropdownMenu.svelte

@@ -2,6 +2,7 @@
   import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
+  import type { Attachment } from 'svelte/attachments';
   import Icon, { type IconName } from './Icon.svelte';
   import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
@@ -60,6 +61,19 @@
      * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
      */
     showChevron?: boolean;
+    /**
+     * Disable the trigger `<button>`: sets native `disabled` and stops the menu from opening
+     * (pointer and keyboard). Use this instead of nesting a disabled `<Button>` in `trigger`.
+     */
+    triggerDisabled?: boolean;
+    /**
+     * Keep the trigger's pointer, mouse, click and opening-key (Enter, Space, ArrowDown)
+     * events from bubbling past the trigger, so a menu inside a clickable row or card
+     * opens without also activating the row. The menu still opens as usual.
+     */
+    triggerStopPropagation?: boolean;
+    /** Called on a click of the trigger, before the event bubbles to its ancestors */
+    onTriggerClick?: (event: MouseEvent) => void;
   }
 
   let {
@@ -75,8 +89,56 @@
     triggerSize = 'sm',
     triggerLabel,
     showChevron = false,
+    triggerDisabled = false,
+    triggerStopPropagation = false,
+    onTriggerClick,
   }: Props = $props();
 
+  type TriggerHandler = ((event: Event) => void) | undefined;
+
+  /** Keys the bits-ui trigger acts on (toggle/open), so they are the row-activating ones too. */
+  const OPENING_KEYS = new Set(['Enter', ' ', 'ArrowDown']);
+
+  /** Events that would reach a clickable ancestor (row click, row link, row keyboard activate). */
+  const ISOLATED_EVENTS = [
+    'pointerdown',
+    'pointerup',
+    'mousedown',
+    'mouseup',
+    'click',
+    'auxclick',
+    'keydown',
+  ] as const;
+
+  /**
+   * With `triggerStopPropagation`, listen natively on the trigger itself: run the bits-ui
+   * handler (and `onTriggerClick`) at the target, then stop the event there. Svelte's
+   * delegated handlers run at the root, so a stop inside one would also keep bits-ui's own
+   * (delegated) handlers from running and could not stop native listeners on ancestors.
+   */
+  function isolateTrigger(props: Record<string, unknown>): Attachment<HTMLButtonElement> {
+    return (node) => {
+      const listeners = ISOLATED_EVENTS.map((type) => {
+        const listener = (event: Event) => {
+          (props[`on${type}`] as TriggerHandler)?.(event);
+          if (type === 'click') onTriggerClick?.(event as MouseEvent);
+          if (type === 'keydown' && !OPENING_KEYS.has((event as KeyboardEvent).key)) return;
+          event.stopPropagation();
+        };
+        node.addEventListener(type, listener);
+        return () => node.removeEventListener(type, listener);
+      });
+      return () => listeners.forEach((remove) => remove());
+    };
+  }
+
+  /** Trigger props without the event handlers that `isolateTrigger` calls itself. */
+  function withoutHandlers(props: Record<string, unknown>): Record<string, unknown> {
+    const rest = { ...props };
+    for (const type of ISOLATED_EVENTS) delete rest[`on${type}`];
+    return rest;
+  }
+
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
     onOpenChange?.(newOpen);
@@ -87,6 +149,21 @@
   }
 </script>
 
+{#snippet triggerContent()}
+  {@render trigger()}
+  {#if showChevron}
+    <Icon
+      name="chevron-down"
+      size={16}
+      class={cn(
+        'ml-1 shrink-0 opacity-60 transition-transform duration-200 motion-reduce:transition-none',
+        open && 'rotate-180'
+      )}
+      aria-hidden="true"
+    />
+  {/if}
+{/snippet}
+
 {#snippet itemContent(item: DropdownMenuItem)}
   {#if item.icon}
     <Icon name={item.icon} size={16} class="mr-2 shrink-0" aria-hidden="true" />
@@ -143,29 +220,32 @@
 {/snippet}
 
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
-  <DropdownMenuPrimitive.Trigger>
+  <DropdownMenuPrimitive.Trigger disabled={triggerDisabled}>
     {#snippet child({ props })}
-      <button
-        type="button"
-        {...props}
-        class={triggerVariant
-          ? cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClass)
-          : triggerClass}
-        aria-label={triggerLabel}
-      >
-        {@render trigger()}
-        {#if showChevron}
-          <Icon
-            name="chevron-down"
-            size={16}
-            class={cn(
-              'ml-1 shrink-0 opacity-60 transition-transform duration-200 motion-reduce:transition-none',
-              open && 'rotate-180'
-            )}
-            aria-hidden="true"
-          />
-        {/if}
-      </button>
+      {@const buttonClass = triggerVariant
+        ? cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClass)
+        : triggerClass}
+      {#if triggerStopPropagation}
+        <button
+          type="button"
+          {...withoutHandlers(props)}
+          class={buttonClass}
+          aria-label={triggerLabel}
+          {@attach isolateTrigger(props)}
+        >
+          {@render triggerContent()}
+        </button>
+      {:else}
+        <button
+          type="button"
+          {...props}
+          class={buttonClass}
+          aria-label={triggerLabel}
+          onclick={onTriggerClick}
+        >
+          {@render triggerContent()}
+        </button>
+      {/if}
     {/snippet}
   </DropdownMenuPrimitive.Trigger>
 

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

@@ -54,6 +54,19 @@ interface Props {
      * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
      */
     showChevron?: boolean;
+    /**
+     * Disable the trigger `<button>`: sets native `disabled` and stops the menu from opening
+     * (pointer and keyboard). Use this instead of nesting a disabled `<Button>` in `trigger`.
+     */
+    triggerDisabled?: boolean;
+    /**
+     * Keep the trigger's pointer, mouse, click and opening-key (Enter, Space, ArrowDown)
+     * events from bubbling past the trigger, so a menu inside a clickable row or card
+     * opens without also activating the row. The menu still opens as usual.
+     */
+    triggerStopPropagation?: boolean;
+    /** Called on a click of the trigger, before the event bubbles to its ancestors */
+    onTriggerClick?: (event: MouseEvent) => void;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

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.28.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",