@lavalogic/scoria 0.40.10 → 0.40.11

package/dist/Components/LoadingAnimation.svelte

@@ -116,6 +116,10 @@
 	// descenders clipping the baseline on landing.
 	const word = $derived((name.trim() || 'FloWMS').toUpperCase());
 
+	// Caption text with any trailing dots/ellipsis stripped, since the pill
+	// appends its own animated "..." — avoids "moment……" style doubling.
+	const captionText = $derived(caption.replace(/[\s.…]+$/, ''));
+
 	// Per-letter render data: each letter is a stack of DEPTH layers (painted
 	// back-to-front) topped by the lit face, so it has genuine 3D thickness.
 	const geom = $derived.by(() => {
@@ -764,7 +768,7 @@
 	     whose opacity cycles, so the pill width stays fixed as they animate. -->
 	{#if showText}
 		<div class="caption">
-			<span class="caption-label">{caption}</span><span
+			<span class="caption-label">{captionText}</span><span
 				class="caption-dots"
 				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
 			>
@@ -786,17 +790,20 @@
   --kraft-inner: #8a6b43;
   --seam: rgba(0, 0, 0, 0.14);
   --ink: #3c4045;
-  /* brand-blue confetti */
-  --fill-1: #259fc7;
-  --fill-2: #1b87b0;
-  --fill-3: #5cc4e6;
-  --fill-4: #0f6e93;
-  --fill-5: #86d6ef;
+  /* subtle white confetti — shades of white/off-white */
+  --fill-1: #ffffff;
+  --fill-2: #eef1f4;
+  --fill-3: #f8fafb;
+  --fill-4: #e2e7ec;
+  --fill-5: #fbfcfd;
   --hw: calc(var(--w) / 2);
   --hd: calc(var(--d) / 2);
   --hh: calc(var(--h) / 2);
   --y-outer: calc(var(--hh) * -1 + 0.5px);
   --y-inner: calc(var(--hh) * -1 + 1.5px);
+  /* Push the box (and its letters) down within the footprint so the caption
+     pill has clear headroom above the opened flaps. */
+  --stage-shift: 40px;
   display: grid;
   place-items: center;
   position: relative;
@@ -806,6 +813,7 @@
 .flowms-loader .scene {
   width: var(--w);
   height: var(--h);
+  translate: 0 var(--stage-shift);
   perspective: 820px;
   perspective-origin: 50% 40%;
   transform-style: preserve-3d;
@@ -1021,7 +1029,7 @@
   margin-top: -48px;
   border-radius: 50%;
   opacity: 0;
-  background: radial-gradient(circle, rgba(127, 212, 236, 0.6666666667) 0%, rgba(37, 159, 199, 0.3333333333) 35%, rgba(37, 159, 199, 0) 70%);
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0) 70%);
 }
 .flowms-loader .fill {
   position: absolute;
@@ -1033,6 +1041,8 @@
   margin-top: -6.5px;
   border-radius: 3px;
   opacity: 0;
+  /* faint edge so the white pieces stay visible on light backgrounds */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 .flowms-loader .fill:nth-child(5n+1) {
   background: var(--fill-1);
@@ -1064,7 +1074,7 @@
 .flowms-loader .letterstage {
   position: absolute;
   left: 50%;
-  top: 50%;
+  top: calc(50% + var(--stage-shift)); /* track the shifted box */
   width: var(--w);
   height: var(--h);
   transform: translate(-50%, -50%);
@@ -1102,7 +1112,7 @@
 .flowms-loader .caption {
   position: absolute;
   left: 50%;
-  top: 22px; /* above the box, clear of the eruption */
+  top: 10px; /* sits in the headroom above the opened flaps */
   transform: translateX(-50%);
   white-space: nowrap;
   padding: 7px 16px;

package/dist/Components/LoadingModal.svelte

@@ -4,7 +4,7 @@
 	import LoadingAnimation from './LoadingAnimation.svelte';
 	import type { LoadingModalProps } from './LoadingModalProps.js';
 
-	const { showModal, message, name }: LoadingModalProps = $props();
+	const { showModal, message, name, caption }: LoadingModalProps = $props();
 
 	let dialog: HTMLDialogElement | undefined = $state();
 
@@ -40,6 +40,7 @@
 		{/if}
 		<LoadingAnimation
 			{name}
+			{caption}
 			showText={!message}
 		/>
 	</div>

package/dist/Components/LoadingModalProps.d.ts

@@ -19,4 +19,11 @@ export interface LoadingModalProps {
      * erupts. When omitted the loader falls back to the product name.
      */
     name?: string | undefined;
+    /**
+     * Optional caption shown in the pill above the box (an animated `...` is
+     * appended automatically). Use this instead of {@link message} to keep the
+     * loader's own pill rather than rendering a separate message bar. Ignored
+     * when {@link message} is set. Defaults to `'Loading'`.
+     */
+    caption?: string | undefined;
 }

package/dist/Components/LoadingOverlay.svelte

@@ -4,7 +4,7 @@
 	import LoadingAnimation from './LoadingAnimation.svelte';
 	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
 
-	const { message, absolute, borderRadius, name }: LoadingOverlayProps =
+	const { message, absolute, borderRadius, name, caption }: LoadingOverlayProps =
 		$props();
 </script>
 
@@ -22,6 +22,7 @@
 	{/if}
 	<LoadingAnimation
 		{name}
+		{caption}
 		showText={!message}
 	/>
 </div>

package/dist/Components/LoadingOverlayProps.d.ts

@@ -13,6 +13,13 @@ export interface LoadingOverlayProps {
      * erupts. When omitted the loader falls back to the product name.
      */
     name?: string | undefined;
+    /**
+     * Optional caption shown in the pill above the box (an animated `...` is
+     * appended automatically). Use this instead of {@link message} to keep the
+     * loader's own pill rather than rendering a separate message bar. Ignored
+     * when {@link message} is set. Defaults to `'Loading'`.
+     */
+    caption?: string | undefined;
     /**
      * When `true` the overlay uses `position: absolute` and fills its
      * nearest positioned ancestor instead of the viewport. Use this

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.10",
+  "version": "0.40.11",
   "publishConfig": {
     "access": "restricted"
   },