@zevra/ui 0.22.0 → 0.24.0

package/react/icon-data.ts

@@ -6,6 +6,7 @@ export type IconId =
   | 'activite'
   | 'aide'
   | 'app-couches'
+  | 'applications'
   | 'archiver'
   | 'attention'
   | 'avancer'
@@ -30,6 +31,7 @@ export type IconId =
   | 'diplome'
   | 'dossier'
   | 'eclair'
+  | 'empreinte'
   | 'envoyer'
   | 'epingle'
   | 'equipe'
@@ -78,6 +80,7 @@ export const CORPS: Record<IconId, string> = {
   'activite': "<path d=\"M3.33 12 H8 L10.67 5.33 L14 18.67 L16 12 H20.67\" />",
   'aide': "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M9.33 9.33 A2.67 2.67 0 0 1 14.53 10.13 C14.53 11.87 12 12.27 12 14\" /><rect x=\"11.2\" y=\"16.27\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
   'app-couches': "<path d=\"M12 2.67 L20 6.67 L12 10.67 L4 6.67 Z\" /><path d=\"M4 12 L12 16 L20 12\" /><path d=\"M4 17.33 L12 21.33 L20 17.33\" />",
+  'applications': "<rect x=\"4\" y=\"4\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"13.33\" y=\"4\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"4\" y=\"13.33\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" /><rect x=\"13.33\" y=\"13.33\" width=\"6.67\" height=\"6.67\" fill=\"currentColor\" stroke=\"none\" />",
   'archiver': "<rect x=\"3.33\" y=\"4\" width=\"17.33\" height=\"4.67\" /><path d=\"M5.33 8.67 V18.93 A1.07 1.07 0 0 0 6.4 20 H17.6 A1.07 1.07 0 0 0 18.67 18.93 V8.67\" /><path d=\"M9.33 12.67 H14.67\" />",
   'attention': "<path d=\"M10.67 3.87 L2.53 17.87 A1.55 1.55 0 0 0 3.87 20.19 H20.13 A1.55 1.55 0 0 0 21.47 17.87 L13.33 3.87 A1.54 1.54 0 0 0 10.67 3.87 Z\" /><path d=\"M12 9.33 V13.33\" /><rect x=\"11.2\" y=\"15.73\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />",
   'avancer': "<path d=\"M4 6 L11 12 L4 18 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M13 6 L20 12 L13 18 Z\" fill=\"currentColor\" stroke=\"none\" />",
@@ -102,6 +105,7 @@ export const CORPS: Record<IconId, string> = {
   'diplome': "<path d=\"M2.67 9.33 L12 4.67 L21.33 9.33 L12 14 Z\" /><path d=\"M6.67 11.6 V16 C6.67 17.47 9.07 18.67 12 18.67 C14.93 18.67 17.33 17.47 17.33 16 V11.6\" /><path d=\"M21.33 9.33 V14.67\" />",
   'dossier': "<path d=\"M1.41 6.64a1.69 1.69 0 0 1 1.69-1.69h4.8l2.12 2.4h10.87a1.69 1.69 0 0 1 1.69 1.69v9.88a1.69 1.69 0 0 1-1.69 1.69H3.11A1.69 1.69 0 0 1 1.41 20.33V6.64Z\" />",
   'eclair': "<path d=\"M13.33 2.67 L5.33 13.33 H12 L10.67 21.33 L18.67 10.67 H12 Z\" />",
+  'empreinte': "<path d=\"M4 18.67 V14.67 A8 9.33 0 0 1 20 14.67 V17.33\" /><path d=\"M8 17.33 A4 5.33 0 0 1 16 17.33\" /><path d=\"M12 13.33 V20\" />",
   'envoyer': "<path d=\"M21.33 2.67 L10.67 13.33\" /><path d=\"M21.33 2.67 L14.67 21.33 L10.67 13.33 L2.67 9.33 Z\" />",
   'epingle': "<path d=\"M12 21.33 C7.56 16.89 5.33 13.42 5.33 10.67 A6.67 6.67 0 0 1 18.67 10.67 C18.67 13.42 16.44 16.89 12 21.33 Z\" /><circle cx=\"12\" cy=\"10.67\" r=\"2.4\" />",
   'equipe': "<circle cx=\"9.33\" cy=\"8\" r=\"3.33\" /><path d=\"M3.33 20 C3.33 15.33 6 13.33 9.33 13.33 C12.67 13.33 15.33 15.33 15.33 20\" /><path d=\"M16 5.33 A2.93 2.93 0 0 1 16 11.07\" /><path d=\"M17.33 13.6 C19.73 14.27 20.67 16.4 20.67 20\" />",
@@ -153,6 +157,7 @@ export const NOMS: Record<IconId, string> = {
   'activite': "Activité (pouls)",
   'aide': "Aide",
   'app-couches': "Application (couches)",
+  'applications': "Applications (lanceur)",
   'archiver': "Archiver",
   'attention': "Attention (avertissement)",
   'avancer': "Avancer",
@@ -177,6 +182,7 @@ export const NOMS: Record<IconId, string> = {
   'diplome': "Diplôme (Campus)",
   'dossier': "Dossier",
   'eclair': "Éclair (action rapide)",
+  'empreinte': "Empreinte (biométrie, passkey)",
   'envoyer': "Envoyer",
   'epingle': "Épingle (lieu)",
   'equipe': "Équipe (membres)",

package/react/layout.tsx

@@ -13,6 +13,9 @@ import type {
   ReactNode,
 } from 'react'
 import { cx } from './cx.js'
+// `icons` est un module COMMUN aux deux couches : l'importer ici ne tire pas
+// la couche applicative derrière la vitrine.
+import { Icon } from './icon.js'
 
 type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
 type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>
@@ -593,3 +596,183 @@ export function Carousel({ label, className, ...reste }: CarouselProps) {
 export function CarouselItem({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-carousel__item', className)} {...reste} />
 }
+
+/** La zone de droite de la barre : lanceur et compte.
+ *
+ *  ⚠️ À poser À CÔTÉ de `NavLinks`, jamais DEDANS. `NavLinks` disparaît sous
+ *  le point de rupture (et sous 1150px en `nav--riche`), remplacée par le
+ *  burger : un compte placé dedans s'évanouit sur téléphone, et l'on ne peut
+ *  plus se connecter — c'est pourtant la première chose qu'on y fait. */
+export function NavActions({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-nav__actions', className)} {...reste} />
+}
+
+/* ─── Lanceur d'applications ───────────────────────────────────────── */
+
+/** Le lanceur : passer d'un produit Zevra à l'autre, depuis n'importe lequel.
+ *  Il se pose À DROITE de la barre, à côté du compte — c'est la convention
+ *  que tout le monde connaît, et ce n'est pas le moment d'en inventer une.
+ *
+ *  Ouvert au survol et au focus en CSS seul : la barre reste rendue au
+ *  serveur, sans rien à hydrater. Une app qui préfère l'ouverture au CLIC
+ *  (la convention des lanceurs) tient l'état elle-même et passe `ouvert` —
+ *  un état se dit en prop, il ne se peint pas depuis l'app. */
+export function Lanceur({
+  label = 'Applications Zevra',
+  ouvert,
+  className,
+  children,
+  ...reste
+}: Div & { label?: string; ouvert?: boolean; className?: string; children?: ReactNode }) {
+  return (
+    <span className={cx('zv-lanceur', ouvert && 'zv-lanceur--ouvert', className)} {...reste}>
+      <button
+        type="button"
+        className="zv-lanceur__btn"
+        aria-label={label}
+        aria-haspopup="true"
+        aria-expanded={ouvert}
+      >
+        <Icon nom="applications" taille="lg" />
+      </button>
+      <span className="zv-lanceur__panneau">
+        <span className="zv-menu">
+          <span className="zv-lanceur__apps">{children}</span>
+        </span>
+      </span>
+    </span>
+  )
+}
+
+export interface LanceurAppProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
+  nom: string
+  /** Le glyphe du produit — une image du paquet (`@zevra/ui/logos/…`). Sans
+   *  lui, la tuile porte l'initiale : une image qui ne charge pas ne doit
+   *  pas laisser un trou. */
+  glyphe?: string
+  /** Le produit où l'on se trouve déjà : pose `aria-current="page"`. Sans
+   *  lui, on ne sait pas d'où l'on part. */
+  courant?: boolean
+  className?: string
+}
+
+export function LanceurApp({ nom, glyphe, courant, className, ...reste }: LanceurAppProps) {
+  return (
+    <a
+      aria-current={courant ? 'page' : undefined}
+      className={cx('zv-lanceur__app', className)}
+      {...reste}
+    >
+      {glyphe ? (
+        <img src={glyphe} alt="" className="zv-lanceur__glyphe" />
+      ) : (
+        <span className="zv-avatar zv-avatar--soft" aria-hidden="true">
+          {nom.slice(0, 1).toUpperCase()}
+        </span>
+      )}
+      <span className="zv-lanceur__nom">{nom}</span>
+    </a>
+  )
+}
+
+/* ─── Zone de compte ───────────────────────────────────────────────── */
+
+export interface CompteProps extends Div {
+  /** L'utilisateur connecté. ⚠️ ABSENT = visiteur : la zone existe quand
+   *  même, avec l'invite de connexion. Une barre où l'on ne peut pas se
+   *  connecter est une barre où l'on ne revient pas. */
+  utilisateur?: { nom: string; email?: string; initiales?: string }
+  /** Ouverture au clic, tenue par l'app. Voir `Lanceur`. */
+  ouvert?: boolean
+  label?: string
+  className?: string
+  /** Les entrées du panneau — des `CompteLien`. */
+  children?: ReactNode
+}
+
+/** La zone de compte de la barre. Connecté, elle porte la pastille
+ *  d'initiales et le menu ; visiteur, la silhouette et l'invite de connexion.
+ *  Dans les DEUX cas elle est là : c'est ce qui fait qu'on sait toujours où
+ *  se connecter.
+ *
+ *  ⚠️ Le panneau n'est pas un `role="menu"` : ce rôle promet une navigation
+ *  aux flèches que le CSS seul ne peut pas tenir. Ce sont des liens dans un
+ *  panneau, atteignables par la tabulation — une promesse tenue vaut mieux
+ *  qu'un rôle exact et menteur. */
+export function Compte({
+  utilisateur,
+  ouvert,
+  label,
+  className,
+  children,
+  ...reste
+}: CompteProps) {
+  const initiales =
+    utilisateur?.initiales ??
+    utilisateur?.nom
+      .split(/[\s&]+/)
+      .slice(0, 2)
+      .map((m) => m.slice(0, 1).toUpperCase())
+      .join('')
+
+  return (
+    <span className={cx('zv-compte', ouvert && 'zv-compte--ouvert', className)} {...reste}>
+      <button
+        type="button"
+        className="zv-compte__btn"
+        aria-label={label ?? (utilisateur ? `Compte de ${utilisateur.nom}` : 'Se connecter')}
+        aria-haspopup="true"
+        aria-expanded={ouvert}
+      >
+        {utilisateur ? (
+          <span className="zv-avatar zv-avatar--accent" aria-hidden="true">
+            {initiales}
+          </span>
+        ) : (
+          <span className="zv-avatar zv-avatar--soft" aria-hidden="true">
+            <Icon nom="utilisateur" taille="sm" />
+          </span>
+        )}
+        {utilisateur && <span className="zv-compte__nom">{utilisateur.nom}</span>}
+      </button>
+      <span className="zv-compte__panneau">
+        <span className="zv-menu">
+          <span className="zv-compte__tete">
+            <span className="zv-compte__tete-nom">
+              {utilisateur ? utilisateur.nom : 'Vous n’êtes pas connecté'}
+            </span>
+            {utilisateur?.email && (
+              <span className="zv-compte__tete-mail">{utilisateur.email}</span>
+            )}
+          </span>
+          {children}
+        </span>
+      </span>
+    </span>
+  )
+}
+
+/** Une entrée du panneau de compte. Rendue en `<a>` avec `href`, en
+ *  `<button>` sans — se déconnecter est une ACTION, pas une navigation, et
+ *  un lien qui n'en est pas un se copie, s'ouvre dans un onglet et casse. */
+export function CompteLien({
+  sortie,
+  className,
+  href,
+  ...reste
+}: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> & {
+  /** Détache l'entrée par un filet : la déconnexion, en pied de panneau. */
+  sortie?: boolean
+  className?: string
+}) {
+  const classes = cx('zv-menu__item', sortie && 'zv-compte__sortie', className)
+  if (href) return <a href={href} className={classes} {...reste} />
+  return (
+    <button
+      type="button"
+      className={classes}
+      {...(reste as Omit<HTMLAttributes<HTMLButtonElement>, 'className'>)}
+    />
+  )
+}

package/src/layout.css

@@ -236,6 +236,29 @@
   text-decoration: none;
 }
 
+/* ─── Zone d'actions de la barre ────────────────────────────────────────
+ * Le lanceur et le compte, à droite. Elle ne fait PAS partie de
+ * `.zv-nav__links` et c'est tout l'intérêt : cette rangée-là disparaît sous
+ * le point de rupture (et sous 1150px pour `.zv-nav--riche`), remplacée par
+ * le burger. Le compte, lui, doit rester — sinon on ne peut plus se
+ * connecter depuis un téléphone, et c'est la première chose qu'on y fait.
+ *
+ * Elle se pose APRÈS `.zv-nav__links` dans le balisage, et avant le burger. */
+.zv-nav__actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  /* Décolle du dernier lien de la rangée quand les deux coexistent. */
+  margin-left: 10px;
+}
+
+@media (max-width: 767px) {
+  .zv-nav__actions {
+    margin-left: 0;
+  }
+}
+
 /* Bouton burger de la barre vitrine.
  *
  * ⚠️ HORS RELEVÉ des planches vitrine, qui sont toutes des rendus figés à

package/src/navigation.css

@@ -450,6 +450,16 @@
   background: var(--hairline);
 }
 
+/* ⚠️ CONTRE-ORDRE. Une entrée de menu rendue en <a> (une navigation, par
+ * opposition à une action) hérite du soulignement par défaut du navigateur,
+ * là où la même entrée en <button> n'a rien : dans un même panneau,
+ * « Mon compte » se soulignait et « Se déconnecter » non. Les deux doivent
+ * se rendre à l'identique — c'est la BALISE qui change, pas l'apparence. */
+a.zv-menu__item,
+a.zv-menu__item:hover {
+  text-decoration: none;
+}
+
 /* ⚠️ Option SURVOLÉE AU CLAVIER — ajoutée le 25/08/2026 avec la sélection
  * dessinée. Ce n'est ni :hover (la souris n'est pas dessus) ni :focus (le
  * focus reste sur le déclencheur, c'est aria-activedescendant qui porte
@@ -1018,3 +1028,243 @@
     min-height: var(--tap);
   }
 }
+
+/* ─── Lanceur d'applications, et zone de compte ─────────────────────────
+ *
+ * ⚠️ CE BLOC AUSSI DOIT RESTER APRÈS `.zv-menu`, pour la même raison que
+ * `.zv-navdd` : les deux panneaux portent `.zv-menu` et lui reprennent son
+ * display et son ancrage à spécificité égale — c'est l'ORDRE qui tranche.
+ *
+ * Les deux vivent À DROITE de la barre, côte à côte : le lanceur pour passer
+ * d'un produit à l'autre, le compte pour savoir qui l'on est. C'est la
+ * convention que tout le monde connaît, et ce n'est pas le moment d'en
+ * inventer une autre.
+ *
+ * ─── L'ÉTAT ────────────────────────────────────────────────────────────
+ * Ouverts au survol ET au focus (`:focus-within`), en CSS seul : la barre
+ * reste rendue au serveur, sans une ligne à hydrater — même mécanique que
+ * `.zv-navdd`. Une app qui préfère l'ouverture au CLIC (la convention des
+ * lanceurs) pose `.zv-lanceur--ouvert` / `.zv-compte--ouvert` : la prop
+ * `ouvert` du composant les rend. C'est la règle du dépôt — un état se dit
+ * en prop, il ne se peint pas depuis l'app.
+ */
+
+.zv-lanceur,
+.zv-compte {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+
+/* Le déclencheur du lanceur : la cible tactile du paquet, sans cadre — le
+ * chrome n'est pas une action. */
+.zv-lanceur__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tap);
+  height: var(--tap);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-2);
+  cursor: pointer;
+  transition: color 140ms var(--zv-easing, cubic-bezier(0.2, 0.7, 0.2, 1));
+}
+
+.zv-lanceur:hover .zv-lanceur__btn,
+.zv-lanceur:focus-within .zv-lanceur__btn {
+  color: var(--accent);
+}
+
+/* Le déclencheur du compte : la pastille d'initiales, cliquable. Elle garde
+ * son carré — le rond ici serait un usage de réseau social, et la pastille
+ * d'initiales du paquet est carrée depuis le premier jour (data.css). */
+.zv-compte__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Le nom, à côté de la pastille. Il tombe sous le point de rupture : une
+ * barre de téléphone n'a pas la place d'un nom, et la pastille suffit. */
+.zv-compte__nom {
+  font-size: var(--app);
+  font-weight: 500;
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+
+/* ─── Les deux panneaux ─────────────────────────────────────────────────
+ * Ancrés à DROITE et non centrés : ils vivent au bord droit de la fenêtre,
+ * et un panneau centré sur son bouton en sortirait. Le pont invisible
+ * (::before) couvre l'interstice, sans quoi le survol se rompt en descendant
+ * vers le panneau et celui-ci se referme sous le curseur. */
+
+.zv-lanceur__panneau,
+.zv-compte__panneau {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: auto;
+  translate: none;
+  padding-top: 12px;
+  display: none;
+  z-index: 60;
+}
+
+/* ⚠️ Le `.zv-menu` intérieur est LUI-MÊME en position absolue (il est fait
+ * pour s'ancrer seul sous un déclencheur). Imbriqué dans un panneau qui
+ * porte déjà l'ancrage, il se positionnait une SECONDE fois — à partir du
+ * bord droit du panneau, donc vers la droite, et la grille sortait de
+ * l'écran sur téléphone. Sur grand écran la place restante le masquait :
+ * c'est le rendu à 390px qui l'a montré. Ici le panneau ancre, le menu ne
+ * fournit plus que sa surface (filet, fond, ombre). */
+.zv-lanceur__panneau .zv-menu,
+.zv-compte__panneau .zv-menu {
+  position: static;
+}
+
+.zv-lanceur__panneau::before,
+.zv-compte__panneau::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 12px;
+}
+
+.zv-lanceur:hover .zv-lanceur__panneau,
+.zv-lanceur:focus-within .zv-lanceur__panneau,
+.zv-lanceur--ouvert .zv-lanceur__panneau,
+.zv-compte:hover .zv-compte__panneau,
+.zv-compte:focus-within .zv-compte__panneau,
+.zv-compte--ouvert .zv-compte__panneau {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── La grille d'applications ──────────────────────────────────────────
+ * Trois par rangée : au-delà, les noms se coupent ; en deçà, le panneau
+ * s'allonge en colonne et cesse de se lire d'un coup d'œil. */
+
+.zv-lanceur__apps {
+  display: grid;
+  grid-template-columns: repeat(3, 92px);
+  gap: 4px;
+  padding: 6px;
+}
+
+.zv-lanceur__app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 6px;
+  text-align: center;
+  text-decoration: none;
+  color: var(--ink-2);
+}
+
+/* Même contre-ordre que .zv-sidelink : sans lui, la tuile vire au bleu
+ * souligné dans une page qui applique le style de lien éditorial. */
+.zv-lanceur__app:hover {
+  background: var(--hairline);
+  color: var(--ink-2);
+  text-decoration: none;
+}
+
+.zv-lanceur__app:focus-visible {
+  outline-offset: -2px;
+}
+
+/* L'application COURANTE reste marquée : sans elle, on ne sait pas d'où
+ * l'on part. aria-current="page" est le marquage attendu ; la classe existe
+ * pour que l'état se pose aussi sans routeur. */
+.zv-lanceur__app--on,
+.zv-lanceur__app[aria-current='page'] {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+/* Le glyphe du produit. 28px : la taille de .zv-icon--xl, pour qu'une tuile
+ * à image et une tuile à icône tracée se posent sur la même ligne. */
+.zv-lanceur__glyphe {
+  display: block;
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.zv-lanceur__nom {
+  font-size: var(--app-sm);
+  font-weight: 500;
+  line-height: 1.3;
+  /* Un nom de produit trop long ne doit pas élargir la colonne : il se coupe
+   * plutôt que de déformer la grille. */
+  overflow-wrap: anywhere;
+}
+
+/* ─── L'en-tête du panneau de compte ────────────────────────────────────
+ * Qui l'on est, avant ce qu'on peut faire. Non connecté, il porte l'invite
+ * de connexion : la zone de compte existe TOUJOURS, connecté ou non — une
+ * barre où l'on ne peut pas se connecter est une barre où l'on ne revient
+ * pas. */
+
+.zv-compte__tete {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-bottom: 1px solid var(--hairline);
+  padding: 12px 14px;
+  margin-bottom: 4px;
+}
+
+.zv-compte__tete-nom {
+  font-size: var(--app);
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.zv-compte__tete-mail {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  color: var(--label);
+  overflow-wrap: anywhere;
+}
+
+.zv-compte__panneau .zv-menu {
+  min-width: 240px;
+}
+
+/* Le pied du panneau : la déconnexion, séparée de ce qui précède. Elle ne
+ * prend PAS l'encre d'erreur — se déconnecter n'est pas un incident. */
+.zv-compte__sortie {
+  border-top: 1px solid var(--hairline);
+  margin-top: 4px;
+  padding-top: 4px;
+}
+
+@media (max-width: 767px) {
+  /* Le nom tombe : la pastille suffit à dire qui l'on est, et la barre n'a
+   * plus la place. */
+  .zv-compte__nom {
+    display: none;
+  }
+
+  /* Les deux panneaux sont plafonnés à l'écran, comme le menu et le
+   * popover : au bord droit d'un téléphone, un panneau de 300px pousserait
+   * la page en défilement horizontal. */
+  .zv-lanceur__panneau .zv-menu,
+  .zv-compte__panneau .zv-menu {
+    max-width: calc(100vw - 32px);
+  }
+
+  .zv-lanceur__apps {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}