@sentropic/design-system-svelte 0.9.0 → 0.10.0

package/dist/Highlight.svelte.d.ts

@@ -0,0 +1,15 @@
+export type HighlightTone = "neutral" | "info" | "success" | "warning" | "error";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type HighlightProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** Tonalité de l'encart (couleur d'accent). */
+    tone?: HighlightTone;
+    /** Titre optionnel de la mise en avant. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Highlight: import("svelte").Component<HighlightProps, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;
+//# sourceMappingURL=Highlight.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Highlight.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAC3E,+CAA+C;IAC/C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4BJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Input.svelte

@@ -58,8 +58,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -77,13 +81,26 @@
   }
 
   .st-control {
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    /* Field style (anatomy v1.2.0): the background fill + per-side borders come
+       from the resolved `field` anatomy. outline (base) = surface.default fill +
+       4 equal borders; filled-underline (DSFR/Carbon) = filled bg + bottom rule
+       only (top/right/left = none). Fallbacks reproduce the prior boxed look. */
+    background: 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);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
-    font: inherit;
+    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);
     min-width: 0;
-    padding: 0 0.75rem;
+    /* Inputs use the SM inline padding (denser than buttons) — base = 0.75rem. */
+    padding: var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
+    cursor: var(--st-cursor-text, text);
     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);
@@ -91,15 +108,15 @@
   }
 
   .st-control--sm {
-    min-height: var(--st-component-control-smHeight, 2rem);
+    min-height: var(--st-component-control-anatomy-density-sm-controlHeight, var(--st-component-control-smHeight, 2rem));
   }
 
   .st-control--md {
-    min-height: var(--st-component-control-mdHeight, 2.5rem);
+    min-height: var(--st-component-control-anatomy-density-md-controlHeight, var(--st-component-control-mdHeight, 2.5rem));
   }
 
   .st-control--lg {
-    min-height: var(--st-component-control-lgHeight, 3rem);
+    min-height: var(--st-component-control-anatomy-density-lg-controlHeight, var(--st-component-control-lgHeight, 3rem));
   }
 
   .st-control::placeholder {
@@ -110,10 +127,14 @@
     border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
   }
 
+  /* Focus = shared mixin. Base/DSFR use outline; Carbon uses inset box-shadow.
+     The border-color change is the field's own affordance and stays. */
   .st-control:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    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-control[aria-invalid="true"] {
@@ -123,6 +144,6 @@
   .st-control:disabled {
     background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
     color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
-    cursor: not-allowed;
+    cursor: var(--st-cursor-disabled, not-allowed);
   }
 </style>

package/dist/LanguageSelector.svelte

@@ -0,0 +1,181 @@
+<script lang="ts" module>
+  export interface LanguageOption {
+    value: string;
+    label: string;
+  }
+</script>
+
+<script lang="ts">
+  type LanguageSelectorProps = {
+    /** Code de langue courant (bindable). */
+    value?: string;
+    options: LanguageOption[];
+    /** aria-label du déclencheur. */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+  };
+
+  let {
+    value = $bindable<string>(""),
+    options,
+    label = "Choisir la langue",
+    disabled = false,
+    class: className,
+    onchange
+  }: LanguageSelectorProps = $props();
+
+  let open = $state(false);
+  let root: HTMLDivElement | undefined = $state();
+
+  const current = $derived(options.find((o) => o.value === value) ?? options[0]);
+  const classes = () => ["st-languageSelector", className].filter(Boolean).join(" ");
+
+  function choose(next: string) {
+    value = next;
+    open = false;
+    onchange?.(next);
+  }
+</script>
+
+<svelte:window
+  onclick={(e) => {
+    if (open && root && e.target instanceof Node && !root.contains(e.target)) open = false;
+  }}
+  onkeydown={(e) => {
+    if (e.key === "Escape") open = false;
+  }}
+/>
+
+<div class={classes()} bind:this={root}>
+  <button
+    type="button"
+    class="st-languageSelector__trigger"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-label={label}
+    {disabled}
+    onclick={() => (open = !open)}
+  >
+    <span class="st-languageSelector__current">{current?.label ?? value}</span>
+    <span class="st-languageSelector__caret" class:st-languageSelector__caret--open={open} aria-hidden="true"></span>
+  </button>
+
+  {#if open}
+    <ul class="st-languageSelector__menu" role="listbox" aria-label={label}>
+      {#each options as option (option.value)}
+        <li>
+          <button
+            type="button"
+            class="st-languageSelector__option"
+            class:st-languageSelector__option--active={option.value === value}
+            role="option"
+            aria-selected={option.value === value}
+            onclick={() => choose(option.value)}
+          >
+            <span class="st-languageSelector__check" aria-hidden="true">{option.value === value ? "✓" : ""}</span>
+            {option.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-languageSelector {
+    display: inline-block;
+    position: relative;
+  }
+
+  .st-languageSelector__trigger {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: 0.85rem;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding: 0.35rem 0.6rem;
+  }
+
+  .st-languageSelector__trigger:hover:not(:disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-languageSelector__trigger:focus-visible {
+    border-color: var(--st-semantic-border-interactive);
+    box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
+    outline: none;
+  }
+
+  .st-languageSelector__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-languageSelector__caret {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    display: inline-block;
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-languageSelector__caret--open {
+    transform: rotate(180deg);
+  }
+
+  .st-languageSelector__menu {
+    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-md, 0.375rem);
+    box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    list-style: none;
+    margin: 0.25rem 0 0;
+    min-width: 9rem;
+    padding: 0.25rem;
+    position: absolute;
+    right: 0;
+    z-index: var(--st-zindex-overlay, 80);
+  }
+
+  .st-languageSelector__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: 0.85rem;
+    gap: 0.4rem;
+    padding: 0.35rem 0.5rem;
+    text-align: left;
+    width: 100%;
+  }
+
+  .st-languageSelector__option:hover {
+    background: var(--st-semantic-surface-subtle);
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-languageSelector__option--active {
+    color: var(--st-semantic-action-primary);
+    font-weight: 600;
+  }
+
+  .st-languageSelector__check {
+    display: inline-flex;
+    justify-content: center;
+    width: 0.75rem;
+  }
+</style>

package/dist/LanguageSelector.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageOption {
+    value: string;
+    label: string;
+}
+type LanguageSelectorProps = {
+    /** Code de langue courant (bindable). */
+    value?: string;
+    options: LanguageOption[];
+    /** aria-label du déclencheur. */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const LanguageSelector: import("svelte").Component<LanguageSelectorProps, {}, "value">;
+type LanguageSelector = ReturnType<typeof LanguageSelector>;
+export default LanguageSelector;
+//# sourceMappingURL=LanguageSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSelector.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LanguageSelector.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,qBAAqB,GAAG;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA0DJ,QAAA,MAAM,gBAAgB,gEAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/Link.svelte

@@ -57,9 +57,10 @@
 <style>
   .st-link {
     color: var(--st-component-link-text, var(--st-semantic-text-link));
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
+    cursor: var(--st-cursor-interactive, pointer);
+    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);
   }
 
   .st-link--standalone {
@@ -73,18 +74,25 @@
   }
 
   .st-link:hover {
-    color: var(--st-component-link-hoverText, var(--st-semantic-action-primary));
+    color: var(--st-component-link-anatomy-states-hover-text, var(--st-component-link-hoverText, var(--st-semantic-action-primary)));
+    /* Anatomy v1.1.0: hover decoration sourced from states.hover.decoration
+       (= link typography textDecorationHover). Carbon: none → underline; DSFR/base:
+       underline → underline (no-op). The DSFR animated underline stays an escape. */
+    text-decoration-line: var(--st-component-link-anatomy-states-hover-decoration, underline);
   }
 
+  /* Focus = shared mixin. --st-radius-* fixed to the valid `sm` token (was the
+     phantom --st-radius-small). */
   .st-link:focus-visible {
-    border-radius: var(--st-radius-small, 0.375rem);
-    outline: 2px solid var(--st-component-link-focusRing, var(--st-semantic-border-interactive));
-    outline-offset: 2px;
+    border-radius: var(--st-component-link-anatomy-shape-radius, var(--st-radius-sm, 0.25rem));
+    outline: var(--st-component-link-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
+    outline-offset: var(--st-component-link-anatomy-focus-offset, 2px);
+    box-shadow: var(--st-component-link-anatomy-focus-boxShadow, none);
   }
 
   .st-link--disabled {
-    color: var(--st-component-link-disabledText, var(--st-semantic-text-muted));
-    cursor: not-allowed;
-    text-decoration: none;
+    color: var(--st-component-link-anatomy-states-disabled-text, var(--st-component-link-disabledText, var(--st-semantic-text-muted)));
+    cursor: var(--st-cursor-disabled, not-allowed);
+    text-decoration: var(--st-component-link-anatomy-states-disabled-decoration, none);
   }
 </style>

package/dist/MessageStatusBadge.svelte

@@ -8,10 +8,19 @@
   type MessageStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
     status: ChatMessageStatus;
     tone?: StatusTone;
+    /** Surcharge i18n des libellés par statut (défaut : libellés FR). */
+    labels?: Partial<Record<ChatMessageStatus, string>>;
     class?: string;
   };
 
-  let { status, tone, class: className, ...rest }: MessageStatusBadgeProps = $props();
+  let { status, tone, labels, class: className, ...rest }: MessageStatusBadgeProps = $props();
+
+  const DEFAULT_LABELS: Record<ChatMessageStatus, string> = {
+    pending: "En attente",
+    processing: "En cours",
+    completed: "Terminé",
+    failed: "Échec"
+  };
 
   const mappedTone = () => {
     if (tone) return tone;
@@ -21,12 +30,7 @@
     return "warning";
   };
 
-  const label = () => {
-    if (status === "pending") return "En attente";
-    if (status === "processing") return "En cours";
-    if (status === "completed") return "Terminé";
-    return "Échec";
-  };
+  const label = () => labels?.[status] ?? DEFAULT_LABELS[status];
 
   const classes = () => ["st-messageStatusBadge", className].filter(Boolean).join(" ");
 </script>

package/dist/MessageStatusBadge.svelte.d.ts

@@ -4,6 +4,8 @@ type StatusTone = "neutral" | "success" | "warning" | "error" | "info";
 type MessageStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
     status: ChatMessageStatus;
     tone?: StatusTone;
+    /** Surcharge i18n des libellés par statut (défaut : libellés FR). */
+    labels?: Partial<Record<ChatMessageStatus, string>>;
     class?: string;
 };
 declare const MessageStatusBadge: import("svelte").Component<MessageStatusBadgeProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,KAAK,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,KAAK,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/MultiSelect.svelte

@@ -197,8 +197,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -244,11 +248,15 @@
     min-height: var(--st-component-control-lgHeight, 3rem);
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-multiSelect__trigger {
     align-items: center;
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    background: 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);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     cursor: pointer;
     display: flex;
@@ -268,8 +276,10 @@
 
   .st-multiSelect__trigger:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    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-multiSelect[data-invalid="true"] .st-multiSelect__trigger {

package/dist/NumberInput.svelte

@@ -126,8 +126,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -144,11 +148,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-numberInput {
     align-items: stretch;
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    background: 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);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
     overflow: hidden;
@@ -176,7 +184,10 @@
 
   .st-numberInput:focus-within {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px 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)));
   }
 
   .st-numberInput:has([aria-invalid="true"]) {

package/dist/OrderedList.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type OrderedListInput = string | OrderedListItem;
+
+  export interface OrderedListItem {
+    content: string | Snippet;
+    /** Sous-items : chaînes ou objets (normalisés au rendu). */
+    children?: OrderedListInput[];
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type OrderedListProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: OrderedListInput[];
+    nested?: boolean;
+    class?: string;
+  };
+
+  let {
+    items,
+    nested = false,
+    class: className,
+    ...rest
+  }: OrderedListProps = $props();
+
+  const classes = () =>
+    ["st-orderedList", nested ? "st-orderedList--nested" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function normalize(item: OrderedListInput): OrderedListItem {
+    if (typeof item === "string") return { content: item };
+    return item;
+  }
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === "function";
+  }
+</script>
+
+<ol {...rest} class={classes()}>
+  {#each items as raw, index (index)}
+    {@const item = normalize(raw)}
+    <li class="st-orderedList__item">
+      {#if isSnippet(item.content)}
+        {@render item.content()}
+      {:else}
+        {item.content}
+      {/if}
+      {#if item.children && item.children.length > 0}
+        <ol class="st-orderedList st-orderedList--nested">
+          {#each item.children as childRaw, childIndex (childIndex)}
+            {@const child = normalize(childRaw)}
+            <li class="st-orderedList__item">
+              {#if isSnippet(child.content)}
+                {@render child.content()}
+              {:else}
+                {child.content}
+              {/if}
+            </li>
+          {/each}
+        </ol>
+      {/if}
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .st-orderedList {
+    color: var(--st-semantic-text-primary);
+    counter-reset: st-ol;
+    display: grid;
+    gap: var(--st-spacing-1, 0.25rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-orderedList--nested {
+    margin-block-start: var(--st-spacing-1, 0.25rem);
+    margin-inline-start: var(--st-spacing-4, 1rem);
+  }
+
+  .st-orderedList__item {
+    counter-increment: st-ol;
+    line-height: 1.5;
+    padding-inline-start: var(--st-spacing-8, 2rem);
+    position: relative;
+  }
+
+  .st-orderedList__item::before {
+    color: var(--st-semantic-text-secondary);
+    content: counter(st-ol) ".";
+    font-variant-numeric: tabular-nums;
+    inset-inline-start: 0;
+    position: absolute;
+    text-align: end;
+    width: var(--st-spacing-6, 1.5rem);
+  }
+</style>

package/dist/OrderedList.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+export type OrderedListInput = string | OrderedListItem;
+export interface OrderedListItem {
+    content: string | Snippet;
+    /** Sous-items : chaînes ou objets (normalisés au rendu). */
+    children?: OrderedListInput[];
+}
+import type { HTMLAttributes } from "svelte/elements";
+type OrderedListProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: OrderedListInput[];
+    nested?: boolean;
+    class?: string;
+};
+declare const OrderedList: import("svelte").Component<OrderedListProps, {}, "">;
+type OrderedList = ReturnType<typeof OrderedList>;
+export default OrderedList;
+//# sourceMappingURL=OrderedList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OrderedList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,eAAe,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4DJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/OverflowMenu.svelte

@@ -180,10 +180,13 @@
     );
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-overflowMenu__trigger:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    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-overflowMenu__trigger[aria-expanded="true"] {