@lavalogic/scoria 0.40.1 → 0.40.2

package/dist/Components/Checkbox.svelte

@@ -1,88 +1,88 @@
-<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 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}
+
 <style>.outer-checkbox-container {
   box-sizing: border-box;
   display: flex;
@@ -176,4 +176,4 @@ label {
   display: block;
   cursor: pointer;
   position: relative;
-}</style>
+}</style>

package/dist/Components/CollapsibleCard.svelte

@@ -1,80 +1,80 @@
-<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 { Size } from '../Types/Internal/Size.js';
-	import { Colour } from '../scss/colours.js';
-	import Action from './Action.svelte';
-	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
-
-	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);
-</script>
-
-<div
-	class="collapsible-card"
-	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
-	class:is-collapsed={isCollapsed}
-	class:grow
->
-	<div class="heading">
-		<div class="left">
-			<h3>{title}</h3>
-			{#if subtitle}
-				{#await subtitle}
-					<span>{loadingText}</span>
-				{:then resolvedSubtitle}
-					<span>{resolvedSubtitle}</span>
-				{/await}
-			{/if}
-		</div>
-		<div class="right">
-			<Action
-				label={isCollapsed ? 'Expand' : 'Collapse'}
-				aria-expanded={!isCollapsed}
-				aria-controls={contentId}
-				onclick={() => {
-					isCollapsed = !isCollapsed;
-				}}
-				size={Size.TripleXLarge}
-				icon={{
-					name: isCollapsed ? 'circle-plus' : 'circle-minus',
-					colour: Colour['$ui-blue-5'],
-					size: Size.Medium,
-				}}
-			/>
-		</div>
-	</div>
-
-	<div
-		id={contentId}
-		class="content"
-		class:is-collapsed={isCollapsed}
-		aria-hidden={isCollapsed}
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-</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 { Size } from '../Types/Internal/Size.js';
+	import { Colour } from '../scss/colours.js';
+	import Action from './Action.svelte';
+	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
+
+	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);
+</script>
+
+<div
+	class="collapsible-card"
+	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
+	class:is-collapsed={isCollapsed}
+	class:grow
+>
+	<div class="heading">
+		<div class="left">
+			<h3>{title}</h3>
+			{#if subtitle}
+				{#await subtitle}
+					<span>{loadingText}</span>
+				{:then resolvedSubtitle}
+					<span>{resolvedSubtitle}</span>
+				{/await}
+			{/if}
+		</div>
+		<div class="right">
+			<Action
+				label={isCollapsed ? 'Expand' : 'Collapse'}
+				aria-expanded={!isCollapsed}
+				aria-controls={contentId}
+				onclick={() => {
+					isCollapsed = !isCollapsed;
+				}}
+				size={Size.TripleXLarge}
+				icon={{
+					name: isCollapsed ? 'circle-plus' : 'circle-minus',
+					colour: Colour['$ui-blue-5'],
+					size: Size.Medium,
+				}}
+			/>
+		</div>
+	</div>
+
+	<div
+		id={contentId}
+		class="content"
+		class:is-collapsed={isCollapsed}
+		aria-hidden={isCollapsed}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
 <style>.collapsible-card {
   background-color: #ffffff;
   display: flex;
@@ -170,4 +170,4 @@ div.content.is-collapsed {
     animation-duration: 0.001ms !important;
     transition-duration: 0.001ms !important;
   }
-}</style>
+}</style>

package/dist/Components/Contexts/ContextMenu.svelte

@@ -1,166 +1,166 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual host for `ContextMenuContext`. Renders the fixed-positioned
-`<ul role="menu">` near the `(x, y)` coordinates the context exposes,
-and clamps the position so the menu never spills off the viewport.
-
-Mounted exactly once at the app root by `ContextWrapper`; consumers do
-not render `ContextMenu` directly. Open a menu through the context:
-
-```svelte
-<script lang="ts">
-	import { ContextMenuContext } from '@lavalogic/scoria';
-	import { getContext } from 'svelte';
-
-	const ctx = getContext<ContextMenuContext>(ContextMenuContext.identifier);
-</script>
-
-<button oncontextmenu={(e) => ctx.openContextMenu(e, items)}>
-	Right-click me
-</button>
-```
-
-### Keyboard
-
-`Escape` closes the menu and returns focus to the previously focused
-element; `ArrowUp` / `ArrowDown` cycle focus through the items.
--->
-<script lang="ts">
-	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { getContext, tick, untrack } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { usePrefersReducedMotion } from '../../Helpers/prefersReducedMotion.svelte.js';
-	import ContextMenuOption from './ContextMenuOption.svelte';
-	import type { MaybeFocusable } from './MaybeFocusable.js';
-
-	const contextMenuContext = getContext<ContextMenuContext>(ContextMenuContext.identifier);
-	const reducedMotion = usePrefersReducedMotion();
-	const fadeDuration = $derived(reducedMotion.matches ? 0 : 50);
-
-	let _x: number = $state(0);
-	let _y: number = $state(0);
-
-	$effect(() => {
-		if (contextMenuContext.showMenu) {
-			recalculateCoordinates();
-		}
-	});
-
-	function recalculateCoordinates() {
-		_x = contextMenuContext.x;
-		_y = contextMenuContext.y;
-
-		tick()
-			.then(() => {
-				const rect = menuEl?.getBoundingClientRect();
-				if (!rect) {
-					return;
-				}
-				_x = Math.min(window.innerWidth - rect.width, _x);
-				if (_y > window.innerHeight - rect.height) {
-					_y -= rect.height;
-				}
-			})
-			.catch(devCatch);
-	}
-
-	let menuEl = $state<HTMLUListElement | undefined>();
-	function closeOnClickOutside(e: MouseEvent) {
-		if (!menuEl) {
-			return;
-		}
-		if (e.target === menuEl || menuEl.contains(e.target as Node)) {
-			return;
-		}
-		contextMenuContext.closeMenu();
-	}
-
-	let previousElement = $state<MaybeFocusable | null | undefined>();
-
-	$effect.pre(() => {
-		if (contextMenuContext.showMenu) {
-			untrack(() => {
-				previousElement = document.activeElement as MaybeFocusable;
-			});
-		}
-	});
-
-	function refocusPrevious() {
-		previousElement?.focus?.();
-	}
-
-	function focusNext() {
-		if (!menuEl) {
-			return;
-		}
-		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
-		if (items.length === 0) {
-			return;
-		}
-		const index = items.indexOf(document.activeElement as HTMLElement);
-		items.at((index + 1) % items.length)?.focus();
-	}
-
-	function focusPrev() {
-		if (!menuEl) {
-			return;
-		}
-		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
-		if (items.length === 0) {
-			return;
-		}
-		const index = items.indexOf(document.activeElement as HTMLElement);
-		items.at((index - 1 + items.length) % items.length)?.focus();
-	}
-</script>
-
-<svelte:body onclick={closeOnClickOutside} />
-
-{#if contextMenuContext.showMenu}
-	<ul
-		transition:fade={{ duration: fadeDuration }}
-		bind:this={menuEl}
-		style="top: {_y}px; left: {_x}px;"
-		role="menu"
-		aria-label="Context menu"
-		tabindex="-1"
-		onkeydown={(e) => {
-			if (e.key === 'Escape') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				contextMenuContext.closeMenu();
-				refocusPrevious();
-			} else if (e.key == 'ArrowUp') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				focusPrev();
-			} else if (e.key == 'ArrowDown') {
-				e.stopImmediatePropagation();
-				e.stopPropagation();
-				e.preventDefault();
-				focusNext();
-			}
-		}}
-	>
-		{#each contextMenuContext.items as item, index (item)}
-			<ContextMenuOption
-				{index}
-				disabled={item.disabled}
-				onclick={() => {
-					void item.callback();
-					contextMenuContext.closeMenu();
-				}}
-				text={item.text}
-			/>
-		{/each}
-	</ul>
-{/if}
-
+<svelte:options runes />
+
+<!--
+@component
+Visual host for `ContextMenuContext`. Renders the fixed-positioned
+`<ul role="menu">` near the `(x, y)` coordinates the context exposes,
+and clamps the position so the menu never spills off the viewport.
+
+Mounted exactly once at the app root by `ContextWrapper`; consumers do
+not render `ContextMenu` directly. Open a menu through the context:
+
+```svelte
+<script lang="ts">
+	import { ContextMenuContext } from '@lavalogic/scoria';
+	import { getContext } from 'svelte';
+
+	const ctx = getContext<ContextMenuContext>(ContextMenuContext.identifier);
+</script>
+
+<button oncontextmenu={(e) => ctx.openContextMenu(e, items)}>
+	Right-click me
+</button>
+```
+
+### Keyboard
+
+`Escape` closes the menu and returns focus to the previously focused
+element; `ArrowUp` / `ArrowDown` cycle focus through the items.
+-->
+<script lang="ts">
+	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { getContext, tick, untrack } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { usePrefersReducedMotion } from '../../Helpers/prefersReducedMotion.svelte.js';
+	import ContextMenuOption from './ContextMenuOption.svelte';
+	import type { MaybeFocusable } from './MaybeFocusable.js';
+
+	const contextMenuContext = getContext<ContextMenuContext>(ContextMenuContext.identifier);
+	const reducedMotion = usePrefersReducedMotion();
+	const fadeDuration = $derived(reducedMotion.matches ? 0 : 50);
+
+	let _x: number = $state(0);
+	let _y: number = $state(0);
+
+	$effect(() => {
+		if (contextMenuContext.showMenu) {
+			recalculateCoordinates();
+		}
+	});
+
+	function recalculateCoordinates() {
+		_x = contextMenuContext.x;
+		_y = contextMenuContext.y;
+
+		tick()
+			.then(() => {
+				const rect = menuEl?.getBoundingClientRect();
+				if (!rect) {
+					return;
+				}
+				_x = Math.min(window.innerWidth - rect.width, _x);
+				if (_y > window.innerHeight - rect.height) {
+					_y -= rect.height;
+				}
+			})
+			.catch(devCatch);
+	}
+
+	let menuEl = $state<HTMLUListElement | undefined>();
+	function closeOnClickOutside(e: MouseEvent) {
+		if (!menuEl) {
+			return;
+		}
+		if (e.target === menuEl || menuEl.contains(e.target as Node)) {
+			return;
+		}
+		contextMenuContext.closeMenu();
+	}
+
+	let previousElement = $state<MaybeFocusable | null | undefined>();
+
+	$effect.pre(() => {
+		if (contextMenuContext.showMenu) {
+			untrack(() => {
+				previousElement = document.activeElement as MaybeFocusable;
+			});
+		}
+	});
+
+	function refocusPrevious() {
+		previousElement?.focus?.();
+	}
+
+	function focusNext() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		if (items.length === 0) {
+			return;
+		}
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		items.at((index + 1) % items.length)?.focus();
+	}
+
+	function focusPrev() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		if (items.length === 0) {
+			return;
+		}
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		items.at((index - 1 + items.length) % items.length)?.focus();
+	}
+</script>
+
+<svelte:body onclick={closeOnClickOutside} />
+
+{#if contextMenuContext.showMenu}
+	<ul
+		transition:fade={{ duration: fadeDuration }}
+		bind:this={menuEl}
+		style="top: {_y}px; left: {_x}px;"
+		role="menu"
+		aria-label="Context menu"
+		tabindex="-1"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				contextMenuContext.closeMenu();
+				refocusPrevious();
+			} else if (e.key == 'ArrowUp') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusPrev();
+			} else if (e.key == 'ArrowDown') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusNext();
+			}
+		}}
+	>
+		{#each contextMenuContext.items as item, index (item)}
+			<ContextMenuOption
+				{index}
+				disabled={item.disabled}
+				onclick={() => {
+					void item.callback();
+					contextMenuContext.closeMenu();
+				}}
+				text={item.text}
+			/>
+		{/each}
+	</ul>
+{/if}
+
 <style>ul {
   padding: 0.375rem;
   position: fixed;
@@ -175,4 +175,4 @@ element; `ArrowUp` / `ArrowDown` cycle focus through the items.
 
 ul:focus {
   outline: none;
-}</style>
+}</style>