@lavalogic/scoria 0.40.28 → 0.40.30

package/dist/Components/TextArea.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import { cssLength } from "../Helpers/Helpers.svelte.js";
+<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";
 import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
@@ -17,14 +18,14 @@ const isInvalid = $derived(showErrorColours && (required && value.trim() === ""
 			class="top-label"
 			class:for-default={variant === InputVariant.Default}
 			class:invalid={isInvalid}
-			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>{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;- optional</i>{/if}</span
+				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
 			>
 		{/if}
 	{/if}
@@ -53,6 +54,7 @@ const isInvalid = $derived(showErrorColours && (required && value.trim() === ""
 			class:select-none={selectNone}
 			class:left-pad={leftIcon != undefined}
 			class:right-pad={rightIcon != undefined}
+			class:for-default={variant === InputVariant.Default}
 			class:for-modal={variant == InputVariant.Modal}
 			class:max-width={maxWidth}
 			autocomplete={autocomplete ?? 'off'}
@@ -100,8 +102,8 @@ const isInvalid = $derived(showErrorColours && (required && value.trim() === ""
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
-  padding-left: var(--input-padding-left, 0.75rem);
-  padding-right: var(--input-padding-right, 0.75rem);
+  padding-inline-start: var(--input-padding-inline-start, 0.75rem);
+  padding-inline-end: var(--input-padding-inline-end, 0.75rem);
   border: var(--input-border, solid 1px #cbd4da);
   color: #3a4952;
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
@@ -153,7 +155,7 @@ label.for-modal span.top-label {
   z-index: 1;
   position: absolute;
   top: 0.45rem;
-  left: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 label.for-modal span.top-label.invalid {
   color: #aa1414;
@@ -174,17 +176,17 @@ label.for-modal textarea.for-modal {
   height: 100%;
   resize: none;
   padding-top: 1.44rem;
-  padding-right: 0.75rem;
+  padding-inline-end: 0.75rem;
   padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
+  padding-inline-start: 0.75rem;
   font-size: 1.5rem;
   font-weight: 600;
 }
 label.for-modal textarea.for-modal.left-pad {
-  padding-left: 3.5rem;
+  padding-inline-start: 3.5rem;
 }
 label.for-modal textarea.for-modal.right-pad {
-  padding-right: 3.5rem;
+  padding-inline-end: 3.5rem;
 }
 label.for-modal textarea {
   height: 4rem;
@@ -200,8 +202,8 @@ span.right-label.inset {
   font-weight: 500;
   position: absolute;
   background-color: #f4f7f9;
-  border-left: solid 1px #cbd4da;
-  right: 1px;
+  border-inline-start: solid 1px #cbd4da;
+  inset-inline-end: 1px;
   top: 1px;
   bottom: 1px;
   border-radius: 0 4px 4px 0;
@@ -225,11 +227,11 @@ span.right-label.for-modal {
 
 span.for-default {
   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);
@@ -243,11 +245,11 @@ span.for-default.invalid {
 
 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;
@@ -265,11 +267,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -284,13 +286,12 @@ span.border.invalid {
   height: 100%;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .error {
   color: #aa1414;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
   display: block;
   overflow-x: auto;
   white-space: nowrap;

package/dist/Components/TextInput.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import { cssLength, isValidEmailAddress } from "../Helpers/Helpers.svelte.js";
+<script lang="ts">import { m as i18n } from "../paraglide/messages.js";
+import { cssLength, isValidEmailAddress } from "../Helpers/Helpers.svelte.js";
 import { Colour, ColourSet } from "../scss/colours.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
 import { Size } from "../Types/Internal/Size.js";
@@ -24,14 +25,14 @@ const isInvalid = $derived(showErrorColours && !disabled && (required && (!value
 				class="top-label"
 				class:for-default={variant === InputVariant.Default}
 				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>{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;- optional</i>{/if}</span
+					>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
 				>
 			{/if}
 		{/if}
@@ -130,8 +131,8 @@ const isInvalid = $derived(showErrorColours && !disabled && (required && (!value
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
-  padding-left: var(--input-padding-left, 0.75rem);
-  padding-right: var(--input-padding-right, 0.75rem);
+  padding-inline-start: var(--input-padding-inline-start, 0.75rem);
+  padding-inline-end: var(--input-padding-inline-end, 0.75rem);
   border: var(--input-border, solid 1px #cbd4da);
   color: #3a4952;
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
@@ -163,8 +164,8 @@ span.right-label.inset {
   font-weight: 500;
   position: absolute;
   background-color: #f4f7f9;
-  border-left: solid 1px #cbd4da;
-  right: 1px;
+  border-inline-start: solid 1px #cbd4da;
+  inset-inline-end: 1px;
   top: 1px;
   bottom: 1px;
   border-radius: 0 4px 4px 0;
@@ -188,11 +189,11 @@ span.right-label.for-modal {
 
 span.for-default {
   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);
@@ -206,11 +207,11 @@ span.for-default.invalid {
 
 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;
@@ -228,11 +229,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -247,13 +248,12 @@ span.border.invalid {
   height: 100%;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .error {
   color: #aa1414;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
   display: block;
   overflow-x: auto;
   white-space: nowrap;
@@ -261,7 +261,7 @@ span.border.invalid {
 
 .right-icon {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 50%;
   translate: 0 -50%;
 }
@@ -285,8 +285,7 @@ label {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 .error-wrapper.for-modal {
   flex: unset;
@@ -308,7 +307,7 @@ label.for-modal span.top-label {
   z-index: 1;
   position: absolute;
   top: 0.45rem;
-  left: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 label.for-modal span.top-label.invalid {
   color: #aa1414;
@@ -329,17 +328,17 @@ label.for-modal input.for-modal {
   height: 100%;
   resize: none;
   padding-top: 1.44rem;
-  padding-right: 0.75rem;
+  padding-inline-end: 0.75rem;
   padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
+  padding-inline-start: 0.75rem;
   font-size: 1.5rem;
   font-weight: 600;
 }
 label.for-modal input.for-modal.left-pad {
-  padding-left: 3.5rem;
+  padding-inline-start: 3.5rem;
 }
 label.for-modal input.for-modal.right-pad {
-  padding-right: 3.5rem;
+  padding-inline-end: 3.5rem;
 }
 label.for-modal input {
   height: 3rem;

package/dist/Components/ThreeStateRadio.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	module
->import { Colour, ColourSet } from "../scss/colours.js";
+>import { m as i18n } from "../paraglide/messages.js";
+import { Colour, ColourSet } from "../scss/colours.js";
 import { Ternary } from "../Types/Internal/Ternary.js";
 import Action from "./Action.svelte";
 </script>
@@ -31,7 +32,7 @@ function setValue(next) {
 		role="radiogroup"
 		aria-label={label}
 	>
-		<label>
+		<label class:disabled={disabled || noDisabled}>
 			<Action
 				disabled={disabled || noDisabled}
 				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
@@ -40,7 +41,7 @@ function setValue(next) {
 					...noIcon,
 					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
 				}}
-				label={noLabel ?? 'No'}
+				label={noLabel ?? i18n['scoria.action.no']()}
 				onclick={() => {
 					setValue(Ternary.False);
 				}}
@@ -50,13 +51,13 @@ function setValue(next) {
 				type="radio"
 				value="0"
 				checked={value === Ternary.False}
-				aria-label={noLabel ?? 'No'}
+				aria-label={noLabel ?? i18n['scoria.action.no']()}
 				onchange={() => {
 					setValue(Ternary.False);
 				}}
 			/>
 		</label>
-		<label>
+		<label class:disabled={disabled || neutralDisabled}>
 			<Action
 				disabled={disabled || neutralDisabled}
 				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
@@ -65,7 +66,7 @@ function setValue(next) {
 					...neutralIcon,
 					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
 				}}
-				label={neutralLabel ?? 'Allow system to decide'}
+				label={neutralLabel ?? i18n['scoria.label.allow_system_decide']()}
 				onclick={() => {
 					setValue(Ternary.Neutral);
 				}}
@@ -75,13 +76,13 @@ function setValue(next) {
 				type="radio"
 				value="-1"
 				checked={value === Ternary.Neutral}
-				aria-label={neutralLabel ?? 'Allow system to decide'}
+				aria-label={neutralLabel ?? i18n['scoria.label.allow_system_decide']()}
 				onchange={() => {
 					setValue(Ternary.Neutral);
 				}}
 			/>
 		</label>
-		<label>
+		<label class:disabled={disabled || yesDisabled}>
 			<Action
 				disabled={disabled || yesDisabled}
 				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
@@ -90,7 +91,7 @@ function setValue(next) {
 					...yesIcon,
 					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
 				}}
-				label={yesLabel ?? 'Yes'}
+				label={yesLabel ?? i18n['scoria.action.yes']()}
 				onclick={() => {
 					setValue(Ternary.True);
 				}}
@@ -100,7 +101,7 @@ function setValue(next) {
 				type="radio"
 				value="1"
 				checked={value === Ternary.True}
-				aria-label={yesLabel ?? 'Yes'}
+				aria-label={yesLabel ?? i18n['scoria.action.yes']()}
 				onchange={() => {
 					setValue(Ternary.True);
 				}}
@@ -142,12 +143,16 @@ function setValue(next) {
   align-items: center;
   --border-radius: 3px;
   padding: 0.375rem;
-  padding-left: 0.375rem;
-  border-left: solid 1px #cbd4da;
+  padding-inline-start: 0.375rem;
+  border-inline-start: solid 1px #cbd4da;
 }
 .text-label .radios > label:not(:first-child) {
-  border-left: solid 2px #cbd4da;
-  border-left-style: dotted;
+  border-inline-start: solid 2px #cbd4da;
+  border-inline-start-style: dotted;
+}
+.text-label .radios > label.disabled {
+  cursor: not-allowed;
+  background-color: #e9ecf1;
 }
 .text-label.invalid {
   background-color: #f9e9e9;
@@ -159,8 +164,8 @@ function setValue(next) {
 }
 .text-label span {
   flex-grow: 1;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
   text-align: start;
 }
 .text-label:disabled {

package/dist/Components/Touch/BoolCard.svelte

@@ -103,7 +103,7 @@ button.card .row {
   flex-grow: 1;
 }
 button.card.pad-right {
-  padding-right: 4rem;
+  padding-inline-end: 4rem;
 }
 button.card .card-label {
   color: #647d8e;
@@ -147,7 +147,7 @@ button.card.small {
 button.card .value {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
   align-items: center;
   justify-content: stretch;
   flex-grow: 1;

package/dist/Components/Touch/DateModal.svelte

@@ -7,6 +7,7 @@
 import { ColourSet } from "../../scss/colours.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
 import { Size } from "../../Types/Internal/Size.js";
+import { m as i18n } from "../../paraglide/messages.js";
 import { tick } from "svelte";
 import Action from "../Action.svelte";
 import DatePicker from "../DatePicker.svelte";
@@ -97,7 +98,7 @@ function submitOnEnter(e) {
 					bind:inputRef={overrideInputRef}
 					bind:value={overrideScanValue}
 					variant={InputVariant.Modal}
-					labelTop="Scan Barcode to Override"
+					labelTop={i18n['scoria.label.scan_barcode_override']()}
 					onkeydown={submitOnEnter}
 				/>
 			{/if}
@@ -105,7 +106,7 @@ function submitOnEnter(e) {
 				bind:inputRef
 				bind:value={scanValue}
 				variant={InputVariant.Modal}
-				labelTop="Scan Barcode"
+				labelTop={i18n['scoria.label.scan_barcode']()}
 				onkeydown={submitOnEnter}
 			/>
 		</div>
@@ -136,14 +137,14 @@ function submitOnEnter(e) {
 			<button
 				onkeydown={passthrough}
 				type="submit"
-				disabled={!isValid}>Confirm</button
+				disabled={!isValid}>{i18n['scoria.action.confirm']()}</button
 			>
 			<button
 				onkeydown={passthrough}
 				type="button"
 				onclick={() => {
 					cancelEditing();
-				}}>Cancel</button
+				}}>{i18n['scoria.action.cancel']()}</button
 			>
 		</div>
 	{/snippet}

package/dist/Components/Touch/EditCard.svelte

@@ -118,7 +118,7 @@ const { noborder, label, desktop = false, iconName = "edit", disabled = false, e
   flex-grow: 1;
 }
 .card.pad-right {
-  padding-right: 4rem;
+  padding-inline-end: 4rem;
 }
 .card .card-label {
   color: #647d8e;
@@ -164,11 +164,11 @@ const { noborder, label, desktop = false, iconName = "edit", disabled = false, e
 }
 .card.desktop .card-label.label {
   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);
@@ -181,11 +181,11 @@ const { noborder, label, desktop = false, iconName = "edit", disabled = false, e
 }
 .card.desktop .card-label.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;

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -3,7 +3,8 @@
 <script
 	module
 	lang="ts"
->import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
 import { tick, untrack } from "svelte";
 import Icon from "../Icon.svelte";
@@ -131,7 +132,7 @@ function onDigitClick(e) {
 			{#if max != undefined}
 				<TextInput
 					value={`${max}`}
-					labelTop="Maximum"
+					labelTop={i18n['scoria.label.maximum']()}
 					selectNone
 					disabled
 					variant={InputVariant.Modal}

package/dist/Components/Touch/NumberModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
+<script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
+import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
 import { passthrough } from "../../Helpers/Helpers.svelte.js";
 import NumberKeyboard from "./NumberKeyboard.svelte";
 import TouchModal from "./TouchModal.svelte";
@@ -43,14 +44,14 @@ const isAcceptableValue = useAsyncFlag(() => tempValue == null ? false : isValid
 			<button
 				onkeydown={passthrough}
 				type="submit"
-				disabled={!isAcceptableValue.value}>Confirm</button
+				disabled={!isAcceptableValue.value}>{i18n['scoria.action.confirm']()}</button
 			>
 			<button
 				onkeydown={passthrough}
 				type="button"
 				onclick={() => {
 					cancelEditing();
-				}}>Cancel</button
+				}}>{i18n['scoria.action.cancel']()}</button
 			>
 		</div>
 	{/snippet}

package/dist/Components/Touch/PlusMinusCard.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import { Size } from "../../Types/Internal/Size.js";
+<script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
+import { Size } from "../../Types/Internal/Size.js";
 import Action from "../Action.svelte";
 let { callback, disabled = false, children } = $props();
 </script>
@@ -12,7 +13,7 @@ let { callback, disabled = false, children } = $props();
 	<div class="icon-left">
 		<Action
 			{disabled}
-			label="Decrement"
+			label={i18n['scoria.action.decrement']()}
 			onclick={() => {
 				callback(-1);
 			}}
@@ -27,7 +28,7 @@ let { callback, disabled = false, children } = $props();
 	<div class="icon-right">
 		<Action
 			{disabled}
-			label="Increment"
+			label={i18n['scoria.action.increment']()}
 			onclick={() => {
 				callback(1);
 			}}
@@ -75,8 +76,8 @@ let { callback, disabled = false, children } = $props();
   user-select: none;
   justify-content: center;
   text-align: center;
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline-start: 0.375rem;
+  padding-inline-end: 0.375rem;
 }
 .card .icon-left,
 .card .icon-right {

package/dist/Components/Touch/SelectModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
+<script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
+import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
 import { onMount, tick } from "svelte";
 import TextInput from "../TextInput.svelte";
@@ -47,7 +48,7 @@ onMount(() => {
 		class:with-top-padding={!searchbar}
 	>
 		{#if filteredChoices.length === 0}
-			<span>No Results</span>
+			<span>{i18n['scoria.text.no_results']()}</span>
 		{/if}
 		<!-- Keyed by index, not `choice.label`: labels are not guaranteed
 		     unique (e.g. a courier can expose two services with the same
@@ -88,7 +89,7 @@ onMount(() => {
 		{#if searchbar}
 			<div class="header-extra visible">
 				<TextInput
-					labelTop="Search"
+					labelTop={i18n['scoria.label.search']()}
 					bind:value={searchValue}
 					variant={InputVariant.Modal}
 				/>
@@ -103,7 +104,7 @@ onMount(() => {
 				type="button"
 				onclick={() => {
 					cancelEditing();
-				}}>Cancel</button
+				}}>{i18n['scoria.action.cancel']()}</button
 			>
 		</div>
 	{/snippet}