@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Touch/BoolCard.svelte

@@ -1,31 +1,20 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
 	import Icon from '../Icon.svelte';
+	import type { BoolCardProps } from './BoolCardProps.js';
 	import type { IconProps } from '../IconProps.js';
 
-	export interface BoolCardProps {
-		value?: boolean;
-		disabled?: boolean | undefined;
-		onclick?: (e: MouseEvent) => void;
-		children?: Snippet;
-		nowidth?: boolean;
-		size?: Size;
-	}
-</script>
-
-<script lang="ts">
 	let {
 		value = $bindable(false),
 		disabled,
 		onclick,
 		children,
 		nowidth,
-		size = Size.Medium
+		size = Size.Medium,
 	}: BoolCardProps = $props();
 
 	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
@@ -35,6 +24,7 @@
 	class:small={size == Size.Small}
 	onkeydown={passthrough}
 	disabled={disabled || undefined}
+	aria-pressed={value}
 	class:nowidth
 	type="button"
 	class="card"
@@ -42,7 +32,10 @@
 	{onclick}
 >
 	{#if children}
-		<span class="value" class:small={size == Size.Small}>{@render children()}</span>{/if}<Icon
+		<span
+			class="value"
+			class:small={size == Size.Small}>{@render children()}</span
+		>{/if}<Icon
 		name={iconName}
 		size={Size.DoubleXLarge}
 		colour={value ? Colour['$ui-white'] : undefined}

package/dist/Components/Touch/BoolCard.svelte.d.ts

@@ -1,13 +1,4 @@
-import { Size } from '../../Types/Internal/Size.js';
-import type { Snippet } from 'svelte';
-export interface BoolCardProps {
-    value?: boolean;
-    disabled?: boolean | undefined;
-    onclick?: (e: MouseEvent) => void;
-    children?: Snippet;
-    nowidth?: boolean;
-    size?: Size;
-}
+import type { BoolCardProps } from './BoolCardProps.js';
 declare const BoolCard: import("svelte").Component<BoolCardProps, {}, "value">;
 type BoolCard = ReturnType<typeof BoolCard>;
 export default BoolCard;

package/dist/Components/Touch/BoolCardProps.d.ts

@@ -0,0 +1,21 @@
+import type { Size } from '../../Types/Internal/Size.js';
+import type { Snippet } from 'svelte';
+/**
+ * Props for `BoolCard`, a touch-friendly toggle card that flips between
+ * checked and unchecked states. Pressing the card fires `onclick`; the
+ * caller is expected to update the bound `value`.
+ */
+export interface BoolCardProps {
+    /** Two-way bindable boolean state. Defaults to false. */
+    value?: boolean;
+    /** Disable click handling and visually mute the card. */
+    disabled?: boolean | undefined;
+    /** Click handler. Fires on touch/click. */
+    onclick?: (e: MouseEvent) => void;
+    /** Optional label snippet rendered alongside the tick icon. */
+    children?: Snippet;
+    /** Render without enforcing 100% width (defaults to filling the parent). */
+    nowidth?: boolean;
+    /** Visual size of the card. Defaults to Size.Medium. */
+    size?: Size;
+}

package/dist/Components/Touch/BoolCardProps.js

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

package/dist/Components/Touch/DateModal.svelte

@@ -8,28 +8,12 @@
 	import { ColourSet } from '../../scss/colours.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import { tick, type Snippet } from 'svelte';
+	import { tick } from 'svelte';
 	import Action from '../Action.svelte';
 	import DatePicker from '../DatePicker.svelte';
 	import TextInput from '../TextInput.svelte';
+	import type { DateModalProps } from './DateModalProps.js';
 	import TouchModal from './TouchModal.svelte';
-
-	export interface DateModalProps {
-		header: string;
-		value?: Date | null;
-		cancelEditing: () => void;
-		confirm: (value: Date, overrideValue?: Date) => void;
-		namedMonths?: boolean;
-		validate?: (value: Date | undefined) => boolean;
-		showScanner?: boolean;
-		scanValue?: string;
-		overrideScanValue?: string;
-		confirmScannedValue?: (value: string, overrideValue?: string) => void;
-		inclusive?: boolean;
-		explanation?: Snippet;
-		allowOverride?: boolean;
-		showTime?: boolean;
-	}
 </script>
 
 <script lang="ts">
@@ -50,7 +34,9 @@
 		showTime = false,
 	}: DateModalProps = $props();
 
-	let tempValue = $derived(value ?? new Date());
+	// Snapshot the incoming `value` into mutable working state. Reset via
+	// the effect below when the parent hands us a new `value` reference;
+	let tempValue: Date = $state(new Date());
 	let overrideValue = $state(new Date());
 	let isBeingEdited = $state(false);
 	let inputRef: HTMLInputElement | undefined = $state();
@@ -62,9 +48,12 @@
 	}
 
 	$effect(() => {
+		// Reset edit state and working value when the caller hands us a new
+		// `value` reference.
 		void value;
-
 		isBeingEdited = false;
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		tempValue = value ?? new Date();
 	});
 
 	$effect(() => {
@@ -85,12 +74,16 @@
 		e?.preventDefault();
 
 		if (isValid) {
+			// Confirm without mutating the bound state. If the caller asked for
+			// an inclusive (end-of-day) reading, hand back a fresh copy with
+			// 23:59:59 set rather than re-stamping `tempValue` in place.
+			let outValue = tempValue;
 			if (inclusive) {
-				tempValue.setHours(23, 59, 59);
-				console.log(tempValue);
+				outValue = new Date(tempValue.getTime());
+				outValue.setHours(23, 59, 59);
 			}
 
-			confirm(tempValue, allowOverride && isBeingEdited ? overrideValue : undefined);
+			confirm(outValue, allowOverride && isBeingEdited ? overrideValue : undefined);
 		}
 
 		scanValue = '';
@@ -125,8 +118,6 @@
 	}
 </script>
 
-<!-- mandatory -->
-
 <TouchModal
 	onclose={() => {
 		cancelEditing();
@@ -204,6 +195,7 @@
 			icon={{ name: 'edit' }}
 			size={Size.DoubleXLarge}
 			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
+			label={isBeingEdited ? 'Cancel override' : 'Override date'}
 			onclick={() => {
 				if (!allowOverride) {
 					return;

package/dist/Components/Touch/DateModal.svelte.d.ts

@@ -1,20 +1,4 @@
-import { type Snippet } from 'svelte';
-export interface DateModalProps {
-    header: string;
-    value?: Date | null;
-    cancelEditing: () => void;
-    confirm: (value: Date, overrideValue?: Date) => void;
-    namedMonths?: boolean;
-    validate?: (value: Date | undefined) => boolean;
-    showScanner?: boolean;
-    scanValue?: string;
-    overrideScanValue?: string;
-    confirmScannedValue?: (value: string, overrideValue?: string) => void;
-    inclusive?: boolean;
-    explanation?: Snippet;
-    allowOverride?: boolean;
-    showTime?: boolean;
-}
+import type { DateModalProps } from './DateModalProps.js';
 declare const DateModal: import("svelte").Component<DateModalProps, {
     resetIsBeingEdited: () => void;
 }, "scanValue" | "overrideScanValue">;

package/dist/Components/Touch/DateModalProps.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for `DateModal`, the touch-friendly date/time picker modal.
+ * Hosts a `DatePicker` inside `TouchModal` with optional barcode-scan
+ * inputs and an editable override branch for two-value entry.
+ */
+export interface DateModalProps {
+    /** Header text shown in the modal title bar. */
+    header: string;
+    /** Initial date or `null` for "today". Internally cloned to a working state. */
+    value?: Date | null;
+    /** Fires when the user cancels (close, Escape, Cancel). */
+    cancelEditing: () => void;
+    /** Fires on confirm. Receives the selected date plus an optional override. */
+    confirm: (value: Date, overrideValue?: Date) => void;
+    /** Render months as named (January, February, ...) rather than numeric. */
+    namedMonths?: boolean;
+    /** Optional validator that disables the confirm button when false. */
+    validate?: (value: Date | undefined) => boolean;
+    /** Render the scanner input row above the date picker. */
+    showScanner?: boolean;
+    /** Two-way bindable scanned barcode value. */
+    scanValue?: string;
+    /** Two-way bindable scanned override value (for the override branch). */
+    overrideScanValue?: string;
+    /** Fires when a barcode submission is confirmed (Enter pressed). */
+    confirmScannedValue?: (value: string, overrideValue?: string) => void;
+    /** Set the time to 23:59:59 on confirm so the date represents end-of-day. */
+    inclusive?: boolean;
+    /** Optional explanation snippet rendered above the inputs. */
+    explanation?: Snippet;
+    /** Expose the second "override" date branch behind an edit toggle. */
+    allowOverride?: boolean;
+    /** Render the time portion of the date picker. */
+    showTime?: boolean;
+}

package/dist/Components/Touch/DateModalProps.js

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

package/dist/Components/Touch/EditCard.svelte

@@ -13,7 +13,7 @@
 		disabled = false,
 		error = false,
 		onclick,
-		children
+		children,
 	}: EditCardProps = $props();
 </script>
 
@@ -24,6 +24,7 @@
 	class:error
 	class:noborder
 	{disabled}
+	aria-disabled={disabled}
 	{onclick}
 	onkeydown={passthrough}
 >
@@ -36,7 +37,10 @@
 				{/if}
 			</div>
 		{/if}
-		<div class="row" class:labelless={!label}>
+		<div
+			class="row"
+			class:labelless={!label}
+		>
 			{#if children}
 				<span class="value">{@render children()}</span>
 			{/if}
@@ -44,7 +48,10 @@
 	</div>
 	<div class="right">
 		{#if iconName}
-			<Icon name={iconName} size={desktop ? Size.Medium : Size.XLarge} />
+			<Icon
+				name={iconName}
+				size={desktop ? Size.Medium : Size.XLarge}
+			/>
 		{/if}
 	</div>
 </button>

package/dist/Components/Touch/EditCardProps.d.ts

@@ -1,12 +1,33 @@
 import type { Snippet } from 'svelte';
 import type { PartialIconProps } from '../PartialIconProps.js';
+/**
+ * Props for `EditCard`, a touch-friendly button-style card that
+ * surfaces a labelled value with an edit icon. Pressing the card fires
+ * `onclick`, conventionally to open a `TextModal`, `NumberModal`, or
+ * similar editor.
+ */
 export interface EditCardProps {
+    /** Render without the card border. */
     noborder?: boolean;
+    /**
+     * Render with the compact desktop layout (single-line, no minimum
+     * height, label floats over the border). The default (false) is the
+     * larger tablet layout.
+     */
     desktop?: boolean;
+    /** Label rendered above (or floating over, in desktop layout) the value. */
     label?: string;
+    /**
+     * Name of the trailing icon. Defaults to `'edit'`. Pass `null` to
+     * suppress the icon entirely.
+     */
     iconName?: PartialIconProps['name'] | null;
+    /** Disable click handling. */
     disabled?: boolean;
+    /** Render in the error visual state. */
     error?: boolean;
+    /** Click handler. Fires on touch/click. */
     onclick?: (e: MouseEvent) => void;
+    /** Optional value snippet. Rendered inside the card's value slot. */
     children?: Snippet;
 }

package/dist/Components/Touch/InfoCard.svelte

@@ -5,10 +5,14 @@
 	import Icon from '../Icon.svelte';
 	import type { InfoCardProps } from './InfoCardProps.js';
 
-	const { noborder, label, iconName, children }: InfoCardProps = $props(); //TODO type
+	const { noborder, label, iconName, children }: InfoCardProps = $props();
 </script>
 
-<div class="card" class:pad-vertical={!label} class:noborder>
+<div
+	class="card"
+	class:pad-vertical={!label}
+	class:noborder
+>
 	{#if label}
 		<span class="card-label">{label}</span>
 	{/if}
@@ -16,7 +20,10 @@
 	<span class="value">{@render children()}</span>
 	{#if iconName}
 		<div class="icon">
-			<Icon name={iconName} size={Size.Large} />
+			<Icon
+				name={iconName}
+				size={Size.Large}
+			/>
 		</div>
 	{/if}
 </div>
@@ -34,7 +41,7 @@
   box-sizing: border-box;
   background-color: #ffffff;
   align-items: stretch;
-  min-height: 68px;
+  min-height: 3.5rem;
   width: 100%;
   position: relative;
   padding-top: 0.25rem;
@@ -47,8 +54,8 @@
   border: none;
 }
 .card.pad-vertical {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 .card .card-label,
 .card .value {
@@ -69,5 +76,5 @@
   display: flex;
   align-items: center;
   position: absolute;
-  right: 1rem;
+  right: 0.75rem;
 }</style>

package/dist/Components/Touch/InfoCardProps.d.ts

@@ -1,8 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { PartialIconProps } from '../PartialIconProps.js';
+/**
+ * Props for `InfoCard`, a read-only labelled value card. Used for
+ * surfacing static information in touch flows; pair with `EditCard` when
+ * the same data is editable.
+ */
 export interface InfoCardProps {
+    /** Value snippet rendered as the card body. */
     children: Snippet;
+    /** Render without the surrounding card border. */
     noborder?: boolean;
+    /** Optional label rendered above the value. */
     label?: string;
+    /** Optional trailing icon name (sourced from `PartialIconProps`). */
     iconName?: PartialIconProps['name'];
 }

package/dist/Components/Touch/InfoTextCard.svelte

@@ -8,10 +8,17 @@
 	let { label, iconName, children }: InfoTextCardProps = $props();
 </script>
 
-<div class="card" class:pad-vertical={!label}>
+<div
+	class="card"
+	class:pad-vertical={!label}
+>
 	{#if iconName}
 		<div class="icon">
-			<Icon name={iconName} size={Size.Large} colour={Colour['$brand-primary']} />
+			<Icon
+				name={iconName}
+				size={Size.Large}
+				colour={Colour['$brand-primary']}
+			/>
 		</div>
 	{/if}
 

package/dist/Components/Touch/InfoTextCardProps.d.ts

@@ -1,7 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { PartialIconProps } from '../PartialIconProps.js';
+/**
+ * Props for `InfoTextCard`, a brand-primary informational card with an
+ * optional leading icon. Used for tips, callouts, and inline notices
+ * inside touch flows.
+ */
 export interface InfoTextCardProps {
+    /** Body snippet rendered as the card content. */
     children: Snippet;
+    /** Optional label. Reserved for future layouts. */
     label?: string;
+    /** Optional leading icon. Rendered at Size.Large in the brand-primary colour. */
     iconName?: PartialIconProps['name'];
 }

package/dist/Components/Touch/ModalExplanation.svelte

@@ -1,21 +1,18 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface ModalExplanationProps {
-		width?: string;
-		children: Snippet;
-		nowrap?: boolean;
-	}
-</script>
-
 <script lang="ts">
+	import type { ModalExplanationProps } from './ModalExplanationProps.js';
+
 	let { width, children, nowrap }: ModalExplanationProps = $props();
 </script>
 
-<!-- {width ? 0 : "1rem"} -->
-<p class:nowrap style="--width: {width}; --padding: 0;">{@render children()}</p>
+<p
+	class:nowrap
+	style:--width={width}
+	style:--padding="0"
+>
+	{@render children()}
+</p>
 
 <style>p {
   padding: var(--padding);

package/dist/Components/Touch/ModalExplanation.svelte.d.ts

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface ModalExplanationProps {
-    width?: string;
-    children: Snippet;
-    nowrap?: boolean;
-}
+import type { ModalExplanationProps } from './ModalExplanationProps.js';
 declare const ModalExplanation: import("svelte").Component<ModalExplanationProps, {}, "">;
 type ModalExplanation = ReturnType<typeof ModalExplanation>;
 export default ModalExplanation;

package/dist/Components/Touch/ModalExplanationProps.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for `ModalExplanation`, the small text-block primitive used
+ * inside Touch-family modals to render an explanatory paragraph above
+ * the body. The component is intentionally minimal: a `<p>` element
+ * with a configurable max width and an optional pre-line wrap mode.
+ */
+export interface ModalExplanationProps {
+    /**
+     * Optional CSS length string applied as the paragraph's width via a
+     * `--width` custom property. Pass any valid `<length>` (e.g. "20rem").
+     */
+    width?: string;
+    /** Paragraph content. */
+    children: Snippet;
+    /**
+     * When true, `white-space: pre-line` is applied so line breaks in the
+     * source string render verbatim. Use sparingly: tablet flows typically
+     * prefer reflow over hard wraps.
+     */
+    nowrap?: boolean;
+}

package/dist/Components/Touch/ModalExplanationProps.js

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