@zevra/ui 0.16.0 → 0.20.0

package/src/forms.css

@@ -1001,9 +1001,15 @@
     min-height: var(--tap);
   }
 
-  .zv-input--bare {
+  /* Le champ nu et celui d'un cadre à affixe. 16px et non --app-lg (14px) :
+   * la règle des 16px ci-dessus vaut pour TOUT champ qu'on saisit au doigt,
+   * et ces deux-là — le composeur, le sous-domaine d'organisation — sont
+   * parmi les plus saisis d'une application. Sous 16, Safari iOS zoome à la
+   * mise au point et décale la page. */
+  .zv-input--bare,
+  .zv-affix .zv-input--bare {
     min-height: var(--tap);
-    font-size: var(--app-lg);
+    font-size: 16px;
   }
 
   /* Le cadre passe pleine largeur. Il n'est PAS figé (`flex: none`) : le
@@ -1015,8 +1021,11 @@
     flex: 0 1 auto;
   }
 
+  /* Le champ de recherche n'était visé par aucune des deux règles : il
+   * gardait --app (13px), donc il zoomait lui aussi. */
   .zv-search__input {
     padding-block: 12px;
+    font-size: 16px;
   }
 
   /* Le déclencheur peut passer à la ligne : sa valeur courante est un nom de
@@ -1075,3 +1084,57 @@
     color: var(--accent);
   }
 }
+
+/* ─── Champ mot de passe ────────────────────────────────────────────────
+ * HORS RELEVÉ (27/08/2026, 0.18.0). Aucune des planches ne montre d'écran de
+ * connexion, et le système n'avait donc rien pour ce champ — alors que tous
+ * les produits en ont un, et que la saisie masquée est le seul endroit de
+ * l'interface où l'on tape sans voir ce qu'on écrit.
+ *
+ * Bâti sur `.zv-affix` plutôt qu'en cadre parallèle : le champ nu, le cadre
+ * qui l'entoure et son anneau de mise au point sont déjà là.
+ *
+ * ⚠️ Le bouton est un vrai <button type="button"> : posé sur un <span>, il
+ * n'est ni atteignable au clavier ni annoncé, et il envoie le formulaire dès
+ * qu'on oublie le type. Son libellé change avec l'état — « Afficher » /
+ * « Masquer » — parce qu'une icône seule ne dit pas ce qui va se passer. */
+
+.zv-affix__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  /* Cible tactile obtenue par la taille, pas par du remplissage : un bouton
+   * de 16 px entouré de marge reste un bouton de 16 px pour le doigt. */
+  width: 32px;
+  height: 32px;
+  margin-right: -6px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-affix__btn:hover {
+  color: var(--ink);
+}
+
+.zv-affix__btn[aria-pressed='true'] {
+  color: var(--accent);
+}
+
+/* Le contour déborderait du cadre à affixe, qui le rogne. On le rentre. */
+.zv-affix__btn:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Les gestionnaires de mot de passe des navigateurs posent leur propre œil
+ * dans le champ : deux boutons côte à côte pour la même chose. On masque le
+ * leur, le nôtre étant accessible et cohérent avec la charte. */
+.zv-affix input[type='password']::-ms-reveal,
+.zv-affix input[type='password']::-ms-clear {
+  display: none;
+}

package/src/icons.css

@@ -81,6 +81,26 @@
   color: var(--ink);
 }
 
+/* Désactivé. C'était la SEULE classe interactive du module sans cet état :
+ * .zv-btn, .zv-chrome-btn, .zv-menu__item, .zv-pager__arrow, .zv-range et
+ * les champs en ont tous un. Sans lui, un bouton fermé se rendait comme un
+ * bouton actif — curseur main compris — et s'allumait au survol comme s'il
+ * allait agir.
+ * ⚠️ Le survol est neutralisé EXPLICITEMENT : `:hover` s'applique encore à
+ * un bouton désactivé, et l'application ne peut pas le rattraper depuis une
+ * couche d'utilitaires — ce module n'est pas layered. */
+.zv-icon-btn[disabled],
+.zv-icon-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zv-icon-btn[disabled]:hover,
+.zv-icon-btn[aria-disabled='true']:hover {
+  background: transparent;
+  color: var(--muted);
+}
+
 /* Icône décorative posée à côté d'un libellé qui la nomme déjà : elle est
  * atténuée pour que le mot reste le point d'entrée du regard. */
 .zv-icon--quiet {

package/src/layout.css

@@ -400,8 +400,23 @@
     color-mix(in srgb, var(--paper) 92%, transparent),
     color-mix(in srgb, var(--paper) 0%, transparent)
   );
-  backdrop-filter: blur(6px);
+  /* ⚠️ LE PRÉFIXÉ D'ABORD. Lightning CSS — le compilateur de Tailwind v4,
+   * donc celui de toutes nos applications Next — SUPPRIME `backdrop-filter`
+   * non préfixé quand il précède la forme `-webkit-`. Or Firefox ne connaît
+   * QUE la forme non préfixée : la barre y perdait son flou. Reproduit avec
+   * la chaîne exacte des apps, dans les deux ordres. L'ordre est donc une
+   * contrainte, pas un style.
+   *
+   * Le voile, lui, reste en `color-mix` : le compilateur le traite
+   * CORRECTEMENT — il émet un repli opaque puis la vraie valeur sous
+   * `@supports`, ce qu'on lit dans les bundles livrés. Une note antérieure
+   * affirmait qu'il le « réduisait » ; elle prenait le repli pour le
+   * résultat. Ne pas « corriger » vers `rgb(from …)` : cette syntaxe sort du
+   * compilateur NUE, sans repli, et un navigateur qui l'ignore n'a alors
+   * plus AUCUN fond sous une barre fixe — 3,5 % d'usage qui voyaient le
+   * voile correctement et ne verraient plus rien. */
   -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
 }
 
 .zv-header:has(> .zv-nav) {

package/src/navigation.css

@@ -832,6 +832,15 @@
  * Sous ce seuil, tout ce qui se touche fait au moins --tap. */
 
 @media (max-width: 767px) {
+
+  /* Le fil ENTIER est un seul lien, et il n'avait aucune hauteur de cible :
+   * à 11px de texte il passe sous le minimum tactile. On déploie la cible
+   * sans toucher au corps. */
+  .zv-crumbs {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--tap);
+  }
   /* 224px de colonne à côté du contenu sur un écran de 375px ne laisse rien à
    * lire : la colonne cède la place au couple barre + tiroir. */
   .zv-sidebar {
@@ -982,6 +991,17 @@
     padding: 8px;
   }
 
+  /* La cible tactile, que le padding seul ne donne pas : un chevron de dix
+   * pixels entouré de huit reste sous --tap. `.zv-pager__step` la portait
+   * déjà ; ses deux voisines l'attendaient. */
+  .zv-pager__arrow,
+  .zv-pager__rank {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--tap);
+  }
+
   .zv-pager__rank {
     padding-block: 8px;
   }