@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/SingleSelect.svelte

@@ -3,20 +3,23 @@
 <script
 	lang="ts"
 	generics="V extends object, VP extends ValueProp<V>"
->import { devCatch, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../paraglide/messages.js";
+import { devCatch, 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";
 import Svelecte from "svelecte";
 import { onMount, tick } from "svelte";
 import Action from "./Action.svelte";
-const { label, options, labelProp, valueProp, focusOnLoad = false, searchable = true, creatable = false, createFilter, disabled, width, height, name = "Item", valueAsObject, minHeight, clearable = false, required = false, invalid = false, borderless = false, lazyDropdown = false, forceUpwards = false, inputId = generateWeakId(), value: selectedValue, onchange, onfocus, onCreateOption } = $props();
+const { label, options, labelProp, valueProp, focusOnLoad = false, searchable = true, creatable = false, createFilter, disabled, width, height, name = "Item", placeholder, valueAsObject, minHeight, clearable = false, required = false, invalid = false, borderless = false, lazyDropdown = false, forceUpwards = false, inputId = generateWeakId(), value: selectedValue, onchange, onfocus, onCreateOption } = $props();
 // Single source of truth for the current value. The previous code mixed
 // `$derived` and `$effect.pre`, which fired a redundant assignment on mount.
 const currentValue = $derived(selectedValue);
 let ref = $state();
 let wrapperRef = $state();
-const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? "") ? "an" : "a");
+// 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"]());
 const isInvalid = $derived(required && !currentValue || invalid);
 let hasAutoFocused = $state(false);
 // ResizeObserver-driven height. Replaces the layout-forcing
@@ -96,10 +99,10 @@ function isObject(value) {
 	{#if label}
 		<label for={inputId}>
 			<span
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
 			>
 			<span class="border"
-				>{label}{#if !required}&nbsp;- <i>optional</i>{/if}</span
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
 			>
 		</label>
 	{/if}
@@ -123,7 +126,7 @@ function isObject(value) {
 		{creatable}
 		searchProps={{ keepSelectionInList: true }}
 		{onCreateOption}
-		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		placeholder={placeholder ?? fallbackPlaceholder}
 		{lazyDropdown}
 		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		currentValue as Array<any>}
@@ -220,19 +223,20 @@ function isObject(value) {
 }
 .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);
@@ -243,13 +247,18 @@ function isObject(value) {
 .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;
@@ -261,6 +270,11 @@ function isObject(value) {
 .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%;
@@ -306,7 +320,7 @@ function isObject(value) {
 }
 .select-wrapper .selection {
   font-size: 0.875rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
   white-space: nowrap;
   display: flex;
 }
@@ -325,7 +339,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;
 }
 
@@ -350,6 +364,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/SingleSelectCommonProps.d.ts

@@ -6,8 +6,17 @@ export interface SingleSelectCommonProps<V extends object, VP extends ValueProp<
     labelProp: NonNullableKey<V>;
     /** Key of `V` whose value is the unique identifier. */
     valueProp: VP;
-    /** Singular display name. */
+    /**
+     * 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;
     /** CSS width override. Use `cssLength('...')` to construct. */
     width?: CssLength;
     /** CSS height override. Use `cssLength('...')` to construct. */

package/dist/Components/StepForm.svelte

@@ -6,10 +6,11 @@
 >import { readJSON } from "../Helpers/Storage.js";
 import { ColourSet } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
+import { m as i18n } from "../paraglide/messages.js";
 import { onMount, untrack } from "svelte";
 import Button from "./Button.svelte";
 import StepButton from "./StepButton.svelte";
-const { name, steps, currentStep, noscroll = false, noStepMessage = "No Step Selected" } = $props();
+const { name, steps, currentStep, noscroll = false, noStepMessage = i18n["scoria.text.no_step_selected"]() } = $props();
 const isNonEmptyString = (raw) => typeof raw === "string" && raw.length > 0;
 const storageKey = (key) => `scoria-step-form:${key}:active-step`;
 onMount(() => {
@@ -89,7 +90,7 @@ $effect(() => {
 				onclick={() => {
 					previous?.onclick();
 				}}
-				colourSet={ColourSet.Secondary}>Previous</Button
+				colourSet={ColourSet.Secondary}>{i18n['scoria.action.previous']()}</Button
 			>
 			<Button
 				size={Size.Small}
@@ -98,7 +99,7 @@ $effect(() => {
 					next?.onclick();
 				}}
 				disabled={!next}
-				colourSet={ColourSet.Primary}>Next</Button
+				colourSet={ColourSet.Primary}>{i18n['scoria.action.next']()}</Button
 			>
 		</div>
 	</div>
@@ -155,8 +156,8 @@ $effect(() => {
   gap: 1.0005rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  padding-left: 1.250625rem;
-  padding-right: 1.250625rem;
+  padding-inline-start: 1.250625rem;
+  padding-inline-end: 1.250625rem;
   flex-basis: 4rem;
   flex-shrink: 0;
   background-color: #ffffff;

package/dist/Components/Switch.svelte

@@ -91,8 +91,8 @@ const toggle = () => {
 }
 .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 {
@@ -120,9 +120,9 @@ const toggle = () => {
 }
 
 .switch {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-left: solid 1px #cbd4da;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-inline-start: solid 1px #cbd4da;
   width: 4rem;
   height: 100%;
   background-color: #f4f7f9;