Improved component events and event docs

src/lib/components/Accordion/AccordionGroup.svelte

@@ -36,9 +36,7 @@
 			details.forEach((detail) => {
 				detail.addEventListener('click', (e: any) => {
 					const active = details.find((d) => d.open);
-					if (!e.currentTarget.open && active) {
-						active.open = false;
-					}
+					if (!e.currentTarget.open && active) active.open = false;
 				});
 			});
 		}

src/lib/components/AppRail/AppRailTile.svelte

@@ -20,27 +20,29 @@
 	/** Provide abitrary classes to style the icon region. */
 	export let regionIcon = '';
 	/** Provide abitrary classes to style the label region. */
-	export let regionLabel = 'text-xs';
+	export let regionLabel = '';
 
 	// Context
 	export let selected: Writable<any> = getContext('selected');
 	export let active: Writable<any> = getContext('active');
 	export let hover: Writable<any> = getContext('hover');
 
 	// Base Classes
-	const cBase = 'grid place-content-center place-items-center w-full aspect-square space-y-1.5';
+	const cBase = 'unstyled grid place-content-center place-items-center w-full aspect-square space-y-1.5 cursor-pointer';
+	const cLabel = 'text-xs text-center';
 
 	// Input Handler
 	function onClickHandler(event: any): void {
-		/** @event {{ event }} click - Fires when the component is clicked.  */
-		dispatch('click', event);
 		if (!$selected || !value) return;
 		$selected = value;
+		/** @event {{ event }} click - Fires when the component is clicked.  */
+		dispatch('click', event);
 	}
 
 	// Reactive
 	$: classesActive = $selected && value && $selected === value ? `${active}` : '';
 	$: classesBase = `${cBase} ${hover} ${classesActive} ${$$props.class || ''}`;
+	$: classesLabel = `${cLabel} ${regionLabel}`;
 
 	// RestProps
 	function prunedRestProps(): any {
@@ -63,5 +65,5 @@
 	<!-- Slot: Default (icon) -->
 	<div class="app-rail-tile-icon {regionIcon}"><slot /></div>
 	<!-- Label -->
-	{#if label}<div class="app-rail-tile-label {regionLabel}">{label}</div>{/if}
+	{#if label}<div class="app-rail-tile-label {classesLabel}">{label}</div>{/if}
 </svelte:element>

src/lib/components/Breadcrumb/Crumb.svelte

@@ -31,6 +31,10 @@
 		class="crumb-anchor {cAnchor}"
 		data-testid="crumb-anchor"
 		aria-current={!$$props.href ? 'page' : undefined}
+		on:click
+		on:keydown
+		on:keyup
+		on:keypress
 	>
 		{#if $$slots.lead}<span class="crumb-lead"><slot name="lead" /></span>{/if}
 		<span class="crumb-text"><slot /></span>

src/lib/components/ConicGradient/ConicGradient.svelte

@@ -77,7 +77,7 @@
 	{#if legend && generatedLegendList}
 		<ul class="conic-list list {cLabel}">
 			{#each generatedLegendList as { color, label, value }}
-				<li class="conic-item {hover}">
+				<li class="conic-item {hover}" on:click on:keydown on:keyup on:keypress>
 					<span class="conic-swatch {cSwatch}" style:background={color} />
 					<span class="conic-label flex-auto">{label}</span>
 					<strong class="conic-value">{value}%</strong>

src/lib/components/FileButton/FileButton.svelte

@@ -23,7 +23,7 @@
 	<!-- Input: File -->
 	<input bind:this={elemFileInput} bind:files type="file" {...prunedRestProps()} class="file-button-input hidden" on:change />
 	<!-- Button -->
-	<button class="file-button-btn btn {button}" type="button" on:click={onButtonClick}>
+	<button class="file-button-btn btn {button}" type="button" on:click={onButtonClick} on:keydown on:keyup on:keypress>
 		<slot />
 	</button>
 </div>

src/lib/components/FileDropzone/FileDropzone.svelte

@@ -72,6 +72,10 @@
 	on:dragover={onDragOver}
 	on:dragleave={onDragLeave}
 	on:drop={onDrop}
+	on:click
+	on:keydown
+	on:keyup
+	on:keypress
 >
 	<!-- Message -->
 	<div class="file-dropzone-message {classesMessage}">

src/lib/components/ListBox/ListBoxItem.svelte

@@ -85,6 +85,8 @@
 	{id}
 	on:click={onClickHandler}
 	on:keydown={onKeyDown}
+	on:keyup
+	on:keypress
 	role="option"
 	aria-selected={isSelected}
 	tabindex="0"

src/lib/components/Paginator/Paginator.svelte

@@ -41,7 +41,7 @@
 	function onChangeLength(): void {
 		settings.offset = 0;
 		/** @event {{ length: number }} amount - Fires when the amount selection input changes.  */
-		dispatch('amount', length);
+		dispatch('amount', settings.limit);
 	}
 	function onPrev(): void {
 		settings.offset--;

src/lib/components/Radio/RadioItem.svelte

@@ -61,6 +61,8 @@
 	data-testid="radio-item"
 	on:click
 	on:keydown={onKeyDown}
+	on:keyup
+	on:keypress
 >
 	<label class="radio-item-label {classesLabel}">
 		<input class="radio-item-input hidden" type="radio" {value} bind:group={$selected} />

src/lib/components/SlideToggle/SlideToggle.svelte

@@ -86,8 +86,11 @@
 			class="slide-toggle-input hidden"
 			bind:checked
 			on:click
-			on:change
+			on:keydown
+			on:keyup
+			on:keypress
 			on:mouseover
+			on:change
 			on:focus
 			on:blur
 			{...prunedRestProps()}

src/lib/components/Stepper/Step.svelte

@@ -42,11 +42,16 @@
 	// Step Handlers
 	function stepPrev(): void {
 		active.set($active - 1);
+		/** @event {{ event }} previous - Fires when the component the Next step button is pressed.  */
+		dispatch('previous', {});
 	}
 	function stepNext(): void {
 		active.set($active + 1);
+		/** @event {{ event }} next - Fires when the component the Previous step button is pressed.  */
+		dispatch('next', {});
 	}
 	function onComplete() {
+		/** @event {{ event }} complete - Fires when the component the Complete button is pressed.  */
 		dispatch('complete', {});
 	}
 

src/lib/components/Tab/Tab.svelte

@@ -5,7 +5,10 @@
 	 */
 
 	import type { Writable } from 'svelte/store';
-	import { getContext } from 'svelte';
+	import { createEventDispatcher, getContext } from 'svelte';
+
+	// Event Handler
+	const dispatch = createEventDispatcher();
 
 	// Context
 	export let selected: Writable<any> = getContext('selected');
@@ -33,7 +36,15 @@
 	const cBaseLabel = 'font-bold whitespace-nowrap';
 
 	// A11y Input Handlers
+	function onClickHandler(value: any): void {
+		/** @event {{ value }} click - Fires on tab click event.  */
+		dispatch('click', value);
+		// Update Selected
+		selected.set(value);
+	}
 	function onKeyDown(event: any): void {
+		/** @event {{ event }} keydown - Fires on tab keydown event.  */
+		dispatch('keydown', event);
 		// Enter/Space to toggle element
 		if (['Enter', 'Space'].includes(event.code)) {
 			event.preventDefault();
@@ -52,12 +63,14 @@
 <li
 	class="tab ${classesBase}"
 	on:click={() => {
-		selected.set(value);
+		onClickHandler(value);
 	}}
-	data-testid="tab"
 	on:keydown={onKeyDown}
+	on:keyup
+	on:keypress
 	role="tab"
 	tabindex="0"
+	data-testid="tab"
 >
 	<!-- Slot: Lead -->
 	{#if $$slots.lead}<div class="tab-lead {classesLead}"><slot name="lead" /></div>{/if}

src/lib/components/Table/Table.svelte

@@ -35,9 +35,9 @@
 		event.preventDefault();
 		event.stopPropagation();
 		// Prefer meta row info if available, else fallback to body row info
-		const rowInfo = source.meta ? source.meta[rowIndex] : source.body[rowIndex];
-		/** @event {rowInfo} selected - Fires when a table row is clicked. */
-		dispatch('selected', rowInfo);
+		const rowMetaData = source.meta ? source.meta[rowIndex] : source.body[rowIndex];
+		/** @event {rowMetaData} selected - Fires when a table row is clicked. */
+		dispatch('selected', rowMetaData);
 	}
 
 	// Row Keydown Handler

src/lib/utilities/CodeBlock/CodeBlock.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	// Event Handler
+	const dispatch = createEventDispatcher();
+
 	import { storeHighlightJs } from './stores';
 	import { clipboard } from '$lib/actions/Clipboard/clipboard';
 
@@ -41,6 +46,8 @@
 		copyState = true;
 		// prettier-ignore
 		setTimeout(() => { copyState = false; }, 2000);
+		/** @event {{}} copy - Fires when the Copy button is pressed.  */
+		dispatch('copy', {});
 	}
 
 	// Trigger syntax highlighting if highlight.js is available

src/lib/utilities/Drawer/Drawer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
-	import { onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+
+	// Event Handler
+	const dispatch = createEventDispatcher();
 
 	// Actions
 	import { focusTrap } from '$lib/actions/FocusTrap/focusTrap';
@@ -116,12 +119,14 @@
 	}
 
 	// Input Handlers
-	function onClickBackdrop(e: any): void {
-		if (e.target === elemBackdrop) drawerStore.close();
+	function onBackdropInteraction(event: any): void {
+		if (event.target === elemBackdrop) drawerStore.close();
+		/** @event {{ event }} backdrop - Fires on backdrop interaction.  */
+		dispatch('backdrop', event);
 	}
-	function onKeydownWindow(e: any): void {
+	function onKeydownWindow(event: any): void {
 		if (!$drawerStore) return;
-		if (e.code === 'Escape') drawerStore.close();
+		if (event.code === 'Escape') drawerStore.close();
 	}
 
 	// Lifecycle
@@ -146,11 +151,8 @@
 		class="drawer-backdrop {classesBackdrop}"
 		data-testid="drawer-backdrop"
 		transition:fade|local={{ duration }}
-		on:click={(e) => {
-			onClickBackdrop(e);
-		}}
-		on:keydown
-		on:keyup
+		on:mousedown={onBackdropInteraction}
+		on:touchstart={onBackdropInteraction}
 		on:keypress
 		use:focusTrap={true}
 	>

src/lib/utilities/LightSwitch/LightSwitch.svelte

@@ -1,6 +1,9 @@
 <!-- https://tailwindcss.com/docs/dark-mode -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+
+	// Event Handler
+	const dispatch = createEventDispatcher();
 
 	// Components
 	import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte';
@@ -33,11 +36,13 @@
 	}
 
 	// On Click Handler
-	function onClick(): void {
+	function onClick(event: any): void {
 		// Set the Store Value
 		storeLightSwitch.set(($storeLightSwitch = !$storeLightSwitch));
 		// Apply to <html> Element
 		setElemHtmlClass();
+		/** @event {{ event }} click - Fires when the component is clicked.  */
+		dispatch('click', event);
 	}
 
 	// A11y Input Handlers
@@ -47,6 +52,8 @@
 			event.preventDefault();
 			event.target.click();
 		}
+		/** @event {{ event }} keydown - Fires when the component has keydown event.  */
+		dispatch('keydown', event);
 	}
 
 	// Lifecycle
@@ -66,8 +73,7 @@
 <!-- prettier-ignore -->
 <div
 	class="lightswitch {classesBase}"
-	on:click={onClick}
-	on:keydown={onKeyDown}
+	on:click={onClick} on:keydown={onKeyDown} on:keyup on:keypress
 	role="switch"
 	aria-label="Light Switch"
 	aria-checked={$storeLightSwitch}

src/lib/utilities/Modal/Modal.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 
-	// Actions
-	import { focusTrap } from '$lib/actions/FocusTrap/focusTrap';
+	// Event Handler
+	const dispatch = createEventDispatcher();
 
-	// Stores
+	import { focusTrap } from '$lib/actions/FocusTrap/focusTrap';
 	import { modalStore } from '$lib/utilities/Modal/stores';
 
 	// Props
@@ -65,9 +66,11 @@
 
 	// Event Handlers ---
 
-	function onBackdropInteraction(e: MouseEvent | TouchEvent): void {
-		if (!(e.target instanceof Element)) return;
-		if (e.target.classList.contains('modal-backdrop')) onClose();
+	function onBackdropInteraction(event: MouseEvent | TouchEvent): void {
+		if (!(event.target instanceof Element)) return;
+		if (event.target.classList.contains('modal-backdrop')) onClose();
+		/** @event {{ event }} backdrop - Fires on backdrop interaction.  */
+		dispatch('backdrop', event);
 	}
 
 	function onClose(): void {