@sentropic/design-system-tokens 0.10.0 → 0.10.2

package/dist/component.js

@@ -26,7 +26,10 @@ const FALLBACK = {
     focus: { strategy: "outline", width: "2px", offset: "2px", color: "var(--st-semantic-border-interactive)", inset: "0" },
     // Field style fallback = boxed outline (base Sent Tech). underlineColor /
     // underlineWidth are inert for outline; they only drive filled-underline.
-    field: { style: "outline", fillBg: "", underlineColor: "", underlineWidth: "1px" }
+    // radiusTop "" = inherit the theme's shape radius (resolved in fieldOf).
+    // v1.4.0: selectAppearance "auto" (native arrow, base unchanged), no chevron,
+    // and the prior 2rem right arrow gap.
+    field: { style: "outline", fillBg: "", underlineColor: "", underlineWidth: "1px", radiusTop: "", selectAppearance: "auto", selectChevron: "none", selectPaddingRight: "2rem" }
 };
 function densityOf(f, size) {
     const base = FALLBACK.density[size];
@@ -40,6 +43,305 @@ function densityOf(f, size) {
         fontSize: themed.fontSize ?? base.fontSize
     };
 }
+/**
+ * Button density (F9): the shared control density for `size`, overlaid with any
+ * BUTTON-specific override (`buttonDensity`). Adds an optional `paddingInlineEnd`
+ * leaf so a button can be asymmetric (Carbon's large trailing gutter) without
+ * touching the shared density the 100%-fidelity fields read. When the theme omits
+ * `buttonDensity` (base/DSFR), this is identical to `densityOf` → no change, and
+ * `paddingInlineEnd` mirrors `paddingInline` (symmetric).
+ */
+function buttonDensityOf(f, size) {
+    const base = densityOf(f, size);
+    const override = f.buttonDensity?.[size] ?? {};
+    const paddingInline = override.paddingInline ?? base.paddingInline;
+    return {
+        controlHeight: override.controlHeight ?? base.controlHeight,
+        paddingBlock: override.paddingBlock ?? base.paddingBlock,
+        paddingInline,
+        gap: override.gap ?? base.gap,
+        minWidth: override.minWidth ?? base.minWidth,
+        fontSize: override.fontSize ?? base.fontSize,
+        // Trailing inline padding: an explicit asymmetric value (Carbon) or = paddingInline.
+        paddingInlineEnd: override.paddingInlineEnd ?? paddingInline
+    };
+}
+/**
+ * Tabs ACTIVE-tab resolution (F7/F8). Resolves the per-theme selected-tab
+ * primitive into a flat, CSS-ready set the Tabs component consumes verbatim.
+ * Every leaf DEFAULTS to the prior base render (12px/4px padding, inherited
+ * font-size, control weight/line-height, transparent active bg, primary text,
+ * BOTTOM indicator) so the base Sent Tech tab is byte-identical; DSFR / Carbon
+ * override the real selected-tab metrics. `indicatorSide` resolves into two
+ * border-width channels so a theme can put its accent on the top edge (DSFR,
+ * which then has NO bottom border) or the bottom edge (base / Carbon).
+ */
+function tabsOf(f, controlTypography, indicatorWidth, indicatorColor, activeTextDefault) {
+    const t = f.tabs ?? {};
+    const indicatorSide = t.indicatorSide ?? "bottom";
+    const indicatorMode = t.indicatorMode ?? "border";
+    // The indicator lives on ONE edge; the opposite edge collapses to 0 so the
+    // active tab matches the reference (DSFR active = border-bottom 0 / top accent).
+    const onTop = indicatorSide === "top";
+    // "shadow" mode draws the accent as an inset box-shadow so BOTH border sides
+    // stay 0 (DSFR, whose real accent is a background-image filet, not a border).
+    // "border" mode keeps the real per-side border (base / Carbon) and no shadow.
+    const isShadow = indicatorMode === "shadow";
+    const shadowOffset = onTop ? indicatorWidth : `-${indicatorWidth}`;
+    return {
+        activeText: t.activeText || activeTextDefault,
+        activeBackground: t.activeBackground || "transparent",
+        // G2: resting-tab fill. Default "transparent" (base/Carbon unchanged); DSFR
+        // sets a light grey-blue fill so the white active tab reads as raised.
+        inactiveBackground: t.inactiveBackground || "transparent",
+        activeWeight: t.activeWeight ?? controlTypography.weight,
+        paddingBlock: t.paddingBlock ?? "0.75rem",
+        paddingInline: t.paddingInline ?? "0.25rem",
+        fontSize: t.fontSize ?? "inherit",
+        lineHeight: t.lineHeight ?? controlTypography.lineHeight,
+        indicatorSide,
+        activeBorderTopWidth: isShadow ? "0" : onTop ? indicatorWidth : "0",
+        activeBorderBottomWidth: isShadow ? "0" : onTop ? "0" : indicatorWidth,
+        activeShadow: isShadow ? `inset 0 ${shadowOffset} 0 0 ${indicatorColor}` : "none"
+    };
+}
+/**
+ * Button SECONDARY-variant resolution (G1). Resolves the per-theme secondary
+ * button surface into a flat, CSS-ready set the Button component consumes
+ * verbatim (background / border colour / hover background). Every leaf DEFAULTS
+ * to the prior base render (filled `action.secondary`, `border.subtle` stroke,
+ * `action.secondaryHover` hover) so the base Sent Tech secondary button is
+ * byte-identical; DSFR overrides them to render its OUTLINED secondary button
+ * (transparent fill + Bleu France border + light fill on hover).
+ */
+function buttonSecondaryOf(semantic, f) {
+    const b = f.buttonSecondary ?? {};
+    return {
+        background: b.background || semantic.action.secondary,
+        border: b.border || semantic.border.subtle,
+        hoverBackground: b.hoverBackground || semantic.action.secondaryHover || semantic.action.secondary
+    };
+}
+/**
+ * Pagination resolution (F10). Resolves the per-theme pagination primitive into
+ * a flat, CSS-ready set the Pagination component consumes verbatim. Every leaf
+ * DEFAULTS to the prior base render (1px subtle stroke, radius.md, 0 block /
+ * 12px inline padding, 36px min size, filled action.primary active page,
+ * inherited font metrics) so the base Sent Tech pagination is byte-identical.
+ * DSFR / Carbon override the real active-page metrics.
+ */
+function paginationOf(semantic, f, thin, radiusMd) {
+    const p = f.pagination ?? {};
+    const border = p.border || semantic.border.subtle;
+    const borderWidth = p.borderWidth ?? thin;
+    return {
+        background: p.background || semantic.surface.default,
+        border,
+        borderWidth,
+        text: p.text || semantic.text.primary,
+        radius: p.radius ?? radiusMd,
+        activeBackground: p.activeBackground || semantic.action.primary,
+        activeText: p.activeText || semantic.action.primaryText,
+        // The active page can drop its border (DSFR/Carbon active page has none);
+        // default = the resting page border so the base render is unchanged.
+        activeBorder: p.activeBorder || border,
+        activeBorderWidth: p.activeBorderWidth ?? borderWidth,
+        activeWeight: p.activeWeight ?? "inherit",
+        disabledText: p.disabledText || semantic.text.muted,
+        paddingBlock: p.paddingBlock ?? "0",
+        paddingInline: p.paddingInline ?? "0.75rem",
+        minSize: p.minSize ?? "2.25rem",
+        fontSize: p.fontSize ?? "inherit",
+        lineHeight: p.lineHeight ?? "normal",
+        letterSpacing: p.letterSpacing ?? "normal"
+    };
+}
+/**
+ * Breadcrumb resolution (F10). Resolves the per-theme breadcrumb primitive into
+ * a flat set the Breadcrumb component consumes verbatim. Every leaf DEFAULTS to
+ * the prior base render (link = text.link, no explicit font metrics → inherited
+ * 16px / normal, current 600 weight on the current page). DSFR / Carbon pin the
+ * real breadcrumb link colour + typography.
+ */
+function breadcrumbOf(semantic, f) {
+    const b = f.breadcrumb ?? {};
+    return {
+        text: b.text || semantic.text.secondary,
+        linkText: b.linkText || semantic.text.link,
+        currentText: b.currentText || semantic.text.primary,
+        separator: b.separator || semantic.text.muted,
+        fontSize: b.fontSize ?? "inherit",
+        lineHeight: b.lineHeight ?? "normal",
+        letterSpacing: b.letterSpacing ?? "normal",
+        currentWeight: b.currentWeight ?? "600"
+    };
+}
+/**
+ * Alert resolution (P-B). Resolves the per-theme alert primitive into a flat,
+ * CSS-ready set the Alert component consumes verbatim. Every leaf DEFAULTS to the
+ * prior base render (surface.raised fill, 1px subtle box on top/right/bottom, a
+ * 4px left accent edge, 16px padding all sides, inherited font / `normal`
+ * line-height) so the base Sent Tech alert is byte-identical. DSFR drops the box
+ * + fill (accent becomes a `::before` filet → left border 0); Carbon paints a
+ * dark banner with a 3px coloured left bar (a real border).
+ */
+function alertOf(semantic, f, thin, borderStyle) {
+    const a = f.alert ?? {};
+    // The base box border = 1px subtle on top/right/bottom (the left edge is the
+    // accent, sized by accentWidth and coloured per severity by the component).
+    const box = `${thin} ${borderStyle} ${semantic.border.subtle}`;
+    return {
+        background: a.background || semantic.surface.raised,
+        text: a.text || semantic.text.primary,
+        borderTop: a.borderTop || box,
+        borderRight: a.borderRight || box,
+        borderBottom: a.borderBottom || box,
+        accentWidth: a.accentWidth ?? "0.25rem", // 4px (current)
+        filetWidth: a.filetWidth ?? "0", // no filet (base/Carbon use a real left border)
+        paddingTop: a.paddingTop ?? "1rem",
+        paddingRight: a.paddingRight ?? "1rem",
+        paddingBottom: a.paddingBottom ?? "1rem",
+        paddingLeft: a.paddingLeft ?? "1rem",
+        fontSize: a.fontSize ?? "inherit",
+        lineHeight: a.lineHeight ?? "normal",
+        letterSpacing: a.letterSpacing ?? "normal",
+        accentInfo: a.accentInfo || semantic.feedback.info,
+        accentSuccess: a.accentSuccess || semantic.feedback.success,
+        accentWarning: a.accentWarning || semantic.feedback.warning,
+        accentError: a.accentError || semantic.feedback.error
+    };
+}
+/**
+ * Accordion resolution (P-B). Resolves the per-theme accordion-trigger primitive
+ * into a flat set the Accordion component consumes verbatim. Every leaf DEFAULTS
+ * to the prior base render (14px block / 8px inline padding, inherited font-size,
+ * weight 600, `normal` line-height, primary text) so the base Sent Tech accordion
+ * is byte-identical. DSFR / Carbon pin the real header metrics.
+ */
+function accordionOf(semantic, f) {
+    const a = f.accordion ?? {};
+    return {
+        text: a.text || semantic.text.primary,
+        paddingBlock: a.paddingBlock ?? "0.875rem", // 14px (current)
+        paddingInline: a.paddingInline ?? "0.5rem", // 8px (current)
+        fontSize: a.fontSize ?? "inherit",
+        fontWeight: a.fontWeight ?? "600",
+        lineHeight: a.lineHeight ?? "normal"
+    };
+}
+/**
+ * Tag resolution (P-C). Resolves the per-theme tag primitive into a flat,
+ * CSS-ready set the Tag component consumes verbatim. Every leaf DEFAULTS to the
+ * prior base render (pill radius 999px, 4px/10px padding, 12px font, weight 600,
+ * line-height 1, no transform, no min-height, NEUTRAL tone = surface.subtle fill
+ * + text.secondary text) so the base Sent Tech tag is byte-identical. DSFR /
+ * Carbon override the real `.fr-tag` / `.bx--tag` metrics + neutral colours.
+ */
+function tagOf(semantic, f) {
+    const t = f.tag ?? {};
+    return {
+        radius: t.radius ?? "999px",
+        paddingBlock: t.paddingBlock ?? "0.25rem", // 4px (current md)
+        paddingInline: t.paddingInline ?? "0.625rem", // 10px (current md)
+        fontSize: t.fontSize ?? "0.75rem", // 12px (current md)
+        fontWeight: t.fontWeight ?? "600",
+        lineHeight: t.lineHeight ?? "1",
+        letterSpacing: t.letterSpacing ?? "normal",
+        textTransform: t.textTransform ?? "none",
+        minHeight: t.minHeight ?? "0",
+        neutralBackground: t.neutralBackground || semantic.surface.subtle,
+        neutralText: t.neutralText || semantic.text.secondary
+    };
+}
+/**
+ * Badge resolution (P-C). Resolves the per-theme badge primitive into a flat,
+ * CSS-ready set the Badge component consumes verbatim. Every leaf DEFAULTS to
+ * the prior base render (pill radius 999px, 4px/8px padding, 12px font, weight
+ * 650, line-height 1, no transform, no min-height; tone colours stay the per-tone
+ * feedback mix) so the base Sent Tech badge is byte-identical. DSFR overrides the
+ * real `.fr-badge` metrics + recolours the INFO tone (the bench-rendered one) to
+ * the measured grey badge.
+ */
+function badgeOf(semantic, f) {
+    const b = f.badge ?? {};
+    return {
+        radius: b.radius ?? "999px",
+        paddingBlock: b.paddingBlock ?? "0.25rem", // 4px (current)
+        paddingInline: b.paddingInline ?? "0.5rem", // 8px (current)
+        fontSize: b.fontSize ?? "0.75rem", // 12px (current)
+        fontWeight: b.fontWeight ?? "650",
+        lineHeight: b.lineHeight ?? "1",
+        letterSpacing: b.letterSpacing ?? "normal",
+        textTransform: b.textTransform ?? "none",
+        minHeight: b.minHeight ?? "0",
+        // Default INFO fill reproduces the current `color-mix(... feedback.info 14%,
+        // white)`; a theme can replace it with a flat measured colour.
+        infoBackground: b.infoBackground || `color-mix(in srgb, ${semantic.feedback.info} 14%, white)`,
+        infoText: b.infoText || semantic.feedback.info
+    };
+}
+/**
+ * Choice (Checkbox/Radio) LABEL resolution (P-D). Resolves the per-theme label
+ * typography into a flat, CSS-ready set the `.st-choice__label` consumes
+ * verbatim. Every leaf DEFAULTS to the prior base render (15px font, `normal`
+ * line-height + letter-spacing, primary text) so the base Sent Tech
+ * checkbox/radio is byte-identical. `radioLineHeight` defaults to the checkbox
+ * line-height (single value) so a theme that does not split them stays
+ * consistent; Carbon splits 18px (checkbox) / 20px (radio).
+ */
+function choiceOf(semantic, f) {
+    const c = f.choice ?? {};
+    const labelLineHeight = c.labelLineHeight ?? "normal";
+    return {
+        labelFontSize: c.labelFontSize ?? "0.9375rem", // 15px (current)
+        labelLineHeight,
+        radioLineHeight: c.radioLineHeight ?? labelLineHeight,
+        labelLetterSpacing: c.labelLetterSpacing ?? "normal",
+        labelColor: c.labelColor || semantic.text.primary
+    };
+}
+/**
+ * Search FIELD resolution (P-D). Resolves the per-theme search-box padding +
+ * input typography into a flat set the `.st-search` consumes verbatim. Every
+ * leaf DEFAULTS to the prior base render (0 padding on the wrapper, inherited
+ * 16px / `normal` typography) so the base Sent Tech search is byte-identical.
+ * The field box (fill / borders / radius) is the shared field anatomy, unchanged.
+ */
+function searchOf(f) {
+    const s = f.search ?? {};
+    return {
+        paddingBlock: s.paddingBlock ?? "0",
+        paddingInline: s.paddingInline ?? "0",
+        fontSize: s.fontSize ?? "1rem", // 16px (current inherited)
+        lineHeight: s.lineHeight ?? "normal",
+        letterSpacing: s.letterSpacing ?? "normal"
+    };
+}
+/**
+ * Toggle / Switch resolution (P-D). Resolves the per-theme track geometry +
+ * colours + label typography into a flat set the Toggle/Switch components
+ * consume verbatim. Every leaf DEFAULTS to the prior base render (pill radius
+ * 999px, 2px inner padding, 36×20 md track, 16px md thumb, border.strong resting
+ * track, action.primary checked track, surface.default thumb, inherited `normal`
+ * typography, primary text) so the base Sent Tech toggle is byte-identical.
+ */
+function toggleOf(semantic, f) {
+    const t = f.toggle ?? {};
+    return {
+        trackRadius: t.trackRadius ?? "999px",
+        trackPadding: t.trackPadding ?? "0.125rem", // 2px (current)
+        trackWidth: t.trackWidth ?? "2.25rem", // 36px (current md)
+        trackHeight: t.trackHeight ?? "1.25rem", // 20px (current md)
+        thumbSize: t.thumbSize ?? "1rem", // 16px (current md)
+        trackColor: t.trackColor || semantic.border.strong,
+        trackCheckedColor: t.trackCheckedColor || semantic.action.primary,
+        thumbColor: t.thumbColor || semantic.surface.default,
+        fontSize: t.fontSize ?? "inherit",
+        lineHeight: t.lineHeight ?? "normal",
+        letterSpacing: t.letterSpacing ?? "normal",
+        textColor: t.textColor || semantic.text.primary
+    };
+}
 function typographyOf(f, role) {
     // Widen to TypographyAnatomy so the optional textDecorationHover leaf is
     // readable across all roles (only `link` carries it in the FALLBACK literal).
@@ -102,25 +404,79 @@ function focusOf(f) {
  *   borders all = `<borderWidth.thin> solid <border.subtle>`. This reproduces
  *   the existing boxed input EXACTLY → no Sent Tech regression.
  * - `filled-underline` (DSFR / Carbon): `fillBg` = the theme's field fill tone,
- *   top/right/left = `none`, only `borderBottom` = `<underlineWidth> solid
- *   <underlineColor>`. This is what makes DSFR/Carbon inputs faithful (filled +
- *   bottom rule only) instead of a boxed encadré.
+ *   top/right/left = `none`, the bottom rule is the only stroke. HOW the bottom
+ *   rule is drawn depends on the theme's real technique:
+ *     · DSFR (`underlineAsShadow: true`) draws it as a `box-shadow inset` (its
+ *       real CSS), so `borderBottom` is `none` and the rule adds no box height.
+ *     · Carbon (default) genuinely uses a real `border-bottom: 1px solid` — so
+ *       we keep the geometric `borderBottom` and leave `underline` = `none` to
+ *       stay pixel-identical to the official `.bx--text-input`.
+ *
+ * v1.3.0 (additive): `radiusTop` rounds only the field's TOP corners (defaults
+ * to the theme's `shapeRadius` so a boxed field stays uniform — no regression);
+ * `underline` carries the filled-underline bottom rule as an inset box-shadow
+ * when `underlineAsShadow` is set; `focusShadow` composes it with the focus ring.
  */
-function fieldOf(semantic, f, bw, borderStyle) {
+function fieldOf(semantic, f, bw, borderStyle, shapeRadius, focusBoxShadow) {
     const themed = f.field ?? {};
     const style = (themed.style ?? FALLBACK.field.style);
     const thin = bw.thin ?? "1px";
+    // v1.4.0 (F5/F9) — native <select> rendering. These are independent of the
+    // outline/filled-underline branch, so resolve them once and spread into each
+    // returned FieldAnatomy. selectAppearance "auto" keeps the base native arrow
+    // (and its UA-forced `line-height: normal`); "none" lets the anatomy
+    // line-height take effect, the chevron then drawn by selectChevron.
+    const selectAppearance = themed.selectAppearance ?? FALLBACK.field.selectAppearance;
+    const selectChevron = themed.selectChevron ?? FALLBACK.field.selectChevron;
+    const selectPaddingRight = themed.selectPaddingRight ?? FALLBACK.field.selectPaddingRight;
+    const selectLeaves = { selectAppearance, selectChevron, selectPaddingRight };
+    // Top corners inherit the theme's shape radius unless the theme rounds them
+    // explicitly (DSFR field = 4px top). Bottom corners always keep shapeRadius.
+    const radiusTop = themed.radiusTop || shapeRadius;
+    // Compose the field focus box-shadow so the resting underline is never lost
+    // incoherently: an outline-strategy theme (focusBoxShadow === "none") keeps
+    // the underline; an inset/ring theme stacks its ring + the underline.
+    const composeFocus = (underline) => {
+        const ring = focusBoxShadow && focusBoxShadow !== "none" ? focusBoxShadow : "";
+        if (underline === "none")
+            return ring || "none";
+        if (!ring)
+            return underline; // outline theme: keep the underline at focus
+        return `${ring}, ${underline}`; // inset/ring theme: ring + underline
+    };
     if (style === "filled-underline") {
         const fillBg = themed.fillBg || semantic.surface.subtle;
         const underlineColor = themed.underlineColor || semantic.border.strong;
         const underlineWidth = themed.underlineWidth || thin;
+        // DSFR draws the rule as an inset box-shadow (its real technique, cf. rule
+        // `underline-hardcoded-border`); Carbon keeps a real geometric border-bottom
+        // (its real technique) so it stays pixel-identical to `.bx--text-input`.
+        if (themed.underlineMode === "shadow") {
+            const underline = `inset 0 -${underlineWidth} 0 0 ${underlineColor}`;
+            return {
+                style,
+                fillBg,
+                borderTop: "none",
+                borderRight: "none",
+                borderBottom: "none",
+                borderLeft: "none",
+                radiusTop,
+                underline,
+                focusShadow: composeFocus(underline),
+                ...selectLeaves
+            };
+        }
         return {
             style,
             fillBg,
             borderTop: "none",
             borderRight: "none",
             borderBottom: `${underlineWidth} ${borderStyle} ${underlineColor}`,
-            borderLeft: "none"
+            borderLeft: "none",
+            radiusTop,
+            underline: "none",
+            focusShadow: composeFocus("none"),
+            ...selectLeaves
         };
     }
     // outline (default): boxed, 4 equal borders — identical to the prior look.
@@ -132,7 +488,11 @@ function fieldOf(semantic, f, bw, borderStyle) {
         borderTop: border,
         borderRight: border,
         borderBottom: border,
-        borderLeft: border
+        borderLeft: border,
+        radiusTop,
+        underline: "none",
+        focusShadow: composeFocus("none"),
+        ...selectLeaves
     };
 }
 /**
@@ -154,7 +514,10 @@ export function createComponent(semantic, foundation) {
     // foundation (radius/density/typography/focus) → the brand reaches anatomy.
     const buttonAnatomy = {
         shape: { radius: foundation.radius.md, borderWidth: bw.thin, borderStyle },
-        density: { sm: densityOf(foundation, "sm"), md: densityOf(foundation, "md"), lg: densityOf(foundation, "lg") },
+        // F9: button-specific density (shared control density + optional button-only
+        // override) so Carbon's tall, asymmetric primary button doesn't regress the
+        // fields that share the control density. Base/DSFR get the shared density.
+        density: { sm: buttonDensityOf(foundation, "sm"), md: buttonDensityOf(foundation, "md"), lg: buttonDensityOf(foundation, "lg") },
         typography: typographyOf(foundation, "control"),
         focus,
         icon: { size: icon.md, gap: densityOf(foundation, "md").gap },
@@ -172,7 +535,9 @@ export function createComponent(semantic, foundation) {
         typography: typographyOf(foundation, "field"),
         focus,
         // Field style (v1.2.0): outline (boxed, base) vs filled-underline (DSFR/Carbon).
-        field: fieldOf(semantic, foundation, bw, borderStyle),
+        // v1.3.0: radiusTop defaults to the field's own shape radius (radius.md);
+        // the underline is an inset box-shadow, composed with the focus ring.
+        field: fieldOf(semantic, foundation, bw, borderStyle, foundation.radius.md, focus.boxShadow),
         states: {
             hover: { border: semantic.border.strong },
             focus: { border: semantic.border.interactive },
@@ -193,30 +558,77 @@ export function createComponent(semantic, foundation) {
             disabled: { text: semantic.text.muted, decoration: "none", opacity: disabledOpacity }
         }
     };
+    // Card surface (additive): borderWidth defaults to the base `thin` stroke so
+    // Sent Tech is unchanged; DSFR/Carbon set it to 0 (their cards/tiles have no
+    // border). The fill defaults to surface.raised (base), Carbon overrides it to
+    // its $layer-01 tone via `card.background`.
+    const cardBorderWidth = foundation.card?.borderWidth ?? bw.thin;
+    const cardBackground = foundation.card?.background || semantic.surface.raised;
+    // F5 (additive): the card body typography. The base `.st-card` carries NO
+    // explicit font-size / line-height / letter-spacing, so the defaults here
+    // REPRODUCE that exact render (inherit / normal / normal). DSFR/Carbon pin
+    // their real tile body metrics so the card text matches the measured
+    // reference instead of `normal`. Family/weight stay on the field role (no
+    // visible change — the card already inherits the brand sans + 400).
+    const cardTypographyBase = typographyOf(foundation, "field");
+    const cardTypography = {
+        ...cardTypographyBase,
+        size: foundation.card?.fontSize ?? "inherit",
+        lineHeight: foundation.card?.lineHeight ?? "normal",
+        letterSpacing: foundation.card?.letterSpacing ?? "normal"
+    };
     const cardAnatomy = {
-        shape: { radius: foundation.radius.lg, borderWidth: bw.thin, borderStyle },
-        typography: typographyOf(foundation, "field"),
+        shape: { radius: foundation.radius.lg, borderWidth: cardBorderWidth, borderStyle },
+        typography: cardTypography,
         focus,
         states: {
             hover: { transform: "translateY(-1px)" }
         }
     };
+    const tabsControlTypography = typographyOf(foundation, "control");
     const tabsAnatomy = {
         shape: { radius: foundation.radius.none ?? "0", borderWidth: bw.thin, borderStyle },
         density: { md: densityOf(foundation, "md") },
-        typography: typographyOf(foundation, "control"),
+        typography: tabsControlTypography,
         focus,
         states: {
             hover: { text: semantic.text.primary },
             disabled: { opacity: disabledOpacity }
         }
     };
+    // F7/F8 — active-tab metrics (additive, per-theme; base render unchanged).
+    // The indicator width is the tab's stroke width (thin); `tabsOf` resolves it
+    // onto the top edge (DSFR) or the bottom edge (base/Carbon), as a real border
+    // (base/Carbon) or an inset box-shadow accent (DSFR).
+    const tabsResolved = tabsOf(foundation, tabsControlTypography, bw.thin, semantic.action.primary, semantic.text.primary);
+    // G1 — secondary button surface (per theme; base render unchanged). DSFR
+    // overrides it to a transparent fill + Bleu France border + text; base/Carbon
+    // keep the filled neutral default.
+    const buttonSecondary = buttonSecondaryOf(semantic, foundation);
+    // F10 — Pagination / Breadcrumb anatomy (per theme; base render unchanged).
+    const paginationResolved = paginationOf(semantic, foundation, bw.thin, foundation.radius.md);
+    const breadcrumbResolved = breadcrumbOf(semantic, foundation);
+    // P-B — Alert / Accordion anatomy (per theme; base render unchanged).
+    const alertResolved = alertOf(semantic, foundation, bw.thin, borderStyle);
+    const accordionResolved = accordionOf(semantic, foundation);
+    // P-C — Tag / Badge anatomy (per theme; base render unchanged).
+    const tagResolved = tagOf(semantic, foundation);
+    const badgeResolved = badgeOf(semantic, foundation);
+    // P-D — Choice (Checkbox/Radio) / Search / Toggle anatomy (per theme; base
+    // render unchanged via the resolver defaults).
+    const choiceResolved = choiceOf(semantic, foundation);
+    const searchResolved = searchOf(foundation);
+    const toggleResolved = toggleOf(semantic, foundation);
     return {
         button: {
             radius: foundation.radius.md,
             primaryBackground: semantic.action.primary,
             primaryText: semantic.action.primaryText,
-            secondaryBackground: semantic.action.secondary,
+            // G1: the secondary surface is resolved per theme (transparent + bordered
+            // for DSFR's outlined secondary; filled neutral for base/Carbon).
+            secondaryBackground: buttonSecondary.background,
+            secondaryBorder: buttonSecondary.border,
+            secondaryHoverBackground: buttonSecondary.hoverBackground,
             secondaryText: semantic.action.secondaryText,
             anatomy: buttonAnatomy
         },
@@ -228,17 +640,74 @@ export function createComponent(semantic, foundation) {
             anatomy: linkAnatomy
         },
         alert: {
-            background: semantic.surface.raised,
-            text: semantic.text.primary,
+            // Existing leaves keep their names (consumers/docs unchanged); background
+            // and text now resolve through `alertOf` (identical defaults = unchanged base).
+            background: alertResolved.background,
+            text: alertResolved.text,
             border: semantic.border.subtle,
-            infoBorder: semantic.feedback.info,
-            successBorder: semantic.feedback.success,
-            warningBorder: semantic.feedback.warning,
-            errorBorder: semantic.feedback.error,
-            radius: foundation.radius.lg
+            // Per-severity accent colours now resolve through `alertOf` (default = the
+            // matching feedback role → base unchanged; Carbon overrides accentInfo).
+            infoBorder: alertResolved.accentInfo,
+            successBorder: alertResolved.accentSuccess,
+            warningBorder: alertResolved.accentWarning,
+            errorBorder: alertResolved.accentError,
+            radius: foundation.radius.lg,
+            // P-B additive leaves — per-theme alert anatomy (base = unchanged).
+            borderTop: alertResolved.borderTop,
+            borderRight: alertResolved.borderRight,
+            borderBottom: alertResolved.borderBottom,
+            // Left accent: a real left border of `accentWidth` (base/Carbon) OR a
+            // `::before` filet of `filetWidth` drawn inside the box (DSFR) so the
+            // measured left border stays 0. Both coloured per severity by the component.
+            accentWidth: alertResolved.accentWidth,
+            filetWidth: alertResolved.filetWidth,
+            paddingTop: alertResolved.paddingTop,
+            paddingRight: alertResolved.paddingRight,
+            paddingBottom: alertResolved.paddingBottom,
+            paddingLeft: alertResolved.paddingLeft,
+            fontSize: alertResolved.fontSize,
+            lineHeight: alertResolved.lineHeight,
+            letterSpacing: alertResolved.letterSpacing
+        },
+        accordion: {
+            // P-B — per-theme accordion-trigger anatomy (base = unchanged).
+            text: accordionResolved.text,
+            paddingBlock: accordionResolved.paddingBlock,
+            paddingInline: accordionResolved.paddingInline,
+            fontSize: accordionResolved.fontSize,
+            fontWeight: accordionResolved.fontWeight,
+            lineHeight: accordionResolved.lineHeight
+        },
+        tag: {
+            // P-C — per-theme tag anatomy (base = unchanged via resolver defaults).
+            radius: tagResolved.radius,
+            paddingBlock: tagResolved.paddingBlock,
+            paddingInline: tagResolved.paddingInline,
+            fontSize: tagResolved.fontSize,
+            fontWeight: tagResolved.fontWeight,
+            lineHeight: tagResolved.lineHeight,
+            letterSpacing: tagResolved.letterSpacing,
+            textTransform: tagResolved.textTransform,
+            minHeight: tagResolved.minHeight,
+            neutralBackground: tagResolved.neutralBackground,
+            neutralText: tagResolved.neutralText
+        },
+        badge: {
+            // P-C — per-theme badge anatomy (base = unchanged via resolver defaults).
+            radius: badgeResolved.radius,
+            paddingBlock: badgeResolved.paddingBlock,
+            paddingInline: badgeResolved.paddingInline,
+            fontSize: badgeResolved.fontSize,
+            fontWeight: badgeResolved.fontWeight,
+            lineHeight: badgeResolved.lineHeight,
+            letterSpacing: badgeResolved.letterSpacing,
+            textTransform: badgeResolved.textTransform,
+            minHeight: badgeResolved.minHeight,
+            infoBackground: badgeResolved.infoBackground,
+            infoText: badgeResolved.infoText
         },
         card: {
-            background: semantic.surface.raised,
+            background: cardBackground,
             border: semantic.border.subtle,
             radius: foundation.radius.lg,
             shadow: foundation.shadow.subtle,
@@ -305,9 +774,38 @@ export function createComponent(semantic, foundation) {
             checkedBackground: semantic.action.primary,
             checkedText: semantic.action.primaryText,
             border: semantic.border.subtle,
-            switchTrack: semantic.border.strong,
-            switchTrackChecked: semantic.action.primary,
-            switchThumb: semantic.surface.default
+            // Existing switch colour leaves now resolve through `toggleOf` (identical
+            // defaults = unchanged base; DSFR/Carbon set their measured track colours).
+            switchTrack: toggleResolved.trackColor,
+            switchTrackChecked: toggleResolved.trackCheckedColor,
+            switchThumb: toggleResolved.thumbColor,
+            // P-D additive — Choice (Checkbox/Radio) label typography (base = unchanged).
+            choiceLabelFontSize: choiceResolved.labelFontSize,
+            choiceLabelLineHeight: choiceResolved.labelLineHeight,
+            choiceRadioLineHeight: choiceResolved.radioLineHeight,
+            choiceLabelLetterSpacing: choiceResolved.labelLetterSpacing,
+            choiceLabelColor: choiceResolved.labelColor,
+            // P-D additive — Toggle/Switch track geometry + label typography (base =
+            // unchanged via the resolver defaults).
+            toggleTrackRadius: toggleResolved.trackRadius,
+            toggleTrackPadding: toggleResolved.trackPadding,
+            toggleTrackWidth: toggleResolved.trackWidth,
+            toggleTrackHeight: toggleResolved.trackHeight,
+            toggleThumbSize: toggleResolved.thumbSize,
+            toggleFontSize: toggleResolved.fontSize,
+            toggleLineHeight: toggleResolved.lineHeight,
+            toggleLetterSpacing: toggleResolved.letterSpacing,
+            toggleTextColor: toggleResolved.textColor
+        },
+        search: {
+            // P-D additive — Search field box padding + input typography (base =
+            // unchanged via the resolver defaults). The field box (fill/border/radius)
+            // stays the shared `control.anatomy.field` already mapped like Input.
+            paddingBlock: searchResolved.paddingBlock,
+            paddingInline: searchResolved.paddingInline,
+            fontSize: searchResolved.fontSize,
+            lineHeight: searchResolved.lineHeight,
+            letterSpacing: searchResolved.letterSpacing
         },
         overlay: {
             backdrop: semantic.surface.overlay,
@@ -367,27 +865,57 @@ export function createComponent(semantic, foundation) {
             radius: foundation.radius.lg
         },
         tabs: {
-            activeText: semantic.text.primary,
+            // F7/F8: active-tab roles/metrics resolved per theme (base render = current).
+            activeText: tabsResolved.activeText,
+            activeBackground: tabsResolved.activeBackground,
+            // G2: resting-tab fill (default transparent; DSFR = light grey-blue).
+            inactiveBackground: tabsResolved.inactiveBackground,
+            activeWeight: tabsResolved.activeWeight,
             inactiveText: semantic.text.secondary,
             border: semantic.border.subtle,
             indicator: semantic.action.primary,
             panelBackground: semantic.surface.default,
+            tabPaddingBlock: tabsResolved.paddingBlock,
+            tabPaddingInline: tabsResolved.paddingInline,
+            tabFontSize: tabsResolved.fontSize,
+            tabLineHeight: tabsResolved.lineHeight,
+            activeBorderTopWidth: tabsResolved.activeBorderTopWidth,
+            activeBorderBottomWidth: tabsResolved.activeBorderBottomWidth,
+            activeShadow: tabsResolved.activeShadow,
             anatomy: tabsAnatomy
         },
         pagination: {
-            background: semantic.surface.default,
-            border: semantic.border.subtle,
-            text: semantic.text.primary,
-            activeBackground: semantic.action.primary,
-            activeText: semantic.action.primaryText,
-            disabledText: semantic.text.muted,
-            radius: foundation.radius.md
+            // Existing leaves keep their names (consumers/docs unchanged); they now
+            // resolve through `paginationOf` (identical defaults = unchanged base).
+            background: paginationResolved.background,
+            border: paginationResolved.border,
+            text: paginationResolved.text,
+            activeBackground: paginationResolved.activeBackground,
+            activeText: paginationResolved.activeText,
+            disabledText: paginationResolved.disabledText,
+            radius: paginationResolved.radius,
+            // F10 additive leaves — per-theme active-page metrics (base = unchanged).
+            borderWidth: paginationResolved.borderWidth,
+            activeBorder: paginationResolved.activeBorder,
+            activeBorderWidth: paginationResolved.activeBorderWidth,
+            activeWeight: paginationResolved.activeWeight,
+            paddingBlock: paginationResolved.paddingBlock,
+            paddingInline: paginationResolved.paddingInline,
+            minSize: paginationResolved.minSize,
+            fontSize: paginationResolved.fontSize,
+            lineHeight: paginationResolved.lineHeight,
+            letterSpacing: paginationResolved.letterSpacing
         },
         breadcrumb: {
-            text: semantic.text.secondary,
-            currentText: semantic.text.primary,
-            separator: semantic.text.muted,
-            linkText: semantic.text.link
+            text: breadcrumbResolved.text,
+            currentText: breadcrumbResolved.currentText,
+            separator: breadcrumbResolved.separator,
+            linkText: breadcrumbResolved.linkText,
+            // F10 additive leaves — per-theme breadcrumb typography (base = unchanged).
+            fontSize: breadcrumbResolved.fontSize,
+            lineHeight: breadcrumbResolved.lineHeight,
+            letterSpacing: breadcrumbResolved.letterSpacing,
+            currentWeight: breadcrumbResolved.currentWeight
         },
         sideNav: {
             background: semantic.surface.default,