@lavalogic/scoria 0.38.11 → 0.38.12

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>

package/dist/Components/NumberInput.svelte

@@ -1,159 +1,159 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength } from '../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { NumberInputProps } from './NumberInputProps.js';
-	let {
-		id,
-		value = $bindable(null),
-		min,
-		max,
-		labelTop,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		decimal = false,
-		invalid = false,
-		showErrorColours = true,
-		disabled,
-		optional,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-
-		onblur,
-		onfocus,
-		// No default `onkeydown` - see TextInput.svelte for the rationale.
-		// The legacy default (`passthrough`) blurred the input on every
-		// alphanumeric keystroke and made the field unusable.
-		onkeydown,
-		oninput,
-
-		inputRef = $bindable(),
-		'data-type': dataType,
-	}: NumberInputProps = $props();
-
-	function clamp(e: Event): void {
-		const raw = (e.target as HTMLInputElement).value;
-		if (raw === '') {
-			if (value !== null) {
-				value = null;
-			}
-			return;
-		}
-		const next = Number(raw);
-		if (isNaN(next)) {
-			return;
-		}
-		const lo = min ?? -Infinity;
-		const hi = max ?? Infinity;
-		const clamped = Math.max(lo, Math.min(hi, next));
-		if (clamped !== value) {
-			value = clamped;
-		}
-	}
-
-	const isInvalid = $derived(showErrorColours && ((required && value == null) || invalid));
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label
-		class:for-modal={variant == InputVariant.Modal}
-		class:for-table={variant == InputVariant.Table}
-	>
-		{#if labelTop}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div
-			class="icon-container"
-			class:for-modal={variant == InputVariant.Modal}
-		>
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					colour={leftIcon.colour}
-					float
-					left={cssLength('0.75rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-					clickable={!!onLeftIconClick}
-					onclick={onLeftIconClick}
-				/>
-			{/if}
-			<input
-				{id}
-				class:invalid={isInvalid}
-				class:for-default={variant === InputVariant.Default}
-				data-type={dataType}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined || (labelRight && variant == InputVariant.Modal)}
-				class:for-modal={variant == InputVariant.Modal}
-				type="number"
-				aria-invalid={isInvalid || undefined}
-				bind:value
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				oninput={(e) => {
-					clamp(e);
-					oninput?.(e);
-				}}
-				bind:this={inputRef}
-				{placeholder}
-				{required}
-				{disabled}
-				{min}
-				{max}
-				step={decimal ? 0.01 : 1}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					colour={rightIcon.colour}
-					float
-					right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-					clickable={!!onRightIconClick}
-					onclick={onRightIconClick}
-				/>
-			{/if}
-			{#if labelRight}
-				<span
-					class="right-label inset"
-					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-				>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { NumberInputProps } from './NumberInputProps.js';
+	let {
+		id,
+		value = $bindable(null),
+		min,
+		max,
+		labelTop,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = true,
+		disabled,
+		optional,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		onblur,
+		onfocus,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
+		oninput,
+
+		inputRef = $bindable(),
+		'data-type': dataType,
+	}: NumberInputProps = $props();
+
+	function clamp(e: Event): void {
+		const raw = (e.target as HTMLInputElement).value;
+		if (raw === '') {
+			if (value !== null) {
+				value = null;
+			}
+			return;
+		}
+		const next = Number(raw);
+		if (isNaN(next)) {
+			return;
+		}
+		const lo = min ?? -Infinity;
+		const hi = max ?? Infinity;
+		const clamped = Math.max(lo, Math.min(hi, next));
+		if (clamped !== value) {
+			value = clamped;
+		}
+	}
+
+	const isInvalid = $derived(showErrorColours && ((required && value == null) || invalid));
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label
+		class:for-modal={variant == InputVariant.Modal}
+		class:for-table={variant == InputVariant.Table}
+	>
+		{#if labelTop}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div
+			class="icon-container"
+			class:for-modal={variant == InputVariant.Modal}
+		>
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					colour={leftIcon.colour}
+					float
+					left={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+					clickable={!!onLeftIconClick}
+					onclick={onLeftIconClick}
+				/>
+			{/if}
+			<input
+				{id}
+				class:invalid={isInvalid}
+				class:for-default={variant === InputVariant.Default}
+				data-type={dataType}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined || (labelRight && variant == InputVariant.Modal)}
+				class:for-modal={variant == InputVariant.Modal}
+				type="number"
+				aria-invalid={isInvalid || undefined}
+				bind:value
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				oninput={(e) => {
+					clamp(e);
+					oninput?.(e);
+				}}
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+				{min}
+				{max}
+				step={decimal ? 0.01 : 1}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					colour={rightIcon.colour}
+					float
+					right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+					clickable={!!onRightIconClick}
+					onclick={onRightIconClick}
+				/>
+			{/if}
+			{#if labelRight}
+				<span
+					class="right-label inset"
+					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+				>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -393,4 +393,4 @@ input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}</style>
+}</style>

package/dist/Components/PageHeading.svelte

@@ -1,27 +1,27 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import type { PageHeadingProps } from './PageHeadingProps.js';
-
-	let { children, subtitle, extras }: PageHeadingProps = $props();
-</script>
-
-<div class="outer">
-	<div class="column">
-		<h1>{@render children()}</h1>
-		<div class="one-line">
-			{#if subtitle}
-				{@render subtitle()}
-			{/if}
-		</div>
-	</div>
-	{#if extras}
-		<div class="buttons">
-			{@render extras()}
-		</div>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import type { PageHeadingProps } from './PageHeadingProps.js';
+
+	let { children, subtitle, extras }: PageHeadingProps = $props();
+</script>
+
+<div class="outer">
+	<div class="column">
+		<h1>{@render children()}</h1>
+		<div class="one-line">
+			{#if subtitle}
+				{@render subtitle()}
+			{/if}
+		</div>
+	</div>
+	{#if extras}
+		<div class="buttons">
+			{@render extras()}
+		</div>
+	{/if}
+</div>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -65,4 +65,4 @@
   fill: #647d8e;
   color: #647d8e;
   font-size: 0.875rem;
-}</style>
+}</style>