@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrBadgesGroup.svelte

@@ -0,0 +1,610 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-badges-group",
+    props: {
+      badges: { attribute: "badges", type: "Array" },
+      size: { attribute: "size", type: "String" },
+      groupMarkup: { attribute: "group-markup", type: "String" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet, setIconClass } from "../utilitaires";
+let { badges, size = "md", groupMarkup = "ul" } = $props();
+let sizeClass = $derived(`fr-badges-group--${size}`);
+</script>
+
+{#snippet badgeItem(badge: Badge)}
+  {@const accentClass = badge.accent && `fr-badge--${badge.accent}`}
+  {@const iconClass =
+    badge.hasIcon && badge.icon && `fr-badge--icon-left ${setIconClass(badge.icon)}`}
+  {@const statusClass = badge.type === "status" && badge.status && `fr-badge--${badge.status}`}
+
+  <p class={["fr-badge", accentClass, iconClass, statusClass]}>
+    {#if badge.ellipsis}
+      <span class="fr-ellipsis">{badge.label}</span>
+    {:else}
+      {badge.label}
+    {/if}
+  </p>
+{/snippet}
+
+<svelte:element this={groupMarkup} class={["fr-badges-group", sizeClass]}>
+  {#each badges as badge, index (index)}
+    {#if groupMarkup === "ul"}
+      <li>
+        {@render badgeItem(badge)}
+      </li>
+    {:else}
+      {@render badgeItem(badge)}
+    {/if}
+  {/each}
+</svelte:element>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */
+/* ------------------------------------ *\
+  Badge
+\* ------------------------------------ */
+.fr-badge {
+  --text-spacing: 0;
+  --title-spacing: 0;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  --underline-img: none;
+  --hover-tint: var(--hover);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0 0.5rem;
+  overflow: initial;
+  max-height: none;
+  font-weight: 700;
+  max-width: 100%;
+  text-transform: uppercase;
+  border-radius: 0.25rem;
+  color: var(--text-default-grey);
+  background-color: var(--background-contrast-grey);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-grey-hover);
+  --active: var(--background-contrast-grey-active);
+}
+
+.fr-badge::before,
+.fr-badge::after {
+  display: block;
+}
+
+.fr-badge--icon-left[class^=fr-icon-],
+.fr-badge--icon-left[class*=" fr-icon-"],
+.fr-badge--icon-left[class^=fr-fi-],
+.fr-badge--icon-left[class*=" fr-fi-"] {
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-badge--icon-left[class^=fr-icon-]::before,
+.fr-badge--icon-left[class*=" fr-icon-"]::before,
+.fr-badge--icon-left[class^=fr-fi-]::before,
+.fr-badge--icon-left[class*=" fr-fi-"]::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.25rem;
+}
+
+.fr-badge[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
+.fr-badge[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
+.fr-badge[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
+.fr-badge[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
+  content: none;
+}
+
+.fr-badge--sm {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  min-height: 1.125rem;
+  padding: 0 0.375rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-],
+.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"],
+.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-],
+.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"] {
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-]::before,
+.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"]::before,
+.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-]::before,
+.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"]::before {
+  --icon-size: 0.75rem;
+  margin-left: -0.09375rem;
+  margin-right: 0.25rem;
+}
+
+.fr-badge--sm[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
+.fr-badge--sm[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
+.fr-badge--sm[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
+.fr-badge--sm[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
+  content: none;
+}
+
+.fr-badge::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.25rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.fr-badge[class^=fr-icon-]::before,
+.fr-badge[class*=" fr-icon-"]::before,
+.fr-badge[class^=fr-fi-]::before,
+.fr-badge[class*=" fr-fi-"]::before {
+  content: "";
+}
+
+.fr-badge--sm::before {
+  --icon-size: 0.75rem;
+  margin-left: -0.09375rem;
+  margin-right: 0.25rem;
+}
+
+.fr-badge.fr-badge--info::before,
+.fr-badge--sm.fr-badge--info::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+}
+
+.fr-badge.fr-badge--success::before,
+.fr-badge--sm.fr-badge--success::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+}
+
+.fr-badge.fr-badge--error::before,
+.fr-badge--sm.fr-badge--error::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+}
+
+.fr-badge.fr-badge--warning::before,
+.fr-badge--sm.fr-badge--warning::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--warning-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--warning-fill.svg");
+}
+
+.fr-badge.fr-badge--new::before,
+.fr-badge--sm.fr-badge--new::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/weather/flashlight-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/weather/flashlight-fill.svg");
+}
+
+.fr-badge--info::before,
+.fr-badge--success::before,
+.fr-badge--error::before,
+.fr-badge--warning::before,
+.fr-badge--new::before,
+.fr-badge--sm--info::before,
+.fr-badge--sm--success::before,
+.fr-badge--sm--error::before,
+.fr-badge--sm--warning::before,
+.fr-badge--sm--new::before {
+  content: "";
+}
+
+.fr-badge.fr-badge--no-icon::before,
+.fr-badge--sm.fr-badge--no-icon::before {
+  content: none;
+}
+
+.fr-badges-group {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  margin-bottom: 0;
+}
+
+.fr-badges-group > li {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.fr-badges-group .fr-badge {
+  margin: 0 0.25rem 0.5rem 0.25rem;
+}
+
+.fr-badges-group--sm .fr-badge {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  min-height: 1.125rem;
+  padding: 0 0.375rem;
+}
+
+.fr-badges-group--sm .fr-badge::before,
+.fr-badges-group--sm .fr-badge::after {
+  --icon-size: 0.75rem;
+}
+
+.fr-badge--info {
+  color: var(--text-default-info);
+  background-color: var(--background-contrast-info);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-info-hover);
+  --active: var(--background-contrast-info-active);
+}
+
+.fr-badge--error {
+  color: var(--text-default-error);
+  background-color: var(--background-contrast-error);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-error-hover);
+  --active: var(--background-contrast-error-active);
+}
+
+.fr-badge--success {
+  color: var(--text-default-success);
+  background-color: var(--background-contrast-success);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-success-hover);
+  --active: var(--background-contrast-success-active);
+}
+
+.fr-badge--warning {
+  color: var(--text-default-warning);
+  background-color: var(--background-contrast-warning);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-warning-hover);
+  --active: var(--background-contrast-warning-active);
+}
+
+.fr-badge--new {
+  color: var(--text-action-high-yellow-moutarde);
+  background-color: var(--background-contrast-yellow-moutarde);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-yellow-moutarde-hover);
+  --active: var(--background-contrast-yellow-moutarde-active);
+}
+
+.fr-badge--green-tilleul-verveine {
+  color: var(--text-label-green-tilleul-verveine);
+  background-color: var(--background-contrast-green-tilleul-verveine);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-green-tilleul-verveine-hover);
+  --active: var(--background-contrast-green-tilleul-verveine-active);
+}
+
+.fr-badge--green-bourgeon {
+  color: var(--text-label-green-bourgeon);
+  background-color: var(--background-contrast-green-bourgeon);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-green-bourgeon-hover);
+  --active: var(--background-contrast-green-bourgeon-active);
+}
+
+.fr-badge--green-emeraude {
+  color: var(--text-label-green-emeraude);
+  background-color: var(--background-contrast-green-emeraude);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-green-emeraude-hover);
+  --active: var(--background-contrast-green-emeraude-active);
+}
+
+.fr-badge--green-menthe {
+  color: var(--text-label-green-menthe);
+  background-color: var(--background-contrast-green-menthe);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-green-menthe-hover);
+  --active: var(--background-contrast-green-menthe-active);
+}
+
+.fr-badge--green-archipel {
+  color: var(--text-label-green-archipel);
+  background-color: var(--background-contrast-green-archipel);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-green-archipel-hover);
+  --active: var(--background-contrast-green-archipel-active);
+}
+
+.fr-badge--blue-ecume {
+  color: var(--text-label-blue-ecume);
+  background-color: var(--background-contrast-blue-ecume);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-blue-ecume-hover);
+  --active: var(--background-contrast-blue-ecume-active);
+}
+
+.fr-badge--blue-cumulus {
+  color: var(--text-label-blue-cumulus);
+  background-color: var(--background-contrast-blue-cumulus);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-blue-cumulus-hover);
+  --active: var(--background-contrast-blue-cumulus-active);
+}
+
+.fr-badge--purple-glycine {
+  color: var(--text-label-purple-glycine);
+  background-color: var(--background-contrast-purple-glycine);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-purple-glycine-hover);
+  --active: var(--background-contrast-purple-glycine-active);
+}
+
+.fr-badge--pink-macaron {
+  color: var(--text-label-pink-macaron);
+  background-color: var(--background-contrast-pink-macaron);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-pink-macaron-hover);
+  --active: var(--background-contrast-pink-macaron-active);
+}
+
+.fr-badge--pink-tuile {
+  color: var(--text-label-pink-tuile);
+  background-color: var(--background-contrast-pink-tuile);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-pink-tuile-hover);
+  --active: var(--background-contrast-pink-tuile-active);
+}
+
+.fr-badge--yellow-tournesol {
+  color: var(--text-label-yellow-tournesol);
+  background-color: var(--background-contrast-yellow-tournesol);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-yellow-tournesol-hover);
+  --active: var(--background-contrast-yellow-tournesol-active);
+}
+
+.fr-badge--yellow-moutarde {
+  color: var(--text-label-yellow-moutarde);
+  background-color: var(--background-contrast-yellow-moutarde);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-yellow-moutarde-hover);
+  --active: var(--background-contrast-yellow-moutarde-active);
+}
+
+.fr-badge--orange-terre-battue {
+  color: var(--text-label-orange-terre-battue);
+  background-color: var(--background-contrast-orange-terre-battue);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-orange-terre-battue-hover);
+  --active: var(--background-contrast-orange-terre-battue-active);
+}
+
+.fr-badge--brown-cafe-creme {
+  color: var(--text-label-brown-cafe-creme);
+  background-color: var(--background-contrast-brown-cafe-creme);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-brown-cafe-creme-hover);
+  --active: var(--background-contrast-brown-cafe-creme-active);
+}
+
+.fr-badge--brown-caramel {
+  color: var(--text-label-brown-caramel);
+  background-color: var(--background-contrast-brown-caramel);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-brown-caramel-hover);
+  --active: var(--background-contrast-brown-caramel-active);
+}
+
+.fr-badge--brown-opera {
+  color: var(--text-label-brown-opera);
+  background-color: var(--background-contrast-brown-opera);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-brown-opera-hover);
+  --active: var(--background-contrast-brown-opera-active);
+}
+
+.fr-badge--beige-gris-galet {
+  color: var(--text-label-beige-gris-galet);
+  background-color: var(--background-contrast-beige-gris-galet);
+
+  --idle: transparent;
+  --hover: var(--background-contrast-beige-gris-galet-hover);
+  --active: var(--background-contrast-beige-gris-galet-active);
+}
+
+.fr-badge-group {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+}
+
+.fr-badge-group > li {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.fr-badge-group .fr-badge {
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+}
+@media (min-width: 62em) {
+  /*! media lg */
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-badge::before,
+  .fr-badge::after {
+    background-color: canvastext;
+  }
+
+  .fr-badge {
+    outline: 1px solid;
+  }
+}
+p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--text-spacing);
+}
+
+:root {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+ul,
+ol,
+dl {
+  margin: 0;
+  padding: 0;
+  margin-block-start: var(--xl-block);
+  margin-block-end: var(--xl-block);
+  --xl-size: var(--xl-base);
+}
+
+ul {
+  list-style-type: var(--ul-type);
+  padding-inline-start: var(--ul-start);
+}
+ul > li::marker {
+  font-size: calc(var(--xl-size) * 0.9);
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  ul > li::marker {
+    color: graytext;
+  }
+}
+
+ol {
+  list-style-type: var(--ol-type);
+  padding-inline-start: var(--ol-start);
+  counter-reset: li-counter;
+}
+ol > li {
+  counter-increment: li-counter;
+}
+ol > li::marker {
+  content: var(--ol-content);
+  font-size: var(--xl-size);
+  font-weight: bold;
+}
+
+dl,
+dd {
+  margin: 0;
+  padding-inline-start: var(--ul-start);
+}
+
+li,
+dd,
+dt {
+  --xl-base: calc(var(--xl-size) * 0.9);
+  padding-bottom: var(--li-bottom);
+}
+
+.fr-raw-list {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+}
+
+.fr-list {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+.fr-ellipsis {
+  display: inline !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+:host {
+  display: block;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: var(--background-default-grey);
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  color: var(--text-default-grey);
+  background-color: transparent;
+}
+
+.fr-badges-group {
+  box-sizing: border-box;
+}</style>

package/dist/dsfr/DsfrBadgesGroup.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Accent, Size, Status } from "../types";
+type BadgesGroupSize = Extract<Size, "sm" | "md">;
+type BadgeType = "default" | "accent" | "status";
+type GroupMarkup = "div" | "ul";
+type Badge = {
+    label: string;
+    accent?: Accent;
+    hasIcon?: boolean;
+    hasNoIcon?: boolean;
+    ellipsis?: boolean;
+    icon?: string;
+    status?: Status;
+    type?: BadgeType;
+};
+interface Props {
+    /** Liste des badges à afficher dans le groupe */
+    badges: Badge[];
+    /** Taille du badge */
+    size?: BadgesGroupSize;
+    /** Type de balise HTML pour la liste du groupe de badges */
+    groupMarkup?: GroupMarkup;
+}
+declare const DsfrBadgesGroup: import("svelte").Component<Props, {}, "">;
+type DsfrBadgesGroup = ReturnType<typeof DsfrBadgesGroup>;
+export default DsfrBadgesGroup;