@lavalogic/scoria 0.40.6 → 0.40.8

package/dist/Components/Icons.d.ts

@@ -355,6 +355,10 @@ export declare const icons: {
         readonly box: 24;
         readonly svg: "<path fill-rule=\"evenodd\" d=\"M15.6 3.7a1 1 0 0 0-1.5 0l-9.7 9.7a2 2 0 0 0 0 2.9L8 19.8V21h13v-1H10.2L20.3 9.9c.4-.4.4-1 0-1.4l-4.7-4.8ZM5.8 14.8l2.2-2 3.3 3.2-2.1 2.2-3.4-3.4Zm3.6-3.5 3.3 3.3 5.5-5.4-3.4-3.4-5.4 5.5Z\" clip-rule=\"evenodd\"/>";
     };
+    readonly email: {
+        readonly box: 24;
+        readonly svg: "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20 5C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17L2 7C2 5.89543 2.89543 5 4 5H20ZM13.043 13.8623C12.4027 14.2536 11.5973 14.2536 10.957 13.8623L9.47949 12.96L4.47656 16.8506C4.62898 16.9446 4.80779 17 5 17H19C19.1919 17 19.3702 16.9443 19.5225 16.8506L14.5195 12.96L13.043 13.8623ZM4 15.2217L8.03906 12.0791L4 8.61035V15.2217ZM15.96 12.0791L20 15.2217V8.61035L15.96 12.0791ZM5 7C4.89813 7 4.79963 7.01466 4.70703 7.04297L11.4785 12.1816C11.7986 12.3772 12.2014 12.3772 12.5215 12.1816L19.292 7.04297C19.1996 7.01483 19.1015 7 19 7H5Z\" />";
+    };
     readonly error: {
         readonly box: 12;
         readonly svg: "<path d=\"M6,1.2A4.8,4.8,0,1,1,1.2,6,4.8,4.8,0,0,1,6,1.2Zm0-1A5.76,5.76,0,1,0,11.76,6,5.76,5.76,0,0,0,6,.24ZM5.52,3.06h1V6.9h-1ZM6,9a.6.6,0,1,1,.6-.6A.6.6,0,0,1,6,9Z\"/>";

package/dist/Components/Icons.js

@@ -468,6 +468,10 @@ export const icons = {
         box: 24,
         svg: `<path fill-rule="evenodd" d="M15.6 3.7a1 1 0 0 0-1.5 0l-9.7 9.7a2 2 0 0 0 0 2.9L8 19.8V21h13v-1H10.2L20.3 9.9c.4-.4.4-1 0-1.4l-4.7-4.8ZM5.8 14.8l2.2-2 3.3 3.2-2.1 2.2-3.4-3.4Zm3.6-3.5 3.3 3.3 5.5-5.4-3.4-3.4-5.4 5.5Z" clip-rule="evenodd"/>`,
     },
+    email: {
+        box: 24,
+        svg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17L2 7C2 5.89543 2.89543 5 4 5H20ZM13.043 13.8623C12.4027 14.2536 11.5973 14.2536 10.957 13.8623L9.47949 12.96L4.47656 16.8506C4.62898 16.9446 4.80779 17 5 17H19C19.1919 17 19.3702 16.9443 19.5225 16.8506L14.5195 12.96L13.043 13.8623ZM4 15.2217L8.03906 12.0791L4 8.61035V15.2217ZM15.96 12.0791L20 15.2217V8.61035L15.96 12.0791ZM5 7C4.89813 7 4.79963 7.01466 4.70703 7.04297L11.4785 12.1816C11.7986 12.3772 12.2014 12.3772 12.5215 12.1816L19.292 7.04297C19.1996 7.01483 19.1015 7 19 7H5Z" />`,
+    },
     error: {
         box,
         svg: `<path d="M6,1.2A4.8,4.8,0,1,1,1.2,6,4.8,4.8,0,0,1,6,1.2Zm0-1A5.76,5.76,0,1,0,11.76,6,5.76,5.76,0,0,0,6,.24ZM5.52,3.06h1V6.9h-1ZM6,9a.6.6,0,1,1,.6-.6A.6.6,0,0,1,6,9Z"/>`,

package/dist/Components/InfoAlert.svelte

@@ -5,61 +5,78 @@
 	import Icon from './Icon.svelte';
 	import type { InfoAlertProps } from './InfoAlertProps.js';
 
-	const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
+	const { children, header, 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.
+	Small, inline informational banner on the Info (brand-blue) palette so it
+	reads as "helper text" rather than "error". An optional bold `header`
+	sits above the body; the body is a snippet so callers can inline links or
+	emphasis without the component prescribing a content shape.
 -->
 <div
 	class="info-alert"
+	class:has-header={header}
 	role="status"
 >
 	<div class="icon">
 		<Icon
 			name={iconName}
-			size={Size.Small}
+			size={Size.Medium}
 		/>
 	</div>
-	<div class="body">
-		{@render children()}
+	<div class="content">
+		{#if header}
+			<p class="header">{header}</p>
+		{/if}
+		<div class="body">
+			{@render children()}
+		</div>
 	</div>
 </div>
 
 <style>.info-alert {
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
-  border: solid 1px #cbd4da;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.75rem 0.875rem;
+  border: solid 1px #8ad1e8;
   border-radius: 4px;
-  background-color: #f4f7f9;
+  background-color: #f4fbfd;
   color: #3a4952;
-  font-size: 1.125rem;
-  line-height: 1.4;
+  /* With a header the content is multi-line, so the icon should align to
+     the first line (the header) rather than vertically centre the block. */
+}
+.info-alert.has-header {
+  align-items: flex-start;
 }
 
-/* Nudge the icon down a hair so it sits visually centred against
-   the first line of body text rather than aligned to the very top
-   of the first character ascent. */
 .icon {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding-top: 0.0625rem;
-  color: #647d8e;
-  --colour: #647d8e;
+  color: #259fc7;
+  --colour: #259fc7;
 }
 
-.body {
+.content {
   flex: 1 1 auto;
   min-width: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.125rem;
+}
+
+.header {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #3a4952;
+}
+
+.body {
+  font-size: 0.8125rem;
+  line-height: 1.4;
   color: #647d8e;
 }</style>

package/dist/Components/InfoAlertProps.d.ts

@@ -14,6 +14,11 @@ import type { icons } from './Icons.js';
 export interface InfoAlertProps {
     /** Body of the alert, rendered to the right of the leading icon. */
     children: Snippet;
+    /**
+     * Optional bold heading shown above the body. When set, the leading icon
+     * aligns to this first line rather than vertically centring the block.
+     */
+    header?: string;
     /**
      * Optional icon name override. Defaults to `circle-information`,
      * the standard neutral-info glyph; pass another name from the

package/dist/Components/LoadingAnimation.svelte

@@ -48,7 +48,8 @@
   height: var(--loading-animation-size, 100px);
   display: block;
   position: absolute;
-  border: none;
+  box-sizing: border-box;
+  border: 1px solid rgba(120, 110, 95, 0.45);
   line-height: 20px;
 }
 .container #cube div span {
@@ -82,31 +83,26 @@
 }
 .front {
   background: rgba(216, 208, 199, 0.5);
-  outline: 1px solid black;
 }
 
 .back {
   background: rgba(216, 208, 199, 0.5);
-  outline: 1px solid black;
 }
 
 .right {
   background: rgba(216, 208, 199, 0.35);
-  outline: 1px solid black;
 }
 
 .left {
   background: rgba(216, 208, 199, 0.35);
-  outline: 1px solid black;
 }
 
 .top {
-  outline: 1px solid black;
+  background: rgba(216, 208, 199, 0.25);
 }
 
 .bottom {
   background: rgba(216, 208, 199, 0.75);
-  outline: 1px solid black;
 }
 
 #cube .front {

package/package.json

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