@lavalogic/scoria 0.37.44 → 0.37.46

package/README.md

@@ -1,58 +1,58 @@
-# Svelte library
-
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/Components/AccordionGroup.svelte

@@ -1,48 +1,48 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
->
-	import AccordionGroupButton from './AccordionGroupButton.svelte';
-
-	import { cubicOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
-	import type { AccordionGroupProps } from './AccordionGroupProps.js';
-
-	let {
-		// name: _name, //FIXME why is this not implemented?
-		tabs,
-		selected,
-		noRadius = false,
-		grow = false,
-	}: AccordionGroupProps<CommonDenominator> = $props();
-
-	const reducedMotion = usePrefersReducedMotion();
-	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
->
-	{#each tabs as option (option.label)}
-		{@const isSelected = selected === option}
-		<AccordionGroupButton
-			{option}
-			{noRadius}
-			selected={isSelected}
-		/>
-		{#if isSelected}
-			<div transition:slide={{ duration: slideDuration, easing: cubicOut }}>
-				{@render selected.content(selected.args)}
-			</div>
-		{/if}
-	{/each}
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>
+	import AccordionGroupButton from './AccordionGroupButton.svelte';
+
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
+	import type { AccordionGroupProps } from './AccordionGroupProps.js';
+
+	let {
+		// name: _name, //FIXME why is this not implemented?
+		tabs,
+		selected,
+		noRadius = false,
+		grow = false,
+	}: AccordionGroupProps<CommonDenominator> = $props();
+
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+>
+	{#each tabs as option (option.label)}
+		{@const isSelected = selected === option}
+		<AccordionGroupButton
+			{option}
+			{noRadius}
+			selected={isSelected}
+		/>
+		{#if isSelected}
+			<div transition:slide={{ duration: slideDuration, easing: cubicOut }}>
+				{@render selected.content(selected.args)}
+			</div>
+		{/if}
+	{/each}
+</div>
+
 <style>.wrapper {
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   border-radius: 4px;
@@ -86,4 +86,4 @@
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>

package/dist/Components/AccordionGroupButton.svelte

@@ -1,78 +1,78 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
-	import Icon from './Icon.svelte';
-
-	const {
-		option,
-		selected: isSelected,
-		noRadius = false,
-	}: AccordionGroupButtonProps<Args> = $props();
-
-	const isValid = useAsyncFlag(() => option.isValid, true);
-	const disabled = useAsyncFlag(() => option.disabled, false);
-	const isVisible = useAsyncFlag(() => option.visible, true);
-</script>
-
-<!--
-	Single-button row: the whole header is one interactive element, with the
-	expand chevron rendered as decorative content of that same button. This
-	resolves the previous a11y issue (a nested toggle inside the row read as
-	two interactive elements). The `extras` snippet is intentionally placed
-	OUTSIDE the button so that consumers passing interactive content into
-	`extras` don't create nested-button markup.
--->
-<div
-	class="tab-wrapper"
-	class:isSelected
-	class:invalid={!isValid.value}
-	class:hidden={!isVisible.value}
-	class:no-radius={noRadius}
->
-	<button
-		type="button"
-		class="tab"
-		disabled={disabled.value}
-		aria-expanded={isSelected}
-		aria-label={isSelected ? 'Collapse section' : 'Expand section'}
-		onclick={() => {
-			option.onclick();
-		}}
-	>
-		{#if typeof option.label == 'string'}
-			<span class="label">{option.label}</span>
-		{:else}
-			{@render option.label()}
-		{/if}
-		<div class="spacer"></div>
-
-		{#if !isValid.value}
-			<Icon
-				name="error"
-				colour={Colour['$error-border']}
-				size={Size.Small}
-			/>
-		{/if}
-		<Icon
-			name={isSelected ? 'circle-minus' : 'circle-plus'}
-			colour={Colour['$primary-blue-13']}
-			size={Size.Medium}
-		/>
-	</button>
-	{#if option.extras}
-		<div class="extras">
-			{@render option.extras()}
-		</div>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
+	import Icon from './Icon.svelte';
+
+	const {
+		option,
+		selected: isSelected,
+		noRadius = false,
+	}: AccordionGroupButtonProps<Args> = $props();
+
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const isVisible = useAsyncFlag(() => option.visible, true);
+</script>
+
+<!--
+	Single-button row: the whole header is one interactive element, with the
+	expand chevron rendered as decorative content of that same button. This
+	resolves the previous a11y issue (a nested toggle inside the row read as
+	two interactive elements). The `extras` snippet is intentionally placed
+	OUTSIDE the button so that consumers passing interactive content into
+	`extras` don't create nested-button markup.
+-->
+<div
+	class="tab-wrapper"
+	class:isSelected
+	class:invalid={!isValid.value}
+	class:hidden={!isVisible.value}
+	class:no-radius={noRadius}
+>
+	<button
+		type="button"
+		class="tab"
+		disabled={disabled.value}
+		aria-expanded={isSelected}
+		aria-label={isSelected ? 'Collapse section' : 'Expand section'}
+		onclick={() => {
+			option.onclick();
+		}}
+	>
+		{#if typeof option.label == 'string'}
+			<span class="label">{option.label}</span>
+		{:else}
+			{@render option.label()}
+		{/if}
+		<div class="spacer"></div>
+
+		{#if !isValid.value}
+			<Icon
+				name="error"
+				colour={Colour['$error-border']}
+				size={Size.Small}
+			/>
+		{/if}
+		<Icon
+			name={isSelected ? 'circle-minus' : 'circle-plus'}
+			colour={Colour['$primary-blue-13']}
+			size={Size.Medium}
+		/>
+	</button>
+	{#if option.extras}
+		<div class="extras">
+			{@render option.extras()}
+		</div>
+	{/if}
+</div>
+
 <style>.tab-wrapper {
   position: relative;
   background-color: #f4f7f9;
@@ -119,4 +119,4 @@
   align-items: center;
   gap: 1.5rem;
   pointer-events: auto;
-}</style>
+}</style>

package/dist/Components/Action.svelte

@@ -1,138 +1,138 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { useTooltip } from '../Helpers/useTooltip.svelte.js';
-	import { Shape } from '../Types/Internal/Shape.js';
-	import { Side } from '../Types/Internal/Side.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { ColourSet } from '../scss/colours.js';
-	import type { ActionProps } from './ActionProps.js';
-	import Icon from './Icon.svelte';
-
-	const paddings: Record<Shape, Record<Size, number>> = {
-		[Shape.Rectangle]: {
-			[Size.Tiny]: 0.125,
-			[Size.Small]: 0.1875,
-			[Size.MediumSmall]: 0.3125,
-			[Size.Medium]: 0.375,
-			[Size.MediumLarge]: 0.5,
-			[Size.Large]: 0.625,
-			[Size.XLarge]: 0.6875,
-			[Size.DoubleXLarge]: 0.8125,
-			[Size.TripleXLarge]: 0.875,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1,
-		},
-		[Shape.Circle]: {
-			[Size.Tiny]: 0.1875,
-			[Size.Small]: 0.5,
-			[Size.MediumSmall]: 0.875,
-			[Size.Medium]: 1.0625,
-			[Size.MediumLarge]: 1.375,
-			[Size.Large]: 1.75,
-			[Size.XLarge]: 1.9375,
-			[Size.DoubleXLarge]: 2.25,
-			[Size.TripleXLarge]: 2.4375,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1,
-		},
-	};
-</script>
-
-<script lang="ts">
-	const {
-		icon,
-		id,
-		border = false,
-		shape = Shape.Rectangle,
-		label,
-		colourSet = ColourSet.Secondary,
-		size = Size.Medium,
-		paddingSize,
-		type = 'button',
-		noTabIndex = false,
-		disabled,
-		backgroundColour,
-		hoverBackgroundColour,
-		'data-type': dataType,
-		onfocus,
-		onblur,
-		onclick,
-		onkeydown: onkeydownProp,
-		style = '',
-		side,
-		'aria-expanded': ariaExpanded,
-		'aria-controls': ariaControls,
-	}: ActionProps = $props();
-
-	const iconSize: Size = $derived(icon.size ?? size);
-
-	const pad: string = $derived.by(() => {
-		const padSize = paddingSize ?? size;
-		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
-	});
-
-	function onkeydown(e: KeyboardEvent) {
-		passthrough(e);
-
-		if (document.activeElement === e.target) {
-			onkeydownProp?.(e);
-		}
-	}
-
-	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown.
-	// Action lives inside short-lived hosts (table rows, modal panels,
-	// accordion content) so the cleanup is load-bearing - without it,
-	// churn leaves the global tooltip painting against a node that no
-	// longer exists.
-	const tt = useTooltip({
-		text: () => label,
-		arrow: () => side ?? Side.Left,
-	});
-</script>
-
-<button
-	{id}
-	onmouseenter={tt.onmouseenter}
-	onmouseleave={tt.onmouseleave}
-	tabindex={noTabIndex ? -1 : undefined}
-	data-type={dataType}
-	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
-		? `--background-colour: ${backgroundColour};`
-		: ``} {hoverBackgroundColour
-		? `--hover-background-colour: ${hoverBackgroundColour};`
-		: ``}{style}"
-	class:border
-	class:circular={shape === Shape.Circle}
-	class:primary={colourSet === ColourSet.Primary}
-	class:secondary={colourSet === ColourSet.Secondary}
-	class:auxiliary={colourSet === ColourSet.Auxiliary}
-	class:info={colourSet === ColourSet.Info}
-	class:error={colourSet === ColourSet.Error}
-	class:fill-width={size === Size.FillWidth}
-	class:fill-height={size === Size.FillHeight}
-	{type}
-	{disabled}
-	{onfocus}
-	{onblur}
-	{onkeydown}
-	onclick={(e) => {
-		tt.onclick();
-		onclick?.(e);
-	}}
-	aria-label={label}
-	aria-expanded={ariaExpanded}
-	aria-controls={ariaControls}
-	><Icon
-		{...icon}
-		size={iconSize}
-	/></button
->
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { useTooltip } from '../Helpers/useTooltip.svelte.js';
+	import { Shape } from '../Types/Internal/Shape.js';
+	import { Side } from '../Types/Internal/Side.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { ColourSet } from '../scss/colours.js';
+	import type { ActionProps } from './ActionProps.js';
+	import Icon from './Icon.svelte';
+
+	const paddings: Record<Shape, Record<Size, number>> = {
+		[Shape.Rectangle]: {
+			[Size.Tiny]: 0.125,
+			[Size.Small]: 0.1875,
+			[Size.MediumSmall]: 0.3125,
+			[Size.Medium]: 0.375,
+			[Size.MediumLarge]: 0.5,
+			[Size.Large]: 0.625,
+			[Size.XLarge]: 0.6875,
+			[Size.DoubleXLarge]: 0.8125,
+			[Size.TripleXLarge]: 0.875,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1,
+		},
+		[Shape.Circle]: {
+			[Size.Tiny]: 0.1875,
+			[Size.Small]: 0.5,
+			[Size.MediumSmall]: 0.875,
+			[Size.Medium]: 1.0625,
+			[Size.MediumLarge]: 1.375,
+			[Size.Large]: 1.75,
+			[Size.XLarge]: 1.9375,
+			[Size.DoubleXLarge]: 2.25,
+			[Size.TripleXLarge]: 2.4375,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1,
+		},
+	};
+</script>
+
+<script lang="ts">
+	const {
+		icon,
+		id,
+		border = false,
+		shape = Shape.Rectangle,
+		label,
+		colourSet = ColourSet.Secondary,
+		size = Size.Medium,
+		paddingSize,
+		type = 'button',
+		noTabIndex = false,
+		disabled,
+		backgroundColour,
+		hoverBackgroundColour,
+		'data-type': dataType,
+		onfocus,
+		onblur,
+		onclick,
+		onkeydown: onkeydownProp,
+		style = '',
+		side,
+		'aria-expanded': ariaExpanded,
+		'aria-controls': ariaControls,
+	}: ActionProps = $props();
+
+	const iconSize: Size = $derived(icon.size ?? size);
+
+	const pad: string = $derived.by(() => {
+		const padSize = paddingSize ?? size;
+		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		passthrough(e);
+
+		if (document.activeElement === e.target) {
+			onkeydownProp?.(e);
+		}
+	}
+
+	// Shared tooltip lifecycle: hover handlers plus unmount-time teardown.
+	// Action lives inside short-lived hosts (table rows, modal panels,
+	// accordion content) so the cleanup is load-bearing - without it,
+	// churn leaves the global tooltip painting against a node that no
+	// longer exists.
+	const tt = useTooltip({
+		text: () => label,
+		arrow: () => side ?? Side.Left,
+	});
+</script>
+
+<button
+	{id}
+	onmouseenter={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
+	tabindex={noTabIndex ? -1 : undefined}
+	data-type={dataType}
+	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
+		? `--background-colour: ${backgroundColour};`
+		: ``} {hoverBackgroundColour
+		? `--hover-background-colour: ${hoverBackgroundColour};`
+		: ``}{style}"
+	class:border
+	class:circular={shape === Shape.Circle}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary={colourSet === ColourSet.Secondary}
+	class:auxiliary={colourSet === ColourSet.Auxiliary}
+	class:info={colourSet === ColourSet.Info}
+	class:error={colourSet === ColourSet.Error}
+	class:fill-width={size === Size.FillWidth}
+	class:fill-height={size === Size.FillHeight}
+	{type}
+	{disabled}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	onclick={(e) => {
+		tt.onclick();
+		onclick?.(e);
+	}}
+	aria-label={label}
+	aria-expanded={ariaExpanded}
+	aria-controls={ariaControls}
+	><Icon
+		{...icon}
+		size={iconSize}
+	/></button
+>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -228,4 +228,4 @@ button.circular {
 button {
   padding: var(--pad);
   cursor: pointer;
-}</style>
+}</style>

package/dist/Components/ActionProps.d.ts

@@ -15,12 +15,8 @@ export interface ActionProps {
     disabled?: boolean;
     noTabIndex?: boolean;
     /**
-     * Background colour drawn from the `Colour` palette. Pass values
-     * like `Colour['$transparent-0']` or `Colour['$brand-dark']`.
-     *
-     * BREAKING (vNext): was `string`; now must be a `Colour` value.
-     * Migrate ad-hoc CSS colour strings (e.g. `'transparent'`) to the
-     * matching palette entry.
+     * Background colour drawn from the `Colour` palette. Pass values like
+     * `Colour['$transparent-0']` or `Colour['$brand-dark']`.
      */
     backgroundColour?: Colour | undefined;
     /** Hover-state background colour; see {@link backgroundColour}. */