@lavalogic/scoria 0.40.4 → 0.40.6

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { page } from '$app/state';
 	import { Colour } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import Icon from '../Icon.svelte';
@@ -9,6 +10,21 @@
 	import ServiceMenuItem from './ServiceMenuItem.svelte';
 
 	const { title, items, icon }: NavServiceMenuListProps = $props();
+
+	// Only the single most-specific item is active: the longest item path that
+	// the current URL matches. Without this a nested route (e.g.
+	// /reports/manage-reports) would also light up its parent item (/reports).
+	const activePath = $derived.by(() => {
+		const pathname = page.url.pathname;
+		let best: string | null = null;
+		for (const { item } of items) {
+			const path = item.path;
+			if (path && pathname.includes(path) && (best === null || path.length > best.length)) {
+				best = path;
+			}
+		}
+		return best;
+	});
 </script>
 
 <div
@@ -35,7 +51,10 @@
 		role="list"
 	>
 		{#each items as { item } (item.label)}
-			<ServiceMenuItem {item} />
+			<ServiceMenuItem
+				{item}
+				selected={item.path != null && item.path === activePath}
+			/>
 		{/each}
 	</div>
 </div>

package/dist/Components/OptionCards.svelte

@@ -0,0 +1,107 @@
+<svelte:options runes />
+
+<!--
+@component
+A single-select group of large, clickable cards — each an optional leading
+icon, a label, and optional helper text. Use it instead of a `SingleSelect`
+when the choices benefit from a sentence of explanation (e.g. picking a
+report's delivery method or output format).
+
+Controlled: pass `selected` and update it in `onchange`. Accessible as a
+native radio group (the radio inputs are visually hidden but focusable).
+-->
+<script
+	lang="ts"
+	generics="T"
+>
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { OptionCardsProps } from './OptionCardsProps.js';
+	import Icon from './Icon.svelte';
+
+	let { name, options, selected, onchange }: OptionCardsProps<T> = $props();
+</script>
+
+<div
+	class="option-cards"
+	role="radiogroup"
+>
+	{#each options as option (option.value)}
+		{@const isSelected = selected === option.value}
+		<label
+			class="card"
+			class:selected={isSelected}
+		>
+			<input
+				class="native"
+				type="radio"
+				{name}
+				checked={isSelected}
+				onchange={() => void onchange?.(option.value)}
+			/>
+			{#if option.icon}
+				<Icon
+					name={option.icon}
+					size={Size.Large}
+					colour={isSelected ? Colour['$brand-primary'] : Colour['$ui-blue-14']}
+				/>
+			{/if}
+			<span class="title">{option.label}</span>
+			{#if option.info}
+				<span class="info">{option.info}</span>
+			{/if}
+		</label>
+	{/each}
+</div>
+
+<style>.option-cards {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.75rem;
+}
+
+.card {
+  flex: 1 1 0;
+  min-width: 9rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.25rem;
+  padding: 0.85rem 1rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #647d8e;
+  cursor: pointer;
+}
+
+/* Visually hidden but keyboard-focusable (drives :focus-within). */
+.native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.title {
+  color: #3a4952;
+  font-weight: 600;
+}
+
+.info {
+  font-size: 0.8rem;
+}
+
+.card.selected {
+  border-color: #259fc7;
+  background-color: #f4fbfd;
+  color: #259fc7;
+}
+.card.selected .title {
+  color: #259fc7;
+}
+
+.card:focus-within {
+  outline: solid 2px #259fc7;
+  outline-offset: 2px;
+}</style>

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

@@ -0,0 +1,34 @@
+import type { OptionCardsProps } from './OptionCardsProps.js';
+declare function $$render<T>(): {
+    props: OptionCardsProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A single-select group of large, clickable cards — each an optional leading
+ * icon, a label, and optional helper text. Use it instead of a `SingleSelect`
+ * when the choices benefit from a sentence of explanation (e.g. picking a
+ * report's delivery method or output format).
+ *
+ * Controlled: pass `selected` and update it in `onchange`. Accessible as a
+ * native radio group (the radio inputs are visually hidden but focusable).
+ */
+declare const OptionCards: $$IsomorphicComponent;
+type OptionCards<T> = InstanceType<typeof OptionCards<T>>;
+export default OptionCards;

package/dist/Components/OptionCardsProps.d.ts

@@ -0,0 +1,19 @@
+import type { OptionCard } from '../Types/Internal/OptionCard.js';
+/**
+ * Props for {@link OptionCards} — a single-select group of large, clickable
+ * cards (icon + label + helper), used when a choice benefits from more
+ * explanation than a plain `SingleSelect` (e.g. a delivery/format chooser).
+ *
+ * Controlled component: pass `selected` and update it from `onchange`.
+ * `T` is compared with `===`; use a primitive or a stable reference.
+ */
+export interface OptionCardsProps<T> {
+    /** `name` attribute shared by the underlying radio inputs. */
+    name?: string;
+    /** The option set rendered as cards. */
+    options: ReadonlyArray<OptionCard<T>>;
+    /** Currently-selected value. */
+    selected?: T;
+    /** Called when a card is chosen. May be `void` or `Promise<void>`. */
+    onchange?: (value: T) => void | Promise<void>;
+}

package/dist/Components/OptionCardsProps.js

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

package/dist/Types/Internal/OptionCard.d.ts

@@ -0,0 +1,17 @@
+import type { icons } from '../../Components/Icons.js';
+/**
+ * A single option in an {@link OptionCards} picker — a selectable card with
+ * an optional leading icon, a label, and optional helper text. The generic
+ * carries the concrete value type so the surrounding component stays
+ * type-safe in its `onchange` callback.
+ */
+export interface OptionCard<T> {
+    /** The option's value when selected (compared with `===`). */
+    value: T;
+    /** Visible card title. */
+    label: string;
+    /** Optional helper text under the title. */
+    info?: string;
+    /** Optional leading icon, looked up in the frozen icon registry. */
+    icon?: keyof typeof icons;
+}

package/dist/Types/Internal/OptionCard.js

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

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { default as Pagination } from './Components/Base/Pagination.svelte';
 export { type PaginationProps } from './Components/Base/PaginationProps.js';
 export { default as BigRadioSet } from './Components/BigRadioSet.svelte';
 export type { BigRadioSetProps } from './Components/BigRadioSetProps.js';
+export { default as OptionCards } from './Components/OptionCards.svelte';
+export type { OptionCardsProps } from './Components/OptionCardsProps.js';
 export { default as Bubble } from './Components/Bubble.svelte';
 export { type BubbleColour } from './Components/BubbleColour.js';
 export { type BubbleProps } from './Components/BubbleProps.js';
@@ -187,6 +189,7 @@ export { type UseTooltipHandlers, type UseTooltipOptions, useTooltip, } from './
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';
+export { type OptionCard } from './Types/Internal/OptionCard.js';
 export { type ButtonProp } from './Types/Internal/ButtonProp.js';
 export { type CallbackButton } from './Types/Internal/CallbackButton.js';
 export { type DateChange } from './Types/Internal/DateChange.js';

package/dist/index.js

@@ -7,6 +7,7 @@ export {} from './Components/Base/ContextWrapperProps.js';
 export { default as Pagination } from './Components/Base/Pagination.svelte';
 export {} from './Components/Base/PaginationProps.js';
 export { default as BigRadioSet } from './Components/BigRadioSet.svelte';
+export { default as OptionCards } from './Components/OptionCards.svelte';
 export { default as Bubble } from './Components/Bubble.svelte';
 export {} from './Components/BubbleColour.js';
 export {} from './Components/BubbleProps.js';
@@ -146,6 +147,7 @@ export { useTooltip, } from './Helpers/useTooltip.svelte.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
 export {} from './Types/Internal/BigRadioOption.js';
+export {} from './Types/Internal/OptionCard.js';
 export {} from './Types/Internal/ButtonProp.js';
 export {} from './Types/Internal/CallbackButton.js';
 export {} from './Types/Internal/DateChange.js';

package/package.json

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