@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/InfoAlert.svelte

@@ -1,37 +1,37 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { InfoAlertProps } from './InfoAlertProps.js';
-
-	const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
-</script>
-
-<!--
-	Small, inline informational banner. Mirrors the structure of the
-	`.error-banner` block already used inside the Table Configuration
-	modal - leading icon + body text on a tinted background - but on a
-	neutral blue palette so it reads as "helper text" rather than "error".
-
-	The body is a snippet so callers can inline links or emphasis without
-	the component prescribing a content shape.
--->
-<div
-	class="info-alert"
-	role="status"
->
-	<div class="icon">
-		<Icon
-			name={iconName}
-			size={Size.Small}
-		/>
-	</div>
-	<div class="body">
-		{@render children()}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { InfoAlertProps } from './InfoAlertProps.js';
+
+	const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
+</script>
+
+<!--
+	Small, inline informational banner. Mirrors the structure of the
+	`.error-banner` block already used inside the Table Configuration
+	modal - leading icon + body text on a tinted background - but on a
+	neutral blue palette so it reads as "helper text" rather than "error".
+
+	The body is a snippet so callers can inline links or emphasis without
+	the component prescribing a content shape.
+-->
+<div
+	class="info-alert"
+	role="status"
+>
+	<div class="icon">
+		<Icon
+			name={iconName}
+			size={Size.Small}
+		/>
+	</div>
+	<div class="body">
+		{@render children()}
+	</div>
+</div>
+
 <style>.info-alert {
   display: flex;
   flex-flow: row nowrap;
@@ -62,4 +62,4 @@
   flex: 1 1 auto;
   min-width: 0;
   color: #647d8e;
-}</style>
+}</style>

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;
@@ -319,4 +319,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>