@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/NumberInput.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";
@@ -41,14 +42,14 @@ const isInvalid = $derived(showErrorColours && (required && value == null || inv
 				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}
@@ -128,8 +129,8 @@ const isInvalid = $derived(showErrorColours && (required && value == null || inv
   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;
@@ -161,8 +162,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;
@@ -186,11 +187,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);
@@ -204,11 +205,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;
@@ -226,11 +227,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -245,13 +246,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;
@@ -259,7 +259,7 @@ span.border.invalid {
 
 .right-icon {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 50%;
   translate: 0 -50%;
 }
@@ -283,8 +283,7 @@ label {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 .error-wrapper.for-modal {
   flex: unset;
@@ -306,7 +305,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;
@@ -327,17 +326,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/PasswordInput.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">import { cssLength } from "../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../paraglide/messages.js";
 import { ColourSet } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
 import Action from "./Action.svelte";
@@ -55,7 +56,9 @@ function toggleVisibility() {
 
 			<div class="right-icon">
 				<Action
-					label={showInput ? 'Hide password' : 'Show password'}
+					label={showInput
+						? i18n['scoria.label.hide_password']()
+						: i18n['scoria.label.show_password']()}
 					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
 					icon={{ name: showInput ? 'visibility-off' : 'visibility' }}
 					size={Size.MediumSmall}
@@ -74,8 +77,8 @@ function toggleVisibility() {
   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;
@@ -107,8 +110,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;
@@ -132,11 +135,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);
@@ -150,11 +153,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;
@@ -172,11 +175,11 @@ span.border.invalid {
 }
 
 .left-pad {
-  padding-left: 3rem;
+  padding-inline-start: 3rem;
 }
 
 .right-pad {
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
 }
 
 .icon-container {
@@ -191,13 +194,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;
@@ -205,7 +207,7 @@ span.border.invalid {
 
 .right-icon {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 50%;
   translate: 0 -50%;
 }
@@ -229,8 +231,7 @@ label {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 .error-wrapper.for-modal {
   flex: unset;
@@ -252,7 +253,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;
@@ -273,17 +274,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/PopoverButton.svelte

@@ -116,14 +116,14 @@ function onWindowKeydown(e) {
   max-width: 80vw;
 }
 .popover.align-center {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 .popover.align-start {
-  left: 0;
+  inset-inline-start: 0;
 }
 .popover.align-end {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .caret {
@@ -132,20 +132,20 @@ function onWindowKeydown(e) {
   width: 12px;
   height: 12px;
   background-color: #ffffff;
-  border-left: solid 1px #cbd4da;
+  border-inline-start: solid 1px #cbd4da;
   border-top: solid 1px #cbd4da;
   transform: rotate(45deg);
 }
 
 .align-center .caret {
-  left: 50%;
-  margin-left: -6px;
+  inset-inline-start: 50%;
+  margin-inline-start: -6px;
 }
 
 .align-start .caret {
-  left: 1.5rem;
+  inset-inline-start: 1.5rem;
 }
 
 .align-end .caret {
-  right: 1.5rem;
+  inset-inline-end: 1.5rem;
 }</style>

package/dist/Components/QuerySelect.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="V extends object, VP extends ValueProp<V>"
->import { ToastContext } from "../Contexts/ToastContext.svelte.js";
+>import { m as i18n } from "../paraglide/messages.js";
+import { ToastContext } from "../Contexts/ToastContext.svelte.js";
 import { dev } from "$app/environment";
 import { devCatch, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
 import { attachDropdownPortal } from "../Helpers/dropdownPortal.js";
@@ -12,7 +13,7 @@ import { Size } from "../Types/Internal/Size.js";
 import Svelecte from "svelecte";
 import { getContext, onMount, tick, untrack } from "svelte";
 import Action from "./Action.svelte";
-let { label, labelProp, valueProp, clearable = false, required = false, invalid = false, valueAsObject, name = "Item", disabled, query, width, height, focusOnLoad = false, inputId = generateWeakId(), value: selectedValue, options = $bindable([]), isValid, onchange, onfocus } = $props();
+let { label, labelProp, valueProp, clearable = false, required = false, invalid = false, valueAsObject, name = "Item", placeholder, disabled, query, width, height, focusOnLoad = false, inputId = generateWeakId(), value: selectedValue, options = $bindable([]), isValid, onchange, onfocus } = $props();
 export function forceQuery() {
 	clearTimeout(timeoutHandler);
 	const input = document.getElementById(inputId);
@@ -49,6 +50,8 @@ $effect.pre(() => {
 				}
 			} else if (!options.some((opt) => opt[valueProp] === selectedValue)) {
 				options = [...options, {
+					//best-effort solution. Not a good one
+					// eslint-disable-next-line @typescript-eslint/no-base-to-string
 					[labelProp]: selectedValue.toString(),
 					[valueProp]: selectedValue
 				}];
@@ -179,7 +182,9 @@ function onChange(newValue) {
 		}
 	}
 }
-const an = $derived(vowels.has(name[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"]());
 let isExpanded = $state(false);
 </script>
 
@@ -191,10 +196,10 @@ let isExpanded = $state(false);
 	{#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}
@@ -207,7 +212,7 @@ let isExpanded = $state(false);
 			forceShowDropdown(e);
 			onfocus?.(e);
 		}}
-		placeholder="Please Select{name ? ` ${an} ${name}` : ''}"
+		placeholder={placeholder ?? fallbackPlaceholder}
 		bind:this={ref}
 		{inputId}
 		{disabled}
@@ -270,7 +275,7 @@ let isExpanded = $state(false);
 
 	{#snippet selection(selectedOptions: Array<V>)}
 		{#if selectedOptions.length == 0}
-			<span class="selection">Please Select {an} {name}</span>
+			<span class="selection">{placeholder ?? fallbackPlaceholder}</span>
 		{:else}
 			<span class="selection">{selectedOptions[0][labelProp]}</span>
 		{/if}
@@ -298,19 +303,20 @@ let isExpanded = $state(false);
 }
 .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);
@@ -321,13 +327,18 @@ let isExpanded = $state(false);
 .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;
@@ -339,6 +350,11 @@ let isExpanded = $state(false);
 .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%;
@@ -384,7 +400,7 @@ let isExpanded = $state(false);
 }
 .select-wrapper .selection {
   font-size: 0.875rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
   white-space: nowrap;
   display: flex;
 }
@@ -403,7 +419,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;
 }
 
@@ -428,6 +444,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/QuerySelectProps.d.ts

@@ -8,8 +8,17 @@ interface QuerySelectCommonProps<V extends object, VP extends ValueProp<V>> {
     query: (value: string) => Promise<Array<V>>;
     /** Optional initial option set; bindable so the component can extend it. */
     options?: Array<V>;
-    /** 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;
     /** Disable the input. */
     disabled?: boolean;
     /** CSS width override. Use `cssLength('...')` to construct. */

package/dist/Components/ResourceCalendar/ResourceCalendar.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="E extends CalendarEvent"
->import { Colour } from "../../scss/colours.js";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { Colour } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
 import Button from "../Button.svelte";
 import Icon from "../Icon.svelte";
@@ -482,20 +483,20 @@ function getWeekDays(date) {
 }
 const weekDays = $derived(getWeekDays(selected));
 // ---- View mode buttons ----
-const viewModes = [
+const viewModes = $derived([
 	{
 		mode: CalendarViewMode.Day,
-		label: "Day"
+		label: i18n["scoria.label.day"]()
 	},
 	{
 		mode: CalendarViewMode.Week,
-		label: "Week"
+		label: i18n["scoria.label.week"]()
 	},
 	{
 		mode: CalendarViewMode.Month,
-		label: "Month"
+		label: i18n["scoria.label.month"]()
 	}
-];
+]);
 // ---- Centre-on-hour scrolling ----
 const centreRowHour = $derived(centreHour == null ? null : Math.floor(centreHour));
 let calendarBody = $state();
@@ -535,11 +536,11 @@ $effect(() => {
 	<div class="calendar-header">
 		<div class="header-left">
 			<Button
-				label="Today"
+				label={i18n['scoria.label.today']()}
 				size={Size.Small}
 				onclick={goToToday}
 			>
-				Today
+				{i18n['scoria.label.today']()}
 			</Button>
 			<div class="nav-arrows">
 				<button
@@ -547,7 +548,7 @@ $effect(() => {
 					onclick={() => {
 						navigateDate(-1);
 					}}
-					aria-label="Previous"
+					aria-label={i18n['scoria.action.previous']()}
 				>
 					<Icon
 						name="chevron-left"
@@ -560,7 +561,7 @@ $effect(() => {
 					onclick={() => {
 						navigateDate(1);
 					}}
-					aria-label="Next"
+					aria-label={i18n['scoria.action.next']()}
 				>
 					<Icon
 						name="chevron-right"
@@ -681,7 +682,7 @@ $effect(() => {
 
 {#snippet resourceGrid(day: Date)}
 	<div class="grid-header">
-		<div class="time-header">Time</div>
+		<div class="time-header">{i18n['scoria.label.time']()}</div>
 		{#each resources as resource (resource.id)}
 			<div class="resource-header">{resource.label}</div>
 		{/each}
@@ -836,7 +837,7 @@ $effect(() => {
   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;
 }
 .view-btn:not(:last-child) {
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
 }
 .view-btn.active {
   background-color: #259fc7;
@@ -877,7 +878,7 @@ $effect(() => {
   font-weight: 600;
   text-align: center;
   color: #3a4952;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   box-sizing: border-box;
 }
 
@@ -913,7 +914,7 @@ $effect(() => {
   left: 0;
   z-index: 6;
   background-color: #ffffff;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
 }
 
 .time-label {
@@ -921,7 +922,7 @@ $effect(() => {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-right: 0.5rem;
+  padding-inline-end: 0.5rem;
   box-sizing: border-box;
   font-size: 0.875rem;
   font-weight: 600;
@@ -942,7 +943,7 @@ $effect(() => {
   position: relative;
   display: flex;
   flex-flow: column nowrap;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
 }
 
 .slot-cell {
@@ -1015,13 +1016,13 @@ $effect(() => {
   gap: 0.2rem;
   padding: 0.5rem 0.25rem;
   border: none;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   background: #ffffff;
   cursor: pointer;
   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;
 }
 .week-day-tab:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 .week-day-tab:hover {
   background-color: #f4f7f9;
@@ -1075,10 +1076,10 @@ $effect(() => {
   font-size: 0.875rem;
   font-weight: 600;
   color: #3a4952;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
 }
 .month-day-header:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .month-grid {
@@ -1090,7 +1091,7 @@ $effect(() => {
 
 .month-day-cell {
   border: none;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   border-bottom: solid 1px #cbd4da;
   background: #ffffff;
   padding: 0.35rem;
@@ -1098,7 +1099,7 @@ $effect(() => {
   flex-flow: column nowrap;
   gap: 0.2rem;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   min-height: 4.5rem;
   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;
 }

package/dist/Components/SidebarPanel.svelte

@@ -70,7 +70,7 @@ export {};
   flex-flow: column nowrap;
   gap: 0.75rem;
   padding: 1.5rem;
-  border-right: solid 1px #dae0e5;
+  border-inline-end: solid 1px #dae0e5;
 }
 
 .main {