@lavalogic/scoria 0.35.0 → 0.37.0

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,74 +1,36 @@
-<script lang="ts">
-	import { Colour } from '../../scss/colours.js';
-	import Action from '../Action.svelte';
-	import type { TouchCardProps } from './TouchCardProps.js';
-	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
-</script>
-
-<div class="card" class:highlighted>
-	<div class="float-right">
-		{#if additionalButtons}
-			{@render additionalButtons()}
-		{/if}
-		<Action
-			icon={{
-				name: 'star-banner',
-				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4']
-			}}
-			backgroundColour={Colour['$transparent-0']}
-			label="Highlight Card"
-			onclick={() => {
-				highlighted = !highlighted;
-			}}
-		/>
-	</div>
-	{@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;
-}
+<svelte:options runes />
 
-.card {
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import Action from '../Action.svelte';
+	import type { TouchCardProps } from './TouchCardProps.js';
+	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
+</script>
+
+<div
+	class="card"
+	class:highlighted
+>
+	<div class="float-right">
+		{#if additionalButtons}
+			{@render additionalButtons()}
+		{/if}
+		<Action
+			icon={{
+				name: 'star-banner',
+				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4'],
+			}}
+			backgroundColour={Colour['$transparent-0']}
+			label="Highlight Card"
+			onclick={() => {
+				highlighted = !highlighted;
+			}}
+		/>
+	</div>
+	{@render children()}
+</div>
+
+<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;
@@ -157,4 +119,4 @@ button.card * {
   padding: 0.375rem 0.5rem;
   margin-left: 0;
   width: fit-content;
-}</style>
+}</style>

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;
 }