@functionalcms/svelte-components 5.4.1 → 5.4.4

package/dist/components/presentation/FlexBox.svelte

@@ -1,73 +1,73 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		width?: string;
-		height?: string;
-		direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-		justify?:
-			| 'start'
-			| 'end'
-			| 'end-safe'
-			| 'center'
-			| 'center-safe'
-			| 'between'
-			| 'around'
-			| 'evenly'
-			| 'stretch'
-			| 'baseline'
-			| 'normal';
-		align?:
-			| 'start'
-			| 'end'
-			| 'end-safe'
-			| 'center'
-			| 'center-safe'
-			| 'baseline'
-			| 'baseline-last'
-			| 'stretch';
-		wrap: 'wrap' | 'nowrap' | 'wrap-reverse';
-		grow?: string;
-		shrink?: string;
-		gap?: string;
-		margin?: string;
-		padding?: string;
-	}
-
-	let {
-		children,
-		width = 'auto',
-		height = 'auto',
-		direction = 'row',
-		justify = 'start',
-		align = 'stretch',
-		gap = '0',
-		wrap = 'nowrap',
-		grow = undefined,
-		shrink = undefined,
-		margin = undefined,
-		padding = undefined,
-	}: Partial<Props> = $props();
-
-	const cssClass = $derived(
-		[
-			`box`,
-			`flex flex-${direction}`,
-			`justify-${justify}`,
-			`items-${align}`,
-			`gap-${gap}`,
-			`flex-${wrap}`,
-			`w-${width}`,
-			`h-${height}`,
-			grow ? `flex-grow-${grow}` : '',
-			shrink ? `flex-shrink-${shrink}` : '',
-			margin ? `m-${margin}` : '',
-			padding ? `p-${padding}` : '',
-		].join(' ')
-	);
-</script>
-
-<div class={cssClass}>
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		width?: string;
+		height?: string;
+		direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+		justify?:
+			| 'start'
+			| 'end'
+			| 'end-safe'
+			| 'center'
+			| 'center-safe'
+			| 'between'
+			| 'around'
+			| 'evenly'
+			| 'stretch'
+			| 'baseline'
+			| 'normal';
+		align?:
+			| 'start'
+			| 'end'
+			| 'end-safe'
+			| 'center'
+			| 'center-safe'
+			| 'baseline'
+			| 'baseline-last'
+			| 'stretch';
+		wrap: 'wrap' | 'nowrap' | 'wrap-reverse';
+		grow?: string;
+		shrink?: string;
+		gap?: string;
+		margin?: string;
+		padding?: string;
+	}
+
+	let {
+		children,
+		width = 'auto',
+		height = 'auto',
+		direction = 'row',
+		justify = 'start',
+		align = 'stretch',
+		gap = '0',
+		wrap = 'nowrap',
+		grow = undefined,
+		shrink = undefined,
+		margin = undefined,
+		padding = undefined,
+	}: Partial<Props> = $props();
+
+	const cssClass = $derived(
+		[
+			`box`,
+			`flex flex-${direction}`,
+			`justify-${justify}`,
+			`items-${align}`,
+			`gap-${gap}`,
+			`flex-${wrap}`,
+			`w-${width}`,
+			`h-${height}`,
+			grow ? `flex-grow-${grow}` : '',
+			shrink ? `flex-shrink-${shrink}` : '',
+			margin ? `m-${margin}` : '',
+			padding ? `p-${padding}` : '',
+		].join(' ')
+	);
+</script>
+
+<div class={cssClass}>
+	{@render children?.()}
+</div>

package/dist/components/presentation/ImageCompare.svelte

@@ -1,180 +1,180 @@
-<script lang="ts">
-	import { type Snippet } from "svelte";
-
-	interface Props {
-		imageLeftSrc: string;
-		imageLeftAlt: string;
-		imageRightSrc: string;
-		imageRightAlt: string;
-		slidertLabel: Snippet;
-	}
-
-	let {
-		imageLeftSrc = "",
-		imageLeftAlt = "",
-		imageRightSrc = "",
-		imageRightAlt = "",
-		slidertLabel,
-	}: Partial<Props> = $props();
-
-	let sliderPosition: number = $state(50);
-	let animationFrame: number | null = $state(null);
-
-	function handleInput(e: Event) {
-		if (animationFrame) cancelAnimationFrame(animationFrame);
-
-		animationFrame = requestAnimationFrame(() => {
-			sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
-		});
-	}
-
-	function handleClick(e: Event) {
-		(e.target as HTMLInputElement).focus();
-	}
-</script>
-
-<div
-	class="svelte-compare-image-container"
-	style="--slider-position: {sliderPosition}%;"
->
-	<img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
-	<img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
-
-	<label>
-		<input
-			type="range"
-			min="0"
-			max="100"
-			value={sliderPosition}
-			oninput={handleInput}
-			onchange={handleInput}
-			onclick={handleClick}
-		/>
-	</label>
-</div>
-
-<style>
-	.svelte-compare-image-container {
-		box-sizing: border-box;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.svelte-compare-image-container:focus-within {
-		outline: auto 4px rgba(59, 153, 252, 0.7);
-		outline: auto 4px Highlight;
-		outline: auto 4px -moz-mac-focusring;
-		outline: auto 4px -webkit-focus-ring-color;
-	}
-
-	img {
-		display: block;
-		height: auto;
-		width: 100%;
-		margin: 0;
-	}
-
-	.left-img {
-		clip-path: polygon(
-			0 0,
-			var(--slider-position) 0,
-			var(--slider-position) 100%,
-			0 100%
-		);
-	}
-
-	.right-img {
-		position: absolute;
-		top: 0;
-		clip-path: polygon(
-			var(--slider-position) 0,
-			100% 0,
-			100% 100%,
-			var(--slider-position) 100%
-		);
-	}
-
-	label {
-		position: absolute;
-		display: flex;
-		align-items: stretch;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		background: transparent;
-	}
-
-	label::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
-		width: var(--slider-width, 0.125rem);
-		background: var(--slider-color, #ffffff);
-		pointer-events: none;
-	}
-
-	input[type="range"] {
-		position: relative;
-		cursor: col-resize;
-		margin: 0 calc(var(--handle-size, 2.5rem) / -2);
-		width: calc(100% + var(--handle-size, 2.5rem));
-		padding: 0;
-		border-radius: 0;
-		appearance: none;
-		-webkit-appearance: none;
-		background: none;
-		border: none;
-	}
-
-	input[type="range"]::-moz-range-thumb {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
-		background-image: var(
-			--handle-background-image,
-			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
-		);
-		background-size: 80%;
-		background-position: center center;
-		background-repeat: no-repeat;
-		border: var(--handle-border-width, 0.125rem) solid
-			var(--slider-color, #ffffff);
-		border-radius: 100%;
-		box-shadow:
-			0 3px 1px -2px rgba(0, 0, 0, 0.2),
-			0 2px 2px 0 rgba(0, 0, 0, 0.14),
-			0 1px 5px 0 rgba(0, 0, 0, 0.12);
-		color: var(--slider-color, #ffffff);
-		width: var(--handle-size, 2.5rem);
-		height: var(--handle-size, 2.5rem);
-	}
-
-	input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
-		background-image: var(
-			--handle-background-image,
-			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
-		);
-		background-size: 80%;
-		background-position: center center;
-		background-repeat: no-repeat;
-		border: var(--handle-border-width, 0.125rem) solid
-			var(--slider-color, #ffffff);
-		border-radius: 100%;
-		box-shadow:
-			0 3px 1px -2px rgba(0, 0, 0, 0.2),
-			0 2px 2px 0 rgba(0, 0, 0, 0.14),
-			0 1px 5px 0 rgba(0, 0, 0, 0.12);
-		color: var(--slider-color, #ffffff);
-		width: var(--handle-size, 2.5rem);
-		height: var(--handle-size, 2.5rem);
-	}
-</style>
+<script lang="ts">
+	import { type Snippet } from "svelte";
+
+	interface Props {
+		imageLeftSrc: string;
+		imageLeftAlt: string;
+		imageRightSrc: string;
+		imageRightAlt: string;
+		slidertLabel: Snippet;
+	}
+
+	let {
+		imageLeftSrc = "",
+		imageLeftAlt = "",
+		imageRightSrc = "",
+		imageRightAlt = "",
+		slidertLabel,
+	}: Partial<Props> = $props();
+
+	let sliderPosition: number = $state(50);
+	let animationFrame: number | null = $state(null);
+
+	function handleInput(e: Event) {
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+
+		animationFrame = requestAnimationFrame(() => {
+			sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
+		});
+	}
+
+	function handleClick(e: Event) {
+		(e.target as HTMLInputElement).focus();
+	}
+</script>
+
+<div
+	class="svelte-compare-image-container"
+	style="--slider-position: {sliderPosition}%;"
+>
+	<img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
+	<img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
+
+	<label>
+		<input
+			type="range"
+			min="0"
+			max="100"
+			value={sliderPosition}
+			oninput={handleInput}
+			onchange={handleInput}
+			onclick={handleClick}
+		/>
+	</label>
+</div>
+
+<style>
+	.svelte-compare-image-container {
+		box-sizing: border-box;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.svelte-compare-image-container:focus-within {
+		outline: auto 4px rgba(59, 153, 252, 0.7);
+		outline: auto 4px Highlight;
+		outline: auto 4px -moz-mac-focusring;
+		outline: auto 4px -webkit-focus-ring-color;
+	}
+
+	img {
+		display: block;
+		height: auto;
+		width: 100%;
+		margin: 0;
+	}
+
+	.left-img {
+		clip-path: polygon(
+			0 0,
+			var(--slider-position) 0,
+			var(--slider-position) 100%,
+			0 100%
+		);
+	}
+
+	.right-img {
+		position: absolute;
+		top: 0;
+		clip-path: polygon(
+			var(--slider-position) 0,
+			100% 0,
+			100% 100%,
+			var(--slider-position) 100%
+		);
+	}
+
+	label {
+		position: absolute;
+		display: flex;
+		align-items: stretch;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: transparent;
+	}
+
+	label::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
+		width: var(--slider-width, 0.125rem);
+		background: var(--slider-color, #ffffff);
+		pointer-events: none;
+	}
+
+	input[type="range"] {
+		position: relative;
+		cursor: col-resize;
+		margin: 0 calc(var(--handle-size, 2.5rem) / -2);
+		width: calc(100% + var(--handle-size, 2.5rem));
+		padding: 0;
+		border-radius: 0;
+		appearance: none;
+		-webkit-appearance: none;
+		background: none;
+		border: none;
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
+		background-image: var(
+			--handle-background-image,
+			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+		);
+		background-size: 80%;
+		background-position: center center;
+		background-repeat: no-repeat;
+		border: var(--handle-border-width, 0.125rem) solid
+			var(--slider-color, #ffffff);
+		border-radius: 100%;
+		box-shadow:
+			0 3px 1px -2px rgba(0, 0, 0, 0.2),
+			0 2px 2px 0 rgba(0, 0, 0, 0.14),
+			0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		color: var(--slider-color, #ffffff);
+		width: var(--handle-size, 2.5rem);
+		height: var(--handle-size, 2.5rem);
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
+		background-image: var(
+			--handle-background-image,
+			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+		);
+		background-size: 80%;
+		background-position: center center;
+		background-repeat: no-repeat;
+		border: var(--handle-border-width, 0.125rem) solid
+			var(--slider-color, #ffffff);
+		border-radius: 100%;
+		box-shadow:
+			0 3px 1px -2px rgba(0, 0, 0, 0.2),
+			0 2px 2px 0 rgba(0, 0, 0, 0.14),
+			0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		color: var(--slider-color, #ffffff);
+		width: var(--handle-size, 2.5rem);
+		height: var(--handle-size, 2.5rem);
+	}
+</style>

package/dist/components/presentation/Logo.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-	interface Props {
-		companyName: string;
-		logoUrl: string;
-		css: string;
-	}
-
-	let {
-		companyName,
-		logoUrl,
-		css = 'logo'
-	}: Partial<Props> = $props();
-
-</script>
-
-<a href="/" class={css}>
-	<img src={logoUrl} alt={companyName} loading="lazy"  />
-</a>
-
-<style>
-	a { 
-		display: var(--logo-display, 'inline-block');
-		margin: var(--mobile-logo-margin);
-		padding: var(--mobile-logo-padding);
-	}
-	a img {
-		width: 100%;
-		width: var(--logo-width, 200px);
-	}
-
-	@media (min-width: 960px) {
-		a img {
-			margin: var(--logo-margin);
-			padding: var(--logo-padding);
-		}
-	}
-</style>
+<script lang="ts">
+	interface Props {
+		companyName: string;
+		logoUrl: string;
+		css: string;
+	}
+
+	let {
+		companyName,
+		logoUrl,
+		css = 'logo'
+	}: Partial<Props> = $props();
+
+</script>
+
+<a href="/" class={css}>
+	<img src={logoUrl} alt={companyName} loading="lazy"  />
+</a>
+
+<style>
+	a { 
+		display: var(--logo-display, 'inline-block');
+		margin: var(--mobile-logo-margin);
+		padding: var(--mobile-logo-padding);
+	}
+	a img {
+		width: 100%;
+		width: var(--logo-width, 200px);
+	}
+
+	@media (min-width: 960px) {
+		a img {
+			margin: var(--logo-margin);
+			padding: var(--logo-padding);
+		}
+	}
+</style>

package/dist/components/presentation/StyleBox.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		class: string;
-	}
-
-	let {
-		children,  
-		class: css = '',
-	}: Partial<Props> = $props();
-</script>
-
-<div class={css}>
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class: string;
+	}
+
+	let {
+		children,  
+		class: css = '',
+	}: Partial<Props> = $props();
+</script>
+
+<div class={css}>
+	{@render children?.()}
+</div>

package/dist/components/presentation/Well.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		class: string;
-	}
-
-	let {
-		children,
-		class: css = '',
-	}: Partial<Props> = $props();
-</script>
-
-<div class="well m-auto p-1 {css}">
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class: string;
+	}
+
+	let {
+		children,
+		class: css = '',
+	}: Partial<Props> = $props();
+</script>
+
+<div class="well m-auto p-1 {css}">
+	{@render children?.()}
+</div>