fuma 2.1.6 → 2.5.0

package/dist/input/InputTextarea.svelte

@@ -3,6 +3,7 @@
 	import { TextareaAutosize } from 'runed'
 	import Issues from './Issues.svelte'
 	import type { TextareaProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
@@ -10,12 +11,27 @@
 		value = $bindable(),
 		class: klass,
 		maxHeight = 200,
+		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
 		field?: RemoteFormField<string>
+		/**
+		 * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+		 * ensuite le relais et devient la source de vérité.
+		 */
 		value?: string
 		maxHeight?: number
+		/**
+		 * `bare` ne rend que le champ, sans enveloppe ni libellé visible: `label` devient le
+		 * placeholder et le nom accessible, et `class` s'applique au `<textarea>`. C'est la
+		 * variante d'un champ posé dans une barre de saisie, où l'appelant place lui-même ce qui
+		 * l'accompagne.
+		 */
+		variant?: 'floating' | 'block' | 'bare'
+		/** Rendu à droite du libellé. Sans effet sur les variantes `floating` et `bare`. */
+		labelAppend?: Snippet
 	} & TextareaProps = $props()
 
 	let textarea = $state<HTMLTextAreaElement>()
@@ -24,20 +40,51 @@
 		input: () => field?.value() || value || '',
 		maxHeight: (() => maxHeight)()
 	})
+
+	const inputId = $props.id()
+	const textareaProps = $derived({
+		id: inputId,
+		placeholder: variant === 'block' ? '' : label,
+		'aria-label': variant === 'bare' ? label : undefined,
+		...props
+	})
+	const textareaClass = $derived(['textarea w-full', variant === 'bare' && klass])
 </script>
 
-<label class="floating-label">
-	<span>{label}</span>
-	<textarea
-		placeholder={label}
-		class={['textarea', klass]}
-		bind:this={textarea}
-		{...field?.as('text')}
-		bind:value
-		{...props}
-	></textarea>
+{#snippet snippetInput()}
+	{#if field}
+		<!-- Pas de `bind:value` ici: avec un `field`, `value` n'est que la valeur initiale,
+		     comme dans InputString et InputNumber. -->
+		<textarea
+			bind:this={textarea}
+			{...textareaProps}
+			class={textareaClass}
+			{...value === undefined ? field.as('text') : field.as('text', value)}
+		></textarea>
+	{:else}
+		<textarea bind:this={textarea} {...textareaProps} class={textareaClass} bind:value></textarea>
+	{/if}
+{/snippet}
+
+{#if variant === 'floating'}
+	<label class={['floating-label', klass]}>
+		<span>{label}</span>
+		{@render snippetInput()}
+		<Issues {field} />
+	</label>
+{:else if variant === 'bare'}
+	{@render snippetInput()}
 	<Issues {field} />
-</label>
+{:else}
+	<fieldset class={['fieldset', klass]}>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
+		{@render snippetInput()}
+		<Issues {field} />
+	</fieldset>
+{/if}
 
 <style>
 	textarea[aria-invalid='true'] {

package/dist/input/InputTextarea.svelte.d.ts

@@ -1,10 +1,24 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { TextareaProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;
+    /**
+     * Sans `field`, la valeur liée. Avec, la valeur initiale du champ — celui-ci prend
+     * ensuite le relais et devient la source de vérité.
+     */
     value?: string;
     maxHeight?: number;
+    /**
+     * `bare` ne rend que le champ, sans enveloppe ni libellé visible: `label` devient le
+     * placeholder et le nom accessible, et `class` s'applique au `<textarea>`. C'est la
+     * variante d'un champ posé dans une barre de saisie, où l'appelant place lui-même ce qui
+     * l'accompagne.
+     */
+    variant?: 'floating' | 'block' | 'bare';
+    /** Rendu à droite du libellé. Sans effet sur les variantes `floating` et `bare`. */
+    labelAppend?: Snippet;
 } & TextareaProps;
 declare const InputTextarea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputTextarea = ReturnType<typeof InputTextarea>;

package/dist/input/index.d.ts

@@ -1,11 +1,14 @@
 export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputCheckboxes } from './InputCheckboxes.svelte';
+export { default as InputDateTime } from './InputDateTime.svelte';
+export { default as InputMultiSelect } from './InputMultiSelect.svelte';
 export { default as InputNumber } from './InputNumber.svelte';
 export { default as InputRadio } from './InputRadio.svelte';
 export { default as InputRange } from './InputRange.svelte';
-export { default as InputRelation } from './InputRelation.svelte';
 export { default as InputSelect } from './InputSelect.svelte';
 export { default as InputSelectNative } from './InputSelectNative.svelte';
 export { default as InputString } from './InputString.svelte';
 export { default as InputTextarea } from './InputTextarea.svelte';
 export { default as Issues } from './Issues.svelte';
 export type * from './type.js';
+export { type ItemsSource, type QueryLike, useItems } from './useItems.svelte.js';

package/dist/input/index.js

@@ -1,10 +1,13 @@
 export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputCheckboxes } from './InputCheckboxes.svelte';
+export { default as InputDateTime } from './InputDateTime.svelte';
+export { default as InputMultiSelect } from './InputMultiSelect.svelte';
 export { default as InputNumber } from './InputNumber.svelte';
 export { default as InputRadio } from './InputRadio.svelte';
 export { default as InputRange } from './InputRange.svelte';
-export { default as InputRelation } from './InputRelation.svelte';
 export { default as InputSelect } from './InputSelect.svelte';
 export { default as InputSelectNative } from './InputSelectNative.svelte';
 export { default as InputString } from './InputString.svelte';
 export { default as InputTextarea } from './InputTextarea.svelte';
 export { default as Issues } from './Issues.svelte';
+export { useItems } from './useItems.svelte.js';

package/dist/input/useItems.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { RemoteQueryFunction } from '@sveltejs/kit';
+/**
+ * Ce que la liste d'un select et `Loading` lisent d'une source. `RemoteQuery` le satisfait
+ * structurellement, ce qui évite d'imposer une remote query à qui n'en a pas.
+ */
+export type QueryLike<T> = {
+    readonly current: T | undefined;
+    readonly loading: boolean;
+    readonly error: unknown;
+    readonly ready: boolean;
+};
+/**
+ * Les trois façons d'alimenter un select:
+ * - un tableau déjà chargé — le filtre reste local;
+ * - une fonction, synchrone ou non — elle porte son propre filtre;
+ * - une remote query — le serveur filtre.
+ */
+export type ItemsSource<Item> = Item[] | ((arg: {
+    search: string;
+}) => Item[] | Promise<Item[]>) | RemoteQueryFunction<{
+    search: string;
+}, Item[]>;
+export type UseItemsOptions<Item> = {
+    source: () => ItemsSource<Item>;
+    search: () => string;
+    /** Base du filtre par défaut, et libellé affiché à défaut de snippet. */
+    getLabel: (item: Item) => string;
+    filter?: () => ((item: Item, search: string) => boolean) | undefined;
+    debounceMs?: number;
+};
+/** `item.id`, puis `item.value`: les deux formes que prennent les items en pratique. */
+export declare function defaultGetValue<Item>(item: Item): string;
+/** Un item porteur d'un `label` s'affiche par celui-ci, ce qui rend les options lisibles sans snippet. */
+export declare function defaultGetLabel<Item>(item: Item, getValue: (item: Item) => string): string;
+/**
+ * Ramène les trois formes de `ItemsSource` à la seule que lisent les selects et `Loading`.
+ */
+export declare function useItems<Item>({ source, search, getLabel, filter, debounceMs }: UseItemsOptions<Item>): QueryLike<Item[]>;

package/dist/input/useItems.svelte.js

@@ -0,0 +1,142 @@
+import debounce from 'debounce';
+/** `item.id`, puis `item.value`: les deux formes que prennent les items en pratique. */
+export function defaultGetValue(item) {
+    if (item && typeof item === 'object') {
+        if ('id' in item && typeof item.id === 'string')
+            return item.id;
+        if ('value' in item && typeof item.value === 'string')
+            return item.value;
+    }
+    return JSON.stringify(item);
+}
+/** Un item porteur d'un `label` s'affiche par celui-ci, ce qui rend les options lisibles sans snippet. */
+export function defaultGetLabel(item, getValue) {
+    if (item && typeof item === 'object' && 'label' in item) {
+        if (typeof item.label === 'string')
+            return item.label;
+    }
+    return getValue(item);
+}
+/** Casse et diacritiques ignorées: « Genève » se trouve en tapant « geneve ». */
+function normalize(value) {
+    return value
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/\p{Diacritic}/gu, '');
+}
+/** `RemoteQuery` est une `Promise` augmentée: `ready` est ce qui l'en distingue. */
+function isQueryLike(value) {
+    return !!value && typeof value === 'object' && 'ready' in value;
+}
+/**
+ * Ramène les trois formes de `ItemsSource` à la seule que lisent les selects et `Loading`.
+ */
+export function useItems({ source, search, getLabel, filter, debounceMs = 150 }) {
+    // On temporise la valeur cherchée plutôt que l'appel: un seul mécanisme couvre les trois
+    // formes, et les remote queries cessent de partir à chaque frappe.
+    let debounced = $state(search());
+    const apply = debounce((value) => {
+        debounced = value;
+    }, debounceMs);
+    $effect(() => {
+        const value = search();
+        // Une recherche vide s'applique tout de suite: ouvrir le popover ne doit rien attendre.
+        if (!value) {
+            apply.clear();
+            debounced = value;
+            return;
+        }
+        apply(value);
+    });
+    const resolved = $derived.by(() => {
+        const items = source();
+        if (Array.isArray(items))
+            return { kind: 'static', value: items };
+        // Appel unique: c'est son retour, et lui seul, qui distingue les trois formes.
+        const result = items({ search: debounced });
+        if (Array.isArray(result))
+            return { kind: 'resolved', value: result };
+        if (isQueryLike(result))
+            return { kind: 'query', value: result };
+        return { kind: 'promise', value: result };
+    });
+    const pending = $state({
+        current: [],
+        loading: false,
+        error: undefined,
+        ready: false
+    });
+    let sequence = 0;
+    $effect(() => {
+        if (resolved.kind !== 'promise')
+            return;
+        // Une réponse en retard ne doit pas écraser une plus récente.
+        const current = ++sequence;
+        pending.loading = true;
+        resolved.value
+            .then((items) => {
+            if (current !== sequence)
+                return;
+            pending.current = items;
+            pending.error = undefined;
+            pending.ready = true;
+        })
+            .catch((error) => {
+            if (current !== sequence)
+                return;
+            pending.error = error;
+        })
+            .finally(() => {
+            if (current !== sequence)
+                return;
+            pending.loading = false;
+        });
+    });
+    function filterStatic(items) {
+        if (!debounced)
+            return items;
+        const match = filter?.();
+        if (match)
+            return items.filter((item) => match(item, debounced));
+        const needle = normalize(debounced);
+        return items.filter((item) => normalize(getLabel(item)).includes(needle));
+    }
+    return {
+        get current() {
+            switch (resolved.kind) {
+                case 'static':
+                    return filterStatic(resolved.value);
+                case 'resolved':
+                    return resolved.value;
+                case 'query':
+                    return resolved.value.current ?? [];
+                case 'promise':
+                    return pending.current;
+            }
+        },
+        get loading() {
+            // Sans quoi la fenêtre de temporisation afficherait un résultat périmé sans indicateur.
+            if (search() !== debounced)
+                return true;
+            if (resolved.kind === 'query')
+                return resolved.value.loading;
+            if (resolved.kind === 'promise')
+                return pending.loading;
+            return false;
+        },
+        get error() {
+            if (resolved.kind === 'query')
+                return resolved.value.error;
+            if (resolved.kind === 'promise')
+                return pending.error;
+            return undefined;
+        },
+        get ready() {
+            if (resolved.kind === 'query')
+                return resolved.value.ready;
+            if (resolved.kind === 'promise')
+                return pending.ready;
+            return true;
+        }
+    };
+}

package/dist/loading/Loading.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { GhostIcon, LoaderCircleIcon, TriangleAlertIcon } from '@lucide/svelte'
-	import type { RemoteQuery } from '@sveltejs/kit'
 	import type { ClassValue } from 'svelte/elements'
 	import { fade } from 'svelte/transition'
+	import type { QueryLike } from '../input/useItems.svelte.js'
 
 	let {
 		query,
@@ -10,7 +10,8 @@
 		error = 'Une erreur est survenue',
 		class: klass
 	}: {
-		query: RemoteQuery<unknown>
+		/** Structurel plutôt que `RemoteQuery`: une source locale s'affiche de la même façon. */
+		query: QueryLike<unknown>
 		empty?: string
 		error?: string
 		class?: ClassValue

package/dist/loading/Loading.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { RemoteQuery } from '@sveltejs/kit';
 import type { ClassValue } from 'svelte/elements';
+import type { QueryLike } from '../input/useItems.svelte.js';
 type $$ComponentProps = {
-    query: RemoteQuery<unknown>;
+    /** Structurel plutôt que `RemoteQuery`: une source locale s'affiche de la même façon. */
+    query: QueryLike<unknown>;
     empty?: string;
     error?: string;
     class?: ClassValue;

package/dist/popover/Popover.svelte

@@ -6,7 +6,7 @@
 		type PopoverOptions,
 		type PopoverType,
 		usePopover
-	} from './popover.svelte.js'
+	} from './usePopover.svelte.js'
 
 	let {
 		children,
@@ -37,7 +37,6 @@
 	}
 
 	div[popover]:popover-open {
-		inset: 5px;
 		transition-property: opacity, scale;
 		transition-duration: 150ms;
 		opacity: 1;

package/dist/popover/Popover.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import { type Placement, type PopoverOptions, type PopoverType } from './usePopover.svelte.js';
+type $$ComponentProps = {
+    children: Snippet<[PopoverType]>;
+    trigger: Snippet<[PopoverType]>;
+    placement?: Placement;
+    class?: ClassValue;
+    style?: string;
+} & PopoverOptions;
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/popover/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export * from './popover.svelte.js';
+export * from './usePopover.svelte.js';

package/dist/popover/index.js

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export * from './popover.svelte.js';
+export * from './usePopover.svelte.js';

package/dist/popover/{popover.svelte.d.ts → usePopover.svelte.d.ts}

@@ -7,6 +7,7 @@ export type PopoverOptions = {
     placement?: Placement;
     listenClick?: boolean;
     listenFocus?: boolean;
+    listenFocusout?: boolean;
     listenHover?: boolean;
     /** Only when listenHover={true} */
     hideDelay?: number;
@@ -14,7 +15,7 @@ export type PopoverOptions = {
     onHide?: () => void;
     hotKey?: string;
 };
-export declare function usePopover({ mode, placement, listenClick, listenFocus, listenHover, hideDelay, onShow, onHide, hotKey }?: PopoverOptions): {
+export declare function usePopover({ mode, placement, listenClick, listenFocus, listenFocusout, listenHover, hideDelay, onShow, onHide, hotKey }?: PopoverOptions): {
     show: () => void;
     hide: () => void;
     readonly isOpen: boolean;

package/dist/popover/usePopover.svelte.js

@@ -0,0 +1,145 @@
+import debounce from 'debounce';
+import { untrack } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { on } from 'svelte/events';
+const placements = {
+    top: 'top',
+    'top-end': 'top span-left',
+    'top-start': 'top span-right',
+    bottom: 'bottom',
+    'bottom-end': 'bottom span-left',
+    'bottom-start': 'bottom span-right',
+    left: 'left',
+    'left-end': 'left span-top',
+    'left-start': 'left span-bottom',
+    right: 'right',
+    'right-end': 'right span-top',
+    'right-start': 'right span-bottom'
+};
+let popoverInstanceCount = 0;
+export function usePopover({ mode = 'auto', placement = 'bottom-start', listenClick = true, listenFocus = true, listenFocusout = false, listenHover = false, hideDelay = 400, onShow, onHide, hotKey } = {}) {
+    const uid = popoverInstanceCount++;
+    const anchorName = `--anchor-${uid}`;
+    let content = $state();
+    let activator = $state();
+    let isOpen = $state(false);
+    const hideDebounced = debounce(hide, hideDelay);
+    let isHiding = false;
+    function show() {
+        // En refermant, le navigateur rend le focus au déclencheur si le focus était dans le
+        // popover — un bouton « Ok » ou « Effacer », typiquement. Sans ce garde, le `focusin`
+        // qui s'ensuit rouvre aussitôt ce qu'on vient de fermer, et `hide()` ne fait rien.
+        if (isHiding)
+            return;
+        content?.showPopover();
+        onShow?.();
+    }
+    function hide() {
+        isHiding = true;
+        content?.hidePopover();
+        isHiding = false;
+        onHide?.();
+    }
+    function onMouseEnter() {
+        hideDebounced.clear();
+        show();
+    }
+    function onToggle(event) {
+        isOpen = event.newState === 'open';
+    }
+    function onFocusOut({ relatedTarget }) {
+        // Le focus ne va nulle part — `null`, ou `body` selon le navigateur: typiquement un
+        // `mousedown` sur un élément non focusable, un jour du calendrier par exemple. Fermer ici
+        // escamoterait la cible avant que le `click` ne l'atteigne; hors du popover, le
+        // light-dismiss natif s'en charge de toute façon.
+        if (!(relatedTarget instanceof Node) || relatedTarget === document.body)
+            return;
+        if (!content?.contains(relatedTarget) && relatedTarget !== activator)
+            return hide();
+    }
+    function attachTriggerListeners(node) {
+        const cleanups = [];
+        if (listenClick) {
+            cleanups.push(on(node, 'click', show));
+        }
+        if (listenFocus) {
+            cleanups.push(on(node, 'focusin', show));
+        }
+        if (listenFocus || listenFocusout) {
+            cleanups.push(on(node, 'focusout', onFocusOut));
+        }
+        if (listenHover) {
+            cleanups.push(on(node, 'mouseenter', onMouseEnter));
+            cleanups.push(on(node, 'mouseleave', hideDebounced));
+        }
+        if (hotKey) {
+            cleanups.push(on(window, 'keydown', handleHotKey));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    }
+    function attachPopoverListeners(node) {
+        const cleanups = [];
+        cleanups.push(on(node, 'toggle', onToggle));
+        if (listenHover) {
+            cleanups.push(on(node, 'mouseenter', onMouseEnter));
+            cleanups.push(on(node, 'mouseleave', hideDebounced));
+        }
+        if (listenFocus || listenFocusout) {
+            cleanups.push(on(node, 'focusout', onFocusOut));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    }
+    async function handleHotKey(event) {
+        const { metaKey, ctrlKey, key } = event;
+        if ((metaKey || ctrlKey) && key === hotKey) {
+            event.preventDefault();
+            show();
+            return;
+        }
+    }
+    return {
+        show,
+        hide,
+        get isOpen() {
+            return isOpen;
+        },
+        content: {
+            popover: mode,
+            [createAttachmentKey()]: (node) => {
+                untrack(() => (content = node));
+                node.style.positionAnchor = anchorName;
+                node.style.positionArea = placements[placement];
+                node.style.inset = 'auto';
+                node.style.positionTry = 'flip-x, flip-y';
+                // `fixed` et non `relative`: dans le top layer `relative` est absolutisé, le bloc
+                // conteneur devient alors le document et Chrome compense le défilement de page même
+                // quand l'ancre vit dans un sous-arbre `position: fixed` (tiroir, en-tête collant) qui,
+                // lui, ne défile pas — le popover dérivait d'exactement `window.scrollY`. `fixed` cale
+                // le bloc conteneur sur le viewport, ce qui rend aussi `position-try` viewport-relatif.
+                node.style.position = 'fixed';
+                const cleanup = attachPopoverListeners(node);
+                return () => {
+                    untrack(() => (content = undefined));
+                    cleanup();
+                };
+            }
+        },
+        trigger: {
+            [createAttachmentKey()]: (node) => {
+                untrack(() => (activator = node));
+                node.style.anchorName = anchorName;
+                const cleanup = attachTriggerListeners(node);
+                return () => {
+                    untrack(() => (activator = undefined));
+                    cleanup();
+                };
+            }
+        }
+    };
+}

package/dist/remote/useForm.d.ts

@@ -1,4 +1,4 @@
-import type { RemoteForm, RemoteFormInput } from '@sveltejs/kit';
+import type { RemoteForm, RemoteFormEnhanceCallback, RemoteFormInput } from '@sveltejs/kit';
 import type { StandardSchemaV1 } from 'runed/kit';
 import { type Attachment } from 'svelte/attachments';
 /**
@@ -7,10 +7,9 @@ import { type Attachment } from 'svelte/attachments';
  */
 export declare function useForm<Input extends RemoteFormInput | undefined, Output>(remoteForm: RemoteForm<Input, Output>, schema: StandardSchemaV1<Input>, debounceMs?: number): RemoteForm<Input, Output>;
 export declare function validationOnInput<Input extends RemoteFormInput | undefined, Output>(remoteForm: RemoteForm<Input, Output>, debounceMs?: number): Attachment<HTMLFormElement>;
-type UseEnhanceCallbackOptions<Input extends RemoteFormInput | void> = {
-    onSuccess?: (data: Input, form: HTMLFormElement) => void;
+type UseEnhanceCallbackOptions<Output> = {
+    onSuccess?: (result: Output | undefined, element: HTMLFormElement) => void;
     onError?: (err: unknown) => void;
 };
-type EnhanceCallback<Input extends RemoteFormInput | void> = Parameters<RemoteForm<Input, unknown>['enhance']>[0];
-export declare function useEnhanceCallback<Input extends RemoteFormInput | void>({ onSuccess, onError }: UseEnhanceCallbackOptions<Input>): EnhanceCallback<Input>;
+export declare function useEnhanceCallback<Input extends RemoteFormInput | void, Output>({ onSuccess, onError }: UseEnhanceCallbackOptions<Output>): RemoteFormEnhanceCallback<Input, Output>;
 export {};

package/dist/remote/useForm.js

@@ -29,10 +29,15 @@ export function validationOnInput(remoteForm, debounceMs = 1000) {
     return validation;
 }
 export function useEnhanceCallback({ onSuccess, onError }) {
-    return ({ submit, data, form }) => {
-        submit()
-            .then(() => {
-            onSuccess?.(data, form);
+    // L'instance passée au callback ne porte plus `data` ni `form`: la donnée soumise n'est plus
+    // exposée telle quelle, et l'élément s'appelle désormais `element`.
+    return (form) => {
+        form
+            .submit()
+            .then((succeeded) => {
+            // `submit()` résout `false` quand le préflight ou la validation serveur a échoué.
+            if (succeeded)
+                onSuccess?.(form.result, form.element);
         })
             .catch((err) => {
             console.error(err);

package/dist/state/index.d.ts

@@ -1 +1 @@
-export * from './param.svelte.js';
+export * from './param.js';

package/dist/state/index.js

@@ -1 +1 @@
-export * from './param.svelte.js';
+export * from './param.js';

package/dist/ui/button/ButtonDelete.svelte

@@ -8,6 +8,7 @@
 		formaction = '',
 		onclick: onclickProp,
 		onmouseleave: onmouseleaveProp,
+		class: klass,
 		...props
 	}: {
 		/** Form action URL triggered on confirmation */
@@ -16,7 +17,8 @@
 		btn?: boolean
 		/** Custom button content */
 		children?: Snippet<[{ waitConfirmation: boolean }]>
-	} & HTMLButtonAttributes = $props()
+		// `children` de `HTMLButtonAttributes` est un `Snippet<[]>`: l'intersection interdirait le paramètre.
+	} & Omit<HTMLButtonAttributes, 'children'> = $props()
 
 	let button: HTMLButtonElement
 	let waitConfirmation = $state(false)
@@ -47,9 +49,10 @@
 	class={[
 		btn && [
 			'btn',
-			waitConfirmation ? 'btn-outline btn-error' : 'text-error btn-ghost',
+			waitConfirmation ? 'btn-outline btn-error' : 'btn-ghost text-error',
 			props.disabled && 'btn-disabled'
-		]
+		],
+		klass
 	]}
 	formaction={waitConfirmation ? formaction : undefined}
 	{onclick}

package/dist/ui/button/ButtonDelete.svelte.d.ts

@@ -9,7 +9,7 @@ type $$ComponentProps = {
     children?: Snippet<[{
         waitConfirmation: boolean;
     }]>;
-} & HTMLButtonAttributes;
+} & Omit<HTMLButtonAttributes, 'children'>;
 declare const ButtonDelete: import("svelte").Component<$$ComponentProps, {}, "">;
 type ButtonDelete = ReturnType<typeof ButtonDelete>;
 export default ButtonDelete;