@lab-anssi/ui-kit 1.61.3 → 1.62.1

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

@@ -0,0 +1,36 @@
+import type { Size } from "../types";
+type AlertSize = Extract<Size, "sm" | "md">;
+interface Props {
+    buttonCloseLabel?: string;
+    hasTitle?: boolean | string;
+    title?: string;
+    hasDescription?: boolean | string;
+    text?: string;
+    type?: "default" | "success" | "error" | "info" | "warning";
+    size?: AlertSize;
+    id?: string;
+    dismissible?: boolean;
+    icon?: string;
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DsfrAlert: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    description: {};
+}, {}, "">;
+type DsfrAlert = InstanceType<typeof DsfrAlert>;
+export default DsfrAlert;

package/dist/dsfr/DsfrBadge.svelte

@@ -0,0 +1,532 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-badge",
+    props: {
+      label: { attribute: "label", type: "String" },
+      accent: { attribute: "accent", type: "String" },
+      ellipsis: { attribute: "ellipsis", type: "Boolean" },
+      hasIcon: { attribute: "has-icon", type: "Boolean" },
+      hasNoIcon: { attribute: "has-no-icon", type: "Boolean" },
+      icon: { attribute: "icon", type: "String" },
+      size: { attribute: "size", type: "String" },
+      status: { attribute: "status", type: "String" },
+      type: { attribute: "type", type: "String" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet, setIconClass } from "../utilitaires";
+let { accent, ellipsis = false, hasIcon = false, hasNoIcon = false, icon, label, size = "md", status, type } = $props();
+let accentClass = $derived.by(() => {
+	return type === "accent" && accent && `fr-badge--${accent}`;
+});
+let iconClass = $derived.by(() => {
+	if (type === "status" && hasNoIcon) return "fr-badge--no-icon";
+	return type !== "status" && hasIcon && icon && `fr-badge--icon-left ${setIconClass(icon)}`;
+});
+let statusClass = $derived.by(() => {
+	return type === "status" && status && `fr-badge--${status}`;
+});
+</script>
+
+{#snippet labelBadge()}
+  <slot>
+    {label}
+  </slot>
+{/snippet}
+
+<p class={["fr-badge", `fr-badge--${size}`, accentClass, iconClass, statusClass]}>
+  {#if ellipsis}
+    <span class="fr-ellipsis">
+      {@render labelBadge()}
+    </span>
+  {:else}
+    {@render labelBadge()}
+  {/if}
+</p>
+
+<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);
+}
+
+.fr-ellipsis {
+  display: inline !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+:host {
+  display: inline-flex;
+  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-badge {
+  box-sizing: border-box;
+}</style>

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

@@ -0,0 +1,41 @@
+import type { Accent, Size, Status } from "../types";
+type BadgeSize = Extract<Size, "sm" | "md">;
+type BadgeType = "default" | "accent" | "status";
+interface Props {
+    label?: string;
+    accent?: Accent;
+    ellipsis?: boolean;
+    hasIcon?: boolean;
+    hasNoIcon?: boolean;
+    icon?: string;
+    size?: BadgeSize;
+    status?: Status;
+    type?: BadgeType;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DsfrBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type DsfrBadge = InstanceType<typeof DsfrBadge>;
+export default DsfrBadge;