@zevra/ui 0.5.0 → 0.7.0

package/react/index.ts

@@ -38,5 +38,6 @@ export * from './icon.js'
 export * from './layout.js'
 export * from './navigation.js'
 export * from './overlays.js'
+export * from './select-menu.js'
 export * from './surfaces.js'
 export * from './typography.js'

package/react/layout.tsx

@@ -52,11 +52,12 @@ export function Grid12({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-grid-12', className)} {...reste} />
 }
 
-export type Span12 = 3 | 4 | 6 | 8 | 9
+export type Span12 = 3 | 4 | 5 | 6 | 7 | 8 | 9
 
-/** ⚠️ Seules 3, 4, 6, 8 et 9 existent : ce sont les découpes employées par la
- *  vitrine. En ajouter une revient à ajouter une mise en page, pas une
- *  utilité — c'est une décision de DA. */
+/** ⚠️ Seules ces sept portées existent : ce sont les découpes employées par
+ *  la vitrine (5+7 vient du prototype experience.html — le glyphe en 5, le
+ *  discours en 7). En ajouter une revient à ajouter une mise en page, pas
+ *  une utilité — c'est une décision de DA. */
 export function Col({
   span,
   className,

package/react/select-menu.tsx

@@ -0,0 +1,250 @@
+'use client'
+
+// Sélection DESSINÉE — le déclencheur a l'apparence d'un champ, et la liste
+// est peinte par le paquet.
+//
+// ⚠️ POURQUOI CE COMPOSANT EXISTE, ALORS QUE `Select` (natif) EST LÀ.
+// Un <select> natif ne peut pas être habillé : sa liste déroulée est peinte
+// par le SYSTÈME, pas par la page. Sur un macOS en mode sombre elle sort en
+// menu noir au milieu d'une interface claire — aucun CSS ne corrige cela.
+//
+// ⚠️ CE QUE ÇA COÛTE, ET QUI EST PAYÉ ICI. En remplaçant le contrôle natif,
+// on perd le clavier, l'annonce au lecteur d'écran et la liste système. Tout
+// est réimplémenté dans ce fichier : rôles ARIA de combobox/listbox,
+// navigation aux flèches, Origine/Fin, Échap, recherche au clavier, fermeture
+// au clic extérieur et restitution du focus. C'est la raison pour laquelle il
+// n'existe PAS de version « CSS seule » de ce composant : les classes posées
+// à la main sans ce travail livrent un select inutilisable au clavier.
+//
+// Quand préférer `Select` (natif) : un formulaire long sur mobile, où la
+// liste système est plus rapide à manipuler que n'importe quelle liste
+// maison, et où le clavier logiciel s'adapte tout seul.
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { cx } from './cx.js'
+
+export interface OptionSelect<T extends string = string> {
+  valeur: T
+  label: ReactNode
+  /** Texte employé pour la recherche au clavier et l'affichage du
+   *  déclencheur quand `label` n'est pas une chaîne. */
+  texte?: string
+  desactive?: boolean
+}
+
+export interface SelectMenuProps<T extends string = string> {
+  options: readonly OptionSelect<T>[]
+  valeur: T | null
+  onChange: (valeur: T) => void
+  /** Affiché quand rien n'est choisi. */
+  placeholder?: string
+  /** Identifiant du déclencheur — à faire correspondre au `htmlFor` du champ. */
+  id?: string
+  /** Nom du contrôle, quand aucun intitulé visible ne le désigne. */
+  label?: string
+  desactive?: boolean
+  erreur?: boolean
+  className?: string
+}
+
+function texteDe(o: OptionSelect | undefined): string {
+  if (!o) return ''
+  return o.texte ?? (typeof o.label === 'string' ? o.label : String(o.valeur))
+}
+
+export function SelectMenu<T extends string = string>({
+  options,
+  valeur,
+  onChange,
+  placeholder = 'Choisir…',
+  id,
+  label,
+  desactive,
+  erreur,
+  className,
+}: SelectMenuProps<T>) {
+  const auto = useId()
+  const idListe = `${id ?? auto}-liste`
+  const [ouvert, setOuvert] = useState(false)
+  // L'option SURVOLÉE au clavier, distincte de l'option CHOISIE : c'est elle
+  // que `aria-activedescendant` désigne, et elle ne devient un choix qu'à
+  // Entrée. Les confondre ferait valider au premier coup de flèche.
+  const [actif, setActif] = useState(0)
+  const ancre = useRef<HTMLDivElement>(null)
+  const declencheur = useRef<HTMLButtonElement>(null)
+  const liste = useRef<HTMLDivElement>(null)
+  // La saisie au clavier (« ré » → Rédacteur) s'accumule et retombe après
+  // une seconde : c'est le comportement d'un <select> natif, et le perdre
+  // se remarque tout de suite sur une liste longue.
+  const frappe = useRef<{ texte: string; quand: number }>({ texte: '', quand: 0 })
+
+  const indexChoisi = options.findIndex((o) => o.valeur === valeur)
+  const choisi = indexChoisi >= 0 ? options[indexChoisi] : undefined
+
+  const ouvrir = useCallback(() => {
+    if (desactive) return
+    // On s'ouvre SUR l'option courante, pas sur la première : dans une liste
+    // de vingt entrées, repartir du haut oblige à retrouver sa place.
+    setActif(indexChoisi >= 0 ? indexChoisi : 0)
+    setOuvert(true)
+  }, [desactive, indexChoisi])
+
+  const fermer = useCallback((rendreLeFocus = true) => {
+    setOuvert(false)
+    if (rendreLeFocus) declencheur.current?.focus()
+  }, [])
+
+  const choisir = useCallback(
+    (i: number) => {
+      const o = options[i]
+      if (!o || o.desactive) return
+      onChange(o.valeur)
+      fermer()
+    },
+    [options, onChange, fermer],
+  )
+
+  // Clic extérieur. `pointerdown` et non `click` : un clic qui commence
+  // dehors et finit dedans ne doit pas rouvrir ce qu'il vient de fermer.
+  useEffect(() => {
+    if (!ouvert) return
+    const doc = ancre.current?.ownerDocument ?? document
+    function dehors(e: PointerEvent) {
+      if (!ancre.current?.contains(e.target as Node)) setOuvert(false)
+    }
+    doc.addEventListener('pointerdown', dehors)
+    return () => doc.removeEventListener('pointerdown', dehors)
+  }, [ouvert])
+
+  // L'option active reste visible quand on parcourt une liste plus haute que
+  // son cadre.
+  useEffect(() => {
+    if (!ouvert) return
+    const el = liste.current?.children[actif] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [ouvert, actif])
+
+  function suivant(depuis: number, pas: number): number {
+    const n = options.length
+    for (let k = 1; k <= n; k++) {
+      const i = (depuis + pas * k + n * n) % n
+      if (!options[i]?.desactive) return i
+    }
+    return depuis
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    if (desactive) return
+    if (!ouvert) {
+      if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault()
+        ouvrir()
+      }
+      return
+    }
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault()
+        e.stopPropagation()
+        fermer()
+        return
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        choisir(actif)
+        return
+      case 'ArrowDown':
+        e.preventDefault()
+        setActif((i) => suivant(i, 1))
+        return
+      case 'ArrowUp':
+        e.preventDefault()
+        setActif((i) => suivant(i, -1))
+        return
+      case 'Home':
+        e.preventDefault()
+        setActif(suivant(-1, 1))
+        return
+      case 'End':
+        e.preventDefault()
+        setActif(suivant(options.length, -1))
+        return
+      case 'Tab':
+        // Tab valide et sort : c'est ce que fait un select natif, et sortir
+        // sans rien retenir surprend.
+        choisir(actif)
+        return
+      default:
+        break
+    }
+    if (e.key.length === 1) {
+      const maintenant = Date.now()
+      const texte =
+        (maintenant - frappe.current.quand < 1000 ? frappe.current.texte : '') +
+        e.key.toLowerCase()
+      frappe.current = { texte, quand: maintenant }
+      const i = options.findIndex(
+        (o) => !o.desactive && texteDe(o).toLowerCase().startsWith(texte),
+      )
+      if (i >= 0) setActif(i)
+    }
+  }
+
+  return (
+    <div
+      ref={ancre}
+      className={cx('zv-select-anchor', 'zv-select-anchor--block', className)}
+    >
+      <button
+        ref={declencheur}
+        id={id}
+        type="button"
+        role="combobox"
+        aria-expanded={ouvert}
+        aria-controls={idListe}
+        aria-haspopup="listbox"
+        aria-label={label}
+        aria-invalid={erreur || undefined}
+        aria-activedescendant={ouvert ? `${idListe}-${actif}` : undefined}
+        disabled={desactive}
+        data-vide={choisi ? undefined : 'oui'}
+        className="zv-input zv-input--trigger"
+        onClick={() => (ouvert ? fermer() : ouvrir())}
+        onKeyDown={onKeyDown}
+      >
+        <span className="zv-trunc">{choisi ? choisi.label : placeholder}</span>
+        <span className="zv-select__chevron" aria-hidden="true">
+          ▾
+        </span>
+      </button>
+
+      {ouvert && (
+        <div ref={liste} id={idListe} role="listbox" className="zv-menu">
+          {options.map((o, i) => (
+            <button
+              key={o.valeur}
+              id={`${idListe}-${i}`}
+              type="button"
+              role="option"
+              aria-selected={o.valeur === valeur}
+              aria-disabled={o.desactive || undefined}
+              // ⚠️ tabIndex -1 : le focus ne quitte JAMAIS le déclencheur.
+              // C'est ce qui permet à aria-activedescendant de porter
+              // l'annonce, et à la frappe de continuer d'arriver au clavier.
+              tabIndex={-1}
+              className={cx(
+                'zv-menu__item',
+                i === actif && !o.desactive && 'zv-menu__item--survol',
+              )}
+              onPointerEnter={() => !o.desactive && setActif(i)}
+              onClick={() => choisir(i)}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/base.css

@@ -273,7 +273,9 @@ a:not([class]):hover {
   width: var(--spec-filet);
   height: 2px;
   background: var(--spectre);
-  border-radius: 1px;
+  /* Angle vif comme tout le reste depuis le 25/08 — sur 2px de haut, le
+   * rayon d'1px du relevé ne se voyait de toute façon pas. */
+  border-radius: 0;
 }
 
 /* Bas de page : filet raccourci. */

package/src/components.css

@@ -94,7 +94,23 @@
  * à 16px dans DesignSystem.html. Tracés : M5 12h14 et M13 6l6 6-6 6, sur
  * un viewBox 0 0 24 24, stroke currentColor, épaisseur 2, bouts arrondis. */
 
+/* ⚠️ REPRIS le 25/08/2026 — la DA le jugeait « pas ouf ». Le diagnostic :
+ * c'était un lien bleu avec un chevron collé, sans rien qui le distingue
+ * d'un lien de texte, et sans aucune récompense au survol. Le mouvement du
+ * paquet est réservé à la vitrine et piloté au défilement ; il n'y avait
+ * donc PAS de vocabulaire pour un lien d'action.
+ *
+ * Trois ajouts, tous dessinés dans les tokens existants :
+ *   · un FILET qui se déploie sous le libellé au survol, de gauche à droite
+ *     (scaleX sur une origine gauche) — pas un `text-decoration`, qui ne
+ *     s'anime pas et coupe les jambages ;
+ *   · la flèche avance de 4px, ce qui donne au lien sa direction ;
+ *   · le libellé passe en --accent-deep.
+ * Le tout est repeint en une seule transition, donc coupé net par
+ * prefers-reduced-motion (base.css) — l'état final reste lisible sans. */
+
 .zv-link-arrow {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -102,22 +118,56 @@
   font-weight: 600;
   color: var(--accent);
   text-decoration: none;
+  transition: color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.zv-link-arrow:hover {
+/* Le filet est un pseudo-élément et non une bordure : une bordure
+ * occuperait de la place et ferait sauter la ligne de base au survol. */
+.zv-link-arrow::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: -3px;
+  height: 1px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-link-arrow:hover,
+.zv-link-arrow:focus-visible {
   color: var(--accent-deep);
 }
 
+.zv-link-arrow:hover::after,
+.zv-link-arrow:focus-visible::after {
+  transform: scaleX(1);
+}
+
 .zv-link-arrow svg {
   width: 15px;
   height: 15px;
   flex: none;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
+.zv-link-arrow:hover svg,
+.zv-link-arrow:focus-visible svg {
+  transform: translateX(4px);
+}
+
+/* Sur la bande manifeste : le filet suit `currentColor`, il n'y a donc rien
+ * à redéclarer — c'est tout l'intérêt de l'avoir posé en currentColor. */
 .zv-link-arrow--on-dark {
   color: var(--white);
 }
 
+.zv-link-arrow--on-dark:hover,
+.zv-link-arrow--on-dark:focus-visible {
+  color: var(--accent-on-dark);
+}
+
 /* ─── Badges et puces ───────────────────────────────────────────────────*/
 
 /* Pastille pleine : numéro de pièce, catégorie de section. */
@@ -148,7 +198,8 @@
   color: var(--accent-deep);
   background: var(--white);
   border: 1px solid var(--accent-line);
-  border-radius: 4px;
+  /* La puce de source est une pastille : elle suit le token, désormais à 0. */
+  border-radius: var(--r-pill);
   padding: 6px 10px;
 }
 
@@ -515,7 +566,7 @@
 .zv-progress {
   height: 3px;
   background: var(--hairline);
-  border-radius: 2px;
+  border-radius: 0;
   overflow: hidden;
 }
 
@@ -524,8 +575,182 @@
   background: var(--spectre);
 }
 
+
+/* ─── Blocs éditoriaux ──────────────────────────────────────────────────
+ * HORS RELEVÉ — ajoutés le 24/08/2026 à la demande de la DA (règle de
+ * variété : jamais deux blocs de même forme qui se suivent, 80 % de formes
+ * différentes par page). Quatre façons de poser du contenu SANS carte,
+ * pour que les grilles de cartes redeviennent un choix et non un réflexe.
+ * Dessinés dans les tokens existants, rien de nouveau dans la palette. */
+
+/* Rangées à filets : un libellé fort, un contenu, un trait fin entre
+ * chaque rangée. Pour les listes où l'alignement fait la lecture
+ * (profils rencontrés, prestations, caractéristiques). */
+.zv-rows {
+  display: flex;
+  flex-direction: column;
+}
+
+.zv-rows__row {
+  display: flex;
+  gap: 24px;
+  align-items: baseline;
+  flex-wrap: wrap;
+  padding: 18px 0;
+  border-top: 1px solid var(--line);
+}
+
+.zv-rows__row:first-child {
+  border-top: none;
+}
+
+.zv-rows__key {
+  font-weight: 600;
+  flex: 0 0 280px;
+}
+
+.zv-rows__val {
+  flex: 1;
+  min-width: 260px;
+  /* C'est le corps de texte du paquet — le token, pas sa valeur recopiée. */
+  font-size: var(--body);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* Sommaire numéroté : le numéro en display léger, le contenu à droite,
+ * un filet entre les entrées. Pour les suites longues qui étoufferaient
+ * en cartes (offres détaillées, programmes). */
+.zv-index {
+  display: flex;
+  flex-direction: column;
+}
+
+.zv-index__item {
+  display: flex;
+  gap: 28px;
+  align-items: flex-start;
+  padding: 28px 0;
+  border-top: 1px solid var(--line);
+}
+
+.zv-index__item:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+.zv-index__num {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 40px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--accent-deep);
+  flex: 0 0 64px;
+}
+
+.zv-index__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Variante en colonnes : les mêmes entrées numérotées, posées en grille
+ * de trois, sans filets — l'espace fait la séparation. */
+.zv-index--cols {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 40px 32px;
+}
+
+.zv-index--cols .zv-index__item {
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  border-top: none;
+}
+
+.zv-index--cols .zv-index__num {
+  flex: none;
+  font-size: 32px;
+  color: var(--accent-line);
+}
+
+/* Déroulé vertical : le rail et ses points, à la verticale. La déclinaison
+ * verticale de zv-steps, pour les méthodes qui se lisent comme un récit.
+ * Les points reprennent les couleurs des points de méthode (l'un des
+ * trois emplois autorisés du spectre). */
+.zv-flow {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  padding-left: 32px;
+}
+
+.zv-flow::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--line);
+}
+
+.zv-flow__step {
+  position: relative;
+  --zv-flow-dot: var(--iris);
+}
+
+.zv-flow__step::before {
+  content: '';
+  position: absolute;
+  left: -32px;
+  top: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--zv-flow-dot);
+  box-shadow:
+    0 0 0 4px var(--paper),
+    0 0 0 5px var(--accent-line);
+}
+
+.zv-flow__step--violet {
+  --zv-flow-dot: var(--violet);
+}
+
+.zv-flow__step--cyan {
+  --zv-flow-dot: var(--cyan);
+}
+
+/* Encart d'appel : une bande claire sur fond indigo dilué, un titre, une
+ * action. Pour l'offre transverse qui doit se voir sans crier
+ * (remise Campus, renvoi vers une autre page). */
+.zv-callout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  border-radius: var(--r-card);
+  padding: 32px 36px;
+}
+
+.zv-callout__title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  letter-spacing: -0.01em;
+  font-size: 26px;
+  line-height: 1.2;
+}
+
 /* ─── Mobile ────────────────────────────────────────────────────────────*/
 
+
 @media (max-width: 767px) {
   .zv-btn--sm {
     height: 36px;
@@ -549,4 +774,31 @@
   .zv-inset {
     max-width: none;
   }
+
+  .zv-rows__key {
+    flex-basis: 100%;
+  }
+
+  .zv-index__item {
+    gap: 18px;
+    padding: 22px 0;
+  }
+
+  .zv-index__num {
+    flex-basis: 44px;
+    font-size: 30px;
+  }
+
+  .zv-index--cols {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 28px;
+  }
+
+  .zv-callout {
+    padding: 24px 22px;
+  }
+
+  .zv-callout__title {
+    font-size: 21px;
+  }
 }