@sentropic/design-system-svelte 0.11.0 → 0.13.0

package/dist/Avatar.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" module>
+  export type AvatarSize = "sm" | "md" | "lg" | "xl";
+  export type AvatarShape = "circle" | "square";
+  export type AvatarTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { deriveInitials } from "./Header.svelte";
+
+  type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    /** Nom complet, utilisé pour dériver les initiales et l'étiquette a11y. */
+    name: string;
+    /** URL de la photo. Si absente, on rend un cercle d'initiales. */
+    src?: string;
+    /** Texte alternatif de l'image. Par défaut = `name`. */
+    alt?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    /** Catégorie de couleur pour le fond des initiales. */
+    tone?: AvatarTone;
+    class?: string;
+  };
+
+  let {
+    name,
+    src,
+    alt,
+    size = "md",
+    shape = "circle",
+    tone = "category1",
+    class: className,
+    ...rest
+  }: AvatarProps = $props();
+
+  const initials = $derived(deriveInitials(name));
+
+  const classes = $derived(
+    [
+      "st-avatar",
+      `st-avatar--${size}`,
+      `st-avatar--${shape}`,
+      src ? "st-avatar--image" : `st-avatar--${tone}`,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<span {...rest} class={classes} role="img" aria-label={alt ?? name}>
+  {#if src}
+    <img class="st-avatar__image" {src} alt={alt ?? name} />
+  {:else}
+    <span class="st-avatar__initials" aria-hidden="true">{initials}</span>
+  {/if}
+</span>
+
+<style>
+  .st-avatar {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    overflow: hidden;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .st-avatar--circle {
+    border-radius: 50%;
+  }
+
+  .st-avatar--square {
+    border-radius: var(--st-radius-sm, 0.375rem);
+  }
+
+  .st-avatar--sm {
+    font-size: 0.6875rem;
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  .st-avatar--md {
+    font-size: 0.8125rem;
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .st-avatar--lg {
+    font-size: 1rem;
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+
+  .st-avatar--xl {
+    font-size: 1.25rem;
+    height: 3.5rem;
+    width: 3.5rem;
+  }
+
+  .st-avatar__image {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+  }
+
+  .st-avatar__initials {
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    line-height: 1;
+  }
+
+  /* Tone = catégorie : fond teinté, texte coloré (sur le même hue). */
+  .st-avatar--category1 {
+    background: color-mix(in srgb, var(--st-semantic-data-category1) 16%, white);
+    color: var(--st-semantic-data-category1);
+  }
+  .st-avatar--category2 {
+    background: color-mix(in srgb, var(--st-semantic-data-category2) 16%, white);
+    color: var(--st-semantic-data-category2);
+  }
+  .st-avatar--category3 {
+    background: color-mix(in srgb, var(--st-semantic-data-category3) 16%, white);
+    color: var(--st-semantic-data-category3);
+  }
+  .st-avatar--category4 {
+    background: color-mix(in srgb, var(--st-semantic-data-category4) 16%, white);
+    color: var(--st-semantic-data-category4);
+  }
+  .st-avatar--category5 {
+    background: color-mix(in srgb, var(--st-semantic-data-category5) 16%, white);
+    color: var(--st-semantic-data-category5);
+  }
+  .st-avatar--category6 {
+    background: color-mix(in srgb, var(--st-semantic-data-category6) 16%, white);
+    color: var(--st-semantic-data-category6);
+  }
+  .st-avatar--category7 {
+    background: color-mix(in srgb, var(--st-semantic-data-category7) 16%, white);
+    color: var(--st-semantic-data-category7);
+  }
+  .st-avatar--category8 {
+    background: color-mix(in srgb, var(--st-semantic-data-category8) 16%, white);
+    color: var(--st-semantic-data-category8);
+  }
+
+  .st-avatar--image {
+    background: var(--st-semantic-surface-subtle, #eef2f7);
+  }
+</style>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,21 @@
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
+export type AvatarTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+import type { HTMLAttributes } from "svelte/elements";
+type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    /** Nom complet, utilisé pour dériver les initiales et l'étiquette a11y. */
+    name: string;
+    /** URL de la photo. Si absente, on rend un cercle d'initiales. */
+    src?: string;
+    /** Texte alternatif de l'image. Par défaut = `name`. */
+    alt?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    /** Catégorie de couleur pour le fond des initiales. */
+    tone?: AvatarTone;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map

package/dist/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Avatar.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAClB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAGlB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8CJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/AvatarGroup.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { AvatarSize } from "./Avatar.svelte";
+
+  type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    /** Nombre maximum d'avatars visibles. Au-delà, un jeton « +N » est affiché. */
+    max?: number;
+    /** Taille appliquée au jeton de débordement (doit refléter les Avatar). */
+    size?: AvatarSize;
+    /** Nombre total réel d'éléments (sert à calculer le « +N » si > max). */
+    total?: number;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    max,
+    size = "md",
+    total,
+    class: className,
+    children,
+    ...rest
+  }: AvatarGroupProps = $props();
+
+  const overflow = $derived(
+    max != null && total != null && total > max ? total - max : 0
+  );
+
+  const classes = $derived(
+    ["st-avatarGroup", `st-avatarGroup--${size}`, className].filter(Boolean).join(" ")
+  );
+</script>
+
+<div {...rest} class={classes} style:--st-avatar-group-max={max ?? ""}>
+  {@render children?.()}
+  {#if overflow > 0}
+    <span class="st-avatarGroup__overflow" aria-label={`+${overflow}`}>+{overflow}</span>
+  {/if}
+</div>
+
+<style>
+  /* Avatars empilés avec recouvrement ; un anneau de surface sépare chaque
+     vignette pour la lisibilité. Le recouvrement est porté par les marges
+     négatives sur les enfants directs. */
+  .st-avatarGroup {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row;
+  }
+
+  .st-avatarGroup > :global(*) {
+    box-shadow: 0 0 0 2px var(--st-semantic-surface-default, #ffffff);
+    position: relative;
+  }
+
+  .st-avatarGroup > :global(* + *) {
+    margin-inline-start: -0.5rem;
+  }
+
+  .st-avatarGroup--sm > :global(* + *) {
+    margin-inline-start: -0.375rem;
+  }
+
+  .st-avatarGroup--lg > :global(* + *) {
+    margin-inline-start: -0.625rem;
+  }
+
+  .st-avatarGroup--xl > :global(* + *) {
+    margin-inline-start: -0.875rem;
+  }
+
+  .st-avatarGroup__overflow {
+    align-items: center;
+    background: var(--st-semantic-surface-subtle, #eef2f7);
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--st-semantic-surface-default, #ffffff);
+    color: var(--st-semantic-text-secondary, #64748b);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-weight: 700;
+    justify-content: center;
+    margin-inline-start: -0.5rem;
+    position: relative;
+    user-select: none;
+  }
+
+  .st-avatarGroup--sm .st-avatarGroup__overflow {
+    font-size: 0.6875rem;
+    height: 1.5rem;
+    margin-inline-start: -0.375rem;
+    width: 1.5rem;
+  }
+
+  .st-avatarGroup--md .st-avatarGroup__overflow {
+    font-size: 0.75rem;
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .st-avatarGroup--lg .st-avatarGroup__overflow {
+    font-size: 0.875rem;
+    height: 2.5rem;
+    margin-inline-start: -0.625rem;
+    width: 2.5rem;
+  }
+
+  .st-avatarGroup--xl .st-avatarGroup__overflow {
+    font-size: 1.125rem;
+    height: 3.5rem;
+    margin-inline-start: -0.875rem;
+    width: 3.5rem;
+  }
+</style>

package/dist/AvatarGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { AvatarSize } from "./Avatar.svelte";
+type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    /** Nombre maximum d'avatars visibles. Au-delà, un jeton « +N » est affiché. */
+    max?: number;
+    /** Taille appliquée au jeton de débordement (doit refléter les Avatar). */
+    size?: AvatarSize;
+    /** Nombre total réel d'éléments (sert à calculer le « +N » si > max). */
+    total?: number;
+    class?: string;
+    children?: Snippet;
+};
+declare const AvatarGroup: import("svelte").Component<AvatarGroupProps, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.svelte.d.ts.map

package/dist/AvatarGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AvatarGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGhD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoCJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ButtonGroup.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" module>
+  export type ButtonGroupOrientation = "horizontal" | "vertical";
+  export type ButtonGroupSize = "sm" | "md" | "lg";
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ButtonGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    orientation?: ButtonGroupOrientation;
+    /** Look segmenté joint (boutons collés, coins arrondis seulement aux extrémités). */
+    attached?: boolean;
+    /** Espacement entre boutons (échelle spacing), ignoré quand `attached`. */
+    gap?: number;
+    /** Taille indicative (transmise via data-attr pour styliser les enfants si besoin). */
+    size?: ButtonGroupSize;
+    /** Étiquette a11y du groupe. */
+    label?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    orientation = "horizontal",
+    attached = false,
+    gap,
+    size = "md",
+    label,
+    class: className,
+    children,
+    ...rest
+  }: ButtonGroupProps = $props();
+
+  const classes = $derived(
+    [
+      "st-buttonGroup",
+      `st-buttonGroup--${orientation}`,
+      attached ? "st-buttonGroup--attached" : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const gapValue = $derived(
+    attached || gap == null ? null : `var(--st-spacing-${gap}, ${gap * 0.25}rem)`
+  );
+</script>
+
+<div
+  {...rest}
+  class={classes}
+  role="group"
+  aria-label={label}
+  data-size={size}
+  style:gap={gapValue}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .st-buttonGroup {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .st-buttonGroup--horizontal {
+    flex-direction: row;
+  }
+
+  .st-buttonGroup--vertical {
+    flex-direction: column;
+  }
+
+  /* Default gap when no explicit gap prop and not attached. The inline style
+     overrides this when a gap prop is provided. */
+  .st-buttonGroup:not(.st-buttonGroup--attached) {
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  /* Attached / segmented look: buttons share edges, only the outer corners
+     remain rounded. Inner borders are collapsed to a single hairline. */
+  .st-buttonGroup--attached {
+    gap: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--horizontal > :global(* + *) {
+    margin-inline-start: -1px;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--vertical > :global(* + *) {
+    margin-block-start: -1px;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--horizontal > :global(*:not(:first-child):not(:last-child)) {
+    border-radius: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--horizontal > :global(*:first-child) {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--horizontal > :global(*:last-child) {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--vertical > :global(*:not(:first-child):not(:last-child)) {
+    border-radius: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--vertical > :global(*:first-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .st-buttonGroup--attached.st-buttonGroup--vertical > :global(*:last-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  /* Raise the focused/hovered button so its full border is visible over the
+     collapsed hairline. */
+  .st-buttonGroup--attached > :global(*:hover),
+  .st-buttonGroup--attached > :global(*:focus-visible) {
+    z-index: 1;
+  }
+</style>

package/dist/ButtonGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupSize = "sm" | "md" | "lg";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ButtonGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    orientation?: ButtonGroupOrientation;
+    /** Look segmenté joint (boutons collés, coins arrondis seulement aux extrémités). */
+    attached?: boolean;
+    /** Espacement entre boutons (échelle spacing), ignoré quand `attached`. */
+    gap?: number;
+    /** Taille indicative (transmise via data-attr pour styliser les enfants si besoin). */
+    size?: ButtonGroupSize;
+    /** Étiquette a11y du groupe. */
+    label?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.svelte.d.ts.map

package/dist/ButtonGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ButtonGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAGnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uFAAuF;IACvF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2CJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/CheckboxGroup.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>
+  export interface CheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Checkbox from "./Checkbox.svelte";
+
+  type CheckboxGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeurs cochées (liste contrôlée). */
+    value?: string[];
+    onchange?: (value: string[]) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé par les cases (utile pour la soumission de formulaire). */
+    name?: string;
+    options?: CheckboxGroupOption[];
+    /** Description optionnelle affichée sous la légende. */
+    helperText?: string;
+    /** Marque le groupe comme requis. */
+    disabled?: boolean;
+    class?: string;
+    /** Contenu libre rendu en plus des options. */
+    children?: Snippet;
+  };
+
+  let {
+    legend,
+    value = [],
+    onchange,
+    orientation = "vertical",
+    name,
+    options = [],
+    helperText,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: CheckboxGroupProps = $props();
+
+  const classes = $derived(
+    ["st-checkboxGroup", `st-checkboxGroup--${orientation}`, className].filter(Boolean).join(" ")
+  );
+
+  function toggle(optionValue: string, checked: boolean) {
+    const next = checked
+      ? [...value, optionValue]
+      : value.filter((v) => v !== optionValue);
+    onchange?.(next);
+  }
+</script>
+
+<fieldset {...rest} class={classes} {disabled}>
+  <legend class="st-checkboxGroup__legend">{legend}</legend>
+  {#if helperText}
+    <p class="st-checkboxGroup__help">{helperText}</p>
+  {/if}
+  <div class="st-checkboxGroup__options">
+    {#each options as option (option.value)}
+      <Checkbox
+        label={option.label}
+        helperText={option.helperText}
+        {name}
+        value={option.value}
+        checked={value.includes(option.value)}
+        disabled={option.disabled}
+        onchange={(event) => toggle(option.value, event.currentTarget.checked)}
+      />
+    {/each}
+    {@render children?.()}
+  </div>
+</fieldset>
+
+<style>
+  .st-checkboxGroup {
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-checkboxGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-size: 0.9375rem;
+    font-weight: 650;
+    line-height: 1.3;
+    padding: 0;
+  }
+
+  .st-checkboxGroup__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+    margin: 0.25rem 0 0;
+  }
+
+  .st-checkboxGroup__options {
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-checkboxGroup--vertical .st-checkboxGroup__options {
+    flex-direction: column;
+  }
+
+  .st-checkboxGroup--horizontal .st-checkboxGroup__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+</style>

package/dist/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface CheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type CheckboxGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeurs cochées (liste contrôlée). */
+    value?: string[];
+    onchange?: (value: string[]) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé par les cases (utile pour la soumission de formulaire). */
+    name?: string;
+    options?: CheckboxGroupOption[];
+    /** Description optionnelle affichée sous la légende. */
+    helperText?: string;
+    /** Marque le groupe comme requis. */
+    disabled?: boolean;
+    class?: string;
+    /** Contenu libre rendu en plus des options. */
+    children?: Snippet;
+};
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.svelte.d.ts.map

package/dist/CheckboxGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC1F,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoDJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}