@lavalogic/scoria 0.40.31 → 0.40.33

package/dist/Components/DesktopModal.svelte

@@ -1,72 +1,72 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { ColourSet } from "../scss/colours.js";
 import Button from "./Button.svelte";
 import LoadingOverlay from "./LoadingOverlay.svelte";
 import Modal from "./Modal.svelte";
 const { onclose, onsubmit, noscroll, headerLabel, headerSubtitle, buttons, children, isLoading, mandatory, loadingMessage, staticHeight, staticWidth, minWidth, minHeight, width, height } = $props();
-</script>
-
-<Modal
-	{onclose}
-	mandatory={mandatory || isLoading}
-	{staticHeight}
-	{staticWidth}
-	{minWidth}
-	{minHeight}
-	{width}
-	{height}
-	{noscroll}
-	{onsubmit}
->
-	{#snippet header()}
-		<div class="outer">
-			<div class="column">
-				{#if typeof headerLabel === 'string'}
-					<h1>{headerLabel}</h1>
-				{:else}
-					{@render headerLabel()}
-				{/if}
-				{#if headerSubtitle}
-					<div class="one-line">
-						<span>{headerSubtitle}</span>
-					</div>
-				{/if}
-			</div>
-			<div class="spacer"></div>
-		</div>
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="footer">
-			{#if buttons.length}
-				{#each buttons as button (button.label)}
-					<div class:left={button.left}>
-						<Button
-							type={button.type}
-							disabled={button.disabled}
-							onclick={button.callback}
-							colourSet={button.colourSet ??
-								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
-						>
-					</div>
-				{/each}
-			{/if}
-		</div>
-	{/snippet}
-
-	<div class="body-outer">
-		{@render children()}
-	</div>
-
-	{#if isLoading}
-		<LoadingOverlay
-			absolute
-			message={loadingMessage}
-		/>
-	{/if}
-</Modal>
-
+</script>
+
+<Modal
+	{onclose}
+	mandatory={mandatory || isLoading}
+	{staticHeight}
+	{staticWidth}
+	{minWidth}
+	{minHeight}
+	{width}
+	{height}
+	{noscroll}
+	{onsubmit}
+>
+	{#snippet header()}
+		<div class="outer">
+			<div class="column">
+				{#if typeof headerLabel === 'string'}
+					<h1>{headerLabel}</h1>
+				{:else}
+					{@render headerLabel()}
+				{/if}
+				{#if headerSubtitle}
+					<div class="one-line">
+						<span>{headerSubtitle}</span>
+					</div>
+				{/if}
+			</div>
+			<div class="spacer"></div>
+		</div>
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="footer">
+			{#if buttons.length}
+				{#each buttons as button (button.label)}
+					<div class:left={button.left}>
+						<Button
+							type={button.type}
+							disabled={button.disabled}
+							onclick={button.callback}
+							colourSet={button.colourSet ??
+								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
+						>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/snippet}
+
+	<div class="body-outer">
+		{@render children()}
+	</div>
+
+	{#if isLoading}
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
+	{/if}
+</Modal>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -164,4 +164,4 @@ const { onclose, onsubmit, noscroll, headerLabel, headerSubtitle, buttons, child
 }
 .outer .spacer {
   flex-grow: 1;
-}</style>
+}</style>

package/dist/Components/Dial.svelte

@@ -1,18 +1,18 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { Sizing } from "../scss/sizing.js";
 // Pixel height of each dial option. Sourced from `sizing.ts` so the
 // SCSS partial and TS constant stay in sync (see comment at the top
 // of `sizing.ts`).
 const OPTION_HEIGHT = Sizing["$dial-option-height"];
-</script>
-
-<script
-	lang="ts"
-	generics="T"
+</script>
+
+<script
+	lang="ts"
+	generics="T"
 >import { onMount } from "svelte";
 let { selected, entries, type, ref = $bindable(), onsubmit, onPrevious, onNext, onchange } = $props();
 // `position`, `offset`, `dragging` must all be `$state` so that the
@@ -147,30 +147,30 @@ function onkeydown(e) {
 		}
 	}
 }
-</script>
-
-<div
-	class="select-wrapper"
-	role="listbox"
-	tabindex="0"
-	bind:this={ref}
-	{onmousedown}
-	ontouchstart={onmousedown}
-	{onwheel}
-	{onkeydown}
->
-	<div class="selected-wrapper">
-		<ul
-			bind:this={itemWrapper}
-			class="touch-date-container"
-		>
-			{#each entries as entry (entry.value)}
-				<li>{entry.label}</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
+</script>
+
+<div
+	class="select-wrapper"
+	role="listbox"
+	tabindex="0"
+	bind:this={ref}
+	{onmousedown}
+	ontouchstart={onmousedown}
+	{onwheel}
+	{onkeydown}
+>
+	<div class="selected-wrapper">
+		<ul
+			bind:this={itemWrapper}
+			class="touch-date-container"
+		>
+			{#each entries as entry (entry.value)}
+				<li>{entry.label}</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
 <style>.select-wrapper {
   --option-height: 50px;
   height: calc(var(--option-height));
@@ -232,4 +232,4 @@ function onkeydown(e) {
   width: 80px;
   height: var(--option-height);
   user-select: none;
-}</style>
+}</style>

package/dist/Components/DimensionInput.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
 const min = 0;
@@ -31,98 +31,98 @@ const isInvalid = $derived(showErrorColours && (required && (x == null || x.toSt
 const xId = $derived(id ? `${id}-x` : undefined);
 const yId = $derived(id ? `${id}-y` : undefined);
 const zId = $derived(id ? `${id}-z` : undefined);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<span
-		class="top-label"
-		class:for-default={variant === InputVariant.Default}
-		class:invalid={isInvalid}
-		>{labelTop}{#if optional}
-			- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
-	>
-	{#if variant === InputVariant.Default}
-		<span class="border"
-			>{labelTop}{#if optional}
-				- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
-		>
-	{/if}
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		<input
-			id={xId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={x ?? ''}
-			oninput={handleInput('x')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.x}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			id={yId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={y ?? ''}
-			oninput={handleInput('y')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.y}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			id={zId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={z ?? ''}
-			oninput={handleInput('z')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.z}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<div class="spacer"></div>
-		<span
-			class="right-label inset"
-			class:for-modal={variant == InputVariant.Modal}>cm</span
-		>
-	</div>
-</div>
-
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<span
+		class="top-label"
+		class:for-default={variant === InputVariant.Default}
+		class:invalid={isInvalid}
+		>{labelTop}{#if optional}
+			- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
+	>
+	{#if variant === InputVariant.Default}
+		<span class="border"
+			>{labelTop}{#if optional}
+				- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
+		>
+	{/if}
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		<input
+			id={xId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={x ?? ''}
+			oninput={handleInput('x')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.x}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			id={yId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={y ?? ''}
+			oninput={handleInput('y')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.y}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			id={zId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={z ?? ''}
+			oninput={handleInput('z')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.z}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<div class="spacer"></div>
+		<span
+			class="right-label inset"
+			class:for-modal={variant == InputVariant.Modal}>cm</span
+		>
+	</div>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -399,4 +399,4 @@ div.spacer {
 .icon-container input:last-of-type {
   border-radius: 0;
   border-inline-start-color: transparent;
-}</style>
+}</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
 >import { dndzone } from "svelte-dnd-action";
 import { flip } from "svelte/animate";
 import DraggableCard from "./DraggableCard.svelte";
@@ -53,53 +53,53 @@ $effect.pre(() => {
 	items = next;
 });
 const snippet = $derived(customSnippet ?? draggableWithSelect);
-</script>
-
-{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
-	<DraggableCard
-		title={item.title}
-		subtitle={item.subtitle}
-		{index}
-		selectable
-		selected={item.selected}
-	/>
-{/snippet}
-
-<div class="wrapper">
-	{#if label}
-		<span class="top-label">{label}</span>
-		<span class="top-label-border">{label}</span>
-	{/if}
-	<div
-		class="dnd"
-		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
-		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			consider(e.detail.items);
-		}}
-		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			finalise(e.detail.items);
-		}}
-	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		{#each items as item, index (item.id)}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class="contents"
-				onclick={(e) => {
-					if (item.toggleSelected) {
-						e.stopPropagation();
-						item.toggleSelected();
-					}
-				}}
-				animate:flip={{ duration: flipDurationMS }}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render snippet(item, index)}
-			</div>
-		{/each}
-	</div>
-</div>
-
+</script>
+
+{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
+	<DraggableCard
+		title={item.title}
+		subtitle={item.subtitle}
+		{index}
+		selectable
+		selected={item.selected}
+	/>
+{/snippet}
+
+<div class="wrapper">
+	{#if label}
+		<span class="top-label">{label}</span>
+		<span class="top-label-border">{label}</span>
+	{/if}
+	<div
+		class="dnd"
+		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
+		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			consider(e.detail.items);
+		}}
+		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			finalise(e.detail.items);
+		}}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		{#each items as item, index (item.id)}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				class="contents"
+				onclick={(e) => {
+					if (item.toggleSelected) {
+						e.stopPropagation();
+						item.toggleSelected();
+					}
+				}}
+				animate:flip={{ duration: flipDurationMS }}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render snippet(item, index)}
+			</div>
+		{/each}
+	</div>
+</div>
+
 <style>.top-label {
   position: absolute;
   inset-inline-start: 0.5rem;
@@ -154,4 +154,4 @@ div.dnd {
   flex: 1;
   gap: 0.5rem;
   padding: 0.5rem;
-}</style>
+}</style>

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { devCatch } from "../../Helpers/Helpers.svelte.js";
 import Checkbox from "../Checkbox.svelte";
 // `selected` must remain `let` because it is `$bindable`; the rest
@@ -16,52 +16,52 @@ function fireToggle() {
 		});
 	}
 }
-</script>
-
-<div
-	class="card"
-	class:touch
-	role={selectable ? 'checkbox' : 'listitem'}
-	aria-checked={selectable ? selected : undefined}
-	aria-label={title}
->
-	{#if selectable}
-		<div
-			class="limit-size"
-			class:touch
-		>
-			<Checkbox
-				value={selected}
-				onchange={(
-					e: Event & {
-						currentTarget: EventTarget & HTMLInputElement;
-					}
-				) => {
-					e.stopPropagation();
-					fireToggle();
-				}}
-			/>
-		</div>
-	{/if}
-	<div
-		class="text"
-		class:touch
-	>
-		<span
-			class="title"
-			class:touch>{title}</span
-		>
-		<span
-			class="subtitle"
-			class:touch>{subtitle}</span
-		>
-	</div>
-	<span
-		class="row"
-		class:touch>{index + 1}</span
-	>
-</div>
-
+</script>
+
+<div
+	class="card"
+	class:touch
+	role={selectable ? 'checkbox' : 'listitem'}
+	aria-checked={selectable ? selected : undefined}
+	aria-label={title}
+>
+	{#if selectable}
+		<div
+			class="limit-size"
+			class:touch
+		>
+			<Checkbox
+				value={selected}
+				onchange={(
+					e: Event & {
+						currentTarget: EventTarget & HTMLInputElement;
+					}
+				) => {
+					e.stopPropagation();
+					fireToggle();
+				}}
+			/>
+		</div>
+	{/if}
+	<div
+		class="text"
+		class:touch
+	>
+		<span
+			class="title"
+			class:touch>{title}</span
+		>
+		<span
+			class="subtitle"
+			class:touch>{subtitle}</span
+		>
+	</div>
+	<span
+		class="row"
+		class:touch>{index + 1}</span
+	>
+</div>
+
 <style>.limit-size:not(.touch) {
   width: 1.5rem;
 }
@@ -158,4 +158,4 @@ function fireToggle() {
   height: 1.75rem;
   width: 1.75rem;
   margin-inline-end: 1rem;
-}</style>
+}</style>