@agence-zef/astro 0.6.0 → 0.7.0

package/README.md

@@ -1,5 +1,5 @@
 # @agence-zef/astro
 
-Intégration Astro du CMS de l'agence ZEF : route des pages, aperçu de l'éditeur, composants `Button`, `Image`, `Video`, `RichText`, `Form`, `Popups`, `CookieBanner`, et comptes du site (option `accounts`, `AccountForm`, `getAccount`).
+Intégration Astro du CMS de l'agence ZEF : route des pages, aperçu de l'éditeur, composants `Button`, `Image`, `Video`, `RichText`, `Form`, `Popups`, `CookieBanner`, composants d'interface (`Dialog`, `Accordion`, `Popover`, `Multiselect`, champs), et comptes du site (option `accounts`, `AccountForm`, `getAccount`).
 
 Paquet du CMS de l'agence ZEF (dépôt privé). Licence MIT.

package/components/Form.astro

@@ -5,19 +5,40 @@
  * champ piège, envoi en JavaScript au CMS avec message de confirmation ou redirection ;
  * sans JavaScript, envoi HTML classique. Classes `zef-form__*` et attributs `data-*`
  * pour le CSS du site.
+ *
+ * Mise en page sur mesure, sans réécrire l'envoi :
+ * - slot `field-<nom technique>` : remplace le contrôle d'un champ (libellé, erreur et logique
+ *   conditionnelle gardés), par exemple `<Multiselect slot="field-autres_decors" … />` ou un
+ *   `<input type="hidden">` rempli par le site ; plusieurs valeurs partent une par ligne ;
+ * - slots `start` (avant les champs) et `end` (après le bouton) ;
+ * - `submitLabel` : remplace le libellé du bouton saisi dans le CMS.
+ *
+ * Après l'envoi, le formulaire est masqué et le message de confirmation s'affiche à la suite
+ * (`.zef-form__done`) ; l'évènement `zef-form:success` part du formulaire, et `resetForm`
+ * (`@agence-zef/astro/ui`) le remet à zéro pour une nouvelle saisie.
  */
 import type { PublicForm, Reference } from "@agence-zef/schema";
 
 interface Props {
 	/** Référence renvoyée par l'API (`{ type: "form", form }`) ou formulaire seul. */
 	form: Reference | PublicForm | null | undefined;
+	/** Libellé du bouton d'envoi (sinon celui du CMS). */
+	submitLabel?: string;
 	class?: string;
 }
 
-const { form: input, class: className } = Astro.props;
+const { form: input, submitLabel, class: className } = Astro.props;
 const form: PublicForm | null =
 	input && "fields" in input ? input : ((input as Reference | null)?.form ?? null);
 const locale = Astro.currentLocale ?? "";
+// Contrôles fournis par le site (slot `field-<nom>`), rendus d'avance.
+const custom: Record<string, string> = Object.fromEntries(
+	await Promise.all(
+		(form?.fields ?? [])
+			.filter((f) => Astro.slots.has(`field-${f.name}`))
+			.map(async (f) => [f.name, await Astro.slots.render(`field-${f.name}`)]),
+	),
+);
 const id = form ? `zef-form-${form.id.slice(0, 8)}` : "";
 const COUNTRIES = [
 	"France",
@@ -61,6 +82,7 @@ const inputType = {
 					</label>
 				</div>
 			)}
+			<slot name="start" />
 			{form.fields.map((f) => {
 				const fieldId = `${id}-${f.name}`;
 				const attrs = {
@@ -69,6 +91,18 @@ const inputType = {
 					"data-width": f.width,
 					"data-conditions": f.conditions ? JSON.stringify(f.conditions) : undefined,
 				};
+				if (f.name in custom) {
+					return (
+						<div class="zef-form__field" role="group" aria-labelledby={`${fieldId}-label`} {...attrs}>
+							<span class="zef-form__label" id={`${fieldId}-label`}>
+								{f.label}
+								{f.required && <span aria-hidden="true"> *</span>}
+							</span>
+							<Fragment set:html={custom[f.name]} />
+							<p class="zef-form__error" role="alert" hidden />
+						</div>
+					);
+				}
 				if (f.type === "message") {
 					return (
 						<p class="zef-form__message" {...attrs}>
@@ -155,8 +189,9 @@ const inputType = {
 			{form.turnstileSiteKey && <div class="cf-turnstile zef-form__turnstile" data-sitekey={form.turnstileSiteKey} data-size="flexible" />}
 			<p class="zef-form__status" role="status" hidden />
 			<button type="submit" class="zef-form__submit">
-				{form.submitLabel}
+				{submitLabel ?? form.submitLabel}
 			</button>
+			<slot name="end" />
 			<template data-zef-confirmation={form.confirmation.type} data-url={form.confirmation.type === "redirect" ? (form.confirmation.url ?? "") : undefined}>
 				{form.confirmation.type === "message" && <div class="zef-form__confirmation" set:html={form.confirmation.html} />}
 			</template>
@@ -176,10 +211,15 @@ const inputType = {
 			const prev = values[key];
 			values[key] = prev === undefined ? value : [...(Array.isArray(prev) ? prev : [prev]), value];
 		}
-		for (const box of form.querySelectorAll<HTMLElement>('[data-type="checkboxes"]')) {
-			const name = box.dataset.field ?? "";
-			if (!(name in values)) values[name] = [];
-			else if (!Array.isArray(values[name])) values[name] = [values[name] as string];
+		for (const field of form.querySelectorAll<HTMLElement>("[data-field]")) {
+			const name = field.dataset.field ?? "";
+			if (field.dataset.type === "checkboxes") {
+				if (!(name in values)) values[name] = [];
+				else if (!Array.isArray(values[name])) values[name] = [values[name] as string];
+			} else if (Array.isArray(values[name])) {
+				// Plusieurs valeurs pour un champ texte (contrôle sur mesure) : une par ligne.
+				values[name] = (values[name] as string[]).join("\n");
+			}
 		}
 		return values;
 	}
@@ -208,6 +248,12 @@ const inputType = {
 				error.hidden = true;
 				error.textContent = "";
 			}
+			if (submit) submit.disabled = true;
+			// Anti-spam : si le visiteur envoie avant que Turnstile ait rendu son jeton, on l'attend (5 s au plus).
+			const token = () => form.querySelector<HTMLInputElement>('[name="cf-turnstile-response"]')?.value;
+			if (form.querySelector(".cf-turnstile")) {
+				for (let i = 0; i < 25 && !token(); i++) await new Promise((r) => setTimeout(r, 200));
+			}
 			const values = valuesOf(form);
 			const meta = (key: string) => {
 				const value = values[key];
@@ -235,10 +281,10 @@ const inputType = {
 						error.textContent = message;
 						error.hidden = false;
 					}
+					if (submit) submit.disabled = false;
 					return;
 				}
 			}
-			if (submit) submit.disabled = true;
 			form.setAttribute("aria-busy", "true");
 			// Avec un champ fichier : envoi multipart (les champs masqués, désactivés, n'en font pas partie).
 			const multipart = form.querySelector('input[type="file"]:not(:disabled)') !== null;
@@ -259,7 +305,9 @@ const inputType = {
 					done.className = "zef-form__done";
 					done.setAttribute("role", "status");
 					done.append(template?.content.cloneNode(true) ?? "");
-					form.replaceWith(done);
+					form.hidden = true;
+					form.after(done);
+					form.dispatchEvent(new CustomEvent("zef-form:success", { bubbles: true }));
 					return;
 				}
 				for (const [name, message] of Object.entries<string>(result.fields ?? {})) {

package/components/Multiselect.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * Choix multiple dans une liste fermée (puces dans le champ, liste à cases dessous), classe
+ * `zef-multiselect`. Ce sont de vraies cases à cocher `name` : les valeurs cochées partent avec
+ * le formulaire (`<Form>` les envoie au CMS, une par ligne pour un champ texte).
+ *
+ * Options : `value`, `label`, et en option `description` (ligne grise) et `image` (vignette,
+ * reprise dans la puce). `max` limite le nombre de choix (les autres cases sont désactivées) ;
+ * `counter` affiche le compte (`{n}` choisis, `{max}`). Avec `label`, rendu dans un `<Field>`.
+ *
+ * Comportement : clic sur le champ ou Entrée pour ouvrir, Échap ou clic en dehors pour fermer
+ * (Échap ne ferme pas la `<Dialog>` qui le contient). En JavaScript : `updateMultiselect`,
+ * `resetMultiselect`, `toggleMultiselect` de `@agence-zef/astro/ui` (après avoir masqué une
+ * option avec `hidden`, par exemple).
+ */
+import Field from "./Field.astro";
+
+type Option = { value: string; label: string; description?: string | null; image?: string | null };
+interface Props {
+	name: string;
+	options: Option[];
+	label?: string;
+	help?: string;
+	error?: string;
+	/** Nombre de choix au plus. */
+	max?: number;
+	/** Texte du champ vide (« Choisir… »). */
+	placeholder?: string;
+	/** Compteur sous le champ : `{n}` choisis, `{max}` au plus (« {n} sur {max} sélectionnés. »). */
+	counter?: string;
+	/** Valeurs cochées au départ. */
+	value?: string[];
+	/** Libellé accessible du bouton qui retire une puce (suivi du nom de l'option). */
+	removeLabel?: string;
+	id?: string;
+	class?: string;
+}
+
+const {
+	name,
+	options,
+	label,
+	help,
+	error,
+	max,
+	placeholder = "",
+	counter,
+	value = [],
+	removeLabel = "Retirer",
+	id: givenId,
+	class: className,
+} = Astro.props;
+const id = givenId ?? `zef-${name}-${Math.random().toString(36).slice(2, 8)}`;
+const full = max !== undefined && value.length >= max;
+// Avec un libellé : dans un `<Field>` (libellé, aide, erreur) ; sinon le champ seul.
+const Wrapper = label ? Field : Fragment;
+const wrapperProps = label ? { label, for: id, help, error } : {};
+---
+
+<Wrapper {...wrapperProps}>
+	<div
+		class:list={["zef-multiselect", className]}
+		data-zef-multiselect
+		data-max={max}
+		data-counter={counter}
+		data-remove-label={removeLabel}
+	>
+		<div class="zef-multiselect__control">
+			<ul class="zef-multiselect__chips"></ul>
+			<button type="button" id={id} class="zef-multiselect__toggle" aria-expanded="false" aria-controls={`${id}-list`}>
+				<span class="zef-multiselect__placeholder">{placeholder}</span>
+				<svg class="zef-multiselect__chevron" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+					<path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
+				</svg>
+			</button>
+		</div>
+		<div id={`${id}-list`} class="zef-multiselect__list" hidden>
+			{
+				options.map((o) => (
+					<label class="zef-multiselect__option">
+						<input
+							type="checkbox"
+							name={name}
+							value={o.value}
+							checked={value.includes(o.value)}
+							disabled={full && !value.includes(o.value)}
+						/>
+						{o.image && <img src={o.image} alt="" loading="lazy" />}
+						<span class="zef-multiselect__text">
+							<span class="zef-multiselect__name">{o.label}</span>
+							{o.description && <span class="zef-multiselect__description">{o.description}</span>}
+						</span>
+					</label>
+				))
+			}
+		</div>
+		<p class="zef-multiselect__count" aria-live="polite" hidden></p>
+	</div>
+</Wrapper>
+
+<script>
+	import { toggleMultiselect, updateMultiselect } from "@agence-zef/astro/ui";
+
+	const roots = () => document.querySelectorAll<HTMLElement>("[data-zef-multiselect]");
+	for (const root of roots()) updateMultiselect(root);
+
+	document.addEventListener("click", (event) => {
+		const target = event.target as Element;
+		const control = target.closest(".zef-multiselect__control");
+		const current = control?.closest<HTMLElement>("[data-zef-multiselect]");
+		if (current && !target.closest(".zef-multiselect__remove")) toggleMultiselect(current);
+		// Clic en dehors : les listes ouvertes se ferment.
+		for (const root of roots()) {
+			if (root !== current && root.hasAttribute("data-open") && !root.contains(target)) {
+				toggleMultiselect(root, false);
+			}
+		}
+	});
+	document.addEventListener("change", (event) => {
+		const root = (event.target as Element).closest?.("[data-zef-multiselect]");
+		if (root) updateMultiselect(root);
+	});
+	// Échap ferme la liste (et pas la fenêtre qui la contient) ; flèche bas l'ouvre.
+	document.addEventListener(
+		"keydown",
+		(event) => {
+			const root = (event.target as Element).closest?.<HTMLElement>("[data-zef-multiselect]");
+			if (!root) return;
+			if (event.key === "Escape" && root.hasAttribute("data-open")) {
+				event.preventDefault();
+				event.stopPropagation();
+				toggleMultiselect(root, false);
+				root.querySelector<HTMLElement>(".zef-multiselect__toggle")?.focus();
+			} else if (event.key === "ArrowDown" && (event.target as Element).matches(".zef-multiselect__toggle")) {
+				event.preventDefault();
+				toggleMultiselect(root, true);
+				root.querySelector<HTMLInputElement>(".zef-multiselect__option:not([hidden]) input:not(:disabled)")?.focus();
+			}
+		},
+		true,
+	);
+	// Formulaire vidé (`reset`) : puces et compteur suivent.
+	document.addEventListener("reset", (event) => {
+		const form = event.target as HTMLFormElement;
+		requestAnimationFrame(() => {
+			for (const root of form.querySelectorAll("[data-zef-multiselect]")) updateMultiselect(root);
+		});
+	});
+</script>

package/components/Popover.astro

@@ -1,12 +1,18 @@
 ---
 /**
- * Popover natif (attribut `popover`), sans JavaScript ni style imposé : ouvert par un bouton
- * `<button popovertarget="<id>">`, fermé au clic en dehors et par Échap. Placé sous son bouton
- * par le positionnement d'ancre CSS (`styles.css`), au centre de l'écran en repli.
- * Classe `zef-popover` ; `manual` : ne se ferme pas au clic en dehors.
+ * Popover natif (attribut `popover`), sans style imposé : ouvert par un ou plusieurs boutons
+ * `<button popovertarget="<id>">`, placé contre le bouton qui l'a ouvert par le positionnement
+ * d'ancre CSS (`styles.css`, au centre de l'écran en repli). Classe `zef-popover`.
+ *
+ * Comportement (script ci-dessous, partagé par toute la page) :
+ * - un autre bouton du même popover pendant qu'il est ouvert : le popover se déplace vers lui
+ *   tout de suite, sans se fermer ni se rouvrir (le site met son contenu à jour dans son propre
+ *   `click`) ; le même bouton : il se ferme ;
+ * - clic en dehors ou Échap : il se ferme (sauf `manual`).
  */
 interface Props {
 	id: string;
+	/** Ne se ferme ni au clic en dehors ni par Échap (seulement par son bouton). */
 	manual?: boolean;
 	/** Position par rapport au bouton : en dessous (défaut), au-dessus, à droite, à gauche. */
 	placement?: "bottom" | "top" | "right" | "left";
@@ -16,6 +22,69 @@ interface Props {
 const { id, manual = false, placement = "bottom", class: className } = Astro.props;
 ---
 
-<div id={id} popover={manual ? "manual" : "auto"} class:list={["zef-popover", className]} data-placement={placement}>
+<div
+	id={id}
+	popover="manual"
+	class:list={["zef-popover", className]}
+	data-placement={placement}
+	data-zef-popover={manual ? "manual" : "auto"}
+>
 	<slot />
 </div>
+
+<script>
+	/** Bouton qui a ouvert chaque popover (ancre CSS). */
+	const opener = new WeakMap<HTMLElement, HTMLElement>();
+	const popovers = () => document.querySelectorAll<HTMLElement>("[data-zef-popover]");
+	const isOpen = (pop: HTMLElement) => pop.matches(":popover-open");
+
+	/** Accroche le popover à ce bouton : l'ancre suit le bouton, même pendant l'ouverture. */
+	function anchorTo(pop: HTMLElement, trigger: HTMLElement) {
+		const name = `--zef-popover-${pop.id}`;
+		const previous = opener.get(pop);
+		if (previous && previous !== trigger) {
+			previous.style.removeProperty("anchor-name");
+			previous.setAttribute("aria-expanded", "false");
+		}
+		trigger.style.setProperty("anchor-name", name);
+		trigger.setAttribute("aria-expanded", "true");
+		pop.style.setProperty("position-anchor", name);
+		opener.set(pop, trigger);
+	}
+
+	document.addEventListener("click", (event) => {
+		const target = event.target as Element;
+		const trigger = target.closest<HTMLElement>("[popovertarget]");
+		const pop = trigger ? document.getElementById(trigger.getAttribute("popovertarget") ?? "") : null;
+		if (trigger && pop?.hasAttribute("data-zef-popover")) {
+			// Le comportement natif (basculer) est remplacé : déplacer plutôt que fermer.
+			event.preventDefault();
+			if (isOpen(pop) && opener.get(pop) === trigger) return pop.hidePopover();
+			anchorTo(pop, trigger);
+			if (!isOpen(pop)) pop.showPopover();
+			return;
+		}
+		// Clic en dehors : les popovers ouverts se ferment.
+		for (const open of popovers()) {
+			if (isOpen(open) && open.dataset.zefPopover !== "manual" && !open.contains(target)) {
+				open.hidePopover();
+			}
+		}
+	});
+	document.addEventListener("keydown", (event) => {
+		if (event.key !== "Escape") return;
+		for (const open of popovers()) {
+			if (isOpen(open) && open.dataset.zefPopover !== "manual") {
+				open.hidePopover();
+				opener.get(open)?.focus();
+			}
+		}
+	});
+	for (const pop of popovers()) {
+		pop.addEventListener("toggle", (event) => {
+			if ((event as ToggleEvent).newState === "closed") {
+				opener.get(pop)?.setAttribute("aria-expanded", "false");
+			}
+		});
+	}
+</script>

package/dist/ui.d.ts

@@ -5,3 +5,17 @@ export declare function openDialog(id: string): void;
  * ferme vraiment ; tout de suite si le visiteur réduit les animations ou sans animation CSS.
  */
 export declare function closeDialog(target: HTMLDialogElement | string): void;
+/** Ouvre ou ferme la liste d'un `<Multiselect>`. */
+export declare function toggleMultiselect(target: Element | string, open?: boolean): void;
+/**
+ * Met à jour un `<Multiselect>` d'après ses cases : puces, maximum (les autres cases désactivées),
+ * compteur. À appeler après avoir coché, décoché ou masqué (`hidden`) des options en JavaScript.
+ */
+export declare function updateMultiselect(target: Element | string): void;
+/** Décoche tout, referme la liste et remet le `<Multiselect>` à zéro. */
+export declare function resetMultiselect(target: Element | string): void;
+/**
+ * Remet un `<Form>` à son état de départ (après un envoi réussi, pour une nouvelle demande) :
+ * formulaire vidé et réaffiché, message de confirmation retiré, erreurs effacées.
+ */
+export declare function resetForm(target: HTMLFormElement | string): void;

package/dist/ui.js

@@ -1,6 +1,6 @@
 /*
- * Comportements des composants d'interface (`<Dialog>`, `<Accordion>`) partagés par leurs
- * scripts : exportés pour qu'un site les déclenche lui-même.
+ * Comportements des composants d'interface (`<Dialog>`, `<Multiselect>`, `<Form>`) partagés
+ * par leurs scripts : exportés pour qu'un site les déclenche lui-même.
  */
 const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /** Ouvre une fenêtre `<Dialog>` par son identifiant. */
@@ -31,3 +31,124 @@ export function closeDialog(target) {
     // Filet : si l'animation ne se termine pas (onglet en arrière-plan), on ferme quand même.
     setTimeout(() => dialog.hasAttribute("data-closing") && finish(), 400);
 }
+/* ---------- Multiselect ---------- */
+const REMOVE_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+/** Racine d'un `<Multiselect>` : l'élément, un de ses descendants, son conteneur (le premier) ou un identifiant. */
+function multiselectOf(target) {
+    const el = typeof target === "string" ? document.getElementById(target) : target;
+    return (el?.closest("[data-zef-multiselect]") ??
+        el?.querySelector("[data-zef-multiselect]") ??
+        null);
+}
+/** Ouvre ou ferme la liste d'un `<Multiselect>`. */
+export function toggleMultiselect(target, open) {
+    const root = multiselectOf(target);
+    const list = root?.querySelector(".zef-multiselect__list");
+    const toggle = root?.querySelector(".zef-multiselect__toggle");
+    if (!root || !list || !toggle)
+        return;
+    const next = open ?? list.hasAttribute("hidden");
+    list.hidden = !next;
+    toggle.setAttribute("aria-expanded", String(next));
+    root.toggleAttribute("data-open", next);
+}
+/**
+ * Met à jour un `<Multiselect>` d'après ses cases : puces, maximum (les autres cases désactivées),
+ * compteur. À appeler après avoir coché, décoché ou masqué (`hidden`) des options en JavaScript.
+ */
+export function updateMultiselect(target) {
+    const root = multiselectOf(target);
+    if (!root)
+        return;
+    const max = Number(root.dataset.max) || Number.POSITIVE_INFINITY;
+    const options = [...root.querySelectorAll(".zef-multiselect__option")];
+    // Une option masquée n'est jamais envoyée.
+    for (const option of options) {
+        const box = option.querySelector("input");
+        if (option.hidden && box)
+            box.checked = false;
+    }
+    const checked = options.filter((o) => o.querySelector("input")?.checked);
+    const full = checked.length >= max;
+    for (const option of options) {
+        const box = option.querySelector("input");
+        if (box)
+            box.disabled = full && !box.checked;
+    }
+    const chips = root.querySelector(".zef-multiselect__chips");
+    chips?.replaceChildren(...checked.map((option) => {
+        const box = option.querySelector("input");
+        const label = option.querySelector(".zef-multiselect__name")?.textContent ?? box?.value ?? "";
+        const chip = document.createElement("li");
+        chip.className = "zef-multiselect__chip";
+        const image = option.querySelector("img");
+        if (image) {
+            const copy = image.cloneNode();
+            copy.alt = "";
+            copy.loading = "eager";
+            chip.append(copy);
+        }
+        const text = document.createElement("span");
+        text.textContent = label;
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.className = "zef-multiselect__remove";
+        remove.setAttribute("aria-label", `${root.dataset.removeLabel ?? "Retirer"} ${label}`);
+        remove.innerHTML = REMOVE_ICON;
+        remove.addEventListener("click", (event) => {
+            event.stopPropagation();
+            if (box)
+                box.checked = false;
+            updateMultiselect(root);
+            box?.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+        chip.append(text, remove);
+        return chip;
+    }));
+    const placeholder = root.querySelector(".zef-multiselect__placeholder");
+    if (placeholder)
+        placeholder.hidden = checked.length > 0;
+    const counter = root.querySelector(".zef-multiselect__count");
+    if (counter) {
+        const text = checked.length ? (root.dataset.counter ?? "") : "";
+        counter.textContent = text
+            .replaceAll("{n}", String(checked.length))
+            .replaceAll("{max}", Number.isFinite(max) ? String(max) : "");
+        counter.hidden = !counter.textContent;
+    }
+}
+/** Décoche tout, referme la liste et remet le `<Multiselect>` à zéro. */
+export function resetMultiselect(target) {
+    const root = multiselectOf(target);
+    if (!root)
+        return;
+    for (const box of root.querySelectorAll(".zef-multiselect__option input")) {
+        box.checked = false;
+    }
+    toggleMultiselect(root, false);
+    updateMultiselect(root);
+}
+/* ---------- Formulaires du CMS (<Form>) ---------- */
+/**
+ * Remet un `<Form>` à son état de départ (après un envoi réussi, pour une nouvelle demande) :
+ * formulaire vidé et réaffiché, message de confirmation retiré, erreurs effacées.
+ */
+export function resetForm(target) {
+    const form = typeof target === "string"
+        ? document.querySelector(`#${CSS.escape(target)}, form[data-zef-form="${target}"]`)
+        : target;
+    if (!form)
+        return;
+    const done = form.nextElementSibling;
+    if (done?.classList.contains("zef-form__done"))
+        done.remove();
+    form.hidden = false;
+    form.reset();
+    for (const el of form.querySelectorAll(".zef-form__error, .zef-form__status")) {
+        el.hidden = true;
+        el.textContent = "";
+    }
+    for (const root of form.querySelectorAll("[data-zef-multiselect]"))
+        resetMultiselect(root);
+    window.turnstile?.reset(form.querySelector(".cf-turnstile") ?? undefined);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",
@@ -59,6 +59,7 @@
     "./Input.astro": "./components/Input.astro",
     "./Select.astro": "./components/Select.astro",
     "./Checkbox.astro": "./components/Checkbox.astro",
+    "./Multiselect.astro": "./components/Multiselect.astro",
     "./styles.css": "./styles.css",
     "./ui": {
       "types": "./dist/ui.d.ts",
@@ -84,8 +85,8 @@
   },
   "dependencies": {
     "jiti": "^2.6.1",
-    "@agence-zef/schema": "0.6.0",
-    "@agence-zef/sdk": "0.6.0"
+    "@agence-zef/schema": "0.7.0",
+    "@agence-zef/sdk": "0.7.0"
   },
   "homepage": "https://agence-zef.fr",
   "scripts": {

package/styles.css

@@ -188,6 +188,168 @@
 	border: 0;
 }
 
+/* Choix multiple (<Multiselect>) : puces dans le champ, liste à cases dessous. */
+:where(.zef-multiselect) {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	font-family: var(--zef-font);
+}
+:where(.zef-multiselect__control) {
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.375rem;
+	min-height: var(--zef-input-height);
+	padding: 0.3125rem 0.5rem 0.3125rem 0.3125rem;
+	border: 1px solid var(--zef-border-strong);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	cursor: pointer;
+	transition:
+		border-color var(--zef-duration),
+		box-shadow var(--zef-duration);
+}
+:where(
+	.zef-multiselect[data-open] .zef-multiselect__control,
+	.zef-multiselect__control:has(:focus-visible)
+) {
+	border-color: var(--zef-accent);
+	box-shadow: var(--zef-focus);
+}
+:where(.zef-multiselect__chips) {
+	display: contents;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+:where(.zef-multiselect__chip) {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	min-height: 2rem;
+	padding: 0 0.25rem;
+	border-radius: var(--zef-radius-small);
+	background: var(--zef-surface-muted);
+}
+:where(.zef-multiselect__chip img) {
+	width: 1.5rem;
+	height: 1.5rem;
+	object-fit: cover;
+	border-radius: var(--zef-radius-small);
+}
+:where(.zef-multiselect__remove) {
+	display: grid;
+	place-items: center;
+	width: 1.25rem;
+	height: 1.25rem;
+	padding: 0;
+	border: 0;
+	border-radius: var(--zef-radius-small);
+	background: none;
+	color: inherit;
+	cursor: pointer;
+}
+:where(.zef-multiselect__toggle) {
+	display: flex;
+	flex: 1 1 4rem;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	align-self: stretch;
+	min-width: 4rem;
+	padding: 0 0 0 0.4375rem;
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+:where(.zef-multiselect__toggle):focus-visible {
+	outline: none;
+}
+:where(.zef-multiselect__placeholder) {
+	color: var(--zef-muted);
+}
+:where(.zef-multiselect__chevron) {
+	flex-shrink: 0;
+	margin-left: auto;
+	transition: transform var(--zef-duration);
+}
+:where(.zef-multiselect[data-open] .zef-multiselect__chevron) {
+	transform: rotate(180deg);
+}
+:where(.zef-multiselect__list) {
+	position: absolute;
+	z-index: 10;
+	top: calc(100% + 0.25rem);
+	left: 0;
+	right: 0;
+	box-sizing: border-box;
+	max-height: 18rem;
+	padding: 0.375rem;
+	overflow: auto;
+	border: 1px solid var(--zef-border);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	box-shadow: var(--zef-shadow);
+}
+/* Compteur affiché : la liste part sous le champ, pas sous le compteur. */
+:where(.zef-multiselect:has(.zef-multiselect__count:not([hidden])) .zef-multiselect__list) {
+	top: calc(var(--zef-input-height) + 0.25rem);
+}
+:where(.zef-multiselect__option) {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.375rem 0.5rem;
+	border-radius: var(--zef-radius-small);
+	cursor: pointer;
+}
+:where(.zef-multiselect__option:hover, .zef-multiselect__option:has(input:checked)) {
+	background: var(--zef-surface-muted);
+}
+:where(.zef-multiselect__option:has(input:disabled)) {
+	opacity: 0.45;
+	background: none;
+	cursor: not-allowed;
+}
+:where(.zef-multiselect__option input) {
+	flex-shrink: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	margin: 0;
+	accent-color: var(--zef-accent);
+}
+:where(.zef-multiselect__option img) {
+	flex-shrink: 0;
+	width: 3rem;
+	height: 2rem;
+	object-fit: cover;
+	border-radius: var(--zef-radius-small);
+}
+:where(.zef-multiselect__text) {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	line-height: 1.3;
+}
+:where(.zef-multiselect__name) {
+	font-weight: 600;
+}
+:where(.zef-multiselect__description, .zef-multiselect__count) {
+	margin: 0;
+	color: var(--zef-muted);
+	font-size: 0.875rem;
+}
+:where(.zef-multiselect [hidden]) {
+	/* biome-ignore lint/complexity/noImportantStyles: `hidden` doit gagner sur tout `display` du site. */
+	display: none !important;
+}
+
 /* Aide, erreurs, messages. */
 :where(.zef-help, .zef-account__help, .zef-account__optional, .zef-checkout__optional) {
 	color: var(--zef-muted);