@designcrowd/library.brand-page 6.1.15 → 6.1.16-style-v2-2

package/lib/src/{CreatedOnBrandCrowd-de-de-a7cNT5AA.js → CreatedOnBrandCrowd-de-de-Bi-zaYmr.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-BpZ89I9T.js → CreatedOnBrandCrowd-en-us-SjIxE2Pg.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-Db0Ot-mQ.js → CreatedOnBrandCrowd-es-es-BYOu05ik.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Mbd7Hhxh.js → CreatedOnBrandCrowd-fr-ca-emgmIyJV.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Mbd7Hhxh.js → CreatedOnBrandCrowd-fr-fr-emgmIyJV.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B98aoT6y.js → CreatedOnBrandCrowd-pt-br-m5RFTaxL.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-B98aoT6y.js → CreatedOnBrandCrowd-pt-pt-m5RFTaxL.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-33AmrlUy.js";
+import { _ as t } from "./lib-D8usF-qk.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-b_GUYmhX.js → CreatedOnDcom-de-de-BeGHrZgm.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-33AmrlUy.js";
+import { _ as e } from "./lib-D8usF-qk.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-BtTIwekM.js → CreatedOnDcom-en-us-DvVpYfyp.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-33AmrlUy.js";
+import { _ as e } from "./lib-D8usF-qk.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-WbhHNEg-.js → CreatedOnDcom-es-es-D9khuP5r.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-33AmrlUy.js";
+import { _ as e } from "./lib-D8usF-qk.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DnQOAvS5.js → CreatedOnDcom-fr-ca-BNIVPoPK.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-33AmrlUy.js";
+import { _ as e } from "./lib-D8usF-qk.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-D7Q-aBNQ.js → CreatedOnDcom-fr-fr-CtdfFR8H.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-33AmrlUy.js";
+import { _ as e } from "./lib-D8usF-qk.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DnqkF_ve.js → CreatedOnDcom-pt-br-nFGKCRjM.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-33AmrlUy.js";
+import { _ as M } from "./lib-D8usF-qk.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-DNyyHF1o.js → CreatedOnDcom-pt-pt-BCFCFJoy.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-33AmrlUy.js";
+import { _ as M } from "./lib-D8usF-qk.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

@@ -54,6 +54,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     brandPageToken(): string | null;
     paletteStyleHtml(): string;
+    textRoleStyleHtml(): string;
     pageScopeAttrs(): Record<string, string | undefined>;
     contents(): ContentViewModel[];
     /**
@@ -167,5 +168,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, () => {
+    [x: symbol]: import("vue").ComputedRef<any>;
+}, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,6 +1,6 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
-import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
+import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, buildTextRoleRootCss, buildTextRoleScopedCss, TEXT_ROLE_OPTIONS_KEY, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
 import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
@@ -72,6 +72,15 @@ export default defineComponent({
             }),
         };
     },
+    // BP-5969: expose the live role options to every descendant TextWrapper so it can
+    // inline only its overrides and leave the role typography to the CSS class. A computed
+    // keeps it reactive (a role edit repaints), and `this` is the instance in Options-API
+    // provide(). Descendants that render outside a Page get `undefined` and bake inline.
+    provide() {
+        return {
+            [TEXT_ROLE_OPTIONS_KEY]: computed(() => this.viewModel?.styles?.textStyles?.textStyleOptions),
+        };
+    },
     data() {
         return {
             isSideMenuOpen: false,
@@ -95,6 +104,17 @@ export default defineComponent({
                 ? buildPaletteScopedCss(colors, this.pageScopeId)
                 : buildPaletteRootCss(colors);
         },
+        // BP-5969: the global text roles as a page-scoped <style> of CSS classes
+        // (design-token render). Same root/scoped split as the palette above: a role
+        // edit is one CSS-rule change that repaints every block carrying the role class.
+        textRoleStyleHtml() {
+            const options = this.viewModel?.styles?.textStyles?.textStyleOptions;
+            if (!options)
+                return '';
+            return this.context?.isTemplate
+                ? buildTextRoleScopedCss(options, this.pageScopeId)
+                : buildTextRoleRootCss(options);
+        },
         // Spread onto EVERY top-level node of Page's fragment (template mode only).
         // The root-background/overlay siblings paint values that can hold
         // `var(--palette-…)`, and a custom property applies to its own node too.
@@ -161,13 +181,10 @@ export default defineComponent({
                     ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
                 };
             }
-            // The page base coat — anything with no colour of its own inherits this
-            // (RTE text, form controls, SVG `currentColor` fills).
-            const baseTextColour = this.viewModel?.styles?.textStyles?.textStyleOptions?.paragraphs?.style
-                ?.color;
-            if (baseTextColour) {
-                styles.color = baseTextColour;
-            }
+            // BP-5969 (ADR-0019): no page base coat. A role defines typography only, so `:root`
+            // no longer paints a text colour — every text element carries its own contrast-derived
+            // colour (baked at birth, or by migration-22 for existing sites). Form controls and SVG
+            // `currentColor` fills fall back to the browser default.
             const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
                 DEFAULT_FONT_FAMILY_KEY;
             const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];

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/index.d.ts

@@ -2,7 +2,7 @@ import type { FontFamilyKey, ImagesSectionContentDisplayStyle, HeaderDisplayStyl
 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';
@@ -34,6 +34,9 @@ export declare class BackgroundShape {
     constructor(option?: Partial<BackgroundShape>);
 }
 export type BackgroundStyle = Partial<Omit<BrandPageCssStyle, 'backgroundColor'>>;
+export interface BackgroundColorStyle extends BrandPageCssStyle {
+    backgroundOpacity?: number;
+}
 /**
  * The complete default for a page's background media overlay. Seeded into
  * metadata (constructor for new models, migration-20.5 for persisted partials) so
@@ -174,7 +177,7 @@ export interface TextContent extends Content {
      * @deprecated Use `textStyle` instead. For backward compatibility.
      */
     textSize: BrandPageCssStyle;
-    textStyle: TextStyleDeclaration;
+    textStyle: RteTextRole;
     /**
      * @deprecated Use `textStyle` instead. For backward compatibility.
      */
@@ -194,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;
@@ -209,7 +212,7 @@ export interface MailingListContent extends Content {
     acceptedFields?: 'emailOnly' | 'nameAndEmail';
     title: RichTextValue;
     buttonText: string;
-    titleStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
     buttonTextStyle: TextStyleDeclaration;
     backgroundStyle?: BrandPageCssStyle;
 }
@@ -267,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;
@@ -288,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[];
@@ -354,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 {
@@ -374,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;
@@ -403,7 +406,7 @@ export interface TestimonialSectionContent extends Content {
     title: RichTextValue;
     displayStyle: string;
     items: TestimonialItems[];
-    titleStyle: TextStyleDeclaration;
+    titleStyle: RteTextRole;
     testimonialStyle: TextStyleDeclaration;
     nameStyle: TextStyleDeclaration;
     positionStyle: TextStyleDeclaration;
@@ -417,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;
@@ -445,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";
@@ -468,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;
@@ -519,7 +522,7 @@ export declare abstract class AbstractPageHeaderStyles {
     logoImage: LogoImageModel;
     logoTemplateImage: LogoTemplateImageModel | undefined;
     logoImageBase64Url?: string;
-    backgroundStyle: BrandPageCssStyle;
+    backgroundStyle: BackgroundColorStyle;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
     protected constructor(options?: AbstractPageHeaderStylesType);

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

@@ -253,7 +253,10 @@ export class AbstractPageHeaderStyles {
         this.logoDraftToken = options.logoDraftToken || '';
         this.logoVariation = options.logoVariation || 0;
         this.style = options.style || {};
-        this.backgroundStyle = options.backgroundStyle || {};
+        this.backgroundStyle = {
+            ...(options.backgroundStyle || {}),
+            backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
+        };
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {

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

@@ -1,12 +1,47 @@
 import type { FontFamilyKey } from '../constants';
+/**
+ * The 10 canonical global text roles (BP-5969) plus the 4 legacy roles.
+ *
+ * Legacy keys (`titles`/`headings`/`paragraphs`/`buttons`) are retained ONLY so
+ * pre-migration content keeps resolving until migration-22 converts it; they are
+ * hidden from the panel/picker (see `CANONICAL_TEXT_STYLE_TYPES`) and no new code
+ * should write them. See ADR-0018 and docs/plans/feat-bp-5969-*.
+ */
 export declare const TEXT_STYLE_TYPES: {
+    readonly heading1: "heading1";
+    readonly heading2: "heading2";
+    readonly heading3: "heading3";
+    readonly heading4: "heading4";
+    readonly heading5: "heading5";
+    readonly heading6: "heading6";
+    readonly paragraph1: "paragraph1";
+    readonly paragraph2: "paragraph2";
+    readonly paragraph3: "paragraph3";
+    readonly button: "button";
     readonly titles: "titles";
     readonly headings: "headings";
     readonly paragraphs: "paragraphs";
     readonly buttons: "buttons";
 };
 export type TextStyleType = keyof typeof TEXT_STYLE_TYPES;
+/** The 10 roles shown in the panel/picker, in display order. */
+export declare const CANONICAL_TEXT_STYLE_TYPES: readonly ["heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph1", "paragraph2", "paragraph3", "button"];
+export type CanonicalTextStyleType = (typeof CANONICAL_TEXT_STYLE_TYPES)[number];
+/** Legacy roles, retained for resolution of un-migrated content only. */
+export declare const LEGACY_TEXT_STYLE_TYPES: readonly ["titles", "headings", "paragraphs", "buttons"];
+export type LegacyTextStyleType = (typeof LEGACY_TEXT_STYLE_TYPES)[number];
+export declare const isLegacyTextStyleType: (type: string | undefined) => type is LegacyTextStyleType;
 export declare const TEXT_STYLE_TYPES_DISPLAY_NAME_MAP: () => {
+    heading1: any;
+    heading2: any;
+    heading3: any;
+    heading4: any;
+    heading5: any;
+    heading6: any;
+    paragraph1: any;
+    paragraph2: any;
+    paragraph3: any;
+    button: any;
     titles: any;
     headings: any;
     paragraphs: any;
@@ -18,8 +53,17 @@ export type TextStyleDeclaration = BrandPageCssStyle & {
     applyAutoScale?: boolean;
 };
 export type TextStyleDeclarationWithoutTextAlign = Omit<TextStyleDeclaration, 'textAlign'>;
+/**
+ * BP-5969 (ADR-0019): an RTE-paired section field's style, with **colour decoupled**. Colour
+ * is the ONE thing removed from the style object — it lives in the RTE mark now (baked
+ * contrast at birth / by migration-22), so this type has no `color` and nothing can read a
+ * stale one off an RTE field. Everything else stays: typography here is a genuine per-block
+ * OVERRIDE (a title set to a non-role font/size) that the renderer applies via
+ * `overrideTypographyStyle`, and dropping it would lose that override through migration — so
+ * only `color` goes. Non-RTE per-item styles keep the full `TextStyleDeclaration`.
+ */
+export type RteTextRole = Omit<TextStyleDeclaration, 'color'>;
 export interface GlobalTextStyleDeclaration {
-    color: string | undefined;
     fontFamily: string | undefined;
     fontSize: string | undefined;
     fontStyle: string | undefined;