@lavalogic/scoria 0.37.44 → 0.37.45

package/dist/Components/LoadingAnimation.svelte

@@ -1,31 +1,31 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
-
-	const { showText = true, label = 'Loading' }: LoadingAnimationProps = $props();
-</script>
-
-<div
-	class="container"
-	role="status"
-	aria-live="polite"
-	aria-label={label}
->
-	<div id="cube">
-		<div class="front"></div>
-		<div class="front">
-			{#if showText}<span>{loadingText}</span>{/if}
-		</div>
-		<div class="back"></div>
-		<div class="right"></div>
-		<div class="left"></div>
-		<div class="top"></div>
-		<div class="bottom"></div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
+
+	const { showText = true, label = 'Loading' }: LoadingAnimationProps = $props();
+</script>
+
+<div
+	class="container"
+	role="status"
+	aria-live="polite"
+	aria-label={label}
+>
+	<div id="cube">
+		<div class="front"></div>
+		<div class="front">
+			{#if showText}<span>{loadingText}</span>{/if}
+		</div>
+		<div class="back"></div>
+		<div class="right"></div>
+		<div class="left"></div>
+		<div class="top"></div>
+		<div class="bottom"></div>
+	</div>
+</div>
+
 <style>.container {
   width: var(--loading-animation-size, 100px);
   height: var(--loading-animation-size, 100px);
@@ -131,4 +131,4 @@
 
 #cube .bottom {
   transform: rotateX(-90deg) translateZ(50px);
-}</style>
+}</style>

package/dist/Components/LoadingModal.svelte

@@ -1,47 +1,47 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-	import type { LoadingModalProps } from './LoadingModalProps.js';
-
-	const { showModal, message }: LoadingModalProps = $props();
-
-	let dialog: HTMLDialogElement | undefined = $state();
-
-	$effect(() => {
-		if (!dialog) {
-			return;
-		}
-		if (showModal && !dialog.open) {
-			dialog.showModal();
-		} else if (!showModal && dialog.open) {
-			dialog.close();
-		}
-	});
-
-	function uncloseable(
-		e: KeyboardEvent & { currentTarget: EventTarget & HTMLDialogElement }
-	): void {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-		}
-	}
-</script>
-
-<dialog
-	bind:this={dialog}
-	onkeydown={uncloseable}
-	aria-label={message ?? 'Loading'}
-	aria-live="polite"
->
-	<div class="modal-root">
-		{#if message}
-			<p>{message}</p>
-		{/if}
-		<LoadingAnimation showText={!message} />
-	</div>
-</dialog>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import LoadingAnimation from './LoadingAnimation.svelte';
+	import type { LoadingModalProps } from './LoadingModalProps.js';
+
+	const { showModal, message }: LoadingModalProps = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (!dialog) {
+			return;
+		}
+		if (showModal && !dialog.open) {
+			dialog.showModal();
+		} else if (!showModal && dialog.open) {
+			dialog.close();
+		}
+	});
+
+	function uncloseable(
+		e: KeyboardEvent & { currentTarget: EventTarget & HTMLDialogElement }
+	): void {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onkeydown={uncloseable}
+	aria-label={message ?? 'Loading'}
+	aria-live="polite"
+>
+	<div class="modal-root">
+		{#if message}
+			<p>{message}</p>
+		{/if}
+		<LoadingAnimation showText={!message} />
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -313,4 +313,4 @@ dialog .modal-root p {
   border-radius: 4px;
   padding: 1rem;
   color: #ffffff;
-}</style>
+}</style>

package/dist/Components/LoadingOverlay.svelte

@@ -1,27 +1,27 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
-
-	const { message, absolute, borderRadius }: LoadingOverlayProps = $props();
-</script>
-
-<div
-	class="loading-overlay"
-	class:absolute
-	role="status"
-	aria-live="polite"
-	style={borderRadius != null && borderRadius.length > 0
-		? `border-radius: ${borderRadius};`
-		: undefined}
->
-	{#if message}
-		<p>{message}</p>
-	{/if}
-	<LoadingAnimation showText={!message} />
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import LoadingAnimation from './LoadingAnimation.svelte';
+	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
+
+	const { message, absolute, borderRadius }: LoadingOverlayProps = $props();
+</script>
+
+<div
+	class="loading-overlay"
+	class:absolute
+	role="status"
+	aria-live="polite"
+	style={borderRadius != null && borderRadius.length > 0
+		? `border-radius: ${borderRadius};`
+		: undefined}
+>
+	{#if message}
+		<p>{message}</p>
+	{/if}
+	<LoadingAnimation showText={!message} />
+</div>
+
 <style>.loading-overlay {
   display: flex;
   position: fixed;
@@ -53,4 +53,4 @@
 }
 .loading-overlay.absolute {
   position: absolute;
-}</style>
+}</style>

package/dist/Components/LoadingOverlayProps.d.ts

@@ -16,13 +16,9 @@ export interface LoadingOverlayProps {
      */
     absolute?: boolean | undefined;
     /**
-     * Branded CSS length for the overlay backdrop's border-radius
-     * (e.g. `cssLength('4px')`). Use when overlaying a rounded
-     * container so the veil follows the container shape.
-     *
-     * BREAKING (vNext): was `string`; now requires the `CssLength`
-     * brand. Migrate `borderRadius="4px"` to
-     * `borderRadius={cssLength('4px')}`.
+     * Branded CSS length for the overlay backdrop's border-radius (e.g.
+     * `cssLength('4px')`). Use when overlaying a rounded container so the
+     * veil follows the container shape.
      */
     borderRadius?: CssLength | undefined;
 }