@lavalogic/scoria 0.40.8 → 0.40.10

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

@@ -1,3 +1,9 @@
+/**
+ * Warm, on-brand phrases printed inside the box's rear flap. One is chosen at
+ * random when the loader mounts and a fresh one is shown on each loop. Pass
+ * the `messages` prop to override this set.
+ */
+export declare const defaultLoaderMessages: string[];
 import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 declare const LoadingAnimation: import("svelte").Component<LoadingAnimationProps, {}, "">;
 type LoadingAnimation = ReturnType<typeof LoadingAnimation>;

package/dist/Components/LoadingAnimationProps.d.ts

@@ -1,16 +1,50 @@
 /**
- * Props for the {@link LoadingAnimation} cube indicator.
+ * Props for the {@link LoadingAnimation} box-eruption indicator.
+ *
+ * The loader is a 3D kraft box that unfolds, spells out a short word by
+ * throwing its letters out onto the floor in front of the box, erupts a burst
+ * of brand-blue confetti, then packs the letters away and folds shut — looping
+ * for as long as it is mounted.
  */
 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.
+     * The word the box spells out as it erupts — typically the user's first
+     * name, passed in by the calling service. Rendered in block capitals so the
+     * letters read cleanly as they tumble. When empty or whitespace, falls back
+     * to the product name (`FloWMS`).
+     */
+    name?: string;
+    /**
+     * Whether the textual caption beneath the box is shown. Defaults to `true`.
+     * Set to `false` when the parent already renders its own message (as
+     * {@link LoadingModal} and {@link LoadingOverlay} do).
      */
     showText?: boolean;
     /**
-     * Optional accessible label used for the `aria-label` of the
-     * status region. Defaults to `'Loading'`.
+     * Optional accessible label used for the `aria-label` of the status region.
+     * Defaults to `'Loading'`.
      */
     label?: string;
+    /**
+     * Caption text shown in the pill above the box when {@link showText} is
+     * `true`. An animated `...` is appended automatically (the pill keeps a fixed
+     * width as the dots cycle). Defaults to `'Loading'`.
+     */
+    caption?: string;
+    /**
+     * Warm phrases printed inside the box's rear flap. One is chosen at random
+     * and a new one is shown on each loop. Defaults to a built-in set
+     * ({@link defaultLoaderMessages}).
+     */
+    messages?: string[];
+    /**
+     * Front-face colour of the thrown letters. Defaults to a kraft-card tone.
+     * Accepts any `#rgb`/`#rrggbb` or `r,g,b` value.
+     */
+    letterFace?: string;
+    /**
+     * Deepest colour at the back of each letter's extrusion, blended toward the
+     * face to shade the corrugation. Defaults to a near-black brown.
+     */
+    letterDeep?: string;
 }

package/dist/Components/LoadingModal.svelte

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

package/dist/Components/LoadingModalProps.d.ts

@@ -10,8 +10,13 @@ export interface LoadingModalProps {
      */
     showModal: boolean;
     /**
-     * Optional message rendered above the cube. When omitted the
-     * cube displays its built-in `loadingText` label instead.
+     * Optional message rendered above the loader. When omitted the
+     * loader displays its built-in `Loading…` caption instead.
      */
     message?: string | undefined;
+    /**
+     * Optional first name forwarded to the loader, which spells it out as it
+     * erupts. When omitted the loader falls back to the product name.
+     */
+    name?: string | undefined;
 }

package/dist/Components/LoadingOverlay.svelte

@@ -4,7 +4,8 @@
 	import LoadingAnimation from './LoadingAnimation.svelte';
 	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
 
-	const { message, absolute, borderRadius }: LoadingOverlayProps = $props();
+	const { message, absolute, borderRadius, name }: LoadingOverlayProps =
+		$props();
 </script>
 
 <div
@@ -19,7 +20,10 @@
 	{#if message}
 		<p>{message}</p>
 	{/if}
-	<LoadingAnimation showText={!message} />
+	<LoadingAnimation
+		{name}
+		showText={!message}
+	/>
 </div>
 
 <style>.loading-overlay {

package/dist/Components/LoadingOverlayProps.d.ts

@@ -5,9 +5,14 @@ import type { CssLength } from '../Types/Internal/Misc.js';
 export interface LoadingOverlayProps {
     /**
      * Optional message rendered above the animation. When omitted the
-     * cube renders with its built-in `loadingText`.
+     * loader renders with its built-in `Loading…` caption.
      */
     message?: string | undefined;
+    /**
+     * Optional first name forwarded to the loader, which spells it out as it
+     * erupts. When omitted the loader falls back to the product name.
+     */
+    name?: 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.8",
+  "version": "0.40.10",
   "publishConfig": {
     "access": "restricted"
   },