From 622fcbced9cea53a7b8ea1cda776cd439ece3129 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 16 Dec 2022 11:47:20 -0600
Subject: [PATCH 1/4] Improved component events and event docs

---
 .../Accordion/AccordionGroup.svelte           |  4 +---
 src/lib/components/AppRail/AppRailTile.svelte | 12 +++++-----
 src/lib/components/Breadcrumb/Crumb.svelte    |  4 ++++
 .../ConicGradient/ConicGradient.svelte        |  2 +-
 .../components/FileButton/FileButton.svelte   |  2 +-
 .../FileDropzone/FileDropzone.svelte          |  4 ++++
 src/lib/components/ListBox/ListBoxItem.svelte |  2 ++
 src/lib/components/Radio/RadioItem.svelte     |  2 ++
 .../components/SlideToggle/SlideToggle.svelte |  5 ++++-
 src/lib/components/Stepper/Step.svelte        |  7 +++++-
 src/lib/components/Tab/Tab.svelte             | 19 +++++++++++++---
 src/lib/components/Table/Table.svelte         |  6 ++---
 src/lib/utilities/CodeBlock/CodeBlock.svelte  |  7 ++++++
 src/lib/utilities/Drawer/Drawer.svelte        | 22 ++++++++++---------
 .../utilities/LightSwitch/LightSwitch.svelte  | 14 ++++++++----
 src/lib/utilities/Modal/Modal.svelte          | 15 ++++++++-----
 .../(inner)/components/app-rail/+page.svelte  |  2 +-
 17 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/Accordion/AccordionGroup.svelte b/src/lib/components/Accordion/AccordionGroup.svelte
index 3e27f45248..d3c3b40686 100644
--- a/src/lib/components/Accordion/AccordionGroup.svelte
+++ b/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;
 				});
 			});
 		}
diff --git a/src/lib/components/AppRail/AppRailTile.svelte b/src/lib/components/AppRail/AppRailTile.svelte
index 870d45b5bf..5caed9b438 100644
--- a/src/lib/components/AppRail/AppRailTile.svelte
+++ b/src/lib/components/AppRail/AppRailTile.svelte
@@ -20,7 +20,7 @@
 	/** 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');
@@ -28,19 +28,21 @@
 	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>
diff --git a/src/lib/components/Breadcrumb/Crumb.svelte b/src/lib/components/Breadcrumb/Crumb.svelte
index 6bb58cca54..790ba2d5eb 100644
--- a/src/lib/components/Breadcrumb/Crumb.svelte
+++ b/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>
diff --git a/src/lib/components/ConicGradient/ConicGradient.svelte b/src/lib/components/ConicGradient/ConicGradient.svelte
index 5d58fc5855..5ed00fe761 100644
--- a/src/lib/components/ConicGradient/ConicGradient.svelte
+++ b/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>
diff --git a/src/lib/components/FileButton/FileButton.svelte b/src/lib/components/FileButton/FileButton.svelte
index 416a66cd22..b87dfe03b0 100644
--- a/src/lib/components/FileButton/FileButton.svelte
+++ b/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>
diff --git a/src/lib/components/FileDropzone/FileDropzone.svelte b/src/lib/components/FileDropzone/FileDropzone.svelte
index 56c43bd6fc..50a6bd7314 100644
--- a/src/lib/components/FileDropzone/FileDropzone.svelte
+++ b/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}">
diff --git a/src/lib/components/ListBox/ListBoxItem.svelte b/src/lib/components/ListBox/ListBoxItem.svelte
index 4e320fc7b5..b9126a2bd0 100644
--- a/src/lib/components/ListBox/ListBoxItem.svelte
+++ b/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"
diff --git a/src/lib/components/Radio/RadioItem.svelte b/src/lib/components/Radio/RadioItem.svelte
index 46b626ca2f..efca2709db 100644
--- a/src/lib/components/Radio/RadioItem.svelte
+++ b/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} />
diff --git a/src/lib/components/SlideToggle/SlideToggle.svelte b/src/lib/components/SlideToggle/SlideToggle.svelte
index ddd2cbc00d..df85321d86 100644
--- a/src/lib/components/SlideToggle/SlideToggle.svelte
+++ b/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()}
diff --git a/src/lib/components/Stepper/Step.svelte b/src/lib/components/Stepper/Step.svelte
index a038a982a5..c482c65d5c 100644
--- a/src/lib/components/Stepper/Step.svelte
+++ b/src/lib/components/Stepper/Step.svelte
@@ -39,11 +39,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', {});
 	}
 
@@ -93,7 +98,7 @@
 				<slot />
 				<!-- Nav -->
 				<footer class="step-navigation {classesNav}">
-					{#if index !== 0}<button class="btn {buttonBack}" on:click={stepPrev}>&uarr;</button>{/if}
+					{#if index !== 0}<button class="btn-icon {buttonBack}" on:click={stepPrev}>&uarr;</button>{/if}
 					{#if $active + 1 < length}
 						<button class="btn {buttonNext}" on:click={stepNext} disabled={locked}>Next &darr;</button>
 					{:else}
diff --git a/src/lib/components/Tab/Tab.svelte b/src/lib/components/Tab/Tab.svelte
index 7f4d37042b..1ab9546c65 100644
--- a/src/lib/components/Tab/Tab.svelte
+++ b/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('click', 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}
diff --git a/src/lib/components/Table/Table.svelte b/src/lib/components/Table/Table.svelte
index 5bdac89602..1dfe74800a 100644
--- a/src/lib/components/Table/Table.svelte
+++ b/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
diff --git a/src/lib/utilities/CodeBlock/CodeBlock.svelte b/src/lib/utilities/CodeBlock/CodeBlock.svelte
index 2c5479b0c9..0bb68a82b3 100644
--- a/src/lib/utilities/CodeBlock/CodeBlock.svelte
+++ b/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
diff --git a/src/lib/utilities/Drawer/Drawer.svelte b/src/lib/utilities/Drawer/Drawer.svelte
index 0a5806b78c..4d6da18d8c 100644
--- a/src/lib/utilities/Drawer/Drawer.svelte
+++ b/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}
 	>
diff --git a/src/lib/utilities/LightSwitch/LightSwitch.svelte b/src/lib/utilities/LightSwitch/LightSwitch.svelte
index 1f9c568b5f..8432223baf 100644
--- a/src/lib/utilities/LightSwitch/LightSwitch.svelte
+++ b/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}
diff --git a/src/lib/utilities/Modal/Modal.svelte b/src/lib/utilities/Modal/Modal.svelte
index 51f4845560..4a3a79d00e 100644
--- a/src/lib/utilities/Modal/Modal.svelte
+++ b/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 {
diff --git a/src/routes/(inner)/components/app-rail/+page.svelte b/src/routes/(inner)/components/app-rail/+page.svelte
index 57ef876c88..b76cb0814c 100644
--- a/src/routes/(inner)/components/app-rail/+page.svelte
+++ b/src/routes/(inner)/components/app-rail/+page.svelte
@@ -53,7 +53,7 @@
 				<AppRailTile label="Tile 2" value={2}>
 					<SvgIcon name="cubes" width="w-6" height="h-6" />
 				</AppRailTile>
-				<AppRailTile label="Tile 3" value={3}>
+				<AppRailTile label="Schedule Candidates" tag="a" value={3}>
 					<SvgIcon name="cubes" width="w-6" height="h-6" />
 				</AppRailTile>
 				<!-- Trail -->

From 03e9d137e9760fdf7b4c0ec80199673e5577147c Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 16 Dec 2022 11:51:06 -0600
Subject: [PATCH 2/4] Fixed paginator amount event

---
 src/lib/components/Paginator/Paginator.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Paginator/Paginator.svelte b/src/lib/components/Paginator/Paginator.svelte
index 8a0aa02afd..7e5aa7a536 100644
--- a/src/lib/components/Paginator/Paginator.svelte
+++ b/src/lib/components/Paginator/Paginator.svelte
@@ -33,7 +33,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--;

From e444811ab2a8f54cbfe21b4d39ae45f75ffd5b8f Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 16 Dec 2022 11:55:06 -0600
Subject: [PATCH 3/4] Fixed mislabeled tab event

---
 src/lib/components/Tab/Tab.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Tab/Tab.svelte b/src/lib/components/Tab/Tab.svelte
index 1ab9546c65..4e3b4cb6be 100644
--- a/src/lib/components/Tab/Tab.svelte
+++ b/src/lib/components/Tab/Tab.svelte
@@ -44,7 +44,7 @@
 	}
 	function onKeyDown(event: any): void {
 		/** @event {{ event }} keydown - Fires on tab keydown event.  */
-		dispatch('click', event);
+		dispatch('keydown', event);
 		// Enter/Space to toggle element
 		if (['Enter', 'Space'].includes(event.code)) {
 			event.preventDefault();

From e63f19f5abe8342af72e906c8ddc9f8fa97f531b Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 16 Dec 2022 11:59:58 -0600
Subject: [PATCH 4/4] Revert app rail test

---
 src/routes/(inner)/components/app-rail/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(inner)/components/app-rail/+page.svelte b/src/routes/(inner)/components/app-rail/+page.svelte
index b76cb0814c..57ef876c88 100644
--- a/src/routes/(inner)/components/app-rail/+page.svelte
+++ b/src/routes/(inner)/components/app-rail/+page.svelte
@@ -53,7 +53,7 @@
 				<AppRailTile label="Tile 2" value={2}>
 					<SvgIcon name="cubes" width="w-6" height="h-6" />
 				</AppRailTile>
-				<AppRailTile label="Schedule Candidates" tag="a" value={3}>
+				<AppRailTile label="Tile 3" value={3}>
 					<SvgIcon name="cubes" width="w-6" height="h-6" />
 				</AppRailTile>
 				<!-- Trail -->