@lab-anssi/ui-kit 1.21.3 → 1.23.0

package/dist/lab/Bouton.svelte

@@ -7,6 +7,7 @@
       taille: { reflect: false, type: "String", attribute: "taille" },
       icone: { reflect: false, type: "String", attribute: "icone" },
       positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
+      actif: { reflect: false, type: "Boolean", attribute: "actif" },
     },
   }}
 />
@@ -17,12 +18,13 @@ export let variante;
 export let taille;
 export let icone = void 0;
 export let positionIcone = "sans";
+export let actif = true;
 </script>
 
 <button
   class={`bouton ${variante} ${taille} icone-${positionIcone}`}
-  on:click
   title={positionIcone === "seule" ? titre : ""}
+  disabled={!actif}
 >
   {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
     <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
@@ -91,6 +93,9 @@ export let positionIcone = "sans";
 .bouton.lg.icone-seule {
   padding: 12px;
 }
+.bouton:disabled, .bouton[aria-disabled] {
+  cursor: not-allowed;
+}
 .bouton.primaire {
   background: var(--bouton-primaire-couleur-fond);
   color: var(--bouton-primaire-couleur-texte);
@@ -103,6 +108,10 @@ export let positionIcone = "sans";
 .bouton.primaire:active {
   background: var(--bouton-primaire-couleur-fond-clique);
 }
+.bouton.primaire:disabled, .bouton.primaire[aria-disabled] {
+  background: #e5e5e5;
+  color: #929292;
+}
 .bouton.tertiaire, .bouton.tertiaire-sans-bordure {
   color: var(--bouton-secondaire-tertiaire-couleur-texte);
   text-align: center;
@@ -115,6 +124,10 @@ export let positionIcone = "sans";
 .bouton.tertiaire:active, .bouton.tertiaire-sans-bordure:active {
   background: rgba(0, 0, 0, 0.08);
 }
+.bouton.tertiaire:disabled, .bouton.tertiaire[aria-disabled], .bouton.tertiaire-sans-bordure:disabled, .bouton.tertiaire-sans-bordure[aria-disabled] {
+  background: transparent;
+  color: #929292;
+}
 .bouton.tertiaire {
   border: 1px solid #ddd;
 }

package/dist/lab/Bouton.svelte.d.ts

@@ -6,10 +6,9 @@ declare const __propDef: {
         taille: "sm" | "md" | "lg";
         icone?: string | undefined;
         positionIcone?: "sans" | "seule" | "droite" | "gauche";
+        actif?: boolean;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/lab/Lien.svelte

@@ -10,6 +10,7 @@
       apparence: { reflect: false, type: "String", attribute: "apparence" },
       cible: { reflect: false, type: "String", attribute: "cible" },
       positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
+      actif: { reflect: false, type: "Boolean", attribute: "actif" },
     },
   }}
 />
@@ -23,6 +24,7 @@ export let icone = void 0;
 export let apparence = "lien";
 export let cible = void 0;
 export let positionIcone = "sans";
+export let actif = true;
 </script>
 
 <a
@@ -30,6 +32,7 @@ export let positionIcone = "sans";
   {href}
   target={cible}
   title={positionIcone === "seule" ? titre : ""}
+  aria-disabled={!actif}
 >
   {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
     <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
@@ -195,6 +198,10 @@ export let positionIcone = "sans";
   padding: 12px;
 }
 
+.bouton:disabled, .bouton[aria-disabled] {
+  cursor: not-allowed;
+}
+
 .bouton.primaire {
   background: var(--bouton-primaire-couleur-fond);
   color: var(--bouton-primaire-couleur-texte);
@@ -210,6 +217,11 @@ export let positionIcone = "sans";
   background: var(--bouton-primaire-couleur-fond-clique);
 }
 
+.bouton.primaire:disabled, .bouton.primaire[aria-disabled] {
+  background: #e5e5e5;
+  color: #929292;
+}
+
 .bouton.tertiaire, .bouton.tertiaire-sans-bordure {
   color: var(--bouton-secondaire-tertiaire-couleur-texte);
   text-align: center;
@@ -225,6 +237,11 @@ export let positionIcone = "sans";
   background: rgba(0, 0, 0, 0.08);
 }
 
+.bouton.tertiaire:disabled, .bouton.tertiaire[aria-disabled], .bouton.tertiaire-sans-bordure:disabled, .bouton.tertiaire-sans-bordure[aria-disabled] {
+  background: transparent;
+  color: #929292;
+}
+
 .bouton.tertiaire {
   border: 1px solid #ddd;
 }

package/dist/lab/Lien.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         apparence?: "lien" | "bouton" | "lien-texte";
         cible?: string | undefined;
         positionIcone?: "sans" | "seule" | "droite" | "gauche";
+        actif?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/Tag.svelte

@@ -7,6 +7,7 @@
       label: { reflect: false, type: "String", attribute: "label" },
       taille: { reflect: false, type: "String", attribute: "taille" },
       type: { reflect: false, type: "String", attribute: "type" },
+      presse: { reflect: false, type: "Boolean", attribute: "presse" },
     },
   }}
 />
@@ -16,7 +17,8 @@ export let couleurTexte;
 export let couleurFond;
 export let taille = "sm";
 export let type = "defaut";
-let selectionne = false;
+export let presse = false;
+$: selectionne = presse;
 const bascule = () => {
   selectionne = !selectionne;
 };

package/dist/lab/Tag.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         couleurFond: string | undefined;
         taille?: "sm" | "md";
         type?: "defaut" | "selectionnable";
+        presse?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/apparence-bouton.scss

@@ -68,6 +68,11 @@
     }
   }
 
+  &:disabled,
+  &[aria-disabled] {
+    cursor: not-allowed;
+  }
+
   &.primaire {
     background: $bouton-primaire-couleur-fond;
     color: $bouton-primaire-couleur-texte;
@@ -81,6 +86,12 @@
     &:active {
       background: $bouton-primaire-couleur-fond-clique;
     }
+
+    &:disabled,
+    &[aria-disabled] {
+      background: #e5e5e5;
+      color: #929292;
+    }
   }
 
   &.tertiaire,
@@ -97,6 +108,12 @@
     &:active {
       background: rgb(0, 0, 0, 8%);
     }
+
+    &:disabled,
+    &[aria-disabled] {
+      background: transparent;
+      color: #929292;
+    }
   }
 
   &.tertiaire {