@lavalogic/scoria 0.38.8 → 0.38.9

package/dist/Components/InfoAlert.svelte

@@ -0,0 +1,65 @@
+<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;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #f4f7f9;
+  color: #3a4952;
+  font-size: 1.125rem;
+  line-height: 1.4;
+}
+
+/* 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;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: #647d8e;
+}</style>

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

@@ -0,0 +1,4 @@
+import type { InfoAlertProps } from './InfoAlertProps.js';
+declare const InfoAlert: import("svelte").Component<InfoAlertProps, {}, "">;
+type InfoAlert = ReturnType<typeof InfoAlert>;
+export default InfoAlert;

package/dist/Components/InfoAlertProps.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { icons } from './Icons.js';
+/**
+ * Props for `InfoAlert` - the small, inline informational banner used
+ * for non-blocking helper text and empty-state messages (e.g. "you
+ * have not saved any layouts yet…", "no filters match the search…").
+ *
+ * Visually it mirrors the existing `.error-banner` pattern used inside
+ * scoria's modals - an icon plus a single line / paragraph of body
+ * text on a tinted background - but with neutral / informational
+ * colours rather than error-red. It is deliberately a thin shell: any
+ * inline links or `<strong>` accents go inside the default snippet.
+ */
+export interface InfoAlertProps {
+    /** Body of the alert, rendered to the right of the leading icon. */
+    children: Snippet;
+    /**
+     * Optional icon name override. Defaults to `circle-information`,
+     * the standard neutral-info glyph; pass another name from the
+     * frozen `icons` registry to fit a more specific empty-state visual
+     * (e.g. `circle-exclamation` for a gentle warning).
+     */
+    iconName?: keyof typeof icons;
+}

package/dist/Components/InfoAlertProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -17,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-
 	/**
 	 * Position of this column inside the sorted column list. Drives the
 	 * disabled state of the "move up" / "move down" buttons and supplies
@@ -507,6 +506,14 @@ li.single-column:not(.anchor):last-of-type {
   display: flex;
   flex-shrink: 0;
 }
+.visibility-wrapper :global(div.inner-checkbox-container) {
+  border-width: 1px;
+  border-color: #cbd4da;
+}
+.visibility-wrapper :global(.outer-checkbox-container:hover div.inner-checkbox-container:not(.disabled)) {
+  border-width: 1px;
+  border-color: #adbbc5;
+}
 
 .pin-selector {
   --input-height: 2.25rem;
@@ -519,6 +526,12 @@ li.single-column:not(.anchor):last-of-type {
 .pin-selector.disabled {
   opacity: 0.5;
 }
+.pin-selector :global(.radios > label) {
+  padding: 0;
+}
+.pin-selector :global(.radios > label:first-child) {
+  border-left: none;
+}
 
 .column-label {
   width: 100%;

package/dist/Components/Table/Misc/ShareViewModal.svelte

@@ -7,6 +7,7 @@
 	import Button from '../../Button.svelte';
 	import DesktopModal from '../../DesktopModal.svelte';
 	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
 	import MultiSelect from '../../MultiSelect.svelte';
 	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../../../scss/colours.js';
@@ -226,7 +227,7 @@
 
 		<div class="picker">
 			{#if loadingUsers && allUsers === null}
-				<p class="muted">Loading users…</p>
+				<InfoAlert>Loading users…</InfoAlert>
 			{:else if allUsers !== null}
 				<MultiSelect
 					label="Users"
@@ -244,11 +245,11 @@
 		</div>
 
 		{#if selected.length === 0}
-			<p class="muted">
+			<InfoAlert>
 				No users selected. Use the picker above to share this {view.kind === 'filter'
 					? 'filter'
 					: 'layout'} with one or more users.
-			</p>
+			</InfoAlert>
 		{:else}
 			<ul class="user-card-list">
 				{#each selected as user (user.id)}

package/dist/Components/Table/Misc/TableConfigurationModal.svelte

@@ -8,6 +8,7 @@
 	import DesktopModal from '../../DesktopModal.svelte';
 	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
 	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
 	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
@@ -336,12 +337,12 @@
 
 		{#if args.tab === 'mine'}
 			{#if loadingViews}
-				<p class="muted">Loading saved {sectionNounPlural.toLowerCase()}…</p>
+				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
 			{:else if myViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
 					tab to create one.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each myViews as view (view.id)}
@@ -421,9 +422,9 @@
 
 			{#if publicViews !== null}
 				{#if publicViews.length === 0}
-					<p class="muted">
+					<InfoAlert>
 						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
-					</p>
+					</InfoAlert>
 				{:else}
 					<ul class="card-list">
 						{#each publicViews as view (view.id)}
@@ -449,9 +450,9 @@
 			{/if}
 
 			{#if sharedViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					No {sectionNounPlural.toLowerCase()} are currently shared with you.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each sharedViews as view (view.id)}
@@ -484,10 +485,10 @@
 			{/if}
 		{:else}
 			<div class="save-tab">
-				<p class="muted">
+				<InfoAlert>
 					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
 					{sectionNoun.toLowerCase()}.
-				</p>
+				</InfoAlert>
 				<TextInput
 					placeholder={`${sectionNoun} name`}
 					bind:value={newViewName}

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export type { HorizontalTabGroupProps } from './Components/HorizontalTabGroupPro
 export { default as Icon } from './Components/Icon.svelte';
 export { type IconProps } from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
+export { default as InfoAlert } from './Components/InfoAlert.svelte';
+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';

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as HorizontalTabGroup } from './Components/HorizontalTabGroup.s
 export { default as Icon } from './Components/Icon.svelte';
 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 { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';

package/package.json

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