@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.js

@@ -1,6 +1,7 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import { getRenderText } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '../../utils/text-role-css.util';
 export default defineComponent({
     props: {
         viewModel: {
@@ -22,6 +23,14 @@ export default defineComponent({
         },
     },
     emits: ['on-logo-click', 'footer-container-click'],
+    // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `PageFooter.vue` invokes
+    // this one itself and spreads its return into its own `setup()`.
+    setup() {
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+        return {
+            roleOptions,
+        };
+    },
     computed: {
         containerStyle() {
             return this.viewModel.backgroundStyle;
@@ -41,6 +50,17 @@ export default defineComponent({
             }
             return getRenderText(this.viewModel.copyrightText);
         },
+        copyrightRoleType() {
+            return this.viewModel.copyrightStyle?.textStyleType;
+        },
+        copyrightRoleClass() {
+            return roleClassFor(this.copyrightRoleType);
+        },
+        copyrightStyle() {
+            const own = this.viewModel.copyrightStyle;
+            const roleStyle = roleStyleFor(this.copyrightRoleType, this.roleOptions);
+            return { ...own, ...roleTypographyStyle(own, roleStyle) };
+        },
     },
     methods: {
         onFooterContainerClick() {

package/lib/src/brand-page/components/payment/Payment.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext, CheckoutInformation, CreateCartResult, PaymentConfig, PaymentOption } from '@brand-page/models';
+import type { BrandPageContext, CheckoutInformation, CreateCartResult, PaymentConfig, PaymentOption, TextStyleOptions } from '@brand-page/models';
 import type { RequestPaymentViewModel, SupportMeViewModel } from '@brand-page/view-models';
 export declare const paymentState: {
     readonly CreatingCart: "creating-cart";
@@ -34,7 +34,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<PaymentRequestDetails>;
         required: true;
     };
-}>, {}, {
+}>, {
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
+}, {
     paymentState: {
         readonly CreatingCart: "creating-cart";
         readonly IncompleteConfig: "incomplete-config";
@@ -48,6 +50,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     state: State;
 }, {
     buttonStyle(): BrandPageCssStyle;
+    continueButtonRoleClass(): string | undefined;
     currencySymbol(): string;
     isPaymentOptionSelectionContinueEnabled(): boolean;
     isPaymentOptionsVisible(): boolean;

package/lib/src/brand-page/components/payment/Payment.mixin.js

@@ -1,10 +1,11 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import { DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, paymentProviders, } from '../../constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { isPreviewMode } from '@brand-page/utils';
 import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import { paymentTr } from '@src/composables/useTranslate';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '@brand-page/utils/text-role-css.util';
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(`defaultPaymentSuccessMessage`);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
 export const paymentState = {
@@ -33,6 +34,14 @@ export default defineComponent({
             required: true,
         },
     },
+    setup() {
+        // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+        // the button box bakes the button text style's own values, as before this change.
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+        return {
+            roleOptions,
+        };
+    },
     data: () => ({
         paymentState,
         cart: undefined,
@@ -44,6 +53,9 @@ export default defineComponent({
         buttonStyle() {
             return this.viewModel.buttonStyles.style;
         },
+        continueButtonRoleClass() {
+            return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+        },
         currencySymbol() {
             return this.paymentConfig.paymentConfig?.defaultCurrencySymbol || '';
         },
@@ -90,7 +102,15 @@ export default defineComponent({
                 buttonStyle.color = textColor;
                 buttonStyle.backgroundColor = buttonStyle.backgroundColor;
             }
-            return { ...buttonStyle, ...this.viewModel.buttonTextStyle };
+            // The label's TextWrapper applies the size; an em size here too would multiply.
+            const roleStyle = roleStyleFor(this.viewModel.buttonTextStyle?.textStyleType, this.roleOptions);
+            return {
+                ...buttonStyle,
+                ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle, {
+                    omit: ['fontSize'],
+                }),
+                color: this.viewModel.buttonTextStyle?.color ?? buttonStyle.color,
+            };
         },
         paymentOptionButtonStyle() {
             const buttonStyle = { ...this.viewModel.buttonStyles?.style };

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext, PaymentOption } from '../../../models';
+import type { BrandPageContext, PaymentOption, TextStyleOptions } from '../../../models';
 import type { SupportMeViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -11,7 +11,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<SupportMeViewModel>;
         required: true;
     };
-}>, {}, {
+}>, {
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
+}, {
     customerMessage: string | undefined;
     selectedPaymentOptionIds: string[];
     prevCustomAmount: string;
@@ -30,6 +32,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     currencySymbol(): string;
     currencyCodeDisplay(): string;
     paymentOptionButtonStyle(): BrandPageCssStyle;
+    customerMessageBlockRoleClass(): string | undefined;
+    customerMessageBlockStyle(): BrandPageCssStyle;
     tippingLabel(): string;
     customAmountLabel(): string;
 }, {

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.js

@@ -1,8 +1,9 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
 import { isPaymentAmountValid, contentPaddingStyle as toContentPaddingStyle, } from '../../../utils';
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '@brand-page/utils/text-role-css.util';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
 const MINIMUM_CUSTOM_AMOUNT = 0.1;
 export default defineComponent({
@@ -16,6 +17,14 @@ export default defineComponent({
             required: true,
         },
     },
+    setup() {
+        // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+        // the message block bakes its heading style's own values, as before this change.
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+        return {
+            roleOptions,
+        };
+    },
     data() {
         return {
             customerMessage: undefined,
@@ -81,6 +90,28 @@ export default defineComponent({
             buttonStyle.borderWidth = undefined;
             return buttonStyle;
         },
+        customerMessageBlockRoleClass() {
+            return roleClassFor(this.viewModel.headingStyle?.textStyleType);
+        },
+        // The nested TextWrapper owns the label's size. The container retains the other heading
+        // properties so the input follows its surrounding visual treatment without compounding ems.
+        customerMessageBlockStyle() {
+            const roleStyle = roleStyleFor(this.viewModel.headingStyle?.textStyleType, this.roleOptions);
+            return {
+                ...roleTypographyStyle(this.viewModel.headingStyle, roleStyle, {
+                    omit: ['fontSize'],
+                }),
+                ...(this.viewModel.headingStyle?.color
+                    ? { color: this.viewModel.headingStyle.color }
+                    : {}),
+                // The old template bound the whole heading style inline (`:style="headingStyle"`),
+                // which let a left/right heading alignment beat the block's static `tw-text-center` —
+                // `roleTypographyStyle` doesn't carry alignment, so it's kept here explicitly (S7).
+                ...(this.viewModel.headingStyle?.textAlign
+                    ? { textAlign: this.viewModel.headingStyle.textAlign }
+                    : {}),
+            };
+        },
         tippingLabel() {
             return paymentTr(`selectAnAmount`, {
                 CURRENCY_CODE: this.currencyCodeDisplay,

package/lib/src/brand-page/components/social-links/SocialLinks.stories.js

@@ -49,9 +49,6 @@ const viewModel = {
     iconBackgroundStyles: {},
     backgroundStyles: {},
     titleStyle: {
-        color: '#000000',
-        fontSize: '2.25rem',
-        fontWeight: 'bold',
         textAlign: 'center',
     },
     role: 'social-links',

package/lib/src/brand-page/components/testimonial-section/__fixtures__/data.js

@@ -37,9 +37,6 @@ export const viewModel = {
         },
     ],
     titleStyle: {
-        color: 'rgba(0, 0, 0, 1)',
-        fontSize: '2.25rem',
-        fontWeight: 'bold',
         textAlign: 'center',
     },
     testimonialStyle: {

package/lib/src/brand-page/components/text/Text.stories.js

@@ -12,12 +12,7 @@ const BPviewModel = {
     textItems: [],
     type: 'text',
     textStyle: {
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-        fontFamily: 'Lato',
         textAlign: 'left',
-        overflowWrap: 'anywhere',
-        wordBreak: 'normal',
     },
     columnStyle: '1',
     backgroundColor: {},
@@ -34,7 +29,6 @@ const BSviewModel = {
             id: 'text-item-1',
             text: 'lorem ipsum',
             textStyle: {
-                fontSize: '1rem',
                 textAlign: 'left',
                 textStyleType: 'paragraphs',
             },
@@ -43,7 +37,6 @@ const BSviewModel = {
             id: 'text-item-2',
             text: 'lorem ipsum',
             textStyle: {
-                fontSize: '1rem',
                 textAlign: 'left',
                 textStyleType: 'paragraphs',
             },
@@ -51,12 +44,7 @@ const BSviewModel = {
     ],
     type: 'text',
     textStyle: {
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-        fontFamily: 'Lato',
         textAlign: 'left',
-        overflowWrap: 'anywhere',
-        wordBreak: 'normal',
     },
     columnStyle: '2',
     backgroundColor: {},
@@ -71,12 +59,7 @@ const BSEmptyTextItem = {
     textItems: [],
     type: 'text',
     textStyle: {
-        fontSize: '1rem',
-        lineHeight: '1.5rem',
-        fontFamily: 'Lato',
         textAlign: 'left',
-        overflowWrap: 'anywhere',
-        wordBreak: 'normal',
     },
     columnStyle: '1',
     backgroundColor: {},

package/lib/src/brand-page/constants/font.constants.d.ts

@@ -2,6 +2,16 @@ export declare const DISPLAY_TEXT_TITLE = "Titles";
 export declare const DISPLAY_TEXT_HEADINGS = "Headings";
 export declare const DISPLAY_TEXT_BODY = "Paragraphs";
 export declare const DISPlAY_TEXT_BUTTONS = "Button Texts";
+export declare const DISPLAY_TEXT_HEADING_1 = "Heading 1";
+export declare const DISPLAY_TEXT_HEADING_2 = "Heading 2";
+export declare const DISPLAY_TEXT_HEADING_3 = "Heading 3";
+export declare const DISPLAY_TEXT_HEADING_4 = "Heading 4";
+export declare const DISPLAY_TEXT_HEADING_5 = "Heading 5";
+export declare const DISPLAY_TEXT_HEADING_6 = "Heading 6";
+export declare const DISPLAY_TEXT_PARAGRAPH_1 = "Paragraph 1";
+export declare const DISPLAY_TEXT_PARAGRAPH_2 = "Paragraph 2";
+export declare const DISPLAY_TEXT_PARAGRAPH_3 = "Paragraph 3";
+export declare const DISPLAY_TEXT_BUTTON = "Button";
 export declare const DEFAULT_TEXT_DECORATION: undefined;
 export declare const DEFAULT_FONT_STYLE: undefined;
 export declare const FONT_SIZE_TITLE = "2.25em";
@@ -13,6 +23,58 @@ export declare const FONT_WEIGHT_NORMAL = "normal";
 export declare const LINE_HEIGHT_TITLE = "1.3";
 export declare const LINE_HEIGHT_HEADINGS = "1.4";
 export declare const LINE_HEIGHT_BODY = "1.5";
+export declare const TEXT_ROLE_STYLE_DEFAULTS: {
+    readonly heading1: {
+        readonly fontSize: "6.875em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.2";
+    };
+    readonly heading2: {
+        readonly fontSize: "5.25em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.2";
+    };
+    readonly heading3: {
+        readonly fontSize: "3.1875em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.25";
+    };
+    readonly heading4: {
+        readonly fontSize: "2.1875em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.3";
+    };
+    readonly heading5: {
+        readonly fontSize: "1.4375em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.35";
+    };
+    readonly heading6: {
+        readonly fontSize: "1em";
+        readonly fontWeight: "bold";
+        readonly lineHeight: "1.4";
+    };
+    readonly paragraph1: {
+        readonly fontSize: "1.375em";
+        readonly fontWeight: "normal";
+        readonly lineHeight: "1.5";
+    };
+    readonly paragraph2: {
+        readonly fontSize: "1.125em";
+        readonly fontWeight: "normal";
+        readonly lineHeight: "1.5";
+    };
+    readonly paragraph3: {
+        readonly fontSize: "0.875em";
+        readonly fontWeight: "normal";
+        readonly lineHeight: "1.6";
+    };
+    readonly button: {
+        readonly fontSize: "1em";
+        readonly fontWeight: "normal";
+        readonly lineHeight: "1.2";
+    };
+};
 export declare const DEFAULT_FONT_SIZE = 12;
 export declare const MIN_TEXT_SIZE_PX = 12;
 export declare const MAX_TEXT_SIZE_PX = 128;

package/lib/src/brand-page/constants/font.constants.js

@@ -3,6 +3,18 @@ export const DISPLAY_TEXT_TITLE = 'Titles';
 export const DISPLAY_TEXT_HEADINGS = 'Headings';
 export const DISPLAY_TEXT_BODY = 'Paragraphs';
 export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
+// BP-5969 — display names for the 10 global text roles (English fallback; the
+// panel/picker use i18n `styleSettingsTr(<role>)`, these back it up).
+export const DISPLAY_TEXT_HEADING_1 = 'Heading 1';
+export const DISPLAY_TEXT_HEADING_2 = 'Heading 2';
+export const DISPLAY_TEXT_HEADING_3 = 'Heading 3';
+export const DISPLAY_TEXT_HEADING_4 = 'Heading 4';
+export const DISPLAY_TEXT_HEADING_5 = 'Heading 5';
+export const DISPLAY_TEXT_HEADING_6 = 'Heading 6';
+export const DISPLAY_TEXT_PARAGRAPH_1 = 'Paragraph 1';
+export const DISPLAY_TEXT_PARAGRAPH_2 = 'Paragraph 2';
+export const DISPLAY_TEXT_PARAGRAPH_3 = 'Paragraph 3';
+export const DISPLAY_TEXT_BUTTON = 'Button';
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
 export const FONT_SIZE_TITLE = '2.25em';
@@ -14,6 +26,29 @@ export const FONT_WEIGHT_NORMAL = 'normal';
 export const LINE_HEIGHT_TITLE = '1.3';
 export const LINE_HEIGHT_HEADINGS = '1.4';
 export const LINE_HEIGHT_BODY = '1.5';
+// BP-5969 — §4 default typography for the 10 global text roles. Sizes in `em`
+// (relative to the 16px root). Weights/letter-spacing are new: the legacy 4
+// roles carried none, so these apply to new sites only — existing sites keep
+// their persisted role definitions (migration-22 preserves appearance).
+// Weight is strictly binary (BP-5969): headings default `bold`, body + button
+// `normal`. No semibold tier — the RTE exposes only a normal/bold toggle, so the
+// role defaults use the same `bold`/`normal` keywords that toggle (and every weight
+// reader) speaks, not numeric weights.
+//
+// Sizes are a display scale in em @ 16px root; the px each em resolves to is noted
+// inline. Headings anchor H1 110px → H6 16px; body runs 22/18/14; button stays 16px.
+export const TEXT_ROLE_STYLE_DEFAULTS = {
+    heading1: { fontSize: '6.875em', fontWeight: 'bold', lineHeight: '1.2' }, // 110px
+    heading2: { fontSize: '5.25em', fontWeight: 'bold', lineHeight: '1.2' }, // 84px
+    heading3: { fontSize: '3.1875em', fontWeight: 'bold', lineHeight: '1.25' }, // 51px
+    heading4: { fontSize: '2.1875em', fontWeight: 'bold', lineHeight: '1.3' }, // 35px
+    heading5: { fontSize: '1.4375em', fontWeight: 'bold', lineHeight: '1.35' }, // 23px
+    heading6: { fontSize: '1em', fontWeight: 'bold', lineHeight: '1.4' }, // 16px
+    paragraph1: { fontSize: '1.375em', fontWeight: 'normal', lineHeight: '1.5' }, // 22px
+    paragraph2: { fontSize: '1.125em', fontWeight: 'normal', lineHeight: '1.5' }, // 18px
+    paragraph3: { fontSize: '0.875em', fontWeight: 'normal', lineHeight: '1.6' }, // 14px
+    button: { fontSize: '1em', fontWeight: 'normal', lineHeight: '1.2' }, // 16px
+};
 export const DEFAULT_FONT_SIZE = 12;
 export const MIN_TEXT_SIZE_PX = 12;
 export const MAX_TEXT_SIZE_PX = 128;

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -36,9 +36,11 @@ export interface AbTestResult {
 }
 export declare const AB_TEST_KEYS: {
     BP_3926_FREEMIUM_WATERMARK: string;
+    BP_6136_V2_AI_BUILDER: string;
 };
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
+    bp_6136_v2_ai_builder?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -24,6 +24,9 @@ export const AB_TEST_FLAG = {
 };
 export const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
+    // V1 (control) vs V2 (variation-1) AI website builder, sent by bc-net in the editor
+    // payload at load. Key must match `Bp6136V2AiBuilderStrategy.CampaignKey`.
+    BP_6136_V2_AI_BUILDER: 'bc-bp-6136-v2-ai-builder',
 };
 export const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -45,5 +48,9 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]) {
         abTests.bp_3926_freemium_watermark = getValueType(AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK, abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]);
     }
+    // AB Test - V1 vs V2 AI website builder
+    if (abtestKeyValues[AB_TEST_KEYS.BP_6136_V2_AI_BUILDER]) {
+        abTests.bp_6136_v2_ai_builder = getValueType(AB_TEST_KEYS.BP_6136_V2_AI_BUILDER, abtestKeyValues[AB_TEST_KEYS.BP_6136_V2_AI_BUILDER]);
+    }
     return abTests;
 };

package/lib/src/brand-page/models/index.d.ts

@@ -1,8 +1,8 @@
-import type { FontFamilyKey, ImagesSectionContentDisplayStyle, HeaderDisplayStyle, FooterDisplayStyle } from '../constants';
+import type { ImagesSectionContentDisplayStyle, HeaderDisplayStyle, FooterDisplayStyle } from '../constants';
 import type { Content, PersonalisationRole } from './content.model';
 import type { BrandPageType, ViewportsType } from './brand-page-context.model';
 import { NavigationDesktop, NavigationMobile } from './navigation-styles.model';
-import type { TextStyleDeclaration, LegacyTextStylesInput } from './styles.model';
+import type { TextStyleDeclaration, RteTextRole, LegacyTextStylesInput } from './styles.model';
 import { TextStyles } from './styles.model';
 import { LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
@@ -176,8 +176,8 @@ export interface TextContent extends Content {
     /**
      * @deprecated Use `textStyle` instead. For backward compatibility.
      */
-    textSize: BrandPageCssStyle;
-    textStyle: TextStyleDeclaration;
+    textSize?: BrandPageCssStyle;
+    textStyle: RteTextRole;
     /**
      * @deprecated Use `textStyle` instead. For backward compatibility.
      */
@@ -197,9 +197,9 @@ export interface ProfileContent extends Content {
     colorReplacements: ColorReplacement[];
     mediaType?: string;
     size?: string;
-    descriptionStyle: TextStyleDeclaration;
-    nameStyle: TextStyleDeclaration;
-    titleStyle: TextStyleDeclaration;
+    descriptionStyle: RteTextRole;
+    nameStyle: RteTextRole;
+    titleStyle: RteTextRole;
 }
 export interface Address {
     formattedAddress: string;
@@ -212,7 +212,7 @@ export interface MailingListContent extends Content {
     acceptedFields?: 'emailOnly' | 'nameAndEmail';
     title: RichTextValue;
     buttonText: string;
-    titleStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
     buttonTextStyle: TextStyleDeclaration;
     backgroundStyle?: BrandPageCssStyle;
 }
@@ -270,11 +270,11 @@ export interface ContactFormContent extends Content {
     responseEmail: string;
     imageUrl?: string;
     layoutStyle?: string | null;
-    titleStyle?: TextStyleDeclaration;
-    descriptionStyle?: TextStyleDeclaration;
+    titleStyle?: RteTextRole;
+    descriptionStyle?: RteTextRole;
     buttonTextStyle?: TextStyleDeclaration;
     backgroundStyle?: BrandPageCssStyle;
-    successMessageStyle?: TextStyleDeclaration;
+    successMessageStyle?: RteTextRole;
     cardStyle?: BrandPageCssStyle;
     colorReplacements?: ColorReplacement[];
     mediaType?: string;
@@ -291,8 +291,8 @@ export interface BannerSectionContent extends Content {
     email?: string;
     tel?: string;
     displayStyle: string;
-    titleStyle: TextStyleDeclaration;
-    descriptionStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
+    descriptionStyle: RteTextRole;
     backgroundStyle: BrandPageCssStyle;
     cardStyle: BrandPageCssStyle;
     colorReplacements: ColorReplacement[];
@@ -357,7 +357,7 @@ export interface TextItem {
     /** Stable per-item identifier. See ImageItem.id. */
     id: string;
     text: RichTextValue;
-    textStyle: TextStyleDeclaration;
+    textStyle: RteTextRole;
     textOverride?: string;
 }
 export interface ShapesSectionContent extends Content, MediaSection {
@@ -377,8 +377,8 @@ export interface MediaSection extends Content {
     description: RichTextValue;
     displayStyle: ImagesSectionContentDisplayStyle;
     items: TextShapeItem[] | TextMediaItem[];
-    titleStyle: TextStyleDeclaration;
-    descriptionStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
+    descriptionStyle: RteTextRole;
     headingStyle: TextStyleDeclaration;
     paragraphStyle: TextStyleDeclaration;
     backgroundStyle: BrandPageCssStyle;
@@ -406,7 +406,7 @@ export interface TestimonialSectionContent extends Content {
     title: RichTextValue;
     displayStyle: string;
     items: TestimonialItems[];
-    titleStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
     testimonialStyle: TextStyleDeclaration;
     nameStyle: TextStyleDeclaration;
     positionStyle: TextStyleDeclaration;
@@ -420,8 +420,8 @@ export interface AboutSectionContent extends Content {
     title: RichTextValue;
     paragraph: RichTextValue;
     displayStyle: string;
-    titleStyle: TextStyleDeclaration;
-    paragraphStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
+    paragraphStyle: RteTextRole;
     backgroundStyle: BrandPageCssStyle;
     colorReplacements: ColorReplacement[];
     mediaType?: string;
@@ -448,7 +448,7 @@ export interface SocialLinksContent extends Content {
     iconFillStyles: BrandPageCssStyle;
     iconBackgroundStyles: BrandPageCssStyle;
     backgroundStyles: BrandPageCssStyle;
-    titleStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
 }
 export declare const DIVIDER_STYLES: {
     readonly none: "none";
@@ -471,8 +471,8 @@ export interface BookingSectionContent extends Content {
     url: string;
     email?: string;
     tel?: string;
-    titleStyle: TextStyleDeclaration;
-    descriptionStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
+    descriptionStyle: RteTextRole;
     backgroundStyle: BrandPageCssStyle;
     buttonPageId: string;
     buttonLinkType: ButtonLinkType;
@@ -566,8 +566,6 @@ export declare abstract class AbstractPageFooterStyles {
     logoTemplateImage: LogoTemplateImageModel | undefined;
     logoImageBase64Url?: string;
     socialLinks: LinksItem[];
-    /** @deprecated For backward compatibility only */
-    textFontFamily?: FontFamilyKey;
     viewport: ViewportsType;
     logoImageHeight: string | undefined;
     logoImageWidth: string | undefined;
@@ -601,6 +599,7 @@ export interface CookieOptions {
 export interface SaveContactOptions {
     isSavingEnabled: boolean;
     hideBranding: boolean;
+    buttonTextStyle?: TextStyleDeclaration;
 }
 export declare class BrandPageModel {
     v: number;

package/lib/src/brand-page/models/index.js

@@ -315,8 +315,6 @@ export class AbstractPageFooterStyles {
     logoTemplateImage;
     logoImageBase64Url;
     socialLinks;
-    /** @deprecated For backward compatibility only */
-    textFontFamily;
     viewport;
     logoImageHeight;
     logoImageWidth;
@@ -329,8 +327,8 @@ export class AbstractPageFooterStyles {
         this.copyrightText =
             options.copyrightText ??
                 `© ${new Date(Date.now()).getFullYear()} by [Company Name]. All Rights Reserved.`;
+        // Migration-01 reads the legacy role only for v0 input; newer data must never mint `paragraphs`.
         this.copyrightStyle = options.copyrightStyle || {
-            textStyleType: TEXT_STYLE_TYPES.paragraphs,
             textAlign: 'center',
         };
         if (options.displayStyle) {
@@ -390,7 +388,13 @@ export class AbstractPageFooterStyles {
         // explicit black, a not-yet-migrated model renders the SVG default. Seeding a site
         // text colour here need not read against the footer band.
         this.iconStyle = options.iconStyle ? { ...options.iconStyle } : {};
-        this.textFontFamily = options.textFontFamily;
+        // Retired (`0036-retire-text-font-family.md`): carried as stored, so construction keeps the
+        // released migrations' input unchanged (`legacy-migrations.md`); migration-22 deletes it.
+        const { textFontFamily } = options;
+        if (textFontFamily !== undefined) {
+            this['textFontFamily'] =
+                textFontFamily;
+        }
     }
 }
 export class AbstractMedia {
@@ -459,6 +463,15 @@ export class BrandPageModel {
     paymentConfig;
     constructor(options) {
         this.v = options.v || 0;
+        const footerOptions = (footer) => this.v < 22 && footer?.copyrightStyle === undefined
+            ? {
+                ...footer,
+                copyrightStyle: {
+                    textStyleType: TEXT_STYLE_TYPES.paragraphs,
+                    textAlign: 'center',
+                },
+            }
+            : footer;
         this.styles = new PageStyles(options.styles);
         // `textStyles.style` is retired, so it is read untyped here (the
         // deserialization boundary). The seeding it feeds must NOT change —
@@ -500,7 +513,7 @@ export class BrandPageModel {
             // so the seed rides migration-01's re-wrap into the modern pageFooter* and is
             // referencified by migration-21 — else legacy footer icons stay colourless.
             this.footerStyles = new PageFooterDesktop({
-                ...options.footerStyles,
+                ...footerOptions(options.footerStyles),
             }, theme);
             this.footerStyles.logoImageUrl =
                 options.footerStyles.logoImageUrl;
@@ -515,8 +528,8 @@ export class BrandPageModel {
                 ...options.pageHeaderDesktop,
                 navigation: new NavigationDesktop(options.pageHeaderDesktop?.navigation, theme),
             });
-            this.pageFooterMobile = new PageFooterMobile(options.pageFooterMobile, theme);
-            this.pageFooterDesktop = new PageFooterDesktop(options.pageFooterDesktop, theme);
+            this.pageFooterMobile = new PageFooterMobile(footerOptions(options.pageFooterMobile), theme);
+            this.pageFooterDesktop = new PageFooterDesktop(footerOptions(options.pageFooterDesktop), theme);
         }
         this.faviconUrl = options.faviconUrl;
         this.ogImageUrl = options.ogImageUrl;

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -1,6 +1,6 @@
 import { type NavigationDisplayType } from '../constants';
 import type { Theme, ViewportsType } from './index';
-import type { TextStyleDeclaration } from './styles.model';
+import { type TextStyleDeclaration } from './styles.model';
 export declare class NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;