@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/ProgressBubble.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { useAsyncFlag } from "../Helpers/AsyncFlag.svelte.js";
 import { getCanvasContext } from "../Helpers/Helpers.svelte.js";
 const { value, colours } = $props();
@@ -50,45 +50,45 @@ const awaitedColours = $derived(awaitedColoursFlag.value);
 // note) so interpolation into `style="..."` is safe.
 const wrapperStyle = $derived(awaitedColours ? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};` : "");
 const barStyle = $derived(`width: ${percent}%;`);
-</script>
-
-<div
-	class="progress-wrapper"
-	style={wrapperStyle}
->
-	<!--
-		Native `<progress>` is kept as a fallback for assistive tech that
-		ignores ARIA progressbar roles. Visually hidden rather than
-		`display: none` so the element stays in the accessibility tree.
-	-->
-	<progress
-		class="visually-hidden"
-		value={current}
-		max={total}>{progress}</progress
-	>
-
-	<div
-		class="progress-background"
-		role="progressbar"
-		aria-valuenow={current}
-		aria-valuemin={0}
-		aria-valuemax={total}
-		aria-valuetext={progress}
-	>
-		<div
-			class:fits={fitsInProgressBar}
-			class="progress-value"
-			bind:this={progressBarRef}
-			style={barStyle}
-		>
-			<span
-				class:fits={fitsInProgressBar}
-				class="progress-text">{progress}</span
-			>
-		</div>
-	</div>
-</div>
-
+</script>
+
+<div
+	class="progress-wrapper"
+	style={wrapperStyle}
+>
+	<!--
+		Native `<progress>` is kept as a fallback for assistive tech that
+		ignores ARIA progressbar roles. Visually hidden rather than
+		`display: none` so the element stays in the accessibility tree.
+	-->
+	<progress
+		class="visually-hidden"
+		value={current}
+		max={total}>{progress}</progress
+	>
+
+	<div
+		class="progress-background"
+		role="progressbar"
+		aria-valuenow={current}
+		aria-valuemin={0}
+		aria-valuemax={total}
+		aria-valuetext={progress}
+	>
+		<div
+			class:fits={fitsInProgressBar}
+			class="progress-value"
+			bind:this={progressBarRef}
+			style={barStyle}
+		>
+			<span
+				class:fits={fitsInProgressBar}
+				class="progress-text">{progress}</span
+			>
+		</div>
+	</div>
+</div>
+
 <style>.progress-wrapper {
   width: 100%;
   height: 100%;
@@ -157,4 +157,4 @@ const barStyle = $derived(`width: ${percent}%;`);
 }
 .progress-text.fits {
   color: var(--text-colour, #3a4952);
-}</style>
+}</style>

package/dist/Components/QuerySelect.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends object, VP extends ValueProp<V>"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
 >import { m as i18n } from "../paraglide/messages.js";
 import { ToastContext } from "../Contexts/ToastContext.svelte.js";
 import { dev } from "$app/environment";
@@ -186,102 +186,102 @@ function onChange(newValue) {
 // 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>
-
-<div
-	class="select-wrapper"
-	class:invalid={isInvalid}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
->
-	{#if label}
-		<label for={inputId}>
-			<span
-				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-			<span class="border"
-				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-		</label>
-	{/if}
-	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
-	<Svelecte
-		strictMode={false}
-		keepCreated
-		onFocus={(e: HTMLInputElement) => {
-			registerInputListeners(e);
-			forceShowDropdown(e);
-			onfocus?.(e);
-		}}
-		placeholder={placeholder ?? fallbackPlaceholder}
-		bind:this={ref}
-		{inputId}
-		{disabled}
-		valueField={valueProp}
-		labelField={labelProp}
-		virtualList={false}
-		searchable
-		searchProps={{ keepSelectionInList: true }}
-		lazyDropdown
-		{valueAsObject}
-		{options}
-		value={selectedValue as Array<unknown>}
-		{onChange}
-		selectOnTab
-		deselectMode={required && !clearable ? 'none' : 'toggle'}
-		keepSelectionInList
-		{name}
-		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
-		{append}
-	>
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-		{/snippet}
-	</Svelecte>
-
-	{#snippet append()}
-		<div class="icons">
-			{#if clearable && selectedValue}
-				<Action
-					{disabled}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					size={Size.Small}
-					onclick={(e: MouseEvent) => {
-						if (isExpanded) {
-							e.stopPropagation();
-						}
-
-						onChange(null);
-					}}
-					icon={{
-						name: 'close-menu-cross',
-						colour: Colour['$ui-blue-9'],
-					}}
-				/>
-			{/if}
-
-			<Action
-				{disabled}
-				noTabIndex
-				colourSet={ColourSet.Auxiliary}
-				size={Size.Small}
-				icon={{
-					name: isExpanded ? 'chevron-up' : 'chevron-down',
-					colour: Colour['$ui-blue-9'],
-				}}
-			/>
-		</div>
-	{/snippet}
-
-	{#snippet selection(selectedOptions: Array<V>)}
-		{#if selectedOptions.length == 0}
-			<span class="selection">{placeholder ?? fallbackPlaceholder}</span>
-		{:else}
-			<span class="selection">{selectedOptions[0][labelProp]}</span>
-		{/if}
-	{/snippet}
-</div>
-
+</script>
+
+<div
+	class="select-wrapper"
+	class:invalid={isInvalid}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+			<span class="border"
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+		</label>
+	{/if}
+	<!-- strict mode is used to stop svelecte from rejecting perfectly valid values -->
+	<Svelecte
+		strictMode={false}
+		keepCreated
+		onFocus={(e: HTMLInputElement) => {
+			registerInputListeners(e);
+			forceShowDropdown(e);
+			onfocus?.(e);
+		}}
+		placeholder={placeholder ?? fallbackPlaceholder}
+		bind:this={ref}
+		{inputId}
+		{disabled}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		searchable
+		searchProps={{ keepSelectionInList: true }}
+		lazyDropdown
+		{valueAsObject}
+		{options}
+		value={selectedValue as Array<unknown>}
+		{onChange}
+		selectOnTab
+		deselectMode={required && !clearable ? 'none' : 'toggle'}
+		keepSelectionInList
+		{name}
+		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
+		{append}
+	>
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+		{/snippet}
+	</Svelecte>
+
+	{#snippet append()}
+		<div class="icons">
+			{#if clearable && selectedValue}
+				<Action
+					{disabled}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					onclick={(e: MouseEvent) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						onChange(null);
+					}}
+					icon={{
+						name: 'close-menu-cross',
+						colour: Colour['$ui-blue-9'],
+					}}
+				/>
+			{/if}
+
+			<Action
+				{disabled}
+				noTabIndex
+				colourSet={ColourSet.Auxiliary}
+				size={Size.Small}
+				icon={{
+					name: isExpanded ? 'chevron-up' : 'chevron-down',
+					colour: Colour['$ui-blue-9'],
+				}}
+			/>
+		</div>
+	{/snippet}
+
+	{#snippet selection(selectedOptions: Array<V>)}
+		{#if selectedOptions.length == 0}
+			<span class="selection">{placeholder ?? fallbackPlaceholder}</span>
+		{:else}
+			<span class="selection">{selectedOptions[0][labelProp]}</span>
+		{/if}
+	{/snippet}
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -456,4 +456,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>