@zevra/ui 0.16.0 → 0.20.0

package/icons/index.json

@@ -38,6 +38,12 @@
       "viewBox": "0 0 24 24",
       "corps": "<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\" />"
     },
+    {
+      "id": "avancer",
+      "nom": "Avancer",
+      "viewBox": "0 0 24 24",
+      "corps": "<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\" />"
+    },
     {
       "id": "balance",
       "nom": "Balance (justice)",
@@ -98,6 +104,12 @@
       "viewBox": "0 0 24 24",
       "corps": "<path d=\"M6.67 14.67 L12 9.33 L17.33 14.67\" />"
     },
+    {
+      "id": "citation",
+      "nom": "Citation",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M4 14 V10 C4 7.8 5.8 6 8 6 V9 C6.9 9 6 9.9 6 11 H9 V14 Z\" /><path d=\"M14 14 V10 C14 7.8 15.8 6 18 6 V9 C16.9 9 16 9.9 16 11 H19 V14 Z\" />"
+    },
     {
       "id": "coche",
       "nom": "Coche",
@@ -218,12 +230,24 @@
       "viewBox": "0 0 24 24",
       "corps": "<path d=\"M4 4 V20 H20\" /><path d=\"M8.67 20 V12.67\" /><path d=\"M12.67 20 V8\" /><path d=\"M16.67 20 V15.33\" />"
     },
+    {
+      "id": "gras",
+      "nom": "Gras",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M7 4 H13 C15.2 4 16.5 5.3 16.5 7.5 C16.5 9.7 15.2 11 13 11 H7 Z\" /><path d=\"M7 11 H14 C16.2 11 17.5 12.5 17.5 15 C17.5 17.5 16.2 19 14 19 H7 Z\" />"
+    },
     {
       "id": "horloge",
       "nom": "Horloge (intégration continue)",
       "viewBox": "0 0 24 24",
       "corps": "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M12 6.67 V12 L15.33 14\" />"
     },
+    {
+      "id": "image",
+      "nom": "Image",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M3.5 5 H20.5 V19 H3.5 Z\" /><path d=\"M3.5 16 L9 10.5 L13.5 15 L16 12.5 L20.5 17\" /><path d=\"M15 8.5 H15.01\" />"
+    },
     {
       "id": "imprimante",
       "nom": "Imprimante",
@@ -236,12 +260,30 @@
       "viewBox": "0 0 24 24",
       "corps": "<circle cx=\"12\" cy=\"12\" r=\"8.67\" /><path d=\"M12 11.33 V16\" /><rect x=\"11.2\" y=\"7.2\" width=\"1.6\" height=\"1.6\" fill=\"currentColor\" stroke=\"none\" />"
     },
+    {
+      "id": "italique",
+      "nom": "Italique",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M10 5 H18\" /><path d=\"M6 19 H14\" /><path d=\"M14.5 5 L9.5 19\" />"
+    },
+    {
+      "id": "lecture",
+      "nom": "Lecture",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M8 5 L19 12 L8 19 Z\" fill=\"currentColor\" stroke=\"none\" />"
+    },
     {
       "id": "lien-externe",
       "nom": "Lien externe",
       "viewBox": "0 0 24 24",
       "corps": "<path d=\"M10.67 4 H4 V20 H20 V13.33\" /><path d=\"M14.67 4 H20 V9.33\" /><path d=\"M20 4 L12 12\" />"
     },
+    {
+      "id": "liste-a-puces",
+      "nom": "Liste à puces",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M9 6.5 H20\" /><path d=\"M9 12 H20\" /><path d=\"M9 17.5 H20\" /><path d=\"M4 5.5 H6 V7.5 H4 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M4 11 H6 V13 H4 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M4 16.5 H6 V18.5 H4 Z\" fill=\"currentColor\" stroke=\"none\" />"
+    },
     {
       "id": "livre-ouvert",
       "nom": "Livre ouvert (formation)",
@@ -260,12 +302,36 @@
       "viewBox": "0 0 24 24",
       "corps": "<path d=\"M4 12 H20\" />"
     },
+    {
+      "id": "muet",
+      "nom": "Muet",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z\" /><path d=\"M16 10 L21 14\" /><path d=\"M21 10 L16 14\" />"
+    },
     {
       "id": "oeil",
       "nom": "Œil (afficher)",
       "viewBox": "0 0 24 24",
       "corps": "<path d=\"M2 12 C5.33 6.67 8.67 4.67 12 4.67 C15.33 4.67 18.67 6.67 22 12 C18.67 17.33 15.33 19.33 12 19.33 C8.67 19.33 5.33 17.33 2 12 Z\" /><circle cx=\"12\" cy=\"12\" r=\"2.67\" />"
     },
+    {
+      "id": "oeil-barre",
+      "nom": "Œil barré",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M3 12 C5.5 7.5 8.6 5.5 12 5.5 C15.4 5.5 18.5 7.5 21 12 C18.5 16.5 15.4 18.5 12 18.5 C8.6 18.5 5.5 16.5 3 12 Z\" /><path d=\"M9.5 12 A2.5 2.5 0 0 1 14.5 12 A2.5 2.5 0 0 1 9.5 12 Z\" /><path d=\"M4 20 L20 4\" />"
+    },
+    {
+      "id": "pause",
+      "nom": "Pause",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M9 5 H11 V19 H9 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M13 5 H15 V19 H13 Z\" fill=\"currentColor\" stroke=\"none\" />"
+    },
+    {
+      "id": "plein-ecran",
+      "nom": "Plein écran",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M4 9 V4 H9\" /><path d=\"M20 9 V4 H15\" /><path d=\"M4 15 V20 H9\" /><path d=\"M20 15 V20 H15\" />"
+    },
     {
       "id": "plus",
       "nom": "Plus",
@@ -290,12 +356,30 @@
       "viewBox": "0 0 24 24",
       "corps": "<circle cx=\"12\" cy=\"12\" r=\"2.93\" /><path d=\"M12 2 V4.67 M12 19.33 V22 M2 12 H4.67 M19.33 12 H22 M4.8 4.8 L6.67 6.67 M17.33 17.33 L19.2 19.2 M19.2 4.8 L17.33 6.67 M6.67 17.33 L4.8 19.2\" />"
     },
+    {
+      "id": "rembobiner",
+      "nom": "Rembobiner",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M11 6 L4 12 L11 18 Z\" fill=\"currentColor\" stroke=\"none\" /><path d=\"M20 6 L13 12 L20 18 Z\" fill=\"currentColor\" stroke=\"none\" />"
+    },
     {
       "id": "reseau",
       "nom": "Réseau (entrée / globe)",
       "viewBox": "0 0 24 24",
       "corps": "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M4 12 H20\" /><path d=\"M12 4 C14.67 8 14.67 16 12 20\" /><path d=\"M12 4 C9.33 8 9.33 16 12 20\" />"
     },
+    {
+      "id": "signet",
+      "nom": "Signet",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M6 4 H18 V20 L12 15.5 L6 20 Z\" />"
+    },
+    {
+      "id": "son",
+      "nom": "Son",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z\" /><path d=\"M16 9 C17.5 10.2 17.5 13.8 16 15\" /><path d=\"M18.8 6.6 C21.4 9 21.4 15 18.8 17.4\" />"
+    },
     {
       "id": "taches",
       "nom": "Tâches (liste à cocher)",
@@ -331,6 +415,12 @@
       "nom": "Utilisateur",
       "viewBox": "0 0 24 24",
       "corps": "<circle cx=\"12\" cy=\"8\" r=\"3.33\" /><path d=\"M5.33 20 C5.33 15.33 8.33 13.33 12 13.33 C15.67 13.33 18.67 15.33 18.67 20\" />"
+    },
+    {
+      "id": "video",
+      "nom": "Vidéo",
+      "viewBox": "0 0 24 24",
+      "corps": "<path d=\"M3.5 6 H15 V18 H3.5 Z\" /><path d=\"M15 10 L20.5 7 V17 L15 14 Z\" />"
     }
   ]
 }

package/icons/sprite.svg

@@ -5,6 +5,7 @@
   <symbol id="zv-app-couches" viewBox="0 0 24 24"><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" /></symbol>
   <symbol id="zv-archiver" viewBox="0 0 24 24"><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" /></symbol>
   <symbol id="zv-attention" viewBox="0 0 24 24"><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" /></symbol>
+  <symbol id="zv-avancer" viewBox="0 0 24 24"><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" /></symbol>
   <symbol id="zv-balance" viewBox="0 0 24 24"><path d="M12 3.33 V20.67" /><path d="M8.67 20.67 H15.33" /><path d="M5.33 6 H18.67" /><path d="M6.67 6 L3.33 13.33" /><path d="M6.67 6 L10 13.33" /><path d="M3.33 13.33 A3.33 3.33 0 0 0 10 13.33" /><path d="M17.33 6 L14 13.33" /><path d="M17.33 6 L20.67 13.33" /><path d="M14 13.33 A3.33 3.33 0 0 0 20.67 13.33" /></symbol>
   <symbol id="zv-base-de-donnees" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7.33" ry="2.67" /><path d="M4.67 6 V12 C4.67 13.47 7.87 14.67 12 14.67 C16.13 14.67 19.33 13.47 19.33 12 V6" /><path d="M4.67 12 V18 C4.67 19.47 7.87 20.67 12 20.67 C16.13 20.67 19.33 19.47 19.33 18 V12" /></symbol>
   <symbol id="zv-bouclier-verifie" viewBox="0 0 24 24"><path d="M12 2.67 L20 6 V12 C20 16.67 16.67 19.73 12 21.33 C7.33 19.73 4 16.67 4 12 V6 Z" /><path d="M8.67 12 L11.07 14.4 L15.33 10" /></symbol>
@@ -15,6 +16,7 @@
   <symbol id="zv-chevron-droit" viewBox="0 0 24 24"><path d="M9.33 4 L17.33 12 L9.33 20" /></symbol>
   <symbol id="zv-chevron-gauche" viewBox="0 0 24 24"><path d="M14.67 4 L6.67 12 L14.67 20" /></symbol>
   <symbol id="zv-chevron-haut" viewBox="0 0 24 24"><path d="M6.67 14.67 L12 9.33 L17.33 14.67" /></symbol>
+  <symbol id="zv-citation" viewBox="0 0 24 24"><path d="M4 14 V10 C4 7.8 5.8 6 8 6 V9 C6.9 9 6 9.9 6 11 H9 V14 Z" /><path d="M14 14 V10 C14 7.8 15.8 6 18 6 V9 C16.9 9 16 9.9 16 11 H19 V14 Z" /></symbol>
   <symbol id="zv-coche" viewBox="0 0 24 24"><path d="M5 12.4 L9.4 16.8 L19 6.8" /></symbol>
   <symbol id="zv-copier" viewBox="0 0 24 24"><rect x="4" y="4" width="12" height="12" /><path d="M8 16 V18.93 A1.07 1.07 0 0 0 9.07 20 H18.93 A1.07 1.07 0 0 0 20 18.93 V9.07 A1.07 1.07 0 0 0 18.93 8 H16" /></symbol>
   <symbol id="zv-corbeille" viewBox="0 0 24 24"><path d="M4 6.67 H20" /><path d="M9.33 6.67 V4.67 A1.33 1.33 0 0 1 10.67 3.33 H13.33 A1.33 1.33 0 0 1 14.67 4.67 V6.67" /><path d="M6 6.67 L6.93 18.93 A1.33 1.33 0 0 0 8.27 20 H15.73 A1.33 1.33 0 0 0 17.07 18.93 L18 6.67" /><path d="M10 10.67 V16.67" /><path d="M14 10.67 V16.67" /></symbol>
@@ -35,23 +37,36 @@
   <symbol id="zv-filtre" viewBox="0 0 24 24"><path d="M2.67 4 H21.33 L14.67 12.27 V18.67 L9.33 21.33 V12.27 Z" /></symbol>
   <symbol id="zv-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.67" /><path d="M3.33 12 H20.67" /><path d="M12 3.33 C14.22 5.64 15.47 8.71 15.47 12 C15.47 15.29 14.22 18.36 12 20.67 C9.78 18.36 8.53 15.29 8.53 12 C8.53 8.71 9.78 5.64 12 3.33 Z" /></symbol>
   <symbol id="zv-graphique" viewBox="0 0 24 24"><path d="M4 4 V20 H20" /><path d="M8.67 20 V12.67" /><path d="M12.67 20 V8" /><path d="M16.67 20 V15.33" /></symbol>
+  <symbol id="zv-gras" viewBox="0 0 24 24"><path d="M7 4 H13 C15.2 4 16.5 5.3 16.5 7.5 C16.5 9.7 15.2 11 13 11 H7 Z" /><path d="M7 11 H14 C16.2 11 17.5 12.5 17.5 15 C17.5 17.5 16.2 19 14 19 H7 Z" /></symbol>
   <symbol id="zv-horloge" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M12 6.67 V12 L15.33 14" /></symbol>
+  <symbol id="zv-image" viewBox="0 0 24 24"><path d="M3.5 5 H20.5 V19 H3.5 Z" /><path d="M3.5 16 L9 10.5 L13.5 15 L16 12.5 L20.5 17" /><path d="M15 8.5 H15.01" /></symbol>
   <symbol id="zv-imprimante" viewBox="0 0 24 24"><path d="M6.67 8 V3.33 H17.33 V8" /><path d="M6.67 17.33 H4.67 A1.33 1.33 0 0 1 3.33 16 V10.67 A1.33 1.33 0 0 1 4.67 9.33 H19.33 A1.33 1.33 0 0 1 20.67 10.67 V16 A1.33 1.33 0 0 1 19.33 17.33 H17.33" /><rect x="6.67" y="13.33" width="10.67" height="7.33" /></symbol>
   <symbol id="zv-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.67" /><path d="M12 11.33 V16" /><rect x="11.2" y="7.2" width="1.6" height="1.6" fill="currentColor" stroke="none" /></symbol>
+  <symbol id="zv-italique" viewBox="0 0 24 24"><path d="M10 5 H18" /><path d="M6 19 H14" /><path d="M14.5 5 L9.5 19" /></symbol>
+  <symbol id="zv-lecture" viewBox="0 0 24 24"><path d="M8 5 L19 12 L8 19 Z" fill="currentColor" stroke="none" /></symbol>
   <symbol id="zv-lien-externe" viewBox="0 0 24 24"><path d="M10.67 4 H4 V20 H20 V13.33" /><path d="M14.67 4 H20 V9.33" /><path d="M20 4 L12 12" /></symbol>
+  <symbol id="zv-liste-a-puces" viewBox="0 0 24 24"><path d="M9 6.5 H20" /><path d="M9 12 H20" /><path d="M9 17.5 H20" /><path d="M4 5.5 H6 V7.5 H4 Z" fill="currentColor" stroke="none" /><path d="M4 11 H6 V13 H4 Z" fill="currentColor" stroke="none" /><path d="M4 16.5 H6 V18.5 H4 Z" fill="currentColor" stroke="none" /></symbol>
   <symbol id="zv-livre-ouvert" viewBox="0 0 24 24"><path d="M2.67 5.33 C5.33 4.67 7.78 4.89 12 6.67 C16.22 4.89 18.67 4.67 21.33 5.33 V18 C18.67 17.33 16.22 17.56 12 19.33 C7.78 17.56 5.33 17.33 2.67 18 Z" /><path d="M12 6.67 V19.33" /></symbol>
   <symbol id="zv-menu" viewBox="0 0 24 24"><path d="M0 5.33 H24" /><path d="M0 12 H24" /><path d="M0 18.67 H24" /></symbol>
   <symbol id="zv-moins" viewBox="0 0 24 24"><path d="M4 12 H20" /></symbol>
+  <symbol id="zv-muet" viewBox="0 0 24 24"><path d="M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z" /><path d="M16 10 L21 14" /><path d="M21 10 L16 14" /></symbol>
   <symbol id="zv-oeil" viewBox="0 0 24 24"><path d="M2 12 C5.33 6.67 8.67 4.67 12 4.67 C15.33 4.67 18.67 6.67 22 12 C18.67 17.33 15.33 19.33 12 19.33 C8.67 19.33 5.33 17.33 2 12 Z" /><circle cx="12" cy="12" r="2.67" /></symbol>
+  <symbol id="zv-oeil-barre" viewBox="0 0 24 24"><path d="M3 12 C5.5 7.5 8.6 5.5 12 5.5 C15.4 5.5 18.5 7.5 21 12 C18.5 16.5 15.4 18.5 12 18.5 C8.6 18.5 5.5 16.5 3 12 Z" /><path d="M9.5 12 A2.5 2.5 0 0 1 14.5 12 A2.5 2.5 0 0 1 9.5 12 Z" /><path d="M4 20 L20 4" /></symbol>
+  <symbol id="zv-pause" viewBox="0 0 24 24"><path d="M9 5 H11 V19 H9 Z" fill="currentColor" stroke="none" /><path d="M13 5 H15 V19 H13 Z" fill="currentColor" stroke="none" /></symbol>
+  <symbol id="zv-plein-ecran" viewBox="0 0 24 24"><path d="M4 9 V4 H9" /><path d="M20 9 V4 H15" /><path d="M4 15 V20 H9" /><path d="M20 15 V20 H15" /></symbol>
   <symbol id="zv-plus" viewBox="0 0 24 24"><path d="M12 4 V20" /><path d="M4 12 H20" /></symbol>
   <symbol id="zv-recherche" viewBox="0 0 24 24"><circle cx="10.67" cy="10.67" r="6" /><path d="M15.33 15.33 L20 20" /></symbol>
   <symbol id="zv-registre" viewBox="0 0 24 24"><rect x="3.33" y="5.33" width="17.33" height="5.33" /><rect x="3.33" y="13.33" width="17.33" height="5.33" /><rect x="5.87" y="7.2" width="1.6" height="1.6" fill="currentColor" stroke="none" /><rect x="5.87" y="15.2" width="1.6" height="1.6" fill="currentColor" stroke="none" /></symbol>
   <symbol id="zv-reglages" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.93" /><path d="M12 2 V4.67 M12 19.33 V22 M2 12 H4.67 M19.33 12 H22 M4.8 4.8 L6.67 6.67 M17.33 17.33 L19.2 19.2 M19.2 4.8 L17.33 6.67 M6.67 17.33 L4.8 19.2" /></symbol>
+  <symbol id="zv-rembobiner" viewBox="0 0 24 24"><path d="M11 6 L4 12 L11 18 Z" fill="currentColor" stroke="none" /><path d="M20 6 L13 12 L20 18 Z" fill="currentColor" stroke="none" /></symbol>
   <symbol id="zv-reseau" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M4 12 H20" /><path d="M12 4 C14.67 8 14.67 16 12 20" /><path d="M12 4 C9.33 8 9.33 16 12 20" /></symbol>
+  <symbol id="zv-signet" viewBox="0 0 24 24"><path d="M6 4 H18 V20 L12 15.5 L6 20 Z" /></symbol>
+  <symbol id="zv-son" viewBox="0 0 24 24"><path d="M4 9.5 H7.5 L12 5.5 V18.5 L7.5 14.5 H4 Z" /><path d="M16 9 C17.5 10.2 17.5 13.8 16 15" /><path d="M18.8 6.6 C21.4 9 21.4 15 18.8 17.4" /></symbol>
   <symbol id="zv-taches" viewBox="0 0 24 24"><path d="M4.67 6.67 L6.67 8.67 L10 5.33" /><path d="M4.67 16 L6.67 18 L10 14.67" /><path d="M13.33 7.33 H20" /><path d="M13.33 16.67 H20" /></symbol>
   <symbol id="zv-telecharger" viewBox="0 0 24 24"><path d="M12 3.33 V15.33" /><polyline points="6.67,10 12,15.33 17.33,10" /><path d="M4.67 20.67 H19.33" /></symbol>
   <symbol id="zv-telephone" viewBox="0 0 24 24"><path d="M20.67 16.93 V19.33 A1.6 1.6 0 0 1 18.93 20.93 C16.13 20.67 13.47 19.67 11.2 18.13 C9.09 16.71 7.29 14.91 5.87 12.8 C4.33 10.52 3.33 7.85 3.07 5.05 A1.6 1.6 0 0 1 4.67 3.33 H7.07 A1.6 1.6 0 0 1 8.67 4.71 C8.79 5.83 9.04 6.93 9.4 7.97 A1.6 1.6 0 0 1 9.04 9.65 L8 10.69 C9.32 13.01 11.03 14.71 13.33 16 L14.37 14.96 A1.6 1.6 0 0 1 16.05 14.6 C17.09 14.96 18.19 15.21 19.31 15.33 A1.6 1.6 0 0 1 20.67 16.93 Z" /></symbol>
   <symbol id="zv-tri" viewBox="0 0 24 24"><path d="M8 4 V20" /><path d="M4.67 7.33 L8 4 L11.33 7.33" /><path d="M16 20 V4" /><path d="M12.67 16.67 L16 20 L19.33 16.67" /></symbol>
   <symbol id="zv-trois-points" viewBox="0 0 24 24"><rect x="4" y="10.67" width="2.66" height="2.66" fill="currentColor" stroke="none" /><rect x="10.67" y="10.67" width="2.66" height="2.66" fill="currentColor" stroke="none" /><rect x="17.34" y="10.67" width="2.66" height="2.66" fill="currentColor" stroke="none" /></symbol>
   <symbol id="zv-utilisateur" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.33" /><path d="M5.33 20 C5.33 15.33 8.33 13.33 12 13.33 C15.67 13.33 18.67 15.33 18.67 20" /></symbol>
+  <symbol id="zv-video" viewBox="0 0 24 24"><path d="M3.5 6 H15 V18 H3.5 Z" /><path d="M15 10 L20.5 7 V17 L15 14 Z" /></symbol>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.16.0",
+  "version": "0.20.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/react/catalogue.tsx

@@ -14,11 +14,13 @@
 // Ce module n'est jamais importé par le barrel : une app qui ne l'importe pas
 // ne l'embarque pas.
 
-import { useState, type ReactNode } from 'react'
+import { useState, type ChangeEvent, type ReactNode } from 'react'
 import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js'
 import {
   Callout, Card, Check, Divider, Ent, EntText, Faq, FaqItem, Flow, FlowStep,
-  Glass, IndexItem, IndexList, Inset, MiniStat, MiniStatItem, Pill, Price,
+  LegalPage,
+  Glass, IndexItem, IndexList, Inset, Media, MediaCoin, MediaVoile, MiniStat,
+  MiniStatItem, Pill, Price,
   Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview,
 } from './content.js'
 import {
@@ -31,7 +33,7 @@ import {
   Status, Tooltip,
 } from './feedback.js'
 import {
-  Checkbox, Drop, Field, Input, InputAffix, Radio, Range, Search, Seg,
+  Checkbox, Drop, Field, Input, InputAffix, InputPassword, Radio, Range, Search, Seg,
   SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea,
 } from './forms.js'
 import { ICONES, Icon, IconButton, IconTile, NOMS_ICONES } from './icon.js'
@@ -232,6 +234,25 @@ function DemoModal() {
   )
 }
 
+function DemoMotDePasse() {
+  const [visible, setVisible] = useState(false)
+  const [valeur, setValeur] = useState('cabinet-2026')
+  return (
+    <div style={{ maxWidth: 280 }}>
+      <Field label="MOT DE PASSE" htmlFor="ex-mdp">
+        <InputPassword
+          id="ex-mdp"
+          value={valeur}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setValeur(e.target.value)}
+          visible={visible}
+          onBascule={() => setVisible((v) => !v)}
+          autoComplete="current-password"
+        />
+      </Field>
+    </div>
+  )
+}
+
 function DemoDrop() {
   const [survol, setSurvol] = useState(false)
   return (
@@ -729,6 +750,20 @@ export const CATALOGUE: GroupeCatalogue[] = [
       parcourir="Parcourir les fichiers" survol={survol} … />`,
         rendu: <DemoDrop />,
       },
+      {
+        id: 'mot-de-passe',
+        nom: 'Mot de passe',
+        resume:
+          'Le seul champ où l’on tape sans voir ce qu’on écrit : sur un mot de passe long saisi au clavier d’un téléphone, la bascule évite l’échec silencieux. L’état est tenu par l’appelant, et le libellé du bouton change — une icône seule ne dit pas ce qui va se passer.',
+        code: `const [visible, setVisible] = useState(false)
+
+<Field label="MOT DE PASSE" htmlFor="mdp">
+  <InputPassword id="mdp" value={valeur} onChange={…}
+                 visible={visible} onBascule={() => setVisible((v) => !v)}
+                 autoComplete="current-password" />
+</Field>`,
+        rendu: <DemoMotDePasse />,
+      },
     ],
   },
 
@@ -1079,6 +1114,52 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'page-legale',
+        nom: 'Page légale',
+        resume:
+          'La FORME d’un document contractuel ; le TEXTE vit dans @zevra/legal, versionné et archivé — le design system ne dépend pas du contenu, sinon corriger une clause deviendrait une livraison de charte. La version est AFFICHÉE : c’est ce que l’utilisateur cite quand il conteste. ⚠️ Jamais de « voir plus » sur un contrat : ce qu’on accepte se lit en entier là où on l’accepte. Le sommaire se pose à côté, avec « Rail ».',
+        code: `import { enVigueur } from '@zevra/legal'
+
+<LegalPage document={enVigueur('mentions-legales')} />`,
+        rendu: (
+          <LegalPage
+            document={{
+              titre: 'Mentions legales',
+              version: 'mentions-legales-2026-02-22',
+              applicableAu: '2026-02-22',
+              sections: [
+                {
+                  id: 'hebergeur',
+                  titre: 'Hebergeur',
+                  blocs: [
+                    {
+                      type: 'definitions',
+                      entrees: [
+                        { cle: 'Societe', valeur: 'Vercel Inc.' },
+                        { cle: 'Adresse', valeur: '340 S Lemon Ave #4133, Walnut, CA 91789, Etats-Unis' },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  id: 'propriete-intellectuelle',
+                  titre: 'Propriete intellectuelle',
+                  blocs: [
+                    {
+                      type: 'encart',
+                      ton: 'clair',
+                      label: 'En clair',
+                      texte:
+                        'Vous ne pouvez pas copier, modifier ou reutiliser le contenu de ce site sans nous avoir demande la permission par ecrit.',
+                    },
+                  ],
+                },
+              ],
+            }}
+          />
+        ),
+      },
       {
         id: 'citation',
         nom: 'Citation client',
@@ -2143,6 +2224,31 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'media',
+        nom: 'Cadre média',
+        resume:
+          'Le rapport vit sur le CADRE, jamais sur l’image : posé sur un enfant de grille aligné au centre, il ne se résout pas et la colonne s’effondre à zéro. Le cadre ne charge ni ne décode rien — pour masquer le temps de décodage, composer Spinner par-dessus.',
+        code: `<Media ratio="16-9">
+  <MediaImg src={couverture} alt="" />
+  <MediaVoile />
+  <MediaCoin>12:04</MediaCoin>
+</Media>
+
+{/* Un logo ne se rogne pas : il se contient, et le papier passe derrière. */}
+<Media ratio="1-1" contient>
+  <MediaImg src={logo} alt="Zevra" />
+</Media>`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 12, gridTemplateColumns: '2fr 1fr', maxWidth: 460 }}>
+            <Media ratio="16-9">
+              <MediaVoile />
+              <MediaCoin>12:04</MediaCoin>
+            </Media>
+            <Media ratio="1-1" contient />
+          </div>
+        ),
+      },
     ],
   },