@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Checkbox.svelte

@@ -1,88 +1,77 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { CheckboxProps } from './CheckboxProps.js';
-	import Icon from './Icon.svelte';
-</script>
-
-<script lang="ts">
-	let {
-		value = false,
-		id = generateWeakId(),
-		icon,
-		size,
-		label,
-		disabled,
-		onchange,
-	}: CheckboxProps = $props();
-</script>
-
-{#if icon}
-	<div
-		class="outer-checkbox-container"
-		class:fill-width={size === Size.FillWidth}
-		class:fill-height={size === Size.FillHeight}
-	>
-		<div
-			class="inner-checkbox-container with-icon"
-			class:disabled
-		>
-			<input
-				{id}
-				name={id}
-				class="with-icon"
-				{onchange}
-				type="checkbox"
-				{disabled}
-				checked={value}
-			/>
-			<label
-				class="icon-label"
-				for={id}
-				class:disabled
-			>
-				<Icon
-					{...icon}
-					size={icon.size ?? size ?? Size.DoubleXLarge}
-				/>
-			</label>
-		</div>
-		{#if label}
-			<label
-				class="text-label"
-				for={id}>{label}</label
-			>
-		{/if}
-	</div>
-{:else}
-	<div
-		class="checkbox-container"
-		class:compact={size === Size.Tiny ||
-			size === Size.Small ||
-			size === Size.MediumSmall ||
-			size === Size.Medium}
-	>
-		<input
-			{id}
-			{onchange}
-			type="checkbox"
-			checked={value}
-			{disabled}
-		/>
-		{#if label}
-			<label
-				class="text-label"
-				for={id}>{label}</label
-			>
-		{/if}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { generateWeakId } from "../Helpers/Helpers.svelte.js";
+import { Size } from "../Types/Internal/Size.js";
+import Icon from "./Icon.svelte";
+</script>
+
+<script lang="ts">let { value = false, id = generateWeakId(), icon, size, label, disabled, onchange } = $props();
+</script>
+
+{#if icon}
+	<div
+		class="outer-checkbox-container"
+		class:fill-width={size === Size.FillWidth}
+		class:fill-height={size === Size.FillHeight}
+	>
+		<div
+			class="inner-checkbox-container with-icon"
+			class:disabled
+		>
+			<input
+				{id}
+				name={id}
+				class="with-icon"
+				{onchange}
+				type="checkbox"
+				{disabled}
+				checked={value}
+			/>
+			<label
+				class="icon-label"
+				for={id}
+				class:disabled
+			>
+				<Icon
+					{...icon}
+					size={icon.size ?? size ?? Size.DoubleXLarge}
+				/>
+			</label>
+		</div>
+		{#if label}
+			<label
+				class="text-label"
+				for={id}>{label}</label
+			>
+		{/if}
+	</div>
+{:else}
+	<div
+		class="checkbox-container"
+		class:compact={size === Size.Tiny ||
+			size === Size.Small ||
+			size === Size.MediumSmall ||
+			size === Size.Medium}
+	>
+		<input
+			{id}
+			{onchange}
+			type="checkbox"
+			checked={value}
+			{disabled}
+		/>
+		{#if label}
+			<label
+				class="text-label"
+				for={id}>{label}</label
+			>
+		{/if}
+	</div>
+{/if}
+
 <style>.outer-checkbox-container {
   box-sizing: border-box;
   display: flex;
@@ -176,4 +165,4 @@ label {
   display: block;
   cursor: pointer;
   position: relative;
-}</style>
+}</style>

package/dist/Components/CollapsibleCard.svelte

@@ -1,87 +1,74 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
-</script>
-
-<script lang="ts">
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { Colour } from '../scss/colours.js';
-	import { cubicOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
-	import Icon from './Icon.svelte';
-
-	let {
-		title,
-		subtitle,
-		maxHeight,
-		children,
-		grow,
-		isCollapsed = $bindable(false),
-	}: CollapsibleCardProps = $props();
-
-	const contentId = `collapsible-card-${generateWeakId()}`;
-
-	const cardMaxHeight = $derived(maxHeight != null && maxHeight > 0 ? `${maxHeight}px` : undefined);
-
-	const reducedMotion = usePrefersReducedMotion();
-	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
-</script>
-
-<div
-	class="collapsible-card"
-	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
-	class:is-collapsed={isCollapsed}
-	class:grow
->
-	<button
-		type="button"
-		class="heading"
-		class:is-collapsed={isCollapsed}
-		aria-expanded={!isCollapsed}
-		aria-controls={contentId}
-		onclick={() => {
-			isCollapsed = !isCollapsed;
-		}}
-	>
-		<div class="left">
-			<h3>{title}</h3>
-			{#if subtitle}
-				{#await subtitle}
-					<span>{loadingText}</span>
-				{:then resolvedSubtitle}
-					<span>{resolvedSubtitle}</span>
-				{/await}
-			{/if}
-		</div>
-		<span class="indicator">
-			<Icon
-				name={isCollapsed ? 'circle-plus' : 'circle-minus'}
-				colour={Colour['$ui-blue-5']}
-				size={Size.Medium}
-			/>
-		</span>
-	</button>
-
-	{#if !isCollapsed}
-		<div
-			id={contentId}
-			class="content"
-			transition:slide={{ duration: slideDuration, easing: cubicOut }}
-		>
-			{#if children}
-				{@render children()}
-			{/if}
-		</div>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { generateWeakId } from "../Helpers/Helpers.svelte.js";
+</script>
+
+<script lang="ts">import { loadingText } from "../Helpers/Helpers.svelte.js";
+import { usePrefersReducedMotion } from "../Helpers/prefersReducedMotion.svelte.js";
+import { Size } from "../Types/Internal/Size.js";
+import { Colour } from "../scss/colours.js";
+import { cubicOut } from "svelte/easing";
+import { slide } from "svelte/transition";
+import Icon from "./Icon.svelte";
+let { title, subtitle, maxHeight, children, grow, isCollapsed = $bindable(false) } = $props();
+const contentId = `collapsible-card-${generateWeakId()}`;
+const cardMaxHeight = $derived(maxHeight != null && maxHeight > 0 ? `${maxHeight}px` : undefined);
+const reducedMotion = usePrefersReducedMotion();
+const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
+</script>
+
+<div
+	class="collapsible-card"
+	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
+	class:is-collapsed={isCollapsed}
+	class:grow
+>
+	<button
+		type="button"
+		class="heading"
+		class:is-collapsed={isCollapsed}
+		aria-expanded={!isCollapsed}
+		aria-controls={contentId}
+		onclick={() => {
+			isCollapsed = !isCollapsed;
+		}}
+	>
+		<div class="left">
+			<h3>{title}</h3>
+			{#if subtitle}
+				{#await subtitle}
+					<span>{loadingText}</span>
+				{:then resolvedSubtitle}
+					<span>{resolvedSubtitle}</span>
+				{/await}
+			{/if}
+		</div>
+		<span class="indicator">
+			<Icon
+				name={isCollapsed ? 'circle-plus' : 'circle-minus'}
+				colour={Colour['$ui-blue-5']}
+				size={Size.Medium}
+			/>
+		</span>
+	</button>
+
+	{#if !isCollapsed}
+		<div
+			id={contentId}
+			class="content"
+			style="overflow: {cardMaxHeight != null ? 'auto' : 'visible'};"
+			transition:slide={{ duration: slideDuration, easing: cubicOut }}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>
+
 <style>.collapsible-card {
   background-color: #ffffff;
   display: flex;
@@ -91,7 +78,6 @@
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   padding: 1.5rem;
   max-height: 100%;
-  overflow: hidden;
 }
 .collapsible-card.grow {
   flex: 1;
@@ -144,5 +130,4 @@ div.content {
   height: max-content;
   min-height: 0;
   width: 100%;
-  overflow: auto;
-}</style>
+}</style>

package/dist/Components/CollapsibleMenuGroup.svelte

@@ -1,58 +1,54 @@
-<svelte:options runes />
-
-<!--
-@component
-A labelled, collapsible group for a side menu: a header row (label + chevron)
-that expands and collapses the items supplied as the default snippet. Pair
-several of these in a menu column to build a grouped navigation tree.
--->
-<script lang="ts">
-	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { cubicOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import type { CollapsibleMenuGroupProps } from './CollapsibleMenuGroupProps.js';
-	import Icon from './Icon.svelte';
-
-	let { title, isCollapsed = $bindable(false), children }: CollapsibleMenuGroupProps = $props();
-
-	const reducedMotion = usePrefersReducedMotion();
-	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
-</script>
-
-<div class="menu-group">
-	<button
-		type="button"
-		class="group-header"
-		aria-expanded={!isCollapsed}
-		onclick={() => {
-			isCollapsed = !isCollapsed;
-		}}
-	>
-		<span class="group-title">{title}</span>
-		<span
-			class="chevron"
-			class:collapsed={isCollapsed}
-		>
-			<Icon
-				name="chevron-down"
-				size={Size.Small}
-				colour={Colour['$ui-blue-11']}
-			/>
-		</span>
-	</button>
-
-	{#if !isCollapsed}
-		<div
-			class="group-items"
-			transition:slide={{ duration: slideDuration, easing: cubicOut }}
-		>
-			{@render children()}
-		</div>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<!--
+@component
+A labelled, collapsible group for a side menu: a header row (label + chevron)
+that expands and collapses the items supplied as the default snippet. Pair
+several of these in a menu column to build a grouped navigation tree.
+-->
+<script lang="ts">import { usePrefersReducedMotion } from "../Helpers/prefersReducedMotion.svelte.js";
+import { Colour } from "../scss/colours.js";
+import { Size } from "../Types/Internal/Size.js";
+import { cubicOut } from "svelte/easing";
+import { slide } from "svelte/transition";
+import Icon from "./Icon.svelte";
+let { title, isCollapsed = $bindable(false), children } = $props();
+const reducedMotion = usePrefersReducedMotion();
+const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
+</script>
+
+<div class="menu-group">
+	<button
+		type="button"
+		class="group-header"
+		aria-expanded={!isCollapsed}
+		onclick={() => {
+			isCollapsed = !isCollapsed;
+		}}
+	>
+		<span class="group-title">{title}</span>
+		<span
+			class="chevron"
+			class:collapsed={isCollapsed}
+		>
+			<Icon
+				name="chevron-down"
+				size={Size.Small}
+				colour={Colour['$ui-blue-11']}
+			/>
+		</span>
+	</button>
+
+	{#if !isCollapsed}
+		<div
+			class="group-items"
+			transition:slide={{ duration: slideDuration, easing: cubicOut }}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
 <style>.menu-group {
   border: solid 1px #cbd4da;
   border-radius: 4px;
@@ -71,7 +67,7 @@ several of these in a menu column to build a grouped navigation tree.
   font-weight: 500;
   color: #46525b;
   text-align: start;
-  background: transparent;
+  background-color: #f4f7f9;
   border: none;
   cursor: pointer;
 }
@@ -90,4 +86,4 @@ several of these in a menu column to build a grouped navigation tree.
   display: flex;
   flex-flow: column nowrap;
   border-top: solid 1px #cbd4da;
-}</style>
+}</style>

package/dist/Components/ConditionBuilder/ConditionBuilder.svelte

@@ -3,70 +3,45 @@
 <script
 	lang="ts"
 	generics="F extends string | number, O extends string | number, V"
->
-	import SingleSelect from '../SingleSelect.svelte';
-	import Button from '../Button.svelte';
-	import type { ConditionBuilderProps } from './ConditionBuilderProps.js';
-	import { makeGroup, makeLeaf, type ConditionLeaf, type ConditionNode } from './ConditionTree.js';
-	import Self from './ConditionBuilder.svelte';
-
-	const {
-		root,
-		onChange,
-		fields,
-		operatorsFor,
-		valueEditor,
-		defaultValueFor,
-		allowGroups = true,
-		maxDepth = 5,
-		addConditionLabel = 'Add Condition',
-		addGroupLabel = 'Add Group',
-		andLabel = 'AND',
-		orLabel = 'OR',
-		depth = 0,
-	}: ConditionBuilderProps<F, O, V> = $props();
-
-	function seedValue(field: F | null, operator: O | null): V {
-		return defaultValueFor ? defaultValueFor(field, operator) : (null as V);
-	}
-
-	function setCombinator(combinator: 'and' | 'or') {
-		root.combinator = combinator;
-		onChange(root);
-	}
-
-	function addLeaf() {
-		root.children.push(makeLeaf<F, O, V>(seedValue(null, null)));
-		onChange(root);
-	}
-
-	function addGroup() {
-		root.children.push(makeGroup<F, O, V>());
-		onChange(root);
-	}
-
-	function removeChild(node: ConditionNode<F, O, V>) {
-		root.children = root.children.filter((child) => child.id !== node.id);
-		onChange(root);
-	}
-
-	function setField(leaf: ConditionLeaf<F, O, V>, field: F | null) {
-		leaf.field = field;
-		leaf.operator = null;
-		leaf.value = seedValue(field, null);
-		onChange(root);
-	}
-
-	function setOperator(leaf: ConditionLeaf<F, O, V>, operator: O | null) {
-		leaf.operator = operator;
-		leaf.value = seedValue(leaf.field, operator);
-		onChange(root);
-	}
-
-	function setValue(leaf: ConditionLeaf<F, O, V>, value: V) {
-		leaf.value = value;
-		onChange(root);
-	}
+>import SingleSelect from "../SingleSelect.svelte";
+import Button from "../Button.svelte";
+import { makeGroup, makeLeaf } from "./ConditionTree.js";
+import Self from "./ConditionBuilder.svelte";
+const { root, onChange, fields, operatorsFor, valueEditor, defaultValueFor, allowGroups = true, maxDepth = 5, addConditionLabel = "Add Condition", addGroupLabel = "Add Group", andLabel = "AND", orLabel = "OR", depth = 0 } = $props();
+function seedValue(field, operator) {
+	return defaultValueFor ? defaultValueFor(field, operator) : null;
+}
+function setCombinator(combinator) {
+	root.combinator = combinator;
+	onChange(root);
+}
+function addLeaf() {
+	root.children.push(makeLeaf(seedValue(null, null)));
+	onChange(root);
+}
+function addGroup() {
+	root.children.push(makeGroup());
+	onChange(root);
+}
+function removeChild(node) {
+	root.children = root.children.filter((child) => child.id !== node.id);
+	onChange(root);
+}
+function setField(leaf, field) {
+	leaf.field = field;
+	leaf.operator = null;
+	leaf.value = seedValue(field, null);
+	onChange(root);
+}
+function setOperator(leaf, operator) {
+	leaf.operator = operator;
+	leaf.value = seedValue(leaf.field, operator);
+	onChange(root);
+}
+function setValue(leaf, value) {
+	leaf.value = value;
+	onChange(root);
+}
 </script>
 
 <div