@sentropic/design-system-svelte 0.10.1 → 0.10.3

package/dist/Accordion.svelte

@@ -115,14 +115,22 @@
     align-items: center;
     background: transparent;
     border: 0;
-    color: inherit;
+    /* Trigger colour (P-B): per theme. Default = primary text (inherited base
+       render); DSFR = Bleu France, Carbon = primary. */
+    color: var(--st-component-accordion-text, inherit);
     cursor: pointer;
     display: flex;
     font: inherit;
-    font-weight: 600;
+    /* Per-theme trigger typography (P-B). Defaults reproduce the prior render:
+       font-size inherits the heading size (≈18.72px), weight 600, normal
+       line-height. DSFR pins 16px / 500 / 24px, Carbon 13.33px / 400. */
+    font-size: var(--st-component-accordion-fontSize, inherit);
+    font-weight: var(--st-component-accordion-fontWeight, 600);
+    line-height: var(--st-component-accordion-lineHeight, normal);
     gap: 0.75rem;
     justify-content: space-between;
-    padding: 0.875rem 0.5rem;
+    padding: var(--st-component-accordion-paddingBlock, 0.875rem)
+      var(--st-component-accordion-paddingInline, 0.5rem);
     text-align: start;
     transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: 100%;

package/dist/Alert.svelte

@@ -41,30 +41,69 @@
 <style>
   .st-alert {
     background: var(--st-component-alert-background, var(--st-semantic-surface-raised));
-    border: 1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle));
-    border-left-width: 0.25rem;
+    /* Per-side box border (P-B): top/right/bottom resolve per theme (base = 1px
+       subtle box; DSFR = none; Carbon = none — its only visible edge is the left
+       bar). Fallbacks reproduce the prior 1px subtle box. */
+    border-top: var(
+      --st-component-alert-borderTop,
+      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
+    );
+    border-right: var(
+      --st-component-alert-borderRight,
+      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
+    );
+    border-bottom: var(
+      --st-component-alert-borderBottom,
+      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
+    );
+    /* Left accent edge: a real left border of `accentWidth` (base 4px / Carbon
+       3px), coloured per severity via --alert-accent. DSFR sets accentWidth 0 and
+       draws the accent as a ::before filet instead (see below). */
+    border-left-style: solid;
+    border-left-width: var(--st-component-alert-accentWidth, 0.25rem);
+    border-left-color: var(--alert-accent, var(--st-semantic-feedback-info));
     border-radius: 0;
     color: var(--st-component-alert-text, var(--st-semantic-text-primary));
     display: flex;
+    font-size: var(--st-component-alert-fontSize, inherit);
+    line-height: var(--st-component-alert-lineHeight, normal);
+    letter-spacing: var(--st-component-alert-letterSpacing, normal);
     gap: var(--st-spacing-4, 1rem);
     justify-content: space-between;
-    padding: var(--st-spacing-4, 1rem);
+    position: relative;
+    padding: var(--st-component-alert-paddingTop, var(--st-spacing-4, 1rem))
+      var(--st-component-alert-paddingRight, var(--st-spacing-4, 1rem))
+      var(--st-component-alert-paddingBottom, var(--st-spacing-4, 1rem))
+      var(--st-component-alert-paddingLeft, var(--st-spacing-4, 1rem));
+  }
+
+  /* Severity filet (DSFR): a left bar drawn as a ::before INSIDE the box, so it
+     adds NO measured border (the real `.fr-alert` accent technique). Width 0 by
+     default (base/Carbon use a real left border) → the bar is invisible. */
+  .st-alert::before {
+    background: var(--alert-accent, var(--st-semantic-feedback-info));
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: var(--st-component-alert-filetWidth, 0);
   }
 
   .st-alert--info {
-    border-left-color: var(--st-component-alert-infoBorder, var(--st-semantic-feedback-info));
+    --alert-accent: var(--st-component-alert-infoBorder, var(--st-semantic-feedback-info));
   }
 
   .st-alert--success {
-    border-left-color: var(--st-component-alert-successBorder, var(--st-semantic-feedback-success));
+    --alert-accent: var(--st-component-alert-successBorder, var(--st-semantic-feedback-success));
   }
 
   .st-alert--warning {
-    border-left-color: var(--st-component-alert-warningBorder, var(--st-semantic-feedback-warning));
+    --alert-accent: var(--st-component-alert-warningBorder, var(--st-semantic-feedback-warning));
   }
 
   .st-alert--error {
-    border-left-color: var(--st-component-alert-errorBorder, var(--st-semantic-feedback-error));
+    --alert-accent: var(--st-component-alert-errorBorder, var(--st-semantic-feedback-error));
   }
 
   .st-alert__content {

package/dist/Badge.svelte

@@ -18,14 +18,20 @@
 </span>
 
 <style>
+  /* P-C: per-theme badge anatomy. Every var falls back to the prior base literal,
+     so a theme that emits no `--st-component-badge-*` renders byte-identically. */
   .st-badge {
     display: inline-flex;
     align-items: center;
-    border-radius: var(--st-radius-pill, 999px);
-    font-size: 0.75rem;
-    font-weight: 650;
-    line-height: 1;
-    padding: 0.25rem 0.5rem;
+    border-radius: var(--st-component-badge-radius, var(--st-radius-pill, 999px));
+    font-size: var(--st-component-badge-fontSize, 0.75rem);
+    font-weight: var(--st-component-badge-fontWeight, 650);
+    letter-spacing: var(--st-component-badge-letterSpacing, normal);
+    line-height: var(--st-component-badge-lineHeight, 1);
+    min-height: var(--st-component-badge-minHeight, 0);
+    padding: var(--st-component-badge-paddingBlock, 0.25rem)
+      var(--st-component-badge-paddingInline, 0.5rem);
+    text-transform: var(--st-component-badge-textTransform, none);
   }
 
   .st-badge--neutral {
@@ -49,7 +55,10 @@
   }
 
   .st-badge--info {
-    background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
-    color: var(--st-semantic-feedback-info);
+    background: var(
+      --st-component-badge-infoBackground,
+      color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white)
+    );
+    color: var(--st-component-badge-infoText, var(--st-semantic-feedback-info));
   }
 </style>

package/dist/Breadcrumb.svelte

@@ -35,6 +35,16 @@
 </nav>
 
 <style>
+  /* F10: breadcrumb typography on the root so the trail/link/separator inherit
+     the per-theme size/line-height/tracking. Defaults (inherit / normal) keep
+     the base Sent Tech render byte-identical; DSFR/Carbon pin their real metrics
+     (DSFR 12px/20px, Carbon 14px/18px/0.16px). */
+  .st-breadcrumb {
+    font-size: var(--st-component-breadcrumb-fontSize, inherit);
+    letter-spacing: var(--st-component-breadcrumb-letterSpacing, normal);
+    line-height: var(--st-component-breadcrumb-lineHeight, normal);
+  }
+
   .st-breadcrumb ol {
     align-items: center;
     display: flex;
@@ -58,7 +68,7 @@
 
   .st-breadcrumb [aria-current="page"] {
     color: var(--st-component-breadcrumb-currentText, var(--st-semantic-text-primary));
-    font-weight: 600;
+    font-weight: var(--st-component-breadcrumb-currentWeight, 600);
   }
 
   .st-breadcrumb__separator {

package/dist/Button.svelte

@@ -97,10 +97,15 @@
     color: var(--st-component-button-primaryText, var(--st-semantic-action-primaryText));
   }
 
+  /* Secondary (G1): the surface is per-theme. Base/Carbon = filled neutral with
+     a subtle stroke; DSFR « Bouton secondaire » = transparent fill + a 1px Bleu
+     France border + Bleu France text (outlined, not a light-blue fill). The
+     border colour reads its own component token so a theme can paint it Bleu
+     France; the fallback (--st-semantic-border-subtle) keeps the base render. */
   .st-button--secondary {
     background: var(--st-component-button-secondaryBackground, var(--st-semantic-action-secondary));
     color: var(--st-component-button-secondaryText, var(--st-semantic-action-secondaryText));
-    border-color: var(--st-semantic-border-subtle);
+    border-color: var(--st-component-button-secondaryBorder, var(--st-semantic-border-subtle));
   }
 
   /* Anatomy v1.1.0: hover bg sourced from states.hover.bg (= primaryHover).
@@ -109,8 +114,12 @@
     background: var(--st-component-button-anatomy-states-hover-bg, var(--st-semantic-action-primary));
   }
 
+  /* Secondary hover (G1): a per-theme hover surface — DSFR puts a LIGHT Bleu
+     France fill on its otherwise-transparent outlined button. The component
+     token falls back to the base secondary hover surface so Sent Tech is
+     unchanged. */
   .st-button--secondary:not(:disabled):hover {
-    background: var(--st-semantic-action-secondaryHover, var(--st-semantic-action-secondary));
+    background: var(--st-component-button-secondaryHoverBackground, var(--st-semantic-action-secondaryHover, var(--st-semantic-action-secondary)));
   }
 
   .st-button--ghost {

package/dist/Checkbox.svelte

@@ -9,7 +9,7 @@
   };
 
   let { label, helperText, invalid = false, class: className, ...rest }: CheckboxProps = $props();
-  const classes = () => ["st-choice", className].filter(Boolean).join(" ");
+  const classes = () => ["st-choice", "st-choice--checkbox", className].filter(Boolean).join(" ");
 </script>
 
 <label class={classes()}>
@@ -69,7 +69,12 @@
   }
 
   .st-choice__label {
-    font-size: 0.9375rem;
+    /* P-D: label typography per theme (base = 15px / normal / inherited colour).
+       The checked control colour + focus stay on the native input above. */
+    color: var(--st-component-selection-choiceLabelColor, inherit);
+    font-size: var(--st-component-selection-choiceLabelFontSize, 0.9375rem);
+    line-height: var(--st-component-selection-choiceLabelLineHeight, normal);
+    letter-spacing: var(--st-component-selection-choiceLabelLetterSpacing, normal);
   }
 
   .st-choice__help {