@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,64 +1,60 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { page } from '$app/state';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import { Dimensions } from './Dimensions.js';
-	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
-	import ServiceMenuItem from './ServiceMenuItem.svelte';
-
-	const { title, items, icon }: NavServiceMenuListProps = $props();
-
-	// Only the single most-specific item is active: the longest item path that
-	// the current URL matches. Without this a nested route (e.g.
-	// /reports/manage-reports) would also light up its parent item (/reports).
-	const activePath = $derived.by(() => {
-		const pathname = page.url.pathname;
-		let best: string | null = null;
-		for (const { item } of items) {
-			const path = item.path;
-			if (path && pathname.includes(path) && (best === null || path.length > best.length)) {
-				best = path;
-			}
+<svelte:options runes />
+
+<script lang="ts">import { page } from "$app/state";
+import { Colour } from "../../scss/colours.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Icon from "../Icon.svelte";
+import { Dimensions } from "./Dimensions.js";
+import ServiceMenuItem from "./ServiceMenuItem.svelte";
+const { title, items, icon } = $props();
+// Only the single most-specific item is active: the longest item path that
+// the current URL matches. Without this a nested route (e.g.
+// /reports/manage-reports) would also light up its parent item (/reports).
+const activePath = $derived.by(() => {
+	const pathname = page.url.pathname;
+	let best = null;
+	for (const { item } of items) {
+		const path = item.path;
+		if (path && pathname.includes(path) && (best === null || path.length > best.length)) {
+			best = path;
 		}
-		return best;
-	});
-</script>
-
-<div
-	class="wrapper"
-	style="--icon-column-width: {Dimensions.smallPanelWidth}rem"
-	role="group"
-	aria-label={title}
->
-	<h3>
-		<div class="icon">
-			{#if icon}
-				<Icon
-					size={Size.Large}
-					colour={Colour['$font-primary']}
-					{...icon}
-				/>
-			{/if}
-		</div>
-		{title}
-	</h3>
-
-	<div
-		class="items"
-		role="list"
-	>
-		{#each items as { item } (item.label)}
-			<ServiceMenuItem
-				{item}
-				selected={item.path != null && item.path === activePath}
-			/>
-		{/each}
-	</div>
-</div>
-
+	}
+	return best;
+});
+</script>
+
+<div
+	class="wrapper"
+	style="--icon-column-width: {Dimensions.smallPanelWidth}rem"
+	role="group"
+	aria-label={title}
+>
+	<h3>
+		<div class="icon">
+			{#if icon}
+				<Icon
+					size={Size.Large}
+					colour={Colour['$font-primary']}
+					{...icon}
+				/>
+			{/if}
+		</div>
+		{title}
+	</h3>
+
+	<div
+		class="items"
+		role="list"
+	>
+		{#each items as { item } (item.label)}
+			<ServiceMenuItem
+				{item}
+				selected={item.path != null && item.path === activePath}
+			/>
+		{/each}
+	</div>
+</div>
+
 <style>h3 {
   font-size: 1.5rem;
   display: flex;
@@ -82,4 +78,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>

package/dist/Components/Nav/NavTab.svelte

@@ -1,64 +1,60 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { NavTabProps } from './NavTabProps.js';
-
-	// `Args` defaults to `unknown` on the props interface, but we still
-	// pass the generic explicitly so consumers using the component as
-	// `<NavTab>` inside a typed snippet receive the same `Args` rune.
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
-	let { option, selected }: NavTabProps<Args> = $props();
-
-	const isValid = useAsyncFlag(() => option.isValid, true);
-	const disabled = useAsyncFlag(() => option.disabled, false);
-	const visible = useAsyncFlag(() => option.visible, true);
-</script>
-
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	role="tab"
-	aria-selected={selected}
-	aria-label={option.label}
-	disabled={disabled.value}
-	class:invalid={!isValid.value}
-	class:hidden={!visible.value}
->
-	<Icon
-		name="nothing"
-		colour={Colour['$brand-primary']}
-		size={Size.MediumLarge}
-		{...option.iconLeft}
-	/>
-
-	{option.label}
-	{#if option.isValid === false}
-		<Icon
-			name="error"
-			colour={Colour['$error-border']}
-			size={Size.MediumLarge}
-		/>
-	{:else}
-		<Icon
-			name="nothing"
-			colour={Colour['$brand-primary']}
-			size={Size.MediumLarge}
-			{...option.iconRight}
-		/>
-	{/if}
-</button>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
+import { Colour } from "../../scss/colours.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Icon from "../Icon.svelte";
+// `Args` defaults to `unknown` on the props interface, but we still
+// pass the generic explicitly so consumers using the component as
+// `<NavTab>` inside a typed snippet receive the same `Args` rune.
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+let { option, selected } = $props();
+const isValid = useAsyncFlag(() => option.isValid, true);
+const disabled = useAsyncFlag(() => option.disabled, false);
+const visible = useAsyncFlag(() => option.visible, true);
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	role="tab"
+	aria-selected={selected}
+	aria-label={option.label}
+	disabled={disabled.value}
+	class:invalid={!isValid.value}
+	class:hidden={!visible.value}
+>
+	<Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.MediumLarge}
+		{...option.iconLeft}
+	/>
+
+	{option.label}
+	{#if option.isValid === false}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.MediumLarge}
+		/>
+	{:else}
+		<Icon
+			name="nothing"
+			colour={Colour['$brand-primary']}
+			size={Size.MediumLarge}
+			{...option.iconRight}
+		/>
+	{/if}
+</button>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -91,4 +87,4 @@
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,114 +1,106 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { dev } from '$app/environment';
-	import { resolve } from '$app/paths';
-	import { page } from '$app/state';
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import { Dimensions } from './Dimensions.js';
-	import type { SideMenuItemProps } from './SideMenuItemProps.js';
-
-	const { item, selected: maybeSelected }: SideMenuItemProps = $props();
-
-	// `page.url.pathname` carries the configured base path; `item.path`
-	// does not. Match with `includes` so the comparison holds whether or
-	// not a base path (e.g. a `URI_PREFIX` build arg) is set.
-	const selected = $derived(
-		maybeSelected ?? (item.path ? page.url.pathname.includes(item.path) : false)
-	);
-
-	const visible = useAsyncFlag(() => item.visible, true);
-
-	/**
-	 * Constrain the rendered `href` to safe, relative paths only, then
-	 * prefix the SvelteKit `base` path.
-	 *
-	 * `item.path` is typed as the SvelteKit `Pathname` brand at the
-	 * boundary, but the property is still a `string` at runtime. To
-	 * keep the trust boundary tight we reject anything that contains
-	 * a URL scheme (anything matching `^[a-z][a-z0-9+.-]*:`) and any
-	 * input that does not start with `/`. Disallowed values resolve
-	 * to `#` so the link is harmless if a future consumer supplies an
-	 * unsafe value.
-	 *
-	 * The validated path is run through `resolve` so the rendered `href`
-	 * honours a configured base path (e.g. a `URI_PREFIX` build arg).
-	 * `item.path` is the bare app-relative route; without the prefix the
-	 * `<a href>` would point outside the deployed sub-path.
-	 */
-	function safeHref(path: string): string {
-		if (typeof path !== 'string' || path.length === 0) {
-			return '#';
-		}
-		if (!path.startsWith('/')) {
-			return '#';
-		}
-		if (/^[a-z][a-z0-9+.-]*:/i.test(path)) {
-			return '#';
-		}
-		return resolve(path as '/');
+<svelte:options runes />
+
+<script lang="ts">import { dev } from "$app/environment";
+import { resolve } from "$app/paths";
+import { page } from "$app/state";
+import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Icon from "../Icon.svelte";
+import { Dimensions } from "./Dimensions.js";
+const { item, selected: maybeSelected } = $props();
+// `page.url.pathname` carries the configured base path; `item.path`
+// does not. Match with `includes` so the comparison holds whether or
+// not a base path (e.g. a `URI_PREFIX` build arg) is set.
+const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname.includes(item.path) : false));
+const visible = useAsyncFlag(() => item.visible, true);
+/**
+* Constrain the rendered `href` to safe, relative paths only, then
+* prefix the SvelteKit `base` path.
+*
+* `item.path` is typed as the SvelteKit `Pathname` brand at the
+* boundary, but the property is still a `string` at runtime. To
+* keep the trust boundary tight we reject anything that contains
+* a URL scheme (anything matching `^[a-z][a-z0-9+.-]*:`) and any
+* input that does not start with `/`. Disallowed values resolve
+* to `#` so the link is harmless if a future consumer supplies an
+* unsafe value.
+*
+* The validated path is run through `resolve` so the rendered `href`
+* honours a configured base path (e.g. a `URI_PREFIX` build arg).
+* `item.path` is the bare app-relative route; without the prefix the
+* `<a href>` would point outside the deployed sub-path.
+*/
+function safeHref(path) {
+	if (typeof path !== "string" || path.length === 0) {
+		return "#";
 	}
-</script>
-
-{#if item.callback}
-	<button
-		onclick={() => {
-			item.callback();
-		}}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible.value}
-	>
-		<!-- <div class="selected-marker"></div> -->
-		<div class="icon-wrapper">
-			{#if item.iconName}
-				<Icon
-					name={item.iconName}
-					size={Size.Medium}
-					label={item.label}
-				/>
-			{/if}
-		</div>
-		<div class="spacer"></div>
-		<div class="text">
-			<div class="label">{item.label}</div>
-			{#if item.subtitle}
-				<div class="subtitle">{item.subtitle}</div>
-			{/if}
-		</div></button
-	>
-{:else if item.path}
-	<a
-		href={safeHref(item.path)}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		aria-current={selected ? 'page' : undefined}
-		class:selected
-		class:hidden={!visible.value}
-	>
-		<!-- <div class="selected-marker"></div> -->
-		<div class="icon-wrapper">
-			{#if item.iconName}
-				<Icon
-					name={item.iconName}
-					size={Size.Medium}
-					label={item.label}
-				/>
-			{/if}
-		</div>
-		<div class="spacer"></div>
-		<div class="text">
-			<div class="label">{item.label}</div>
-			{#if item.subtitle}
-				<div class="subtitle">{item.subtitle}</div>
-			{/if}
-		</div></a
-	>
-{:else if dev}
-	Error: Callback had neither callback nor path
-{/if}
-
+	if (!path.startsWith("/")) {
+		return "#";
+	}
+	if (/^[a-z][a-z0-9+.-]*:/i.test(path)) {
+		return "#";
+	}
+	return resolve(path);
+}
+</script>
+
+{#if item.callback}
+	<button
+		onclick={() => {
+			item.callback();
+		}}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible.value}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></button
+	>
+{:else if item.path}
+	<a
+		href={safeHref(item.path)}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		aria-current={selected ? 'page' : undefined}
+		class:selected
+		class:hidden={!visible.value}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></a
+	>
+{:else if dev}
+	Error: Callback had neither callback nor path
+{/if}
+
 <style>button.hidden,
 a.hidden {
   display: none !important;
@@ -174,4 +166,4 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,82 +1,75 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import type { TabOption } from '../../Types/Internal/TabOption.js';
-	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
-	import NavTab from './NavTab.svelte';
-	import type { ServicesNavProps } from './ServicesNavProps.js';
-
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
-	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps<Args> = $props();
-
-	let dialogRef: HTMLDialogElement | undefined = $state.raw();
-
-	function fireClose(): void {
-		const result = onclose();
-		if (result instanceof Promise) {
-			result.catch((e: unknown) => {
-				devCatch(e);
-			});
-		}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>import { devCatch } from "../../Helpers/Helpers.svelte.js";
+import HorizontalTabGroup from "../HorizontalTabGroup.svelte";
+import NavTab from "./NavTab.svelte";
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+const { onclose, serviceTabs, selectedServiceTab } = $props();
+let dialogRef = $state.raw();
+function fireClose() {
+	const result = onclose();
+	if (result instanceof Promise) {
+		result.catch((e) => {
+			devCatch(e);
+		});
 	}
-
-	// Open the dialog as soon as we mount; native showModal() gives us a
-	// real focus trap, Escape-to-close, and inert background without any
-	// manual aria-modal / tabindex bookkeeping.
-	$effect(() => {
-		const dialog = dialogRef;
-		if (dialog && !dialog.open) {
-			dialog.showModal();
-		}
-	});
-</script>
-
-<dialog
-	bind:this={dialogRef}
-	aria-label="Services"
-	class="overlay"
-	oncancel={(e) => {
-		// Escape fires `cancel` first; prevent the native close so we
-		// fully delegate to the parent (it owns the visibility flag).
-		e.preventDefault();
-		fireClose();
-	}}
-	onclick={(e) => {
-		// Native <dialog> click target is the dialog element itself when
-		// the user clicks the backdrop; clicks on inner content bubble
-		// up with a different target.
-		if (dialogRef === e.target) {
-			fireClose();
-		}
-	}}
->
-	<div
-		role="navigation"
-		aria-label="Services tabs"
-		class="services"
-	>
-		<HorizontalTabGroup
-			name="nav-services"
-			tabs={serviceTabs}
-			selected={selectedServiceTab}
-			tabComponent={navTab}
-			noRadius
-			grow
-		/>
-	</div>
-</dialog>
-
-{#snippet navTab(option: TabOption<Args>, selected: boolean)}
-	<NavTab
-		{option}
-		{selected}
-	/>
-{/snippet}
-
+}
+// Open the dialog as soon as we mount; native showModal() gives us a
+// real focus trap, Escape-to-close, and inert background without any
+// manual aria-modal / tabindex bookkeeping.
+$effect(() => {
+	const dialog = dialogRef;
+	if (dialog && !dialog.open) {
+		dialog.showModal();
+	}
+});
+</script>
+
+<dialog
+	bind:this={dialogRef}
+	aria-label="Services"
+	class="overlay"
+	oncancel={(e) => {
+		// Escape fires `cancel` first; prevent the native close so we
+		// fully delegate to the parent (it owns the visibility flag).
+		e.preventDefault();
+		fireClose();
+	}}
+	onclick={(e) => {
+		// Native <dialog> click target is the dialog element itself when
+		// the user clicks the backdrop; clicks on inner content bubble
+		// up with a different target.
+		if (dialogRef === e.target) {
+			fireClose();
+		}
+	}}
+>
+	<div
+		role="navigation"
+		aria-label="Services tabs"
+		class="services"
+	>
+		<HorizontalTabGroup
+			name="nav-services"
+			tabs={serviceTabs}
+			selected={selectedServiceTab}
+			tabComponent={navTab}
+			noRadius
+			grow
+		/>
+	</div>
+</dialog>
+
+{#snippet navTab(option: TabOption<Args>, selected: boolean)}
+	<NavTab
+		{option}
+		{selected}
+	/>
+{/snippet}
+
 <style>dialog.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -115,4 +108,4 @@ div.services {
   justify-content: stretch;
   height: var(--services-nav-height, min(710px, 80%));
   width: var(--services-nav-width, 800px);
-}</style>
+}</style>