@zevra/ui 0.3.0 → 0.3.2

package/README.md

@@ -143,6 +143,23 @@ maquettes, où la simplicité prime.
 
 ---
 
+## Ouvrir un enrobage
+
+Tiroir et modale s'ouvrent par un état porté sur le conteneur. Deux écritures
+équivalentes, selon le gabarit :
+
+```html
+<div class="zv-drawer" data-open>          <!-- HTML, Astro -->
+<div class="zv-drawer zv-drawer--open">    <!-- React, Vue -->
+```
+
+⚠️ En React, **ne pas écrire `data-open={ouvert}`** : il rend
+`data-open="false"`, que le sélecteur d'attribut considère comme présent — le
+panneau resterait ouvert. C'est précisément pour cela que la variante en
+classe existe.
+
+Fermer sur Échap relève du gabarit : le CSS ne sait pas le faire.
+
 ## Les règles qui ne se négocient pas
 
 Elles viennent de la passation. Les ignorer produit du « presque Zevra », qui

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/src/layout.css

@@ -466,15 +466,23 @@
  * mêmes éléments de navigation — les liens de nav desktop deviennent un
  * menu burger — et que sans eux chaque app réinvente la même règle. */
 
-.zv-only-desktop {
-  display: none;
-}
-
-@media (min-width: 768px) {
+/* Chaque utilitaire MASQUE dans la plage où l'élément n'a pas sa place, et ne
+ * dit RIEN dans l'autre.
+ *
+ * La version précédente posait `display: none` par défaut puis
+ * `display: revert` au-dessus du seuil. C'était faux : `revert` revient au
+ * défaut du NAVIGATEUR — `inline` pour un span — et écrasait donc le
+ * `display: flex` que l'élément tenait de sa propre classe. Une rangée de
+ * liens de navigation perdait sa gouttière et ses libellés se collaient.
+ *
+ * En ne déclarant rien dans la plage visible, l'élément garde son display. */
+@media (max-width: 767px) {
   .zv-only-desktop {
-    display: revert;
+    display: none;
   }
+}
 
+@media (min-width: 768px) {
   .zv-only-mobile {
     display: none;
   }

package/src/overlays.css

@@ -14,6 +14,18 @@
  *
  * Empilement, dans l'ordre : voile 60, tiroir 80, modale 90, notification 100.
  * Les couches inférieures (2, 5, 40, 50) sont dans layout.css.
+ *
+ * OUVERTURE — deux écritures équivalentes, au choix du gabarit :
+ *
+ *   <div class="zv-drawer" data-open>          en HTML, en Astro
+ *   <div class="zv-drawer zv-drawer--open">    en React, en Vue
+ *
+ * La seconde existe parce que la première est pénible à écrire en JSX : un
+ * attribut booléen y demande `{...(ouvert ? {'data-open': ''} : {})}`, là où
+ * une classe conditionnelle est le geste habituel. Ne PAS employer
+ * `data-open={ouvert}` en React : il rend `data-open="false"`, que le
+ * sélecteur d'attribut considère comme présent — le panneau resterait
+ * ouvert.
  */
 
 /* ─── Voile ─────────────────────────────────────────────────────────────
@@ -44,7 +56,8 @@
   transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.zv-drawer[data-open] {
+.zv-drawer[data-open],
+.zv-drawer--open {
   visibility: visible;
 }
 
@@ -61,7 +74,8 @@
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.zv-drawer[data-open] .zv-scrim {
+.zv-drawer[data-open] .zv-scrim,
+.zv-drawer--open .zv-scrim {
   opacity: 1;
 }
 
@@ -92,7 +106,8 @@
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.zv-drawer[data-open] .zv-drawer__panel {
+.zv-drawer[data-open] .zv-drawer__panel,
+.zv-drawer--open .zv-drawer__panel {
   transform: translateX(0);
 }
 
@@ -151,7 +166,8 @@
   padding: 16px;
 }
 
-.zv-modal[data-open] {
+.zv-modal[data-open],
+.zv-modal--open {
   display: flex;
 }