@sentropic/design-system-svelte 0.10.0 → 0.10.2

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

@@ -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);
   }
@@ -86,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).
@@ -98,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/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

@@ -9,12 +9,11 @@
   };
 
   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()}>
   <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 {
@@ -50,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 {

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"}