@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Button.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
 >import { passthrough } from "../Helpers/Helpers.svelte.js";
 import { useTooltip } from "../Helpers/useTooltip.svelte.js";
 import { Colour, ColourSet } from "../scss/colours.js";
@@ -74,8 +74,8 @@ const iconColours = {
 	[ColourSet.Error]: Colour["$error-border"],
 	[ColourSet.Info]: Colour["$primary-blue-13"]
 };
-</script>
-
+</script>
+
 <script lang="ts">const { type = "button", variant = Variant.Default, toggled = false, iconLeft, iconTop, iconRight, iconBottom, nowrap = false, side, size = Size.Medium, label, colourSet = ColourSet.Secondary, dashed = false, disabled = false, fullWidth = false, onclick, onfocus, onblur, onkeydown: onkeydownProp, children, relative, noninteractive } = $props();
 function onkeydown(e) {
 	passthrough(e);
@@ -99,81 +99,81 @@ $effect(() => {
 		tt.onmouseleave();
 	}
 });
-</script>
-
-<!-- title={label} -->
-<!-- style="--font-size: {fontSizes[
-		size
-	]};" -->
-<button
-	onmouseenter={tt.onmouseenter}
-	onmouseleave={tt.onmouseleave}
-	class:noninteractive
-	class:relative
-	class:default={variant === Variant.Default}
-	class:card-inner={variant === Variant.CardInner}
-	class:card={variant === Variant.Card}
-	class:call-to-action={colourSet === ColourSet.CallToAction}
-	class:primary={colourSet === ColourSet.Primary}
-	class:secondary-colour={colourSet === ColourSet.Secondary}
-	class:secondary-variant={variant === Variant.Secondary}
-	class:warning={colourSet === ColourSet.Warning}
-	class:error={colourSet === ColourSet.Error}
-	class:info={colourSet === ColourSet.Info}
-	class:fill-height={size === Size.FillHeight}
-	class:fill-width={size === Size.FillWidth}
-	style="--fallback-padding-horizontal: {paddingSizesHorizontal[
-		size
-	]}; --fallback-padding-vertical: {paddingSizesVertical[size]}; --border-width: {borderSizes[
-		size
-	]};"
-	class:dashed
-	class:full-width={fullWidth}
-	class:toolbar={variant === Variant.Toolbar}
-	class:left={side === Side.Left}
-	class:right={side === Side.Right}
-	class:top={side === Side.Top}
-	class:bottom={side === Side.Bottom}
-	class:toggled
-	class:nowrap
-	{type}
-	aria-label={label}
-	{disabled}
-	onclick={(e) => {
-		tt.onclick();
-		onclick?.(e);
-	}}
-	{onfocus}
-	{onblur}
-	{onkeydown}
->
-	<div class="icon-container">
-		{#if iconLeft}
-			<Icon
-				{...iconLeft}
-				colour={iconColours[colourSet]}
-				size={iconLeft.size ?? size}
-			/>
-		{/if}
-		{#if iconTop}
-			<Icon {...iconTop} />
-		{/if}
-		{#if children}
-			<span>{@render children()}</span>
-		{/if}
-		{#if iconBottom}
-			<Icon {...iconBottom} />
-		{/if}
-		{#if iconRight}
-			<Icon
-				{...iconRight}
-				colour={iconColours[colourSet]}
-				size={iconRight.size ?? size}
-			/>
-		{/if}
-	</div>
-</button>
-
+</script>
+
+<!-- title={label} -->
+<!-- style="--font-size: {fontSizes[
+		size
+	]};" -->
+<button
+	onmouseenter={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
+	class:noninteractive
+	class:relative
+	class:default={variant === Variant.Default}
+	class:card-inner={variant === Variant.CardInner}
+	class:card={variant === Variant.Card}
+	class:call-to-action={colourSet === ColourSet.CallToAction}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary-colour={colourSet === ColourSet.Secondary}
+	class:secondary-variant={variant === Variant.Secondary}
+	class:warning={colourSet === ColourSet.Warning}
+	class:error={colourSet === ColourSet.Error}
+	class:info={colourSet === ColourSet.Info}
+	class:fill-height={size === Size.FillHeight}
+	class:fill-width={size === Size.FillWidth}
+	style="--fallback-padding-horizontal: {paddingSizesHorizontal[
+		size
+	]}; --fallback-padding-vertical: {paddingSizesVertical[size]}; --border-width: {borderSizes[
+		size
+	]};"
+	class:dashed
+	class:full-width={fullWidth}
+	class:toolbar={variant === Variant.Toolbar}
+	class:left={side === Side.Left}
+	class:right={side === Side.Right}
+	class:top={side === Side.Top}
+	class:bottom={side === Side.Bottom}
+	class:toggled
+	class:nowrap
+	{type}
+	aria-label={label}
+	{disabled}
+	onclick={(e) => {
+		tt.onclick();
+		onclick?.(e);
+	}}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+>
+	<div class="icon-container">
+		{#if iconLeft}
+			<Icon
+				{...iconLeft}
+				colour={iconColours[colourSet]}
+				size={iconLeft.size ?? size}
+			/>
+		{/if}
+		{#if iconTop}
+			<Icon {...iconTop} />
+		{/if}
+		{#if children}
+			<span>{@render children()}</span>
+		{/if}
+		{#if iconBottom}
+			<Icon {...iconBottom} />
+		{/if}
+		{#if iconRight}
+			<Icon
+				{...iconRight}
+				colour={iconColours[colourSet]}
+				size={iconRight.size ?? size}
+			/>
+		{/if}
+	</div>
+</button>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -487,4 +487,4 @@ button.toolbar:not([disabled]).toggled.bottom {
 }
 button.toolbar:not([disabled]).toggled svg {
   fill: #259fc7;
-}</style>
+}</style>

package/dist/Components/Checkbox.svelte

@@ -1,77 +1,77 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<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>
+
 <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}
-
+</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;
@@ -165,4 +165,4 @@ label {
   display: block;
   cursor: pointer;
   position: relative;
-}</style>
+}</style>

package/dist/Components/CollapsibleCard.svelte

@@ -1,11 +1,11 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { generateWeakId } from "../Helpers/Helpers.svelte.js";
-</script>
-
+</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";
@@ -18,57 +18,57 @@ 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>
-
+</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;
@@ -130,4 +130,4 @@ div.content {
   height: max-content;
   min-height: 0;
   width: 100%;
-}</style>
+}</style>

package/dist/Components/CollapsibleMenuGroup.svelte

@@ -1,11 +1,11 @@
-<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.
--->
+<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";
@@ -15,40 +15,40 @@ 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>
-
+</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;
@@ -86,4 +86,4 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
   display: flex;
   flex-flow: column nowrap;
   border-top: solid 1px #cbd4da;
-}</style>
+}</style>