@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,45 +1,45 @@
-<svelte:options runes />
-
-<script lang="ts">
-	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();
-</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} />
-		{/each}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	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();
+</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} />
+		{/each}
+	</div>
+</div>
+
 <style>h3 {
   font-size: 1.5rem;
   display: flex;
@@ -63,4 +63,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>

package/dist/Components/Nav/NavTab.svelte

@@ -1,64 +1,64 @@
-<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';
+	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>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -91,4 +91,4 @@
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,114 +1,114 @@
-<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 '/');
-	}
-</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}
-
+<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 '/');
+	}
+</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 +174,4 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,82 +1,82 @@
-<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);
-			});
-		}
-	}
-
-	// 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}
-
+<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);
+			});
+		}
+	}
+
+	// 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 +115,4 @@ div.services {
   justify-content: stretch;
   height: var(--services-nav-height, min(710px, 80%));
   width: var(--services-nav-width, 800px);
-}</style>
+}</style>