@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/LoadingAnimation.svelte

@@ -1,37 +1,34 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	export interface LoadingAnimationProps {
-		showText?: boolean;
-	}
-</script>
-
-<script lang="ts">
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-
-	let { showText = true }: LoadingAnimationProps = $props();
-</script>
-
-<div class="container">
-	<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: 100px;
-  height: 100px;
+  width: var(--loading-animation-size, 100px);
+  height: var(--loading-animation-size, 100px);
   position: relative;
   perspective: 1000px;
 }
@@ -40,11 +37,15 @@
   height: 100%;
   position: absolute;
   transform-style: preserve-3d;
-  animation: rotatecube 10s infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .container #cube {
+    animation: rotatecube 10s infinite;
+  }
 }
 .container #cube div {
-  width: 100px;
-  height: 100px;
+  width: var(--loading-animation-size, 100px);
+  height: var(--loading-animation-size, 100px);
   display: block;
   position: absolute;
   border: none;
@@ -58,7 +59,7 @@
   text-align: left;
   font-size: 1rem;
   font-weight: bold;
-  font-family: arial;
+  font-family: inherit;
   color: #ffffff;
 }
 
@@ -100,7 +101,6 @@
 }
 
 .top {
-  /*   background: rgba(255,0,255,.5); */
   outline: 1px solid black;
 }
 
@@ -131,4 +131,4 @@
 
 #cube .bottom {
   transform: rotateX(-90deg) translateZ(50px);
-}</style>
+}</style>

package/dist/Components/LoadingAnimation.svelte.d.ts

@@ -1,6 +1,4 @@
-export interface LoadingAnimationProps {
-    showText?: boolean;
-}
+import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 declare const LoadingAnimation: import("svelte").Component<LoadingAnimationProps, {}, "">;
 type LoadingAnimation = ReturnType<typeof LoadingAnimation>;
 export default LoadingAnimation;

package/dist/Components/LoadingAnimationProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Props for the {@link LoadingAnimation} cube indicator.
+ */
+export interface LoadingAnimationProps {
+    /**
+     * Whether the animated cube should display the loading text inside the
+     * front face. Defaults to `true`. Set to `false` when the parent already
+     * renders a textual message and the cube should be purely decorative.
+     */
+    showText?: boolean;
+    /**
+     * Optional accessible label used for the `aria-label` of the
+     * status region. Defaults to `'Loading'`.
+     */
+    label?: string;
+}

package/dist/Components/LoadingAnimationProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/LoadingModal.svelte

@@ -1,49 +1,47 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	export interface LoadingModalProps {
-		showModal: boolean;
-		message?: string | undefined;
-	}
-</script>
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-
-	let { showModal, message }: LoadingModalProps = $props();
-
-	let dialog: HTMLDialogElement | undefined;
-
-	$effect(() => {
-		if (dialog && showModal) {
-			dialog.showModal();
-		}
-	});
-
-	$effect(() => {
-		if (!showModal && dialog) {
-			dialog.close();
-		}
-	});
-
-	function uncloseable(
-		e: KeyboardEvent & { currentTarget: EventTarget & HTMLDialogElement }
-	): void {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-		}
-	}
-</script>
-
-<dialog bind:this={dialog} onkeydown={uncloseable}>
-	<div class="modal-root">
-		{#if message}
-			<p>{message}</p>
-		{/if}
-		<LoadingAnimation />
-	</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;
@@ -310,9 +308,9 @@ dialog .modal-root p {
   z-index: 99999;
   translate: -50% -80%;
   user-select: none;
-  text-shadow: 0px 0px 3px black;
-  background-color: rgba(100, 100, 100, 0.6);
+  text-shadow: 0px 0px 3px #000000;
+  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   padding: 1rem;
-  color: white;
-}</style>
+  color: #ffffff;
+}</style>

package/dist/Components/LoadingModal.svelte.d.ts

@@ -1,7 +1,4 @@
-export interface LoadingModalProps {
-    showModal: boolean;
-    message?: string | undefined;
-}
+import type { LoadingModalProps } from './LoadingModalProps.js';
 declare const LoadingModal: import("svelte").Component<LoadingModalProps, {}, "">;
 type LoadingModal = ReturnType<typeof LoadingModal>;
 export default LoadingModal;

package/dist/Components/LoadingModalProps.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the {@link LoadingModal} non-dismissible loading dialog.
+ */
+export interface LoadingModalProps {
+    /**
+     * Whether the modal should currently be shown. Bind from a flag the
+     * parent toggles when an async action begins/ends. The dialog cannot
+     * be closed by Escape or by clicking the backdrop; only flipping this
+     * prop to `false` will close it.
+     */
+    showModal: boolean;
+    /**
+     * Optional message rendered above the cube. When omitted the
+     * cube displays its built-in `loadingText` label instead.
+     */
+    message?: string | undefined;
+}

package/dist/Components/LoadingModalProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/LoadingOverlay.svelte

@@ -1,29 +1,27 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	export interface LoadingOverlayProps {
-		message?: string | undefined;
-		absolute?: boolean | undefined;
-		borderRadius?: string | undefined;
-	}
-</script>
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-	let { message, absolute, borderRadius }: LoadingOverlayProps = $props();
-</script>
-
-<div
-	class="loading-overlay"
-	class:absolute
-	style={borderRadius ? `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;
@@ -47,12 +45,12 @@
   z-index: 99999;
   translate: -50% -80%;
   user-select: none;
-  text-shadow: 0px 0px 3px black;
-  background-color: rgba(100, 100, 100, 0.6);
+  text-shadow: 0px 0px 3px #000000;
+  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 4px;
   padding: 1rem;
-  color: white;
+  color: #ffffff;
 }
 .loading-overlay.absolute {
   position: absolute;
-}</style>
+}</style>

package/dist/Components/LoadingOverlay.svelte.d.ts

@@ -1,8 +1,4 @@
-export interface LoadingOverlayProps {
-    message?: string | undefined;
-    absolute?: boolean | undefined;
-    borderRadius?: string | undefined;
-}
+import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
 declare const LoadingOverlay: import("svelte").Component<LoadingOverlayProps, {}, "">;
 type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
 export default LoadingOverlay;

package/dist/Components/LoadingOverlayProps.d.ts

@@ -0,0 +1,28 @@
+import type { CssLength } from '../Types/Internal/Misc.js';
+/**
+ * Props for the {@link LoadingOverlay} floating progress veil.
+ */
+export interface LoadingOverlayProps {
+    /**
+     * Optional message rendered above the animation. When omitted the
+     * cube renders with its built-in `loadingText`.
+     */
+    message?: string | undefined;
+    /**
+     * When `true` the overlay uses `position: absolute` and fills its
+     * nearest positioned ancestor instead of the viewport. Use this
+     * when overlaying a modal or panel rather than the whole page.
+     * Defaults to `false`.
+     */
+    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')}`.
+     */
+    borderRadius?: CssLength | undefined;
+}

package/dist/Components/LoadingOverlayProps.js

@@ -0,0 +1 @@
+export {};