@lavalogic/scoria 0.40.28 → 0.40.30

package/dist/Components/AccordionGroup.svelte

@@ -67,7 +67,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
   gap: 1px;
   background-color: #cbd4da;
   min-width: 10rem;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   overflow: auto;
   flex-shrink: 0;
 }

package/dist/Components/AlertModal.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	module
->import { browser } from "$app/environment";
+>import { m as i18n } from "../paraglide/messages.js";
+import { browser } from "$app/environment";
 import { DATAMatrix } from "../Helpers/Datamatrix.js";
 // Frozen const map of scanner shortcut codes recognised by AlertModal.
 // Using `Object.values` to drive comparisons keeps the strings off the
@@ -73,7 +74,7 @@ onMount(() => {
 				if (dev) {
 					console.warn(`Uncaught command \`${value}\``);
 				}
-				toastContext.toast(`Unrecognised input: ${value}`);
+				toastContext.toast(i18n["scoria.text.unrecognised_input"]({ value }));
 				return false;
 			}
 		}

package/dist/Components/Base/Pagination.svelte

@@ -22,7 +22,8 @@ preserves button identity across page changes.
 <script
 	lang="ts"
 	generics="T extends object"
->import { autoPluralise, generateWeakId } from "../../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { autoPluralise, generateWeakId } from "../../Helpers/Helpers.svelte.js";
 import { Colour } from "../../scss/colours.js";
 import { Side } from "../../Types/Internal/Side.js";
 import { Size } from "../../Types/Internal/Size.js";
@@ -30,7 +31,7 @@ import { Variant } from "../../Types/Internal/Variant.js";
 import Button from "../Button.svelte";
 import Icon from "../Icon.svelte";
 import NumberInput from "../NumberInput.svelte";
-const { items, key, pageSize = 20, snippet, itemName = "Item", border = false, padding = "1.5rem", gap = "1.5rem", height } = $props();
+const { items, key, pageSize = 20, snippet, itemName = "Item", countLabel, border = false, padding = "1.5rem", gap = "1.5rem", height } = $props();
 const _uuid = generateWeakId();
 let pageIndex = $state(0);
 const pageValue = $derived(pageIndex + 1);
@@ -83,11 +84,18 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 	{/each}
 	<div class="spread_row bottom_row">
 		<div class="block">
-			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
+			<span
+				>{countLabel
+					? countLabel(items.length)
+					: i18n['scoria.text.item_count']({
+							count: items.length,
+							noun: autoPluralise(itemName, items.length),
+						})}</span
+			>
 		</div>
 
 		<div class="block records-per-page">
-			<span>Records per Page: {pageSize}</span>
+			<span>{i18n['scoria.label.records_per_page']()} {pageSize}</span>
 		</div>
 
 		<div class="spacer"></div>
@@ -95,14 +103,14 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 		<div
 			class="scrollable"
 			role="navigation"
-			aria-label="Pagination"
+			aria-label={i18n['scoria.label.pagination']()}
 		>
 			<div class="block">
 				<Icon
 					name="paper"
 					colour={Colour['$ui-blue-6']}
 				/>
-				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
+				<span>{i18n['scoria.text.page_count']({ count: lastPage })}</span>
 			</div>
 
 			<div class="block">
@@ -113,7 +121,7 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 					/></label
 				>
 
-				<label for="{_uuid}-jump-to-page">Jump to page:</label>
+				<label for="{_uuid}-jump-to-page">{i18n['scoria.label.jump_to_page']()}</label>
 
 				<NumberInput
 					id="{_uuid}-jump-to-page"
@@ -134,7 +142,7 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 					iconLeft={{
 						name: 'left-close',
 						size: Size.FillHeight,
-					}}>Previous Page</Button
+					}}>{i18n['scoria.action.previous_page']()}</Button
 				>
 			</div>
 
@@ -145,7 +153,7 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 						side={Side.Bottom}
 						size={Size.FillHeight}
 						toggled={pageIndex + 1 === pageNumber}
-						label={`Go to page ${pageNumber.toString()}`}
+						label={i18n['scoria.action.go_to_page']({ number: pageNumber })}
 						onclick={() => {
 							pageIndex = pageNumber - 1;
 						}}>{pageNumber}</Button
@@ -165,7 +173,7 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
 					iconRight={{
 						name: 'right-close',
 						size: Size.FillHeight,
-					}}>Next Page</Button
+					}}>{i18n['scoria.action.next_page']()}</Button
 				>
 			</div>
 		</div>
@@ -239,10 +247,10 @@ const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
   background-color: #ffffff;
 }
 .spread_row > *:first-child {
-  border-bottom-left-radius: 4px;
+  border-end-start-radius: 4px;
 }
 .spread_row > *:last-child {
-  border-bottom-right-radius: 4px;
+  border-end-end-radius: 4px;
 }
 .spread_row .spacer {
   flex-grow: 2;

package/dist/Components/Base/PaginationProps.d.ts

@@ -41,6 +41,11 @@ export interface PaginationProps<T extends object> {
      * @default 'Item'
      */
     itemName?: string;
+    /**
+     * Complete item-count sentence, e.g. `(n) => `${n} orders``. When omitted the
+     * count is rendered from the catalogue with an English-only noun form.
+     */
+    countLabel?: (count: number) => string;
     /**
      * When `true` the wrapper draws a rounded thick border around
      * the rendered items.

package/dist/Components/Base/Snippets.svelte

@@ -10,6 +10,7 @@ async-status surfaces. The component itself renders nothing.
 	module
 >import { getErrorMessage, loadingText } from "../../Helpers/Helpers.svelte.js";
 import Button from "../Button.svelte";
+import { m as i18n } from "../../paraglide/messages.js";
 // The local `{#snippet _pending}` / `{#snippet _failed}` declarations
 // must be hoistable references for `export const` to bind to them.
 // Svelte 5 currently requires the snippet name to differ from the
@@ -20,15 +21,15 @@ export const failed = _failed;
 </script>
 
 {#snippet _pending()}
-	{loadingText}
+	{loadingText()}
 {/snippet}
 {#snippet _failed(e: unknown, retry?: () => void)}
-	Error: {getErrorMessage(e)}
+	{i18n['scoria.text.error_prefix']({ message: getErrorMessage(e) })}
 	{#if retry}
 		<Button
 			onclick={() => {
 				retry();
-			}}>Retry</Button
+			}}>{i18n['scoria.action.retry_load']()}</Button
 		>
 	{/if}
 {/snippet}

package/dist/Components/Button.svelte

@@ -14,6 +14,7 @@ const paddingSizesVertical = {
 	[Size.Tiny]: "0.25rem",
 	[Size.Small]: "0.375rem",
 	[Size.MediumSmall]: "0.5rem",
+	// [Size.Medium]: '0.625rem',
 	[Size.Medium]: "0.90625rem",
 	[Size.MediumLarge]: "0.90625rem",
 	[Size.Large]: "0.925rem",
@@ -230,8 +231,8 @@ $effect(() => {
 button {
   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;
   color: #3a4952;
-  padding-left: var(--button-padding-left, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
-  padding-right: var(--button-padding-right, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
+  padding-inline-start: var(--button-padding-inline-start, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
+  padding-inline-end: var(--button-padding-inline-end, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
   padding-top: var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
   padding-bottom: var(--button-padding-bottom, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
   font-size: var(--font-size, 0.875rem);
@@ -443,12 +444,12 @@ button.toolbar.right, button.toolbar.left {
   padding-bottom: 1rem;
 }
 button.toolbar.right {
-  border-left: solid 3px #ffffff;
-  border-right: solid 3px #ffffff;
+  border-inline-start: solid 3px #ffffff;
+  border-inline-end: solid 3px #ffffff;
 }
 button.toolbar.left {
-  border-right: solid 3px #ffffff;
-  border-left: solid 3px #ffffff;
+  border-inline-end: solid 3px #ffffff;
+  border-inline-start: solid 3px #ffffff;
 }
 button.toolbar.top {
   border-top: solid 3px #ffffff;
@@ -473,10 +474,10 @@ button.toolbar:not([disabled]):focus, button.toolbar:not([disabled]):focus-visib
   outline-color: #1f81a0;
 }
 button.toolbar:not([disabled]).toggled.right {
-  border-left-color: #259fc7;
+  border-inline-start-color: #259fc7;
 }
 button.toolbar:not([disabled]).toggled.left {
-  border-right-color: #259fc7;
+  border-inline-end-color: #259fc7;
 }
 button.toolbar:not([disabled]).toggled.top {
   border-top-color: #259fc7;

package/dist/Components/Checkbox.svelte

@@ -113,11 +113,11 @@ import Icon from "./Icon.svelte";
 }
 
 label.text-label {
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 
 .checkbox-container.compact label.text-label {
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 }
 
 input {

package/dist/Components/ChipsInput.svelte

@@ -90,11 +90,11 @@ function onkeydown(e) {
 
 span.top-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);
@@ -108,11 +108,11 @@ span.top-label.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;

package/dist/Components/CollapsibleCard.svelte

@@ -40,7 +40,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
 			<h3>{title}</h3>
 			{#if subtitle}
 				{#await subtitle}
-					<span>{loadingText}</span>
+					<span>{loadingText()}</span>
 				{:then resolvedSubtitle}
 					<span>{resolvedSubtitle}</span>
 				{/await}
@@ -94,7 +94,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
   background: transparent;
   border: none;
   box-sizing: border-box;
-  padding: 0 0.5rem 0.5rem 0.5rem;
+  padding: 0 0 0.5rem 0;
 }
 .heading .left {
   display: flex;
@@ -114,7 +114,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
   font-size: 0.875rem;
 }
 .heading .indicator {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
 }

package/dist/Components/ConditionBuilder/ConditionBuilder.svelte

@@ -3,11 +3,12 @@
 <script
 	lang="ts"
 	generics="F extends string | number, O extends string | number, V"
->import SingleSelect from "../SingleSelect.svelte";
+>import { m as i18n } from "../../paraglide/messages.js";
+import SingleSelect from "../SingleSelect.svelte";
 import Button from "../Button.svelte";
 import { makeGroup, makeLeaf } from "./ConditionTree.js";
 import Self from "./ConditionBuilder.svelte";
-const { root, onChange, fields, operatorsFor, valueEditor, defaultValueFor, allowGroups = true, maxDepth = 5, addConditionLabel = "Add Condition", addGroupLabel = "Add Group", andLabel = "AND", orLabel = "OR", depth = 0 } = $props();
+const { root, onChange, fields, operatorsFor, valueEditor, defaultValueFor, allowGroups = true, maxDepth = 5, addConditionLabel = i18n["scoria.action.add_condition"](), addGroupLabel = i18n["scoria.action.add_group"](), andLabel = i18n["scoria.label.combinator_and"](), orLabel = i18n["scoria.label.combinator_or"](), depth = 0 } = $props();
 function seedValue(field, operator) {
 	return defaultValueFor ? defaultValueFor(field, operator) : null;
 }
@@ -66,7 +67,7 @@ function setValue(leaf, value) {
 			{#if child.kind === 'leaf'}
 				<div class="leaf">
 					<SingleSelect
-						label="Field"
+						label={i18n['scoria.label.field']()}
 						options={[...fields]}
 						labelProp="label"
 						valueProp="value"
@@ -76,7 +77,7 @@ function setValue(leaf, value) {
 						onchange={(value) => setField(child, value)}
 					/>
 					<SingleSelect
-						label="Operator"
+						label={i18n['scoria.label.operator']()}
 						options={[...operatorsFor(child.field)]}
 						labelProp="label"
 						valueProp="value"
@@ -89,7 +90,7 @@ function setValue(leaf, value) {
 						{@render valueEditor(child, (value) => setValue(child, value))}
 					</div>
 					<Button
-						label="Remove condition"
+						label={i18n['scoria.action.remove_condition']()}
 						iconLeft={{ name: 'circle-cross' }}
 						onclick={() => removeChild(child)}
 					/>
@@ -112,7 +113,7 @@ function setValue(leaf, value) {
 						depth={depth + 1}
 					/>
 					<Button
-						label="Remove group"
+						label={i18n['scoria.action.remove_group']()}
 						iconLeft={{ name: 'circle-cross' }}
 						onclick={() => removeChild(child)}
 					/>

package/dist/Components/Contexts/ContextMenu.svelte

@@ -27,7 +27,8 @@ not render `ContextMenu` directly. Open a menu through the context:
 `Escape` closes the menu and returns focus to the previously focused
 element; `ArrowUp` / `ArrowDown` cycle focus through the items.
 -->
-<script lang="ts">import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte.js";
+<script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
+import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte.js";
 import { devCatch } from "../../Helpers/Helpers.svelte.js";
 import { getContext, tick, untrack } from "svelte";
 import { fade } from "svelte/transition";
@@ -110,7 +111,7 @@ function focusPrev() {
 		bind:this={menuEl}
 		style="top: {_y}px; left: {_x}px;"
 		role="menu"
-		aria-label="Context menu"
+		aria-label={i18n['scoria.label.context_menu']()}
 		tabindex="-1"
 		onkeydown={(e) => {
 			if (e.key === 'Escape') {

package/dist/Components/Contexts/Toast.svelte

@@ -21,7 +21,8 @@ the duration collapses to zero. The copy action is only shown when
 <script
 	lang="ts"
 	module
->import { ColourSet } from "../../scss/colours.js";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { ColourSet } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
 import { Validity } from "../../Types/Internal/Validity.js";
 import { slide } from "svelte/transition";
@@ -50,7 +51,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 500);
 				<Action
 					onclick={copy}
 					icon={{ name: 'copy' }}
-					label="Copy to clipboard"
+					label={i18n['scoria.action.copy_to_clipboard']()}
 					size={Size.MediumLarge}
 					colourSet={ColourSet.Auxiliary}
 				/>
@@ -67,7 +68,7 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 500);
 				<Action
 					size={Size.MediumLarge}
 					icon={{ name: 'cross' }}
-					label="Dismiss"
+					label={i18n['scoria.action.dismiss']()}
 					onclick={() => {
 						toast.close?.();
 					}}

package/dist/Components/Contexts/ToastContainer.svelte

@@ -15,7 +15,8 @@ a single rolling region without interrupting the user; individual
 Mounted once at the app root by `ContextWrapper`; consumers should
 not render this directly.
 -->
-<script lang="ts">import { ToastContext } from "../../Contexts/ToastContext.svelte.js";
+<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";
 import { Validity } from "../../Types/Internal/Validity.js";
 import { getContext } from "svelte";
@@ -30,7 +31,7 @@ function copyDataToClipboard(text) {
 	if (!navigator.clipboard) {
 		toastContext.toast({
 			result: Validity.Invalid,
-			message: "Cannot Copy in an Insecure Connection",
+			message: i18n["scoria.message.cannot_copy_insecure"](),
 			copyable: false
 		});
 		return;
@@ -38,7 +39,7 @@ function copyDataToClipboard(text) {
 	navigator.clipboard.writeText(text).catch(devCatch);
 	toastContext.toast({
 		result: Validity.Info,
-		message: "Message copied to clipboard",
+		message: i18n["scoria.message.copied_to_clipboard"](),
 		copyable: false
 	});
 }
@@ -46,7 +47,7 @@ function copyDataToClipboard(text) {
 
 <section
 	aria-live="polite"
-	aria-label="Notifications"
+	aria-label={i18n['scoria.label.notifications']()}
 >
 	{#each toastContext.toasts as toast (toast.id)}
 		<Toast
@@ -62,7 +63,7 @@ function copyDataToClipboard(text) {
   user-select: none;
   gap: 0.5rem;
   bottom: var(--toast-bottom, 8rem);
-  right: var(--toast-right, 2rem);
+  inset-inline-end: var(--toast-inline-end, 2rem);
   display: flex;
   position: fixed;
   flex-flow: column-reverse nowrap;

package/dist/Components/Contexts/Tooltip.svelte

@@ -63,7 +63,7 @@ const tooltipContext = getContext(TooltipContext.identifier);
   z-index: -1;
   top: 0;
   border-radius: 4px;
-  left: 50%;
+  inset-inline-start: 50%;
   translate: -50% -50%;
   transform: rotate(45deg);
   background-color: #3a4952;
@@ -81,7 +81,7 @@ const tooltipContext = getContext(TooltipContext.identifier);
   z-index: -1;
   top: 100%;
   border-radius: 4px;
-  left: 50%;
+  inset-inline-start: 50%;
   translate: -50% -50%;
   transform: rotate(45deg);
   background-color: #3a4952;

package/dist/Components/DataMatrixIcon.svelte

@@ -1,8 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts">import { passthrough } from "../Helpers/Helpers.svelte.js";
+<script lang="ts">import { m as i18n } from "../paraglide/messages.js";
+import { passthrough } from "../Helpers/Helpers.svelte.js";
 import Icon from "./Icon.svelte";
-const { icon, interactive = false, title, oncontextmenu, ariaLabel = "Edit Barcode Value" } = $props();
+const { icon, interactive = false, title, oncontextmenu, ariaLabel = i18n["scoria.label.edit_barcode_value"]() } = $props();
 let svgContainer = $state(null);
 // Track the last SVG we mounted so the effect only re-runs when the
 // underlying SVG identity changes. Repeated parent renders that hand
@@ -68,7 +69,7 @@ $effect(() => {
 	<button
 		aria-label={ariaLabel}
 		onkeydown={passthrough}
-		title="Right click to edit barcode value for the {title} command"
+		title={i18n['scoria.text.barcode_edit_hint']({ name: title })}
 		oncontextmenu={(e) => {
 			if (oncontextmenu) {
 				e.preventDefault();

package/dist/Components/DateInput.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	module
->import { cssLength } from "../Helpers/Helpers.svelte.js";
+>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";
@@ -60,14 +61,14 @@ function handleChange(e) {
 				class="top-label"
 				class:for-default={variant === InputVariant.Default}
 				class:invalid={isInvalid}
-				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>{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;- optional</i>{/if}</span
+					>{label}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
 				>
 			{/if}
 		{/if}
@@ -127,8 +128,8 @@ function handleChange(e) {
   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;
@@ -160,8 +161,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;
@@ -185,11 +186,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);
@@ -203,11 +204,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;
@@ -225,11 +226,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -244,13 +245,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;
@@ -258,7 +258,7 @@ span.border.invalid {
 
 .right-icon {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 50%;
   translate: 0 -50%;
 }
@@ -282,8 +282,7 @@ label {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 .error-wrapper.for-modal {
   flex: unset;
@@ -305,7 +304,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;
@@ -326,17 +325,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/DesktopModal.svelte

@@ -125,7 +125,7 @@ const { onclose, onsubmit, noscroll, headerLabel, headerSubtitle, buttons, child
   background-color: #ffffff;
 }
 .footer div.left {
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 
 .body-outer {