@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/NumberInput.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
@@ -26,101 +26,101 @@ function clamp(e) {
 	}
 }
 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;- {i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.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>
-
+</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;- {i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.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%;
@@ -358,4 +358,4 @@ input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}</style>
+}</style>

package/dist/Components/OptionCards.svelte

@@ -1,64 +1,64 @@
-<svelte:options runes />
-
-<!--
-@component
-A single-select group of large, clickable cards — each an optional leading
-icon, a label, and optional helper text. Use it instead of a `SingleSelect`
-when the choices benefit from a sentence of explanation (e.g. picking a
-report's delivery method or output format).
-
-Controlled: pass `selected` and update it in `onchange`. Accessible as a
-native radio group (the radio inputs are visually hidden but focusable).
--->
-<script
-	lang="ts"
-	generics="T"
+<svelte:options runes />
+
+<!--
+@component
+A single-select group of large, clickable cards — each an optional leading
+icon, a label, and optional helper text. Use it instead of a `SingleSelect`
+when the choices benefit from a sentence of explanation (e.g. picking a
+report's delivery method or output format).
+
+Controlled: pass `selected` and update it in `onchange`. Accessible as a
+native radio group (the radio inputs are visually hidden but focusable).
+-->
+<script
+	lang="ts"
+	generics="T"
 >import { Colour } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
 let { name, options, selected, onchange, multiple = false, selectedValues, ontoggle } = $props();
-</script>
-
-<div
-	class="option-cards"
-	role={multiple ? 'group' : 'radiogroup'}
->
-	{#each options as option (option.value)}
-		{@const isSelected = multiple
-			? (selectedValues?.includes(option.value) ?? false)
-			: selected === option.value}
-		<label
-			class="card"
-			class:selected={isSelected}
-		>
-			<input
-				class="native"
-				type={multiple ? 'checkbox' : 'radio'}
-				{name}
-				checked={isSelected}
-				onchange={() => {
-					if (multiple) {
-						ontoggle?.(option.value, !isSelected);
-					} else {
-						void onchange?.(option.value);
-					}
-				}}
-			/>
-			{#if option.icon}
-				<Icon
-					name={option.icon}
-					size={Size.Large}
-					colour={isSelected ? Colour['$brand-primary'] : Colour['$ui-blue-14']}
-				/>
-			{/if}
-			<span class="title">{option.label}</span>
-			{#if option.info}
-				<span class="info">{option.info}</span>
-			{/if}
-		</label>
-	{/each}
-</div>
-
+</script>
+
+<div
+	class="option-cards"
+	role={multiple ? 'group' : 'radiogroup'}
+>
+	{#each options as option (option.value)}
+		{@const isSelected = multiple
+			? (selectedValues?.includes(option.value) ?? false)
+			: selected === option.value}
+		<label
+			class="card"
+			class:selected={isSelected}
+		>
+			<input
+				class="native"
+				type={multiple ? 'checkbox' : 'radio'}
+				{name}
+				checked={isSelected}
+				onchange={() => {
+					if (multiple) {
+						ontoggle?.(option.value, !isSelected);
+					} else {
+						void onchange?.(option.value);
+					}
+				}}
+			/>
+			{#if option.icon}
+				<Icon
+					name={option.icon}
+					size={Size.Large}
+					colour={isSelected ? Colour['$brand-primary'] : Colour['$ui-blue-14']}
+				/>
+			{/if}
+			<span class="title">{option.label}</span>
+			{#if option.info}
+				<span class="info">{option.info}</span>
+			{/if}
+		</label>
+	{/each}
+</div>
+
 <style>.option-cards {
   display: flex;
   flex-flow: row wrap;
@@ -109,4 +109,4 @@ let { name, options, selected, onchange, multiple = false, selectedValues, ontog
 .card:focus-within {
   outline: solid 2px #259fc7;
   outline-offset: 2px;
-}</style>
+}</style>

package/dist/Components/PageHeading.svelte

@@ -1,25 +1,25 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">let { children, subtitle, extras } = $props();
 export {};
-</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>
-
+</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;
@@ -63,4 +63,4 @@ export {};
   fill: #647d8e;
   color: #647d8e;
   font-size: 0.875rem;
-}</style>
+}</style>

package/dist/Components/PasswordInput.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { m as i18n } from "../paraglide/messages.js";
 import { ColourSet } from "../scss/colours.js";
@@ -11,64 +11,64 @@ function toggleVisibility() {
 	showInput = !showInput;
 	inputRef?.focus();
 }
-</script>
-
-<div class="error-wrapper">
-	<label>
-		{#if label}
-			<span class="for-default">{label}</span>
-			<span
-				aria-hidden="true"
-				class="border">{label}</span
-			>
-		{/if}
-		<div class="icon-container">
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					float
-					left={cssLength('0.75rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-			<input
-				class="for-default"
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={true}
-				type={showInput ? 'text' : 'password'}
-				{autocomplete}
-				autocapitalize="none"
-				autocorrect="off"
-				spellcheck="false"
-				data-form-type="password"
-				bind:value
-				bind:this={inputRef}
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				{placeholder}
-				{required}
-				{disabled}
-			/>
-
-			<div class="right-icon">
-				<Action
-					label={showInput
-						? i18n['scoria.label.hide_password']()
-						: i18n['scoria.label.show_password']()}
-					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
-					icon={{ name: showInput ? 'visibility-off' : 'visibility' }}
-					size={Size.MediumSmall}
-					onclick={toggleVisibility}
-				/>
-			</div>
-		</div>
-	</label>
-</div>
-
+</script>
+
+<div class="error-wrapper">
+	<label>
+		{#if label}
+			<span class="for-default">{label}</span>
+			<span
+				aria-hidden="true"
+				class="border">{label}</span
+			>
+		{/if}
+		<div class="icon-container">
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					float
+					left={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+			<input
+				class="for-default"
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={true}
+				type={showInput ? 'text' : 'password'}
+				{autocomplete}
+				autocapitalize="none"
+				autocorrect="off"
+				spellcheck="false"
+				data-form-type="password"
+				bind:value
+				bind:this={inputRef}
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				{placeholder}
+				{required}
+				{disabled}
+			/>
+
+			<div class="right-icon">
+				<Action
+					label={showInput
+						? i18n['scoria.label.hide_password']()
+						: i18n['scoria.label.show_password']()}
+					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
+					icon={{ name: showInput ? 'visibility-off' : 'visibility' }}
+					size={Size.MediumSmall}
+					onclick={toggleVisibility}
+				/>
+			</div>
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -300,4 +300,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>

package/dist/Components/PopoverButton.svelte

@@ -1,11 +1,11 @@
-<svelte:options runes />
-
-<!--
-@component
-An icon button that toggles a floating popover anchored beneath it, with a
-caret pointing back at the button. The popover holds arbitrary content (the
-default snippet) and closes on click-outside or Escape.
--->
+<svelte:options runes />
+
+<!--
+@component
+An icon button that toggles a floating popover anchored beneath it, with a
+caret pointing back at the button. The popover holds arbitrary content (the
+default snippet) and closes on click-outside or Escape.
+-->
 <script lang="ts">import { Colour } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
@@ -24,50 +24,50 @@ function onWindowKeydown(e) {
 		open = false;
 	}
 }
-</script>
-
-<svelte:window
-	onpointerdown={onWindowPointerDown}
-	onkeydown={onWindowKeydown}
-/>
-
-<div
-	class="popover-button"
-	bind:this={wrapper}
->
-	<button
-		type="button"
-		class="trigger"
-		class:open
-		class:borderless
-		aria-label={label}
-		aria-expanded={open}
-		aria-haspopup="dialog"
-		onclick={() => {
-			open = !open;
-		}}
-	>
-		<Icon
-			name={icon}
-			size={Size.Large}
-			colour={open ? Colour['$brand-primary'] : Colour['$font-secondary']}
-		/>
-	</button>
-
-	{#if open}
-		<div
-			class="popover align-{align}"
-			role="dialog"
-			aria-label={label}
-		>
-			<span class="caret"></span>
-			<div class="popover-inner">
-				{@render children()}
-			</div>
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<svelte:window
+	onpointerdown={onWindowPointerDown}
+	onkeydown={onWindowKeydown}
+/>
+
+<div
+	class="popover-button"
+	bind:this={wrapper}
+>
+	<button
+		type="button"
+		class="trigger"
+		class:open
+		class:borderless
+		aria-label={label}
+		aria-expanded={open}
+		aria-haspopup="dialog"
+		onclick={() => {
+			open = !open;
+		}}
+	>
+		<Icon
+			name={icon}
+			size={Size.Large}
+			colour={open ? Colour['$brand-primary'] : Colour['$font-secondary']}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="popover align-{align}"
+			role="dialog"
+			aria-label={label}
+		>
+			<span class="caret"></span>
+			<div class="popover-inner">
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</div>
+
 <style>.popover-button {
   position: relative;
   display: inline-flex;
@@ -148,4 +148,4 @@ function onWindowKeydown(e) {
 
 .align-end .caret {
   inset-inline-end: 1.5rem;
-}</style>
+}</style>

package/dist/Components/Portal.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { browser } from "$app/environment";
 let { target = browser ? globalThis.document.body : undefined, children } = $props();
 let ref = $state();
@@ -23,8 +23,8 @@ $effect(() => {
 		lastTarget = undefined;
 	};
 });
-</script>
-
-<div bind:this={ref}>
-	{@render children()}
-</div>
+</script>
+
+<div bind:this={ref}>
+	{@render children()}
+</div>