@zevra/ui 0.44.1 → 0.45.0

package/react/cx.ts

@@ -18,3 +18,16 @@ export function cx(...parts: (string | false | null | undefined)[]): string {
 export function mod(base: string, variante?: string | null): string {
   return variante ? `${base}--${variante}` : ''
 }
+
+/**
+ * Les angles d'un composant (DECISIONS.md, « Les angles arrondis, en
+ * option ») : `vifs` est le défaut de la charte, `arrondis` l'option. Sans
+ * valeur, le composant suit son conteneur : c'est ce qui laisse une app
+ * entière s'arrondir d'une seule enveloppe `Angles`.
+ */
+export type ChoixAngles = 'vifs' | 'arrondis'
+
+/** La classe qui redéfinit les tokens de rayon, ou rien pour suivre le conteneur. */
+export function classeAngles(angles?: ChoixAngles | null): string {
+  return angles === 'arrondis' ? 'zv-arrondi' : angles === 'vifs' ? 'zv-vif' : ''
+}

package/react/feedback.tsx

@@ -9,7 +9,7 @@
 // roue dit « attendez », cette phrase dit sur quoi.
 
 import type { HTMLAttributes, ReactNode } from 'react'
-import { cx } from './cx.js'
+import { classeAngles, cx, type ChoixAngles } from './cx.js'
 
 type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
 type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>
@@ -25,10 +25,13 @@ export interface AlertProps extends Div {
   /** `sm` resserre, `lg` amplifie : ce dernier pour le message qui REMPLACE
    *  un contenu attendu (incident, réponse impossible). */
   taille?: 'sm' | 'normal' | 'lg'
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   className?: string
 }
 
-export function Alert({ ton, taille = 'normal', className, ...reste }: AlertProps) {
+export function Alert({ ton, taille = 'normal', angles, className, ...reste }: AlertProps) {
   return (
     <div
       role="alert"
@@ -37,6 +40,7 @@ export function Alert({ ton, taille = 'normal', className, ...reste }: AlertProp
         `zv-alert--${ton}`,
         taille === 'sm' && 'zv-alert--sm',
         taille === 'lg' && 'zv-alert--lg',
+        classeAngles(angles),
         className,
       )}
       {...reste}
@@ -55,6 +59,9 @@ export interface BadgeProps extends Span {
   gabarit?: 'micro' | 'state'
   /** Pastille en tête, de la couleur du texte. */
   pastille?: boolean
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   className?: string
   children?: ReactNode
 }
@@ -65,6 +72,7 @@ export function Badge({
   ton = 'neutre',
   gabarit,
   pastille,
+  angles,
   className,
   children,
   ...reste
@@ -77,6 +85,7 @@ export function Badge({
         gabarit === 'micro' && 'zv-badge--micro',
         gabarit === 'state' && 'zv-badge--state',
         pastille && 'zv-badge--dot',
+        classeAngles(angles),
         className,
       )}
       {...reste}

package/react/forms.tsx

@@ -20,7 +20,7 @@ import type {
   SelectHTMLAttributes,
   TextareaHTMLAttributes,
 } from 'react'
-import { cx } from './cx.js'
+import { classeAngles, cx, type ChoixAngles } from './cx.js'
 import { Icon } from './icon.js'
 
 /* ─── Groupe de champ ──────────────────────────────────────────────── */
@@ -92,13 +92,16 @@ export interface InputProps
   /** Pose `aria-invalid` : c'est lui qui rend l'erreur audible, et le CSS le
    *  suit autant que la classe. */
   erreur?: boolean
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   className?: string
 }
 
-export function Input({ mono, nu, erreur, className, ...reste }: InputProps) {
+export function Input({ mono, nu, erreur, angles, className, ...reste }: InputProps) {
   return (
     <input
-      className={cx('zv-input', mono && 'zv-input--mono', nu && 'zv-input--bare', className)}
+      className={cx('zv-input', mono && 'zv-input--mono', nu && 'zv-input--bare', classeAngles(angles), className)}
       aria-invalid={erreur || undefined}
       {...reste}
     />
@@ -108,13 +111,16 @@ export function Input({ mono, nu, erreur, className, ...reste }: InputProps) {
 export interface TextareaProps
   extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
   erreur?: boolean
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   className?: string
 }
 
-export function Textarea({ erreur, className, ...reste }: TextareaProps) {
+export function Textarea({ erreur, angles, className, ...reste }: TextareaProps) {
   return (
     <textarea
-      className={cx('zv-textarea', className)}
+      className={cx('zv-textarea', classeAngles(angles), className)}
       aria-invalid={erreur || undefined}
       {...reste}
     />
@@ -135,15 +141,18 @@ export function Select({
 
 export interface SearchProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   /** Enveloppe : c'est elle qui porte le cadre et la largeur. */
   className?: string
 }
 
 /** Cadre + loupe + champ nu. La loupe est dans le balisage (et non un fond
  *  CSS) pour suivre `currentColor` et rester nette en zoom. */
-export function Search({ className, ...reste }: SearchProps) {
+export function Search({ angles, className, ...reste }: SearchProps) {
   return (
-    <div className={cx('zv-search', className)}>
+    <div className={cx('zv-search', classeAngles(angles), className)}>
       <svg
         className="zv-search__icon"
         viewBox="0 0 13 13"

package/react/icon.tsx

@@ -6,7 +6,7 @@
 // sur papier comme sur la bande manifeste sans déclinaison.
 
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode, SVGAttributes } from 'react'
-import { cx } from './cx.js'
+import { classeAngles, cx, type ChoixAngles } from './cx.js'
 import { CORPS, NOMS, type IconId } from './icon-data.js'
 
 export type { IconId }
@@ -58,6 +58,9 @@ export interface IconButtonProps
    *  (« Croix ») : c'est ce que le lecteur d'écran annonce. */
   label: string
   taille?: IconProps['taille']
+  /** `arrondis` (option) ou `vifs` (défaut de la charte). Sans valeur, le
+   *  composant suit son conteneur : voir `Angles`. */
+  angles?: ChoixAngles
   className?: string
   children?: ReactNode
 }
@@ -66,6 +69,7 @@ export function IconButton({
   icone,
   label,
   taille = 'lg',
+  angles,
   className,
   children,
   type = 'button',
@@ -75,7 +79,7 @@ export function IconButton({
     <button
       type={type}
       aria-label={label}
-      className={cx('zv-icon-btn', className)}
+      className={cx('zv-icon-btn', classeAngles(angles), className)}
       {...reste}
     >
       {icone ? <Icon nom={icone} taille={taille} /> : children}

package/react/index.ts

@@ -27,7 +27,7 @@
 // lit : les avertissements ⚠️ signalent ce qui casse le système si on le
 // contourne, pas de simples préférences.
 
-export { cx, mod } from './cx.js'
+export { cx, mod, type ChoixAngles } from './cx.js'
 
 export * from './actions.js'
 export * from './content.js'

package/src/components.css

@@ -796,7 +796,7 @@
 .zv-progress {
   height: 3px;
   background: var(--hairline);
-  border-radius: 0;
+  border-radius: var(--r-pill);
   overflow: hidden;
 }
 
@@ -1129,7 +1129,7 @@
   overflow: hidden;
   background: var(--hairline);
   /* Angle vif comme le reste ; aucune ombre, l'image est dans le flux. */
-  border-radius: 0;
+  border-radius: var(--r-card);
 }
 
 /* Les quatre rapports du système. Un cinquième se demande, il ne s'invente

package/src/data.css

@@ -47,9 +47,10 @@
  * Le tableau scrolle DANS son cadre : sans ce confinement, une colonne trop
  * large fait scroller la page entière et le rail de navigation part avec.
  * Angle vif et sans ombre : un tableau est une surface de travail, pas une
- * carte éditoriale. Aucun rayon n'est posé, la valeur par défaut est déjà 0,
- * il n'y a rien à annuler tant qu'on ne compose pas .zv-table avec .zv-card
- * (ce que ce module déconseille : ce sont deux intentions différentes). */
+ * carte éditoriale. Son rayon est celui d'un panneau (--r-panel, 0 par
+ * défaut) : il ne s'arrondit que sous .zv-arrondi, et le défilement interne
+ * se rogne au rayon. Ne pas le composer avec .zv-card : ce sont deux
+ * intentions différentes. */
 
 .zv-table {
   overflow-x: auto;
@@ -73,6 +74,7 @@
    * Les colonnes souples sont en minmax(0|150px, …) : sans borne basse à 0 ou
    * sans min-width sur la cellule, la troncature ne se déclenche jamais. */
   --zv-cols: minmax(0, 1fr);
+  border-radius: var(--r-panel); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 .zv-table__head {
@@ -631,6 +633,7 @@
   font-size: var(--mono);
   font-weight: 600;
   color: var(--ink-2);
+  border-radius: var(--r-pill); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* Valeur technique dans une étiquette (date normalisée, référence) : la mono
@@ -756,6 +759,7 @@
 .zv-fold {
   border: 1px solid var(--line);
   background: var(--white);
+  border-radius: var(--r-panel); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 .zv-fold + .zv-fold {
@@ -830,6 +834,7 @@
   font-weight: 600;
   white-space: nowrap;
   color: var(--ink-2);
+  border-radius: var(--r-pill); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* ─── Code ─────────────────────────────────────────────────────────────
@@ -851,6 +856,7 @@
   font-size: 0.85em;
   overflow-wrap: break-word;
   color: var(--ink-2);
+  border-radius: var(--r-pill); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* En bloc. Le cadre défile en son sein, comme le tableau : une ligne longue
@@ -866,6 +872,7 @@
   line-height: 1.7;
   tab-size: 2;
   color: var(--ink);
+  border-radius: var(--r-panel); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* Le <code> intérieur n'apporte que la sémantique : sans ce rappel, il

package/src/feedback.css

@@ -75,7 +75,7 @@
    * les quatre tokens de rayon à 0. La contradiction longtemps signalée ici
    * (un bouton arrondi au milieu de blocs vifs dans l'écran vide) est
    * éteinte par cet arbitrage, pas par ce module. */
-  border-radius: 0;
+  border-radius: var(--r-panel);
 }
 
 /* Information : le seul ton relevé en bandeau de bas de page (garanties,
@@ -206,7 +206,7 @@
   /* Un état ne se coupe jamais en deux lignes : « EN CHARGE » sur deux
    * lignes se lit comme deux états. */
   white-space: nowrap;
-  border-radius: 0; /* angle vif : relevé, et arbitré depuis (25/08/2026) */
+  border-radius: var(--r-pill); /* angle vif : relevé, et arbitré depuis (25/08/2026) */
 }
 
 /* Gabarit micro : niveau de log en tête de ligne, badge de la coque. À
@@ -641,6 +641,7 @@
   transition:
     opacity 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
     visibility 0s linear 140ms;
+  border-radius: var(--r-panel); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 .zv-tooltip-hit:hover > .zv-tooltip,

package/src/forms.css

@@ -113,7 +113,7 @@
   border: 1px solid var(--line);
   /* Angle vif : aucun rounded-* sur un seul champ des huit écrans. Posé
    * explicitement, sinon Safari arrondit les champs de lui-même. */
-  border-radius: 0;
+  border-radius: var(--r-btn);
   background: var(--white);
   padding: 9px 12px;
   /* Un <input> n'hérite pas de la police du document : sans cette ligne, le
@@ -190,6 +190,7 @@
   transition:
     border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
     box-shadow 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  border-radius: var(--r-btn); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 .zv-search:hover {
@@ -331,7 +332,7 @@
   min-width: 0;
   min-height: 96px; /* sans source : voir ci-dessus */
   border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: var(--r-btn);
   background: var(--white);
   padding: 9px 12px;
   font-family: var(--font-text);
@@ -369,6 +370,7 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
+  border-radius: var(--r-btn); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* Ancre pleine largeur : le cas d'un CHAMP de formulaire, où la liste doit
@@ -761,7 +763,7 @@
 
 .zv-seg {
   border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: var(--r-btn);
   background: var(--white);
   padding: 4px 9px;
   font-family: var(--font-text);
@@ -849,6 +851,7 @@
   background: var(--white);
   padding: 38px 24px;
   cursor: pointer;
+  border-radius: var(--r-panel); /* 0 par défaut, arrondi sous .zv-arrondi */
 }
 
 /* Survol et survol de dépôt rendus à l'identique : la zone répond pareil que
@@ -1125,7 +1128,7 @@
   margin-right: -6px;
   padding: 0;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--r-btn);
   background: none;
   color: var(--muted);
   cursor: pointer;

package/src/navigation.css

@@ -290,7 +290,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: var(--r-btn);
   background: var(--white);
   /* base.css ne reset pas les boutons : sans police ni fond explicites, un
    * <button> retombe sur ceux du navigateur et détonne. Même précaution que
@@ -419,7 +419,7 @@
   flex-direction: column;
   min-width: 230px;
   border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: var(--r-panel);
   background: var(--white);
   padding: 5px;
   /* Seule ombre du chrome applicatif, et elle est justifiée : un menu flotte
@@ -614,7 +614,7 @@ a.zv-menu__item:hover {
   min-width: 230px;
   max-width: 320px;
   border: 1px solid var(--line);
-  border-radius: 0;
+  border-radius: var(--r-panel);
   background: var(--white);
   box-shadow: var(--shadow-menu);
   padding: 14px 16px;

package/src/tokens.css

@@ -158,3 +158,31 @@
   /* Signature */
   --spec-filet: 56px; /* filet de spectre 56×2px devant chaque kicker */
 }
+
+/* ─── Les angles arrondis, en option (27/10/2026) ───────────────────
+ *
+ * HORS RELEVÉ (DECISIONS.md, « Les angles arrondis, en option ») : le
+ * défaut reste l'angle vif du 25/08. `zv-arrondi` redéfinit les quatre
+ * tokens, et une propriété personnalisée s'hérite : posée sur <html>, la
+ * classe arrondit l'app ; sur un conteneur, la zone ; sur un composant,
+ * lui seul. `zv-vif` remet un élément au carré dans une zone arrondie.
+ *
+ * Légèrement, et c'est voulu : à peu près la moitié du relevé d'avant le
+ * 25/08. Le rond de forme (pastille, radio, interrupteur) n'en dépend pas. */
+.zv-arrondi {
+  --r-btn: 4px;
+  --r-pill: 3px;
+  --r-panel: 6px;
+  --r-card: 8px;
+}
+.zv-vif {
+  --r-btn: 0;
+  --r-pill: 0;
+  --r-panel: 0;
+  --r-card: 0;
+}
+/* L'enveloppe `Angles` : elle ne porte que les tokens, sans ajouter de
+ * boîte à la mise en page (l'héritage passe par l'arbre, pas par la boîte). */
+.zv-angles {
+  display: contents;
+}