Implement trigger event props

.changeset/tiny-mugs-know.md

@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton-svelte': patch
+---
+
+feat: Implements trigger event props for Svelte's *Popover*, *Modal*, *Combobox* and *Tooltip*.

packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 
 	import * as combobox from '@zag-js/combobox';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { ComboboxProps } from './types.js';
 	import { useId } from '$lib/internal/use-id.js';
 
@@ -40,6 +40,8 @@
 		optionClasses = '',
 		// Snippets
 		arrow,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: ComboboxProps = $props();
@@ -84,6 +86,7 @@
 		}
 	);
 	const api = $derived(combobox.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
 <span {...api.getRootProps()} class="{base} {width} {classes}" data-testid="combobox">
@@ -95,7 +98,7 @@
 			<!-- Input -->
 			<input {...api.getInputProps()} class={inputGroupInput} />
 			<!-- Arrow -->
-			<button {...api.getTriggerProps()} class={inputGroupButton}>
+			<button {...triggerProps} class={inputGroupButton}>
 				{#if arrow}
 					{@render arrow()}
 				{:else}

packages/skeleton-svelte/src/lib/components/Combobox/types.ts

@@ -59,7 +59,7 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
 	/** Set base classes for the option. */
 	optionBase?: string;
 	/** Set focus classes for the option. */
-	optonFocus?: string;
+	optionFocus?: string;
 	/** Set hover classes for the option. */
 	optionHover?: string;
 	/** Set active classes for the option. */
@@ -70,4 +70,8 @@ export interface ComboboxProps extends Omit<combobox.Context, 'id' | 'collection
 	// Snippets ---
 	/** Provide a custom arrow icon. */
 	arrow?: Snippet;
+
+	// Events ---
+	/** Handle the combobox dropdown button click event. */
+	onclick?: (event: Event) => void;
 }

packages/skeleton-svelte/src/lib/components/Modal/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fly, fade } from 'svelte/transition';
 	import * as dialog from '@zag-js/dialog';
-	import { portal, normalizeProps, useMachine } from '@zag-js/svelte';
+	import { portal, normalizeProps, useMachine, mergeProps } from '@zag-js/svelte';
 	import type { ModalProps } from './types.js';
 	import { useId } from '$lib/internal/use-id.js';
 
@@ -38,6 +38,8 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: ModalProps = $props();
@@ -62,15 +64,15 @@
 		}
 	);
 	const api = $derived(dialog.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
 <span class="{base} {classes}" data-testid="modal">
 	<!-- Trigger -->
-	{#if trigger}
-		<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
-			{@render trigger()}
-		</button>
-	{/if}
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
+		{@render trigger?.()}
+	</button>
+
 	{#if api.open}
 		<!-- Backdrop -->
 		<div

packages/skeleton-svelte/src/lib/components/Modal/types.ts

@@ -63,4 +63,8 @@ export interface ModalProps extends Omit<dialog.Context, 'id' | 'open'> {
 	trigger?: Snippet;
 	/** Provide the template contents of the dialog itself. */
 	content?: Snippet;
+
+	// Events ---
+	/** Handle the dialog button click event. */
+	onclick?: () => void;
 }

packages/skeleton-svelte/src/lib/components/Popover/Popover.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 
 	import * as popover from '@zag-js/popover';
-	import { portal, useMachine, normalizeProps } from '@zag-js/svelte';
+	import { portal, useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { PopoverProps } from './types.js';
 	import { useId } from '$lib/internal/use-id.js';
 
@@ -31,6 +31,8 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onclick,
 		// Zag ---
 		...zagProps
 	}: PopoverProps = $props();
@@ -54,11 +56,12 @@
 		}
 	);
 	const api = $derived(popover.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
 </script>
 
 <span class="{base} {classes}" data-testid="popover">
 	<!-- Snippet: Trigger -->
-	<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
 		{@render trigger?.()}
 	</button>
 	<!-- Portal -->

packages/skeleton-svelte/src/lib/components/Popover/types.ts

@@ -50,4 +50,8 @@ export interface PopoverProps extends Omit<popover.Context, 'id' | 'open'> {
 	trigger?: Snippet;
 	/** Provide the template contents of the popover itself. */
 	content?: Snippet;
+
+	// Events ---
+	/** Handle the popover button click event. */
+	onclick?: () => void;
 }

packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 
 	import * as tooltip from '@zag-js/tooltip';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
 	import type { TooltipProps } from './types.js';
 	import { useId } from '$lib/internal/use-id.js';
 
@@ -26,6 +26,9 @@
 		// Snippets
 		trigger,
 		content,
+		// Events
+		onmouseover,
+		onclick,
 		// Zag ---
 		...zagProps
 	}: TooltipProps = $props();
@@ -49,11 +52,12 @@
 		}
 	);
 	const api = $derived(tooltip.connect(snapshot, send, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onmouseover, onclick }));
 </script>
 
 <span class="{base} {classes}" data-testid="tooltip">
 	<!-- Snippet: Trigger -->
-	<button {...api.getTriggerProps()} class="{triggerBase} {triggerBackground} {triggerClasses}">
+	<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}">
 		{@render trigger?.()}
 	</button>
 	<!-- Tooltip Content -->

packages/skeleton-svelte/src/lib/components/Tooltip/types.ts

@@ -40,4 +40,10 @@ export interface TooltipProps extends Omit<tooltip.Context, 'id' | 'open'> {
 	trigger?: Snippet;
 	/** Provide the template contents of the tooltip itself. */
 	content?: Snippet;
+
+	// Events ---
+	/** Handle the tooltip button hover event. */
+	onmouseover?: () => void;
+	/** Handle the tooltip button click event. */
+	onclick?: () => void;
 }