@designcrowd/library.brand-page 6.1.17 → 6.1.18-style-v2-4

package/lib/src/{CreatedOnBrandCrowd-de-de-CK6etjY1.js → CreatedOnBrandCrowd-de-de-T6IIvcWO.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-D2_dNMC_.js → CreatedOnBrandCrowd-en-us-CcakI_4t.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DOfe1n1i.js → CreatedOnBrandCrowd-es-es-BuGC5ePC.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-8DzyX3jw.js → CreatedOnBrandCrowd-fr-ca-DLl1iE_a.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-8DzyX3jw.js → CreatedOnBrandCrowd-fr-fr-DLl1iE_a.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Cv554e0a.js → CreatedOnBrandCrowd-pt-br-BPKSflng.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Cv554e0a.js → CreatedOnBrandCrowd-pt-pt-BPKSflng.js}

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

package/lib/src/{CreatedOnDcom-de-de-DvfcEbrX.js → CreatedOnDcom-de-de-XZW5aUpu.js}

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

package/lib/src/{CreatedOnDcom-en-us-1CwdKDdv.js → CreatedOnDcom-en-us-BWMDFfWH.js}

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

package/lib/src/{CreatedOnDcom-es-es-DcYnDykc.js → CreatedOnDcom-es-es-DaMSB_Ks.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BsFnW3Gm.js → CreatedOnDcom-fr-ca-vmogx8rl.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CK2r77t1.js → CreatedOnDcom-fr-fr-BAwXuiS9.js}

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

package/lib/src/{CreatedOnDcom-pt-br-F9xrm0CV.js → CreatedOnDcom-pt-br-BWgKlfhZ.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-B1Cf7iLu.js → CreatedOnDcom-pt-pt-hj2Vs_8z.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-YpnLrt3k.js";
+import { _ as M } from "./lib-Ox43LM9t.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-0020): 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';
@@ -177,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.
      */
@@ -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;

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

@@ -1,6 +1,8 @@
 import type { Content } from './content.model';
 import type { ProductModel } from './shop.model';
 import type { TextStyleDeclaration } from './styles.model';
+import type { JSONContent } from '@tiptap/vue-3';
+type RteText = string | JSONContent;
 export declare const STRIPE_ADDRESS_LIMITS: {
     readonly name: {
         readonly min: 1;
@@ -118,11 +120,11 @@ export interface RequestPaymentConfig extends PaymentConfig {
 }
 export interface RequestPaymentContent extends Content {
     type: 'request-payment';
-    description: string;
+    description: RteText;
     displayStyle: string;
     requestPaymentConfig: RequestPaymentConfig;
     successMessage: string;
-    title: string;
+    title: RteText;
     fillColor: BrandPageCssStyle;
     defaultBorderColor: BrandPageCssStyle;
     selectedBorderColor: BrandPageCssStyle;
@@ -144,12 +146,12 @@ export interface ShopContentConfig extends PaymentConfig {
 }
 export interface ShopContent extends Content {
     type: 'shop-section';
-    description: string;
+    description: RteText;
     successMessage: string;
     products: ProductModel[];
     displayStyle: string;
     aspectRatio: string;
-    title: string;
+    title: RteText;
     fillColor: BrandPageCssStyle;
     defaultBorderColor: BrandPageCssStyle;
     textColor?: BrandPageCssStyle;
@@ -165,8 +167,8 @@ export interface SupportMeConfig extends PaymentConfig {
 }
 export interface SupportMeContent extends Content {
     type: 'support-me';
-    title: string;
-    description: string;
+    title: RteText;
+    description: RteText;
     displayStyle: string;
     successMessage: string;
     supportMeConfig: SupportMeConfig;

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-0019 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-0020): 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;