@sentropic/design-system-svelte 0.10.0 → 0.10.1

package/dist/Button.svelte

@@ -57,10 +57,17 @@
       box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
   }
 
+  /* Padding is 4-value (top right bottom left): the trailing side reads
+     `paddingInlineEnd` so a theme can make the button asymmetric (Carbon's
+     label-left primary button has a large right gutter) without a per-component
+     escape. `paddingInlineEnd` falls back to `paddingInline` → symmetric for the
+     base / DSFR (unchanged). */
   .st-button--sm {
     min-height: var(--st-component-button-anatomy-density-sm-controlHeight, 2rem);
     min-width: var(--st-component-button-anatomy-density-sm-minWidth, 2rem);
     padding: var(--st-component-button-anatomy-density-sm-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-sm-paddingInlineEnd, var(--st-component-button-anatomy-density-sm-paddingInline, 0.75rem))
+      var(--st-component-button-anatomy-density-sm-paddingBlock, 0)
       var(--st-component-button-anatomy-density-sm-paddingInline, 0.75rem);
     font-size: var(--st-component-button-anatomy-density-sm-fontSize, 0.875rem);
   }
@@ -69,6 +76,8 @@
     min-height: var(--st-component-button-anatomy-density-md-controlHeight, 2.5rem);
     min-width: var(--st-component-button-anatomy-density-md-minWidth, 2.5rem);
     padding: var(--st-component-button-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-md-paddingInlineEnd, var(--st-component-button-anatomy-density-md-paddingInline, 1rem))
+      var(--st-component-button-anatomy-density-md-paddingBlock, 0)
       var(--st-component-button-anatomy-density-md-paddingInline, 1rem);
     font-size: var(--st-component-button-anatomy-density-md-fontSize, var(--st-component-button-anatomy-typography-size, 0.9375rem));
   }
@@ -77,6 +86,8 @@
     min-height: var(--st-component-button-anatomy-density-lg-controlHeight, 3rem);
     min-width: var(--st-component-button-anatomy-density-lg-minWidth, 3rem);
     padding: var(--st-component-button-anatomy-density-lg-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-lg-paddingInlineEnd, var(--st-component-button-anatomy-density-lg-paddingInline, 1.25rem))
+      var(--st-component-button-anatomy-density-lg-paddingBlock, 0)
       var(--st-component-button-anatomy-density-lg-paddingInline, 1.25rem);
     font-size: var(--st-component-button-anatomy-density-lg-fontSize, 1rem);
   }

package/dist/Card.svelte

@@ -27,6 +27,13 @@
     border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
     box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
     color: var(--st-semantic-text-primary);
+    /* Card body typography (anatomy, F5). The base card carried no explicit
+       type — so the fallbacks reproduce that exact render (inherit / normal /
+       normal). DSFR pins line-height 24px (1.5); Carbon pins its real tile body
+       metrics (14px / 14px / 0.16px). Base Sent Tech unchanged. */
+    font-size: var(--st-component-card-anatomy-typography-size, inherit);
+    line-height: var(--st-component-card-anatomy-typography-lineHeight, normal);
+    letter-spacing: var(--st-component-card-anatomy-typography-letterSpacing, normal);
     padding: var(--st-spacing-4, 1rem);
   }
 

package/dist/Checkbox.svelte

@@ -14,7 +14,6 @@
 
 <label class={classes()}>
   <input {...rest} class="st-choice__input" type="checkbox" aria-invalid={invalid ? "true" : undefined} />
-  <span class="st-choice__box" aria-hidden="true"></span>
   <span class="st-choice__content">
     <span class="st-choice__label">{label}</span>
     {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
@@ -25,23 +24,43 @@
   .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 la coche native (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 coche 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;
   }
 
-  .st-choice__box {
-    display: none;
+  /* 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 {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,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/Radio.svelte

@@ -13,7 +13,7 @@
 </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,21 +24,45 @@
   .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;

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

@@ -63,7 +63,9 @@
 
 <style>
   .st-tabs {
-    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
+    /* Wrapper/panel text = neutral primary (NOT the active-tab colour, which is
+       Bleu France in DSFR and must not bleed into the panel body). */
+    color: var(--st-semantic-text-primary);
     display: grid;
     gap: var(--st-spacing-4, 1rem);
   }
@@ -77,22 +79,35 @@
   .st-tabs__tab {
     background: transparent;
     border: 0;
-    border-bottom-width: var(--st-component-tabs-anatomy-shape-borderWidth, 2px);
+    /* 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
+       so the baseline does not shift when a tab becomes active. */
+    border-top-width: var(--st-component-tabs-activeBorderTopWidth, 0);
+    border-bottom-width: var(--st-component-tabs-activeBorderBottomWidth, var(--st-component-tabs-anatomy-shape-borderWidth, 2px));
+    border-top-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
     border-bottom-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
+    border-top-color: transparent;
     border-bottom-color: transparent;
     color: var(--st-component-tabs-inactiveText, var(--st-semantic-text-secondary));
     cursor: var(--st-cursor-interactive, pointer);
     font-family: var(--st-component-tabs-anatomy-typography-family, inherit);
+    font-size: var(--st-component-tabs-tabFontSize, inherit);
     font-weight: var(--st-component-tabs-anatomy-typography-weight, 600);
-    line-height: var(--st-component-tabs-anatomy-typography-lineHeight, 1.2);
+    line-height: var(--st-component-tabs-tabLineHeight, var(--st-component-tabs-anatomy-typography-lineHeight, 1.2));
     letter-spacing: var(--st-component-tabs-anatomy-typography-letterSpacing, 0);
     text-transform: var(--st-component-tabs-anatomy-typography-textTransform, none);
-    padding: 0.75rem 0.25rem;
+    padding: var(--st-component-tabs-tabPaddingBlock, 0.75rem) var(--st-component-tabs-tabPaddingInline, 0.25rem);
   }
 
   .st-tabs__tab--active {
+    background: var(--st-component-tabs-activeBackground, transparent);
+    border-top-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
     border-bottom-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
-    color: var(--st-component-tabs-anatomy-states-hover-text, var(--st-component-tabs-activeText, var(--st-semantic-text-primary)));
+    /* Indicator accent when the theme draws it as a box-shadow (DSFR top filet)
+       rather than a real border — keeps both border sides at `0 none`. */
+    box-shadow: var(--st-component-tabs-activeShadow, none);
+    font-weight: var(--st-component-tabs-activeWeight, var(--st-component-tabs-anatomy-typography-weight, 600));
+    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
   }
 
   /* a11y (non-negotiable): tabs previously had NO visible focus ring. The

package/dist/Textarea.svelte

@@ -87,12 +87,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);
+    /* 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);
     line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     min-height: 6rem;
     min-width: 0;
     padding: 0.625rem var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
@@ -115,8 +124,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-textarea[aria-invalid="true"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,7 @@
   ],
   "dependencies": {
     "@lucide/svelte": "^0.562.0",
-    "@sentropic/design-system-themes": "0.10.0"
+    "@sentropic/design-system-themes": "0.10.1"
   },
   "peerDependencies": {
     "svelte": "^5.53.2"
@@ -38,8 +38,8 @@
     "test": "vitest run src"
   },
   "devDependencies": {
-    "@sentropic/design-system-theme-carbon": "0.2.0",
-    "@sentropic/design-system-theme-dsfr": "0.2.0",
+    "@sentropic/design-system-theme-carbon": "0.2.1",
+    "@sentropic/design-system-theme-dsfr": "0.2.1",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/svelte": "^5.2.8",