@agence-zef/astro 0.7.0 → 0.7.1

package/components/Form.astro

@@ -13,8 +13,8 @@
  * - 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`
+ * Après l'envoi, le message de confirmation remplace le formulaire (`.zef-form__done`, avec une
+ * coche `.zef-form__done-icon`) ; les slots `start` et `end` partent avec le formulaire ; 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";
@@ -304,8 +304,12 @@ const inputType = {
 					const done = document.createElement("div");
 					done.className = "zef-form__done";
 					done.setAttribute("role", "status");
+					done.innerHTML =
+						'<span class="zef-form__done-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><path d="m5 12.5 4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>';
 					done.append(template?.content.cloneNode(true) ?? "");
+					// Le message remplace le formulaire (style en ligne : passe devant le `display` du site).
 					form.hidden = true;
+					form.style.display = "none";
 					form.after(done);
 					form.dispatchEvent(new CustomEvent("zef-form:success", { bubbles: true }));
 					return;

package/dist/ui.js

@@ -143,6 +143,7 @@ export function resetForm(target) {
     if (done?.classList.contains("zef-form__done"))
         done.remove();
     form.hidden = false;
+    form.style.removeProperty("display");
     form.reset();
     for (const el of form.querySelectorAll(".zef-form__error, .zef-form__status")) {
         el.hidden = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -367,9 +367,32 @@
 	border-radius: var(--zef-radius);
 	background: var(--zef-surface-muted);
 }
-:where(.zef-account__success, .zef-cart__success, .zef-subscriptions__success, .zef-form__done) {
+:where(.zef-account__success, .zef-cart__success, .zef-subscriptions__success) {
 	color: var(--zef-success);
 }
+/* Confirmation d'un formulaire du CMS : coche et message centrés, à la place du formulaire. */
+:where(.zef-form__done) {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+	padding: 1.5rem 0;
+	font-family: var(--zef-font);
+	text-align: center;
+}
+:where(.zef-form__done-icon) {
+	display: grid;
+	flex-shrink: 0;
+	place-items: center;
+	width: 3.25rem;
+	height: 3.25rem;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--zef-success) 14%, transparent);
+	color: var(--zef-success);
+}
+:where(.zef-form__done) :where(p) {
+	margin: 0;
+}
 
 /* ---------- Boutons ---------- */