@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/ThreeStateRadio.svelte

@@ -1,133 +1,114 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { Ternary } from '../Types/Internal/Ternary.js';
-	import Action from './Action.svelte';
-	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(Ternary.Neutral),
-		label,
-		disabled,
-		isValid,
-		onchange,
-		noDisabled = false,
-		yesDisabled = false,
-		neutralDisabled = false,
-		noLabel,
-		yesLabel,
-		neutralLabel,
-		noIcon,
-		yesIcon,
-		neutralIcon,
-	}: ThreeStateRadioProps = $props();
-
-	function setValue(next: Ternary): void {
-		if (next === value) {
-			return;
-		}
-		value = next;
-		void onchange?.(next);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { Colour, ColourSet } from "../scss/colours.js";
+import { Ternary } from "../Types/Internal/Ternary.js";
+import Action from "./Action.svelte";
+</script>
+
+<script lang="ts">let { value = $bindable(Ternary.Neutral), label, disabled, isValid, onchange, noDisabled = false, yesDisabled = false, neutralDisabled = false, noLabel, yesLabel, neutralLabel, noIcon, yesIcon, neutralIcon } = $props();
+function setValue(next) {
+	if (next === value) {
+		return;
 	}
-</script>
-
-<div
-	class="text-label"
-	class:invalid={isValid === false}
->
-	{#if label != undefined}
-		<span>{label}</span>
-	{/if}
-
-	<div
-		class="radios"
-		role="radiogroup"
-		aria-label={label}
-	>
-		<label>
-			<Action
-				disabled={disabled || noDisabled}
-				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-cross',
-					...noIcon,
-					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={noLabel ?? 'No'}
-				onclick={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-			<input
-				disabled={disabled || noDisabled}
-				type="radio"
-				value="0"
-				checked={value === Ternary.False}
-				aria-label={noLabel ?? 'No'}
-				onchange={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || neutralDisabled}
-				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'database',
-					...neutralIcon,
-					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={neutralLabel ?? 'Allow system to decide'}
-				onclick={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-			<input
-				disabled={disabled || neutralDisabled}
-				type="radio"
-				value="-1"
-				checked={value === Ternary.Neutral}
-				aria-label={neutralLabel ?? 'Allow system to decide'}
-				onchange={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || yesDisabled}
-				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-tick',
-					...yesIcon,
-					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={yesLabel ?? 'Yes'}
-				onclick={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-			<input
-				disabled={disabled || yesDisabled}
-				type="radio"
-				value="1"
-				checked={value === Ternary.True}
-				aria-label={yesLabel ?? 'Yes'}
-				onchange={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-		</label>
-	</div>
-</div>
-
+	value = next;
+	void onchange?.(next);
+}
+</script>
+
+<div
+	class="text-label"
+	class:invalid={isValid === false}
+>
+	{#if label != undefined}
+		<span>{label}</span>
+	{/if}
+
+	<div
+		class="radios"
+		role="radiogroup"
+		aria-label={label}
+	>
+		<label>
+			<Action
+				disabled={disabled || noDisabled}
+				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-cross',
+					...noIcon,
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={noLabel ?? 'No'}
+				onclick={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+			<input
+				disabled={disabled || noDisabled}
+				type="radio"
+				value="0"
+				checked={value === Ternary.False}
+				aria-label={noLabel ?? 'No'}
+				onchange={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || neutralDisabled}
+				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'database',
+					...neutralIcon,
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={neutralLabel ?? 'Allow system to decide'}
+				onclick={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				value="-1"
+				checked={value === Ternary.Neutral}
+				aria-label={neutralLabel ?? 'Allow system to decide'}
+				onchange={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || yesDisabled}
+				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-tick',
+					...yesIcon,
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={yesLabel ?? 'Yes'}
+				onclick={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+			<input
+				disabled={disabled || yesDisabled}
+				type="radio"
+				value="1"
+				checked={value === Ternary.True}
+				aria-label={yesLabel ?? 'Yes'}
+				onchange={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
 <style>.text-label {
   box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
@@ -198,4 +179,4 @@ input {
   clip-path: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
-}</style>
+}</style>

package/dist/Components/Touch/BoolCard.svelte

@@ -1,47 +1,35 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { BoolCardProps } from './BoolCardProps.js';
-	import type { IconProps } from '../IconProps.js';
-
-	let {
-		value = $bindable(false),
-		disabled,
-		onclick,
-		children,
-		nowidth,
-		size = Size.Medium,
-	}: BoolCardProps = $props();
-
-	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
-</script>
-
-<button
-	class:small={size == Size.Small}
-	onkeydown={passthrough}
-	disabled={disabled || undefined}
-	aria-pressed={value}
-	class:nowidth
-	type="button"
-	class="card"
-	class:ticked={value}
-	{onclick}
->
-	{#if children}
-		<span
-			class="value"
-			class:small={size == Size.Small}>{@render children()}</span
-		>{/if}<Icon
-		name={iconName}
-		size={Size.DoubleXLarge}
-		colour={value ? Colour['$ui-white'] : undefined}
-	/>
-</button>
-
+<svelte:options runes />
+
+<script lang="ts">import { passthrough } from "../../Helpers/Helpers.svelte.js";
+import { Colour } from "../../scss/colours.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Icon from "../Icon.svelte";
+let { value = $bindable(false), disabled, onclick, children, nowidth, size = Size.Medium } = $props();
+const iconName = $derived(value ? "circle-tick" : "circle");
+</script>
+
+<button
+	class:small={size == Size.Small}
+	onkeydown={passthrough}
+	disabled={disabled || undefined}
+	aria-pressed={value}
+	class:nowidth
+	type="button"
+	class="card"
+	class:ticked={value}
+	{onclick}
+>
+	{#if children}
+		<span
+			class="value"
+			class:small={size == Size.Small}>{@render children()}</span
+		>{/if}<Icon
+		name={iconName}
+		size={Size.DoubleXLarge}
+		colour={value ? Colour['$ui-white'] : undefined}
+	/>
+</button>
+
 <style>button.card {
   color: #3a4952;
   fill: #3a4952;
@@ -171,4 +159,4 @@ button.card .value.small {
   font-size: 1.1875rem;
   font-weight: 600;
   padding: 0;
-}</style>
+}</style>