@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/LoadingAnimation.svelte

@@ -3,27 +3,30 @@
 <script
 	lang="ts"
 	module
->/**
+>import { m as i18n } from "../paraglide/messages.js";
+/**
 * Warm, on-brand phrases printed inside the box's rear flap. One is chosen at
 * random when the loader mounts and a fresh one is shown on each loop. Pass
 * the `messages` prop to override this set.
 */
-export const defaultLoaderMessages = [
-	"You rock",
-	"Have a great day",
-	"Thanks for waiting",
-	"Almost there",
-	"Hang tight",
-	"Worth the wait",
-	"You're a star",
-	"Nearly done",
-	"Sit back and relax",
-	"Good things come to those who wait",
-	"On its way",
-	"Making it happen",
-	"Fresh out the box",
-	"Hold tight, nearly there"
-];
+export function defaultLoaderMessages() {
+	return [
+		i18n["scoria.text.loader_you_rock"](),
+		i18n["scoria.text.loader_great_day"](),
+		i18n["scoria.text.loader_thanks_waiting"](),
+		i18n["scoria.text.loader_almost_there"](),
+		i18n["scoria.text.loader_hang_tight"](),
+		i18n["scoria.text.loader_worth_wait"](),
+		i18n["scoria.text.loader_youre_star"](),
+		i18n["scoria.text.loader_nearly_done"](),
+		i18n["scoria.text.loader_sit_back"](),
+		i18n["scoria.text.loader_good_things"](),
+		i18n["scoria.text.loader_on_way"](),
+		i18n["scoria.text.loader_making_happen"](),
+		i18n["scoria.text.loader_fresh_box"](),
+		i18n["scoria.text.loader_hold_tight"]()
+	];
+}
 // ---- geometry constants for the thrown-letter extrusion ----
 const MAXLW = 200;
 const DEPTH = 19;
@@ -96,7 +99,7 @@ function fluteCol(k, faceRGB, deepRGB) {
 </script>
 
 <script lang="ts">import { loaderDefaults } from "../Helpers/loaderDefaults.svelte.js";
-const { name = "", showText = true, label = "Loading", caption = "Loading", messages = defaultLoaderMessages, letterFace = "#cdab73", letterDeep = "#2a1d0d" } = $props();
+const { name = "", showText = true, label = i18n["scoria.label.loading"](), caption = i18n["scoria.label.loading"](), messages = defaultLoaderMessages(), letterFace = "#cdab73", letterDeep = "#2a1d0d" } = $props();
 // The word the box spells: the caller's first name, or the product name as a
 // friendly fallback. Block capitals tumble cleanly and dodge lowercase
 // descenders clipping the baseline on landing.
@@ -609,7 +612,7 @@ $effect(() => {
 			<div class="face floor"></div>
 			<div class="face front">
 				<div class="label-wrap">
-					<div class="label">Goods<br />Loading</div>
+					<div class="label">{i18n['scoria.text.crate_label']()}</div>
 				</div>
 			</div>
 
@@ -793,7 +796,7 @@ $effect(() => {
 .flowms-loader .front {
   width: var(--w);
   height: var(--h);
-  margin-left: calc(var(--w) / -2);
+  margin-inline-start: calc(var(--w) / -2);
   margin-top: calc(var(--h) / -2);
   background: linear-gradient(160deg, rgba(255, 255, 255, 0.1333333333), rgba(0, 0, 0, 0.0941176471)), var(--kraft-front);
   transform: translateZ(var(--hd));
@@ -801,7 +804,7 @@ $effect(() => {
 .flowms-loader .back {
   width: var(--w);
   height: var(--h);
-  margin-left: calc(var(--w) / -2);
+  margin-inline-start: calc(var(--w) / -2);
   margin-top: calc(var(--h) / -2);
   background: var(--kraft-back);
   transform: rotateY(180deg) translateZ(var(--hd));
@@ -809,7 +812,7 @@ $effect(() => {
 .flowms-loader .right {
   width: var(--d);
   height: var(--h);
-  margin-left: calc(var(--d) / -2);
+  margin-inline-start: calc(var(--d) / -2);
   margin-top: calc(var(--h) / -2);
   background: linear-gradient(160deg, rgba(0, 0, 0, 0.062745098), rgba(0, 0, 0, 0.1882352941)), var(--kraft-side);
   transform: rotateY(90deg) translateZ(var(--hw));
@@ -817,7 +820,7 @@ $effect(() => {
 .flowms-loader .left {
   width: var(--d);
   height: var(--h);
-  margin-left: calc(var(--d) / -2);
+  margin-inline-start: calc(var(--d) / -2);
   margin-top: calc(var(--h) / -2);
   background: linear-gradient(160deg, rgba(255, 255, 255, 0.0941176471), rgba(0, 0, 0, 0.1333333333)), var(--kraft-side);
   transform: rotateY(-90deg) translateZ(var(--hw));
@@ -825,7 +828,7 @@ $effect(() => {
 .flowms-loader .floor {
   width: var(--w);
   height: var(--d);
-  margin-left: calc(var(--w) / -2);
+  margin-inline-start: calc(var(--w) / -2);
   margin-top: calc(var(--d) / -2);
   background: var(--kraft-inner);
   transform: rotateX(-90deg) translateZ(var(--hh));
@@ -843,6 +846,9 @@ $effect(() => {
 }
 .flowms-loader .label {
   display: inline-block;
+  max-width: var(--w);
+  box-sizing: border-box;
+  overflow-wrap: break-word;
   padding: 6px 12px 5px;
   border: 3px solid var(--ink);
   border-radius: 3px;
@@ -850,13 +856,27 @@ $effect(() => {
   letter-spacing: 1.5px;
   text-transform: uppercase;
   text-align: center;
-  white-space: nowrap;
+  white-space: pre-line;
   color: var(--ink);
   opacity: 0.72;
   mix-blend-mode: multiply;
   transform: rotate(-2.6deg);
   filter: url(#flowms-stamp);
 }
+.flowms-loader {
+  /* Measured against the 90px content area inside the stamp: these are the
+     largest sizes at which the longest word still fits without breaking.
+     letter-spacing is fixed, so the sizes are not a linear scale of 15px. */
+}
+:global(html[lang='de']) .flowms-loader .label {
+  font-size: 14px;
+}
+:global(html[lang='es']) .flowms-loader .label {
+  font-size: 13px;
+}
+:global(html[lang='fr']) .flowms-loader .label {
+  font-size: 10px;
+}
 .flowms-loader {
   /* positive message printed inside the rear flap */
 }
@@ -922,7 +942,7 @@ $effect(() => {
   position: absolute;
   width: var(--w);
   height: var(--hw);
-  margin-left: calc(var(--w) / -2);
+  margin-inline-start: calc(var(--w) / -2);
   transform-origin: 50% 0;
   transform: rotateX(-90deg);
   transform-style: preserve-3d;
@@ -967,7 +987,7 @@ $effect(() => {
   top: 0;
   width: 96px;
   height: 96px;
-  margin-left: -48px;
+  margin-inline-start: -48px;
   margin-top: -48px;
   border-radius: 50%;
   opacity: 0;
@@ -979,7 +999,7 @@ $effect(() => {
   top: 0;
   width: 13px;
   height: 13px;
-  margin-left: -6.5px;
+  margin-inline-start: -6.5px;
   margin-top: -6.5px;
   border-radius: 3px;
   opacity: 0;
@@ -1004,7 +1024,7 @@ $effect(() => {
 .flowms-loader .fill:nth-child(3n) {
   width: 9px;
   height: 9px;
-  margin-left: -4.5px;
+  margin-inline-start: -4.5px;
   margin-top: -4.5px;
   border-radius: 50%;
 }
@@ -1082,7 +1102,7 @@ $effect(() => {
 }
 .flowms-loader .caption-dots {
   display: inline-block;
-  text-align: left;
+  text-align: start;
 }
 .flowms-loader .caption-dots span:nth-child(2),
 .flowms-loader .caption-dots span:nth-child(3) {

package/dist/Components/LoadingAnimation.svelte.d.ts

@@ -3,7 +3,7 @@
  * random when the loader mounts and a fresh one is shown on each loop. Pass
  * the `messages` prop to override this set.
  */
-export declare const defaultLoaderMessages: string[];
+export declare function defaultLoaderMessages(): string[];
 import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 declare const LoadingAnimation: import("svelte").Component<LoadingAnimationProps, {}, "">;
 type LoadingAnimation = ReturnType<typeof LoadingAnimation>;

package/dist/Components/LoadingModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import LoadingAnimation from "./LoadingAnimation.svelte";
+<script lang="ts">import { m as i18n } from "../paraglide/messages.js";
+import LoadingAnimation from "./LoadingAnimation.svelte";
 const { showModal, message, name, caption } = $props();
 let dialog = $state();
 $effect(() => {
@@ -23,7 +24,7 @@ function uncloseable(e) {
 <dialog
 	bind:this={dialog}
 	onkeydown={uncloseable}
-	aria-label={message ?? 'Loading'}
+	aria-label={message ?? i18n['scoria.label.loading']()}
 	aria-live="polite"
 >
 	<div class="modal-root">

package/dist/Components/Modal.svelte

@@ -3,7 +3,8 @@
 <script
 	module
 	lang="ts"
->import { browser } from "$app/environment";
+>import { m as i18n } from "../paraglide/messages.js";
+import { browser } from "$app/environment";
 import { DATAMatrix } from "../Helpers/Datamatrix.js";
 import { passthrough } from "../Helpers/Helpers.svelte.js";
 import { ColourSet } from "../scss/colours.js";
@@ -127,7 +128,7 @@ const dialogStyle = $derived(`--timer: ${defaultTimer ? defaultTimer.time.toStri
 								}}
 								onkeydown={handleEsc}
 								colourSet={ColourSet.Primary}
-								label="Close Modal"
+								label={i18n['scoria.action.close_modal_generic']()}
 							/>
 						</div>
 					</div>
@@ -175,8 +176,8 @@ const dialogStyle = $derived(`--timer: ${defaultTimer ? defaultTimer.time.toStri
 							{/if}
 							<button
 								onkeydown={passthrough}
-								class:margin-left={button.margin === 'left'}
-								class:margin-right={button.margin === 'right'}
+								class:margin-inline-start={button.margin === 'left'}
+								class:margin-inline-end={button.margin === 'right'}
 								type={button.type ?? 'button'}
 								onclick={button.callback}>{button.label}</button
 							>
@@ -192,8 +193,8 @@ const dialogStyle = $derived(`--timer: ${defaultTimer ? defaultTimer.time.toStri
 							<button
 								onkeydown={passthrough}
 								disabled={!isValid}
-								class:margin-left={button.margin === 'left'}
-								class:margin-right={button.margin === 'right'}
+								class:margin-inline-start={button.margin === 'left'}
+								class:margin-inline-end={button.margin === 'right'}
 								bind:this={submitRef}
 								type={button.type ?? 'submit'}>{button.label}</button
 							>
@@ -494,8 +495,7 @@ div.button-barcode-set {
 }
 .title-wrapper .modal-heading {
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   top: 0;
   bottom: 0;
 }
@@ -538,7 +538,7 @@ div.bar-container {
 div.bar-container div.bar-timer {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 1rem;
   background-color: #259fc7;
   animation: timer linear var(--timer);

package/dist/Components/MultiSelect.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="V extends object, VP extends ValueProp<V>"
->import { autoPluralise, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../paraglide/messages.js";
+import { autoPluralise, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
 import { attachDropdownPortal } from "../Helpers/dropdownPortal.js";
 import { Colour, ColourSet } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
@@ -13,8 +14,17 @@ import { onMount } from "svelte";
 import Action from "./Action.svelte";
 import Icon from "./Icon.svelte";
 // NOTE selectedValues is mutated by svelecte without asking, so we sometimes have to reverse it without a callback (side effects)
-const { label, inputId = generateWeakId(), options, labelProp, valueProp, width, valueAsObject = true, height, selectedValues, onchange, collapseSelection = false, name = "Item", disabled, required, invalid } = $props();
-const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? "") ? "an" : "a");
+const { label, inputId = generateWeakId(), options, labelProp, valueProp, width, valueAsObject = true, height, selectedValues, onchange, collapseSelection = false, placeholder, selectionLabel, name = "Item", disabled, required, invalid } = $props();
+// English-only article choice. The article itself lives in the message, so a
+// translator owns the whole phrase and can drop or decline it per locale.
+const fallbackPlaceholder = $derived(name ? vowels.has(name.at(0)?.toLocaleLowerCase() ?? "") ? i18n["scoria.label.select_an_named"]({ name }) : i18n["scoria.label.select_a_named"]({ name }) : i18n["scoria.label.please_select"]());
+function collapsedText(count) {
+	if (selectionLabel) return selectionLabel(count);
+	return name ? i18n["scoria.text.selected_count_named"]({
+		count,
+		noun: autoPluralise(name, count)
+	}) : i18n["scoria.text.selected_count"]({ count });
+}
 // Pre-computed set of selected primitive keys. Used in the option snippet
 // to avoid an O(n*m) findIndex sweep per render.
 const selectedKeys = $derived.by(() => {
@@ -108,7 +118,7 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 		collapseSelection={collapseSelection ? 'always' : null}
 		deselectMode="toggle"
 		highlightFirstItem={false}
-		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		placeholder={placeholder ?? fallbackPlaceholder}
 		selection={collapseSelection ? selection : undefined}
 	>
 		{#snippet option(opt)}
@@ -128,12 +138,9 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 		{/snippet}
 
 		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
+			{@const count = selectedOptions.length}
 			<span class="selection"
-				>{#if selectedOptions.length}{selectedOptions.length}
-					{#if name}{autoPluralise(name, selectedOptions.length)}{/if} Selected
-				{:else}Please Select {#if name}
-						{an} {name}{/if}
-				{/if}</span
+				>{count ? collapsedText(count) : (placeholder ?? fallbackPlaceholder)}</span
 			>
 		{/snippet}
 
@@ -208,19 +215,20 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 }
 .select-wrapper label {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   z-index: 1;
+  width: calc(100% - 1rem);
   font-size: 0.875rem;
   padding: 0.05rem 0.4rem;
   color: #647d8e;
 }
 .select-wrapper label span:not(.border) {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
   line-height: 1rem;
   padding: 0rem 0.5rem;
   top: calc(-0.875rem / 2 - 2px);
@@ -231,13 +239,18 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 .select-wrapper label span:not(.border).invalid {
   color: #aa1414;
 }
+.select-wrapper label span:not(.border) {
+  max-width: calc(100% - 1rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .select-wrapper label span.border {
   position: absolute;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
   line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
@@ -249,6 +262,11 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 .select-wrapper label span.border.invalid {
   border-bottom-color: #f9e9e9;
 }
+.select-wrapper label span.border {
+  max-width: calc(100% - 1rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .select-wrapper :global(.svelecte.svelecte-control) {
   cursor: pointer;
   max-width: 100%;
@@ -294,7 +312,7 @@ const isInvalid = $derived(required && !selectedValues.length || invalid);
 }
 .select-wrapper .selection {
   font-size: 0.875rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
   white-space: nowrap;
   display: flex;
 }
@@ -313,7 +331,7 @@ div.icons {
   flex-flow: row nowrap;
   gap: 0.25rem;
   height: 100%;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
   box-sizing: border-box;
 }
 
@@ -338,6 +356,7 @@ div.icons {
   text-overflow: ellipsis;
   gap: 1rem;
   font-size: 0.875rem;
+  line-height: 1.6;
   fill: #259fc7;
 }
 :global(.dropdown-item) .toggle-icon {

package/dist/Components/MultiSelectCommonProps.d.ts

@@ -9,8 +9,22 @@ export type StringValuedKey<V> = NonNullableKey<V>;
 export interface MultiSelectCommonProps<V extends object, VP extends ValueProp<V>> {
     /** Available options to choose from. */
     options: Array<V>;
-    /** Singular display name of the entity. */
+    /**
+     * Singular display name of the entity. This is the `<Svelecte>` **form-field
+     * attribute**, not display copy - it is only used to compose the English-only
+     * fallback placeholder when `placeholder` is not supplied.
+     */
     name?: string;
+    /**
+     * Complete placeholder sentence. Pass a translated whole phrase; when omitted
+     * scoria composes an English-only fallback from `name`.
+     */
+    placeholder?: string;
+    /**
+     * Complete collapsed-selection sentence, e.g. `(n) => `${n} warehouses selected``.
+     * English-only fallback when omitted.
+     */
+    selectionLabel?: (count: number) => string;
     /** Key of `V` whose value is the human-readable label. */
     labelProp: NonNullableKey<V>;
     /** Key of `V` whose value is the unique identifier. */

package/dist/Components/Nav/Nav.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="T"
->import { afterNavigate } from "$app/navigation";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { afterNavigate } from "$app/navigation";
 import { Size } from "../../Types/Internal/Size.js";
 import Icon from "../Icon.svelte";
 import ServicesNav from "./ServicesNav.svelte";
@@ -46,7 +47,7 @@ afterNavigate(() => {
 					name="block-menu"
 					size={Size.Medium}
 				/>
-				<span>Services</span>
+				<span>{i18n['scoria.label.services']()}</span>
 			</div>
 		</button>
 
@@ -95,8 +96,7 @@ afterNavigate(() => {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   z-index: 98;
   background-color: rgba(0, 0, 0, 0.2);
 }
@@ -114,7 +114,7 @@ div.user {
   background-color: #ffffff;
   padding: 0.75rem;
   top: calc(3.25rem + var(--env-border-height, 0));
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   z-index: 99;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
 }
@@ -172,22 +172,22 @@ nav button:hover {
 .main-navigation > *:nth-child(even)::before {
   content: "";
   height: 1.5rem;
-  border-left: solid 1px #e9ecf1;
+  border-inline-start: solid 1px #e9ecf1;
   border-radius: 5px;
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
 }
 .main-navigation > *:nth-child(even)::after {
   content: "";
   height: 1.5rem;
-  border-right: solid 1px #e9ecf1;
+  border-inline-end: solid 1px #e9ecf1;
   border-radius: 5px;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
 }
 .main-navigation > *:nth-child(even).selects {
-  padding-left: 1px;
-  padding-right: 1px;
+  padding-inline-start: 1px;
+  padding-inline-end: 1px;
   width: 32rem;
   --sv-border: none;
   --input-width: calc(50% - 0.5rem);
@@ -202,8 +202,8 @@ nav button:hover {
   transition: background-color 200ms ease 0s;
 }
 .nav-link.padded {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 1rem;
   gap: 1.5rem;
 }
 

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -148,6 +148,7 @@ a {
 button .icon-wrapper,
 a .icon-wrapper {
   width: var(--iconWidth);
+  flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -166,4 +167,5 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
+  flex-shrink: 0;
 }</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="Args"
->import { devCatch } from "../../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { devCatch } from "../../Helpers/Helpers.svelte.js";
 import HorizontalTabGroup from "../HorizontalTabGroup.svelte";
 import NavTab from "./NavTab.svelte";
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
@@ -30,7 +31,7 @@ $effect(() => {
 
 <dialog
 	bind:this={dialogRef}
-	aria-label="Services"
+	aria-label={i18n['scoria.label.services']()}
 	class="overlay"
 	oncancel={(e) => {
 		// Escape fires `cancel` first; prevent the native close so we
@@ -49,7 +50,7 @@ $effect(() => {
 >
 	<div
 		role="navigation"
-		aria-label="Services tabs"
+		aria-label={i18n['scoria.label.services_tabs']()}
 		class="services"
 	>
 		<HorizontalTabGroup
@@ -74,8 +75,7 @@ $effect(() => {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   width: 100%;
   height: auto;
   max-width: none;
@@ -98,7 +98,7 @@ div.services {
   border-radius: 4px;
   background-color: #ffffff;
   top: calc(3.25rem + var(--env-border-height, 0));
-  left: 7.5rem;
+  inset-inline-start: 7.5rem;
   z-index: 99;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   padding: 0;