@zevra/ui 0.10.0 → 0.12.0

package/react/catalogue.tsx

@@ -34,7 +34,7 @@ import {
   Checkbox, Drop, Field, Input, InputAffix, Radio, Range, Search, Seg,
   SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea,
 } from './forms.js'
-import { ICONES, Icon, IconButton, NOMS_ICONES } from './icon.js'
+import { ICONES, Icon, IconButton, IconTile, NOMS_ICONES } from './icon.js'
 import {
   Banner, CTA, Carousel, CarouselItem, Col, Footer, FooterMini, Grid, Grid12,
   Gutter, Hero, Nav, NavLink, NavLinks, NavLogo, ProofBar, SectionHead,
@@ -489,6 +489,24 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </ButtonRow>
         ),
       },
+      {
+        id: 'boutons-icones',
+        nom: 'Boutons à icône',
+        resume:
+          'L’icône vient du jeu (16 px) et hérite de la couleur du libellé — en prop, jamais recopiée à la main. « carre » est l’action à icône SEULE : aria-label OBLIGATOIRE, écrit pour l’ACTION. Ne pas confondre avec IconButton (chrome nu, 40 px) ni ChromeButton (croix bordée) : le carré est une action, il en a le poids.',
+        code: `<Button icone="telecharger">Télécharger le rapport</Button>
+<Button variante="fantome" iconeApres="chevron-droit">Étape suivante</Button>
+<Button carre variante="encre" icone="envoyer" aria-label="Envoyer le message" />`,
+        rendu: (
+          <ButtonRow>
+            <Button icone="telecharger">Télécharger le rapport</Button>
+            <Button variante="fantome" iconeApres="chevron-droit">
+              Étape suivante
+            </Button>
+            <Button carre variante="encre" icone="envoyer" aria-label="Envoyer le message" />
+          </ButtonRow>
+        ),
+      },
       {
         id: 'lien-fleche',
         nom: 'Lien fléché',
@@ -1322,16 +1340,19 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'sidebar',
         nom: 'Colonne latérale',
         resume:
-          'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran.',
+          'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran. « num » accepte un rang mono OU un glyphe (le ⚙ du relevé), sur la même colonne de 16 px — jamais les deux.',
         code: `<Sidebar>
   <SidebarHead>…</SidebarHead>
   <SideGroup titre="Espace">
     <SideLink href="/bibliotheque" courant num="01">Bibliothèque</SideLink>
   </SideGroup>
+  <SideGroup titre="Organisation">
+    <SideLink href="/admin" num={<Icon nom="reglages" />}>Administration</SideLink>
+  </SideGroup>
   <SidebarFoot>…</SidebarFoot>
 </Sidebar>`,
         rendu: (
-          <Sidebar style={{ height: 260 }}>
+          <Sidebar style={{ height: 300 }}>
             <SidebarHead>
               <Mono ton="ink">ZEVRA</Mono>
             </SidebarHead>
@@ -1346,6 +1367,11 @@ export const CATALOGUE: GroupeCatalogue[] = [
                 Import
               </SideLink>
             </SideGroup>
+            <SideGroup titre="Organisation">
+              <SideLink href="#" num={<Icon nom="reglages" />}>
+                Administration
+              </SideLink>
+            </SideGroup>
             <SidebarFoot>
               <Meta discret>v2.4.1</Meta>
             </SidebarFoot>
@@ -1537,7 +1563,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'icons.css',
     resume:
-      "55 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+      "55 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives — le trait carré de la charte, points d'encre carrés compris. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
     exemples: [
       {
         id: 'jeu',
@@ -1581,6 +1607,33 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'tuile',
+        nom: 'Tuile d’icône',
+        resume:
+          'La pastille carrée devant un argument de la vitrine — liste de garanties, grille d’atouts. DÉCORATIVE par défaut : c’est le libellé voisin qui nomme, un titre ne se pose que si elle est seule. UNE par argument, jamais en décor isolé — une tuile sans libellé est un rébus.',
+        code: `<IconTile nom="bouclier-verifie" />
+<IconTile nom="balance" />`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 14, maxWidth: 380 }}>
+            {(
+              [
+                ['bouclier-verifie', 'Hébergement souverain', 'Infrastructure dédiée, en France.'],
+                ['balance', 'Sources officielles', 'BOSS, Judilibre, KALI — datées et citées.'],
+                ['cadenas', 'Zéro réutilisation', 'Vos pièces n’entraînent aucun modèle.'],
+              ] as const
+            ).map(([nom, titre, texte]) => (
+              <div key={nom} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+                <IconTile nom={nom} />
+                <div>
+                  <CardTitle as="p">{titre}</CardTitle>
+                  <Body taille="dense">{texte}</Body>
+                </div>
+              </div>
+            ))}
+          </div>
+        ),
+      },
     ],
   },
 
@@ -1966,24 +2019,28 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'bande',
         nom: 'Bande manifeste',
         resume:
-          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres : les contrastes ont été réglés dans ce sens-là et pas dans l’autre.',
+          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres. La bande ne porte AUCUNE gouttière propre : c’est la page qui la donne — poser un Gutter dedans, sinon le contenu colle au bord.',
         code: `<Band lueur filigrane={<Glyph variante="watermark">…</Glyph>}>
-  <Kicker surSombre>Souveraineté</Kicker>
-  <H2>Vos pièces ne quittent pas la France.</H2>
+  <Gutter>
+    <Kicker surSombre>Souveraineté</Kicker>
+    <H2>Vos pièces ne quittent pas la France.</H2>
+  </Gutter>
 </Band>`,
         surSombre: true,
         rendu: (
           <Band lueur>
-            <Kicker surSombre>Souveraineté</Kicker>
-            <Heading taille="h2-sm">Vos pièces ne quittent pas la France.</Heading>
-            <Body>
-              Infrastructure dédiée, chiffrement au repos, aucun transfert hors Union
-              européenne.
-            </Body>
-            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
-              <Tag surSombre etat="ok">CHIFFRÉ</Tag>
-              <Tag surSombre>OVHCLOUD · GRA</Tag>
-            </div>
+            <Gutter>
+              <Kicker surSombre>Souveraineté</Kicker>
+              <Heading taille="h2-sm">Vos pièces ne quittent pas la France.</Heading>
+              <Body>
+                Infrastructure dédiée, chiffrement au repos, aucun transfert hors Union
+                européenne.
+              </Body>
+              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+                <Tag surSombre etat="ok">CHIFFRÉ</Tag>
+                <Tag surSombre>OVHCLOUD · GRA</Tag>
+              </div>
+            </Gutter>
           </Band>
         ),
       },

package/react/content.tsx

@@ -305,7 +305,7 @@ export function UiPreview({
 export function Check({ className, ...reste }: Span & { className?: string }) {
   return (
     <span className={cx('zv-check', className)} aria-hidden="true" {...reste}>
-      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="12" height="12">
+      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter" width="12" height="12">
         <polyline points="2.5,6.5 5,9 9.5,3.5" />
       </svg>
     </span>