@lavalogic/scoria 0.24.0 → 0.25.1

package/dist/Components/Base/ContextWrapper.svelte

@@ -34,6 +34,7 @@
 	setContext(AlertContext.identifier, alertContext);
 
 	// NOTE known limitation. Not expected to mutate after instantiation
+	// svelte-ignore state_referenced_locally
 	const untypedListenerContext = new UntypedInputContext(debug);
 	setContext(UntypedInputContext.identifier, untypedListenerContext);
 </script>

package/dist/Components/Base/Pagination.svelte

@@ -1,6 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<!-- @component
+	Allows for automated pagination of local content in cases where a collection may become a performance concern
+
+	### Usage
+	```svelte
+		<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+	```
+ -->
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { Side } from '../../Types/Internal/Side.js';
@@ -20,7 +31,7 @@
 		border = false,
 		padding = '1.5rem', //sizing.$regular-padding
 		gap = '1.5rem', // sizing.$regular-gap
-		height
+		height,
 	}: PaginationProps<T> = $props();
 
 	const _uuid = generateShortUUID();
@@ -101,18 +112,28 @@
 
 		<div class="scrollable">
 			<div class="block">
-				<Icon name="paper" colour={Colour['$ui-blue-6']} />
+				<Icon
+					name="paper"
+					colour={Colour['$ui-blue-6']}
+				/>
 				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
 			</div>
 
 			<div class="block">
 				<label for="{_uuid}-jump-to-page"
-					><Icon name="arrow-move-horizontal" colour={Colour['$ui-blue-6']} /></label
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
 				>
 
 				<label for="{_uuid}-jump-to-page">Jump to page:</label>
 
-				<NumberInput id="{_uuid}-jump-to-page" value={pageValue} oninput={onNumberInput} />
+				<NumberInput
+					id="{_uuid}-jump-to-page"
+					value={pageValue}
+					oninput={onNumberInput}
+				/>
 			</div>
 
 			<div class="block nopad page-arrow">
@@ -126,7 +147,7 @@
 					size={Size.FillHeight}
 					iconLeft={{
 						name: 'left-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Previous Page</Button
 				>
 			</div>
@@ -158,7 +179,7 @@
 					disabled={pageIndex == lastPageIndex}
 					iconRight={{
 						name: 'right-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Next Page</Button
 				>
 			</div>

package/dist/Components/Base/Pagination.svelte.d.ts

@@ -20,6 +20,14 @@ interface $$IsomorphicComponent {
     <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Allows for automated pagination of local content in cases where a collection may become a performance concern
+ *
+ * ### Usage
+ * ```svelte
+ * 	<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+ * ```
+ */
 declare const Pagination: $$IsomorphicComponent;
 type Pagination<T extends object> = InstanceType<typeof Pagination<T>>;
 export default Pagination;

package/dist/Components/Base/PaginationProps.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 export interface PaginationProps<T extends object> {
-    items: Array<T>;
+    /** Used to index each item for a unique key. Duplicate values will result in error */
     key: string & keyof T;
-    pageSize?: number;
+    items: Array<T>;
+    /** Second argument is the index */
     snippet: Snippet<[T, number]>;
+    pageSize?: number;
     itemName?: string;
     border?: boolean;
     padding?: string;

package/dist/Components/Base/Snippets.svelte

@@ -1,5 +1,8 @@
 <svelte:options runes />
 
+<!-- @component
+An empty component that only exists to export common snippets
+ -->
 <script
 	lang="ts"
 	module

package/dist/Components/Base/Snippets.svelte.d.ts

@@ -1,5 +1,6 @@
 export declare const pending: () => ReturnType<import("svelte").Snippet>;
 export declare const failed: (e: unknown, retry?: () => void) => ReturnType<import("svelte").Snippet>;
+/** An empty component that only exists to export common snippets */
 declare const Snippets: import("svelte").Component<Record<string, never>, {}, "">;
 type Snippets = ReturnType<typeof Snippets>;
 export default Snippets;

package/dist/Components/Contexts/ContextMenu.svelte

@@ -1,11 +1,17 @@
 <svelte:options runes />
 
+<!-- 
+@component
+
+
+ -->
 <script lang="ts">
 	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
 	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { getContext, tick } from 'svelte';
+	import { getContext, tick, untrack } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import ContextMenuOption from './ContextMenuOption.svelte';
+	import type { MaybeFocusable } from './MaybeFocusable.js';
 
 	const contextMenuContext = getContext<ContextMenuContext>(ContextMenuContext.identifier);
 
@@ -36,8 +42,8 @@
 			.catch(devCatch);
 	}
 
-	let menuEl: HTMLDivElement | undefined = $state();
-	function onPageClick(e: MouseEvent) {
+	let menuEl = $state<HTMLUListElement | undefined>();
+	function closeOnClickOutside(e: MouseEvent) {
 		if (!menuEl) {
 			return;
 		}
@@ -46,14 +52,81 @@
 		}
 		contextMenuContext.closeMenu();
 	}
+
+	let previousElement = $state<MaybeFocusable | null | undefined>();
+
+	$effect.pre(() => {
+		if (contextMenuContext.showMenu) {
+			untrack(() => {
+				previousElement = document.activeElement as MaybeFocusable;
+			});
+		}
+	});
+
+	function refocusPrevious() {
+		previousElement?.focus?.();
+	}
+
+	function focusNext() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		const found = items.at((index + 1) % items.length);
+		if (!found) {
+			console.warn(`could not find next item`);
+		}
+		found?.focus();
+	}
+
+	function focusPrev() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+
+		const found = items.at((index - 1 + items.length) % items.length);
+		if (!found) {
+			console.warn('could not find prev item');
+		}
+		found?.focus();
+	}
 </script>
 
-<svelte:body onclick={onPageClick} />
+<svelte:body onclick={closeOnClickOutside} />
 
 {#if contextMenuContext.showMenu}
-	<div transition:fade={{ duration: 50 }} bind:this={menuEl} style="top: {_y}px; left: {_x}px;">
-		{#each contextMenuContext.items as item (item)}
+	<ul
+		transition:fade={{ duration: 50 }}
+		bind:this={menuEl}
+		style="top: {_y}px; left: {_x}px;"
+		role="menu"
+		aria-label="Context menu"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				contextMenuContext.closeMenu();
+				refocusPrevious();
+			} else if (e.key == 'ArrowUp') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusPrev();
+			} else if (e.key == 'ArrowDown') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusNext();
+			}
+		}}
+	>
+		{#each contextMenuContext.items as item, index (item)}
 			<ContextMenuOption
+				{index}
 				disabled={item.disabled}
 				onclick={() => {
 					item.callback();
@@ -62,17 +135,23 @@
 				text={item.text}
 			/>
 		{/each}
-	</div>
+	</ul>
 {/if}
 
 <style>
-	div {
+	ul {
+		padding: 4px;
 		position: fixed;
 		display: grid;
 		border: 1px solid #0003;
 		box-shadow: 2px 2px 5px 0px #0002;
+		gap: 4px;
 		background: white;
 		z-index: 9999;
 		line-height: initial;
 	}
+
+	ul:focus {
+		outline: none;
+	}
 </style>

package/dist/Components/Contexts/ContextMenuOption.svelte

@@ -1,21 +1,40 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { tick } from 'svelte';
 	import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
 
 	let {
 		text = $bindable(''),
+		index,
 		disabled = false,
 		onclick,
-		children
+		children,
 	}: ContextMenuOptionProps = $props();
+
+	let element = $state<HTMLButtonElement | undefined>();
+
+	$effect(() => {
+		void element;
+		if (index == 0) {
+			tick()
+				.then(() => {
+					if (element) {
+						element.focus();
+					}
+				})
+				.catch(devCatch);
+		}
+	});
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
+<button
 	class="context-menu-item"
+	role="menuitem"
 	class:disabled
+	tabindex={index}
+	bind:this={element}
 	onclick={(e) => {
 		e.stopImmediatePropagation();
 		e.stopPropagation();
@@ -28,9 +47,11 @@
 	{:else if children}
 		{@render children()}
 	{/if}
-</div>
+</button>
 
-<style>div {
+<style>button {
+  background-color: #ffffff;
+  border: none;
   padding: 4px 15px;
   cursor: default;
   font-size: 14px;
@@ -40,14 +61,19 @@
   user-select: none;
 }
 
-div:hover {
+button:focus,
+button:focus-within {
+  outline: solid 1px #259fc7;
+}
+
+button:hover {
   background: rgba(0, 0, 0, 0.1333333333);
 }
 
-div.disabled {
+button.disabled {
   color: rgba(0, 0, 0, 0.4);
 }
 
-div.disabled:hover {
+button.disabled:hover {
   background: #ffffff;
 }</style>

package/dist/Components/Contexts/ContextMenuOptionProps.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 export interface ContextMenuOptionProps {
+    index: number;
     text?: string;
     disabled?: boolean | undefined;
     onclick?: (e: MouseEvent) => void;

package/dist/Components/Contexts/MaybeFocusable.d.ts

@@ -0,0 +1,3 @@
+export interface MaybeFocusable {
+    focus?: () => void;
+}

package/dist/Components/Contexts/MaybeFocusable.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Contexts/Toast.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import { ColourSet } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import { Validity } from '../../Types/Internal/Validity.js';
@@ -14,7 +17,9 @@
 	let { toast, copy }: ToastProps = $props();
 </script>
 
-<article
+<output
+	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
+	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
 	class:info={toast.result == Validity.Info}
 	class:success={toast.result == Validity.Valid}
 	class:warning={toast.result == Validity.Warning}
@@ -31,7 +36,10 @@
 					colourSet={ColourSet.Auxiliary}
 				/>
 			{:else}
-				<Icon name="info" size={Size.MediumLarge} />
+				<Icon
+					name="info"
+					size={Size.MediumLarge}
+				/>
 			{/if}
 		</div>
 		<span>{toast.message}</span>
@@ -48,36 +56,36 @@
 			</div>
 		{/if}
 	</div>
-</article>
+</output>
 
-<style>article {
+<style>output {
   font-weight: 700;
   font-size: 1.125rem;
   padding: 0.75rem;
   border-radius: 4px;
 }
-article.info, article.success {
+output.info, output.success {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #259fc7;
 }
-article.warning {
+output.warning {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #e7b500;
 }
-article.error {
+output.error {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #aa1414;
 }
-article > div {
+output > div {
   display: flex;
   flex-flow: row nowrap;
   gap: 0.75rem;
   align-items: center;
 }
-article span {
+output span {
   text-wrap: nowrap;
   word-break: keep-all;
   overflow: hidden;

package/dist/Components/HorizontalTabGroup.svelte

@@ -4,8 +4,6 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
-	import { dev } from '$app/environment';
-
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 	let {
@@ -16,27 +14,6 @@
 		noRadius = false,
 		grow = false,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
-
-	$effect(() => {
-		if (!dev) {
-			return;
-		}
-		for (const tab of tabs) {
-			if (tab.debug) {
-				$inspect(
-					tab.label,
-					tab.content,
-					tab.onclick,
-					tab.args,
-					tab.iconLeft,
-					tab.iconRight,
-					tab.isValid,
-					tab.disabled,
-					tab.visible
-				);
-			}
-		}
-	});
 </script>
 
 <div

package/dist/Components/NumberInput.svelte

@@ -31,11 +31,10 @@
 		oninput,
 
 		inputRef = $bindable(),
-		'data-type': dataType
+		'data-type': dataType,
 	}: NumberInputProps = $props();
 
-	// HACK cannot alter signature because it's passed by a use: directive
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	// NOTE cannot alter signature because it's passed by a use: directive
 	function numberValidator(_node: HTMLInputElement, _newValue: number | null) {
 		return {
 			update(newValue: number) {
@@ -43,7 +42,7 @@
 				const overMaximum = max != undefined && max < newValue;
 
 				value = isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue;
-			}
+			},
 		};
 	}
 
@@ -69,13 +68,18 @@
 				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
 			>
 			{#if variant === InputVariant.Default}
-				<span class="border" class:invalid={isInvalid}
+				<span
+					class="border"
+					class:invalid={isInvalid}
 					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
 				>
 			{/if}
 		{/if}
 		<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-		<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+		<div
+			class="icon-container"
+			class:for-modal={variant == InputVariant.Modal}
+		>
 			{#if leftIcon}
 				<Icon
 					name={leftIcon.name}
@@ -128,8 +132,9 @@
 				/>
 			{/if}
 			{#if labelRight}
-				<span class="right-label inset" class:for-modal={variant == InputVariant.Modal}
-					>{labelRight}</span
+				<span
+					class="right-label inset"
+					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
 				>
 			{/if}
 		</div>

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte

@@ -46,29 +46,37 @@
 			tableContext.focusStartIsBeingEdited
 	);
 
+	function handleEditable(isEditable: boolean): Promise<void> {
+		if (isEditable) {
+			return tick().then(() => {
+				modalLock = true;
+			});
+		} else {
+			if (modalLock) {
+				return tick().then(() => {
+					if (!tableContext.singleClickEditing) {
+						tableContext.focusStartIsBeingEdited = false;
+					}
+					modalLock = false;
+				});
+			}
+
+			return Promise.resolve();
+		}
+	}
+
 	$effect(() => {
 		void editable;
 		if (wantsToBeEdited) {
-			editable
-				.then((isEditable) => {
-					if (isEditable) {
-						return tick().then(() => {
-							modalLock = true;
-						});
-					} else {
-						if (modalLock) {
-							return tick().then(() => {
-								if (!tableContext.singleClickEditing) {
-									tableContext.focusStartIsBeingEdited = false;
-								}
-								modalLock = false;
-							});
-						}
-
-						return;
-					}
-				})
-				.catch(devCatch);
+			if (editable instanceof Promise) {
+				editable
+					.then((isEditable) => {
+						return handleEditable(isEditable);
+					})
+					.catch(devCatch);
+			} else {
+				handleEditable(editable).catch(devCatch);
+			}
 		} else {
 			tick()
 				.then(() => {

package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte

@@ -89,71 +89,40 @@
 
 	let isBeingEdited = $state(false);
 
-	/*
-	 	$effect(() => {
-		void editable;
-		if (wantsToBeEdited) {
-			if (editable) {
-				tick()
-					.then(() => {
-						untrack(() => {
-							isBeingEdited = true;
-						});
-					})
-					.catch(devCatch);
-			} else {
-				tick()
-					.then(() => {
-						untrack(() => {
-							tableContext.focusStartIsBeingEdited = false;
-						});
-					})
-					.catch(devCatch);
-			}
+	function handleIsEditable(isEditable: boolean): Promise<void> {
+		if (isEditable) {
+			return tick().then(() => {
+				isBeingEdited = true;
+			});
 		} else {
 			if (isBeingEdited) {
-				tick()
+				return tick()
 					.then(() => {
-						untrack(() => {
-							if (!tableContext.singleClickEditing) {
-								tableContext.focusStartIsBeingEdited = false;
-							}
+						if (!tableContext.singleClickEditing) {
+							tableContext.focusStartIsBeingEdited = false;
+						}
 
-							isBeingEdited = false;
-						});
+						isBeingEdited = false;
 					})
 					.catch(devCatch);
 			}
 		}
-	});
-	*/
+		return Promise.resolve();
+	}
+
 	$effect(() => {
 		void editable;
 		if (wantsToBeEdited) {
-			editable
-				.then((isEditable) => {
-					if (isEditable) {
-						return tick().then(() => {
-							isBeingEdited = true;
-						});
-					} else {
-						if (isBeingEdited) {
-							return tick()
-								.then(() => {
-									if (!tableContext.singleClickEditing) {
-										tableContext.focusStartIsBeingEdited = false;
-									}
-
-									isBeingEdited = false;
-								})
-								.catch(devCatch);
-						}
-					}
-
-					return;
-				})
+			if (editable instanceof Promise) {
+				editable
+					.then((isEditable) => {
+						return handleIsEditable(isEditable);
+					})
 
-				.catch(devCatch);
+					.catch(devCatch);
+			} else {
+				handleIsEditable(editable).catch(devCatch);
+			}
 		} else {
 			tick()
 				.then(() => {