@lavalogic/scoria 0.40.11 → 0.40.12

package/dist/Components/LoadingAnimation.svelte

@@ -99,6 +99,7 @@
 </script>
 
 <script lang="ts">
+	import { loaderDefaults } from '../Helpers/loaderDefaults.svelte.js';
 	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 
 	const {
@@ -114,7 +115,12 @@
 	// The word the box spells: the caller's first name, or the product name as a
 	// friendly fallback. Block capitals tumble cleanly and dodge lowercase
 	// descenders clipping the baseline on landing.
-	const word = $derived((name.trim() || 'FloWMS').toUpperCase());
+	// Explicit `name` prop wins; otherwise fall back to the app-wide default
+	// (set by the host so internally-rendered loaders also show the user), then
+	// finally the product name.
+	const word = $derived(
+		(name.trim() || loaderDefaults.name.trim() || 'FloWMS').toUpperCase()
+	);
 
 	// Caption text with any trailing dots/ellipsis stripped, since the pill
 	// appends its own animated "..." — avoids "moment……" style doubling.
@@ -1107,21 +1113,30 @@
   top: 0;
 }
 .flowms-loader {
-  /* Caption pill: sits above the box and on top of every other layer. */
+  /* Caption pill: sits above the box and on top of every other layer. Its
+     bottom edge is anchored just above the opened flaps, so longer messages
+     wrap and grow UPWARD into the headroom rather than down over the box. */
 }
 .flowms-loader .caption {
   position: absolute;
   left: 50%;
-  top: 10px; /* sits in the headroom above the opened flaps */
+  bottom: calc(100% - 50px);
   transform: translateX(-50%);
-  white-space: nowrap;
+  /* `width: max-content` opts out of the half-container shrink that
+     `left: 50%` would otherwise impose, so the pill sizes to its text up
+     to the max-width (then wraps). */
+  width: max-content;
+  max-width: min(380px, 90vw);
+  white-space: normal;
+  text-align: center;
+  text-wrap: balance;
   padding: 7px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.82);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
   color: #44515a;
   letter-spacing: 0.2px;
 }

package/dist/Components/LoadingModal.svelte

@@ -35,13 +35,9 @@
 	aria-live="polite"
 >
 	<div class="modal-root">
-		{#if message}
-			<p>{message}</p>
-		{/if}
 		<LoadingAnimation
 			{name}
-			{caption}
-			showText={!message}
+			caption={message ?? caption}
 		/>
 	</div>
 </dialog>
@@ -310,17 +306,4 @@ dialog .modal-root {
   align-items: center;
   background: rgba(0, 0, 0, 0);
   position: relative;
-}
-dialog .modal-root p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 99999;
-  translate: -50% -80%;
-  user-select: none;
-  text-shadow: 0px 0px 3px #000000;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  padding: 1rem;
-  color: #ffffff;
 }</style>

package/dist/Components/LoadingOverlay.svelte

@@ -17,13 +17,9 @@
 		? `border-radius: ${borderRadius};`
 		: undefined}
 >
-	{#if message}
-		<p>{message}</p>
-	{/if}
 	<LoadingAnimation
 		{name}
-		{caption}
-		showText={!message}
+		caption={message ?? caption}
 	/>
 </div>
 
@@ -43,19 +39,6 @@
   flex-flow: column;
   gap: 2rem;
 }
-.loading-overlay p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 99999;
-  translate: -50% -80%;
-  user-select: none;
-  text-shadow: 0px 0px 3px #000000;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  padding: 1rem;
-  color: #ffffff;
-}
 .loading-overlay.absolute {
   position: absolute;
 }</style>

package/dist/Helpers/loaderDefaults.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Global fallback configuration for all loaders.
+ *
+ * Loaders rendered *internally* by components like {@link Table},
+ * {@link DesktopModal} and {@link AppointmentCalendar} can't be handed a `name`
+ * prop at the call site. So the host app sets {@link loaderDefaults.name} once —
+ * typically in its root layout inside a browser `$effect` — and every loader
+ * (including those internal ones) spells that name. An explicit `name` prop on a
+ * specific loader still takes precedence.
+ *
+ * Only assign this on the client (inside an `$effect` / `onMount`). Assigning it
+ * during SSR would share one request's value with concurrent requests.
+ */
+export declare const loaderDefaults: {
+    name: string;
+};

package/dist/Helpers/loaderDefaults.svelte.js

@@ -0,0 +1,14 @@
+/**
+ * Global fallback configuration for all loaders.
+ *
+ * Loaders rendered *internally* by components like {@link Table},
+ * {@link DesktopModal} and {@link AppointmentCalendar} can't be handed a `name`
+ * prop at the call site. So the host app sets {@link loaderDefaults.name} once —
+ * typically in its root layout inside a browser `$effect` — and every loader
+ * (including those internal ones) spells that name. An explicit `name` prop on a
+ * specific loader still takes precedence.
+ *
+ * Only assign this on the client (inside an `$effect` / `onMount`). Assigning it
+ * during SSR would share one request's value with concurrent requests.
+ */
+export const loaderDefaults = $state({ name: '' });

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export type { InfoAlertProps } from './Components/InfoAlertProps.js';
 export type { InputProps } from './Components/InputProps.js';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export type { LoadingAnimationProps } from './Components/LoadingAnimationProps.js';
+export { loaderDefaults } from './Helpers/loaderDefaults.svelte.js';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export type { LoadingModalProps } from './Components/LoadingModalProps.js';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';

package/dist/index.js

@@ -40,6 +40,7 @@ export {} from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
 export { default as InfoAlert } from './Components/InfoAlert.svelte';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
+export { loaderDefaults } from './Helpers/loaderDefaults.svelte.js';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';
 export { default as Modal } from './Components/Modal.svelte';

package/package.json

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