@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/GridInput.svelte

@@ -30,13 +30,13 @@
 
 <script
 	lang="ts"
-	generics="V extends object,VP extends ValueProp<V>"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
 >
 	const { item, first, last }: GridInputProps<V, VP> = $props();
 
 	let value = $derived(isText(item) ? (item.value ?? '') : '');
 
-	function isText<V extends object, VP extends ValueProp<V>>(
+	function isText<V extends Record<string, unknown>, VP extends ValueProp<V>>(
 		item: GridItem<V, VP>
 	): item is GridTextItem {
 		return item.type == null || textTypes.has(item.type);
@@ -46,37 +46,37 @@
 		return item.type == 'select';
 	}
 
-	function isMultiSelect<A extends object, B extends ValueProp<A>>(
+	function isMultiSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridSelectItem<A, B>
 	): item is GridMultiSelectItem<A, B> {
 		return 'multi' in item && item.multi === true;
 	}
 
-	function isMultiSelectPrimitive<A extends object, B extends ValueProp<A>>(
+	function isMultiSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridMultiSelectItem<A, B>
 	): item is GridMultiSelectItemAsPrimitive<A, B> {
 		return 'valueAsObject' in item && !item.valueAsObject;
 	}
 
-	function isMultiSelectObject<A extends object, B extends ValueProp<A>>(
+	function isMultiSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridMultiSelectItem<A, B>
 	): item is GridMultiSelectItemAsObject<A, B> {
 		return 'valueAsObject' in item && item.valueAsObject;
 	}
 
-	function isSingleSelect<A extends object, B extends ValueProp<A>>(
+	function isSingleSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridSelectItem<A, B>
 	): item is GridSingleSelectItem<A, B> {
 		return !('multi' in item) || item.multi === false;
 	}
 
-	function isSingleSelectPrimitive<A extends object, B extends ValueProp<A>>(
+	function isSingleSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridSingleSelectItem<A, B>
 	): item is GridSingleSelectItemAsPrimitive<A, B> {
 		return 'valueAsObject' in item && !item.valueAsObject;
 	}
 
-	function isSingleSelectObject<A extends object, B extends ValueProp<A>>(
+	function isSingleSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
 		item: GridSingleSelectItem<A, B>
 	): item is GridSingleSelectItemAsObject<A, B> {
 		return 'valueAsObject' in item && item.valueAsObject;
@@ -130,10 +130,11 @@
 						valueProp={item.valueProp}
 						selectedValues={item.value}
 						invalid={item.invalid}
-						onchange={(v: Array<V>) => {
-							const values = v.map((it) => it[item.valueProp]);
-
-							item.updater(values);
+						onchange={(v: Array<V[VP]>) => {
+							// Phase 7.6: `valueAsObject={false}` means MultiSelect
+							// hands us the primitives directly; no more `.map`
+							// to dig `.value` off each option object.
+							item.updater(v);
 						}}
 					/>
 				{/if}
@@ -170,10 +171,19 @@
 						clearable={!item.required}
 						disabled={item.disabled}
 						invalid={item.invalid}
-						onchange={(v: V | null) => {
-							const x = v == null ? null : v[item.valueProp];
-
-							item.updater(x);
+						onchange={(
+							// Phase 7.6: `valueAsObject={false}` means SingleSelect
+							// already passes the primitive key value; no need to
+							// dig it back out of an option object. `clearable` is
+							// enabled when the field is not `required`, so the
+							// callback must accept `null` to satisfy the
+							// SingleSelect prop signature. The annotation collapses
+							// to `unknown` because `V extends Record<string,
+							// unknown>` makes `V[VP]` itself `unknown`.
+							// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+							v: V[VP] | null
+						) => {
+							item.updater(v);
 						}}
 					/>
 				{/if}
@@ -193,7 +203,7 @@
   --sv-border-radius: 0;
 }
 label .left {
-  background-color: #eaeef3;
+  background-color: #f4f7f9;
   display: flex;
   flex-flow: row nowrap;
   padding: 0.75rem;

package/dist/Components/GridInput.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { GridInputProps } from './GridInputProps.js';
-declare function $$render<V extends object, VP extends ValueProp<V>>(): {
+declare function $$render<V extends Record<string, unknown>, VP extends ValueProp<V>>(): {
     props: GridInputProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
+declare class __sveltets_Render<V extends Record<string, unknown>, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends Record<string, unknown>, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends Record<string, unknown>, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInput: $$IsomorphicComponent;
-type GridInput<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInput<V, VP>>;
+type GridInput<V extends Record<string, unknown>, VP extends ValueProp<V>> = InstanceType<typeof GridInput<V, VP>>;
 export default GridInput;

package/dist/Components/GridInputProps.d.ts

@@ -1,7 +1,10 @@
 import type { GridItem } from '../Types/Internal/GridItem.js';
 import type { ValueProp } from '../Types/Internal/Misc.js';
-export interface GridInputProps<V extends object, VP extends ValueProp<V>> {
+export interface GridInputProps<V extends Record<string, unknown>, VP extends ValueProp<V>> {
+    /** Item descriptor controlling which sub-input is rendered. */
     item: GridItem<V, VP>;
+    /** True when this row is first in its GridInputSet. */
     first: boolean;
+    /** True when this row is last in its GridInputSet. */
     last: boolean;
 }

package/dist/Components/GridInputSet.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="V extends object,VP extends ValueProp<V>">
+<script
+	lang="ts"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
+>
 	import type { ValueProp } from '../Types/Internal/Misc.js';
 	import GridInput from './GridInput.svelte';
 	import type { GridInputSetProps } from './GridInputSetProps.js';
@@ -14,8 +17,12 @@
 	{#if header}
 		{@render header()}
 	{/if}
-	{#each items as item, index (item)}
-		<GridInput item={items[index]} first={index == 0} last={index == lastIndex} />
+	{#each items as item, index (item.label)}
+		<GridInput
+			{item}
+			first={index == 0}
+			last={index == lastIndex}
+		/>
 	{/each}
 </div>
 
@@ -23,7 +30,7 @@
   display: grid;
   grid-template-columns: [label] 16rem [value] 1fr;
   gap: 1px;
-  border: solid 1px #ced2d6;
+  border: solid 1px #dae0e5;
   border-radius: 4px;
-  background-color: #ced2d6;
+  background-color: #dae0e5;
 }</style>

package/dist/Components/GridInputSet.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { GridInputSetProps } from './GridInputSetProps.js';
-declare function $$render<V extends object, VP extends ValueProp<V>>(): {
+declare function $$render<V extends Record<string, unknown>, VP extends ValueProp<V>>(): {
     props: GridInputSetProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
+declare class __sveltets_Render<V extends Record<string, unknown>, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends Record<string, unknown>, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends Record<string, unknown>, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInputSet: $$IsomorphicComponent;
-type GridInputSet<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInputSet<V, VP>>;
+type GridInputSet<V extends Record<string, unknown>, VP extends ValueProp<V>> = InstanceType<typeof GridInputSet<V, VP>>;
 export default GridInputSet;

package/dist/Components/GridInputSetProps.d.ts

@@ -1,7 +1,9 @@
 import type { GridItem } from '../Types/Internal/GridItem.js';
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { Snippet } from 'svelte';
-export interface GridInputSetProps<V extends object, VP extends ValueProp<V>> {
-    items: Array<GridItem<V, VP>>;
+export interface GridInputSetProps<V extends Record<string, unknown>, VP extends ValueProp<V>> {
+    /** Readonly list of grid item descriptors to render as rows. */
+    items: ReadonlyArray<GridItem<V, VP>>;
+    /** Optional header snippet rendered above the first row. */
     header?: Snippet;
 }

package/dist/Components/HorizontalTabGroup.svelte

@@ -9,8 +9,7 @@
 	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?
+	const {
 		tabComponent,
 		tabs,
 		selected,
@@ -20,20 +19,23 @@
 		filterFn,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
 
-	// svelte-ignore state_referenced_locally
-	let filteredTabs = $state(tabs);
+	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(() => {
-			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
+			debouncedSearch = term;
 		}, 300);
 		return () => {
 			clearTimeout(id);
 		};
 	});
 
-	let searchValue = $state('');
+	const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
 </script>
 
 <div
@@ -54,15 +56,15 @@
 			{/if}
 		</div>
 		{#if tabComponent}
-			{#each filteredTabs as option (option)}
-				{@render tabComponent(option, selected === option)}
+			{#each filteredTabs as option (option.label)}
+				{@render tabComponent(option, selected?.label === option.label)}
 			{/each}
 		{:else}
-			{#each filteredTabs as option (option)}
+			{#each filteredTabs as option (option.label)}
 				<HorizontalTabGroupButton
 					{option}
 					noRadius={noRadius || filterable}
-					selected={selected === option}
+					selected={selected?.label === option.label}
 				/>
 			{/each}
 		{/if}
@@ -80,7 +82,7 @@
   width: 100%;
   padding: 0.5rem;
   background-color: #ffffff;
-  min-width: 330px;
+  min-width: 20.625rem;
 }
 
 .wrapper {

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -4,56 +4,17 @@
 	lang="ts"
 	generics="Args"
 >
-	import { devCatch } from '../Helpers/Helpers.svelte.js';
+	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';
 
-	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
+	const { 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);
-		}
-	});
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const visible = useAsyncFlag(() => option.visible, true);
 </script>
 
 <button
@@ -63,33 +24,20 @@
 	}}
 	type="button"
 	class="tab"
-	class:invalid={!isValid}
-	{disabled}
-	class:hidden={!visible}
+	class:invalid={!isValid.value}
+	disabled={disabled.value}
+	class:hidden={!visible.value}
 	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}
+	{#if !isValid.value}
 		<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>
 
@@ -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;
+.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,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<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';
@@ -18,8 +21,17 @@
 		[Size.DoubleXLarge]: '40',
 		[Size.TripleXLarge]: '40',
 		[Size.FillHeight]: '24',
-		[Size.FillWidth]: '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">
@@ -41,11 +53,20 @@
 		bottom,
 		colour,
 		onclick,
-		rotate
+		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}
@@ -55,31 +76,35 @@
 		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};`
-			: ''}"
+		style={styleString}
 		class:absolute={float}
 		{onclick}
 		class:rotate
 		onkeydown={passthrough}
-		aria-label={label ?? name.toString()}
+		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}"
-				>{@html displayIcon.svg}</svg
+			<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>Invalid Icon</span>
+			<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="--zindex: {zindex}; --left: {left}; --right: {right}; --top: {top}; --bottom: {bottom}; --anchorX: {anchorX}; --anchorY: {anchorY}; {colour
-			? `--colour: ${colour};`
-			: ''}"
+		style={styleString}
 		class:absolute={float}
 		class:invisible
 		class:header-icon={variant === Variant.HeaderIcon}
@@ -88,22 +113,32 @@
 		width={dim}
 		height={dim}
 		class:rotate
-		viewBox="0 0 {displayIcon.box} {displayIcon.box}">{@html displayIcon.svg}</svg
+		viewBox="0 0 {displayIcon.box} {displayIcon.box}"
+	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html displayIcon.svg}</svg
 	>
 {:else}
-	<span>Invalid Icon</span>
+	<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);