fuma 2.2.7 → 2.5.1

package/dist/input/InputBoolean.svelte

@@ -3,13 +3,17 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		field,
 		label,
 		checked = $bindable(),
 		hint,
+		labelAppend,
 		variant = 'checkbox',
+		class: klass,
+		disabled,
 		...props
 	}: {
 		label: string
@@ -20,6 +24,8 @@
 		 */
 		checked?: boolean
 		hint?: string
+		/** Rendu à droite du libellé, dans le `label`: un clic dessus bascule la case. */
+		labelAppend?: Snippet
 		variant?: 'checkbox' | 'switch'
 	} & InputProps = $props()
 
@@ -30,7 +36,8 @@
 	<label
 		class={[
 			'input block not-disabled:cursor-pointer not-disabled:hover:bg-base-200',
-			'group h-auto min-h-10 w-full'
+			'group h-auto min-h-10 w-full',
+			klass
 		]}
 	>
 		<!-- `.input` de daisyUI pose `white-space: nowrap`: sans `text-wrap`, un libellé un peu
@@ -38,17 +45,18 @@
 		     contenu, `--size` n'étant plus qu'un plancher. -->
 		<div class="flex min-h-(--size) items-center gap-2 py-1.5">
 			<div class="grow text-wrap">{label}</div>
+			{@render labelAppend?.()}
 			{#if field}
 				<!-- `as('checkbox')` sans valeur pose `checked: undefined`: la case d'un champ
 				     déjà à `true` partirait décochée, alors que la coche dessinée, elle, suit
 				     `checked`. Les deux ne se contredisent que si l'état initial n'est pas transmis. -->
 				{#if checked === undefined}
-					<input {...field.as('checkbox')} class={['peer w-0']} {...props} />
+					<input {...field.as('checkbox')} class={['peer w-0']} {disabled} {...props} />
 				{:else}
-					<input {...field.as('checkbox', checked)} class={['peer w-0']} {...props} />
+					<input {...field.as('checkbox', checked)} class={['peer w-0']} {disabled} {...props} />
 				{/if}
 			{:else}
-				<input type="checkbox" class={['peer w-0']} bind:checked {...props} />
+				<input type="checkbox" class={['peer w-0']} bind:checked {disabled} {...props} />
 			{/if}
 			{#if variant === 'checkbox'}
 				{@render variantCheckbox()}
@@ -67,6 +75,13 @@
 			</div>
 		{/if}
 	</label>
+	{#if field && !isChecked && !disabled}
+		<!-- Une case décochée ne transmet rien: sans ce relais, le serveur ne distinguerait pas
+		     « décochée » de « champ non rendu », et une valeur ne pourrait jamais repasser à faux.
+		     Il porte la clé de la case, d'où l'exclusion mutuelle — SvelteKit refuse un formulaire
+		     où une clé apparaît deux fois. Un contrôle désactivé, lui, ne transmet toujours rien. -->
+		<input {...field.as('hidden', false)} />
+	{/if}
 	<Issues {field} />
 </div>
 

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<boolean>;
@@ -9,6 +10,8 @@ type $$ComponentProps = {
      */
     checked?: boolean;
     hint?: string;
+    /** Rendu à droite du libellé, dans le `label`: un clic dessus bascule la case. */
+    labelAppend?: Snippet;
     variant?: 'checkbox' | 'switch';
 } & InputProps;
 declare const InputBoolean: import("svelte").Component<$$ComponentProps, {}, "checked">;

package/dist/input/InputCheckboxes.svelte

@@ -4,12 +4,14 @@
 	import { type Options, parseOptions } from '../utils/index.js'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		field,
 		label,
 		value = $bindable([]),
 		options: optionsProp,
+		labelAppend,
 		...props
 	}: {
 		field?: RemoteFormField<string[]>
@@ -20,6 +22,8 @@
 		 */
 		value?: string[]
 		options: Options
+		/** Rendu à droite du libellé. */
+		labelAppend?: Snippet
 	} & InputProps = $props()
 
 	const options = $derived(parseOptions(optionsProp))
@@ -32,7 +36,10 @@
 </script>
 
 <div class="flex flex-col gap-1">
-	<span class="label px-3 text-sm text-wrap">{label}</span>
+	<span class="label text-xs text-wrap">
+		<span>{label}</span>
+		{@render labelAppend?.()}
+	</span>
 	<div class="join join-vertical">
 		{#each options as option (option.value)}
 			{@const {

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

@@ -1,6 +1,7 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import { type Options } from '../utils/index.js';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     field?: RemoteFormField<string[]>;
     label: string;
@@ -10,6 +11,8 @@ type $$ComponentProps = {
      */
     value?: string[];
     options: Options;
+    /** Rendu à droite du libellé. */
+    labelAppend?: Snippet;
 } & InputProps;
 declare const InputCheckboxes: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputCheckboxes = ReturnType<typeof InputCheckboxes>;

package/dist/input/InputDateTime.svelte

@@ -6,6 +6,7 @@
 	import utcPlugin from 'dayjs/plugin/utc.js'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	dayjs.extend(utcPlugin)
 	dayjs.extend(timezonePlugin)
@@ -19,6 +20,7 @@
 		layout = 'split',
 		variant = 'block',
 		hint,
+		labelAppend,
 		transform = (v) => v,
 		onchange,
 		class: klass,
@@ -37,6 +39,8 @@
 		/** Sans effet sur `split`, dont la ligne de label porte le `hint`. */
 		variant?: 'floating' | 'block'
 		hint?: string
+		/** Rendu à droite du libellé, après le `hint`. */
+		labelAppend?: Snippet
 		/** Ajuste la valeur avant qu'elle ne soit posée — borne, arrondi, décalage. */
 		transform?: (value: Date) => Date
 		onchange?: (value: Date) => void
@@ -177,6 +181,7 @@
 			{#if hint}
 				<span class="ml-auto">{hint}</span>
 			{/if}
+			{@render labelAppend?.()}
 		</label>
 		{#if layout === 'datetime'}
 			{@render inputDateTime()}

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     /** La date part en ISO dans un champ caché: au schéma de la reconstruire. */
@@ -14,6 +15,8 @@ type $$ComponentProps = {
     /** Sans effet sur `split`, dont la ligne de label porte le `hint`. */
     variant?: 'floating' | 'block';
     hint?: string;
+    /** Rendu à droite du libellé, après le `hint`. */
+    labelAppend?: Snippet;
     /** Ajuste la valeur avant qu'elle ne soit posée — borne, arrondi, décalage. */
     transform?: (value: Date) => Date;
     onchange?: (value: Date) => void;

package/dist/input/InputMultiSelect.svelte

@@ -29,9 +29,12 @@
 		field,
 		value = $bindable([]),
 		placeholder = 'Selectionner des valeurs',
+		canReset = false,
 		class: klass,
+		disabled = false,
 		hint,
 		append,
+		labelAppend,
 		onSelect,
 		hotKey,
 		variant = 'block'
@@ -57,10 +60,15 @@
 		 */
 		value?: NoInfer<Item>[]
 		placeholder?: string
+		canReset?: boolean
 		class?: ClassValue
+		/** Les valeurs restent soumises, mais la sélection ne peut plus changer. */
+		disabled?: boolean
 		hint?: Snippet<[Item[]]>
 		/** Rendu à droite du champ de recherche: une action « créer », typiquement. */
 		append?: Snippet<[PopoverType]>
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 		onSelect?: (items: NoInfer<Item>[], popover: PopoverType) => void
 		hotKey?: string
 		variant?: 'floating' | 'block'
@@ -68,6 +76,10 @@
 
 	const inputId = $props.id()
 	const listId = `${inputId}-list`
+	// `<label for>` ne nomme que les éléments étiquetables, ce qu'un `div` n'est pas: sans
+	// cette référence explicite, le combobox reste sans nom accessible.
+	const labelId = `${inputId}-label`
+	let trigger = $state<HTMLDivElement>()
 
 	let search = $state('')
 	// Une énumération courte n'a que faire d'un champ de recherche; une fonction, elle, ne
@@ -91,7 +103,9 @@
 		listenFocus: false,
 		listenFocusout: true,
 		onShow: () => command.focusTrigger(),
-		hotKey: (() => hotKey)()
+		// Le déclencheur est un `div`: `disabled` ne le neutralise pas comme un bouton, et
+		// le raccourci ouvrirait un popover qu'aucun geste ne peut plus atteindre.
+		hotKey: (() => (disabled ? undefined : hotKey))()
 	})
 	// Un multi-select ne se referme pas à chaque choix: `popover.hide()` n'est appelé
 	// que par le bouton de fermeture.
@@ -120,6 +134,11 @@
 	function commit() {
 		// Les cases cachées suffisent à soumettre; `set` garde la validation à jour.
 		field?.set(selectedValues)
+		// Un choix n'émet aucun évènement de formulaire: les cases sont écrites par le code,
+		// et le popover reste ouvert — rien ne rend donc la main au déclencheur, contrairement
+		// au select simple. Sans cette annonce, ce qui surveille le formulaire (une barre de
+		// sauvegarde) ne voit la sélection qu'au choix suivant.
+		trigger?.dispatchEvent(new Event('change', { bubbles: true }))
 		onSelect?.(value, popover)
 	}
 </script>
@@ -132,25 +151,29 @@
 	<!-- Un `div` et non un `button`: les puces portent leur propre bouton de retrait, et
 	     un bouton ne peut pas en contenir un autre. -->
 	<div
+		bind:this={trigger}
 		id={inputId}
 		role="combobox"
 		aria-controls={listId}
+		aria-labelledby={label ? labelId : undefined}
 		aria-expanded={popover.isOpen}
 		aria-haspopup="listbox"
-		tabindex="0"
+		aria-disabled={disabled}
+		tabindex={disabled ? -1 : 0}
 		class={[
 			'input h-auto min-h-(--size) w-full flex-wrap items-center gap-1 py-1',
-			'not-disabled:cursor-pointer',
+			!disabled && 'cursor-pointer',
 			field?.issues()?.length && 'input-error',
 			klass
 		]}
 		onkeydown={(event) => {
+			if (disabled) return
 			if (event.key !== 'Enter' && event.key !== ' ') return
 			event.preventDefault()
 			popover.show()
 		}}
-		{...popover.trigger}
-		{...isSearchable ? {} : command.trigger}
+		{...disabled ? {} : popover.trigger}
+		{...isSearchable || disabled ? {} : command.trigger}
 	>
 		{#if !value.length}
 			<span class="opacity-60">{placeholder}</span>
@@ -162,19 +185,21 @@
 				>
 					<!-- item.icon not rerender if not wrapped in #key -->
 					{#key item}{@render selected(item)}{/key}
-					<button
-						type="button"
-						class="btn btn-circle btn-ghost btn-xs"
-						aria-label="Retirer"
-						use:tip={{ content: 'Retirer' }}
-						onclick={(event) => {
-							// Sans quoi le clic remonte au combobox et rouvre le popover.
-							event.stopPropagation()
-							remove(item)
-						}}
-					>
-						<XIcon size={12} />
-					</button>
+					{#if !disabled}
+						<button
+							type="button"
+							class="btn btn-circle btn-ghost btn-xs"
+							aria-label="Retirer"
+							use:tip={{ content: 'Retirer' }}
+							onclick={(event) => {
+								// Sans quoi le clic remonte au combobox et rouvre le popover.
+								event.stopPropagation()
+								remove(item)
+							}}
+						>
+							<XIcon size={12} />
+						</button>
+					{/if}
 				</span>
 			{/each}
 		{/if}
@@ -196,12 +221,15 @@
 		{@render triggerCombobox()}
 	{:else if variant === 'floating'}
 		<label class="floating-label">
-			<span>{label}</span>
+			<span id={labelId}>{label}</span>
 			{@render triggerCombobox()}
 		</label>
 	{:else}
 		<fieldset class="fieldset">
-			<label class="label text-wrap" for={inputId}>{label}</label>
+			<label id={labelId} class="label text-wrap" for={inputId}>
+				<span>{label}</span>
+				{@render labelAppend?.()}
+			</label>
 			{@render triggerCombobox()}
 		</fieldset>
 	{/if}
@@ -212,7 +240,7 @@
 		style="min-width: anchor-size(width);"
 		tabindex="-1"
 	>
-		{#if isSearchable || value.length || append}
+		{#if isSearchable || (canReset && value.length) || append}
 			<div class="sticky top-0 z-10 flex gap-2 bg-base-100/10 p-2 backdrop-blur-md">
 				{#if isSearchable}
 					<label class="input grow input-ghost input-sm">
@@ -228,7 +256,7 @@
 				{:else}
 					<div class="grow"></div>
 				{/if}
-				{#if value.length}
+				{#if canReset && value.length}
 					<button
 						class="btn btn-square btn-soft btn-sm"
 						type="button"
@@ -283,4 +311,14 @@
 	div[popover] {
 		border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
 	}
+
+	/* Le déclencheur est un `div`: ni `:disabled` ni `[disabled]` ne s'y appliquent, et le
+	   style désactivé de daisyUI passe à côté. Reproduit ici sur `aria-disabled`, le seul
+	   marqueur valide sur un `role="combobox"`. */
+	div[aria-disabled='true'] {
+		cursor: not-allowed;
+		background-color: var(--color-base-200);
+		border-color: var(--color-base-200);
+		box-shadow: none;
+	}
 </style>

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

@@ -29,10 +29,15 @@ declare function $$render<Item>(): {
          */
         value?: NoInfer<Item>[];
         placeholder?: string;
+        canReset?: boolean;
         class?: ClassValue;
+        /** Les valeurs restent soumises, mais la sélection ne peut plus changer. */
+        disabled?: boolean;
         hint?: Snippet<[Item[]]>;
         /** Rendu à droite du champ de recherche: une action « créer », typiquement. */
         append?: Snippet<[PopoverType]>;
+        /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+        labelAppend?: Snippet;
         onSelect?: (items: NoInfer<Item>[], popover: PopoverType) => void;
         hotKey?: string;
         variant?: "floating" | "block";

package/dist/input/InputNumber.svelte

@@ -2,6 +2,7 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
@@ -9,6 +10,7 @@
 		value = $bindable(),
 		class: klass,
 		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
@@ -19,6 +21,8 @@
 		 */
 		value?: number
 		variant?: 'floating' | 'block'
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 	} & InputProps = $props()
 
 	const inputId = $props.id()
@@ -50,7 +54,10 @@
 	</label>
 {:else}
 	<fieldset class={['fieldset', klass]}>
-		<label class="label text-wrap" for={inputId}>{label}</label>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
 		{@render snippetInput()}
 		<Issues {field} />
 	</fieldset>

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<number>;
@@ -9,6 +10,8 @@ type $$ComponentProps = {
      */
     value?: number;
     variant?: 'floating' | 'block';
+    /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+    labelAppend?: Snippet;
 } & InputProps;
 declare const InputNumber: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputNumber = ReturnType<typeof InputNumber>;

package/dist/input/InputRadio.svelte

@@ -2,24 +2,31 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import { type Options, parseOptions } from '../utils/index.js'
 	import Issues from './Issues.svelte'
+	import type { Snippet } from 'svelte'
 
 	let {
 		field,
 		label,
 		value = $bindable(),
-		options: optionsProp
+		options: optionsProp,
+		labelAppend
 	}: {
 		field?: RemoteFormField<string>
 		label: string
 		value?: string
 		options: Options
+		/** Rendu à droite du libellé. */
+		labelAppend?: Snippet
 	} = $props()
 
 	const options = $derived(parseOptions(optionsProp))
 </script>
 
 <div class="flex flex-col gap-1">
-	<span class="label px-3 text-sm text-wrap">{label}</span>
+	<span class="label text-xs text-wrap">
+		<span>{label}</span>
+		{@render labelAppend?.()}
+	</span>
 	<div class="join join-vertical">
 		{#each options as option (option.value)}
 			{@const { class: klass, ...props } = option}

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

@@ -1,10 +1,13 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import { type Options } from '../utils/index.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     field?: RemoteFormField<string>;
     label: string;
     value?: string;
     options: Options;
+    /** Rendu à droite du libellé. */
+    labelAppend?: Snippet;
 };
 declare const InputRadio: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputRadio = ReturnType<typeof InputRadio>;

package/dist/input/InputRange.svelte

@@ -2,12 +2,14 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
 		field,
 		value = $bindable(),
 		name,
+		labelAppend,
 		class: klass,
 		...props
 	}: {
@@ -20,12 +22,15 @@
 		value?: number
 		/** Sans `field`, ce qui nomme la valeur soumise. Avec, `field.as()` s'en charge. */
 		name?: string
+		/** Rendu à droite du libellé, avant la valeur courante. */
+		labelAppend?: Snippet
 	} & InputProps = $props()
 </script>
 
 <label>
 	<div class="flex gap-2 px-3 text-sm">
 		<span class="label text-wrap">{label}</span>
+		{@render labelAppend?.()}
 		<span class="label ml-auto">{field?.value() ?? value}</span>
 	</div>
 	{#if field}

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<number>;
@@ -10,6 +11,8 @@ type $$ComponentProps = {
     value?: number;
     /** Sans `field`, ce qui nomme la valeur soumise. Avec, `field.as()` s'en charge. */
     name?: string;
+    /** Rendu à droite du libellé, avant la valeur courante. */
+    labelAppend?: Snippet;
 } & InputProps;
 declare const InputRange: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputRange = ReturnType<typeof InputRange>;

package/dist/input/InputSelect.svelte

@@ -30,8 +30,10 @@
 		placeholder = 'Selectionner une valeur',
 		class: klass,
 		nullable,
+		disabled = false,
 		hint,
 		append,
+		labelAppend,
 		header,
 		proposalAppend,
 		onSelect,
@@ -65,9 +67,13 @@
 		placeholder?: string
 		class?: ClassValue
 		nullable?: boolean
+		/** La valeur reste soumise, mais la sélection ne peut plus changer. */
+		disabled?: boolean
 		hint?: Snippet<[Item | undefined]>
 		/** Rendu à droite du champ de recherche: une action « créer », typiquement. */
 		append?: Snippet<[PopoverType]>
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 		header?: Snippet<[PopoverType]>
 		onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void
 		hotKey?: string
@@ -99,7 +105,9 @@
 		listenFocus: false,
 		listenFocusout: true,
 		onShow: () => command.focusTrigger(),
-		hotKey: (() => hotKey)()
+		// Un bouton désactivé n'émet plus ni clic ni focus; le raccourci, lui, écoute la
+		// fenêtre et ouvrirait un popover qu'aucun geste ne peut plus atteindre.
+		hotKey: (() => (disabled ? undefined : hotKey))()
 	})
 	export const command = useCommand({
 		isEnable: () => popover.isOpen,
@@ -129,7 +137,8 @@
 	<button
 		id={inputId}
 		type="button"
-		class={['input', field?.issues()?.length && 'input-error', klass]}
+		{disabled}
+		class={['input w-full', field?.issues()?.length && 'input-error', klass]}
 		{...popover.trigger}
 		{...isSearchable ? {} : command.trigger}
 	>
@@ -165,7 +174,10 @@
 		</label>
 	{:else}
 		<fieldset class="fieldset">
-			<label class="label text-wrap" for={inputId}>{label}</label>
+			<label class="label text-wrap" for={inputId}>
+				<span>{label}</span>
+				{@render labelAppend?.()}
+			</label>
 			{@render triggerButton()}
 			<Issues {field} />
 			{@render hint?.(value)}

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

@@ -37,9 +37,13 @@ declare function $$render<Item>(): {
         placeholder?: string;
         class?: ClassValue;
         nullable?: boolean;
+        /** La valeur reste soumise, mais la sélection ne peut plus changer. */
+        disabled?: boolean;
         hint?: Snippet<[Item | undefined]>;
         /** Rendu à droite du champ de recherche: une action « créer », typiquement. */
         append?: Snippet<[PopoverType]>;
+        /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+        labelAppend?: Snippet;
         header?: Snippet<[PopoverType]>;
         onSelect?: (item: NoInfer<Item> | undefined, popover: PopoverType) => void;
         hotKey?: string;

package/dist/input/InputSelectNative.svelte

@@ -3,6 +3,7 @@
 	import { type Options, parseOptions } from '../index.js'
 	import Issues from './Issues.svelte'
 	import type { SelectProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
@@ -12,6 +13,7 @@
 		class: klass,
 		multiple,
 		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
@@ -23,6 +25,8 @@
 		 */
 		value?: string | string[]
 		variant?: 'floating' | 'block'
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 	} & SelectProps = $props()
 
 	const options = $derived(parseOptions(optionsProp))
@@ -63,7 +67,10 @@
 	</label>
 {:else}
 	<fieldset class={['fieldset', klass]}>
-		<label class="label text-wrap" for={inputId}>{label}</label>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
 		{@render snippetSelect()}
 		<Issues {field} />
 	</fieldset>

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

@@ -1,6 +1,7 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import { type Options } from '../index.js';
 import type { SelectProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     options: Options;
@@ -11,6 +12,8 @@ type $$ComponentProps = {
      */
     value?: string | string[];
     variant?: 'floating' | 'block';
+    /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+    labelAppend?: Snippet;
 } & SelectProps;
 declare const InputSelectNative: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputSelectNative = ReturnType<typeof InputSelectNative>;

package/dist/input/InputString.svelte

@@ -2,6 +2,7 @@
 	import type { RemoteFormField } from '@sveltejs/kit'
 	import Issues from './Issues.svelte'
 	import type { InputProps } from './type.js'
+	import type { Snippet } from 'svelte'
 
 	let {
 		label,
@@ -10,6 +11,7 @@
 		type = 'text',
 		class: klass,
 		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
@@ -20,6 +22,8 @@
 		 */
 		value?: string
 		variant?: 'floating' | 'block'
+		/** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+		labelAppend?: Snippet
 		type?:
 			| 'text'
 			| 'email'
@@ -65,7 +69,10 @@
 	</label>
 {:else}
 	<fieldset class={['fieldset', klass]}>
-		<label class="label text-wrap" for={inputId}>{label}</label>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
 		{@render snippetInput()}
 		<Issues {field} />
 	</fieldset>

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { InputProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;
@@ -9,6 +10,8 @@ type $$ComponentProps = {
      */
     value?: string;
     variant?: 'floating' | 'block';
+    /** Rendu à droite du libellé. Sans effet sur la variante `floating`. */
+    labelAppend?: Snippet;
     type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'select';
 } & InputProps;
 declare const InputString: import("svelte").Component<$$ComponentProps, {}, "value">;

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,
@@ -11,6 +12,7 @@
 		class: klass,
 		maxHeight = 200,
 		variant = 'block',
+		labelAppend,
 		...props
 	}: {
 		label: string
@@ -21,7 +23,15 @@
 		 */
 		value?: string
 		maxHeight?: number
-		variant?: 'floating' | 'block'
+		/**
+		 * `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>()
@@ -34,10 +44,11 @@
 	const inputId = $props.id()
 	const textareaProps = $derived({
 		id: inputId,
-		class: 'textarea w-full',
-		placeholder: variant === 'floating' ? label : '',
+		placeholder: variant === 'block' ? '' : label,
+		'aria-label': variant === 'bare' ? label : undefined,
 		...props
 	})
+	const textareaClass = $derived(['textarea w-full', variant === 'bare' && klass])
 </script>
 
 {#snippet snippetInput()}
@@ -47,10 +58,11 @@
 		<textarea
 			bind:this={textarea}
 			{...textareaProps}
+			class={textareaClass}
 			{...value === undefined ? field.as('text') : field.as('text', value)}
 		></textarea>
 	{:else}
-		<textarea bind:this={textarea} {...textareaProps} bind:value></textarea>
+		<textarea bind:this={textarea} {...textareaProps} class={textareaClass} bind:value></textarea>
 	{/if}
 {/snippet}
 
@@ -60,9 +72,15 @@
 		{@render snippetInput()}
 		<Issues {field} />
 	</label>
+{:else if variant === 'bare'}
+	{@render snippetInput()}
+	<Issues {field} />
 {:else}
 	<fieldset class={['fieldset', klass]}>
-		<label class="label text-wrap" for={inputId}>{label}</label>
+		<label class="label text-wrap" for={inputId}>
+			<span>{label}</span>
+			{@render labelAppend?.()}
+		</label>
 		{@render snippetInput()}
 		<Issues {field} />
 	</fieldset>

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

@@ -1,5 +1,6 @@
 import type { RemoteFormField } from '@sveltejs/kit';
 import type { TextareaProps } from './type.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     field?: RemoteFormField<string>;
@@ -9,7 +10,15 @@ type $$ComponentProps = {
      */
     value?: string;
     maxHeight?: number;
-    variant?: 'floating' | 'block';
+    /**
+     * `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/ui/button/ButtonDelete.svelte

@@ -17,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)
@@ -49,9 +50,9 @@
 		btn && [
 			'btn',
 			waitConfirmation ? 'btn-outline btn-error' : 'btn-ghost text-error',
-			props.disabled && 'btn-disabled',
-			klass
-		]
+			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;

package/dist/ui/table/Table.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" generics="Item extends ItemBase">
 	import { type Snippet, untrack } from 'svelte'
-	import { afterNavigate } from '$app/navigation'
 	import {
 		context,
 		createKeys,
@@ -41,16 +40,20 @@
 	const tableKey = untrack(() => key)
 	context.set(tableKey, createKeys(tableKey))
 
-	const initFields = () => (fields = syncFieldsWithParams(key, fields))
-	initFields()
-	afterNavigate(initFields)
+	// Dérivé, et non écrit dans la prop `fields`: Svelte annule l'écriture locale d'une prop
+	// non liée dès que le parent en recalcule la valeur. Un parent qui déclare ses colonnes
+	// dans un `$derived` les reproduit à chaque rafraîchissement de `load` — celui que
+	// déclenche une remote function, sans navigation — et la table repartait alors sans
+	// `_visible`, donc sans une seule colonne. `syncFieldsWithParams` lit `page.url`: le
+	// dérivé suit aussi les changements de paramètres, ce dont `afterNavigate` se chargeait.
+	const fieldsSynced = $derived(syncFieldsWithParams(tableKey, fields))
 </script>
 
 <div class="{klass} overflow-x-auto rounded-box border bg-base-100" class:min-h-[320px]={!hideBody}>
 	<table class="table relative">
-		<TableHead {fields} {key} {onCreateField} />
+		<TableHead fields={fieldsSynced} {key} {onCreateField} />
 		{#if !hideBody && items.length}
-			<TableBody {fields} {items} {actions} {classRow} {onclick} />
+			<TableBody fields={fieldsSynced} {items} {actions} {classRow} {onclick} />
 		{/if}
 	</table>
 

package/dist/ui/table/TableFieldsEdition.svelte

@@ -80,7 +80,7 @@
 
 		{#snippet children(popover)}
 			{#if onCreateField}
-				<div class="bordered flex items-center gap-2 border-b pr-1 pb-1 pl-2">
+				<div class="flex items-center gap-2 border-b pr-1 pb-1 pl-2">
 					<span class=" font-semibold opacity-70">Champs</span>
 					<button
 						type="button"

package/dist/ui/table/head/OrderButtons.svelte

@@ -7,11 +7,15 @@
 		order = $bindable(),
 		IconAsc = ArrowDownNarrowWideIcon,
 		IconDesc = ArrowDownWideNarrowIcon,
+		labelAsc = 'Ascendant',
+		labelDesc = 'Descendant',
 		onChange
 	}: {
 		order: Order
 		IconAsc?: Component<IconProps>
 		IconDesc?: Component<IconProps>
+		labelAsc?: string
+		labelDesc?: string
 		onChange?: (order: Order) => void
 	} = $props()
 
@@ -22,24 +26,21 @@
 	}
 </script>
 
-<div class="p-1 pt-2">
-	<span class="text-sm font-semibold opacity-70">Ordre:</span>
-	<div class="grid grid-cols-2 gap-2 pt-2">
-		<button
-			class="btn ring-primary"
-			class:ring-2={order === 'asc'}
-			onclick={handleOrderClick('asc')}
-		>
-			<IconAsc />
-			<span>Ascendant</span>
-		</button>
-		<button
-			class="btn ring-primary"
-			class:ring-2={order === 'desc'}
-			onclick={handleOrderClick('desc')}
-		>
-			<IconDesc />
-			<span>Descendant</span>
-		</button>
-	</div>
+<div class="m-2 grid grid-cols-2 gap-1">
+	<button
+		class="btn ring-primary btn-sm"
+		class:ring-2={order === 'asc'}
+		onclick={handleOrderClick('asc')}
+	>
+		<IconAsc size={16} />
+		<span>{labelAsc}</span>
+	</button>
+	<button
+		class="btn ring-primary btn-sm"
+		class:ring-2={order === 'desc'}
+		onclick={handleOrderClick('desc')}
+	>
+		<IconDesc size={16} />
+		<span>{labelDesc}</span>
+	</button>
 </div>

package/dist/ui/table/head/OrderButtons.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     order: Order;
     IconAsc?: Component<IconProps>;
     IconDesc?: Component<IconProps>;
+    labelAsc?: string;
+    labelDesc?: string;
     onChange?: (order: Order) => void;
 };
 declare const OrderButtons: Component<$$ComponentProps, {}, "order">;

package/dist/ui/table/head/TableHeadDate.svelte

@@ -90,9 +90,9 @@
 					</span>
 				{/if}
 				{#if order === 'asc'}
-					<CalendarArrowDownIcon size={18} class="fill-primary" />
+					<CalendarArrowDownIcon size={15} class="text-primary" />
 				{:else if order === 'desc'}
-					<CalendarArrowUpIcon size={18} class="fill-primary" />
+					<CalendarArrowUpIcon size={15} class="text-primary" />
 				{/if}
 			</button>
 		{/snippet}
@@ -107,6 +107,8 @@
 					}}
 					IconAsc={CalendarArrowDownIcon}
 					IconDesc={CalendarArrowUpIcon}
+					labelAsc="Ancien d'abord"
+					labelDesc="Récent d'abord"
 				/>
 			{/if}
 

package/dist/ui/table/head/TableHeadNumber.svelte

@@ -63,7 +63,7 @@
 	<Popover class="p-1">
 		{#snippet trigger(popover)}
 			<button class="menu-item min-h-8 w-full flex-wrap gap-y-1" {...popover.trigger}>
-				<div class="flex gap-2">
+				<div class="flex items-center gap-2">
 					<span>{field.label}</span>
 					{#if !isSet(min) && !isSet(max)}
 						<FunnelIcon size={15} class="opacity-50" />
@@ -82,9 +82,9 @@
 					</span>
 				{/if}
 				{#if order === 'asc'}
-					<ArrowDownNarrowWideIcon size={18} class="fill-primary" />
+					<ArrowDownNarrowWideIcon size={18} class="text-primary" />
 				{:else if order === 'desc'}
-					<ArrowDownWideNarrowIcon size={18} class="fill-primary" />
+					<ArrowDownWideNarrowIcon size={18} class="text-primary" />
 				{/if}
 			</button>
 		{/snippet}

package/dist/ui/table/head/TableHeadSelect.svelte

@@ -64,7 +64,7 @@
 						{#each optionsActive as option (option.value)}
 							<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
 								{#if option.icon}
-									<option.icon size={10} class="-translate-x-1 fill-white/80" />
+									<option.icon size={10} class="-translate-x-1 text-white/80" />
 								{/if}
 								{option.label}
 							</span>

package/dist/ui/table/head/TableHeadString.svelte

@@ -22,7 +22,7 @@
 
 				{#if searchValue}
 					<span class="badge badge-xs text-[0.7rem] font-normal text-white badge-primary">
-						<SearchIcon size={10} class="-translate-x-1 fill-white/80" />
+						<SearchIcon size={10} class="-translate-x-1 text-white/80" />
 						<span>{searchValue}</span>
 					</span>
 				{/if}

package/dist/ui/table/index.d.ts

@@ -8,4 +8,3 @@ export { default as TableBody } from './TableBody.svelte';
 export { default as TableCell } from './TableCell.svelte';
 export { default as TableFieldsEdition } from './TableFieldsEdition.svelte';
 export { default as TableHead } from './TableHead.svelte';
-export { default as TableViewSelect } from './TableViewSelect.svelte';

package/dist/ui/table/index.js

@@ -7,4 +7,3 @@ export { default as TableBody } from './TableBody.svelte';
 export { default as TableCell } from './TableCell.svelte';
 export { default as TableFieldsEdition } from './TableFieldsEdition.svelte';
 export { default as TableHead } from './TableHead.svelte';
-export { default as TableViewSelect } from './TableViewSelect.svelte';

package/dist/validation/zod.js

@@ -15,8 +15,8 @@ export const zodCoerceJson = z.string().transform((str, ctx) => {
     try {
         return JSON.parse(str);
     }
-    catch (e) {
-        console.error(e);
+    catch (err) {
+        void err;
         ctx.addIssue({ code: 'custom', message: 'Invalid JSON' });
         return z.NEVER;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuma",
-	"version": "2.2.7",
+	"version": "2.5.1",
 	"description": "My fullstack material build with sveltekit, daisyui, zod, prisma, lucia",
 	"author": {
 		"name": "Jonas Voisard",

package/dist/ui/table/TableViewSelect.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-	import { ChevronDownIcon, PlusIcon, SaveIcon } from '@lucide/svelte'
-	import { page } from '$app/state'
-
-	import { Popover } from '../../popover/index.js'
-	import { Dialog } from '../dialog/index.js'
-	import { SvelteURLSearchParams } from 'svelte/reactivity'
-
-	// import { InputText } from '../input/index.js';
-	// import { useForm } from '../../validation/form.jss';
-
-	type View = {
-		id: string
-		name: string
-		query: string
-	}
-
-	let {
-		views
-	}: {
-		views: View[]
-	} = $props()
-
-	let dialog = $state<HTMLDialogElement>()
-	// const form = useForm({
-	// 	onSuccess() {
-	// 		dialog?.close();
-	// 	}
-	// });
-
-	let query = $derived.by(() => {
-		const searchParam = new SvelteURLSearchParams(page.url.searchParams)
-		searchParam.delete('skip')
-		searchParam.delete('take')
-		return searchParam.toString()
-	})
-
-	let selectedView = $derived(views.find((v) => v.query === query))
-	let isNewView = $derived(!!query && !selectedView)
-</script>
-
-/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable
-@typescript-eslint/no-unused-vars */
-<Popover class="p-1">
-	{#snippet trigger(popover)}
-		<button
-			type="button"
-			class="menu-item bordered gap-1 rounded-lg border font-semibold opacity-90 btn-sm"
-			{...popover.trigger}
-		>
-			<span>{isNewView ? 'Nouvelle vue' : selectedView?.name || 'Vue simple'}</span>
-			<ChevronDownIcon size={20} class="translate-x-1 translate-y-px opacity-90" />
-		</button>
-	{/snippet}
-
-	{#snippet children(popover)}
-		<ul class="flex flex-col gap-1">
-			{#if isNewView}
-				<li>
-					<button
-						type="button"
-						class="menu-item w-full pr-1.5"
-						onclick={() => {
-							selectedView = undefined
-							dialog?.showModal()
-							popover.hide()
-						}}
-					>
-						<span>Ajouter la nouvelle vue</span>
-						<PlusIcon class="ml-auto opacity-80" size={21} />
-					</button>
-					<hr class="my-1" />
-				</li>
-			{/if}
-
-			<li>
-				<a href={page.url.pathname} class="menu-item" class:active={!query} onclick={popover.hide}>
-					<span class="grow">Vue simple</span>
-				</a>
-			</li>
-
-			{#each views as view (view.id)}
-				<li>
-					<a
-						href="{page.url.pathname}?{view.query}"
-						class="menu-item group pr-1"
-						class:active={view.id === selectedView?.id}
-						onclick={popover.hide}
-					>
-						<span class="grow">{view.name}</span>
-						<button
-							type="button"
-							class="btn btn-square rounded btn-ghost btn-xs"
-							onclick={(e) => {
-								e.preventDefault()
-								selectedView = view
-								dialog?.showModal()
-							}}
-						>
-							<SaveIcon
-								class="opacity-50 group-hover:opacity-80"
-								size={18}
-								title="Modifier la vue '{view.name}'"
-							/>
-						</button>
-					</a>
-				</li>
-			{/each}
-		</ul>
-	{/snippet}
-</Popover>
-
-<Dialog bind:dialog>
-	{#snippet header()}
-		<h2 class="title">
-			{#if selectedView}
-				Modifier la vue
-			{:else}
-				Ajouter la nouvelle vue
-			{/if}
-		</h2>
-	{/snippet}
-
-	<span>TODO: how to build basic form (create update) with new system ?</span>
-	<!-- 
-	<form
-		action="{action}{selectedView ? actionUpdate : actionCreate}"
-		method="post"
-		use:enhance={form.submit}
-	>
-		{#if selectedView}
-			<input type="hidden" name="id" value={selectedView.id} />
-		{/if}
-		<input type="hidden" name="key" value={key} />
-		<input type="hidden" name="query" value={query} />
-
-		<Input key="name" input={{ placeholder: 'Nom de la vue' }} value={selectedView?.name || ''} />
-
-		<div class="mt-2 flex flex-row-reverse gap-2">
-			<button class="btn"> Valider </button>
-
-			<button formaction="{action}{actionDelete}" class="btn text-error btn-ghost">
-				Supprimer
-			</button>
-		</div>
-	</form> -->
-</Dialog>

package/dist/ui/table/TableViewSelect.svelte.d.ts

@@ -1,11 +0,0 @@
-type View = {
-    id: string;
-    name: string;
-    query: string;
-};
-type $$ComponentProps = {
-    views: View[];
-};
-declare const TableViewSelect: import("svelte").Component<$$ComponentProps, {}, "">;
-type TableViewSelect = ReturnType<typeof TableViewSelect>;
-export default TableViewSelect;