@zevra/ui 0.13.0 → 0.15.0

package/react/layout.tsx

@@ -4,10 +4,18 @@
 // Couche VITRINE : une application n'a aucune raison de charger ce fichier.
 // Tout y est sans état.
 
-import type { ElementType, HTMLAttributes, ReactNode } from 'react'
+import type {
+  ButtonHTMLAttributes,
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react'
 import { cx } from './cx.js'
 
 type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
+type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>
+type Btn = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>
 
 /* ─── Page et gouttières ───────────────────────────────────────────── */
 
@@ -206,6 +214,146 @@ export function NavDrawerLink({
   )
 }
 
+export function NavDrawerGroup({ className, ...reste }: Span & { className?: string }) {
+  return (
+    <span className={cx('zv-mono zv-mono--label zv-nav-drawer__groupe', className)} {...reste} />
+  )
+}
+
+/* ─── Entrées à menu déroulant ─────────────────────────────────────── */
+
+/** Une famille qui se déplie. Ouverture au survol ET au focus, en CSS seul :
+ *  pas d'état à tenir, donc rien à hydrater — une barre de vitrine reste
+ *  rendue au serveur. */
+export function NavDropdown({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-navdd', className)} {...reste} />
+}
+
+/** Le déclencheur. Il porte `.zv-navlink` pour se rendre comme un lien simple :
+ *  ne JAMAIS lui poser `font: inherit`, qui reprendrait la fonte du conteneur
+ *  et le grossirait par rapport à ses voisins. */
+export function NavDropdownButton({
+  className,
+  type = 'button',
+  children,
+  ...reste
+}: Btn & { className?: string; type?: 'button'; children?: ReactNode }) {
+  return (
+    <button
+      type={type}
+      aria-haspopup="true"
+      className={cx('zv-navlink zv-navdd__btn', className)}
+      {...reste}
+    >
+      {children}
+      <svg className="zv-navdd__chevron" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M6 9.4 L12 15.4 L18 9.4" />
+      </svg>
+    </button>
+  )
+}
+
+/** Le panneau : c'est le `.zv-menu` du paquet, ancré sous l'entrée. */
+export function NavDropdownMenu({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-menu zv-navdd__menu', className)} {...reste} />
+}
+
+export function NavDropdownSep({ className, ...reste }: Span & { className?: string }) {
+  return <span aria-hidden="true" className={cx('zv-navdd__sep', className)} {...reste} />
+}
+
+/* ─── Sélecteur de langue ──────────────────────────────────────────── */
+
+/** ⚠️ Ne pas le poser sur une page qui n'existe que dans une langue : mieux
+ *  vaut pas de sélecteur qu'un sélecteur qui mène à des 404. */
+export function Langues({
+  tiroir,
+  className,
+  ...reste
+}: Span & { tiroir?: boolean; className?: string }) {
+  return (
+    <span
+      className={cx(
+        'zv-langues zv-mono zv-mono--micro',
+        tiroir && 'zv-langues--tiroir',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+export function Langue({
+  courante,
+  className,
+  ...reste
+}: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+  courante?: boolean
+  href?: string
+  className?: string
+}) {
+  return (
+    <a
+      aria-current={courante ? 'true' : undefined}
+      className={cx('zv-langue', courante && 'zv-langue--on', className)}
+      {...reste}
+    />
+  )
+}
+
+/* ─── Lockup ───────────────────────────────────────────────────────── */
+
+export interface LockupProps extends Omit<Span, 'style'> {
+  style?: CSSProperties
+  /** Hauteur de CAPITALE, en px. Tout le reste s'en déduit. Sous 11, poser
+   *  `marqueSeule` : le mot ne se lit plus, quelle que soit sa netteté. */
+  capitale?: number
+  marqueSeule?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+/** La marque et le mot, aux proportions relevées sur le lockup d'origine. */
+export function Lockup({
+  capitale = 15,
+  marqueSeule,
+  className,
+  style,
+  ...reste
+}: LockupProps) {
+  return (
+    <span
+      className={cx('zv-lockup', marqueSeule && 'zv-lockup--marque-seule', className)}
+      style={{ ['--zv-cap' as string]: `${capitale}px`, ...style }}
+      {...reste}
+    />
+  )
+}
+
+export function LockupMark({
+  className,
+  alt = '',
+  ...reste
+}: Omit<HTMLAttributes<HTMLImageElement>, 'className'> & {
+  className?: string
+  src: string
+  alt?: string
+}) {
+  return <img alt={alt} className={cx('zv-lockup__mark', className)} {...reste} />
+}
+
+export function LockupWord({
+  className,
+  alt = '',
+  ...reste
+}: Omit<HTMLAttributes<HTMLImageElement>, 'className'> & {
+  className?: string
+  src: string
+  alt?: string
+}) {
+  return <img alt={alt} className={cx('zv-lockup__word', className)} {...reste} />
+}
+
 /* ─── Frise d'étapes ───────────────────────────────────────────────── */
 
 export interface StepsProps extends Div {

package/src/components.css

@@ -967,3 +967,65 @@
     font-size: 21px;
   }
 }
+
+/* ─── Le lockup : la marque et le mot ───────────────────────────────────
+ *
+ * Jusqu'ici le nom d'un produit voyageait cuit dans un PNG, marque et mot
+ * ensemble. Un lockup de 555×200 dont la capitale mesure 70px se retrouvait
+ * affiché à 15px de capitale dans une barre de navigation et 10px dans un
+ * pied de page : réduit de près de cinq fois, chaque fût tombait sur une
+ * fraction de pixel et recevait sa propre dose de lissage. Le mot devenait
+ * gris et le V, seul à n'avoir aucun fût vertical sur quoi s'aligner,
+ * semblait flotter.
+ *
+ * Le mot est donc un SVG (`logos/svg/<produit>-wordmark.svg`), à
+ * `currentColor` : net à toute taille, et il prend enfin les nuances encre
+ * / navy / blanc que le registre des logos décrit. La marque reste le PNG
+ * couleur du paquet — c'est un dégradé, il ne se recolore pas.
+ *
+ * ⚠️ Ces tracés sont RELEVÉS sur le lockup bitmap d'origine, faute de son
+ * fichier vectoriel. Ils sont fidèles à 0,1 % en largeur et nettement plus
+ * lisibles que le bitmap partout où le site les pose, mais ils portent les
+ * approximations du relevé : réservés à l'ÉCRAN, jusqu'à 120px de capitale.
+ * Au-delà — grand format, impression — exiger le fichier d'origine.
+ *
+ * Les proportions viennent du lockup, mesurées au pixel : la marque vaut
+ * 2,86 fois la capitale, l'écart entre les deux 0,64 fois, et les deux
+ * pièces se centrent l'une sur l'autre (elles ne partagent pas de ligne de
+ * base). Tout se pilote par --zv-cap, qui EST la hauteur de capitale : le
+ * SVG du mot a un viewBox dont la hauteur vaut la capitale, si bien qu'une
+ * hauteur CSS posée dessus se lit directement. */
+
+.zv-lockup {
+  --zv-cap: 15px;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--zv-cap) * 0.64);
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.zv-lockup__mark {
+  height: calc(var(--zv-cap) * 2.86);
+  width: auto;
+  display: block;
+}
+
+.zv-lockup__word {
+  height: var(--zv-cap);
+  width: auto;
+  display: block;
+}
+
+/* Le seuil de lisibilité. Sous 11px de capitale, le mot ne se lit plus :
+ * ce n'est plus une question de netteté mais de taille, et aucun fichier
+ * n'y changera rien. On montre la marque, seule — c'est elle qui identifie.
+ * Poser cette classe, ou masquer .zv-lockup__word sous un point de rupture
+ * quand la barre se resserre. */
+.zv-lockup--marque-seule {
+  gap: 0;
+}
+
+.zv-lockup--marque-seule .zv-lockup__word {
+  display: none;
+}

package/src/layout.css

@@ -313,8 +313,159 @@
   color: var(--label);
 }
 
-/* Header fixe du prototype : voile dégradé plutôt qu'un fond plein, pour
- * que le contenu s'y fonde au défilement. */
+/* ─── 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.
+ * Une page qui n'existe que dans une langue ne le pose pas — il vaut mieux
+ * pas de sélecteur qu'un sélecteur qui mène à des 404. */
+
+.zv-langues {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.zv-langue {
+  color: var(--label);
+  text-decoration: none;
+  letter-spacing: 0.12em;
+  transition: color 160ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
+}
+
+.zv-langue:hover {
+  color: var(--accent);
+}
+
+.zv-langue--on {
+  color: var(--ink);
+  font-weight: 700;
+}
+
+/* Dans le tiroir, il se détache en pied de liste. */
+.zv-langues--tiroir {
+  display: flex;
+  gap: 16px;
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid var(--hairline);
+}
+
+/* ─── Le tiroir, groupé ─────────────────────────────────────────────────
+ * Quand la barre porte des familles, les aplatir en une liste unique rend
+ * le tiroir illisible. Un label capitale par famille, ses entrées en
+ * dessous : la même architecture, repliée. */
+
+.zv-nav-drawer__groupe {
+  display: block;
+  margin: 16px 0 4px;
+}
+
+.zv-nav-drawer__groupe:first-child {
+  margin-top: 0;
+}
+
+.zv-nav-drawer__link--sous {
+  font-size: 15px;
+  padding-block: 7px;
+}
+
+/* Chrome fixe : voile dégradé plutôt qu'un fond plein, pour que le contenu
+ * s'y fonde au défilement.
+ *
+ * Deux usages, une seule classe. Il est LA BARRE quand il porte directement
+ * ses pièces ; il l'ENVELOPPE quand il contient une .zv-nav — c'est la forme
+ * qu'impose une nav complète, dont les menus déroulants et le tiroir ont
+ * besoin d'un conteneur à eux. Le `:has` bascule tout seul, plutôt que de
+ * demander un modificateur qu'on oublierait.
+ *
+ * ⚠️ backdrop-filter fait de ce bloc le containing block de TOUT descendant
+ * en position fixe. Le tiroir (fixe lui aussi) doit donc vivre EN DEHORS,
+ * en frère — dedans, il serait rogné par la hauteur de la barre.
+ *
+ * Le voile venait en rgba littéral, c'est-à-dire hors token : --paper
+ * repeint, la barre serait restée sur l'ancienne couleur. */
 .zv-header {
   position: fixed;
   top: 0;
@@ -326,11 +477,25 @@
   padding-top: 22px;
   padding-bottom: 12px;
   z-index: 40;
-  background: linear-gradient(180deg, rgba(245, 246, 250, 0.92), rgba(245, 246, 250, 0));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--paper) 92%, transparent),
+    color-mix(in srgb, var(--paper) 0%, transparent)
+  );
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
 }
 
+.zv-header:has(> .zv-nav) {
+  display: block;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.zv-header > .zv-nav {
+  padding-bottom: 14px;
+}
+
 /* ─── Frise d'étapes ────────────────────────────────────────────────────
  * Troisième et dernier emploi autorisé du spectre : les points de méthode,
  * dans l'ordre iris → violet → cyan. */
@@ -711,3 +876,30 @@
     gap: 24px;
   }
 }
+
+/* ─── Le seuil d'une nav riche ──────────────────────────────────────────
+ *
+ * La bascule vers le tiroir est à 767px, réglée sur la nav de référence :
+ * quatre liens simples. Une nav qui porte l'architecture d'un site — cinq
+ * familles à menu, un sélecteur de langue, un appel à l'action — déborde
+ * bien avant. Mesuré : entre 768 et 1150px, le logo passe SOUS la première
+ * entrée.
+ *
+ * `.zv-nav--riche` déplace le seuil à 1150px, POUR LA BARRE SEULEMENT. Ce
+ * n'est pas un second point de rupture de mise en page : le reste de la
+ * page garde l'unique seuil de la charte. C'est le seuil de débordement
+ * d'un composant, et il se déclare sur ce composant. */
+
+@media (max-width: 1150px) {
+  .zv-nav--riche .zv-nav__links {
+    display: none;
+  }
+
+  .zv-nav--riche .zv-nav__burger {
+    display: inline-flex;
+  }
+
+  .zv-nav--riche .zv-nav__logo {
+    height: 30px;
+  }
+}

package/src/nav.js

@@ -0,0 +1,67 @@
+/* Zevra UI — nav.js : l'ouverture et la fermeture du tiroir de navigation.
+ *
+ * Rôle exact, et rien d'autre : poser et retirer `data-open` sur le tiroir,
+ * en tenir `aria-expanded` sur le bouton. Le reste — le voile, la glissade,
+ * le verrouillage du défilement — est dans overlays.css et se joue sur cet
+ * attribut seul.
+ *
+ * Le contrat, en quatre attributs :
+ *   [data-zv-drawer]        le tiroir  (.zv-drawer)
+ *   [data-zv-drawer-open]   ce qui l'ouvre   (le burger)
+ *   [data-zv-drawer-close]  ce qui le ferme  (le voile, chaque lien)
+ *   [data-zv-drawer="nom"]  pour en câbler plusieurs sur une même page ;
+ *                           les déclencheurs portent alors la même valeur.
+ *
+ * Échap ferme : le CSS ne sait pas le faire, et un panneau qu'on ne ferme
+ * qu'en visant un voile est pénible au clavier — et impraticable sans souris.
+ *
+ * S'importe une fois par page : `import '@zevra/ui/nav.js'`. Idempotent, et
+ * sans effet si aucun tiroir n'est présent. Le module observe le document :
+ * un tiroir rendu plus tard (navigation client, îlot hydraté) est câblé sans
+ * qu'il y ait à réappeler quoi que ce soit.
+ */
+(() => {
+  if (typeof document === 'undefined') return
+  if (document.documentElement.dataset.zvNav === 'on') return
+  document.documentElement.dataset.zvNav = 'on'
+
+  const tiroirs = (nom) =>
+    Array.from(document.querySelectorAll('[data-zv-drawer]')).filter(
+      (el) => !nom || el.getAttribute('data-zv-drawer') === nom,
+    )
+
+  const basculer = (nom, ouvert) => {
+    for (const tiroir of tiroirs(nom)) {
+      if (ouvert) tiroir.setAttribute('data-open', '')
+      else tiroir.removeAttribute('data-open')
+    }
+    const cle = nom || ''
+    for (const btn of document.querySelectorAll('[data-zv-drawer-open]')) {
+      if ((btn.getAttribute('data-zv-drawer-open') || '') === cle) {
+        btn.setAttribute('aria-expanded', String(ouvert))
+      }
+    }
+  }
+
+  // Délégation : un seul écouteur pour toute la page. Les liens du tiroir
+  // sont souvent rendus après coup — les câbler un par un obligerait à
+  // relancer le module à chaque fois.
+  document.addEventListener('click', (e) => {
+    const cible = e.target instanceof Element ? e.target : null
+    if (!cible) return
+    const ouvre = cible.closest('[data-zv-drawer-open]')
+    if (ouvre) {
+      basculer(ouvre.getAttribute('data-zv-drawer-open') || '', true)
+      return
+    }
+    const ferme = cible.closest('[data-zv-drawer-close]')
+    if (ferme) basculer(ferme.getAttribute('data-zv-drawer-close') || '', false)
+  })
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return
+    for (const tiroir of document.querySelectorAll('[data-zv-drawer][data-open]')) {
+      basculer(tiroir.getAttribute('data-zv-drawer') || '', false)
+    }
+  })
+})()

package/src/tokens.css

@@ -68,7 +68,7 @@
   --err-line: #efc9cd;
 
   /* Typo — Google Fonts : Outfit (display), Public Sans (texte), Space Grotesk (labels) */
-  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400, wordmarks 600 */
+  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400 */
   --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* 400/600 */
   --font-mono: "Space Grotesk", "Menlo", monospace;                /* labels caps, 0.18-0.2em */
   /* Chasse fixe RÉELLE, pour le code seulement. --font-mono (Space Grotesk)