@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/utils/view-model.util.test.ts

@@ -4,12 +4,15 @@ import {
   type TextContent,
   type MailingListContent,
   type ContactFormContent,
+  type ShopContent,
   type ColorItem,
+  type TextStyleDeclaration,
   type HeaderButton,
 } from '../models';
 import {
   BRAND_PAGE_TYPES,
   BUTTON_LINK_TYPE,
+  BrandPageModel,
   PageHeaderDesktop,
   PageStyles,
 } from '../models';
@@ -18,20 +21,29 @@ import {
   mapToContactFormViewModel,
   mapToImageViewModel,
   mapToMailingListViewModel,
+  mapToPageFooterViewModel,
   mapToPageHeaderViewModel,
   mapToProfileViewModel,
   mapToTextViewModel,
   mapToViewModel,
+  applyViewModelTextStyles,
+  getBrandPageViewModelFromBrandPageModel,
+  getCriticalResourceURLs,
+  resolveSaveContactTitleStyle,
 } from './view-model.util';
-import { ALIGN_CARD_CENTER } from '../constants';
+import type { BrandPageViewModel } from '../view-models';
+import {
+  ALIGN_CARD_CENTER,
+  HEADER_DISPLAY,
+  NAVIGATION_DISPLAY,
+} from '../constants';
 import * as uuid from 'uuid';
 import {
   DEFAULT_TEXT_ALIGN,
   FONT_SIZE_BODY,
   FONT_SIZE_HEADINGS,
-  FONT_SIZE_PROFILE_NAME,
-  LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
+  FALLBACK_DEFAULT_LINK_COLOR,
 } from '../constants';
 import { createInitialBannerSectionContent } from '@brand-page-maker/models';
 
@@ -58,6 +70,25 @@ const createOldProfileContent = (): ProfileContent => {
   };
 };
 
+// BP-5969 (ADR-0020): a section title's own colour lives in its RTE mark, not on the
+// style object. Tests that exercise the "fall back to the title colour" path (the
+// reCAPTCHA disclosure footnote, the social-links icon fill) must put the colour there.
+const rteTitleWithColour = (color: string): unknown => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'Title',
+          marks: [{ type: 'textStyle', attrs: { color } }],
+        },
+      ],
+    },
+  ],
+});
+
 describe('view model util', () => {
   test('mapToImageViewModel should return image view model when given an image content', () => {
     // Arrange
@@ -78,43 +109,44 @@ describe('view model util', () => {
     expect(viewModel.role).toBe(content.type);
     expect(viewModel.type).toBe('image');
   });
-  test('mapToProfileViewModel should return profile view model with default title text styles when given an old profile content', () => {
-    // Arrange
-    const pageStyles = new PageStyles();
-    const profileContent = createOldProfileContent();
-
-    // Act
-    const viewModel = mapToProfileViewModel(profileContent, pageStyles);
-
-    // Assert
-    expect(viewModel.titleStyle?.fontSize).toBe(FONT_SIZE_BODY);
-    expect(viewModel.titleStyle?.lineHeight).toBe(LINE_HEIGHT_BODY);
-  });
-
-  test('mapToProfileViewModel should return profile view model with default name text styles when given an old profile content', () => {
-    // Arrange
-    const pageStyles = new PageStyles();
-    const profileContent = createOldProfileContent();
-
-    // Act
-    const viewModel = mapToProfileViewModel(profileContent, pageStyles);
-
-    // Assert
-    expect(viewModel.nameStyle?.fontSize).toBe(FONT_SIZE_PROFILE_NAME);
-    expect(viewModel.nameStyle?.lineHeight).toBe(LINE_HEIGHT_HEADINGS);
-  });
-
-  test('mapToProfileViewModel should return profile view model with default description text styles when given an old profile content', () => {
-    // Arrange
+  // BP-5969 (R3 revision) — the profile's built-in size/line-height defaults are deleted
+  // outright, on a role or off it: an unset field draws through its role, real or a fallback
+  // (T3.1). Old field names ("default title/name/description text styles") retired with them.
+  test('profile has no built-in size', () => {
     const pageStyles = new PageStyles();
-    const profileContent = createOldProfileContent();
+    const onRoles: ProfileContent = {
+      ...createOldProfileContent(),
+      titleStyle: {
+        textAlign: DEFAULT_TEXT_ALIGN,
+        textStyleType: 'paragraph2',
+      },
+      descriptionStyle: {
+        textAlign: DEFAULT_TEXT_ALIGN,
+        textStyleType: 'paragraph2',
+      },
+      nameStyle: { textAlign: DEFAULT_TEXT_ALIGN, textStyleType: 'heading5' },
+    };
+    const noRole = createOldProfileContent();
 
-    // Act
-    const viewModel = mapToProfileViewModel(profileContent, pageStyles);
+    for (const profileContent of [onRoles, noRole]) {
+      const viewModel = mapToProfileViewModel(profileContent, pageStyles);
 
-    // Assert
-    expect(viewModel.descriptionStyle?.fontSize).toBe(FONT_SIZE_BODY);
-    expect(viewModel.descriptionStyle?.lineHeight).toBe(LINE_HEIGHT_BODY);
+      for (const key of [
+        'titleStyle',
+        'descriptionStyle',
+        'nameStyle',
+      ] as const) {
+        const style = viewModel[key] as TextStyleDeclaration;
+
+        expect(style.fontSize).toBeUndefined();
+        expect(style.lineHeight).toBeUndefined();
+      }
+    }
+
+    // The no-role fields still get a canonical fallback role (R3), not a bare `undefined`.
+    expect(
+      mapToProfileViewModel(noRole, pageStyles).titleStyle?.textStyleType,
+    ).toBeTruthy();
   });
 
   // The profile card echoes the global button style — fill, shadow AND outline — so it
@@ -233,7 +265,9 @@ describe('view model util', () => {
   // element override. `migration-21` strips that field on existing models, which
   // is what keeps published sites rendering identically; this test covers the
   // post-cascade resolver contract, and the migration suite covers the strip.
-  test('mapToTextViewModel should fall back to the global text style colour once the legacy textColor is cleared', () => {
+  // R1: page data no longer merges the role's typography in, so a fontSize the field never
+  // set itself is undefined — the fallback role's CSS var supplies it at render, not this object.
+  test('mapToTextViewModel keeps the legacy-role colour cascade; typography stays own-values-only', () => {
     // Arrange
     const pageStyles = new PageStyles();
 
@@ -269,11 +303,15 @@ describe('view model util', () => {
     );
 
     // Assert — the paragraphs style defines no colour, so this inherits.
-    expect(viewModel.textStyle?.color).toBeUndefined();
-    expect(viewModel.textStyle?.fontSize).toBe(FONT_SIZE_HEADINGS);
+    expect(
+      (viewModel.textStyle as TextStyleDeclaration)?.color,
+    ).toBeUndefined();
+    expect(
+      (viewModel.textStyle as TextStyleDeclaration)?.fontSize,
+    ).toBeUndefined();
   });
 
-  test('a legacy textColor still overrides when the text is NOT linked to a global text style', () => {
+  test('does not render an un-migrated legacy textColor sidecar', () => {
     // Arrange
     const pageStyles = new PageStyles();
 
@@ -297,8 +335,11 @@ describe('view model util', () => {
       BRAND_PAGE_TYPES.brandSite,
     );
 
-    // Assert — unlinked, so migration-21 leaves it alone and it must keep rendering.
-    expect(viewModel.textStyle?.color).toBe('#ff0000');
+    // Migration-22 folds this value into textStyle before rendering. The view model deliberately
+    // does not keep a legacy sidecar fallback alive for data that bypasses the migration gate.
+    expect(
+      (viewModel.textStyle as TextStyleDeclaration)?.color,
+    ).toBeUndefined();
   });
 
   test('Profile text alignment should not overwrite if there is an existing text alignment', () => {
@@ -345,48 +386,70 @@ describe('view model util', () => {
     test("the element's own colour wins over the global text style's", () => {
       const pageStyles = new PageStyles();
 
-      pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.paragraphs
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
 
       const viewModel = mapText(
         textContentWith({
           textStyleType: 'paragraphs',
           color: 'var(--palette-0)',
-        }),
+        } as TextStyleDeclaration),
         pageStyles,
       );
 
-      expect(viewModel.textStyle?.color).toBe('var(--palette-0)');
+      expect((viewModel.textStyle as TextStyleDeclaration)?.color).toBe(
+        'var(--palette-0)',
+      );
     });
 
-    test('typography still comes from the global text style even when the element overrides colour', () => {
+    // R1: colour keeps its own cascade; typography no longer merges the role's values in — a
+    // painter references the role for the rest (`roleTypographyStyle`/`fillRteRunTypography`).
+    test('colour still cascades from the global text style; typography does not', () => {
       const pageStyles = new PageStyles();
 
-      pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.paragraphs
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
       pageStyles.textStyles.textStyleOptions.paragraphs.style.fontSize =
         FONT_SIZE_HEADINGS;
 
       const viewModel = mapText(
-        textContentWith({ textStyleType: 'paragraphs', color: '#ff0000' }),
+        textContentWith({
+          textStyleType: 'paragraphs',
+          color: '#ff0000',
+        } as TextStyleDeclaration),
         pageStyles,
       );
 
-      expect(viewModel.textStyle?.color).toBe('#ff0000');
-      expect(viewModel.textStyle?.fontSize).toBe(FONT_SIZE_HEADINGS);
+      expect((viewModel.textStyle as TextStyleDeclaration)?.color).toBe(
+        '#ff0000',
+      );
+      expect(
+        (viewModel.textStyle as TextStyleDeclaration)?.fontSize,
+      ).toBeUndefined();
     });
 
-    // The common case: a linked element stores ONLY the link, so the cascade must
-    // reproduce exactly what rendered before Phase 1.
-    test('an element with only a link falls back to the global text style colour', () => {
+    // ADR-0020: a linked element with only the link takes NO colour from its role —
+    // it resolves to undefined and renders the page base coat by root inheritance.
+    test('an element with only a link takes no colour from its role (undefined → base coat)', () => {
       const pageStyles = new PageStyles();
 
-      pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.paragraphs
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
 
       const viewModel = mapText(
         textContentWith({ textStyleType: 'paragraphs' }),
         pageStyles,
       );
 
-      expect(viewModel.textStyle?.color).toBe('#00ff00');
+      expect(
+        (viewModel.textStyle as TextStyleDeclaration)?.color,
+      ).toBeUndefined();
     });
 
     test('no element colour and no global colour resolves to undefined (the page base coat applies by root CSS inheritance)', () => {
@@ -400,7 +463,9 @@ describe('view model util', () => {
       // Deliberately NOT '#0000ff' — the site-wide default reaches the text by
       // inheritance from the root element, not through the resolver. Seeding it
       // here would read as an element override and beat the global text style.
-      expect(viewModel.textStyle?.color).toBeUndefined();
+      expect(
+        (viewModel.textStyle as TextStyleDeclaration)?.color,
+      ).toBeUndefined();
     });
   });
 
@@ -413,11 +478,17 @@ describe('view model util', () => {
     const mapContent = (content: any, pageStyles: PageStyles): any =>
       mapToViewModel(pageStyles, BRAND_PAGE_TYPES.brandSite, {})(content);
 
-    test('testimonial section styles follow their global text style', () => {
+    test('testimonial link-only styles take no colour from their role (role colour retired)', () => {
       const pageStyles = new PageStyles();
 
-      pageStyles.textStyles.textStyleOptions.titles.style.color = '#00ff00';
-      pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.titles
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.paragraphs
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
 
       const viewModel = mapContent(
         {
@@ -431,34 +502,113 @@ describe('view model util', () => {
         pageStyles,
       );
 
-      expect(viewModel.titleStyle?.color).toBe('#00ff00');
-      expect(viewModel.nameStyle?.color).toBe('#00ff00');
-      expect(viewModel.positionStyle?.color).toBe('#00ff00');
-      expect(viewModel.testimonialStyle?.color).toBe('#00ff00');
+      // ADR-0020: role colour does not cascade — link-only fields resolve to undefined
+      // (the mapper still never pre-seeds a default that would beat that).
+      expect(viewModel.titleStyle?.color).toBeUndefined();
+      expect(viewModel.nameStyle?.color).toBeUndefined();
+      expect(viewModel.positionStyle?.color).toBeUndefined();
+      expect(viewModel.testimonialStyle?.color).toBeUndefined();
     });
 
-    test('social-links title follows its own global text style, while the icon fill takes the page base coat (paragraphs)', () => {
+    test('social-links title takes no role colour; the icon fill never follows the title colour', () => {
       const pageStyles = new PageStyles();
 
-      pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#0000ff';
-      pageStyles.textStyles.textStyleOptions.titles.style.color = '#00ff00';
+      (
+        pageStyles.textStyles.textStyleOptions.heading1
+          .style as unknown as Record<string, unknown>
+      ).color = '#00ff00';
+
+      const socialLinks = (iconFillStyles: BrandPageCssStyle): any =>
+        mapContent(
+          {
+            id: '1',
+            type: 'social-links',
+            title: rteTitleWithColour('#0000ff'),
+            titleStyle: { textStyleType: 'heading1' },
+            iconFillStyles,
+            socialLinks: [],
+          },
+          pageStyles,
+        );
+
+      // ADR-0020: heading1's role colour does not cascade → the title takes no colour.
+      expect(socialLinks({}).titleStyle?.color).toBeUndefined();
+      // The icons paint their stored fill (baked at birth / by migration-22), not the
+      // title's mark colour — recolouring the title must not repaint them.
+      expect(socialLinks({ fill: '#ff0000' }).iconFillStyles?.fill).toBe(
+        '#ff0000',
+      );
+      expect(socialLinks({}).iconFillStyles?.fill).toBeUndefined();
+    });
+
+    test('shop "no products" label takes the title colour when it has one', () => {
+      const pageStyles = new PageStyles();
 
       const viewModel = mapContent(
         {
           id: '1',
-          type: 'social-links',
-          titleStyle: { textStyleType: 'titles' },
-          socialLinks: [],
+          type: 'shop-section',
+          title: rteTitleWithColour('#0000ff'),
+          description: '',
+          successMessage: '',
+          products: [],
+          displayStyle: 'text',
+          aspectRatio: '1:1',
+          fillColor: {},
+          defaultBorderColor: {},
+          itemTextStyle: {},
+          backgroundStyle: {},
+          shopPaymentConfig: {
+            paymentConfig: {},
+            paymentOptionDisplayType: 'text',
+            paymentOptionImageType: 'none',
+            isCustomerRequestDetailsEnabled: false,
+            isShippingEnabled: false,
+          },
         },
         pageStyles,
       );
 
-      expect(viewModel.titleStyle?.color).toBe('#00ff00');
-      // `iconFillStyles` is not a CONTENT_TEXT_STYLE_PROPERTY_KEYS entry, so no
-      // resolver touches it and this seed is the only source of the icon colour.
-      // BP-5886 Phase 3: sourced from the paragraphs global style (the page base
-      // coat) now that the root default text colour is retired.
-      expect(viewModel.iconFillStyles?.fill).toBe('#0000ff');
+      expect(viewModel.noProductsColor).toBe('#0000ff');
+    });
+
+    // A cleared, all-uncoloured or legacy plain-string title has no run colour to read, so
+    // the label falls back to the title's own contrast colour — the band's, not the product
+    // tile's: a painted tile stacks below the title, not behind it.
+    test('shop "no products" label falls back to the title contrast colour when the title has none', () => {
+      const pageStyles = new PageStyles();
+
+      pageStyles.colors = [
+        { id: 'palette-0', value: '#000000', type: 'palette' }, // dark brand
+        { id: 'palette-1', value: '#ffffff', type: 'palette' }, // light brand
+      ];
+
+      const shopContent: ShopContent = {
+        id: '1',
+        type: 'shop-section',
+        title: 'Shop',
+        description: '',
+        successMessage: '',
+        products: [],
+        displayStyle: 'text',
+        aspectRatio: '1:1',
+        fillColor: { backgroundColor: 'var(--palette-1)' }, // light tile
+        defaultBorderColor: {},
+        itemTextStyle: {},
+        backgroundStyle: { backgroundColor: 'var(--palette-0)' }, // dark band
+        shopPaymentConfig: {
+          paymentOptions: [],
+          paymentOptionDisplayType: 'text',
+          paymentOptionImageType: 'auto',
+          isCustomerRequestDetailsEnabled: false,
+          isShippingEnabled: false,
+        },
+      };
+
+      const viewModel = mapContent(shopContent, pageStyles);
+
+      // Light on the dark band, not the dark-on-dark a tile-routed fallback would give.
+      expect(viewModel.noProductsColor).toBe('var(--palette-1)');
     });
   });
 
@@ -658,6 +808,294 @@ describe('view model util', () => {
       },
     );
   });
+
+  // BP-5969 (R1) — page data keeps only what a field sets itself; the painter references
+  // the role for the rest (`roleTypographyStyle`/`fillRteRunTypography`). Colour, alignment,
+  // autoscale and `textStyleType` still resolve here; the seven typography keys do not merge.
+  describe('page data carries only own typography (R1)', () => {
+    const TYPOGRAPHY_KEYS = [
+      'fontFamily',
+      'fontSize',
+      'fontWeight',
+      'fontStyle',
+      'letterSpacing',
+      'lineHeight',
+      'textDecoration',
+    ] as const;
+
+    test('page data carries only own typography', () => {
+      const pageStyles = new PageStyles();
+      const content: any = {
+        titleStyle: {
+          textStyleType: 'heading2',
+          textAlign: 'left',
+          color: '#112233',
+        },
+      };
+
+      const style = applyViewModelTextStyles(content, pageStyles)
+        .titleStyle as TextStyleDeclaration;
+
+      for (const key of TYPOGRAPHY_KEYS) {
+        expect(style[key]).toBeUndefined();
+      }
+
+      expect(style.textStyleType).toBe('heading2');
+      expect(style.textAlign).toBe('left');
+      expect(style.color).toBe('#112233');
+    });
+
+    test('page data keeps one override', () => {
+      const pageStyles = new PageStyles();
+      const content: any = {
+        titleStyle: {
+          textStyleType: 'heading2',
+          textAlign: 'left',
+          fontSize: '3em',
+        },
+      };
+
+      const style = applyViewModelTextStyles(content, pageStyles)
+        .titleStyle as TextStyleDeclaration;
+      const present = TYPOGRAPHY_KEYS.filter((key) => style[key] !== undefined);
+
+      expect(present).toEqual(['fontSize']);
+      expect(style.fontSize).toBe('3em');
+    });
+
+    // T6.3 (R6): an item already saved at fontSize: 1em keeps it — covered by the second item.
+    test('text items carry only own typography', () => {
+      const pageStyles = new PageStyles();
+      const textContent: TextContent = {
+        backgroundColor: {},
+        iconUrl: '',
+        id: '0',
+        text: 'Test text',
+        textItems: [
+          { id: 'i1', text: 'One', textStyle: { textStyleType: 'paragraph2' } },
+          {
+            id: 'i2',
+            text: 'Two',
+            textStyle: { textStyleType: 'paragraph2', fontSize: '1em' },
+          },
+        ],
+        textAlignment: {},
+        textColor: {},
+        textSize: {},
+        textStyle: {},
+        type: 'text',
+      };
+
+      const items = mapToTextViewModel(
+        textContent,
+        pageStyles,
+        BRAND_PAGE_TYPES.brandSite,
+      ).textItems as any[];
+
+      expect(items[0].textStyle.fontSize).toBeUndefined();
+      expect(items[0].textStyle.textStyleType).toBe('paragraph2');
+      expect(items[1].textStyle.fontSize).toBe('1em');
+    });
+
+    // S6 — an item with no textStyle at all threw (pickTypography/bestFitRole read it with no
+    // `?.`); it must fall back the same way an item with an empty textStyle does.
+    test('a text item with no textStyle of its own does not throw', () => {
+      const pageStyles = new PageStyles();
+      const textContent: TextContent = {
+        backgroundColor: {},
+        iconUrl: '',
+        id: '0',
+        text: 'Test text',
+        textItems: [{ id: 'i1', text: 'One' } as never],
+        textAlignment: {},
+        textColor: {},
+        textSize: {},
+        textStyle: {},
+        type: 'text',
+      };
+
+      expect(() =>
+        mapToTextViewModel(textContent, pageStyles, BRAND_PAGE_TYPES.brandSite),
+      ).not.toThrow();
+
+      const items = mapToTextViewModel(
+        textContent,
+        pageStyles,
+        BRAND_PAGE_TYPES.brandSite,
+      ).textItems as any[];
+
+      expect(items[0].textStyle.textStyleType).toBe('paragraph1');
+    });
+
+    test('text off the ten draws through its fallback role', () => {
+      const pageStyles = new PageStyles();
+
+      // A section title with no role, sized like a heading — nearest tier by default size.
+      const titleContent: any = { titleStyle: { fontSize: '3em' } };
+      const titleStyle = applyViewModelTextStyles(titleContent, pageStyles)
+        .titleStyle as TextStyleDeclaration;
+
+      expect(titleStyle.textStyleType).toBe('heading3');
+      expect(titleStyle.fontSize).toBe('3em');
+
+      // A description the same size stays on a paragraph tier: it holds body text.
+      const descriptionContent: any = { descriptionStyle: { fontSize: '3em' } };
+
+      expect(
+        (
+          applyViewModelTextStyles(descriptionContent, pageStyles)
+            .descriptionStyle as TextStyleDeclaration
+        ).textStyleType,
+      ).toBe('paragraph1');
+
+      // A paragraph linked to the retired `paragraphs` role.
+      const paraContent: any = { titleStyle: { textStyleType: 'paragraphs' } };
+
+      expect(
+        (
+          applyViewModelTextStyles(paraContent, pageStyles)
+            .titleStyle as TextStyleDeclaration
+        ).textStyleType,
+      ).toBe('paragraph1');
+
+      // A section button field with no role: every button label starts on Button text.
+      const buttonFieldContent: any = { buttonTextStyle: {} };
+
+      expect(
+        (
+          applyViewModelTextStyles(buttonFieldContent, pageStyles)
+            .buttonTextStyle as TextStyleDeclaration
+        ).textStyleType,
+      ).toBe('button');
+
+      // A text item with no role and no size falls to Paragraph 1.
+      const textContent: TextContent = {
+        backgroundColor: {},
+        iconUrl: '',
+        id: '0',
+        text: 'Test text',
+        textItems: [{ id: 'i1', text: 'One', textStyle: {} }],
+        textAlignment: {},
+        textColor: {},
+        textSize: {},
+        textStyle: {},
+        type: 'text',
+      };
+      const items = mapToTextViewModel(
+        textContent,
+        pageStyles,
+        BRAND_PAGE_TYPES.brandSite,
+      ).textItems as any[];
+
+      expect(items[0].textStyle.textStyleType).toBe('paragraph1');
+    });
+
+    // S3 — a section's own CTA (banner/booking/images) reuses the SECTION's content type when
+    // building its button view model, which `contentFieldReconnectSpec` doesn't recognise as
+    // button content; before the fix a heading-sized no-role label landed on a heading tier via
+    // `bestFitRole` instead of Button text.
+    test('a no-role banner-section button label draws through Button text, not by size', () => {
+      const pageStyles = new PageStyles();
+      const bannerContent = createInitialBannerSectionContent();
+
+      bannerContent.buttonTextStyle = { fontSize: '2em' };
+
+      const viewModel = mapToBannerSectionViewModel(
+        bannerContent,
+        pageStyles,
+        {},
+      );
+
+      expect(viewModel.buttonViewModel?.titleStyle.textStyleType).toBe(
+        'button',
+      );
+    });
+  });
+
+  // BP-5969 (R3 revision) — the renderer's built-in typography defaults are deleted outright;
+  // a field with no size/weight of its own carries none in page data, on a role or off it.
+  describe('no built-in typography defaults', () => {
+    test('mailing-list title has no built-in bold or size', () => {
+      const pageStyles = new PageStyles();
+      const contentOnRole: MailingListContent = {
+        id: 'ml-1',
+        type: 'mailing-list',
+        title: 'Subscribe',
+        buttonText: 'Go',
+        titleStyle: { textStyleType: 'heading5' } as TextStyleDeclaration,
+        buttonTextStyle: {},
+      };
+      const contentNoRole: MailingListContent = {
+        ...contentOnRole,
+        titleStyle: {} as TextStyleDeclaration,
+      };
+
+      for (const content of [contentOnRole, contentNoRole]) {
+        const style = mapToMailingListViewModel(content, pageStyles)
+          .titleStyle as TextStyleDeclaration;
+
+        expect(style.fontWeight).toBeUndefined();
+        expect(style.fontSize).toBeUndefined();
+      }
+    });
+
+    test('support-me title has no built-in bold', () => {
+      const pageStyles = new PageStyles();
+      const mapContent = (content: any): any =>
+        mapToViewModel(pageStyles, BRAND_PAGE_TYPES.brandSite, {})(content);
+      const base = {
+        id: 'sm-1',
+        type: 'support-me',
+        title: 'Support me',
+        description: '',
+        buttonText: 'Donate',
+        successMessage: '',
+        items: [],
+      };
+
+      const onRole = mapContent({
+        ...base,
+        titleStyle: { textStyleType: 'heading5' },
+      });
+      const noRole = mapContent({ ...base, titleStyle: {} });
+
+      expect(onRole.titleStyle?.fontWeight).toBeUndefined();
+      expect(noRole.titleStyle?.fontWeight).toBeUndefined();
+    });
+
+    test('text block ignores legacy style siblings', () => {
+      const pageStyles = new PageStyles();
+      const base = (textStyle: TextContent['textStyle']): TextContent => ({
+        backgroundColor: {},
+        iconUrl: '',
+        id: '0',
+        text: 'Test text',
+        textItems: [],
+        textAlignment: { textAlign: 'left' },
+        textColor: { color: '#123456' },
+        textSize: { fontSize: '1.5em', lineHeight: '1.5' },
+        textStyle,
+        type: 'text',
+      });
+
+      for (const textStyle of [{ textStyleType: 'paragraph2' as const }, {}]) {
+        const viewModel = mapToTextViewModel(
+          base(textStyle),
+          pageStyles,
+          BRAND_PAGE_TYPES.brandSite,
+        );
+        const style = viewModel.textStyle as TextStyleDeclaration;
+
+        expect(style.fontSize).toBeUndefined();
+        expect(style.lineHeight).toBeUndefined();
+        expect(style.textAlign).toBe('center');
+        expect(style.color).toBeUndefined();
+        expect(
+          (viewModel as unknown as Record<string, unknown>).textSize,
+        ).toBeUndefined();
+      }
+    });
+  });
 });
 
 // The reCAPTCHA footnote colour is a raw colour anchored to the surface it sits on.
@@ -670,7 +1108,10 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     type: 'mailing-list',
     title: 'Subscribe',
     buttonText: 'Go',
-    titleStyle: { textAlign: DEFAULT_TEXT_ALIGN, color: '#ff0000' },
+    titleStyle: {
+      textAlign: DEFAULT_TEXT_ALIGN,
+      color: '#ff0000',
+    } as TextStyleDeclaration,
     buttonTextStyle: { textAlign: DEFAULT_TEXT_ALIGN },
   });
 
@@ -686,7 +1127,7 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     successMessage: '',
     fields: [],
     responseEmail: '',
-    titleStyle: { color: '#ff0000' },
+    titleStyle: { color: '#ff0000' } as TextStyleDeclaration,
     ...overrides,
   });
 
@@ -707,7 +1148,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
 
     expect(vm.disclosureColor).toMatch(/^#/);
     expect(vm.disclosureColor).not.toContain('var(');
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('mailing-list: a raw hex surface fill still yields a muted colour', () => {
@@ -721,7 +1164,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     );
 
     expect(vm.disclosureColor).toMatch(/^#/);
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('mailing-list: falls back to the title colour when the surface has no fill', () => {
@@ -730,11 +1175,16 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     pageStyles.buttonStyles.style = {};
 
     const vm = mapToMailingListViewModel(
-      createMailingListContent(),
+      {
+        ...createMailingListContent(),
+        title: rteTitleWithColour('#ff0000') as unknown as string,
+      },
       pageStyles,
     );
 
-    expect(vm.disclosureColor).toBe(vm.titleStyle?.color);
+    // ADR-0020: the title's own colour lives in its RTE mark; with no surface fill the
+    // disclosure falls back to it.
+    expect(vm.disclosureColor).toBe('#ff0000');
     expect(vm.disclosureColor).toBeDefined();
   });
 
@@ -785,7 +1235,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
 
     expect(vm.disclosureColor).toMatch(/^#/);
     expect(vm.disclosureColor).not.toContain('var(');
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('contact-form (brand.page): anchors to the card colour when the card has a fill', () => {
@@ -808,7 +1260,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     // Anchored to the light card, not the dark button fill: a dark muted colour.
     expect(vm.disclosureColor).toMatch(/^#/);
     expect(vm.disclosureColor).not.toContain('var(');
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('contact-form: a raw hex surface fill (pre-V2) still yields a muted colour', () => {
@@ -823,7 +1277,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     );
 
     expect(vm.disclosureColor).toMatch(/^#/);
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('contact-form: a blank palette role resolves via role defaults, not the title', () => {
@@ -840,7 +1296,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
 
     expect(vm.disclosureColor).toMatch(/^#/);
     expect(vm.disclosureColor).not.toContain('var(');
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('contact-form (brandSite, card layout): anchors to the card background', () => {
@@ -862,7 +1320,9 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
 
     expect(vm.disclosureColor).toMatch(/^#/);
     expect(vm.disclosureColor).not.toContain('var(');
-    expect(vm.disclosureColor).not.toBe(vm.titleStyle?.color);
+    expect(vm.disclosureColor).not.toBe(
+      (vm.titleStyle as TextStyleDeclaration)?.color,
+    );
   });
 
   test('contact-form (brandSite, no layout): falls back to the title colour', () => {
@@ -871,12 +1331,17 @@ describe('reCAPTCHA disclosure colour (view-model layer)', () => {
     pageStyles.buttonStyles.style = {};
 
     const vm = mapToContactFormViewModel(
-      createContactFormContent({ layoutStyle: '' }),
+      {
+        ...createContactFormContent({ layoutStyle: '' }),
+        title: rteTitleWithColour('#ff0000') as unknown as string,
+      },
       pageStyles,
       BRAND_PAGE_TYPES.brandSite,
     );
 
-    expect(vm.disclosureColor).toBe(vm.titleStyle?.color);
+    // ADR-0020: the title's own colour lives in its RTE mark; with no surface fill the
+    // disclosure falls back to it.
+    expect(vm.disclosureColor).toBe('#ff0000');
     expect(vm.disclosureColor).toBeDefined();
   });
 });
@@ -901,10 +1366,26 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       color: BUTTON_TEXT,
     };
     // Distinct global text-style colours so a fallback to the page is detectable.
-    pageStyles.textStyles.textStyleOptions.headings.style.color = '#00ff00';
-    pageStyles.textStyles.textStyleOptions.paragraphs.style.color = '#00ff00';
-    pageStyles.textStyles.textStyleOptions.titles.style.color = '#00ff00';
-    pageStyles.textStyles.textStyleOptions.buttons.style.color = '#0000ff';
+    (
+      pageStyles.textStyles.textStyleOptions.headings
+        .style as unknown as Record<string, unknown>
+    ).color = '#00ff00';
+    (
+      pageStyles.textStyles.textStyleOptions.paragraphs
+        .style as unknown as Record<string, unknown>
+    ).color = '#00ff00';
+    (
+      pageStyles.textStyles.textStyleOptions.titles.style as unknown as Record<
+        string,
+        unknown
+      >
+    ).color = '#00ff00';
+    (
+      pageStyles.textStyles.textStyleOptions.buttons.style as unknown as Record<
+        string,
+        unknown
+      >
+    ).color = '#0000ff';
 
     return pageStyles;
   };
@@ -929,8 +1410,8 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.titleStyle?.color).toContain('var(');
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toContain('var(');
   });
 
   test('mailing-list: title on a neutral-light card follows its global heading colour, not the button text (BP-5886)', () => {
@@ -948,9 +1429,10 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    // Card ≠ button fill → the button-text default does not apply; the title reads on
-    // the neutral surface via its Headings global colour.
-    expect(vm.titleStyle?.color).toBe('#00ff00');
+    // Card ≠ button fill → the button-text default does not apply. ADR-0020: the role's
+    // colour no longer cascades, so the title resolves to undefined and takes the page
+    // base coat (the generalised contrast bake — Phase 2 — will colour non-default surfaces).
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBeUndefined();
   });
 
   test('mailing-list: an explicit title colour still wins over the container default', () => {
@@ -960,16 +1442,19 @@ describe('container-aware text colour defaults (view-model layer)', () => {
         type: 'mailing-list',
         title: 'Subscribe',
         buttonText: 'Go',
-        titleStyle: { textStyleType: 'headings', color: '#abcabc' },
+        titleStyle: {
+          textStyleType: 'headings',
+          color: '#abcabc',
+        } as TextStyleDeclaration,
         backgroundStyle: { backgroundColor: BUTTON_FILL },
       } as MailingListContent,
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe('#abcabc');
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe('#abcabc');
   });
 
-  test('mailing-list: no visible container falls back to the global text-style colour', () => {
+  test('mailing-list: no visible container and no role colour resolves to undefined (base coat)', () => {
     const pageStyles = stylesWithButton();
 
     pageStyles.buttonStyles.style = {}; // no own container and no button fill
@@ -985,7 +1470,8 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       pageStyles,
     );
 
-    expect(vm.titleStyle?.color).toBe('#00ff00');
+    // ADR-0020: no container default and the role colour retired → undefined (base coat).
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBeUndefined();
   });
 
   test('mailing-list: with no own container it contrasts the global button fill', () => {
@@ -1000,10 +1486,10 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe(BUTTON_TEXT);
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
   });
 
-  test('request-payment: title/description/item text take the container default; a set item textColor still wins', () => {
+  test('request-payment: title/description/success message/item text take the container default; a set item textColor still wins', () => {
     const vm = mapContent(
       {
         id: 'rp-1',
@@ -1011,6 +1497,7 @@ describe('container-aware text colour defaults (view-model layer)', () => {
         title: 'Pay',
         titleStyle: { textStyleType: 'paragraphs' },
         descriptionStyle: { textStyleType: 'paragraphs' },
+        successMessageStyle: { textStyleType: 'paragraphs' },
         itemTextStyle: { textStyleType: 'paragraphs' },
         textColor: { color: '#abcabc' },
         backgroundStyle: { backgroundColor: BUTTON_FILL },
@@ -1019,13 +1506,18 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.descriptionStyle?.color).toBe(BUTTON_TEXT);
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    expect((vm.descriptionStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
+    expect((vm.successMessageStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
     // itemTextStyle merges content.textColor first, so its explicit colour wins.
-    expect(vm.itemTextStyle?.color).toBe('#abcabc');
+    expect((vm.itemTextStyle as TextStyleDeclaration)?.color).toBe('#abcabc');
   });
 
-  test('support-me: title/heading/description/item take the container default; button text stays on the buttons global', () => {
+  test('support-me: title/heading/description/success message/item take the container default; button text stays on the buttons global', () => {
     const vm = mapContent(
       {
         id: 'sm-1',
@@ -1035,6 +1527,7 @@ describe('container-aware text colour defaults (view-model layer)', () => {
         titleStyle: { textStyleType: 'headings' },
         headingStyle: { textStyleType: 'paragraphs' },
         descriptionStyle: { textStyleType: 'paragraphs' },
+        successMessageStyle: { textStyleType: 'paragraphs' },
         itemTextStyle: { textStyleType: 'paragraphs' },
         buttonTextStyle: { textStyleType: 'buttons' },
         backgroundStyle: { backgroundColor: BUTTON_FILL },
@@ -1042,12 +1535,18 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.headingStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.descriptionStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.itemTextStyle?.color).toBe(BUTTON_TEXT);
-    // buttonTextStyle is NOT container-bound → follows the buttons global colour.
-    expect(vm.buttonTextStyle?.color).toBe('#0000ff');
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    expect((vm.headingStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    expect((vm.descriptionStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
+    expect((vm.successMessageStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
+    expect((vm.itemTextStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    // buttonTextStyle is NOT container-bound and ADR-0020 retires the role colour →
+    // it resolves to undefined (the page base coat).
+    expect((vm.buttonTextStyle as TextStyleDeclaration)?.color).toBeUndefined();
   });
 
   test('contact-form (brand.page): title/description/success message take the container default', () => {
@@ -1072,13 +1571,18 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       BRAND_PAGE_TYPES.default,
     );
 
-    expect(vm.titleStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.descriptionStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.successMessageStyle?.color).toBe(BUTTON_TEXT);
-    expect(vm.buttonTextStyle?.color).toBe('#0000ff');
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBe(BUTTON_TEXT);
+    expect((vm.descriptionStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
+    expect((vm.successMessageStyle as TextStyleDeclaration)?.color).toBe(
+      BUTTON_TEXT,
+    );
+    // ADR-0020: buttonTextStyle (not container-bound) takes no role colour → undefined.
+    expect((vm.buttonTextStyle as TextStyleDeclaration)?.color).toBeUndefined();
   });
 
-  test('contact-form (brandSite): container default is out of scope; success message still resolves from the paragraphs global', () => {
+  test('contact-form (brandSite): container default out of scope; link-only fields resolve to undefined (role colour retired)', () => {
     const vm = mapToContactFormViewModel(
       {
         id: 'cf-1',
@@ -1099,10 +1603,13 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       BRAND_PAGE_TYPES.brandSite,
     );
 
-    expect(vm.titleStyle?.color).toBe('#00ff00');
-    // Phase 1: successMessageStyle now resolves (it was skipped before), and on
-    // brandSite the container default is out of scope so it takes the paragraphs global.
-    expect(vm.successMessageStyle?.color).toBe('#00ff00');
+    // ADR-0020: role colour retired → link-only fields resolve to undefined (base coat).
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBeUndefined();
+    // successMessageStyle resolves (it was skipped before); on brandSite the container
+    // default is out of scope and the role colour no longer cascades → undefined.
+    expect(
+      (vm.successMessageStyle as TextStyleDeclaration)?.color,
+    ).toBeUndefined();
   });
 
   test('regression: a content type with no container-bound keys is unaffected by the container default', () => {
@@ -1116,8 +1623,9 @@ describe('container-aware text colour defaults (view-model layer)', () => {
       stylesWithButton(),
     );
 
-    expect(vm.titleStyle?.color).toBe('#00ff00');
-    expect(vm.nameStyle?.color).toBe('#00ff00');
+    // ADR-0020: role colour retired → link-only fields resolve to undefined (base coat).
+    expect((vm.titleStyle as TextStyleDeclaration)?.color).toBeUndefined();
+    expect(vm.nameStyle?.color).toBeUndefined();
   });
 });
 
@@ -1230,7 +1738,10 @@ describe('mapToPageHeaderViewModel header button', () => {
       );
     });
 
-    test('resolves the button text style against the site text styles', () => {
+    // R1: page data carries only the label's own typography; the retired `buttons` role's
+    // font family isn't copied in — the fixed successor role (`button`) supplies it at render,
+    // through the CSS var the role class references, not this object.
+    test('resolves the button role, not a copied font family, against the site text styles', () => {
       const styles = new PageStyles();
 
       styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
@@ -1241,16 +1752,16 @@ describe('mapToPageHeaderViewModel header button', () => {
         [],
       ).headerButtonViewModel;
 
-      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+      expect(vm?.titleStyle?.fontFamily).toBeUndefined();
+      expect(vm?.titleStyle?.textStyleType).toBe('button');
     });
 
     // The maker writes buttonTextStyle only once the author touches the style field,
-    // so an untouched button still has to inherit the site's button text style.
-    test('defaults to the site button text style when none is authored', () => {
+    // so an untouched button still has to inherit the site's button role — its role, not a
+    // copied value (R1).
+    test('defaults to the site button role when none is authored', () => {
       const styles = new PageStyles();
 
-      styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
-
       const vm = mapToPageHeaderViewModel(
         new PageHeaderDesktop({
           headerButton: { ...headerButton, buttonTextStyle: undefined },
@@ -1259,8 +1770,318 @@ describe('mapToPageHeaderViewModel header button', () => {
         [],
       ).headerButtonViewModel;
 
-      expect(vm?.titleStyle?.textStyleType).toBe('buttons');
-      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+      expect(vm?.titleStyle?.textStyleType).toBe('button');
+      expect(vm?.titleStyle?.fontFamily).toBeUndefined();
+    });
+
+    test('a header button carries no role font family in page data; its own override holds', () => {
+      const styles = new PageStyles();
+      const mapWith = (buttonTextStyle: TextStyleDeclaration) =>
+        mapToPageHeaderViewModel(
+          new PageHeaderDesktop({
+            headerButton: { ...headerButton, buttonTextStyle },
+          }),
+          styles,
+          [],
+        ).headerButtonViewModel;
+
+      styles.textStyles.textStyleOptions.button.style.fontFamily = 'Oswald';
+
+      // R1: a role edit repaints the label at render, through the CSS var the role class
+      // supplies — page data itself never carries the role's font family.
+      expect(
+        mapWith({ textStyleType: 'button' })?.titleStyle?.fontFamily,
+      ).toBeUndefined();
+      expect(
+        mapWith({ textStyleType: 'button', fontFamily: 'Lora' })?.titleStyle
+          ?.fontFamily,
+      ).toBe('Lora');
+    });
+
+    // R3: no built-in line-height default — on a role or off it, an unset label carries no
+    // line height in page data; it follows the role (real, or the button fallback) at render.
+    describe('label line height', () => {
+      const mapWith = (
+        buttonTextStyle: HeaderButton['buttonTextStyle'],
+        styles = new PageStyles(),
+      ) =>
+        mapToPageHeaderViewModel(
+          new PageHeaderDesktop({
+            headerButton: { ...headerButton, buttonTextStyle },
+          }),
+          styles,
+          [],
+        ).headerButtonViewModel?.titleStyle;
+
+      test.each(['button', 'heading1'] as const)(
+        'an unset label on %s carries no line height in page data',
+        (textStyleType) => {
+          const styles = new PageStyles();
+
+          styles.textStyles.textStyleOptions[textStyleType].style.lineHeight =
+            '1.15';
+
+          expect(
+            mapWith({ textStyleType }, styles)?.lineHeight,
+          ).toBeUndefined();
+        },
+      );
+
+      test('the label own line height beats the role', () => {
+        expect(
+          mapWith({ textStyleType: 'heading1', lineHeight: '1.5' })?.lineHeight,
+        ).toBe('1.5');
+      });
+
+      test('an unset label on no role has no built-in default; it falls back to Button text', () => {
+        const titleStyle = mapWith({ textAlign: 'center' });
+
+        expect(titleStyle?.lineHeight).toBeUndefined();
+        expect(titleStyle?.textStyleType).toBe('button');
+      });
     });
   });
 });
+
+describe('save contact button text style', () => {
+  test('with no field of its own, the Save Contact label carries no typography — only the Button text role', () => {
+    const styles = new PageStyles();
+
+    const resolved = resolveSaveContactTitleStyle(undefined, styles.textStyles);
+
+    expect(resolved.textStyleType).toBe('button');
+    expect(resolved.fontFamily).toBeUndefined();
+    expect(resolved.fontSize).toBeUndefined();
+  });
+
+  test('the label always resolves to the Button text role, including when the field names the retired Buttons role', () => {
+    const styles = new PageStyles();
+
+    expect(
+      resolveSaveContactTitleStyle(
+        { textStyleType: 'button' },
+        styles.textStyles,
+      ).textStyleType,
+    ).toBe('button');
+    expect(
+      resolveSaveContactTitleStyle(
+        { textStyleType: 'buttons' as never },
+        styles.textStyles,
+      ).textStyleType,
+    ).toBe('button');
+  });
+
+  // S8 — the field naming a DIFFERENT canonical role (not just the retired `buttons`) must
+  // still normalise to Button text; Save Contact never draws through any other role.
+  test('a stray canonical role on the field is still normalised to Button text', () => {
+    const styles = new PageStyles();
+
+    expect(
+      resolveSaveContactTitleStyle(
+        { textStyleType: 'heading2' as never },
+        styles.textStyles,
+      ).textStyleType,
+    ).toBe('button');
+  });
+
+  test('a save contact override holds; a Button text role edit is not copied in', () => {
+    const styles = new PageStyles();
+
+    styles.textStyles.textStyleOptions.button.style.fontFamily = 'Oswald';
+
+    const resolved = resolveSaveContactTitleStyle(
+      { textStyleType: 'button', fontSize: '1.25em', lineHeight: '1.5' },
+      styles.textStyles,
+    );
+
+    expect(resolved.fontSize).toBe('1.25em');
+    expect(resolved.lineHeight).toBe('1.5');
+    expect(resolved.fontFamily).toBeUndefined();
+    expect(resolved.textStyleType).toBe('button');
+  });
+
+  test('the page view model passes the save contact buttonTextStyle through', () => {
+    const buttonTextStyle: TextStyleDeclaration = {
+      textStyleType: 'button',
+      fontSize: '1.25em',
+    };
+    const model = new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandContact,
+      saveContactSettings: {
+        isSavingEnabled: true,
+        hideBranding: false,
+        buttonTextStyle,
+      },
+    });
+
+    const viewModel = getBrandPageViewModelFromBrandPageModel(
+      model,
+      undefined,
+      true,
+      {} as Parameters<typeof getBrandPageViewModelFromBrandPageModel>[3],
+    );
+
+    expect(viewModel.saveContactSettings?.buttonTextStyle).toEqual(
+      buttonTextStyle,
+    );
+  });
+});
+
+// Header and footer text is rebuilt through the model constructors on every load, so the
+// render is checked after a round trip through `new BrandPageModel`, the way the published
+// page and the maker both load a saved site.
+describe('header and footer text follow their role after a reload', () => {
+  const load = (
+    navStyle: TextStyleDeclaration,
+    hamburgerStyle: TextStyleDeclaration,
+    copyrightStyle: TextStyleDeclaration = {
+      textStyleType: 'paragraph1',
+      textAlign: 'center',
+    },
+  ) => {
+    const model = new BrandPageModel({
+      pageHeaderDesktop: {
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.TAB_1,
+          defaultButtonStyle: navStyle,
+          hamburgerMenuStyle: { defaultButtonStyle: hamburgerStyle },
+        },
+      },
+      pageFooterDesktop: {
+        copyrightText: '© Acme',
+        copyrightStyle,
+      },
+    } as never);
+
+    const styles = new PageStyles();
+    const roles = styles.textStyles.textStyleOptions;
+
+    roles.paragraph1.style = {
+      ...roles.paragraph1.style,
+      fontFamily: 'Anton',
+      fontSize: '1.5em',
+      fontWeight: 'bold',
+    };
+    roles.button.style = { ...roles.button.style, fontFamily: 'Oswald' };
+
+    return {
+      header: mapToPageHeaderViewModel(model.pageHeaderDesktop, styles, []),
+      footer: mapToPageFooterViewModel(model.pageFooterDesktop, styles),
+    };
+  };
+
+  test('a linked nav tab and hamburger keep their role and carry no role typography', () => {
+    const { header } = load(
+      { textStyleType: 'paragraph1' },
+      { textStyleType: 'button' },
+    );
+
+    expect(header.navigation.defaultButtonStyle.textStyleType).toBe(
+      'paragraph1',
+    );
+    expect(header.navigation.defaultButtonStyle.fontFamily).toBeUndefined();
+    expect(header.navigation.defaultButtonStyle.fontSize).toBeUndefined();
+    expect(
+      header.navigation.hamburgerMenuStyle.defaultButtonStyle.textStyleType,
+    ).toBe('button');
+    expect(
+      header.navigation.hamburgerMenuStyle.defaultButtonStyle.fontFamily,
+    ).toBeUndefined();
+  });
+
+  test('a linked nav tab keeps its own override and no role typography for the rest', () => {
+    const { header } = load(
+      { textStyleType: 'paragraph1', fontSize: '1em' },
+      { textStyleType: 'button' },
+    );
+
+    expect(header.navigation.defaultButtonStyle).toMatchObject({
+      textStyleType: 'paragraph1',
+      fontSize: '1em',
+    });
+    expect(header.navigation.defaultButtonStyle.fontFamily).toBeUndefined();
+  });
+
+  test('a linked nav tab keeps a fallback link colour when its own is cleared', () => {
+    const { header } = load(
+      { textStyleType: 'paragraph1', color: '' },
+      { textStyleType: 'button' },
+    );
+
+    expect(header.navigation.defaultButtonStyle.color).toBe(
+      FALLBACK_DEFAULT_LINK_COLOR,
+    );
+  });
+
+  // S3 — nav tabs and the hamburger take an explicit starting role now (matching what the
+  // upgrade assigns them), not `bestFitRole` — so the model's own default size no longer needs
+  // clearing to see the true no-role fallback; it stays as an override either way.
+  test('a tab on no role draws through Paragraph 1 regardless of its own size; a hamburger on no role draws through Button text', () => {
+    const { header } = load({}, {});
+
+    expect(header.navigation.defaultButtonStyle.textStyleType).toBe(
+      'paragraph1',
+    );
+    expect(header.navigation.defaultButtonStyle.fontSize).toBe(FONT_SIZE_BODY);
+    expect(
+      header.navigation.hamburgerMenuStyle.defaultButtonStyle.textStyleType,
+    ).toBe('button');
+  });
+
+  test('the footer copyright takes its role', () => {
+    const { footer } = load(
+      { textStyleType: 'paragraph1' },
+      { textStyleType: 'button' },
+      { textStyleType: 'paragraph2', textAlign: 'center', color: '#111111' },
+    );
+
+    expect(footer.copyrightStyle).toMatchObject({
+      textStyleType: 'paragraph2',
+      textAlign: 'center',
+      color: '#111111',
+      overflowWrap: 'anywhere',
+      wordBreak: 'normal',
+    });
+    expect(footer.copyrightStyle.fontFamily).toBeUndefined();
+    expect(footer.copyrightStyle.fontSize).toBeUndefined();
+
+    const { footer: noRoleFooter } = load(
+      { textStyleType: 'paragraph1' },
+      { textStyleType: 'button' },
+      {},
+    );
+
+    expect(noRoleFooter.copyrightStyle.textStyleType).toBe('paragraph1');
+  });
+});
+
+describe('getCriticalResourceURLs', () => {
+  const SHAPE_URL = 'https://cdn.example.com/shape.svg';
+
+  const viewModelWith = (
+    textStyles: Record<string, unknown>,
+  ): BrandPageViewModel =>
+    ({
+      styles: {
+        textStyles,
+        backgroundStylesViewModel: { backgroundImageUrl: SHAPE_URL },
+      },
+    }) as unknown as BrandPageViewModel;
+
+  // The renderer layout already preloads every font (0036-retire-text-font-family.md).
+  test.each([
+    ['a stale font key', { textFontFamily: 'quattrocentoSans' }],
+    ['a stale display name', { textFontFamily: 'Anton SC' }],
+    ['no site text font', {}],
+  ])(
+    'preloads the background shape and no font, given %s',
+    (_label, textStyles) => {
+      expect(getCriticalResourceURLs(viewModelWith(textStyles))).toEqual({
+        images: [],
+        fonts: [],
+        shapes: [SHAPE_URL],
+      });
+    },
+  );
+});