@lavalogic/scoria 0.37.45 → 0.37.47

package/dist/Components/Contexts/Toast.svelte

@@ -2,16 +2,19 @@
 
 <!--
 @component
-Single toast rendering. Renders a horizontally-sliding pill near the
-bottom-right of the viewport via `ToastContainer`. The severity of the
-underlying toast drives both the colouring and the live-region
+Single toast rendering. Renders a pill near the bottom-right of the
+viewport via `ToastContainer`, sliding in vertically. The severity of
+the underlying toast drives both the colouring and the live-region
 semantics:
 
 - `Validity.Invalid` -> `role="alert"`, `aria-live="assertive"`.
 - All other severities -> `role="status"`, `aria-live="polite"`.
 
-The slide transition honours `prefers-reduced-motion` through the
-shared `usePrefersReducedMotion` helper; when the user has opted in
+The slide transition animates the pill's height (the `y` axis) so the
+message keeps its final width for the whole animation — animating the
+`x` axis instead reflows the text from stacked-and-wrapped to a single
+line as the pill widens. It honours `prefers-reduced-motion` through
+the shared `usePrefersReducedMotion` helper; when the user has opted in
 the duration collapses to zero. The copy action is only shown when
 `navigator.clipboard` is present (HTTPS or `localhost`).
 -->
@@ -44,7 +47,7 @@ the duration collapses to zero. The copy action is only shown when
 	class:success={toast.result == Validity.Valid}
 	class:warning={toast.result == Validity.Warning}
 	class:error={toast.result == Validity.Invalid}
-	transition:slide={{ axis: 'x', duration: slideDuration }}
+	transition:slide={{ axis: 'y', duration: slideDuration }}
 >
 	<div>
 		<div class="noshrink">

package/dist/Components/Contexts/Toast.svelte.d.ts

@@ -1,15 +1,18 @@
 import type { ToastProps } from './ToastProps.js';
 /**
- * Single toast rendering. Renders a horizontally-sliding pill near the
- * bottom-right of the viewport via `ToastContainer`. The severity of the
- * underlying toast drives both the colouring and the live-region
+ * Single toast rendering. Renders a pill near the bottom-right of the
+ * viewport via `ToastContainer`, sliding in vertically. The severity of
+ * the underlying toast drives both the colouring and the live-region
  * semantics:
  *
  * - `Validity.Invalid` -> `role="alert"`, `aria-live="assertive"`.
  * - All other severities -> `role="status"`, `aria-live="polite"`.
  *
- * The slide transition honours `prefers-reduced-motion` through the
- * shared `usePrefersReducedMotion` helper; when the user has opted in
+ * The slide transition animates the pill's height (the `y` axis) so the
+ * message keeps its final width for the whole animation — animating the
+ * `x` axis instead reflows the text from stacked-and-wrapped to a single
+ * line as the pill widens. It honours `prefers-reduced-motion` through
+ * the shared `usePrefersReducedMotion` helper; when the user has opted in
  * the duration collapses to zero. The copy action is only shown when
  * `navigator.clipboard` is present (HTTPS or `localhost`).
  */

package/dist/Components/DateOnlyInputProps.d.ts

@@ -12,8 +12,12 @@ import type { PartialIconProps } from './PartialIconProps.js';
 export interface DateOnlyInputProps {
     /** Discriminator. Must be the literal `'date'`. */
     type: 'date';
-    /** Bindable date value. `''` represents "no date selected". */
-    value?: InputDate | '';
+    /**
+     * Bindable date value. `''` or `null` represent "no date selected"
+     * — both are accepted because consumers commonly back the binding
+     * with a nullable field; the component treats them alike.
+     */
+    value?: InputDate | '' | null;
     /** Label rendered above the input. */
     label?: string;
     /** Native `placeholder` attribute. */

package/dist/Components/DateTimeInputProps.d.ts

@@ -11,8 +11,12 @@ import type { PartialIconProps } from './PartialIconProps.js';
 export interface DateTimeInputProps {
     /** Discriminator. Must be the literal `'datetime-local'`. */
     type: 'datetime-local';
-    /** Bindable datetime value. `''` represents "no value selected". */
-    value?: InputDateWithTime | '';
+    /**
+     * Bindable datetime value. `''` or `null` represent "no value
+     * selected" — both are accepted because consumers commonly back the
+     * binding with a nullable field; the component treats them alike.
+     */
+    value?: InputDateWithTime | '' | null;
     /** Label rendered above the input. */
     label?: string;
     /** Native `placeholder` attribute. */

package/dist/Components/Nav/Nav.svelte

@@ -4,6 +4,7 @@
 	lang="ts"
 	generics="T"
 >
+	import { afterNavigate } from '$app/navigation';
 	import { Size } from '../../Types/Internal/Size.js';
 	import Icon from '../Icon.svelte';
 	import type { NavProps } from './NavProps.js';
@@ -31,6 +32,16 @@
 
 	let showServicesDialog = $state(false);
 	let showUserDialog = $state(false);
+
+	// Close both nav popovers after any navigation. Selecting an item in
+	// the Services menu is a navigation, so the menu must dismiss itself —
+	// without this it only closed when the consumer happened to remount
+	// `<Nav>` (e.g. on a main-area change), leaving it open when the user
+	// picked a sibling item within the same area.
+	afterNavigate(() => {
+		showServicesDialog = false;
+		showUserDialog = false;
+	});
 </script>
 
 <nav class="main-navigation">

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -792,6 +792,10 @@ div.input-wrapper-parent div.input-wrapper.right {
   flex-grow: 2;
   --input-padding-right: 2.6rem;
 }
+div.input-wrapper-parent > :global(.select-wrapper) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 
 [role=cell] {
   --input-width: 100%;

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -11,7 +11,7 @@
  * `minSize`, …) via the `commonProps(...)` helper. `id` is passed explicitly
  * at each call site so its narrowed literal type survives the object spread.
  */
-import { generateUUID, syntheticColumnId } from '../../Helpers/Helpers.svelte.js';
+import { formatDateTime, generateUUID, syntheticColumnId } from '../../Helpers/Helpers.svelte.js';
 import { CheckboxDef } from './Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
 import { DateInputDef } from './Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 import { NumberInputDef } from './Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
@@ -172,28 +172,17 @@ function normaliseOptionsLoader(options) {
  * tests can exercise individual factory methods without round-tripping
  * through a full `createTable(...)` call.
  */
-/** Format a Date or ISO-8601 date string in the browser locale. Used by
+/** Format a Date / ISO-8601 string / epoch number for display. Used by
  *  `col.display` when the column declares `filterValueType: 'Date'`, so
- *  raw backend timestamps render as localised date+time rather than the
- *  ISO payload. Returns null / empty input unchanged. */
+ *  raw backend timestamps render as a localised date+time rather than the
+ *  ISO payload. Delegates to the exported `formatDateTime` helper so table
+ *  cells and non-table date surfaces format identically. Anything that is
+ *  not a date-like value (the column was mis-declared) yields `''`. */
 function formatLocaleDate(value) {
-    if (value == null || value === '') {
-        return value;
+    if (value instanceof Date || typeof value === 'string' || typeof value === 'number') {
+        return formatDateTime(value);
     }
-    let d;
-    if (value instanceof Date) {
-        d = value;
-    }
-    else if (typeof value === 'string' || typeof value === 'number') {
-        const parsed = new Date(value);
-        if (!Number.isNaN(parsed.getTime())) {
-            d = parsed;
-        }
-    }
-    if (d == null) {
-        return value;
-    }
-    return d.toLocaleString();
+    return '';
 }
 export function createColumnFactory() {
     const factory = {
@@ -338,14 +327,9 @@ export function createColumnFactory() {
             const dateDisplayValue = opts.filterValueType === 'Date'
                 ? (row, index) => {
                     const v = rawValue(row, index);
-                    if (v instanceof Promise) {
-                        return v.then((resolved) => {
-                            const formatted = formatLocaleDate(resolved);
-                            return formatted == null ? null : String(formatted);
-                        });
-                    }
-                    const formatted = formatLocaleDate(v);
-                    return formatted == null ? null : String(formatted);
+                    return v instanceof Promise
+                        ? v.then((resolved) => formatLocaleDate(resolved))
+                        : formatLocaleDate(v);
                 }
                 : undefined;
             const def = new DisplayDef({

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

@@ -5,10 +5,10 @@
 	generics="T extends object, IdType extends Primitive"
 >
 	import Button from '../../Button.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
-	import TouchModal from '../../Touch/TouchModal.svelte';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
@@ -53,8 +53,8 @@
 	}
 </script>
 
-<TouchModal
-	header="Modify Columns"
+<DesktopModal
+	headerLabel="Modify Columns"
 	onclose={() => onclose?.()}
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
 >
@@ -107,7 +107,7 @@
 			>
 		</div>
 	</div>
-</TouchModal>
+</DesktopModal>
 
 <style>.flex {
   display: flex;

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

@@ -4,7 +4,8 @@
 	lang="ts"
 	module
 >
-	import TouchModal from '../../Touch/TouchModal.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
 	import FilterPanel from './FilterPanel.svelte';
 
 	export interface FilterPanelModalProps {
@@ -16,16 +17,16 @@
 	const { onclose }: FilterPanelModalProps = $props();
 </script>
 
-<TouchModal
-	width="800px"
-	header="Filter by"
+<DesktopModal
+	width={cssLength('800px')}
+	headerLabel="Filter by"
 	onclose={() => onclose?.()}
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
 >
 	<div class="flex">
 		<FilterPanel />
 	</div>
-</TouchModal>
+</DesktopModal>
 
 <style>.flex {
   display: flex;

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

@@ -133,6 +133,51 @@ export declare function SQLFriendlyWithLocalTime(date: InputDate | InputDateWith
  * timestamps consistently across scoria.
  */
 export declare const localTimeFormat: Intl.DateTimeFormat;
+/**
+ * Default locale used by {@link formatDate} / {@link formatDateTime}
+ * when a caller does not pass one explicitly. UK English — a 24-hour
+ * clock and `DD/MM/YYYY` day-first ordering.
+ */
+export declare const defaultDateLocale = "en-GB";
+/**
+ * Canonical date + time display formatter. Use this anywhere a
+ * timestamp is shown to a user — table cells, cards, modals, headers —
+ * so every surface formats identically.
+ *
+ * The optional `locale` (a BCP-47 tag such as `'en-GB'`, `'en-US'`,
+ * `'de-DE'`) selects the display conventions: it drives the
+ * day/month/year ordering and separators — `en-GB` → `19/05/2026,
+ * 14:30`, `en-US` → `05/19/2026, 14:30`. It defaults to
+ * {@link defaultDateLocale}. The clock is always 24-hour and the
+ * timezone is the runtime-resolved one regardless of locale.
+ *
+ * - `Date` values format directly.
+ * - `string` / `number` values are parsed via `new Date(...)`. An
+ *   unparseable string is returned unchanged (so a non-date value is
+ *   not silently blanked); an unparseable number yields `''`.
+ * - `null` / `undefined` / empty string yield `''`.
+ *
+ * For a time-only render use {@link localTimeFormat}; for a date with
+ * no time use {@link formatDate}; for the SQL-backend serialisation
+ * shapes use {@link SQLFriendly} / {@link SQLFriendlyWithLocalTime}.
+ */
+export declare function formatDateTime(value: Date | string | number | null | undefined, locale?: string): string;
+/**
+ * Canonical date-only display formatter. Use this for values that carry
+ * no meaningful time component — due dates, expiry dates, pod-line date
+ * attributes — so every surface formats identically. When the value
+ * also has a time the user needs to see, use {@link formatDateTime}.
+ *
+ * The optional `locale` works exactly as in {@link formatDateTime} — it
+ * selects the day/month/year ordering and separators and defaults to
+ * {@link defaultDateLocale}.
+ *
+ * Parsing and null-handling match {@link formatDateTime}: a `Date`
+ * formats directly; `string` / `number` are parsed via `new Date(...)`;
+ * an unparseable string is returned unchanged; `null` / `undefined` /
+ * empty string yield `''`.
+ */
+export declare function formatDate(value: Date | string | number | null | undefined, locale?: string): string;
 /**
  * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
  * other non-text focusable elements** that should yield focus when a

package/dist/Helpers/Helpers.svelte.js

@@ -245,6 +245,101 @@ export const localTimeFormat = new Intl.DateTimeFormat('en-GB', {
     second: '2-digit',
     timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 });
+/**
+ * Default locale used by {@link formatDate} / {@link formatDateTime}
+ * when a caller does not pass one explicitly. UK English — a 24-hour
+ * clock and `DD/MM/YYYY` day-first ordering.
+ */
+export const defaultDateLocale = 'en-GB';
+/**
+ * Per-locale caches of `Intl.DateTimeFormat` instances. Constructing a
+ * formatter is comparatively expensive, so the first call for a given
+ * locale builds it and every later call for that locale reuses it. The
+ * caches only ever grow and hold immutable formatters, so they are safe
+ * to share across SSR requests.
+ */
+const dateTimeFormatters = {};
+const dateFormatters = {};
+/** Build (and cache) a full date + time formatter for `locale`. */
+function dateTimeFormatterFor(locale) {
+    return (dateTimeFormatters[locale] ??= new Intl.DateTimeFormat(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        hourCycle: 'h23',
+        minute: '2-digit',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }));
+}
+/** Build (and cache) a date-only formatter for `locale`. */
+function dateFormatterFor(locale) {
+    return (dateFormatters[locale] ??= new Intl.DateTimeFormat(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }));
+}
+/**
+ * Canonical date + time display formatter. Use this anywhere a
+ * timestamp is shown to a user — table cells, cards, modals, headers —
+ * so every surface formats identically.
+ *
+ * The optional `locale` (a BCP-47 tag such as `'en-GB'`, `'en-US'`,
+ * `'de-DE'`) selects the display conventions: it drives the
+ * day/month/year ordering and separators — `en-GB` → `19/05/2026,
+ * 14:30`, `en-US` → `05/19/2026, 14:30`. It defaults to
+ * {@link defaultDateLocale}. The clock is always 24-hour and the
+ * timezone is the runtime-resolved one regardless of locale.
+ *
+ * - `Date` values format directly.
+ * - `string` / `number` values are parsed via `new Date(...)`. An
+ *   unparseable string is returned unchanged (so a non-date value is
+ *   not silently blanked); an unparseable number yields `''`.
+ * - `null` / `undefined` / empty string yield `''`.
+ *
+ * For a time-only render use {@link localTimeFormat}; for a date with
+ * no time use {@link formatDate}; for the SQL-backend serialisation
+ * shapes use {@link SQLFriendly} / {@link SQLFriendlyWithLocalTime}.
+ */
+export function formatDateTime(value, locale = defaultDateLocale) {
+    if (value == null || value === '') {
+        return '';
+    }
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return typeof value === 'string' ? value : '';
+    }
+    return dateTimeFormatterFor(locale).format(date);
+}
+/**
+ * Canonical date-only display formatter. Use this for values that carry
+ * no meaningful time component — due dates, expiry dates, pod-line date
+ * attributes — so every surface formats identically. When the value
+ * also has a time the user needs to see, use {@link formatDateTime}.
+ *
+ * The optional `locale` works exactly as in {@link formatDateTime} — it
+ * selects the day/month/year ordering and separators and defaults to
+ * {@link defaultDateLocale}.
+ *
+ * Parsing and null-handling match {@link formatDateTime}: a `Date`
+ * formats directly; `string` / `number` are parsed via `new Date(...)`;
+ * an unparseable string is returned unchanged; `null` / `undefined` /
+ * empty string yield `''`.
+ */
+export function formatDate(value, locale = defaultDateLocale) {
+    if (value == null || value === '') {
+        return '';
+    }
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return typeof value === 'string' ? value : '';
+    }
+    return dateFormatterFor(locale).format(date);
+}
 /**
  * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
  * other non-text focusable elements** that should yield focus when a

package/dist/index.d.ts

@@ -167,7 +167,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, cssLength, devCatch, ellipses, generateShortUUID, generateUUID, generateWeakId, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, scoriaStorageKey, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, cssLength, defaultDateLocale, devCatch, ellipses, formatDate, formatDateTime, generateShortUUID, generateUUID, generateWeakId, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, scoriaStorageKey, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
 export { type INamed } from './Helpers/INamed.js';
 export { type PrefersReducedMotionResult, usePrefersReducedMotion, } from './Helpers/prefersReducedMotion.svelte.js';
 export { readJSON, readVersionedJSON, writeJSON } from './Helpers/Storage.js';

package/dist/index.js

@@ -124,7 +124,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, cssLength, devCatch, ellipses, 
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, cssLength, defaultDateLocale, devCatch, ellipses, formatDate, formatDateTime, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 generateShortUUID, generateUUID, generateWeakId, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, scoriaStorageKey, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
 export {} from './Helpers/INamed.js';

package/dist/scss/_mixins.scss

@@ -1981,6 +1981,16 @@
 				--input-padding-right: 2.6rem;
 			}
 		}
+
+		// Select-type quick filters (MultiSelect / QuerySelect) render
+		// their `.select-wrapper` root directly as a flex child here.
+		// With no explicit grow it sizes to its content and leaves the
+		// cell's grey background showing alongside it; stretch it to
+		// fill the column the way the text / number filter inputs do.
+		> :global(.select-wrapper) {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
 	}
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.45",
+  "version": "0.37.47",
   "publishConfig": {
     "access": "restricted"
   },
@@ -22,11 +22,12 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
-    "./scss/*": {
-      "sass": "./dist/scss/_*.scss",
-      "style": "./dist/scss/_*.scss",
-      "default": "./dist/scss/_*.scss"
-    }
+    "./scss/colours": "./dist/scss/_colours.scss",
+    "./scss/sizing": "./dist/scss/_sizing.scss",
+    "./scss/mixins": "./dist/scss/_mixins.scss",
+    "./scss/basics": "./dist/scss/_basics.scss",
+    "./scss/motion": "./dist/scss/_motion.scss",
+    "./scss/transitions": "./dist/scss/_transitions.scss"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.57.1",