@lavalogic/scoria 0.40.31 → 0.40.33

package/dist/Components/Nav/Nav.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
 >import { m as i18n } from "../../paraglide/messages.js";
 import { afterNavigate } from "$app/navigation";
 import { Size } from "../../Types/Internal/Size.js";
@@ -27,71 +27,71 @@ afterNavigate(() => {
 	showServicesDialog = false;
 	showUserDialog = false;
 });
-</script>
-
-<nav class="main-navigation">
-	{#if typeof brand === 'string'}
-		<span class="nav-link brand">{brand}</span>
-	{:else if brand}
-		<span class="nav-link brand">{@render brand()}</span>
-	{/if}
-
-	<div class="nav-link">
-		<button
-			onclick={() => {
-				showServicesDialog = !showServicesDialog;
-			}}
-		>
-			<div class="delimited">
-				<Icon
-					name="block-menu"
-					size={Size.Medium}
-				/>
-				<span>{i18n['scoria.label.services']()}</span>
-			</div>
-		</button>
-
-		{#if showServicesDialog}
-			<ServicesNav
-				onclose={() => {
-					showServicesDialog = false;
-				}}
-				{serviceTabs}
-				{selectedServiceTab}
-			/>
-		{/if}
-	</div>
-
-	<div class="nav-search-container"></div>
-	{#if extras}
-		<div class="nav-link spaced selects">
-			{@render extras()}
-		</div>
-	{/if}
-
-	<div>
-		<button
-			onclick={() => {
-				showUserDialog = !showUserDialog;
-			}}
-		>
-			<span class="nav-link padded">
-				<span
-					class="user-icon"
-					class:visible={hasLetters}
-					class:single-letter={singleLetter}>{userIcon}</span
-				>
-				<span class="user-name">{userName}</span>
-			</span>
-		</button>
-		{#if showUserDialog}
-			{@render userDialog(() => {
-				showUserDialog = false;
-			})}
-		{/if}
-	</div>
-</nav>
-
+</script>
+
+<nav class="main-navigation">
+	{#if typeof brand === 'string'}
+		<span class="nav-link brand">{brand}</span>
+	{:else if brand}
+		<span class="nav-link brand">{@render brand()}</span>
+	{/if}
+
+	<div class="nav-link">
+		<button
+			onclick={() => {
+				showServicesDialog = !showServicesDialog;
+			}}
+		>
+			<div class="delimited">
+				<Icon
+					name="block-menu"
+					size={Size.Medium}
+				/>
+				<span>{i18n['scoria.label.services']()}</span>
+			</div>
+		</button>
+
+		{#if showServicesDialog}
+			<ServicesNav
+				onclose={() => {
+					showServicesDialog = false;
+				}}
+				{serviceTabs}
+				{selectedServiceTab}
+			/>
+		{/if}
+	</div>
+
+	<div class="nav-search-container"></div>
+	{#if extras}
+		<div class="nav-link spaced selects">
+			{@render extras()}
+		</div>
+	{/if}
+
+	<div>
+		<button
+			onclick={() => {
+				showUserDialog = !showUserDialog;
+			}}
+		>
+			<span class="nav-link padded">
+				<span
+					class="user-icon"
+					class:visible={hasLetters}
+					class:single-letter={singleLetter}>{userIcon}</span
+				>
+				<span class="user-name">{userName}</span>
+			</span>
+		</button>
+		{#if showUserDialog}
+			{@render userDialog(() => {
+				showUserDialog = false;
+			})}
+		{/if}
+	</div>
+</nav>
+
 <style>div.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -214,4 +214,4 @@ div.delimited {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { page } from "$app/state";
 import { Colour } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
@@ -21,40 +21,40 @@ const activePath = $derived.by(() => {
 	}
 	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>
-
+</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;
@@ -78,4 +78,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>

package/dist/Components/Nav/NavTab.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
+<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";
@@ -15,46 +15,46 @@ 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>
-
+</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;
 }
@@ -87,4 +87,4 @@ const visible = useAsyncFlag(() => option.visible, true);
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { dev } from "$app/environment";
 import { resolve } from "$app/paths";
 import { page } from "$app/state";
@@ -42,65 +42,65 @@ function safeHref(path) {
 	}
 	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}
-
+</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;
@@ -168,4 +168,4 @@ button .spacer,
 a .spacer {
   width: 0.5rem;
   flex-shrink: 0;
-}</style>
+}</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
 >import { m as i18n } from "../../paraglide/messages.js";
 import { devCatch } from "../../Helpers/Helpers.svelte.js";
 import HorizontalTabGroup from "../HorizontalTabGroup.svelte";
@@ -27,50 +27,50 @@ $effect(() => {
 		dialog.showModal();
 	}
 });
-</script>
-
-<dialog
-	bind:this={dialogRef}
-	aria-label={i18n['scoria.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={i18n['scoria.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}
-
+</script>
+
+<dialog
+	bind:this={dialogRef}
+	aria-label={i18n['scoria.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={i18n['scoria.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));
@@ -108,4 +108,4 @@ div.services {
   justify-content: stretch;
   height: var(--services-nav-height, min(710px, 80%));
   width: var(--services-nav-width, 800px);
-}</style>
+}</style>