@sentropic/design-system-svelte 0.10.1 → 0.10.2

package/dist/ForceGraph.svelte.d.ts

@@ -0,0 +1,54 @@
+export type ForceGraphTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ForceGraphNode = {
+    /** Stable identifier; referenced by edges. */
+    id: string;
+    /** Visible label (falls back to id). */
+    label?: string;
+    /**
+     * Grouping key (e.g. node type or community). Nodes sharing a group get
+     * the same tone when `tone` is not set explicitly.
+     */
+    group?: string | number;
+    /** Explicit data-vis tone; overrides the group-derived tone. */
+    tone?: ForceGraphTone;
+    /** Relative node radius weight (defaults to 1). */
+    weight?: number;
+    /** Pin the node to a fixed position (ignored by the simulation). */
+    fx?: number;
+    fy?: number;
+};
+export type ForceGraphEdge = {
+    /** Source node id. */
+    source: string;
+    /** Target node id. */
+    target: string;
+    /** Optional relation label, surfaced in the tooltip on hover/focus. */
+    relation?: string;
+    /**
+     * When true the link renders as a dashed/faded "weak" link. Lets callers
+     * map a confidence dimension onto link strength without extra props.
+     */
+    weak?: boolean;
+};
+type ForceGraphProps = {
+    nodes: ForceGraphNode[];
+    edges: ForceGraphEdge[];
+    /** Accessible name for the figure (required). */
+    label: string;
+    width?: number;
+    height?: number;
+    /** Base node radius in px (scaled by node.weight). */
+    nodeRadius?: number;
+    /** Show text labels next to nodes. */
+    showLabels?: boolean;
+    /**
+     * Number of cooling ticks. The simulation runs a synchronous warmup then
+     * animates the remainder unless reduced motion is requested.
+     */
+    iterations?: number;
+    class?: string;
+};
+declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;
+type ForceGraph = ReturnType<typeof ForceGraph>;
+export default ForceGraph;
+//# sourceMappingURL=ForceGraph.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoQJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Header.svelte

@@ -1,3 +1,35 @@
+<script lang="ts" module>
+  /**
+   * Identité de l'utilisateur connecté à afficher dans la zone compte du Header.
+   *
+   * Le composant garantit qu'une identité connectée ne se réduit JAMAIS à une
+   * icône carrée nue : le nom est toujours rendu, et l'email l'accompagne quand
+   * il est fourni. L'avatar utilise la photo si `avatarUrl` est présente, sinon
+   * il retombe sur les `initials` (calculées depuis le nom si non fournies).
+   */
+  export type HeaderAccount = {
+    /** Nom affiché de la personne connectée. Obligatoire : pas de carré sans nom. */
+    name: string;
+    /** Email optionnel, affiché sous le nom et dans le menu compte. */
+    email?: string;
+    /** URL de la photo de profil. Si absente, on rend les initiales. */
+    avatarUrl?: string | null;
+    /** Initiales explicites. Si absentes, dérivées du `name`. */
+    initials?: string;
+  };
+
+  /** Dérive des initiales lisibles (max 2 lettres) à partir d'un nom complet. */
+  export function deriveInitials(name: string): string {
+    const parts = name
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean);
+    if (parts.length === 0) return "?";
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+</script>
+
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
@@ -11,6 +43,23 @@
     navigation?: Snippet;
     actions?: Snippet;
     children?: Snippet;
+    /**
+     * Identité connectée (additif). Quand fourni, le Header rend une zone compte
+     * complète (avatar OU initiales + nom + email + déclencheur de menu). Sans
+     * cet objet, l'état « anonyme » s'affiche via le snippet `actions` du parent
+     * (typiquement un CTA « Se connecter »).
+     */
+    account?: HeaderAccount;
+    /** Texte du déclencheur de connexion rendu quand `account` est absent. */
+    signInLabel?: string;
+    /** Snippet du menu compte (contenu du panneau ouvert sous l'avatar). */
+    accountMenu?: Snippet;
+    /** Indique si le menu compte est ouvert (état contrôlé par le parent). */
+    accountMenuOpen?: boolean;
+    /** Callback déclenché au clic sur le bouton compte. */
+    onAccountTriggerClick?: () => void;
+    /** Callback déclenché au clic sur le CTA de connexion (état anonyme). */
+    onSignIn?: () => void;
   };
 
   let {
@@ -22,11 +71,22 @@
     navigation,
     actions,
     children,
+    account,
+    signInLabel = "Se connecter",
+    accountMenu,
+    accountMenuOpen = false,
+    onAccountTriggerClick,
+    onSignIn,
     ...rest
   }: HeaderProps = $props();
 
   const classes = () =>
     ["st-header", sticky ? "st-header--sticky" : null, className].filter(Boolean).join(" ");
+
+  const resolvedInitials = $derived(
+    account ? (account.initials?.trim() || deriveInitials(account.name)) : ""
+  );
+  const hasPhoto = $derived(Boolean(account?.avatarUrl));
 </script>
 
 <header {...rest} class={classes()} aria-label={label}>
@@ -43,9 +103,68 @@
       {@render navigation()}
     </nav>
   {/if}
-  {#if actions}
+  {#if actions || account || onSignIn}
     <div class="st-header__actions">
-      {@render actions()}
+      {#if actions}
+        {@render actions()}
+      {/if}
+      {#if account}
+        <!-- État connecté : identité arbitrée. Le nom est TOUJOURS visible. -->
+        <div class="st-header__account">
+          <button
+            type="button"
+            class="st-header__account-trigger"
+            aria-haspopup="menu"
+            aria-expanded={accountMenuOpen}
+            aria-label={`Compte de ${account.name}`}
+            onclick={onAccountTriggerClick}
+          >
+            {#if hasPhoto}
+              <span class="st-header__avatar st-header__avatar--photo" aria-hidden="true">
+                <img
+                  class="st-header__avatar-image"
+                  src={account.avatarUrl}
+                  alt=""
+                />
+              </span>
+            {:else}
+              <span class="st-header__avatar st-header__avatar--initials" aria-hidden="true">
+                {resolvedInitials}
+              </span>
+            {/if}
+            <span class="st-header__account-meta">
+              <span class="st-header__account-name">{account.name}</span>
+              {#if account.email}
+                <span class="st-header__account-email">{account.email}</span>
+              {/if}
+            </span>
+            <svg
+              class="st-header__account-caret"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+          {#if accountMenu && accountMenuOpen}
+            <div class="st-header__account-menu" role="menu" aria-label={`Menu de ${account.name}`}>
+              {@render accountMenu()}
+            </div>
+          {/if}
+        </div>
+      {:else if onSignIn}
+        <!-- État anonyme : CTA de connexion explicite. -->
+        <button type="button" class="st-header__signin" onclick={onSignIn}>
+          {signInLabel}
+        </button>
+      {/if}
     </div>
   {/if}
   {#if children}
@@ -114,4 +233,124 @@
    * When no navigation snippet is provided, the actions area still flushes
    * to the right because flex:1 leading + auto margin keep the layout balanced.
    */
+
+  /* --- Zone compte (G8) : identité connectée, jamais un carré nu --- */
+  .st-header__account {
+    position: relative;
+  }
+
+  .st-header__account-trigger {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--st-component-header-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-sm, 0.375rem);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: var(--st-spacing-2, 0.5rem);
+    max-width: 18rem;
+    min-height: 2.25rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .st-header__account-trigger:hover,
+  .st-header__account-trigger:focus-visible {
+    border-color: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+    outline: none;
+  }
+
+  .st-header__avatar {
+    aspect-ratio: 1;
+    border-radius: var(--st-radius-sm, 0.375rem);
+    flex: 0 0 auto;
+    height: 2rem;
+    overflow: hidden;
+    width: 2rem;
+  }
+
+  .st-header__avatar--initials {
+    align-items: center;
+    background: var(--st-semantic-surface-subtle, #eef2f7);
+    color: var(--st-semantic-text-primary, #0f172a);
+    display: inline-flex;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    justify-content: center;
+    letter-spacing: 0.01em;
+  }
+
+  .st-header__avatar-image {
+    background: var(--st-semantic-surface-subtle, #eef2f7);
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+  }
+
+  .st-header__account-meta {
+    display: grid;
+    gap: 0.05rem;
+    min-width: 0;
+    text-align: left;
+  }
+
+  .st-header__account-name {
+    color: var(--st-semantic-text-primary, #0f172a);
+    font-size: 0.82rem;
+    font-weight: 650;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .st-header__account-email {
+    color: var(--st-semantic-text-secondary, #64748b);
+    font-size: 0.72rem;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .st-header__account-caret {
+    color: var(--st-semantic-text-secondary, #64748b);
+    flex: 0 0 auto;
+  }
+
+  .st-header__account-menu {
+    background: var(--st-component-popover-background, var(--st-semantic-surface-raised, #ffffff));
+    border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle, #e2e8f0));
+    border-radius: var(--st-component-popover-radius, 0.5rem);
+    box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    color: var(--st-semantic-text-primary, #0f172a);
+    display: grid;
+    gap: 0.35rem;
+    min-width: 14rem;
+    padding: var(--st-spacing-3, 0.75rem);
+    position: absolute;
+    right: 0;
+    top: calc(100% + var(--st-spacing-2, 0.5rem));
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  .st-header__signin {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-radius-sm, 0.375rem);
+    color: var(--st-semantic-text-link, var(--st-semantic-action-primary));
+    cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    min-height: 2.25rem;
+    padding: 0 0.875rem;
+  }
+
+  .st-header__signin:hover,
+  .st-header__signin:focus-visible {
+    background: var(--st-semantic-surface-subtle, #f1f5f9);
+    outline: none;
+  }
 </style>

package/dist/Header.svelte.d.ts

@@ -1,3 +1,23 @@
+/**
+ * Identité de l'utilisateur connecté à afficher dans la zone compte du Header.
+ *
+ * Le composant garantit qu'une identité connectée ne se réduit JAMAIS à une
+ * icône carrée nue : le nom est toujours rendu, et l'email l'accompagne quand
+ * il est fourni. L'avatar utilise la photo si `avatarUrl` est présente, sinon
+ * il retombe sur les `initials` (calculées depuis le nom si non fournies).
+ */
+export type HeaderAccount = {
+    /** Nom affiché de la personne connectée. Obligatoire : pas de carré sans nom. */
+    name: string;
+    /** Email optionnel, affiché sous le nom et dans le menu compte. */
+    email?: string;
+    /** URL de la photo de profil. Si absente, on rend les initiales. */
+    avatarUrl?: string | null;
+    /** Initiales explicites. Si absentes, dérivées du `name`. */
+    initials?: string;
+};
+/** Dérive des initiales lisibles (max 2 lettres) à partir d'un nom complet. */
+export declare function deriveInitials(name: string): string;
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
@@ -9,6 +29,23 @@ type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     navigation?: Snippet;
     actions?: Snippet;
     children?: Snippet;
+    /**
+     * Identité connectée (additif). Quand fourni, le Header rend une zone compte
+     * complète (avatar OU initiales + nom + email + déclencheur de menu). Sans
+     * cet objet, l'état « anonyme » s'affiche via le snippet `actions` du parent
+     * (typiquement un CTA « Se connecter »).
+     */
+    account?: HeaderAccount;
+    /** Texte du déclencheur de connexion rendu quand `account` est absent. */
+    signInLabel?: string;
+    /** Snippet du menu compte (contenu du panneau ouvert sous l'avatar). */
+    accountMenu?: Snippet;
+    /** Indique si le menu compte est ouvert (état contrôlé par le parent). */
+    accountMenuOpen?: boolean;
+    /** Callback déclenché au clic sur le bouton compte. */
+    onAccountTriggerClick?: () => void;
+    /** Callback déclenché au clic sur le CTA de connexion (état anonyme). */
+    onSignIn?: () => void;
 };
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Header.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,iFAAiF;IACjF,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQnD;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uDAAuD;IACvD,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAoGJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Pagination.svelte

@@ -52,19 +52,37 @@
 
   .st-pagination button {
     background: var(--st-component-pagination-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-pagination-border, var(--st-semantic-border-subtle));
+    border: var(--st-component-pagination-borderWidth, 1px) solid
+      var(--st-component-pagination-border, var(--st-semantic-border-subtle));
     border-radius: var(--st-component-pagination-radius, 0.375rem);
     color: var(--st-component-pagination-text, var(--st-semantic-text-primary));
     cursor: pointer;
-    font: inherit;
-    min-height: 2.25rem;
-    min-width: 2.25rem;
-    padding: 0 0.75rem;
+    font-family: inherit;
+    font-size: var(--st-component-pagination-fontSize, inherit);
+    line-height: var(--st-component-pagination-lineHeight, normal);
+    letter-spacing: var(--st-component-pagination-letterSpacing, normal);
+    min-height: var(--st-component-pagination-minSize, 2.25rem);
+    min-width: var(--st-component-pagination-minSize, 2.25rem);
+    padding: var(--st-component-pagination-paddingBlock, 0)
+      var(--st-component-pagination-paddingInline, 0.75rem);
   }
 
-  .st-pagination__page--active {
+  /* Active page — scoped under `.st-pagination button` so it outweighs the base
+     button rule. The prior single-class selector (specificity 0,1,0) LOST to the
+     element+class base rule (0,1,1), so the active fill/colour never applied
+     (the report measured the active page on white, not the action fill). */
+  .st-pagination button.st-pagination__page--active {
     background: var(--st-component-pagination-activeBackground, var(--st-semantic-action-primary));
+    border-color: var(
+      --st-component-pagination-activeBorder,
+      var(--st-component-pagination-border, var(--st-semantic-border-subtle))
+    );
+    border-width: var(
+      --st-component-pagination-activeBorderWidth,
+      var(--st-component-pagination-borderWidth, 1px)
+    );
     color: var(--st-component-pagination-activeText, var(--st-semantic-action-primaryText));
+    font-weight: var(--st-component-pagination-activeWeight, inherit);
   }
 
   .st-pagination button:disabled {

package/dist/Radio.svelte

@@ -9,7 +9,7 @@
   };
 
   let { label, helperText, invalid = false, class: className, ...rest }: RadioProps = $props();
-  const classes = () => ["st-choice", className].filter(Boolean).join(" ");
+  const classes = () => ["st-choice", "st-choice--radio", className].filter(Boolean).join(" ");
 </script>
 
 <label class={classes()}>
@@ -69,7 +69,15 @@
   }
 
   .st-choice__label {
-    font-size: 0.9375rem;
+    /* P-D: label typography per theme (base = 15px / normal / inherited colour).
+       Radio carries its own line-height (Carbon $body-01 = 20px, vs the checkbox
+       $body-compact-01 = 18px); the var defaults to the shared choice line-height
+       so a theme that does not split them stays consistent. */
+    color: var(--st-component-selection-choiceLabelColor, inherit);
+    font-size: var(--st-component-selection-choiceLabelFontSize, 0.9375rem);
+    line-height: var(--st-component-selection-choiceRadioLineHeight,
+      var(--st-component-selection-choiceLabelLineHeight, normal));
+    letter-spacing: var(--st-component-selection-choiceLabelLetterSpacing, normal);
   }
 
   .st-choice__help {

package/dist/Search.svelte

@@ -117,9 +117,21 @@
     border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
     border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
     border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
-    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    /* Top corners ride the shared field `radiusTop` (DSFR rounds top 4px, like
+       the Input field box); bottom corners keep the field shape radius. */
+    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
+    /* P-D: field-box padding + input typography per theme. Default = the prior
+       render (0 padding on the wrapper, inherited 16px / `normal` typography);
+       DSFR pads 8/16px, Carbon 0/40px to match the measured reference input. */
+    padding: var(--st-component-search-paddingBlock, 0) var(--st-component-search-paddingInline, 0);
+    font-size: var(--st-component-search-fontSize, 1rem);
+    line-height: var(--st-component-search-lineHeight, normal);
+    letter-spacing: var(--st-component-search-letterSpacing, normal);
     transition:
       border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
       box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);

package/dist/Switch.svelte

@@ -33,31 +33,33 @@
   }
 
   .st-switch__input {
-    height: 1.25rem;
+    height: var(--st-component-selection-toggleTrackHeight, 1.25rem);
     margin: 0;
     opacity: 0;
     position: absolute;
-    width: 2.25rem;
+    width: var(--st-component-selection-toggleTrackWidth, 2.25rem);
   }
 
   .st-switch__track {
     align-items: center;
     background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
-    border-radius: var(--st-radius-pill, 999px);
+    /* P-D: dims/radius/padding ride the per-theme toggle anatomy (default = the
+       prior 36×20 pill → base unchanged), so Switch stays coherent with Toggle. */
+    border-radius: var(--st-component-selection-toggleTrackRadius, var(--st-radius-pill, 999px));
     display: inline-flex;
-    height: 1.25rem;
-    padding: 0.125rem;
+    height: var(--st-component-selection-toggleTrackHeight, 1.25rem);
+    padding: var(--st-component-selection-toggleTrackPadding, 0.125rem);
     transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
-    width: 2.25rem;
+    width: var(--st-component-selection-toggleTrackWidth, 2.25rem);
   }
 
   .st-switch__thumb {
     background: var(--st-component-selection-switchThumb, var(--st-semantic-surface-default));
     border-radius: var(--st-radius-pill, 999px);
-    height: 1rem;
+    height: var(--st-component-selection-toggleThumbSize, 1rem);
     transform: translateX(0);
     transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
-    width: 1rem;
+    width: var(--st-component-selection-toggleThumbSize, 1rem);
   }
 
   .st-switch__input:checked + .st-switch__track {
@@ -65,7 +67,7 @@
   }
 
   .st-switch__input:checked + .st-switch__track .st-switch__thumb {
-    transform: translateX(1rem);
+    transform: translateX(calc(var(--st-component-selection-toggleTrackWidth, 2.25rem) - var(--st-component-selection-toggleThumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
   }
 
   /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */

package/dist/Tabs.svelte

@@ -77,7 +77,10 @@
   }
 
   .st-tabs__tab {
-    background: transparent;
+    /* Resting tab fill (G2): per-theme. Base/Carbon keep transparent; DSFR puts
+       a light grey-blue fill on the inactive tabs so the white active tab reads
+       as raised. Fallback = transparent → base render unchanged. */
+    background: var(--st-component-tabs-inactiveBackground, transparent);
     border: 0;
     /* Indicator edge (F7/F8): base/Carbon carry it on the BOTTOM, DSFR on the
        TOP. The resting tab keeps the same-width transparent stroke on each edge

package/dist/Tag.svelte

@@ -53,29 +53,37 @@
 </span>
 
 <style>
+  /* P-C: per-theme tag anatomy. Every var falls back to the prior base literal,
+     so a theme that emits no `--st-component-tag-*` renders byte-identically. */
   .st-tag {
     align-items: center;
-    border-radius: var(--st-radius-pill, 999px);
+    border-radius: var(--st-component-tag-radius, var(--st-radius-pill, 999px));
     display: inline-flex;
-    font-weight: 600;
+    font-weight: var(--st-component-tag-fontWeight, 600);
     gap: 0.25rem;
-    line-height: 1;
-    padding: 0.25rem 0.5rem;
+    letter-spacing: var(--st-component-tag-letterSpacing, normal);
+    line-height: var(--st-component-tag-lineHeight, 1);
+    min-height: var(--st-component-tag-minHeight, 0);
+    padding: var(--st-component-tag-paddingBlock, 0.25rem)
+      var(--st-component-tag-paddingInline, 0.5rem);
+    text-transform: var(--st-component-tag-textTransform, none);
   }
 
   .st-tag--sm {
-    font-size: 0.6875rem;
-    padding: 0.1875rem 0.5rem;
+    font-size: var(--st-component-tag-fontSize, 0.6875rem);
+    padding: var(--st-component-tag-paddingBlock, 0.1875rem)
+      var(--st-component-tag-paddingInline, 0.5rem);
   }
 
   .st-tag--md {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.625rem;
+    font-size: var(--st-component-tag-fontSize, 0.75rem);
+    padding: var(--st-component-tag-paddingBlock, 0.25rem)
+      var(--st-component-tag-paddingInline, 0.625rem);
   }
 
   .st-tag--neutral {
-    background: var(--st-semantic-surface-subtle);
-    color: var(--st-semantic-text-secondary);
+    background: var(--st-component-tag-neutralBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-component-tag-neutralText, var(--st-semantic-text-secondary));
   }
 
   .st-tag--success {

package/dist/Toggle.svelte

@@ -75,11 +75,20 @@
   .st-toggle__track {
     align-items: center;
     background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
-    border-radius: var(--st-radius-pill, 999px);
+    /* P-D: radius/padding + label typography/colour per theme. Track stays a
+       rounded pill by default (base unchanged); Carbon pins the 48×24 switch box
+       and its grey label colour / 12px-16px/0.32px typography (the track carries
+       no text, so the typography/colour leaves are visually inert on our side but
+       align the measured surface to the reference switch). */
+    border-radius: var(--st-component-selection-toggleTrackRadius, var(--st-radius-pill, 999px));
+    color: var(--st-component-selection-toggleTextColor, var(--st-semantic-text-primary));
     display: inline-flex;
     flex: 0 0 auto;
+    font-size: var(--st-component-selection-toggleFontSize, inherit);
     height: var(--st-toggle-trackHeight, 1.25rem);
-    padding: 0.125rem;
+    letter-spacing: var(--st-component-selection-toggleLetterSpacing, normal);
+    line-height: var(--st-component-selection-toggleLineHeight, normal);
+    padding: var(--st-component-selection-toggleTrackPadding, 0.125rem);
     transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: var(--st-toggle-trackWidth, 2.25rem);
   }
@@ -98,7 +107,7 @@
   }
 
   .st-toggle__input:checked + .st-toggle__track .st-toggle__thumb {
-    transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 0.25rem));
+    transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
   }
 
   /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
@@ -132,8 +141,10 @@
   }
 
   .st-toggle--md {
-    --st-toggle-trackHeight: 1.25rem;
-    --st-toggle-trackWidth: 2.25rem;
-    --st-toggle-thumbSize: 1rem;
+    /* P-D: md track dims ride the per-theme toggle anatomy (default = the prior
+       36×20 / 16px thumb → base unchanged; Carbon pins its 48×24 switch box). */
+    --st-toggle-trackHeight: var(--st-component-selection-toggleTrackHeight, 1.25rem);
+    --st-toggle-trackWidth: var(--st-component-selection-toggleTrackWidth, 2.25rem);
+    --st-toggle-thumbSize: var(--st-component-selection-toggleThumbSize, 1rem);
   }
 </style>

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as Dropdown } from "./Dropdown.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
 export { default as FileUploader } from "./FileUploader.svelte";
 export { default as Footer } from "./Footer.svelte";
+export { default as ForceGraph } from "./ForceGraph.svelte";
 export { default as Form } from "./Form.svelte";
 export { default as FormGroup } from "./FormGroup.svelte";
 export { default as Header } from "./Header.svelte";
@@ -91,7 +92,10 @@ export type { ComboboxOption } from "./Combobox.svelte";
 export type { DataTableColumn, DataTableRow, DataTableSelectMode, DataTableSort } from "./DataTable.svelte";
 export type { DatePickerRange } from "./DatePicker.svelte";
 export type { DonutChartDatum, DonutChartTone } from "./DonutChart.svelte";
+export type { ForceGraphNode, ForceGraphEdge, ForceGraphTone } from "./ForceGraph.svelte";
 export type { DropdownOption } from "./Dropdown.svelte";
+export type { HeaderAccount } from "./Header.svelte";
+export { deriveInitials } from "./Header.svelte";
 export type { FileUploadItem, FileUploadStatus } from "./FileUploader.svelte";
 export type { MenuItem } from "./Menu.svelte";
 export type { MultiSelectOption } from "./MultiSelect.svelte";