@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/Nav/NavTab.svelte

@@ -1,93 +1,93 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch } from '../../Helpers/Helpers.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';
-
-	let { option, selected }: NavTabProps = $props();
-
-	let disabled = $state(true);
-	let visible = $state(true);
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (typeof option.isValid === 'boolean') {
-			isValid = option.isValid;
-		} else {
-			option.isValid
-				?.then((v) => {
-					isValid = v;
-				})
-				.catch(devCatch);
-		}
-	});
-	$effect(() => {
-		if (typeof option.disabled === 'boolean') {
-			disabled = option.disabled;
-		} else if (option.disabled == undefined) {
-			disabled = false;
-		} else {
-			option.disabled
-				.then((v) => {
-					disabled = v;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	$effect(() => {
-		if (typeof option.visible === 'boolean') {
-			visible = option.visible;
-		} else if (option.visible == undefined) {
-			visible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	{disabled}
-	class:invalid={!isValid}
-	class:hidden={!visible}
->
-	<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">
+	import { devCatch } from '../../Helpers/Helpers.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';
+
+	let { option, selected }: NavTabProps = $props();
+
+	let disabled = $state(true);
+	let visible = $state(true);
+	let isValid = $state(true);
+
+	$effect(() => {
+		if (typeof option.isValid === 'boolean') {
+			isValid = option.isValid;
+		} else {
+			option.isValid
+				?.then((v) => {
+					isValid = v;
+				})
+				.catch(devCatch);
+		}
+	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled
+				.then((v) => {
+					disabled = v;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = true;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	{disabled}
+	class:invalid={!isValid}
+	class:hidden={!visible}
+>
+	<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;
 }
@@ -120,4 +120,4 @@
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,93 +1,93 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { dev } from '$app/environment';
-	import { resolve } from '$app/paths';
-	import { page } from '$app/state';
-	import { devCatch } from '../../Helpers/Helpers.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();
-
-	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
-
-	let visible = $state(true);
-
-	$effect(() => {
-		if (typeof item.visible === 'boolean') {
-			visible = item.visible;
-		} else if (item.visible == undefined) {
-			visible = true;
-		} else {
-			item.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-{#if item.callback}
-	<button
-		onclick={() => {
-			item.callback();
-		}}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible}
-	>
-		<!-- <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}
-	<!-- FIXME why is this type cast required? -->
-	<a
-		href={resolve(item.path as '/')}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible}
-	>
-		<!-- <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 { devCatch } from '../../Helpers/Helpers.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();
+
+	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
+
+	let visible = $state(true);
+
+	$effect(() => {
+		if (typeof item.visible === 'boolean') {
+			visible = item.visible;
+		} else if (item.visible == undefined) {
+			visible = true;
+		} else {
+			item.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+{#if item.callback}
+	<button
+		onclick={() => {
+			item.callback();
+		}}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <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}
+	<!-- FIXME why is this type cast required? -->
+	<a
+		href={resolve(item.path as '/')}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <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;
@@ -153,4 +153,4 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,55 +1,55 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import type { TabOption } from '../../Types/Internal/TabOption.js';
-	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
-	import NavTab from './NavTab.svelte';
-	import type { ServicesNavProps } from './ServicesNavProps.js';
-
-	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps = $props();
-
-	let servicesDialogRef: HTMLDivElement | undefined = $state.raw();
-</script>
-
-<div
-	bind:this={servicesDialogRef}
-	role="dialog"
-	tabindex="0"
-	class="overlay"
-	onclick={(e) => {
-		e.stopPropagation();
-		if (servicesDialogRef === e.target) {
-			onclose();
-		}
-	}}
-	onkeydown={(e) => {
-		if (e.key === 'Escape') {
-			onclose();
-		}
-	}}
->
-	<div
-		role="navigation"
-		class="services"
-	>
-		<HorizontalTabGroup
-			name="nav-services"
-			tabs={serviceTabs}
-			selected={selectedServiceTab}
-			tabComponent={navTab}
-			noRadius
-			grow
-		/>
-	</div>
-</div>
-
-{#snippet navTab(option: TabOption<unknown>, selected: boolean)}
-	<NavTab
-		{option}
-		{selected}
-	/>
-{/snippet}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import type { TabOption } from '../../Types/Internal/TabOption.js';
+	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
+	import NavTab from './NavTab.svelte';
+	import type { ServicesNavProps } from './ServicesNavProps.js';
+
+	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps = $props();
+
+	let servicesDialogRef: HTMLDivElement | undefined = $state.raw();
+</script>
+
+<div
+	bind:this={servicesDialogRef}
+	role="dialog"
+	tabindex="0"
+	class="overlay"
+	onclick={(e) => {
+		e.stopPropagation();
+		if (servicesDialogRef === e.target) {
+			onclose();
+		}
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			onclose();
+		}
+	}}
+>
+	<div
+		role="navigation"
+		class="services"
+	>
+		<HorizontalTabGroup
+			name="nav-services"
+			tabs={serviceTabs}
+			selected={selectedServiceTab}
+			tabComponent={navTab}
+			noRadius
+			grow
+		/>
+	</div>
+</div>
+
+{#snippet navTab(option: TabOption<unknown>, selected: boolean)}
+	<NavTab
+		{option}
+		{selected}
+	/>
+{/snippet}
+
 <style>div.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -89,4 +89,4 @@ div.wrapper .row {
   gap: 1.5rem;
   display: flex;
   flex-flow: row nowrap;
-}</style>
+}</style>