@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,20 +1,20 @@
-<svelte:options runes />
-
-<!--
-@component
-Live region for the {@link ToastContext}. Iterates the context's
-queue and renders one `Toast` per message, providing the
-copy-to-clipboard callback (the container owns the clipboard logic
-because the toast itself only knows the message it should copy).
-
-The wrapping `<section>` carries `role="region"` plus
-`aria-live="polite"` so multiple toast appearances are announced as
-a single rolling region without interrupting the user; individual
-`Toast` elements override `aria-live` to `assertive` for hard errors.
-
-Mounted once at the app root by `ContextWrapper`; consumers should
-not render this directly.
--->
+<svelte:options runes />
+
+<!--
+@component
+Live region for the {@link ToastContext}. Iterates the context's
+queue and renders one `Toast` per message, providing the
+copy-to-clipboard callback (the container owns the clipboard logic
+because the toast itself only knows the message it should copy).
+
+The wrapping `<section>` carries `role="region"` plus
+`aria-live="polite"` so multiple toast appearances are announced as
+a single rolling region without interrupting the user; individual
+`Toast` elements override `aria-live` to `assertive` for hard errors.
+
+Mounted once at the app root by `ContextWrapper`; consumers should
+not render this directly.
+-->
 <script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
 import { ToastContext } from "../../Contexts/ToastContext.svelte.js";
 import { devCatch } from "../../Helpers/Helpers.svelte.js";
@@ -43,22 +43,22 @@ function copyDataToClipboard(text) {
 		copyable: false
 	});
 }
-</script>
-
-<section
-	aria-live="polite"
-	aria-label={i18n['scoria.label.notifications']()}
->
-	{#each toastContext.toasts as toast (toast.id)}
-		<Toast
-			{toast}
-			copy={() => {
-				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
-			}}
-		/>
-	{/each}
-</section>
-
+</script>
+
+<section
+	aria-live="polite"
+	aria-label={i18n['scoria.label.notifications']()}
+>
+	{#each toastContext.toasts as toast (toast.id)}
+		<Toast
+			{toast}
+			copy={() => {
+				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
+			}}
+		/>
+	{/each}
+</section>
+
 <style>section {
   user-select: none;
   gap: 0.5rem;
@@ -70,4 +70,4 @@ function copyDataToClipboard(text) {
   justify-content: flex-end;
   align-items: flex-end;
   z-index: 99999;
-}</style>
+}</style>

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,38 +1,38 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual host for `TooltipContext`. Renders a fixed-position tooltip at
-the coordinates the context exposes, with a CSS arrow that points
-back toward the anchored element on the configured side.
-
-The tooltip just appears and disappears; no transition is applied,
-which is the conservative choice for `prefers-reduced-motion`. Reads
-the context with `getContext` and relies on `ContextWrapper` to have
-set it up at the app root.
--->
+<svelte:options runes />
+
+<!--
+@component
+Visual host for `TooltipContext`. Renders a fixed-position tooltip at
+the coordinates the context exposes, with a CSS arrow that points
+back toward the anchored element on the configured side.
+
+The tooltip just appears and disappears; no transition is applied,
+which is the conservative choice for `prefers-reduced-motion`. Reads
+the context with `getContext` and relies on `ContextWrapper` to have
+set it up at the app root.
+-->
 <script lang="ts">import { TooltipContext } from "../../Contexts/TooltipContext.svelte.js";
 import { Side } from "../../Types/Internal/Side.js";
 import { getContext } from "svelte";
 const tooltipContext = getContext(TooltipContext.identifier);
-</script>
-
-{#if tooltipContext.isShowingTooltip}
-	<div
-		role="tooltip"
-		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
-		class="tooltip-wrapper"
-		class:top-arrow={tooltipContext.anchor === Side.Top}
-		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
-		class:left-arrow={tooltipContext.anchor === Side.Left}
-		class:right-arrow={tooltipContext.anchor === Side.Right}
-	>
-		<div class="tooltip">
-			{tooltipContext.text}
-		</div>
-	</div>
-{/if}
-
+</script>
+
+{#if tooltipContext.isShowingTooltip}
+	<div
+		role="tooltip"
+		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
+		class="tooltip-wrapper"
+		class:top-arrow={tooltipContext.anchor === Side.Top}
+		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
+		class:left-arrow={tooltipContext.anchor === Side.Left}
+		class:right-arrow={tooltipContext.anchor === Side.Right}
+	>
+		<div class="tooltip">
+			{tooltipContext.text}
+		</div>
+	</div>
+{/if}
+
 <style>.tooltip-wrapper {
   position: fixed;
   z-index: 99999;
@@ -122,4 +122,4 @@ const tooltipContext = getContext(TooltipContext.identifier);
   transform: rotate(45deg);
   background-color: #3a4952;
   border: solid 2px #dae0e5;
-}</style>
+}</style>

package/dist/Components/DataMatrixIcon.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { passthrough } from "../Helpers/Helpers.svelte.js";
 import Icon from "./Icon.svelte";
@@ -63,40 +63,40 @@ $effect(() => {
 		lastSvg = source;
 	}
 });
-</script>
-
-{#if interactive}
-	<button
-		aria-label={ariaLabel}
-		onkeydown={passthrough}
-		title={i18n['scoria.text.barcode_edit_hint']({ name: title })}
-		oncontextmenu={(e) => {
-			if (oncontextmenu) {
-				e.preventDefault();
-				oncontextmenu(e);
-			}
-		}}
-	>
-		<div
-			class="fit"
-			bind:this={svgContainer}
-		>
-			{#if icon.kind === 'icon-props'}
-				<Icon {...icon.iconProps} />
-			{/if}
-		</div>
-	</button>
-{:else}
-	<div
-		class="fit"
-		bind:this={svgContainer}
-	>
-		{#if icon.kind === 'icon-props'}
-			<Icon {...icon.iconProps} />
-		{/if}
-	</div>
-{/if}
-
+</script>
+
+{#if interactive}
+	<button
+		aria-label={ariaLabel}
+		onkeydown={passthrough}
+		title={i18n['scoria.text.barcode_edit_hint']({ name: title })}
+		oncontextmenu={(e) => {
+			if (oncontextmenu) {
+				e.preventDefault();
+				oncontextmenu(e);
+			}
+		}}
+	>
+		<div
+			class="fit"
+			bind:this={svgContainer}
+		>
+			{#if icon.kind === 'icon-props'}
+				<Icon {...icon.iconProps} />
+			{/if}
+		</div>
+	</button>
+{:else}
+	<div
+		class="fit"
+		bind:this={svgContainer}
+	>
+		{#if icon.kind === 'icon-props'}
+			<Icon {...icon.iconProps} />
+		{/if}
+	</div>
+{/if}
+
 <style>button {
   display: contents;
   cursor: pointer;
@@ -106,4 +106,4 @@ div.fit {
   background-color: #ffffff;
   display: flex;
   padding: 0.5rem;
-}</style>
+}</style>

package/dist/Components/DateInput.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../paraglide/messages.js";
 import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
@@ -20,8 +20,8 @@ function submitAncestorForm(e) {
 	const form = target?.closest("form");
 	form?.requestSubmit();
 }
-</script>
-
+</script>
+
 <script lang="ts">let { value = $bindable(""), label, placeholder, required = false, optional, variant = InputVariant.Default, min, max, type, disabled, leftIcon, rightIcon, inputRef = $bindable(), invalid, onblur, onfocus, onchange } = $props();
 // Null-safe: a fresh `<DateInput>` with no value passes `value=null`
 // through the prop. The old `value.trim()` crashed with "Cannot read
@@ -48,78 +48,78 @@ function handleChange(e) {
 	const next = e.target.value;
 	void onchange?.(next === "" ? null : next);
 }
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label class:for-modal={variant == InputVariant.Modal}>
-		{#if label}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{label}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{label}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
-				>
-			{/if}
-		{/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
-				step={type === 'datetime-local' ? 1 : type === 'time' ? 60 : 'any'}
-				class:invalid={isInvalid}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				aria-invalid={isInvalid || undefined}
-				{type}
-				bind:value
-				{onblur}
-				{onfocus}
-				{ondblclick}
-				{onauxclick}
-				bind:this={inputRef}
-				{min}
-				{max}
-				{placeholder}
-				{required}
-				{disabled}
-				{onkeydown}
-				onchange={handleChange}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					float
-					right={cssLength('0.5rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/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}>
+		{#if label}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{label}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{label}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
+				>
+			{/if}
+		{/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
+				step={type === 'datetime-local' ? 1 : type === 'time' ? 60 : 'any'}
+				class:invalid={isInvalid}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				aria-invalid={isInvalid || undefined}
+				{type}
+				bind:value
+				{onblur}
+				{onfocus}
+				{ondblclick}
+				{onauxclick}
+				bind:this={inputRef}
+				{min}
+				{max}
+				{placeholder}
+				{required}
+				{disabled}
+				{onkeydown}
+				onchange={handleChange}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					float
+					right={cssLength('0.5rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -347,4 +347,4 @@ label.for-table {
 }
 label.for-table input {
   height: unset;
-}</style>
+}</style>

package/dist/Components/DatePicker.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
 >// Use Intl.DateTimeFormat with en-GB locale for weekday and month names.
 const WEEKDAY_FMT = new Intl.DateTimeFormat("en-GB", { weekday: "long" });
 const MONTH_FULL_FMT = new Intl.DateTimeFormat("en-GB", { month: "short" });
@@ -40,8 +40,8 @@ const MONTHS_LABELS_NAMED = Object.freeze(Array.from({ length: 12 }, (_, i) => M
 // not reallocated on every $derived read.
 const HOURS = Object.freeze(Array.from({ length: 24 }, (_, i) => i));
 const MINUTES_SECONDS = Object.freeze(Array.from({ length: 60 }, (_, i) => i));
-</script>
-
+</script>
+
 <script lang="ts">import { devCatch } from "../Helpers/Helpers.svelte.js";
 import { DatePickerType } from "../Types/Internal/DatePickerType.js";
 import { onMount, tick } from "svelte";
@@ -180,84 +180,84 @@ onMount(() => {
 		}
 	})().catch(devCatch);
 });
-</script>
-
-<div>
-	<div class="touch-date-wrapper">
-		<div class="date-line">
-			{date.getDate()}
-			{MONTHS_LABELS_NAMED[date.getMonth()]}
-			{date.getFullYear()}
-		</div>
-		<p class="day-line">{WEEKDAY[date.getDay()]}</p>
-		<div class="touch-date-picker">
-			<Dial
-				type={DatePickerType.Day}
-				bind:ref={dayRef}
-				entries={dayEntries}
-				selected={date.getDate()}
-				onchange={dateChanged}
-				{onsubmit}
-				{onPrevious}
-				{onNext}
-			/>
-			<Dial
-				type={DatePickerType.Month}
-				bind:ref={monthRef}
-				entries={monthEntries}
-				selected={date.getMonth()}
-				onchange={dateChanged}
-				{onsubmit}
-				{onPrevious}
-				{onNext}
-			/>
-			<Dial
-				bind:ref={yearRef}
-				type={DatePickerType.Year}
-				entries={yearEntries}
-				selected={date.getFullYear()}
-				onchange={dateChanged}
-				{onsubmit}
-				{onPrevious}
-				{onNext}
-			/>
-
-			{#if showTime}
-				<Dial
-					bind:ref={hoursRef}
-					type={DatePickerType.Hours}
-					entries={hourEntries}
-					selected={date.getHours()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-				<Dial
-					bind:ref={minutesRef}
-					type={DatePickerType.Minutes}
-					entries={minuteSecondEntries}
-					selected={date.getMinutes()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-				<Dial
-					bind:ref={secondsRef}
-					type={DatePickerType.Seconds}
-					entries={minuteSecondEntries}
-					selected={date.getSeconds()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-			{/if}
-		</div>
-	</div>
-</div>
-
+</script>
+
+<div>
+	<div class="touch-date-wrapper">
+		<div class="date-line">
+			{date.getDate()}
+			{MONTHS_LABELS_NAMED[date.getMonth()]}
+			{date.getFullYear()}
+		</div>
+		<p class="day-line">{WEEKDAY[date.getDay()]}</p>
+		<div class="touch-date-picker">
+			<Dial
+				type={DatePickerType.Day}
+				bind:ref={dayRef}
+				entries={dayEntries}
+				selected={date.getDate()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+			<Dial
+				type={DatePickerType.Month}
+				bind:ref={monthRef}
+				entries={monthEntries}
+				selected={date.getMonth()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+			<Dial
+				bind:ref={yearRef}
+				type={DatePickerType.Year}
+				entries={yearEntries}
+				selected={date.getFullYear()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+
+			{#if showTime}
+				<Dial
+					bind:ref={hoursRef}
+					type={DatePickerType.Hours}
+					entries={hourEntries}
+					selected={date.getHours()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+				<Dial
+					bind:ref={minutesRef}
+					type={DatePickerType.Minutes}
+					entries={minuteSecondEntries}
+					selected={date.getMinutes()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+				<Dial
+					bind:ref={secondsRef}
+					type={DatePickerType.Seconds}
+					entries={minuteSecondEntries}
+					selected={date.getSeconds()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+			{/if}
+		</div>
+	</div>
+</div>
+
 <style>.touch-date-wrapper {
   display: flex;
   justify-content: center;
@@ -277,4 +277,4 @@ onMount(() => {
 
 .day-line {
   margin: 2px;
-}</style>
+}</style>