@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/HorizontalTabGroup.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
+<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";
@@ -22,54 +22,54 @@ $effect(() => {
 	};
 });
 const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
-	class:dense
->
-	<div class="tabs">
-		<div class="sticky">
-			{#if filterable}
-				<div class="searchbar">
-					<TextInput
-						bind:value={searchValue}
-						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
-						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
-					/>
-					{#if searchInfo}
-						<span class="search-info">
-							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-							{@render searchInfo()}
-						</span>
-					{/if}
-				</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>
-
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+	class:dense
+>
+	<div class="tabs">
+		<div class="sticky">
+			{#if filterable}
+				<div class="searchbar">
+					<TextInput
+						bind:value={searchValue}
+						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
+						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+					/>
+					{#if searchInfo}
+						<span class="search-info">
+							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+							{@render searchInfo()}
+						</span>
+					{/if}
+				</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;
   flex-flow: row nowrap;
@@ -136,4 +136,4 @@ const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debounce
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
+<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";
@@ -11,32 +11,32 @@ const { option, selected, noRadius = false } = $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>
-
+</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;
 }
@@ -94,4 +94,4 @@ const visible = useAsyncFlag(() => option.visible, true);
 }
 .tab:hover, .tab.selected:hover, .tab.invalid:hover {
   background-color: #f4f7f9;
-}</style>
+}</style>

package/dist/Components/Icon.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<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";
@@ -28,8 +28,8 @@ const sizes = {
 if (!Object.isFrozen(icons)) {
 	throw new Error("Icon: icons map is not frozen. Refusing to inline SVG fragments via {@html}.");
 }
-</script>
-
+</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, directional = false } = $props();
 const dim = $derived(sizes[size]);
 const displayIcon = $derived(icons[name]);
@@ -38,66 +38,66 @@ const displayIcon = $derived(icons[name]);
 // 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
-		class:directional
-		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
-		class:directional
-		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}
-
+</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
+		class:directional
+		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
+		class:directional
+		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 {
   transform-origin: center;
 }
@@ -175,4 +175,4 @@ svg:hover {
 
 :global([dir='rtl']) .directional {
   transform: scaleX(-1);
-}</style>
+}</style>

package/dist/Components/InfoAlert.svelte

@@ -1,37 +1,37 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
 const { children, header, iconName = "circle-information" } = $props();
-</script>
-
-<!--
-	Small, inline informational banner on the Info (brand-blue) palette so it
-	reads as "helper text" rather than "error". An optional bold `header`
-	sits above the body; the body is a snippet so callers can inline links or
-	emphasis without the component prescribing a content shape.
--->
-<div
-	class="info-alert"
-	class:has-header={header}
-	role="status"
->
-	<div class="icon">
-		<Icon
-			name={iconName}
-			size={Size.Medium}
-		/>
-	</div>
-	<div class="content">
-		{#if header}
-			<p class="header">{header}</p>
-		{/if}
-		<div class="body">
-			{@render children()}
-		</div>
-	</div>
-</div>
-
+</script>
+
+<!--
+	Small, inline informational banner on the Info (brand-blue) palette so it
+	reads as "helper text" rather than "error". An optional bold `header`
+	sits above the body; the body is a snippet so callers can inline links or
+	emphasis without the component prescribing a content shape.
+-->
+<div
+	class="info-alert"
+	class:has-header={header}
+	role="status"
+>
+	<div class="icon">
+		<Icon
+			name={iconName}
+			size={Size.Medium}
+		/>
+	</div>
+	<div class="content">
+		{#if header}
+			<p class="header">{header}</p>
+		{/if}
+		<div class="body">
+			{@render children()}
+		</div>
+	</div>
+</div>
+
 <style>.info-alert {
   display: flex;
   flex-flow: row nowrap;
@@ -76,4 +76,4 @@ const { children, header, iconName = "circle-information" } = $props();
   font-size: 0.8125rem;
   line-height: 1.4;
   color: #647d8e;
-}</style>
+}</style>