entasis 0.10.1 → 0.11.0

package/dist/components/Form/Form/form.mcp.js

@@ -215,6 +215,72 @@ Use type: 'field' when Form must own a value but a custom control must render it
 
 The controller exposes value, disabled, required, validation state, accessible ids, controlAttrs, and the control attachment. The entry participates in bind:value, visibility, validation, submission, and InferFormValue through the same FieldState owner as built-in controls.
 
+## App-defined input types
+
+An app can add its own input types to every Form and ask() dialog, by name, so entries stay plain data that serializes (JSON from a server, a tool call, a database). Two steps, once per app.
+
+Type it: augment \`FormInputRegistry\` with the value the input holds and the props its entries take.
+
+\`\`\`ts
+// doc-fence: skip (imports a sibling component; tooling/component-contract/consumer-form-input.ts checks this exact setup against the package)
+import { registerFormInputs } from './index.ts';
+import MoneyInput from './MoneyInput.svelte';
+
+export type Money = { amount: number; currency: string };
+
+declare module 'entasis/form' {
+	interface FormInputRegistry {
+		money: { value: Money; props: { currencies?: string[] } };
+	}
+}
+
+registerFormInputs({
+	money: {
+		component: MoneyInput,
+		isEmpty: (value) => value?.amount === undefined,
+		validate: (value) => (value.amount < 0 ? 'Must not be negative' : null)
+	}
+});
+\`\`\`
+
+Register it: call registerFormInputs at the top level of a module the server and the browser both load before a form renders, such as one the root layout imports. Its keys are checked against the registry; built-in type names are refused, and registering a type again replaces it.
+
+The component renders the control alone. Form wraps it in Field (label, description, errors) and hands it the field it registered, typed from the registry, plus the entry's own props:
+
+\`\`\`svelte
+<!-- doc-fence: skip -->
+<!-- Needs the money registration above; tooling/component-contract/consumer-money-input.svelte is the checked copy. -->
+<script lang="ts">
+	import type { FormInputComponentProps } from './index.ts';
+
+	let { field, currencies = ['EUR'] }: FormInputComponentProps<'money'> = $props();
+	const currency = $derived(field.value?.currency ?? currencies[0] ?? 'EUR');
+</script>
+
+<input
+	type="number"
+	{...field.controlAttrs}
+	{@attach field.control}
+	value={field.value?.amount ?? ''}
+	oninput={(event) => field.setValue({ amount: Number(event.currentTarget.value), currency })}
+/>
+\`\`\`
+
+Entries then use the type like a built-in one, in Form inputs, groups, and ask():
+
+\`\`\`ts
+// doc-fence: skip (needs the money registration above)
+const result = await ask({
+	title: 'Set a price',
+	confirm: 'Save',
+	cancel: 'Cancel',
+	inputs: { price: { type: 'money', label: 'Price', required: true, currencies: ['EUR', 'USD'] } }
+});
+if (result.submitted) result.value.price; // Money
+\`\`\`
+
+Every Field entry option applies (label, description, required, disabled, size, density, visible, defaultValue, onValidate, onValueChange, slots); any other key goes to the component. required rejects what isEmpty reports empty (by default null, undefined, an empty string, or an empty array); validate runs for every entry of the type, before the entry's own onValidate. The value takes part in bind:value, visibility, validation, submission, and InferFormValue like a built-in input's. An entry whose type is neither built-in nor registered throws when the form reads it.
+
 ## Non-value entries
 
 Use type: 'action' to place a labelled row of buttons in the ordered inputs flow. It accepts optional label and description content plus the same Form-aware action objects as the top-level actions prop. Its label position follows the Form layout unless labelPosition overrides it. Form size is the default button size, action density follows the Form, and loading or disabled protection cannot be overridden while the Form is submitting.

package/dist/components/Form/Form/form.registry.d.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'svelte';
+import * as v from 'valibot';
+import type { RegisteredInputType } from '../Field/field.js';
+import type { FieldValidationResult } from '../Field/field.state.svelte.js';
+import type { FormInputDefinition, FormRegisteredInput, FormRenderableInput } from './form.js';
+/** The definitions `registerFormInputs` takes: one per `FormInputRegistry` key, all optional. */
+export type FormInputDefinitions = {
+    [T in RegisteredInputType]?: FormInputDefinition<T>;
+};
+/** A definition with its value type erased, as the registry stores and Form renders it. */
+export type RegisteredFormInputDefinition = {
+    component: Component<Record<string, unknown>>;
+    isEmpty: (value: unknown) => boolean;
+    validate?: (value: unknown) => FieldValidationResult;
+};
+/**
+ * Registers the components behind the app's `FormInputRegistry` types, so entries such as
+ * `{ type: 'money', label: 'Price' }` render in every Form and ask() dialog. Call it at the top
+ * level of a module the server and the browser both load before a form renders, such as one the
+ * root layout imports. Registering a type again replaces it, so hot reloads keep working.
+ *
+ * Returns a function that removes these registrations.
+ */
+export declare function registerFormInputs(inputs: FormInputDefinitions): () => void;
+export declare const getFormInputDefinition: (type: string) => RegisteredFormInputDefinition | undefined;
+export declare const isRegisteredFormInput: (input: FormRenderableInput) => input is FormRegisteredInput;
+/** The `required`/optional check a registered type gets, in the built-in schemas' terms. */
+export declare function getRegisteredInputSchema(definition: RegisteredFormInputDefinition, required: boolean): v.GenericSchema;

package/dist/components/Form/Form/form.registry.js

@@ -0,0 +1,62 @@
+import * as v from 'valibot';
+import { schemas } from '../Field/schemas.js';
+// Form's own entry kinds; the built-in input types are rejected through the schema table.
+const ENTRY_KINDS = new Set(['field', 'custom', 'action', 'group']);
+const definitions = new Map();
+const isEmptyValue = (value) => value === null ||
+    value === undefined ||
+    value === '' ||
+    (Array.isArray(value) && value.length === 0);
+/**
+ * Registers the components behind the app's `FormInputRegistry` types, so entries such as
+ * `{ type: 'money', label: 'Price' }` render in every Form and ask() dialog. Call it at the top
+ * level of a module the server and the browser both load before a form renders, such as one the
+ * root layout imports. Registering a type again replaces it, so hot reloads keep working.
+ *
+ * Returns a function that removes these registrations.
+ */
+export function registerFormInputs(inputs) {
+    const added = [];
+    // Erased: inside the library the registry is empty, so each definition's own type is `never`.
+    const entries = Object.entries(inputs);
+    for (const [type, definition] of entries) {
+        if (!definition)
+            continue;
+        if (ENTRY_KINDS.has(type) || Object.hasOwn(schemas.required, type)) {
+            throw new Error(`[Form] "${type}" is a built-in input type and cannot be registered.`);
+        }
+        added.push([
+            type,
+            {
+                // The registry erases each definition's value type; Form hands the component the
+                // field it registered for that type, which restores it.
+                component: definition.component,
+                isEmpty: definition.isEmpty ?? isEmptyValue,
+                validate: definition.validate
+            }
+        ]);
+    }
+    for (const [type, definition] of added)
+        definitions.set(type, definition);
+    return () => {
+        for (const [type, definition] of added) {
+            if (definitions.get(type) === definition)
+                definitions.delete(type);
+        }
+    };
+}
+export const getFormInputDefinition = (type) => definitions.get(type);
+export const isRegisteredFormInput = (input) => definitions.has(input.type);
+const registeredSchemas = new WeakMap();
+/** The `required`/optional check a registered type gets, in the built-in schemas' terms. */
+export function getRegisteredInputSchema(definition, required) {
+    let entry = registeredSchemas.get(definition);
+    if (!entry) {
+        entry = {
+            required: v.pipe(v.unknown(), v.check((value) => !definition.isEmpty(value))),
+            optional: v.unknown()
+        };
+        registeredSchemas.set(definition, entry);
+    }
+    return required ? entry.required : entry.optional;
+}

package/dist/components/Form/Form/form.state.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Attachment } from 'svelte/attachments';
 import { SvelteMap } from 'svelte/reactivity';
 import type { FieldState } from '../Field/field.state.svelte.js';
-import type { FieldValue, InputType } from '../Field/field.js';
+import type { FieldType, FieldValue, InputType } from '../Field/field.js';
 import type { FormGroup, FormInputs, FormRenderableInput, FormSubmitHandler, FormValueRecord, InferFormValue, LiveFormValue } from './form.js';
 type FormStateOptions<I extends FormInputs> = {
     inputs: I;
@@ -26,18 +26,31 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         get controlAttrs(): import("../Field/field.state.svelte.js").FieldControlAttributes;
         setValue: (nextValue: FieldValue<T> | null | undefined) => void;
         syncValue: (nextValue: FieldValue<T> | null | undefined) => void;
-        checkSchema(value?: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | null | undefined): import("valibot", { with: { "resolution-mode": "require" } }).SafeParseResult<import("valibot", { with: { "resolution-mode": "require" } }).BaseSchema<unknown, unknown, import("valibot", { with: { "resolution-mode": "require" } }).BaseIssue<unknown>>>;
+        get definition(): import("./form.registry.js").RegisteredFormInputDefinition | undefined;
+        checkSchema(value?: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | {
+            amount: number;
+            currency: string;
+        } | null | undefined): import("valibot", { with: { "resolution-mode": "require" } }).SafeParseResult<import("valibot", { with: { "resolution-mode": "require" } }).BaseSchema<unknown, unknown, import("valibot", { with: { "resolution-mode": "require" } }).BaseIssue<unknown>>>;
         get isValid(): boolean;
         validate: (value?: FieldValue<T> | null | undefined) => readonly [boolean, unknown];
-        value?: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | null | undefined;
+        value?: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | {
+            amount: number;
+            currency: string;
+        } | null | undefined;
         errors: string[] | boolean;
         focused: boolean;
-        type: InputType;
+        type: FieldType;
         required?: boolean;
         disabled?: boolean;
         visible?: boolean;
-        onValidate?: ((value: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | null) => import("../Field/field.state.svelte.js").FieldValidationResult) | undefined;
-        onValueChange?: ((value: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | null) => void) | undefined;
+        onValidate?: ((value: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | {
+            amount: number;
+            currency: string;
+        } | null) => import("../Field/field.state.svelte.js").FieldValidationResult) | undefined;
+        onValueChange?: ((value: string | number | boolean | string[] | number[] | Date | Blob | File | File[] | [Date | null, Date | null] | import("../Field/field.js").KeyValuePair[] | {
+            amount: number;
+            currency: string;
+        } | null) => void) | undefined;
         id: string;
     }>;
     loading: boolean;
@@ -853,6 +866,13 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_9["type"] : never : never : never>> : FieldValue<Extract<T_1[K_1], import("./form.js").FormValueInput> extends infer T_10 ? T_10 extends Extract<T_1[K_1], import("./form.js").FormValueInput> ? T_10 extends import("./form.js").FormFieldEntry<infer Input extends InputType> ? Input : T_10 extends (Omit<{
         type: "time";
     } & {
@@ -1625,6 +1645,13 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_10["type"] : never : never : never> | null; } : never) & (((({ [K_3 in keyof I]: I[K_3] extends infer T_6 ? T_6 extends I[K_3] ? T_6 extends FormGroup<infer Inputs extends import("./form.js").FormGroupInputs> ? (T_6 extends infer T_7 ? T_7 extends T_6 ? T_7 extends {
         visible: infer Visibility;
     } ? boolean extends Visibility ? true : Extract<Visibility, false | ((value: FormValueRecord) => boolean)> extends never ? false : true : false : never : never) extends true ? { [K_6 in keyof Inputs]: Omit<Inputs[K_6], "visible"> & {
@@ -2431,6 +2458,13 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_12["type"] : never : never : never>> : FieldValue<Extract<T_4[K_4], import("./form.js").FormValueInput> extends infer T_13 ? T_13 extends Extract<T_4[K_4], import("./form.js").FormValueInput> ? T_13 extends import("./form.js").FormFieldEntry<infer Input extends InputType> ? Input : T_13 extends (Omit<{
         type: "time";
     } & {
@@ -3203,10 +3237,17 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_13["type"] : never : never : never> | null) | undefined; } : never) extends infer T ? { [K in keyof T]: T[K]; } : never>;
     constructor(options: FormStateOptions<I>);
-    registerField<T extends InputType>(field: FieldState<T>): () => void;
-    updateFieldValue<T extends InputType>(field: FieldState<T>, notify?: boolean): void;
+    registerField<T extends FieldType>(field: FieldState<T>): () => void;
+    updateFieldValue<T extends FieldType>(field: FieldState<T>, notify?: boolean): void;
     keyboardNavigation: Attachment<HTMLElement>;
     private handleKeydown;
     isInputVisible(name: string): boolean;

package/dist/components/Form/Form/form.state.svelte.js

@@ -2,6 +2,7 @@ import { setContext, untrack } from 'svelte';
 import { on } from 'svelte/events';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { flattenFormInputs, getFormValueInputType } from './form.js';
+import { getFormInputDefinition } from './form.registry.js';
 import { isFieldVisible } from './visibility.js';
 const focusableControl = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
 const enterNavigationInputTypes = new Set([
@@ -220,8 +221,8 @@ export class FormState {
         }
         for (const { name, input } of definitions) {
             const inputType = getFormValueInputType(input);
-            if (!supportedInputTypes.has(inputType)) {
-                throw new Error(`Form field "${name}" uses unsupported input type "${String(inputType)}".`);
+            if (!supportedInputTypes.has(inputType) && !getFormInputDefinition(inputType)) {
+                throw new Error(`Form field "${name}" uses unsupported input type "${String(inputType)}". Register app-defined types with registerFormInputs().`);
             }
             if (!hasOwn(externalValue, name))
                 continue;

package/dist/components/Form/Form/index.d.ts

@@ -3,6 +3,7 @@ export { Ask, ask } from '../Ask/index.js';
 export type { AskButton, AskDialogOptions, AskOptions, AskProps, AskResult } from '../Ask/index.js';
 export type { FormLayout, FormProps, FormVariant } from './form.props.js';
 export { FormState } from './form.state.svelte.js';
+export { registerFormInputs, type FormInputDefinitions } from './form.registry.js';
 export type { FieldLabelPosition } from '../Field/field.js';
 export { formTheme, setFormTheme, useFormTheme, type FormTheme, type FormThemeProps } from './form.theme.js';
-export type { FormInput, FormAction, FormActionInput, FormCustomInput, FormInputAction, FormInputState, FormFieldController, FormFieldInput, FormFieldEntry, FormGroup, FormGroupColumns, FormGroupInputs, FormInputsWithState, FormInputs, FormRenderableInput, FormValueInput, FlattenFormInputs, InferFormValue, LiveFormValue, FormSubmitHandler, MaybePromise } from './form.js';
+export type { FormInput, FormAction, FormActionInput, FormCustomInput, FormInputAction, FormInputState, FormFieldController, FormFieldInput, FormFieldEntry, FormInputComponentProps, FormInputDefinition, FormInputRegistry, FormRegisteredInput, FormGroup, FormGroupColumns, FormGroupInputs, FormInputsWithState, FormInputs, FormRenderableInput, FormValueInput, FlattenFormInputs, InferFormValue, LiveFormValue, FormSubmitHandler, MaybePromise } from './form.js';

package/dist/components/Form/Form/index.js

@@ -1,4 +1,5 @@
 export { default as Form } from './Form.svelte';
 export { Ask, ask } from '../Ask/index.js';
 export { FormState } from './form.state.svelte.js';
+export { registerFormInputs } from './form.registry.js';
 export { formTheme, setFormTheme, useFormTheme } from './form.theme.js';

package/dist/components/Form/Form/visibility.d.ts

@@ -4801,21 +4801,6 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
     name?: string | undefined;
     label?: import("../../Slot/slot.js").Slot<undefined> | undefined;
     items: import("../TagGroup/tagGroup.props.js").TagGroupOption[];
-    header?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    actions?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    description?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    helper?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    footer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    errorsContainer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    onValueChange?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => void) | undefined;
-    defaultValue?: import("../TagGroup/tagGroup.props.js").TagGroupValue | undefined;
-    required?: boolean | undefined;
-    density?: import("../../../types/theme.js").Density | undefined;
-    labelPosition?: FieldLabelPosition;
-    onValidate?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => string[] | boolean) | undefined;
-    fieldAttrs?: import("../Field/field.js").FieldAttributes | undefined;
-    errors?: string[] | boolean | undefined;
-    focused?: boolean | undefined;
     field?: {
         name: string;
         size: Sizes;
@@ -4831,6 +4816,7 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
         get controlAttrs(): import("../Field/field.state.svelte.js").FieldControlAttributes;
         setValue: (nextValue: import("../Field/field.js").FieldValue<T> | null | undefined) => void;
         syncValue: (nextValue: import("../Field/field.js").FieldValue<T> | null | undefined) => void;
+        get definition(): import("./form.registry.js").RegisteredFormInputDefinition | undefined;
         checkSchema(value?: string | string[] | null | undefined): import("valibot", { with: { "resolution-mode": "require" } }).SafeParseResult<import("valibot", { with: { "resolution-mode": "require" } }).BaseSchema<unknown, unknown, import("valibot", { with: { "resolution-mode": "require" } }).BaseIssue<unknown>>>;
         get isValid(): boolean;
         validate: (value?: import("../Field/field.js").FieldValue<T> | null | undefined) => readonly [boolean, unknown];
@@ -4845,6 +4831,21 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
         onValueChange?: ((value: string | string[] | null) => void) | undefined;
         id: string;
     } | undefined;
+    header?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    actions?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    description?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    helper?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    footer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    errorsContainer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    onValueChange?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => void) | undefined;
+    defaultValue?: import("../TagGroup/tagGroup.props.js").TagGroupValue | undefined;
+    required?: boolean | undefined;
+    density?: import("../../../types/theme.js").Density | undefined;
+    labelPosition?: FieldLabelPosition;
+    onValidate?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => string[] | boolean) | undefined;
+    fieldAttrs?: import("../Field/field.js").FieldAttributes | undefined;
+    errors?: string[] | boolean | undefined;
+    focused?: boolean | undefined;
     labelFor?: string | false | undefined;
     multiple?: boolean | undefined;
     unselectedColor?: import("../../../types/theme.js").Colors | undefined;
@@ -10417,21 +10418,6 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
     name?: string | undefined;
     label?: import("../../Slot/slot.js").Slot<undefined> | undefined;
     items: import("../TagGroup/tagGroup.props.js").TagGroupOption[];
-    header?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    actions?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    description?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    helper?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    footer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    errorsContainer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
-    onValueChange?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => void) | undefined;
-    defaultValue?: import("../TagGroup/tagGroup.props.js").TagGroupValue | undefined;
-    required?: boolean | undefined;
-    density?: import("../../../types/theme.js").Density | undefined;
-    labelPosition?: FieldLabelPosition;
-    onValidate?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => string[] | boolean) | undefined;
-    fieldAttrs?: import("../Field/field.js").FieldAttributes | undefined;
-    errors?: string[] | boolean | undefined;
-    focused?: boolean | undefined;
     field?: {
         name: string;
         size: Sizes;
@@ -10447,6 +10433,7 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
         get controlAttrs(): import("../Field/field.state.svelte.js").FieldControlAttributes;
         setValue: (nextValue: import("../Field/field.js").FieldValue<T> | null | undefined) => void;
         syncValue: (nextValue: import("../Field/field.js").FieldValue<T> | null | undefined) => void;
+        get definition(): import("./form.registry.js").RegisteredFormInputDefinition | undefined;
         checkSchema(value?: string | string[] | null | undefined): import("valibot", { with: { "resolution-mode": "require" } }).SafeParseResult<import("valibot", { with: { "resolution-mode": "require" } }).BaseSchema<unknown, unknown, import("valibot", { with: { "resolution-mode": "require" } }).BaseIssue<unknown>>>;
         get isValid(): boolean;
         validate: (value?: import("../Field/field.js").FieldValue<T> | null | undefined) => readonly [boolean, unknown];
@@ -10461,6 +10448,21 @@ export declare function prepareInputProps(input: FormFieldInput, size: Sizes, la
         onValueChange?: ((value: string | string[] | null) => void) | undefined;
         id: string;
     } | undefined;
+    header?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    actions?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    description?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    helper?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    footer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    errorsContainer?: import("../../Slot/slot.js").Slot<undefined> | undefined;
+    onValueChange?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => void) | undefined;
+    defaultValue?: import("../TagGroup/tagGroup.props.js").TagGroupValue | undefined;
+    required?: boolean | undefined;
+    density?: import("../../../types/theme.js").Density | undefined;
+    labelPosition?: FieldLabelPosition;
+    onValidate?: ((value: import("../TagGroup/tagGroup.props.js").TagGroupValue) => string[] | boolean) | undefined;
+    fieldAttrs?: import("../Field/field.js").FieldAttributes | undefined;
+    errors?: string[] | boolean | undefined;
+    focused?: boolean | undefined;
     labelFor?: string | false | undefined;
     multiple?: boolean | undefined;
     unselectedColor?: import("../../../types/theme.js").Colors | undefined;

package/dist/components/Form/MultiStepForm/multiStepForm.state.svelte.d.ts

@@ -833,6 +833,13 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_15["type"] : never : never : never>> : import("../Field/field.js").FieldValue<Extract<T_1[K_1], import("../Form/form.js").FormValueInput> extends infer T_16 ? T_16 extends Extract<T_1[K_1], import("../Form/form.js").FormValueInput> ? T_16 extends import("../Form/form.js").FormFieldEntry<infer Input extends import("../Field/field.js").InputType> ? Input : T_16 extends (Omit<{
         type: "time";
     } & {
@@ -1605,6 +1612,13 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_16["type"] : never : never : never> | null; } : never) & (((((MergedMultiStepFormInputs<I> extends infer T_8 extends FormInputs ? { [K_3 in keyof T_8]: T_8[K_3] extends infer T_9 ? T_9 extends T_8[K_3] ? T_9 extends import("../Form/form.js").FormGroup<infer Inputs extends import("../Form/form.js").FormGroupInputs> ? (T_9 extends infer T_10 ? T_10 extends T_9 ? T_10 extends {
         visible: infer Visibility;
     } ? boolean extends Visibility ? true : Extract<Visibility, false | ((value: FormValueRecord) => boolean)> extends never ? false : true : false : never : never) extends true ? { [K_6 in keyof Inputs]: Omit<Inputs[K_6], "visible"> & {
@@ -2411,6 +2425,13 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_20["type"] : never : never : never>> : import("../Field/field.js").FieldValue<Extract<T_6[K_4], import("../Form/form.js").FormValueInput> extends infer T_21 ? T_21 extends Extract<T_6[K_4], import("../Form/form.js").FormValueInput> ? T_21 extends import("../Form/form.js").FormFieldEntry<infer Input extends import("../Field/field.js").InputType> ? Input : T_21 extends (Omit<{
         type: "time";
     } & {
@@ -3183,6 +3204,13 @@ export declare class MultiStepFormState<I extends MultiStepFormItems = FormStep[
         theme?: import("../PinInput/pinInput.theme.js").PinInputThemeProps & import("../Field/field.js").InputProps<"pin">["theme"];
     }, "visible"> & {
         visible?: boolean | ((value: FormValueRecord) => boolean);
+    }) | ({
+        visible?: boolean | ((value: FormValueRecord) => boolean);
+        class?: string;
+    } & Omit<import("../Field/field.js").InputProps<"test-money">, "class" | "name" | "visible"> & {
+        currencies?: readonly string[];
+    } & {
+        type: "test-money";
     }) ? T_21["type"] : never : never : never> | null) | undefined; } : never) extends infer T ? { [K in keyof T]: T[K]; } : never>;
     progress: {
         value: number;

package/dist/components/Marquee/Marquee.svelte

@@ -33,11 +33,6 @@
 		return `${Math.max(0.1, speed)}s`;
 	});
 
-	const gap = $derived.by(() => {
-		if (size === 'small') return '0.5rem';
-		if (size === 'large') return '1.5rem';
-		return '1rem';
-	});
 	const configuredCopyCount = $derived.by(() => {
 		if (!Number.isFinite(numberOfCopies)) return 2;
 		return Math.min(MAX_COPY_COUNT, Math.max(2, Math.floor(numberOfCopies)));
@@ -80,7 +75,7 @@
 	data-reverse={reverse ? 'true' : undefined}
 	data-fade={fade ? 'true' : undefined}
 	class={classes.root({ direction, size, fade, class: className })}
-	style="--animation-duration: {animationDuration}; --gap: {gap};"
+	style="--animation-duration: {animationDuration};"
 	{@attach observeRoot}
 	{...attachments}
 >
@@ -144,4 +139,11 @@
 	:global(html[data-entasis-reduce-motion] .animate-marquee-up) {
 		animation: none;
 	}
+
+	/* A still marquee starts at its first item, so only its trailing edge, where the row is cut,
+	   keeps the fade; a faded leading edge would half-hide the first item. */
+	:global(html[data-entasis-reduce-motion]) div[data-slot='marquee'][data-fade] {
+		--scroll-fade-s: 0px;
+		--scroll-fade-t: 0px;
+	}
 </style>

package/dist/components/Marquee/marquee.mcp.d.ts

@@ -1 +1 @@
-export declare const marqueeDescription = "\n# Marquee Component\n\nThe Marquee component creates an infinite scrolling animation for displaying content. It automatically duplicates the slot content to create a seamless infinite loop effect and supports customizable speed, direction, fade effects, and pause-on-hover functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst items = [\n\t\t{ id: 1, text: 'Item 1' },\n\t\t{ id: 2, text: 'Item 2' },\n\t\t{ id: 3, text: 'Item 3' }\n\t];\n</script>\n\n<Marquee>\n\t{#each items as item}\n\t\t<div class=\"px-4 py-2 bg-surface rounded\">\n\t\t\t{item.text}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Props\n\n### Core Props\n- **children**: Snippet (required)\n  - Content to display in the marquee\n  - Parent component handles iteration over items\n  - Content is automatically duplicated based on `numberOfCopies`\n\n- **direction**: 'left' | 'up' (default: 'left')\n  - `'left'`: Horizontal scrolling from right to left\n  - `'up'`: Vertical scrolling from bottom to top\n\n- **numberOfCopies**: number (default: 2)\n  - Minimum number of times to duplicate the content for a seamless loop\n  - The component measures the viewport and first copy, then adds copies when the content is too short to cover the viewport continuously\n  - The effective count is bounded to 100 copies\n\n### Animation Props\n- **speed**: 'fast' | 'normal' | 'slow' | number (default: 'fast')\n  - Animation speed control\n  - `'fast'`: 20 seconds per cycle\n  - `'normal'`: 40 seconds per cycle\n  - `'slow'`: 80 seconds per cycle\n  - `number`: Custom duration in seconds (e.g., `30` for 30 seconds)\n\n- **reverse**: boolean (default: false)\n  - If true, animation runs in reverse direction\n  - For 'left': scrolls left to right\n  - For 'up': scrolls top to bottom\n\n- **pauseOnHover**: boolean (default: true)\n  - If true, animation pauses when mouse hovers over the marquee\n  - If false, animation continues regardless of hover state\n\n### Visual Props\n- **fade**: boolean (default: true)\n  - If true, applies the shared scroll-fade utility at the marquee edges\n  - Uses a static scroll-fade mode because the marquee is clipped animation, not a native scroll container\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Controls spacing between duplicated content copies\n  - `small`: Compact spacing (gap-2)\n  - `normal`: Standard spacing (gap-4)\n  - `large`: Expanded spacing (gap-6)\n\n### Styling Props\n- **ref**: HTMLDivElement | null (bindable)\n  - Reference to the marquee container\n\n- **class**: string\n  - Additional CSS classes for the marquee container\n\n- **innerClass**: string\n  - Additional CSS classes for each duplicated copy of the content\n\n- **theme**: MarqueeThemeProps\n  - Custom theme overrides for advanced styling\n\n## Examples\n\n### Basic Horizontal Marquee\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst testimonials = [\n\t\t{ author: 'John Doe', quote: 'Amazing product!' },\n\t\t{ author: 'Jane Smith', quote: 'Highly recommended!' },\n\t\t{ author: 'Bob Johnson', quote: 'Best purchase ever!' }\n\t];\n</script>\n\n<Marquee>\n\t{#each testimonials as item}\n\t\t<div class=\"px-8 py-4 bg-surface rounded-lg\">\n\t\t\t<p class=\"text-lg font-semibold\">\"{item.quote}\"</p>\n\t\t\t<p class=\"text-sm text-muted\">\u2014 {item.author}</p>\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### Logo Carousel\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst logos = [\n\t\t{ name: 'Company 1', logo: '/logo1.png' },\n\t\t{ name: 'Company 2', logo: '/logo2.png' },\n\t\t{ name: 'Company 3', logo: '/logo3.png' }\n\t];\n</script>\n\n<Marquee speed=\"normal\" size=\"large\">\n\t{#each logos as logo}\n\t\t<img src={logo.logo} alt={logo.name} class=\"h-12 w-auto\" />\n\t{/each}\n</Marquee>\n```\n\n### Vertical Marquee\n\n```svelte\n<Marquee direction=\"up\" class=\"h-[400px]\">\n\t{#each items as item}\n\t\t<div class=\"px-6 py-4 bg-surface rounded\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### With Fade Effect\n\n```svelte\n<Marquee fade={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Reverse Direction\n\n```svelte\n<Marquee reverse={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Speed\n\n```svelte\n<Marquee speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Different Sizes\n\n```svelte\n<!-- Small -->\n<Marquee size=\"small\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Normal (default) -->\n<Marquee size=\"normal\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Large -->\n<Marquee size=\"large\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Number of Copies\n\n```svelte\n<!-- More copies for smoother appearance -->\n<Marquee numberOfCopies={4} speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Disable Pause on Hover\n\n```svelte\n<Marquee pauseOnHover={false}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Combined Effects\n\n```svelte\n<Marquee \n\tfade={true}\n\treverse={true}\n\tspeed=\"slow\"\n\tsize=\"large\"\n>\n\t{#each items as item}\n\t\t<div class=\"px-8 py-6 bg-surface rounded-lg\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Structure\n\nThe Marquee component renders:\n- A container `<div>` with overflow hidden and optional scroll-fade utility classes\n- Multiple copies of the content (default 2) based on `numberOfCopies`\n- Each copy has the animation applied independently\n- Parent component iterates over items in the slot\n\n## Animation Details\n\n- Uses CSS keyframe animations for smooth GPU-accelerated performance\n- Content is duplicated `numberOfCopies` times to create seamless infinite scroll\n- Animation translates each copy by -100% of its width/height plus gap\n- Animation duration is controlled via CSS custom property `--animation-duration`\n- Pause on hover uses CSS `animation-play-state` for instant response\n- Reverse mode uses CSS `direction: reverse` for the animation\n\n## Accessibility\n\n- Uses `role=\"presentation\"` on the container as the marquee is decorative\n- Consider providing alternative static content for screen readers\n- Ensure sufficient color foreground for text content\n- Pause on hover helps users interact with and read content\n- Animation is disabled when the user requests reduced motion\n\n## Notes\n\n- Parent component is responsible for iterating over items (similar to Carousel pattern)\n- Content is automatically duplicated internally based on `numberOfCopies`\n- The component uses CSS animations for optimal performance\n- Custom speed values are specified in seconds (e.g., `30` = 30 seconds per cycle)\n- For vertical marquees, ensure the container has a defined height\n- Increasing `numberOfCopies` creates smoother appearance but uses more DOM elements\n- The fade effect uses the shared scroll-fade utility classes\n\n## Theme Customization\n\nThe Marquee component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main marquee container styles\n- **inner**: Inner scrolling content container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - direction: 'left' | 'up' - Scroll direction\n  - size: 'small' | 'normal' | 'large' - Gap between duplicated content\n  - fade: boolean - Applies shared scroll-fade utility classes\n\n**inner**:\n- base: Base classes for scrolling content\n- Variants:\n  - direction: 'left' | 'up' - Animation direction\n  - size: 'small' | 'normal' | 'large' - Gap size\n  - pauseOnHover: boolean - Pause animation on hover\n  - reverse: boolean - Reverse animation direction\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Marquee \n  theme={{\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: 'gap-4'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Custom Animation Styling**:\n```svelte\n<Marquee \n  theme={{\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      },\n      size: {\n        large: 'gap-6'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMarqueeTheme } from './index.ts';\n  \n  setMarqueeTheme({\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: 'gap-4'\n      }\n    },\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      }\n    }\n  });\n</script>\n```\n";
+export declare const marqueeDescription = "\n# Marquee Component\n\nThe Marquee component creates an infinite scrolling animation for displaying content. It automatically duplicates the slot content to create a seamless infinite loop effect and supports customizable speed, direction, fade effects, and pause-on-hover functionality.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst items = [\n\t\t{ id: 1, text: 'Item 1' },\n\t\t{ id: 2, text: 'Item 2' },\n\t\t{ id: 3, text: 'Item 3' }\n\t];\n</script>\n\n<Marquee>\n\t{#each items as item}\n\t\t<div class=\"px-4 py-2 bg-surface rounded\">\n\t\t\t{item.text}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Props\n\n### Core Props\n- **children**: Snippet (required)\n  - Content to display in the marquee\n  - Parent component handles iteration over items\n  - Content is automatically duplicated based on `numberOfCopies`\n\n- **direction**: 'left' | 'up' (default: 'left')\n  - `'left'`: Horizontal scrolling from right to left\n  - `'up'`: Vertical scrolling from bottom to top\n\n- **numberOfCopies**: number (default: 2)\n  - Minimum number of times to duplicate the content for a seamless loop\n  - The component measures the viewport and first copy, then adds copies when the content is too short to cover the viewport continuously\n  - The effective count is bounded to 100 copies\n\n### Animation Props\n- **speed**: 'fast' | 'normal' | 'slow' | number (default: 'fast')\n  - Animation speed control\n  - `'fast'`: 20 seconds per cycle\n  - `'normal'`: 40 seconds per cycle\n  - `'slow'`: 80 seconds per cycle\n  - `number`: Custom duration in seconds (e.g., `30` for 30 seconds)\n\n- **reverse**: boolean (default: false)\n  - If true, animation runs in reverse direction\n  - For 'left': scrolls left to right\n  - For 'up': scrolls top to bottom\n\n- **pauseOnHover**: boolean (default: true)\n  - If true, animation pauses when mouse hovers over the marquee\n  - If false, animation continues regardless of hover state\n\n### Visual Props\n- **fade**: boolean (default: true)\n  - If true, applies the shared scroll-fade utility at the marquee edges\n  - Uses a static scroll-fade mode because the marquee is clipped animation, not a native scroll container\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Sets the marquee's one spacing value, `--gap`, from the theme spacing scale\n  - `small`: `--space-md`\n  - `normal`: `--space-xl`\n  - `large`: `--layout-space-md`\n  - The copies, the items inside each copy and the loop step all use `--gap`, so the loop stays\n    seamless at every size and theme spacing. To respace a marquee, set `--gap` once on the root\n    (`class=\"[--gap:var(--space-lg)]\"`); never redeclare it on the copies.\n\n### Styling Props\n- **ref**: HTMLDivElement | null (bindable)\n  - Reference to the marquee container\n\n- **class**: string\n  - Additional CSS classes for the marquee container\n\n- **innerClass**: string\n  - Additional CSS classes for each duplicated copy of the content\n\n- **theme**: MarqueeThemeProps\n  - Custom theme overrides for advanced styling\n\n## Examples\n\n### Basic Horizontal Marquee\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst testimonials = [\n\t\t{ author: 'John Doe', quote: 'Amazing product!' },\n\t\t{ author: 'Jane Smith', quote: 'Highly recommended!' },\n\t\t{ author: 'Bob Johnson', quote: 'Best purchase ever!' }\n\t];\n</script>\n\n<Marquee>\n\t{#each testimonials as item}\n\t\t<div class=\"px-8 py-4 bg-surface rounded-lg\">\n\t\t\t<p class=\"text-lg font-semibold\">\"{item.quote}\"</p>\n\t\t\t<p class=\"text-sm text-muted\">\u2014 {item.author}</p>\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### Logo Carousel\n\n```svelte\n<script>\n\timport { Marquee } from 'entasis/marquee';\n\t\n\tconst logos = [\n\t\t{ name: 'Company 1', logo: '/logo1.png' },\n\t\t{ name: 'Company 2', logo: '/logo2.png' },\n\t\t{ name: 'Company 3', logo: '/logo3.png' }\n\t];\n</script>\n\n<Marquee speed=\"normal\" size=\"large\">\n\t{#each logos as logo}\n\t\t<img src={logo.logo} alt={logo.name} class=\"h-12 w-auto\" />\n\t{/each}\n</Marquee>\n```\n\n### Vertical Marquee\n\n```svelte\n<Marquee direction=\"up\" class=\"h-[400px]\">\n\t{#each items as item}\n\t\t<div class=\"px-6 py-4 bg-surface rounded\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n### With Fade Effect\n\n```svelte\n<Marquee fade={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Reverse Direction\n\n```svelte\n<Marquee reverse={true}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Speed\n\n```svelte\n<Marquee speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Different Sizes\n\n```svelte\n<!-- Small -->\n<Marquee size=\"small\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Normal (default) -->\n<Marquee size=\"normal\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n\n<!-- Large -->\n<Marquee size=\"large\">\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Custom Number of Copies\n\n```svelte\n<!-- More copies for smoother appearance -->\n<Marquee numberOfCopies={4} speed={30}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Disable Pause on Hover\n\n```svelte\n<Marquee pauseOnHover={false}>\n\t{#each items as item}\n\t\t<div>{item.content}</div>\n\t{/each}\n</Marquee>\n```\n\n### Combined Effects\n\n```svelte\n<Marquee \n\tfade={true}\n\treverse={true}\n\tspeed=\"slow\"\n\tsize=\"large\"\n>\n\t{#each items as item}\n\t\t<div class=\"px-8 py-6 bg-surface rounded-lg\">\n\t\t\t{item.content}\n\t\t</div>\n\t{/each}\n</Marquee>\n```\n\n## Structure\n\nThe Marquee component renders:\n- A container `<div>` with overflow hidden and optional scroll-fade utility classes\n- Multiple copies of the content (default 2) based on `numberOfCopies`\n- Each copy has the animation applied independently\n- Parent component iterates over items in the slot\n\n## Animation Details\n\n- Uses CSS keyframe animations for smooth GPU-accelerated performance\n- Content is duplicated `numberOfCopies` times to create seamless infinite scroll\n- Animation translates each copy by -100% of its width/height plus `--gap`, the same value the copies are spaced with\n- Animation duration is controlled via CSS custom property `--animation-duration`\n- Pause on hover uses CSS `animation-play-state` for instant response\n- Reverse mode uses CSS `direction: reverse` for the animation\n\n## Accessibility\n\n- Uses `role=\"presentation\"` on the container as the marquee is decorative\n- Consider providing alternative static content for screen readers\n- Ensure sufficient color foreground for text content\n- Pause on hover helps users interact with and read content\n- Animation is disabled when the user requests reduced motion; the still row then fades only its trailing edge\n\n## Notes\n\n- Parent component is responsible for iterating over items (similar to Carousel pattern)\n- Content is automatically duplicated internally based on `numberOfCopies`\n- The component uses CSS animations for optimal performance\n- Custom speed values are specified in seconds (e.g., `30` = 30 seconds per cycle)\n- For vertical marquees, ensure the container has a defined height\n- Increasing `numberOfCopies` creates smoother appearance but uses more DOM elements\n- The fade effect uses the shared scroll-fade utility classes\n\n## Theme Customization\n\nThe Marquee component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main marquee container styles\n- **inner**: Inner scrolling content container styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - direction: 'left' | 'up' - Scroll direction\n  - size: 'small' | 'normal' | 'large' - Gap between duplicated content\n  - fade: boolean - Applies shared scroll-fade utility classes\n\n**inner**:\n- base: Base classes for scrolling content\n- Variants:\n  - direction: 'left' | 'up' - Animation direction\n  - size: 'small' | 'normal' | 'large' - Gap size\n  - pauseOnHover: boolean - Pause animation on hover\n  - reverse: boolean - Reverse animation direction\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Marquee \n  theme={{\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: '[--gap:var(--space-lg)]'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Custom Animation Styling**:\n```svelte\n<Marquee \n  theme={{\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      }\n    }\n  }}\n>\n  {#each items as item}\n    <div>{item.content}</div>\n  {/each}\n</Marquee>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMarqueeTheme } from './index.ts';\n  \n  setMarqueeTheme({\n    root: {\n      base: 'group flex overflow-hidden relative',\n      direction: {\n        left: 'flex-row'\n      },\n      size: {\n        normal: '[--gap:var(--space-lg)]'\n      }\n    },\n    inner: {\n      base: 'flex shrink-0 justify-around whitespace-nowrap',\n      direction: {\n        left: 'flex-row animate-marquee-left'\n      },\n      pauseOnHover: {\n        true: 'group-hover:[animation-play-state:paused]'\n      }\n    }\n  });\n</script>\n```\n";

package/dist/components/Marquee/marquee.mcp.js

@@ -65,10 +65,13 @@ The Marquee component creates an infinite scrolling animation for displaying con
   - Uses a static scroll-fade mode because the marquee is clipped animation, not a native scroll container
 
 - **size**: 'small' | 'normal' | 'large' (default: 'normal')
-  - Controls spacing between duplicated content copies
-  - \`small\`: Compact spacing (gap-2)
-  - \`normal\`: Standard spacing (gap-4)
-  - \`large\`: Expanded spacing (gap-6)
+  - Sets the marquee's one spacing value, \`--gap\`, from the theme spacing scale
+  - \`small\`: \`--space-md\`
+  - \`normal\`: \`--space-xl\`
+  - \`large\`: \`--layout-space-md\`
+  - The copies, the items inside each copy and the loop step all use \`--gap\`, so the loop stays
+    seamless at every size and theme spacing. To respace a marquee, set \`--gap\` once on the root
+    (\`class="[--gap:var(--space-lg)]"\`); never redeclare it on the copies.
 
 ### Styling Props
 - **ref**: HTMLDivElement | null (bindable)
@@ -245,7 +248,7 @@ The Marquee component renders:
 
 - Uses CSS keyframe animations for smooth GPU-accelerated performance
 - Content is duplicated \`numberOfCopies\` times to create seamless infinite scroll
-- Animation translates each copy by -100% of its width/height plus gap
+- Animation translates each copy by -100% of its width/height plus \`--gap\`, the same value the copies are spaced with
 - Animation duration is controlled via CSS custom property \`--animation-duration\`
 - Pause on hover uses CSS \`animation-play-state\` for instant response
 - Reverse mode uses CSS \`direction: reverse\` for the animation
@@ -256,7 +259,7 @@ The Marquee component renders:
 - Consider providing alternative static content for screen readers
 - Ensure sufficient color foreground for text content
 - Pause on hover helps users interact with and read content
-- Animation is disabled when the user requests reduced motion
+- Animation is disabled when the user requests reduced motion; the still row then fades only its trailing edge
 
 ## Notes
 
@@ -307,7 +310,7 @@ The theme object contains the following parts:
         left: 'flex-row'
       },
       size: {
-        normal: 'gap-4'
+        normal: '[--gap:var(--space-lg)]'
       }
     }
   }}
@@ -329,9 +332,6 @@ The theme object contains the following parts:
       },
       pauseOnHover: {
         true: 'group-hover:[animation-play-state:paused]'
-      },
-      size: {
-        large: 'gap-6'
       }
     }
   }}
@@ -354,7 +354,7 @@ The theme object contains the following parts:
         left: 'flex-row'
       },
       size: {
-        normal: 'gap-4'
+        normal: '[--gap:var(--space-lg)]'
       }
     },
     inner: {