@functionalcms/svelte-components 4.0.0 → 4.0.1

package/dist/components/form/Input.d.ts

@@ -1,21 +1,2 @@
-export declare enum Type {
-    Text = "text",
-    Textarea = "textarea",
-    Email = "email",
-    Search = "search",
-    Password = "password",
-    Tel = "tel",
-    Number = "number",
-    Url = "url",
-    Month = "month",
-    Time = "time",
-    Week = "week",
-    Date = "date",
-    DatetimeLocal = "datetime-local",
-    Color = "color"
-}
-export declare enum Size {
-    Small = "small",
-    Large = "large",
-    Normal = ""
-}
+export type Type = 'text' | 'textarea' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
+export type LabelSize = 'small' | 'large' | '';

package/dist/components/form/Input.js

@@ -1,23 +1 @@
-export var Type;
-(function (Type) {
-    Type["Text"] = "text";
-    Type["Textarea"] = "textarea";
-    Type["Email"] = "email";
-    Type["Search"] = "search";
-    Type["Password"] = "password";
-    Type["Tel"] = "tel";
-    Type["Number"] = "number";
-    Type["Url"] = "url";
-    Type["Month"] = "month";
-    Type["Time"] = "time";
-    Type["Week"] = "week";
-    Type["Date"] = "date";
-    Type["DatetimeLocal"] = "datetime-local";
-    Type["Color"] = "color";
-})(Type || (Type = {}));
-export var Size;
-(function (Size) {
-    Size["Small"] = "small";
-    Size["Large"] = "large";
-    Size["Normal"] = "";
-})(Size || (Size = {}));
+export {};

package/dist/components/form/Input.svelte

@@ -1,58 +1,72 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import { Size, Type } from './Input.js';
-
-	interface Props {
-		label?: string;
-		id?: string;
-		labelCss?: string;
-		isLabelHidden?: boolean;
-		helpText?: string;
-		invalidText?: string;
-		isInvalid?: boolean;
-		isInline?: boolean;
-		isRounded?: boolean;
-		isDisabled?: boolean | undefined;
-		css?: string;
-		isSkinned?: boolean;
-		isUnderlinedWithBackground?: boolean;
-		isUnderlined?: boolean;
-		size?: Size;
-		type?: Type;
-		value?: string;
-		addonLeft?: Snippet;
-		addonRight?: Snippet;
+	import type { LabelSize, Type } from './Input.js';
+
+	interface Props{
+		label: string;
+		labelSize: LabelSize;
+		labelCss: string;
+		isLabelHidden: boolean;
+
+		id: string;
+		name: string;
+		helpText: string;
+
+		isInvalid: boolean;
+		invalidText: string;
+
+		isInline: boolean;
+		isRounded: boolean;
+		isSkinned: boolean;
+		isUnderlinedWithBackground: boolean;
+		isUnderlined: boolean;
+
+		isDisabled: boolean | undefined;
+		isRequired: boolean | undefined;
+
+		css: string;
+
+		placeholder: string;
+		
+		type: Type;
+		value: string;
+		addonLeft: Snippet;
+		addonRight: Snippet;
 	}
+	
 	let {
 		addonLeft,
 		addonRight,
 		label = '',
 		id = '',
+		name = '',
 		labelCss = '',
 		isLabelHidden = false,
 		helpText = '',
-		invalidText = '',
 		isInvalid = false,
+		invalidText = '',
 		isInline = false,
 		isRounded = false,
 		isDisabled = undefined,
+		isRequired = undefined,
 		css = '',
 		isSkinned = true,
 		isUnderlinedWithBackground = false,
 		isUnderlined = false,
-		size = Size.Normal,
-		type = Type.Text,
+		labelSize = '',
+		type = 'text',
 		value = '',
+		placeholder= '',
 		...restProps
-	}: Props = $props();
+	}: Partial<Props> = $props();
 
 	let labelClasses = $derived(
 		cn(
 			'label',
 			isInvalid ? 'label-error' : '',
 			isInline ? 'label-inline' : '',
-			size ? `label-${size}` : '',
+			labelSize ? `label-${labelSize}` : '',
 			isLabelHidden ? 'screenreader-only' : '',
 			labelCss ? labelCss : ''
 		)
@@ -70,13 +84,13 @@
 			isInline ? 'input-inline' : '',
 			isUnderlinedWithBackground ? 'input-underlined-bg' : '',
 			css ? css : '',
-			size ? `input-${size}` : ''
+			labelSize ? `input-${labelSize}` : ''
 		)
 	);
 
-	let invalidClasses = $derived(size ? `field-error-${size}` : 'field-error');
+	let invalidClasses = $derived(labelSize ? `field-error-${labelSize}` : 'field-error');
 
-	let helpClasses = $derived(size ? `field-help-${size}` : 'field-help');
+	let helpClasses = $derived(labelSize ? `field-help-${labelSize}` : 'field-help');
 
 	let addonContainerClasses = () => 'input-addon-container';
 
@@ -88,10 +102,13 @@
 {#snippet input()}
 	<input
 		{id}
+		{name}
 		{type}
+		{placeholder}
 		bind:value
 		class={inputClasses}
 		disabled={isDisabled}
+		required={isRequired}
 		oninput={handleInput}
 		{...restProps}
 	/>
@@ -100,7 +117,15 @@
 <div class="w-100">
 	<label class={labelClasses} for={id}>{label}</label>
 	{#if type == 'textarea'}
-		<textarea {id} class={inputClasses} bind:value {...restProps}></textarea>
+		<textarea 
+			{id}
+			{name}
+			{placeholder}
+			class={inputClasses} 
+			bind:value 
+			oninput={handleInput} 
+			required={isRequired} 
+			{...restProps}></textarea>
 	{:else if addonLeft || addonRight}
 		<div class={addonContainerClasses()}>
 			{#if addonLeft}
@@ -159,11 +184,11 @@
 	.input-underlined,
 	.input-underlined-bg,
 	.input {
-		color: var(--agnostic-font-color, var(--agnostic-dark));
-		font-family: var(--agnostic-font-family-body);
-		font-weight: var(--agnostic-font-weight, 300);
-		font-size: var(--agnostic-font-size, 1rem);
-		line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
+		color: var(--font-color, var(--dark));
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight, 300);
+		font-size: var(--font-size, 1rem);
+		line-height: var(--line-height, var(--fluid-20, 1.25rem));
 		width: 100%;
 		max-width: 100%;
 	}
@@ -174,38 +199,38 @@
 		border-style: solid;
 
 		/* this can be overriden, but it might mess with the balance of the button heights across variants */
-		border-width: var(--agnostic-input-border-size, 1px);
-		border-color: var(--agnostic-input-border-color, var(--agnostic-gray-light));
+		border-width: var(--input-border-size, 1px);
+		border-color: var(--input-border-color, var(--gray-light));
 
 		/* these can be overriden, but it might mess with the balance of the inputheights across variants */
-		padding-block-start: var(--agnostic-input-vertical-pad, 0.5rem);
-		padding-block-end: var(--agnostic-input-vertical-pad, 0.5rem);
-		padding-inline-start: var(--agnostic-input-side-padding, 0.75rem);
-		padding-inline-end: var(--agnostic-input-side-padding, 0.75rem);
+		padding-block-start: var(--input-vertical-pad, 0.5rem);
+		padding-block-end: var(--input-vertical-pad, 0.5rem);
+		padding-inline-start: var(--input-side-padding, 0.75rem);
+		padding-inline-end: var(--input-side-padding, 0.75rem);
 
 		/* Note we only want to set properties that we actually want
       to transition in. For example, if we transition "all", the
       inputs will "grow in" on page load—not a happy effect :) */
 		transition-property: box-shadow;
-		transition-duration: var(--agnostic-input-timing, var(--agnostic-timing-medium));
+		transition-duration: var(--input-timing, var(--timing-medium));
 	}
 
 	.label {
 		display: inline-block;
 
-		/* Provided --agnostic-input-vertical-pad isn't overriden we'll get 20px
+		/* Provided --input-vertical-pad isn't overriden we'll get 20px
       label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
 		margin-block-start: 0;
 		margin-inline-start: 0;
 		margin-inline-end: 0;
-		margin-block-end: var(--agnostic-input-label-pad, 0.375rem);
+		margin-block-end: var(--input-label-pad, 0.375rem);
 		vertical-align: initial;
 	}
 
 	/* Reset field errors and help text to be 2px less then input font size */
 	.field-help,
 	.field-error {
-		font-size: calc(var(--agnostic-font-size, 1rem) - 2px);
+		font-size: calc(var(--font-size, 1rem) - 2px);
 	}
 
 	.label-inline,
@@ -218,7 +243,7 @@
 		margin-block-start: 0;
 		margin-block-end: 0;
 		margin-inline-start: 0;
-		margin-inline-end: var(--agnostic-input-side-padding, 0.75rem);
+		margin-inline-end: var(--input-side-padding, 0.75rem);
 	}
 
 	/**
@@ -229,28 +254,28 @@
 	.input::-webkit-input-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--agnostic-timing-fast) ease-out;
+		transition: opacity var(--timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input::placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--agnostic-timing-fast) ease-out;
+		transition: opacity var(--timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input::-ms-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--agnostic-timing-fast) ease-out;
+		transition: opacity var(--timing-fast) ease-out;
 	}
 
 	/* stylelint-disable-next-line */
 	.input:-ms-placeholder {
 		color: currentColor;
 		opacity: 50%;
-		transition: opacity var(--agnostic-timing-fast) ease-out;
+		transition: opacity var(--timing-fast) ease-out;
 	}
 
 	/**
@@ -260,19 +285,19 @@
 		border-top: 0;
 		border-left: 0;
 		border-right: 0;
-		border-color: var(--agnostic-input-underlined-color, var(--agnostic-gray-mid-dark));
+		border-color: var(--input-underlined-color, var(--gray-mid-dark));
 		background-color: transparent;
 	}
 
 	.input-underlined-bg {
-		background-color: var(--agnostic-input-underlined-bg-color, var(--agnostic-gray-extra-light));
+		background-color: var(--input-underlined-bg-color, var(--gray-extra-light));
 	}
 
 	/**
     * Rounded inputs
     */
 	.input-rounded {
-		border-radius: var(--agnostic-radius, 0.25rem);
+		border-radius: var(--radius, 0.25rem);
 	}
 
 	/**
@@ -287,24 +312,24 @@
      * implement that in the contrived example).
      */
 	.label-error {
-		color: var(--agnostic-input-error-color, var(--agnostic-error));
+		color: var(--input-error-color, var(--error));
 	}
 
 	.input-error {
-		border-color: var(--agnostic-input-error-color, var(--agnostic-error));
+		border-color: var(--input-error-color, var(--error));
 	}
 
 	.label-error,
 	.field-error,
 	.field-error-small,
 	.field-error-large {
-		color: var(--agnostic-input-error-color, var(--agnostic-error));
+		color: var(--input-error-color, var(--error));
 	}
 
 	.field-help,
 	.field-help-small,
 	.field-help-large {
-		color: var(--agnostic-input-help-color, var(--agnostic-gray-dark));
+		color: var(--input-help-color, var(--gray-dark));
 	}
 
 	.field-help,
@@ -315,45 +340,45 @@
 	.field-error-large {
 		display: inline-block;
 		width: 100%;
-		margin-block-start: calc(var(--agnostic-input-vertical-pad, 0.5rem) / 2);
+		margin-block-start: calc(var(--input-vertical-pad, 0.5rem) / 2);
 	}
 
 	/**
       * Sizes
       */
 	.input-large {
-		font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
+		font-size: calc(var(--font-size, 1rem) + 0.25rem);
 		line-height: 1.6rem;
 	}
 
 	.field-help-large,
 	.field-error-large {
 		/* We initially remove -2px from font-size so setting to font-size essentially adds the 2px back */
-		font-size: var(--agnostic-font-size, 1rem);
+		font-size: var(--font-size, 1rem);
 	}
 
 	.label-large {
-		font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
+		font-size: calc(var(--font-size, 1rem) + 0.25rem);
 	}
 
 	.input-small {
-		font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
+		font-size: calc(var(--font-size, 1rem) - 0.25rem);
 		line-height: 1rem;
 	}
 
 	.field-help-small,
 	.field-error-small,
 	.label-small {
-		font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
+		font-size: calc(var(--font-size, 1rem) - 0.25rem);
 	}
 
 	.input:focus {
-		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
+		box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
 
 		/* Needed for High Contrast mode */
-		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
-			var(--agnostic-focus-ring-outline-color);
-		transition: box-shadow var(--agnostic-timing-fast) ease-out;
+		outline: var(--focus-ring-outline-width) var(--focus-ring-outline-style)
+			var(--focus-ring-outline-color);
+		transition: box-shadow var(--timing-fast) ease-out;
 	}
 
 	/* Set the focus to transparent when there's an error since we use
@@ -372,8 +397,8 @@
     */
 	.input.disabled, /* DEPRECATED -- TODO remove class based disabled */
     .input:disabled {
-		background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
-		color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
+		background: var(--input-disabled-bg, var(--disabled-bg)) !important;
+		color: var(--input-disabled-color, var(--disabled-color)) !important;
 		appearance: none !important;
 		box-shadow: none !important;
 		cursor: not-allowed !important;
@@ -402,19 +427,19 @@
 	}
 
 	.input-has-left-addon {
-		padding-left: calc(var(--agnostic-side-padding) * 3);
+		padding-left: calc(var(--side-padding) * 3);
 	}
 
 	.input-has-right-addon {
-		padding-right: calc(var(--agnostic-side-padding) * 3);
+		padding-right: calc(var(--side-padding) * 3);
 	}
 
 	.input-addon-left {
-		left: var(--agnostic-input-side-padding);
+		left: var(--input-side-padding);
 	}
 
 	.input-addon-right {
-		right: var(--agnostic-input-side-padding);
+		right: var(--input-side-padding);
 	}
 
 	@media (prefers-reduced-motion), (update: slow) {

package/dist/components/form/Input.svelte.d.ts

@@ -1,26 +1,28 @@
 import type { Snippet } from 'svelte';
-import { Size, Type } from './Input.js';
-interface Props {
-    label?: string;
-    id?: string;
-    labelCss?: string;
-    isLabelHidden?: boolean;
-    helpText?: string;
-    invalidText?: string;
-    isInvalid?: boolean;
-    isInline?: boolean;
-    isRounded?: boolean;
-    isDisabled?: boolean | undefined;
-    css?: string;
-    isSkinned?: boolean;
-    isUnderlinedWithBackground?: boolean;
-    isUnderlined?: boolean;
-    size?: Size;
-    type?: Type;
-    value?: string;
-    addonLeft?: Snippet;
-    addonRight?: Snippet;
-}
-declare const Input: import("svelte").Component<Props, {}, "">;
+import type { LabelSize, Type } from './Input.js';
+declare const Input: import("svelte").Component<Partial<{
+    label: string;
+    labelSize: LabelSize;
+    labelCss: string;
+    isLabelHidden: boolean;
+    id: string;
+    name: string;
+    helpText: string;
+    isInvalid: boolean;
+    invalidText: string;
+    isInline: boolean;
+    isRounded: boolean;
+    isSkinned: boolean;
+    isUnderlinedWithBackground: boolean;
+    isUnderlined: boolean;
+    isDisabled: boolean | undefined;
+    isRequired: boolean | undefined;
+    css: string;
+    placeholder: string;
+    type: Type;
+    value: string;
+    addonLeft: Snippet;
+    addonRight: Snippet;
+}>, {}, "">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/form/Switch.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	interface Props {
+		id: string;
+		label: string;
+		css: string;
+		labelPosition: string;
+		size: string;
+		isChecked: boolean;
+		isBordered: boolean;
+		isAction: boolean;
+		isDisabled: boolean;
+	}
+	let {
+		id = '',
+		label = '',
+		css = '',
+		labelPosition = 'left',
+		size = '',
+		isChecked = false,
+		isBordered = false,
+		isAction = false,
+		isDisabled = false
+	}: Partial<Props> = $props();
+
+	let switchContainer = $derived(
+		cn(
+			'switch-container',
+			labelPosition === 'right' ? 'switch-right' : '',
+			css ? css : '',
+			isDisabled ? 'disabled' : ''
+		)
+	);
+
+	const switchSpan = () => {
+		let klasses = [
+			'switch',
+			isBordered ? 'switch-border' : '',
+			isAction ? 'switch-action' : '',
+			size ? `switch-${size}` : ''
+		];
+		klasses = klasses.filter((klass) => klass.length);
+		return klasses.join(' ');
+	};
+	const handleClick = (evt: any) => {
+		const el = evt.target;
+		if (el.getAttribute('aria-checked') == 'true') {
+			el.setAttribute('aria-checked', 'false');
+		} else {
+			el.setAttribute('aria-checked', 'true');
+		}
+	};
+	const handleKeypress = (evt: any) => {
+		const keyCode = evt.keyCode || evt.which;
+		switch (keyCode) {
+			case 13:
+				evt.preventDefault();
+				evt.target.click();
+				break;
+		}
+	};
+</script>
+
+<label class={switchContainer} for={id}>
+	{#if labelPosition === 'left'}<span class="switch-label">{label}</span>{/if}
+	<input
+		type="checkbox"
+		class="switch-input"
+		{id}
+		bind:checked={isChecked}
+		disabled={isDisabled}
+		onclick={handleClick}
+		onkeypress={handleKeypress}
+		role="switch"
+	/>
+	<span class={switchSpan()} aria-hidden="true"></span>
+	{#if labelPosition === 'right'}<span class="switch-label">{label}</span>{/if}
+</label>
+
+<style>
+	/**
+     * Switch
+     *
+     * This switch is inspired by Scott Ohara's checkbox switch:
+     * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
+     */
+	.switch-container {
+		display: block;
+
+		/* TODO: Hopefully this doesn't become a problem but since we use absolute
+      positioning extensively, we need some way to have adjacent spaced lines */
+		min-height: 2.25rem;
+		width: 100%;
+		padding: 0.5rem;
+		position: relative;
+	}
+
+	.switch-container:hover {
+		cursor: pointer;
+	}
+
+	/* using the before/after pseudo elements of the span to create the "switch" */
+	.switch::before,
+	.switch::after {
+		border: 1px solid var(--gray-mid-dark);
+		content: '';
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	/* styling specific to the knob of the switch */
+	.switch::after {
+		background: #fff;
+		border-radius: 100%;
+		width: 1.4rem;
+		height: 1.4rem;
+		right: 1.4rem;
+		transition: right var(--timing-fast) ease-in-out;
+	}
+
+	/* styling specific to the knob "container" */
+	.switch::before {
+		background: #eee;
+		border-radius: 1.75rem;
+		width: 2.75rem;
+		height: 1.75rem;
+		right: 0.25rem;
+		transition: background var(--timing-medium) ease-in-out;
+	}
+
+	/* Sizes */
+	.switch-small::after {
+		width: 1.25rem;
+		height: 1.25rem;
+		right: 1.125rem;
+	}
+
+	.switch-small::before {
+		width: 2.25rem;
+		height: 1.5rem;
+	}
+
+	.switch-large::after {
+		width: 1.65rem;
+		height: 1.65rem;
+		right: 1.65rem;
+	}
+
+	.switch-large::before {
+		width: 3.25rem;
+		height: 2rem;
+	}
+
+	.switch-border::before {
+		border: 1px solid var(--primary);
+	}
+
+	.switch-action.switch-border::before {
+		border: 1px solid var(--action);
+	}
+
+	/* Switch label on right */
+
+	/* We have to flip the positioning when the label is on the right of switch */
+	.switch-right .switch::before {
+		right: initial;
+		left: 0.25rem;
+	}
+
+	.switch-right .switch::after {
+		right: initial;
+		left: 1.4rem;
+	}
+
+	/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
+    classes should both exist so the right: initial was taken care of above :) */
+	.switch-right .switch-small::after {
+		left: 1.125rem;
+	}
+
+	.switch-right .switch-large::after {
+		left: 1.65rem;
+	}
+
+	/* ---- CHECKED STATE ----- */
+
+	/* change the position of the knob to indicate it has been checked */
+
+	.switch-input:checked + .switch-small::after {
+		right: 0.425rem;
+	}
+
+	.switch-input:checked + .switch::after {
+		right: 0.5em;
+	}
+
+	.switch-right .switch-label {
+		position: absolute;
+		right: 0;
+
+		/* Flips transition target to left to preserve our smooth transitions */
+		transition: left var(--timing-fast) ease-in-out;
+	}
+
+	.switch-right .switch-input:checked + .switch::after {
+		right: initial;
+		left: 0.5em;
+	}
+
+	.switch-right .switch-input:checked + .switch-small::after {
+		right: initial;
+		left: 0.425rem;
+	}
+
+	/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
+      hide the actual checkbox from view, but not from keyboards or ATs.
+      Instead of standard visually hidden styling, instead set opacity to
+      almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
+      then set to full height/width of container element so that VO focus
+      ring outlines the component, instead of a tiny box within the component
+    */
+	.switch-input {
+		margin: 0;
+		opacity: 0.01%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.switch-input:focus + .switch::before {
+		box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
+	}
+
+	/* update the color of the "container" to further visually indicate state */
+	.switch-input:checked + .switch:not(.switch-border)::before {
+		background: var(--primary);
+	}
+
+	.switch-input:checked + .switch-action:not(.switch-border)::before {
+		background: var(--action);
+	}
+
+	/* Border switch on checked the thumb gets primary or action bg respectively */
+	.switch-input:checked + .switch-border::after {
+		background: var(--primary);
+	}
+
+	.switch-input:checked + .switch-action.switch-border::after {
+		background: var(--action);
+	}
+
+	/* Disabled aka :disabled is not actually supported for <label>
+    element so we use attribute selector for that:
+    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
+    */
+	.switch-input[disabled] + .switch,
+	.switch-input[disabled] + .switch-label,
+	.switch-container.disabled {
+		color: var(--input-disabled-color, var(--disabled-color)) !important;
+		appearance: none !important;
+		box-shadow: none !important;
+		cursor: not-allowed !important;
+		opacity: 80% !important;
+	}
+
+	@media screen and (-ms-high-contrast: active) {
+		.switch::after {
+			background-color: windowText;
+		}
+
+		/* High contrast mode outline hacks */
+		.switch-input[disabled] + .switch-label,
+		.switch-container.disabled {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.switch::after,
+		.switch::before {
+			transition-duration: 0.001ms !important;
+		}
+	}
+</style>

package/dist/components/form/Switch.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const Switch: import("svelte").Component<Partial<{
+    id: string;
+    label: string;
+    css: string;
+    labelPosition: string;
+    size: string;
+    isChecked: boolean;
+    isBordered: boolean;
+    isAction: boolean;
+    isDisabled: boolean;
+}>, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/layouts/Meta.svelte

@@ -15,7 +15,7 @@
 		robots = 'index, follow',
 		charset = 'UTF-8',
 		viewport = 'width=device-width, initial-scale=1.0'
-	}: MetaProps = $props();
+	}: Partial<MetaProps> = $props();
 </script>
 
 <svelte:head>

package/dist/components/layouts/Meta.svelte.d.ts

@@ -1,11 +1,10 @@
-interface MetaProps {
+declare const Meta: import("svelte").Component<Partial<{
     title: string;
     description: string;
     keywords: string;
     robots: string;
     charset: string;
     viewport: string;
-}
-declare const Meta: import("svelte").Component<MetaProps, {}, "">;
+}>, {}, "">;
 type Meta = ReturnType<typeof Meta>;
 export default Meta;

package/dist/components/presentation/Carousel.svelte

@@ -46,7 +46,7 @@
 		</div>
 	</div>
 	<Button
-		type="link"
+		type="button"
 		css="carousel__prev"
 		style="order: -1 !important;width: 50px;height: 100%;background: none;border: none !important;align-self: center;"
 		onclick={() => embla.scrollPrev()}
@@ -69,7 +69,7 @@
 		{/if}
 	</Button>
 	<Button
-		type="link"
+		type="button"
 		css="carousel__next"
 		style="order: 1000 !important;width: 50px;height: 100%;background: none; border: none !important;align-self: center;"
 		onclick={() => embla.scrollNext()}

package/dist/components/presentation/ImageCompare.svelte

@@ -64,6 +64,7 @@
 	on:resize={resize}
 />
 
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	class="container"
 	{style}

package/dist/index.d.ts

@@ -20,6 +20,6 @@ export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
-export { Type, Size } from './components/form/Input.js';
+export { default as Switch } from './components/form/Switch.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';

package/dist/index.js

@@ -37,7 +37,7 @@ export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte
  */
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
-export { Type, Size } from './components/form/Input.js';
+export { default as Switch } from './components/form/Switch.svelte';
 /*
  * Content
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.0.0",
+	"version": "4.0.1",
 	"watch": {
 		"build": {
 			"patterns": [