@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/HorizontalTabGroup.svelte

@@ -1,86 +1,88 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
->
-	import { ellipses } from '../Helpers/Helpers.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
-	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
-	import TextInput from './TextInput.svelte';
-	let {
-		// name: _name, //FIXME why is this not implemented?
-		tabComponent,
-		tabs,
-		selected,
-		noRadius = false,
-		grow = false,
-		filterable = false,
-		filterFn,
-	}: HorizontalTabGroupProps<CommonDenominator> = $props();
-
-	// svelte-ignore state_referenced_locally
-	let filteredTabs = $state(tabs);
-
-	$effect(() => {
-		const term = searchValue;
-		const id = setTimeout(() => {
-			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
-		}, 300);
-		return () => {
-			clearTimeout(id);
-		};
-	});
-
-	let searchValue = $state('');
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
->
-	<div class="tabs">
-		<div class="sticky">
-			{#if filterable}
-				<div class="searchbar">
-					<TextInput
-						bind:value={searchValue}
-						placeholder="Search any keyword to find matches{ellipses}"
-						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
-					/>
-				</div>
-			{/if}
-		</div>
-		{#if tabComponent}
-			{#each filteredTabs as option (option)}
-				{@render tabComponent(option, selected === option)}
-			{/each}
-		{:else}
-			{#each filteredTabs as option (option)}
-				<HorizontalTabGroupButton
-					{option}
-					noRadius={noRadius || filterable}
-					selected={selected === option}
-				/>
-			{/each}
-		{/if}
-	</div>
-
-	<div class="content">
-		{#if selected}
-			{@render selected.content(selected.args)}
-		{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>
+	import { ellipses } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
+	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
+	import TextInput from './TextInput.svelte';
+	const {
+		tabComponent,
+		tabs,
+		selected,
+		noRadius = false,
+		grow = false,
+		filterable = false,
+		filterFn,
+	}: HorizontalTabGroupProps<CommonDenominator> = $props();
+
+	let searchValue = $state('');
+
+	// Debounce only the search value, not the tabs array. This way a parent
+	// rebuilding `tabs` shows the new list immediately, while typing still
+	// pays the 300ms cost.
+	let debouncedSearch = $state('');
+	$effect(() => {
+		const term = searchValue;
+		const id = setTimeout(() => {
+			debouncedSearch = term;
+		}, 300);
+		return () => {
+			clearTimeout(id);
+		};
+	});
+
+	const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+>
+	<div class="tabs">
+		<div class="sticky">
+			{#if filterable}
+				<div class="searchbar">
+					<TextInput
+						bind:value={searchValue}
+						placeholder="Search any keyword to find matches{ellipses}"
+						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+					/>
+				</div>
+			{/if}
+		</div>
+		{#if tabComponent}
+			{#each filteredTabs as option (option.label)}
+				{@render tabComponent(option, selected?.label === option.label)}
+			{/each}
+		{:else}
+			{#each filteredTabs as option (option.label)}
+				<HorizontalTabGroupButton
+					{option}
+					noRadius={noRadius || filterable}
+					selected={selected?.label === option.label}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	<div class="content">
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{/if}
+	</div>
+</div>
+
 <style>.searchbar {
   display: flex;
   width: 100%;
   padding: 0.5rem;
   background-color: #ffffff;
-  min-width: 330px;
+  min-width: 20.625rem;
 }
 
 .wrapper {
@@ -125,4 +127,4 @@
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -1,98 +1,46 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { devCatch } from '../Helpers/Helpers.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
-
-	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
-
-	let disabled = $state(true);
-	let visible = $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') {
-			visible = option.visible;
-		} else if (option.visible == undefined) {
-			visible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	class:invalid={!isValid}
-	{disabled}
-	class:hidden={!visible}
-	class:no-radius={noRadius}
->
-	<div class="selected-marker"></div>
-	<!-- <Icon
-		name="nothing"
-		colour={Colour['$brand-primary']}
-		size={Size.Small}
-		{...option.iconLeft}
-	/> -->
-
-	{option.label}
-	{#if !isValid}
-		<Icon
-			name="error"
-			colour={Colour['$error-border']}
-			size={Size.Small}
-		/>
-		<!-- {:else}
-		<Icon
-			name="nothing"
-			colour={Colour['$brand-primary']}
-			size={Size.Small}
-			{...option.iconRight}
-		/> -->
-	{/if}
-</button>
-
+<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 Icon from './Icon.svelte';
+	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+
+	const { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
+
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const visible = useAsyncFlag(() => option.visible, true);
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid.value}
+	disabled={disabled.value}
+	class:hidden={!visible.value}
+	class:no-radius={noRadius}
+>
+	<div class="selected-marker"></div>
+
+	{option.label}
+	{#if !isValid.value}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.Small}
+		/>
+	{/if}
+</button>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -102,7 +50,7 @@
   cursor: pointer;
   font-size: 1rem;
   font-weight: 500;
-  padding: 1rem;
+  padding: 1.0005rem;
   background-color: #ffffff;
   border: none;
   text-align: start;
@@ -142,12 +90,12 @@
 .tab:not(.no-radius):first-child {
   border-radius: 4px 0 0 0;
 }
-.tab:hover, .tab.selected:hover, .tab.invalid:hover {
-  background-color: #f4f7f9;
+.tab.invalid, .tab:hover.invalid, .tab.selected:hover.invalid {
+  color: #aa1414;
 }
-.tab.invalid .selected-marker {
-  background-color: #aa1414 !important;
+.tab.invalid .selected-marker, .tab:hover.invalid .selected-marker, .tab.selected:hover.invalid .selected-marker {
+  background-color: #aa1414;
 }
-.tab.invalid {
-  color: #aa1414 !important;
-}</style>
+.tab:hover, .tab.selected:hover, .tab.invalid:hover {
+  background-color: #f4f7f9;
+}</style>

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -1,14 +1,27 @@
 import type { TabOption } from '../Types/Internal/TabOption.js';
 import type { Snippet } from 'svelte';
+/**
+ * Discriminated union props for HorizontalTabGroup. Either the search bar
+ * is disabled and `filterFn` cannot be supplied, or `filterable: true` and
+ * `filterFn` is required.
+ */
 export type HorizontalTabGroupProps<CommonDenominator> = HorizontalTabGroupPropsWithSearch<CommonDenominator> | HorizontalTabGroupPropsWithoutSearch<CommonDenominator>;
 interface HorizontalTabGroupPropsBase<CommonDenominator> {
+    /** Optional name for future persistence (not currently wired). */
     name?: string;
-    tabComponent?: Snippet<[TabOption<CommonDenominator>, boolean]>;
+    /** Custom snippet that renders each tab. Receives the option and a `selected` boolean. */
+    tabComponent?: Snippet<[option: TabOption<CommonDenominator>, selected: boolean]>;
+    /** Strip the outer border radius. */
     noRadius?: boolean;
+    /** Stretch to fill the parent's flex axis. */
     grow?: boolean;
-    tabs: Array<TabOption<CommonDenominator>>;
+    /** The tabs to render. Keyed by `option.label`. */
+    tabs: ReadonlyArray<TabOption<CommonDenominator>>;
+    /** Currently selected tab, matched by reference. */
     selected: TabOption<CommonDenominator> | undefined;
+    /** Render a search box above the tabs. */
     filterable?: boolean;
+    /** Predicate used to filter tabs on each keystroke (debounced by 300ms). */
     filterFn?: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
 }
 export interface HorizontalTabGroupPropsWithoutSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {

package/dist/Components/Icon.svelte

@@ -1,109 +1,144 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { Variant } from '../Types/Internal/Variant.js';
-	import type { IconProps } from './IconProps.js';
-	import { icons } from './Icons.js';
-
-	const sizes: Record<Size, string> = {
-		[Size.Tiny]: '8',
-		[Size.Small]: '16',
-		[Size.MediumSmall]: '20',
-		[Size.Medium]: '24',
-		[Size.MediumLarge]: '28',
-		[Size.Large]: '34',
-		[Size.XLarge]: '36',
-		[Size.DoubleXLarge]: '40',
-		[Size.TripleXLarge]: '40',
-		[Size.FillHeight]: '24',
-		[Size.FillWidth]: '24'
-	};
-</script>
-
-<script lang="ts">
-	const {
-		name,
-		size = Size.Medium,
-		label,
-		float = false,
-		variant,
-		invisible,
-		clickable = false,
-		clickableType = 'button',
-		zindex = 1,
-		anchorX,
-		anchorY,
-		left,
-		right,
-		top,
-		bottom,
-		colour,
-		onclick,
-		rotate
-	}: IconProps = $props();
-
-	const dim = $derived(sizes[size]);
-	const displayIcon = $derived(icons[name]);
-</script>
-
-{#if clickable}
-	<button
-		class="icon"
-		type={clickableType}
-		class:header-icon={variant === Variant.HeaderIcon}
-		class:fill-width={size === Size.FillWidth}
-		class:fill-height={size === Size.FillHeight}
-		style="--zindex: {zindex}; --left: {left}; --right: {right}; --top: {top}; --bottom: {bottom}; --anchorX: {anchorX}; --anchorY: {anchorY}; {colour
-			? `--colour: ${colour};`
-			: ''}"
-		class:absolute={float}
-		{onclick}
-		class:rotate
-		onkeydown={passthrough}
-		aria-label={label ?? name.toString()}
-	>
-		{#if displayIcon}
-			<!--  SECURITY both displayIcon and its svg property have been frozen. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze -->
-			<svg width={dim} height={dim} viewBox="0 0 {displayIcon.box} {displayIcon.box}"
-				>{@html displayIcon.svg}</svg
-			>
-		{:else}
-			<span>Invalid Icon</span>
-		{/if}
-	</button>
-{:else if displayIcon}
-	<!--  SECURITY both displayIcon and its svg property have been frozen. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze -->
-	<svg
-		class="icon"
-		style="--zindex: {zindex}; --left: {left}; --right: {right}; --top: {top}; --bottom: {bottom}; --anchorX: {anchorX}; --anchorY: {anchorY}; {colour
-			? `--colour: ${colour};`
-			: ''}"
-		class:absolute={float}
-		class:invisible
-		class:header-icon={variant === Variant.HeaderIcon}
-		class:fill-width={size === Size.FillWidth}
-		class:fill-height={size === Size.FillHeight}
-		width={dim}
-		height={dim}
-		class:rotate
-		viewBox="0 0 {displayIcon.box} {displayIcon.box}">{@html displayIcon.svg}</svg
-	>
-{:else}
-	<span>Invalid Icon</span>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Variant } from '../Types/Internal/Variant.js';
+	import type { IconProps } from './IconProps.js';
+	import { icons } from './Icons.js';
+
+	const sizes: Record<Size, string> = {
+		[Size.Tiny]: '8',
+		[Size.Small]: '16',
+		[Size.MediumSmall]: '20',
+		[Size.Medium]: '24',
+		[Size.MediumLarge]: '28',
+		[Size.Large]: '34',
+		[Size.XLarge]: '36',
+		[Size.DoubleXLarge]: '40',
+		[Size.TripleXLarge]: '40',
+		[Size.FillHeight]: '24',
+		[Size.FillWidth]: '24',
+	};
+
+	// SECURITY invariant: the `icons` map must remain frozen. The component
+	// inlines `displayIcon.svg` via `{@html}` and relies on the freeze to
+	// guarantee no runtime mutation of the SVG payload (XSS sink otherwise).
+	// This runtime check fires once at module evaluation; if it ever fails,
+	// the build/runtime should be considered compromised.
+	if (!Object.isFrozen(icons)) {
+		throw new Error('Icon: icons map is not frozen. Refusing to inline SVG fragments via {@html}.');
+	}
+</script>
+
+<script lang="ts">
+	const {
+		name,
+		size = Size.Medium,
+		label,
+		float = false,
+		variant,
+		invisible,
+		clickable = false,
+		clickableType = 'button',
+		zindex = 1,
+		anchorX,
+		anchorY,
+		left,
+		right,
+		top,
+		bottom,
+		colour,
+		onclick,
+		rotate,
+	}: IconProps = $props();
+
+	const dim = $derived(sizes[size]);
+	const displayIcon = $derived(icons[name]);
+
+	// Build the inline style string once per reactive input change rather
+	// than on every render. Cheap allocation reduction for the many-Icon-
+	// per-screen case (toolbars, table cells, status indicators).
+	const styleString = $derived(
+		`--zindex: ${zindex.toString()}; --left: ${left ?? ''}; --right: ${right ?? ''}; --top: ${top ?? ''}; --bottom: ${bottom ?? ''}; --anchorX: ${anchorX ?? ''}; --anchorY: ${anchorY ?? ''};${colour ? ` --colour: ${colour};` : ''}`
+	);
+
+	const ariaLabel = $derived(label ?? name.toString());
+</script>
+
+{#if clickable}
+	<button
+		class="icon"
+		type={clickableType}
+		class:header-icon={variant === Variant.HeaderIcon}
+		class:fill-width={size === Size.FillWidth}
+		class:fill-height={size === Size.FillHeight}
+		style={styleString}
+		class:absolute={float}
+		{onclick}
+		class:rotate
+		onkeydown={passthrough}
+		aria-label={ariaLabel}
+	>
+		{#if displayIcon}
+			<!--  SECURITY both displayIcon and its svg property have been frozen. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze -->
+			<svg
+				width={dim}
+				height={dim}
+				viewBox="0 0 {displayIcon.box} {displayIcon.box}"
+			>
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				{@html displayIcon.svg}</svg
+			>
+		{:else}
+			<span
+				aria-hidden="true"
+				class="invalid-icon"
+			></span>
+		{/if}
+	</button>
+{:else if displayIcon}
+	<!--  SECURITY both displayIcon and its svg property have been frozen. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze -->
+	<svg
+		class="icon"
+		style={styleString}
+		class:absolute={float}
+		class:invisible
+		class:header-icon={variant === Variant.HeaderIcon}
+		class:fill-width={size === Size.FillWidth}
+		class:fill-height={size === Size.FillHeight}
+		width={dim}
+		height={dim}
+		class:rotate
+		viewBox="0 0 {displayIcon.box} {displayIcon.box}"
+	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html displayIcon.svg}</svg
+	>
+{:else}
+	<span
+		aria-hidden="true"
+		class="invalid-icon"
+	></span>
+{/if}
+
 <style>.rotate {
-  animation: spin 1.5s forwards infinite linear;
   transform-origin: center;
 }
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
+@media (prefers-reduced-motion: no-preference) {
+  .rotate {
+    animation: spin 1.5s forwards infinite linear;
   }
-  100% {
-    transform: rotate(360deg);
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
 
@@ -111,6 +146,12 @@
   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;
 }
 
+.invalid-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
+
 .absolute {
   position: absolute;
   z-index: var(--zindex, 3);
@@ -157,4 +198,4 @@ svg:hover {
 .fill-width {
   height: max-content;
   width: 100%;
-}</style>
+}</style>