@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Touch/SummaryCard.svelte

@@ -1,10 +1,19 @@
 <svelte:options runes />
 
-<script lang="ts">
+<script
+	module
+	lang="ts"
+>
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import Icon from '../Icon.svelte';
 	import type { SummaryCardProps } from './SummaryCardProps.js';
+
+	// CSS handles the dot-leader rendering via a flex pseudo element. We no
+	// longer interpolate a 108-character literal of dots into the markup.
+</script>
+
+<script lang="ts">
 	const {
 		bubbles,
 		desktop = false,
@@ -13,19 +22,23 @@
 		keyValues,
 		editable = false,
 		error = false,
-		onclick
+		onclick,
 	}: SummaryCardProps = $props();
 </script>
 
 {#snippet _heading()}
 	{#if desktop}
-		<span class="desktop-heading" class:invalid={error}>{heading}</span>
-		<span class="desktop-heading-border" class:invalid={error}>{heading}</span>
+		<span
+			class="desktop-heading"
+			class:invalid={error}>{heading}</span
+		>
+		<span
+			class="desktop-heading-border"
+			class:invalid={error}>{heading}</span
+		>
 	{:else}
 		{#if bubbles}
-			<!-- these are just plain strings -->
-			<!-- eslint-disable-next-line svelte/require-each-key -->
-			{#each bubbles as bubble}
+			{#each bubbles as bubble (bubble)}
 				<div class="card-detail">{bubble}</div>
 			{/each}
 		{/if}
@@ -33,30 +46,45 @@
 		<div class="card-row heading">
 			<h3>{heading}</h3>
 			{#if editable}
-				<Icon name="edit" size={Size.DoubleXLarge} />
+				<Icon
+					name="edit"
+					size={Size.DoubleXLarge}
+				/>
 			{/if}
 		</div>
 	{/if}
 {/snippet}
 
-<button class:desktop onkeydown={passthrough} {onclick} class="summary-card" class:error>
+<button
+	class:desktop
+	onkeydown={passthrough}
+	{onclick}
+	class="summary-card"
+	class:error
+	aria-label={onclick ? heading : undefined}
+	type="button"
+>
 	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
 	{@render _heading()}
 	<div class="columns">
 		<div class="left">
 			{#each keyValues as { key, value } (key)}
 				<div class="card-row detail">
-					<span>{key}</span>
-					<span class="ellipsis"
-						>............................................................................................................</span
-					>
+					<span class="key">{key}</span>
+					<span
+						class="leader"
+						aria-hidden="true"
+					></span>
 					<span class="value">{value}</span>
 				</div>
 			{/each}
 		</div>
 		{#if icon}
 			<div class="right">
-				<Icon name={icon} size={Size.Medium} />
+				<Icon
+					name={icon}
+					size={Size.Medium}
+				/>
 			</div>
 		{/if}
 	</div>
@@ -328,4 +356,18 @@ button.summary-card h3 {
 }
 .card-detail.optional:not(.entered) {
   background-color: #f9e9e9;
+}
+
+.card-row.detail {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+.card-row.detail .leader {
+  flex-grow: 1;
+  align-self: stretch;
+  border-bottom: 1px dotted #647d8e;
+  margin: 0 0.375rem;
+  transform: translateY(-0.25em);
 }</style>

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

@@ -1,12 +1,25 @@
-import type { KeyValuePair } from '../../index.js';
 import type { IconProps } from '../IconProps.js';
+import type { KeyValuePair } from './KeyValuePair.js';
+/**
+ * Props for `SummaryCard`, a touch-friendly card surfacing a heading,
+ * an optional row of bubble labels, and a tabular list of key/value
+ * details. Use for compact read-only summaries (e.g. picks, orders).
+ */
 export interface SummaryCardProps {
-    bubbles?: Array<string>;
+    /** Optional badge-style labels rendered above the heading. */
+    bubbles?: ReadonlyArray<string>;
+    /** Render with the compact desktop layout. */
     desktop?: boolean;
+    /** Optional trailing icon name. */
     icon?: IconProps['name'];
+    /** Card heading. */
     heading: string;
-    keyValues: Array<KeyValuePair>;
+    /** Key/value pairs rendered as the card detail rows. */
+    keyValues: ReadonlyArray<KeyValuePair>;
+    /** Render the edit icon next to the heading. */
     editable?: boolean;
+    /** Render the card in the error visual state. */
     error?: boolean;
+    /** Click handler. When provided, the entire card is activatable. */
     onclick?: (e: MouseEvent) => void;
 }

package/dist/Components/Touch/TextAreaModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
 	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
@@ -19,13 +20,11 @@
 		confirm,
 		uppercase = false,
 		textAreaRef = $bindable(),
-		explanation
+		isValid: _isValid = true,
+		explanation,
 	}: TextAreaModalProps = $props();
 
-	let tempValue = $state('');
-
 	onMount(() => {
-		tempValue = value;
 		tick()
 			.then(() => {
 				textAreaRef?.select();
@@ -34,10 +33,15 @@
 	});
 
 	async function resetValue() {
-		tempValue = '';
+		value = '';
 		await tick();
 		textAreaRef?.select();
 	}
+
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
 </script>
 
 <TouchModal
@@ -50,7 +54,7 @@
 	minWidth="600px"
 	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
-		confirm(tempValue);
+		confirm(value);
 	}}
 	{explanation}
 >
@@ -58,20 +62,25 @@
 		{uppercase}
 		labelTop={label}
 		{placeholder}
-		bind:value={tempValue}
+		bind:value
 		variant={InputVariant.Modal}
 		bind:textAreaRef
+		invalid={!isValid.value}
 		rightIcon={{
 			name: 'cross',
 			size: Size.Large,
-			colour: Colour['$font-primary']
+			colour: Colour['$font-primary'],
 		}}
 		onRightIconClick={resetValue}
 	/>
 
 	{#snippet footer()}
 		<div class="modal-footer">
-			<button onkeydown={passthrough} type="submit">Confirm</button>
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
 			<button
 				onkeydown={passthrough}
 				type="button"

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

@@ -1,12 +1,33 @@
+import type { AsyncFlag } from '../../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
+/**
+ * Props for `TextAreaModal`, the touch-friendly modal that hosts a
+ * `TextArea` for free-form multi-line entry. Internally wraps `TouchModal`.
+ */
 export interface TextAreaModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
+    /** Bindable string value. Defaults to the empty string. */
     value?: string;
+    /** Label rendered above the text area. */
     label?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string;
+    /** Fires when the user cancels editing (close, Escape, Cancel button). */
     cancelEditing: () => void;
+    /** Fires when the user confirms. Receives the current text value. */
     confirm: (value: string) => void;
+    /** Render the input in uppercase. Forwards to `TextArea`. */
     uppercase?: boolean;
+    /** Two-way bindable reference to the underlying textarea element. */
     textAreaRef?: HTMLTextAreaElement;
+    /**
+     * Validation flag. Accepts either a bare {@link AsyncFlag} of a boolean,
+     * or a validator function that receives the current text value and
+     * returns an {@link AsyncFlag} of a boolean. The modal's confirm button
+     * is disabled when this resolves to false.
+     */
+    isValid?: AsyncFlag<boolean> | ((value: string) => AsyncFlag<boolean>);
+    /** Optional explanation snippet rendered above the textarea. */
     explanation?: Snippet;
 }

package/dist/Components/Touch/TextModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
 	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
@@ -26,11 +27,9 @@
 		minWidth,
 		staticWidth,
 		minHeight,
-		height
+		height,
 	}: TextModalProps = $props();
 
-	// let tempValue = '';
-
 	onMount(() => {
 		tick()
 			.then(() => {
@@ -40,36 +39,17 @@
 	});
 
 	async function resetValue() {
-		//TODO discuss wether we want to empty the value or reset to snapshot
-		// tempValue = '';
+		// Cleared back to empty: callers wanting reset-to-original semantics
+		// should re-pass the original value via the bound prop.
 		value = '';
 		await tick();
 		inputRef?.select();
 	}
 
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (!_isValid) {
-			isValid = false;
-		} else {
-			if (typeof _isValid == 'function') {
-				const result = _isValid(value);
-
-				if (typeof result == 'boolean') {
-					isValid = result;
-				} else {
-					result
-						.then((it) => {
-							isValid = it;
-						})
-						.catch(devCatch);
-				}
-			} else {
-				isValid = _isValid;
-			}
-		}
-	});
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
 </script>
 
 <TouchModal
@@ -89,7 +69,6 @@
 	}}
 	{explanation}
 >
-	<!-- bind:value={tempValue} -->
 	<TextInput
 		{uppercase}
 		labelTop={label}
@@ -98,17 +77,21 @@
 		bind:inputRef
 		bind:value
 		showErrorColours
-		invalid={!isValid}
+		invalid={!isValid.value}
 		rightIcon={{
 			name: 'cross',
 			size: Size.Large,
-			colour: Colour['$font-primary']
+			colour: Colour['$font-primary'],
 		}}
 		onRightIconClick={resetValue}
 	/>
 	{#snippet footer()}
 		<div class="modal-footer">
-			<button onkeydown={passthrough} type="submit" disabled={!isValid}>Confirm</button>
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
 			<button
 				onkeydown={passthrough}
 				type="button"

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

@@ -1,19 +1,46 @@
+import type { AsyncFlag } from '../../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
+/**
+ * Props for `TextModal`, the touch-friendly modal that hosts a `TextInput`
+ * with confirm/cancel actions. Internally wraps `TouchModal`.
+ */
 export interface TextModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
+    /** Fires when the user cancels editing (close, Escape, Cancel button). */
     cancelEditing: () => void;
+    /** Fires when the user confirms. Receives the current text value. */
     confirm: (value: string) => void;
+    /** CSS length string for the dialog's width (e.g. "600px"). */
     width?: string;
+    /** CSS length string for the dialog's minimum width. */
     minWidth?: string;
+    /** Fix the dialog to its minimum width regardless of content. */
     staticWidth?: boolean;
+    /** CSS length string for the dialog's minimum height. */
     minHeight?: string;
+    /** CSS length string for the dialog's height. */
     height?: string;
+    /** Bindable string value. Defaults to the empty string. */
     value?: string;
+    /** Label rendered above the input. */
     label?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string;
+    /** Render the input in uppercase. Forwards to `TextInput`. */
     uppercase?: boolean;
+    /** Two-way bindable reference to the underlying input element. */
     inputRef?: HTMLInputElement | undefined;
-    isValid?: boolean | ((value: string) => boolean | Promise<boolean>);
+    /**
+     * Validation flag. Accepts either a bare {@link AsyncFlag} of a boolean,
+     * or a validator function that receives the current text value and
+     * returns an {@link AsyncFlag} of a boolean. The modal's confirm button
+     * is disabled and the input rendered with error styling when this
+     * resolves to false.
+     */
+    isValid?: AsyncFlag<boolean> | ((value: string) => AsyncFlag<boolean>);
+    /** If true, the modal cannot be dismissed via Escape or backdrop click. */
     mandatory?: boolean;
+    /** Optional explanation snippet rendered above the input. */
     explanation?: Snippet;
 }

package/dist/Components/Touch/TouchCard.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
 	import { Colour } from '../../scss/colours.js';
 	import Action from '../Action.svelte';
@@ -5,7 +7,10 @@
 	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
 </script>
 
-<div class="card" class:highlighted>
+<div
+	class="card"
+	class:highlighted
+>
 	<div class="float-right">
 		{#if additionalButtons}
 			{@render additionalButtons()}
@@ -13,7 +18,7 @@
 		<Action
 			icon={{
 				name: 'star-banner',
-				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4']
+				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4'],
 			}}
 			backgroundColour={Colour['$transparent-0']}
 			label="Highlight Card"
@@ -25,50 +30,7 @@
 	{@render children()}
 </div>
 
-<style>button.card {
-  color: #3a4952;
-  fill: #3a4952;
-  padding: var(--padding-size, 0.76rem);
-  border-radius: var(--border-radius, 0);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  border: solid 1px #cbd4da;
-  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
-  box-sizing: border-box;
-  background-color: #ffffff;
-  align-items: stretch;
-  cursor: pointer;
-}
-button.card:disabled {
-  background-color: var(--background-colour, #e9ecf1);
-  color: #8096a5;
-  --colour: #8096a5;
-  cursor: default;
-}
-button.card:not([disabled]):hover {
-  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
-  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
-}
-button.card:not([disabled]):focus, button.card:not([disabled]):focus-visible {
-  outline: solid 1px #1f81a0;
-}
-button.card:not([disabled]).ticked, button.card:not([disabled]).primary {
-  color: #ffffff;
-  background-color: var(--background-colour, #259fc7);
-  border-color: var(--border-colour, #259fc7);
-}
-button.card:not([disabled]).ticked:focus, button.card:not([disabled]).ticked:focus-visible, button.card:not([disabled]).primary:focus, button.card:not([disabled]).primary:focus-visible {
-  outline-color: #259fc7;
-}
-button.card:not([disabled]).ticked:hover, button.card:not([disabled]).primary:hover {
-  background-color: var(--hover-background-colour, #1f81a0);
-}
-button.card * {
-  user-select: none;
-}
-
-.card {
+<style>.card {
   color: #3a4952;
   fill: #3a4952;
   padding: var(--padding-size, 0.76rem);
@@ -142,7 +104,7 @@ button.card * {
   font-size: 1.75rem;
 }
 .card .value.xxlarge {
-  font-size: 3rem;
+  font-size: 2rem;
 }
 .card .title {
   font-weight: 400;

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

@@ -1,6 +1,27 @@
 import type { Snippet } from 'svelte';
+/**
+ * Props for `TouchCard`, the base touch-friendly card primitive in the Touch
+ * family. Renders a children area with an optional star-highlight Action and
+ * an additional-buttons slot positioned in the top-right corner.
+ *
+ * Many Touch components (EditCard, BoolCard, InfoCard, SummaryCard) build on
+ * top of TouchCard or share its sizing tokens through the SCSS mixin family.
+ */
 export interface TouchCardProps {
+    /**
+     * Card body. Conventionally renders one of the documented child layouts
+     * (`.row`, `.left`/`.right` columns, `h3`, `.value`, `.title`).
+     */
     children: Snippet;
+    /**
+     * Optional cluster of buttons rendered in the top-right corner alongside
+     * the star-highlight Action. Typed as `Snippet<[]>` to mark it as taking
+     * no parameters.
+     */
     additionalButtons?: Snippet;
+    /**
+     * Two-way bindable highlight state. When `true` the card is rendered with
+     * the brand-primary border and background.
+     */
     highlighted?: boolean;
 }