@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Bubble.svelte

@@ -1,103 +1,103 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { Size } from '../Types/Internal/Size.js';
-	import type { BubbleProps } from './BubbleProps.js';
-	import Icon from './Icon.svelte';
-
-	// Per-size padding/typography. Only `Size.Large` has explicit overrides;
-	// other sizes fall back to the medium defaults handled in $derived blocks
-	// below. Replaced the previous one-key `Partial<Record<Size, string>>`
-	// lookup tables with a simple `size === Size.Large` branch.
-	const LARGE_HORIZONTAL_WITH_VALUE = '1rem';
-	const LARGE_HORIZONTAL_WITHOUT_VALUE = '1.25rem';
-	const LARGE_VERTICAL = '0.5rem';
-	const LARGE_FONT_SIZE = '1.12rem';
-	const LARGE_BORDER_RADIUS = '1.75rem';
-
-	const DEFAULT_VERTICAL = '0.18rem';
-	const DEFAULT_HORIZONTAL_WITH_VALUE = '0.5rem';
-	const DEFAULT_HORIZONTAL_WITHOUT_VALUE = '0.75rem';
-	const DEFAULT_FONT_SIZE = '1rem';
-</script>
-
-<script
-	lang="ts"
-	generics="T = unknown"
->
-	// `BubbleProps<T>` is intentionally annotated with `<T>` even though
-	// the interface declares `T = unknown` as a default; the explicit
-	// substitution flows the generic from `<Bubble<MyType> ...>` consumers
-	// into the destructured `options` array type. The lint rule
-	// `@typescript-eslint/no-unnecessary-type-arguments` flags this as
-	// redundant when `T` resolves to `unknown` at the lint pass, hence
-	// the disable.
-	const {
-		options,
-		value,
-		colours,
-		label,
-		size = Size.Medium,
-		bold,
-		icon,
-		onclick,
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
-	}: BubbleProps<T> = $props();
-
-	const isLarge = $derived(size === Size.Large);
-	const verticalPadding = $derived(isLarge ? LARGE_VERTICAL : DEFAULT_VERTICAL);
-	const horizontalPadding = $derived.by(() => {
-		if (value.length === 1) {
-			return isLarge ? LARGE_HORIZONTAL_WITH_VALUE : DEFAULT_HORIZONTAL_WITH_VALUE;
-		}
-
-		return isLarge ? LARGE_HORIZONTAL_WITHOUT_VALUE : DEFAULT_HORIZONTAL_WITHOUT_VALUE;
-	});
-	const fontSize = $derived(isLarge ? LARGE_FONT_SIZE : DEFAULT_FONT_SIZE);
-
-	// Precompute the label lookup once per `options`/`value` change.
-	const displayLabel = $derived(
-		options?.length ? (options.find((it) => it.value === value)?.label ?? value) : value
-	);
-
-	// Precompute the inline style string once per reactive input change.
-	const wrapperStyle = $derived.by(() => {
-		const colourPart = colours
-			? `background-color: ${colours.backgroundColour}; color: ${colours.colour};`
-			: '';
-		const radiusPart = isLarge ? `border-radius: ${LARGE_BORDER_RADIUS};` : '';
-		return `${colourPart} padding: var(--bubble-padding, ${verticalPadding} ${horizontalPadding}); font-size: ${fontSize}; ${radiusPart}`;
-	});
-</script>
-
-{#if onclick}
-	<button
-		class="contents"
-		{onclick}
-	>
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render bubble()}
-	</button>
-{:else}
-	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-	{@render bubble()}
-{/if}
-
-{#snippet bubble()}
-	<span
-		class="bubble"
-		class:bold
-		class:hoverable={!!onclick}
-		style={wrapperStyle}
-		>{#if label}{label}:&nbsp;{/if}{displayLabel}{#if icon}<div class="icon">
-				<Icon {...icon} />
-			</div>{/if}</span
-	>
-{/snippet}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { Size } from '../Types/Internal/Size.js';
+	import type { BubbleProps } from './BubbleProps.js';
+	import Icon from './Icon.svelte';
+
+	// Per-size padding/typography. Only `Size.Large` has explicit overrides;
+	// other sizes fall back to the medium defaults handled in $derived blocks
+	// below. Replaced the previous one-key `Partial<Record<Size, string>>`
+	// lookup tables with a simple `size === Size.Large` branch.
+	const LARGE_HORIZONTAL_WITH_VALUE = '1rem';
+	const LARGE_HORIZONTAL_WITHOUT_VALUE = '1.25rem';
+	const LARGE_VERTICAL = '0.5rem';
+	const LARGE_FONT_SIZE = '1.12rem';
+	const LARGE_BORDER_RADIUS = '1.75rem';
+
+	const DEFAULT_VERTICAL = '0.18rem';
+	const DEFAULT_HORIZONTAL_WITH_VALUE = '0.5rem';
+	const DEFAULT_HORIZONTAL_WITHOUT_VALUE = '0.75rem';
+	const DEFAULT_FONT_SIZE = '1rem';
+</script>
+
+<script
+	lang="ts"
+	generics="T = unknown"
+>
+	// `BubbleProps<T>` is intentionally annotated with `<T>` even though
+	// the interface declares `T = unknown` as a default; the explicit
+	// substitution flows the generic from `<Bubble<MyType> ...>` consumers
+	// into the destructured `options` array type. The lint rule
+	// `@typescript-eslint/no-unnecessary-type-arguments` flags this as
+	// redundant when `T` resolves to `unknown` at the lint pass, hence
+	// the disable.
+	const {
+		options,
+		value,
+		colours,
+		label,
+		size = Size.Medium,
+		bold,
+		icon,
+		onclick,
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+	}: BubbleProps<T> = $props();
+
+	const isLarge = $derived(size === Size.Large);
+	const verticalPadding = $derived(isLarge ? LARGE_VERTICAL : DEFAULT_VERTICAL);
+	const horizontalPadding = $derived.by(() => {
+		if (value.length === 1) {
+			return isLarge ? LARGE_HORIZONTAL_WITH_VALUE : DEFAULT_HORIZONTAL_WITH_VALUE;
+		}
+
+		return isLarge ? LARGE_HORIZONTAL_WITHOUT_VALUE : DEFAULT_HORIZONTAL_WITHOUT_VALUE;
+	});
+	const fontSize = $derived(isLarge ? LARGE_FONT_SIZE : DEFAULT_FONT_SIZE);
+
+	// Precompute the label lookup once per `options`/`value` change.
+	const displayLabel = $derived(
+		options?.length ? (options.find((it) => it.value === value)?.label ?? value) : value
+	);
+
+	// Precompute the inline style string once per reactive input change.
+	const wrapperStyle = $derived.by(() => {
+		const colourPart = colours
+			? `background-color: ${colours.backgroundColour}; color: ${colours.colour};`
+			: '';
+		const radiusPart = isLarge ? `border-radius: ${LARGE_BORDER_RADIUS};` : '';
+		return `${colourPart} padding: var(--bubble-padding, ${verticalPadding} ${horizontalPadding}); font-size: ${fontSize}; ${radiusPart}`;
+	});
+</script>
+
+{#if onclick}
+	<button
+		class="contents"
+		{onclick}
+	>
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render bubble()}
+	</button>
+{:else}
+	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+	{@render bubble()}
+{/if}
+
+{#snippet bubble()}
+	<span
+		class="bubble"
+		class:bold
+		class:hoverable={!!onclick}
+		style={wrapperStyle}
+		>{#if label}{label}:&nbsp;{/if}{displayLabel}{#if icon}<div class="icon">
+				<Icon {...icon} />
+			</div>{/if}</span
+	>
+{/snippet}
+
 <style>button.contents {
   display: contents;
   cursor: pointer;
@@ -128,4 +128,4 @@
 }
 .bubble.bold {
   font-weight: 700;
-}</style>
+}</style>

package/dist/Components/Button.svelte

@@ -1,211 +1,211 @@
-<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';
-	import { Side } from '../Types/Internal/Side.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { Variant } from '../Types/Internal/Variant.js';
-	import type { ButtonProps } from './ButtonProps.js';
-	import Icon from './Icon.svelte';
-
-	const paddingSizesVertical: Record<Size, string> = {
-		[Size.Tiny]: '0.25rem',
-		[Size.Small]: '0.375rem',
-		[Size.MediumSmall]: '0.5rem',
-		// [Size.Medium]: '0.625rem',
-		[Size.Medium]: '0.90625rem',
-		[Size.MediumLarge]: '0.90625rem',
-		[Size.Large]: '0.925rem',
-		[Size.XLarge]: '1.0125rem',
-		[Size.DoubleXLarge]: '1.1rem',
-		[Size.TripleXLarge]: '1.2975rem',
-		[Size.FillWidth]: '0.75rem', // TODO decide
-		[Size.FillHeight]: '0', // TODO decide
-	};
-
-	// TODO alter the values for these if required
-	const paddingSizesHorizontal: Record<Size, string> = {
-		[Size.Tiny]: '0.4875rem',
-		[Size.Small]: '0.8rem',
-		[Size.MediumSmall]: '0.6625rem',
-		[Size.Medium]: '0.75rem',
-		[Size.MediumLarge]: '0.8375rem',
-		[Size.Large]: '0.925rem',
-		[Size.XLarge]: '1.0125rem',
-		[Size.DoubleXLarge]: '1.1rem',
-		[Size.TripleXLarge]: '1.2975rem',
-		[Size.FillWidth]: '0.75rem', // TODO decide
-		[Size.FillHeight]: '0.75rem', // TODO decide
-	};
-
-	// const fontSizes: Record<Size, string> = {
-	// 	[Size.Tiny]: '0.8rem',
-	// 	[Size.Small]: '0.85rem',
-	// 	[Size.MediumSmall]: '0.94rem',
-	// 	[Size.Medium]: '1rem',
-	// 	[Size.MediumLarge]: '1rem',
-	// 	[Size.Large]: '1.16rem',
-	// 	[Size.XLarge]: '1.32rem',
-	// 	[Size.DoubleXLarge]: '1.48rem',
-	// 	[Size.TripleXLarge]: '1.64rem',
-	// 	[Size.FillWidth]: '1rem', // TODO decide
-	// 	[Size.FillHeight]: '1rem' // TODO decide
-	// };
-
-	// TODO
-	const borderSizes: Record<Size, string> = {
-		[Size.Tiny]: '0.1875rem',
-		[Size.Small]: '0.1875rem',
-		[Size.MediumSmall]: '0.1875rem',
-		[Size.Medium]: '0.1875rem',
-		[Size.MediumLarge]: '0.1875rem',
-		[Size.Large]: '0.1875rem',
-		[Size.XLarge]: '0.1875rem',
-		[Size.DoubleXLarge]: '0.1875rem',
-		[Size.TripleXLarge]: '0.1875rem',
-		[Size.FillWidth]: '0.1875rem', // TODO decide
-		[Size.FillHeight]: '0.1875rem', // TODO decide
-	};
-
-	const iconColours: Record<ColourSet, Colour | undefined> = {
-		[ColourSet.Primary]: Colour['$ui-white'],
-		[ColourSet.CallToAction]: Colour['$ui-white'],
-		[ColourSet.Secondary]: Colour['$ui-blue-14'],
-		[ColourSet.Auxiliary]: Colour['$font-primary'],
-		[ColourSet.Warning]: Colour['$error-border'],
-		[ColourSet.Error]: Colour['$error-border'],
-		[ColourSet.Info]: Colour['$primary-blue-13'],
-	};
-</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,
-	}: ButtonProps = $props();
-	function onkeydown(e: KeyboardEvent): void {
-		passthrough(e);
-		if (document.activeElement === e.target) {
-			onkeydownProp?.(e);
-		}
-	}
-
-	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown so
-	// a rapidly-churning host (toolbar, table row) does not leave the global
-	// tooltip host painting against a node that no longer exists. The helper
-	// also exposes an `onclick` hook that we compose with the consumer's
-	// `onclick`. The extra `$effect` dismisses the tooltip when `disabled`
-	// flips to true mid-hover - the disabled element will not fire its own
-	// `mouseleave`.
-	const tt = useTooltip({
-		text: () => label,
-		arrow: () => side ?? Side.Left,
-	});
-	$effect(() => {
-		if (disabled) {
-			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>
-
+<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';
+	import { Side } from '../Types/Internal/Side.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Variant } from '../Types/Internal/Variant.js';
+	import type { ButtonProps } from './ButtonProps.js';
+	import Icon from './Icon.svelte';
+
+	const paddingSizesVertical: Record<Size, string> = {
+		[Size.Tiny]: '0.25rem',
+		[Size.Small]: '0.375rem',
+		[Size.MediumSmall]: '0.5rem',
+		// [Size.Medium]: '0.625rem',
+		[Size.Medium]: '0.90625rem',
+		[Size.MediumLarge]: '0.90625rem',
+		[Size.Large]: '0.925rem',
+		[Size.XLarge]: '1.0125rem',
+		[Size.DoubleXLarge]: '1.1rem',
+		[Size.TripleXLarge]: '1.2975rem',
+		[Size.FillWidth]: '0.75rem', // TODO decide
+		[Size.FillHeight]: '0', // TODO decide
+	};
+
+	// TODO alter the values for these if required
+	const paddingSizesHorizontal: Record<Size, string> = {
+		[Size.Tiny]: '0.4875rem',
+		[Size.Small]: '0.8rem',
+		[Size.MediumSmall]: '0.6625rem',
+		[Size.Medium]: '0.75rem',
+		[Size.MediumLarge]: '0.8375rem',
+		[Size.Large]: '0.925rem',
+		[Size.XLarge]: '1.0125rem',
+		[Size.DoubleXLarge]: '1.1rem',
+		[Size.TripleXLarge]: '1.2975rem',
+		[Size.FillWidth]: '0.75rem', // TODO decide
+		[Size.FillHeight]: '0.75rem', // TODO decide
+	};
+
+	// const fontSizes: Record<Size, string> = {
+	// 	[Size.Tiny]: '0.8rem',
+	// 	[Size.Small]: '0.85rem',
+	// 	[Size.MediumSmall]: '0.94rem',
+	// 	[Size.Medium]: '1rem',
+	// 	[Size.MediumLarge]: '1rem',
+	// 	[Size.Large]: '1.16rem',
+	// 	[Size.XLarge]: '1.32rem',
+	// 	[Size.DoubleXLarge]: '1.48rem',
+	// 	[Size.TripleXLarge]: '1.64rem',
+	// 	[Size.FillWidth]: '1rem', // TODO decide
+	// 	[Size.FillHeight]: '1rem' // TODO decide
+	// };
+
+	// TODO
+	const borderSizes: Record<Size, string> = {
+		[Size.Tiny]: '0.1875rem',
+		[Size.Small]: '0.1875rem',
+		[Size.MediumSmall]: '0.1875rem',
+		[Size.Medium]: '0.1875rem',
+		[Size.MediumLarge]: '0.1875rem',
+		[Size.Large]: '0.1875rem',
+		[Size.XLarge]: '0.1875rem',
+		[Size.DoubleXLarge]: '0.1875rem',
+		[Size.TripleXLarge]: '0.1875rem',
+		[Size.FillWidth]: '0.1875rem', // TODO decide
+		[Size.FillHeight]: '0.1875rem', // TODO decide
+	};
+
+	const iconColours: Record<ColourSet, Colour | undefined> = {
+		[ColourSet.Primary]: Colour['$ui-white'],
+		[ColourSet.CallToAction]: Colour['$ui-white'],
+		[ColourSet.Secondary]: Colour['$ui-blue-14'],
+		[ColourSet.Auxiliary]: Colour['$font-primary'],
+		[ColourSet.Warning]: Colour['$error-border'],
+		[ColourSet.Error]: Colour['$error-border'],
+		[ColourSet.Info]: Colour['$primary-blue-13'],
+	};
+</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,
+	}: ButtonProps = $props();
+	function onkeydown(e: KeyboardEvent): void {
+		passthrough(e);
+		if (document.activeElement === e.target) {
+			onkeydownProp?.(e);
+		}
+	}
+
+	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown so
+	// a rapidly-churning host (toolbar, table row) does not leave the global
+	// tooltip host painting against a node that no longer exists. The helper
+	// also exposes an `onclick` hook that we compose with the consumer's
+	// `onclick`. The extra `$effect` dismisses the tooltip when `disabled`
+	// flips to true mid-hover - the disabled element will not fire its own
+	// `mouseleave`.
+	const tt = useTooltip({
+		text: () => label,
+		arrow: () => side ?? Side.Left,
+	});
+	$effect(() => {
+		if (disabled) {
+			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>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -519,4 +519,4 @@ button.toolbar:not([disabled]).toggled.bottom {
 }
 button.toolbar:not([disabled]).toggled svg {
   fill: #259fc7;
-}</style>
+}</style>