@sentropic/design-system-svelte 0.10.0 → 0.10.2

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/Input.svelte

@@ -90,12 +90,24 @@
     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);
+    /* Per-corner radius (anatomy v1.3.0): the TOP corners read the field's
+       `radiusTop` (DSFR « Champ de saisie » = 4px top, square bottom); the
+       BOTTOM corners keep `shape.radius`. Fallback = shape.radius on all four
+       corners → the base Sent Tech field stays a uniform rounded box. */
+    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);
+    /* Bottom rule as a box-shadow inset (anatomy v1.3.0, real DSFR/Carbon
+       technique) instead of a border-bottom — keeps the box height honest.
+       Fallback = none → the base boxed field draws its rule via the 4 borders. */
+    box-shadow: var(--st-component-control-anatomy-field-underline, none);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     font-family: var(--st-component-control-anatomy-typography-family, inherit);
     font-size: var(--st-component-control-anatomy-typography-size, inherit);
     font-weight: var(--st-component-control-anatomy-typography-weight, 400);
     line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     min-width: 0;
     /* Inputs use the SM inline padding (denser than buttons) — base = 0.75rem. */
     padding: var(--st-component-control-anatomy-density-md-paddingBlock, 0)
@@ -128,13 +140,17 @@
   }
 
   /* Focus = shared mixin. Base/DSFR use outline; Carbon uses inset box-shadow.
-     The border-color change is the field's own affordance and stays. */
+     The border-color change is the field's own affordance and stays. The field
+     focus box-shadow (anatomy v1.3.0) is COMPOSED so the resting underline is
+     not dropped: DSFR (outline) keeps the underline, Carbon stacks ring +
+     underline. Fallback = the plain focus ring (base boxed field). */
   .st-control:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
     outline: var(--st-component-control-anatomy-focus-outline, none);
     outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
-    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
-      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
+    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
+      var(--st-component-control-anatomy-focus-boxShadow,
+        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
   }
 
   .st-control[aria-invalid="true"] {

package/dist/Link.svelte

@@ -58,6 +58,12 @@
   .st-link {
     color: var(--st-component-link-text, var(--st-semantic-text-link));
     cursor: var(--st-cursor-interactive, pointer);
+    /* Anatomy typography (additive): size/line-height/letter-spacing follow the
+       link role per theme. Base/DSFR use `inherit`/`normal` fallbacks → no visible
+       change; Carbon poses 14px / 18px / 0.16px to match the real .bx--link. */
+    font-size: var(--st-component-link-anatomy-typography-size, inherit);
+    line-height: var(--st-component-link-anatomy-typography-lineHeight, normal);
+    letter-spacing: var(--st-component-link-anatomy-typography-letterSpacing, normal);
     text-decoration: var(--st-component-link-anatomy-typography-textDecoration, underline);
     text-decoration-thickness: var(--st-component-link-anatomy-typography-decorationThickness, auto);
     text-underline-offset: var(--st-component-link-anatomy-typography-decorationOffset, 0.18em);

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,11 +9,11 @@
   };
 
   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()}>
-  <input {...rest} class="st-choice__input" type="radio" data-invalid={invalid ? "true" : undefined} />
+  <input {...rest} class="st-choice__input" type="radio" aria-invalid={invalid ? "true" : undefined} />
   <span class="st-choice__content">
     <span class="st-choice__label">{label}</span>
     {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
@@ -24,28 +24,60 @@
   .st-choice {
     align-items: start;
     color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    cursor: var(--st-cursor-interactive, pointer);
     display: inline-grid;
     gap: 0.625rem;
     grid-template-columns: auto 1fr;
   }
 
   .st-choice__input {
-    /* Thématise le radio natif (couleur checked) sans markup custom — additif,
-       a11y native préservée. Le visuel custom (forme/focus par stratégie) reste
-       un item dédié (cf. backlog). */
+    /* Natif stylé : couleur de sélection thémée + taille + focus par stratégie
+       d'anatomie + états. Aucun widget custom, a11y native préservée. */
     accent-color: var(--st-component-selection-checkedBackground, var(--st-semantic-action-primary));
+    cursor: inherit;
     height: 1rem;
     margin: 0.125rem 0 0;
     width: 1rem;
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
+  .st-choice__input:focus-visible {
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
+  }
+
+  .st-choice__input[aria-invalid="true"] {
+    accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+    outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-choice__input:disabled {
+    cursor: var(--st-cursor-disabled, not-allowed);
+    opacity: 0.55;
+  }
+
+  .st-choice:has(.st-choice__input:disabled) {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: var(--st-cursor-disabled, not-allowed);
+  }
+
   .st-choice__content {
     display: grid;
     gap: 0.25rem;
   }
 
   .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/Select.svelte

@@ -87,19 +87,52 @@
 
   /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-select {
-    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
+    /* Native <select> rendering (anatomy v1.4.0, F5/F9). A native <select> with
+       `appearance: auto` has its `line-height` FORCED to `normal` by the browser
+       (the anatomy line-height below never lands); `appearance: none` lets it
+       take effect — the real DSFR/Carbon selects use `appearance: none` + a
+       drawn chevron, which is why they render 24px / 18px. Base = `auto` so the
+       Sent Tech select keeps its NATIVE arrow + render (unchanged). When a theme
+       opts into `none`, `selectChevron` redraws the arrow the UA dropped. */
+    appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
+    -webkit-appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
+    background:
+      var(--st-component-control-anatomy-field-selectChevron, none),
+      var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
     border-top: var(--st-component-control-anatomy-field-borderTop, 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-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);
+    /* Per-corner radius + box-shadow underline (anatomy v1.3.0) — same field
+       anatomy as Input. TOP corners = radiusTop (DSFR 4px), bottom = shape.radius;
+       bottom rule via inset box-shadow. Fallbacks reproduce the prior uniform
+       rounded box with no underline shadow → base Sent Tech unchanged. */
+    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);
+    box-shadow: var(--st-component-control-anatomy-field-underline, none);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     font-family: var(--st-component-control-anatomy-typography-family, inherit);
     font-size: var(--st-component-control-anatomy-typography-size, inherit);
     font-weight: var(--st-component-control-anatomy-typography-weight, 400);
+    /* Native <select> renders `line-height: normal` unless one is set explicitly;
+       pose the anatomy line-height so DSFR/Carbon select matches the field roles
+       (cluster 4). letter-spacing likewise (Carbon 0.16px). Additive — base keeps
+       its 1.5 fallback so the Sent Tech select is unchanged. */
     line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     min-width: 0;
-    padding: 0 2rem 0 0.75rem;
+    /* Padding follows the field density (additive; fallbacks reproduce the prior
+       `0 2rem 0 0.75rem` literal so the base Sent Tech select is unchanged):
+       vertical = md paddingBlock (base 0 → DSFR 8px), left = sm paddingInline
+       (base 0.75rem → DSFR/Carbon 16px). The right side reserves the chevron
+       gutter via selectPaddingRight (F9: base 2rem → DSFR 40px / Carbon 48px). */
+    padding:
+      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-field-selectPaddingRight, 2rem)
+      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
     width: 100%;
   }
 
@@ -119,8 +152,10 @@
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
     outline: var(--st-component-control-anatomy-focus-outline, none);
     outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
-    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
-      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
+    /* Composed field focus box-shadow (v1.3.0): keeps the resting underline. */
+    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
+      var(--st-component-control-anatomy-focus-boxShadow,
+        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
   }
 
   .st-select[aria-invalid="true"] {

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). */