@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/Button.svelte

@@ -1,199 +1,199 @@
-<svelte:options runes />
-
-<script module lang="ts">
-	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../Delay/Delay.js';
-	import { passthrough } from '../Helpers/Helpers.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 { getContext } from 'svelte';
-	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]: undefined,
-		[ColourSet.Auxiliary]: undefined,
-		[ColourSet.Warning]: Colour['$error-border'],
-		[ColourSet.Error]: Colour['$error-border'],
-		[ColourSet.Info]: Colour['$error-border']
-	};
-</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,
-		children,
-		relative,
-		noninteractive
-	}: ButtonProps = $props();
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-</script>
-
-<!-- title={label} -->
-<!-- style="--font-size: {fontSizes[
-		size
-	]};" -->
-<button
-	onmouseenter={(e) => {
-		if (label) {
-			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
-			tooltipContext.showTooltip({
-				text: label,
-				arrow: side ?? Side.Left,
-				delay: Delay.Default,
-				rect
-			});
-		}
-	}}
-	onmouseleave={() => {
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-	}}
-	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) => {
-		// e.stopImmediatePropagation();
-		// if (dev) {
-		// 	// console.trace();
-		// }
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-		onclick?.(e);
-	}}
-	{onfocus}
-	{onblur}
-	onkeydown={passthrough}
->
-	<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 { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../Delay/Delay.js';
+	import { passthrough } from '../Helpers/Helpers.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 { getContext } from 'svelte';
+	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]: undefined,
+		[ColourSet.Auxiliary]: undefined,
+		[ColourSet.Warning]: Colour['$error-border'],
+		[ColourSet.Error]: Colour['$error-border'],
+		[ColourSet.Info]: Colour['$error-border']
+	};
+</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,
+		children,
+		relative,
+		noninteractive
+	}: ButtonProps = $props();
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+<!-- title={label} -->
+<!-- style="--font-size: {fontSizes[
+		size
+	]};" -->
+<button
+	onmouseenter={(e) => {
+		if (label) {
+			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
+			tooltipContext.showTooltip({
+				text: label,
+				arrow: side ?? Side.Left,
+				delay: Delay.Default,
+				rect
+			});
+		}
+	}}
+	onmouseleave={() => {
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+	}}
+	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) => {
+		// e.stopImmediatePropagation();
+		// if (dev) {
+		// 	// console.trace();
+		// }
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+		onclick?.(e);
+	}}
+	{onfocus}
+	{onblur}
+	onkeydown={passthrough}
+>
+	<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;
@@ -507,4 +507,4 @@ button.toolbar:not([disabled]).toggled.bottom {
 }
 button.toolbar:not([disabled]).toggled svg {
   fill: #259fc7;
-}</style>
+}</style>

package/dist/Components/Checkbox.svelte

@@ -1,70 +1,70 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { ChangeEventHandler } from 'svelte/elements';
-	import Icon from './Icon.svelte';
-	import type { IconProps } from './IconProps.js';
-
-	export interface CheckboxProps {
-		value: boolean;
-		id?: string;
-		icon?: IconProps;
-		size?: Size;
-		label?: string;
-		disabled?: boolean;
-		onchange?: ChangeEventHandler<HTMLInputElement>;
-	}
-</script>
-
-<script lang="ts">
-	let {
-		value = false,
-		id = generateShortUUID(),
-		icon,
-		size,
-		label,
-		disabled,
-		onchange
-	}: CheckboxProps = $props();
-</script>
-
-{#if icon}
-	<!-- style="--inner-checkbox-container-width: {(size != undefined ? widths[size] : undefined) ??
-			'2.75rem'};" -->
-	<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">
-		<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 { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { ChangeEventHandler } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+	import type { IconProps } from './IconProps.js';
+
+	export interface CheckboxProps {
+		value: boolean;
+		id?: string;
+		icon?: IconProps;
+		size?: Size;
+		label?: string;
+		disabled?: boolean;
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = false,
+		id = generateShortUUID(),
+		icon,
+		size,
+		label,
+		disabled,
+		onchange
+	}: CheckboxProps = $props();
+</script>
+
+{#if icon}
+	<!-- style="--inner-checkbox-container-width: {(size != undefined ? widths[size] : undefined) ??
+			'2.75rem'};" -->
+	<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">
+		<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 {
   display: flex;
   flex-flow: row nowrap;
@@ -148,4 +148,4 @@ label {
   display: block;
   cursor: pointer;
   position: relative;
-}</style>
+}</style>