@lavalogic/scoria 0.35.0 → 0.37.0

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,44 +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 type { AccordionGroupProps } from './AccordionGroupProps.js';
-
-	let {
-		// name: _name, //FIXME why is this not implemented?
-		tabs,
-		selected,
-		noRadius = false,
-		grow = false,
-	}: AccordionGroupProps<CommonDenominator> = $props();
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
->
-	{#each tabs as option (option)}
-		{@const isSelected = selected === option}
-		<AccordionGroupButton
-			{option}
-			{noRadius}
-			selected={isSelected}
-		/>
-		{#if isSelected}
-			<div transition:slide={{ duration: 200, 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;
@@ -82,4 +86,4 @@
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>

package/dist/Components/AccordionGroupButton.svelte

@@ -1,122 +1,122 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { devCatch } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
-	import Action from './Action.svelte';
-	import Icon from './Icon.svelte';
-
-	let {
-		option,
-		selected: isSelected,
-		noRadius = false,
-	}: AccordionGroupButtonProps<Args> = $props();
-
-	let disabled = $state(true);
-	let isVisible = $state(true);
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (typeof option.isValid === 'boolean') {
-			isValid = option.isValid;
-		} else {
-			option.isValid
-				?.then((v) => {
-					isValid = v;
-				})
-				.catch(devCatch);
-		}
-	});
-	$effect(() => {
-		if (typeof option.disabled === 'boolean') {
-			disabled = option.disabled;
-		} else if (option.disabled == undefined) {
-			disabled = false;
-		} else {
-			option.disabled
-				.then((v) => {
-					disabled = v;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	$effect(() => {
-		if (typeof option.visible === 'boolean') {
-			isVisible = option.visible;
-		} else if (option.visible == undefined) {
-			isVisible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					isVisible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-<div
-	class:isSelected
-	class="tab"
-	class:invalid={!isValid}
-	class:hidden={!isVisible}
-	class:no-radius={noRadius}
->
-	{#if typeof option.label == 'string'}
-		{option.label}
-	{:else}
-		{@render option.label()}
-	{/if}
-	<div class="spacer"></div>
-
-	{#if option.extras}
-		{@render option.extras()}
-	{/if}
-	{#if !isValid}
-		<Icon
-			name="error"
-			colour={Colour['$error-border']}
-			size={Size.Small}
-		/>
-	{/if}
-	<Action
-		icon={{ name: isSelected ? 'circle-minus' : 'circle-plus' }}
-		backgroundColour="transparent"
-		colourSet={ColourSet.Info}
-		{disabled}
-		onclick={() => {
-			option.onclick();
-		}}
-	/>
-</div>
-
-<style>.tab {
+<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;
+  border-bottom: solid 1px #cbd4da;
+}
+.tab-wrapper.hidden {
+  display: none !important;
+}
+
+.tab {
   color: #3a4952;
   font-size: 1rem;
   font-weight: 500;
-  padding: 1rem;
+  padding: 1.0005rem;
   border: none;
+  background: transparent;
   text-align: start;
+  cursor: pointer;
   display: flex;
   flex-flow: row nowrap;
   flex-shrink: 1;
   align-items: center;
   width: 100%;
   gap: 1.5rem;
-  position: relative;
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
-  background-color: #f4f7f9;
-  border-bottom: solid 1px #cbd4da;
 }
-.tab.hidden {
-  display: none !important;
+.tab[disabled] {
+  cursor: default;
+  opacity: 0.6;
 }
 .tab .spacer {
   margin: auto;
-}</style>
+}
+.tab .label {
+  text-align: start;
+}
+
+.extras {
+  position: absolute;
+  right: 4.5005rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  pointer-events: auto;
+}</style>

package/dist/Components/AccordionGroupButtonProps.d.ts

@@ -1,21 +1,40 @@
+import type { AsyncFlag } from '../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
-import type { IconProps } from './IconProps.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for AccordionGroupButton, the header row of an accordion section.
+ */
 export interface AccordionGroupButtonProps<Args> {
+    /** The section descriptor whose header is being rendered. */
     option: AccordionGroupOption<Args>;
+    /** Whether this section is currently expanded. */
     selected: boolean;
+    /** Strip the corner radius for sections joined to other surfaces. */
     noRadius?: boolean;
 }
+/**
+ * Describes one expandable section inside AccordionGroup. The header
+ * `label` may be either a plain string or a Snippet for richer markup.
+ */
 export interface AccordionGroupOption<Args> {
+    /** Header label. String values are rendered directly; snippets render via `@render`. */
     label: string | Snippet;
+    /** Body content. Receives `args` so the parent can pass typed context. */
     content: Snippet<[Args]>;
+    /** Optional extra snippet rendered next to the header before the expand action. */
     extras?: Snippet;
+    /** Invoked when the user expands or collapses this section. */
     onclick: () => void;
+    /** Args forwarded to `content`. */
     args: Args;
-    iconLeft?: IconProps;
-    iconRight?: IconProps;
-    isValid?: boolean | Promise<boolean>;
-    /** default false */
-    disabled?: boolean | Promise<boolean>;
-    /** default true */
-    visible?: boolean | Promise<boolean>;
+    /** Icon rendered to the left of the header. */
+    iconLeft?: PartialIconProps;
+    /** Icon rendered to the right of the header. */
+    iconRight?: PartialIconProps;
+    /** AsyncFlag of a boolean. Section is rendered invalid when this resolves to false. */
+    isValid?: AsyncFlag<boolean>;
+    /** AsyncFlag of a boolean. Disables the expand action when true. Defaults to false. */
+    disabled?: AsyncFlag<boolean>;
+    /** AsyncFlag of a boolean. Hides the section when this resolves to false. Defaults to true. */
+    visible?: AsyncFlag<boolean>;
 }

package/dist/Components/AccordionGroupProps.d.ts

@@ -1,8 +1,16 @@
 import type { TabOption } from '../Types/Internal/TabOption.js';
+/**
+ * Props for AccordionGroup, a stacked list of expandable sections.
+ */
 export interface AccordionGroupProps<CommonDenominator> {
+    /** Optional name used for future history persistence (not currently wired). */
     name?: string;
+    /** Strip the outer border radius. */
     noRadius?: boolean;
+    /** Stretch to fill the parent's flex axis. */
     grow?: boolean;
-    tabs: Array<TabOption<CommonDenominator>>;
-    selected: TabOption<CommonDenominator> | undefined;
+    /** The sections to render. Keyed by `option.label`. */
+    tabs: ReadonlyArray<TabOption<CommonDenominator>>;
+    /** Currently expanded section, matched by reference. */
+    selected?: TabOption<CommonDenominator>;
 }