@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/DimensionInput.svelte

@@ -1,8 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts">import { InputVariant } from "../Types/Internal/InputVariant.js";
+<script lang="ts">import { m as i18n } from "../paraglide/messages.js";
+import { InputVariant } from "../Types/Internal/InputVariant.js";
 const min = 0;
-let { id, x = $bindable(null), y = $bindable(null), z = $bindable(null), max, labelTop = "Dimensions", optional = true, placeholder, required = false, variant = InputVariant.Default, decimal = false, invalid = false, showErrorColours = false, disabled, leftIcon, onblur, onfocus, onkeydown, onchange, inputRefs = $bindable({}), "data-type": dataType } = $props();
+let { id, x = $bindable(null), y = $bindable(null), z = $bindable(null), max, labelTop = i18n["scoria.label.dimensions"](), optional = true, placeholder, required = false, variant = InputVariant.Default, decimal = false, invalid = false, showErrorColours = false, disabled, leftIcon, onblur, onfocus, onkeydown, onchange, inputRefs = $bindable({}), "data-type": dataType } = $props();
 function clamp(value) {
 	if (isNaN(value)) {
 		return 0;
@@ -42,12 +43,12 @@ const zId = $derived(id ? `${id}-z` : undefined);
 		class:for-default={variant === InputVariant.Default}
 		class:invalid={isInvalid}
 		>{labelTop}{#if optional}
-			- <span class="optional">optional</span>{/if}</span
+			- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
 	>
 	{#if variant === InputVariant.Default}
 		<span class="border"
 			>{labelTop}{#if optional}
-				- <span class="optional">optional</span>{/if}</span
+				- <span class="optional">{i18n['scoria.label.optional']()}</span>{/if}</span
 		>
 	{/if}
 	<div
@@ -130,8 +131,8 @@ const zId = $derived(id ? `${id}-z` : undefined);
   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;
@@ -376,12 +375,12 @@ span.border {
 }
 
 span.right-label.inset {
-  border-left-color: transparent;
+  border-inline-start-color: transparent;
 }
 
 div.spacer {
   border: solid 1px #cbd4da;
-  border-left-color: transparent;
+  border-inline-start-color: transparent;
   border-radius: 0 4px 4px 0;
   width: 47px;
   flex-shrink: 0;
@@ -395,9 +394,9 @@ div.spacer {
 }
 .icon-container input:first-of-type {
   border-radius: 4px 0 0 4px;
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
 }
 .icon-container input:last-of-type {
   border-radius: 0;
-  border-left-color: transparent;
+  border-inline-start-color: transparent;
 }</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -102,11 +102,11 @@ const snippet = $derived(customSnippet ?? draggableWithSelect);
 
 <style>.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);
@@ -120,11 +120,11 @@ const snippet = $derived(customSnippet ?? draggableWithSelect);
 
 .top-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/DragMenu/DraggableCard.svelte

@@ -144,10 +144,10 @@ function fireToggle() {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  margin-left: auto;
+  margin-inline-start: auto;
   border: solid 3px #cbd4da;
   border-radius: 50%;
-  margin-right: 0.375rem;
+  margin-inline-end: 0.375rem;
 }
 .card span.row:not(.touch) {
   height: 1.5rem;
@@ -157,5 +157,5 @@ function fireToggle() {
 .card span.row.touch {
   height: 1.75rem;
   width: 1.75rem;
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }</style>

package/dist/Components/FileCard.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import Action from "./Action.svelte";
+<script lang="ts">import { m as i18n } from "../paraglide/messages.js";
+import Action from "./Action.svelte";
 import { Colour } from "../scss/colours.js";
 const { file, ondelete } = $props();
 </script>
@@ -13,7 +14,7 @@ const { file, ondelete } = $props();
 	<Action
 		icon={{ name: 'circle-cross' }}
 		backgroundColour={Colour['$transparent-0']}
-		label="Delete"
+		label={i18n['scoria.action.delete']()}
 		onclick={ondelete}
 	/>
 </div>

package/dist/Components/FileUpload.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 { Colour, ColourSet } from "../scss/colours.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
 import { Size } from "../Types/Internal/Size.js";
@@ -99,11 +100,11 @@ function ondragleave(e) {
 		<span
 			class="top-label"
 			class:for-default={variant === InputVariant.Default}
-			>{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 class="border"
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
 			>
 		{/if}
 	{/if}
@@ -145,7 +146,7 @@ function ondragleave(e) {
 		<div
 			class="file-list"
 			role="list"
-			aria-label="Selected files"
+			aria-label={i18n['scoria.label.selected_files']()}
 		>
 			{#if files.length}
 				{#each files as file, index (file)}
@@ -159,7 +160,7 @@ function ondragleave(e) {
 				{/each}
 			{:else}
 				<p>
-					Drag and Drop or Click to Upload {#if multiple}multiple documents{:else}a document{/if}
+					{#if multiple}{i18n['scoria.text.dropzone_multiple']()}{:else}{i18n['scoria.text.dropzone_single']()}{/if}
 				</p>
 			{/if}
 		</div>
@@ -168,7 +169,7 @@ function ondragleave(e) {
 				colourSet={ColourSet.Secondary}
 				backgroundColour={Colour['$transparent-0']}
 				icon={{ name: 'upload' }}
-				label="Upload"
+				label={i18n['scoria.action.upload']()}
 				size={Size.Medium}
 				onclick={() => {
 					openPicker();
@@ -206,8 +207,8 @@ function ondragleave(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;
@@ -239,8 +240,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;
@@ -264,11 +265,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);
@@ -282,11 +283,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;
@@ -304,11 +305,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -323,13 +324,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;
@@ -337,7 +337,7 @@ span.border.invalid {
 
 .right-icon {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 50%;
   translate: 0 -50%;
 }
@@ -361,8 +361,7 @@ label {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 .error-wrapper.for-modal {
   flex: unset;
@@ -383,7 +382,7 @@ div.file-list {
   flex-grow: 1;
   gap: 0.375rem;
   padding: 0.375rem 1.5rem;
-  padding-right: 4rem;
+  padding-inline-end: 4rem;
   overflow-y: scroll;
 }
 

package/dist/Components/GridInput.svelte

@@ -69,7 +69,7 @@ function isSingleSelectObject(item) {
 	{:else if isSelect(item)}
 		{#if isMultiSelect(item)}
 			{#await item.options}
-				{loadingText}
+				{loadingText()}
 			{:then options}
 				{#if isMultiSelectObject<V, VP>(item)}
 					<MultiSelect
@@ -102,7 +102,7 @@ function isSingleSelectObject(item) {
 			{/await}
 		{:else if isSingleSelect(item)}
 			{#await item.options}
-				{loadingText}
+				{loadingText()}
 			{:then options}
 				{#if isSingleSelectObject(item)}
 					<SingleSelect

package/dist/Components/HorizontalTabGroup.svelte

@@ -128,7 +128,7 @@ const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debounce
   gap: 1px;
   min-width: 10rem;
   background-color: #e9ecf1;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   overflow: auto;
   flex-shrink: 0;
 }

package/dist/Components/Icon.svelte

@@ -30,7 +30,7 @@ if (!Object.isFrozen(icons)) {
 }
 </script>
 
-<script lang="ts">const { name, size = Size.Medium, label, float = false, variant, invisible, clickable = false, clickableType = "button", zindex = 1, anchorX, anchorY, left, right, top, bottom, colour, onclick, rotate } = $props();
+<script lang="ts">const { name, size = Size.Medium, label, float = false, variant, invisible, clickable = false, clickableType = "button", zindex = 1, anchorX, anchorY, left, right, top, bottom, colour, onclick, rotate, directional = false } = $props();
 const dim = $derived(sizes[size]);
 const displayIcon = $derived(icons[name]);
 // Build the inline style string once per reactive input change rather
@@ -51,6 +51,7 @@ const ariaLabel = $derived(label ?? name.toString());
 		class:absolute={float}
 		{onclick}
 		class:rotate
+		class:directional
 		onkeydown={passthrough}
 		aria-label={ariaLabel}
 	>
@@ -84,6 +85,7 @@ const ariaLabel = $derived(label ?? name.toString());
 		width={dim}
 		height={dim}
 		class:rotate
+		class:directional
 		viewBox="0 0 {displayIcon.box} {displayIcon.box}"
 	>
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -158,7 +160,7 @@ svg:hover {
 }
 
 .header-icon {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .fill-height {
@@ -169,4 +171,8 @@ svg:hover {
 .fill-width {
   height: max-content;
   width: 100%;
+}
+
+:global([dir='rtl']) .directional {
+  transform: scaleX(-1);
 }</style>

package/dist/Components/IconProps.d.ts

@@ -64,4 +64,11 @@ export interface IconProps {
      * reduce` see a static icon.
      */
     rotate?: boolean;
+    /**
+     * When true, the icon mirrors horizontally under `[dir='rtl']` via
+     * `transform: scaleX(-1)`. Set for icons whose geometry encodes a
+     * reading-direction (chevrons, arrows, navigation affordances).
+     * Leave false (default) for symmetric or rotational icons.
+     */
+    directional?: boolean;
 }