@lavalogic/scoria 0.40.14 → 0.40.16

package/dist/Components/Bubble.svelte

@@ -1,103 +1,80 @@
-<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 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 } = $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 +105,4 @@
 }
 .bubble.bold {
   font-weight: 700;
-}</style>
+}</style>

package/dist/Components/Button.svelte

@@ -1,211 +1,178 @@
-<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);
-		}
+<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 Icon from "./Icon.svelte";
+const paddingSizesVertical = {
+	[Size.Tiny]: "0.25rem",
+	[Size.Small]: "0.375rem",
+	[Size.MediumSmall]: "0.5rem",
+	[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",
+	[Size.FillHeight]: "0"
+};
+// TODO alter the values for these if required
+const paddingSizesHorizontal = {
+	[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",
+	[Size.FillHeight]: "0.75rem"
+};
+// 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 = {
+	[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",
+	[Size.FillHeight]: "0.1875rem"
+};
+const iconColours = {
+	[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 } = $props();
+function onkeydown(e) {
+	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>
-
+}
+// 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 +486,4 @@ button.toolbar:not([disabled]).toggled.bottom {
 }
 button.toolbar:not([disabled]).toggled svg {
   fill: #259fc7;
-}</style>
+}</style>