@zevra/ui 0.15.0 → 0.15.1

package/src/layout.css

@@ -313,88 +313,6 @@
   color: var(--label);
 }
 
-/* ─── Entrées à menu déroulant ──────────────────────────────────────────
- *
- * Une nav de vitrine qui porte l'architecture d'un site — des familles,
- * pas quatre liens — a besoin de déplier. Ouverture au survol ET au focus
- * (`:focus-within`) : en CSS seul, donc accessible au clavier sans une
- * ligne de JavaScript et sans état à tenir.
- *
- * Le panneau est le .zv-menu du paquet, simplement ancré sous l'entrée. */
-
-.zv-navdd {
-  position: relative;
-  display: inline-flex;
-}
-
-/* Le bouton porte .zv-navlink : il doit se rendre EXACTEMENT comme un lien
- * simple de la barre. Piège à éviter — un `font: inherit`, réflexe habituel
- * pour dénuder un bouton, remet la fonte du CONTENEUR (16px/400) là où
- * .zv-navlink pose 14px/500 : les entrées à menu deviennent plus grosses
- * que les autres. On ne reprend donc du bouton que ce qui doit disparaître. */
-.zv-navdd__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  font-family: inherit;
-  line-height: inherit;
-}
-
-.zv-navdd__chevron {
-  width: 12px;
-  height: 12px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  /* Bouts francs : le trait carré du jeu d'icônes (25/08/2026). */
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-  transition: transform 160ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
-}
-
-.zv-navdd:hover .zv-navdd__chevron,
-.zv-navdd:focus-within .zv-navdd__chevron {
-  transform: rotate(180deg);
-}
-
-/* Le pont invisible (::before) couvre l'interstice entre l'entrée et son
- * panneau : sans lui, le survol se rompt en descendant vers le menu et le
- * menu se referme sous le curseur. */
-.zv-navdd__menu {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  translate: -50% 0;
-  padding-top: 14px;
-  display: none;
-  min-width: 250px;
-  z-index: 50;
-}
-
-.zv-navdd__menu::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 14px;
-}
-
-.zv-navdd:hover .zv-navdd__menu,
-.zv-navdd:focus-within .zv-navdd__menu {
-  display: flex;
-  flex-direction: column;
-}
-
-.zv-navdd__sep {
-  display: block;
-  height: 1px;
-  margin: 6px 0;
-  background: var(--hairline);
-}
-
 /* ─── Sélecteur de langue ───────────────────────────────────────────────
  * Des initiales au registre mono, pas un menu : trois langues se lisent
  * d'un coup d'œil, et un menu pour trois entrées coûte un clic pour rien.

package/src/navigation.css

@@ -496,6 +496,95 @@
  * clic extérieur, fermeture à Échap. Le CSS ci-dessus est prêt à les recevoir
  * (aria-selected, :focus-visible) ; le composant doit les écrire. */
 
+/* ─── Entrées à menu déroulant de la barre vitrine ──────────────────────
+ *
+ * ⚠️ CE BLOC DOIT RESTER APRÈS `.zv-menu`, et donc dans CE fichier. Le
+ * panneau d'une entrée porte les deux classes ; `.zv-navdd__menu` reprend à
+ * `.zv-menu` son display, sa position et son ancrage, à spécificité égale —
+ * c'est l'ORDRE qui tranche. Posé dans layout.css, qu'index.css importe
+ * AVANT navigation.css, il perdait : les trois menus d'une barre
+ * s'affichaient en même temps, ouverts en permanence.
+ *
+ * Une nav de vitrine qui porte l'architecture d'un site — des familles,
+ * pas quatre liens — a besoin de déplier. Ouverture au survol ET au focus
+ * (`:focus-within`) : en CSS seul, donc accessible au clavier sans une
+ * ligne de JavaScript et sans état à tenir.
+ *
+ * Le panneau est le .zv-menu du paquet, simplement ancré sous l'entrée. */
+
+.zv-navdd {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Le bouton porte .zv-navlink : il doit se rendre EXACTEMENT comme un lien
+ * simple de la barre. Piège à éviter — un `font: inherit`, réflexe habituel
+ * pour dénuder un bouton, remet la fonte du CONTENEUR (16px/400) là où
+ * .zv-navlink pose 14px/500 : les entrées à menu deviennent plus grosses
+ * que les autres. On ne reprend donc du bouton que ce qui doit disparaître. */
+.zv-navdd__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.zv-navdd__chevron {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  /* Bouts francs : le trait carré du jeu d'icônes (25/08/2026). */
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  transition: transform 160ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
+}
+
+.zv-navdd:hover .zv-navdd__chevron,
+.zv-navdd:focus-within .zv-navdd__chevron {
+  transform: rotate(180deg);
+}
+
+/* Le pont invisible (::before) couvre l'interstice entre l'entrée et son
+ * panneau : sans lui, le survol se rompt en descendant vers le menu et le
+ * menu se referme sous le curseur. */
+.zv-navdd__menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  translate: -50% 0;
+  padding-top: 14px;
+  display: none;
+  min-width: 250px;
+  z-index: 50;
+}
+
+.zv-navdd__menu::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 14px;
+}
+
+.zv-navdd:hover .zv-navdd__menu,
+.zv-navdd:focus-within .zv-navdd__menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.zv-navdd__sep {
+  display: block;
+  height: 1px;
+  margin: 6px 0;
+  background: var(--hairline);
+}
+
 /* ─── Popover ───────────────────────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Le menu impose ses items ;
  * il n'existait aucune surface ancrée LIBRE — aide contextuelle,