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

package/lib/src/{CreatedOnBrandCrowd-de-de-DDcraD5S.js → CreatedOnBrandCrowd-de-de-BtVKllNQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DtOeaisf.js → CreatedOnBrandCrowd-en-us-CX5V0v8u.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BZpmJPew.js → CreatedOnBrandCrowd-es-es-CbA02PCL.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CqRwC4e7.js → CreatedOnBrandCrowd-fr-ca-BQAKruBF.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CqRwC4e7.js → CreatedOnBrandCrowd-fr-fr-BQAKruBF.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DId9Dfjh.js → CreatedOnBrandCrowd-pt-br-Yk_yzB3s.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DId9Dfjh.js → CreatedOnBrandCrowd-pt-pt-Yk_yzB3s.js}

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

package/lib/src/{CreatedOnDcom-de-de-BTDfmOcm.js → CreatedOnDcom-de-de-DJZQbPSD.js}

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

package/lib/src/{CreatedOnDcom-en-us-CeAu9Ayx.js → CreatedOnDcom-en-us-BJvNAa4l.js}

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

package/lib/src/{CreatedOnDcom-es-es-WCv0K41H.js → CreatedOnDcom-es-es-CUwB1FRY.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BlfevQDY.js → CreatedOnDcom-fr-ca-CK54U4oh.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-Cvt7MHPZ.js → CreatedOnDcom-fr-fr-DuUNBGrM.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DipZuylv.js → CreatedOnDcom-pt-br-BfODpFNV.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BCw4lcKN.js → CreatedOnDcom-pt-pt-Cf6u2GCg.js}

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

package/lib/src/brand-page/__fixtures__/production-text-style-resolver.fixture.d.ts

@@ -0,0 +1,16 @@
+import type { TextStyleDeclaration, TextStyleOptions } from '../models';
+/**
+ * A frozen copy of how production (`origin/develop` before BP-5969, `view-model.util.ts`) resolved
+ * a text field's typography: the "before" for tests that keep a migrated field's look. Never point
+ * it at the current renderer; it is what published sites drew.
+ *
+ * A field on a role the site defines drew ONLY that role's typography
+ * (`getTextStyleByContentTextStyleProperty`): its own values, and the mapper defaults applied before
+ * it (`mapToButtonViewModel`'s label line height, `mapToProfileViewModel`'s sizes), never showed.
+ * A field on no role, or on a role the site lacks, drew its own values over those defaults.
+ * Colour is not modelled.
+ */
+export declare const PRODUCTION_BUTTON_DEFAULTS: Record<string, string>;
+export declare const PRODUCTION_PROFILE_DEFAULTS: Record<string, Record<string, string>>;
+export declare const PRODUCTION_HEADER_BUTTON_STYLE: TextStyleDeclaration;
+export declare const productionTypography: (style: TextStyleDeclaration | undefined, options: TextStyleOptions, mapperDefaults?: Record<string, string>) => Record<string, unknown>;

package/lib/src/brand-page/__fixtures__/production-text-style-resolver.fixture.js

@@ -0,0 +1,35 @@
+/**
+ * A frozen copy of how production (`origin/develop` before BP-5969, `view-model.util.ts`) resolved
+ * a text field's typography: the "before" for tests that keep a migrated field's look. Never point
+ * it at the current renderer; it is what published sites drew.
+ *
+ * A field on a role the site defines drew ONLY that role's typography
+ * (`getTextStyleByContentTextStyleProperty`): its own values, and the mapper defaults applied before
+ * it (`mapToButtonViewModel`'s label line height, `mapToProfileViewModel`'s sizes), never showed.
+ * A field on no role, or on a role the site lacks, drew its own values over those defaults.
+ * Colour is not modelled.
+ */
+// `mapToButtonViewModel`: an unset label line height.
+export const PRODUCTION_BUTTON_DEFAULTS = {
+    lineHeight: '1.4',
+};
+// `mapToProfileViewModel`: an unset size and line height, per field.
+export const PRODUCTION_PROFILE_DEFAULTS = {
+    titleStyle: { fontSize: '1em', lineHeight: '1.5' },
+    descriptionStyle: { fontSize: '1em', lineHeight: '1.5' },
+    nameStyle: { fontSize: '1.5em', lineHeight: '1.4' },
+};
+// `mapToHeaderButtonViewModel`: the style an absent header button style drew.
+export const PRODUCTION_HEADER_BUTTON_STYLE = {
+    textStyleType: 'buttons',
+};
+export const productionTypography = (style, options, mapperDefaults = {}) => {
+    const mapped = { ...style };
+    for (const [prop, value] of Object.entries(mapperDefaults)) {
+        mapped[prop] ||= value;
+    }
+    const option = style?.textStyleType
+        ? options[style.textStyleType]
+        : undefined;
+    return option ? { ...option.style } : mapped;
+};

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts

@@ -1,6 +1,7 @@
 import type { PropType } from 'vue';
 import type { ContactFormViewModel } from '@brand-page/view-models';
 import type { BrandPageContext, FormField, FormFieldType } from '@brand-page/models';
+import type { TextStyleOptions } from '@brand-page/models';
 import { type RichTextValue } from '@brand-page-maker/utils';
 export interface FieldValue {
     value: string;
@@ -38,6 +39,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         isLoading: import("vue").ComputedRef<boolean>;
         siteKey: import("vue").ComputedRef<string>;
     };
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
 }, {
     values: FieldValue[];
     hasSubmitted: boolean;
@@ -45,6 +47,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     submitError: string | undefined;
 }, {
     isDecorativeSubmitStyle(): boolean;
+    submitButtonRoleClass(): string | undefined;
     submitButtonStyle(): BrandPageCssStyle;
     submitButtonTextStyle(): BrandPageCssStyle;
     contentPaddingStyle(): {

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import { FORM_FIELD_TYPES } from '@brand-page/models';
 import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, isPreviewMode, } from '@brand-page/utils';
 import { isDecorativeButtonStyle } from '../../utils/button.util';
@@ -8,6 +8,7 @@ import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_
 import { getRenderText, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '@brand-page/utils/text-role-css.util';
 export default defineComponent({
     props: {
         context: {
@@ -34,8 +35,12 @@ export default defineComponent({
     },
     setup() {
         const recaptcha = useReCaptcha();
+        // 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 {
             recaptcha,
+            roleOptions,
         };
     },
     data: () => ({
@@ -51,24 +56,25 @@ export default defineComponent({
         isDecorativeSubmitStyle() {
             return isDecorativeButtonStyle(this.viewModel.buttonStyles?.selectedButtonStyleId);
         },
+        submitButtonRoleClass() {
+            return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+        },
+        // The size goes on the label alone: an em size on both the button and the label
+        // multiplies (Heading 1's 6.875em twice is ~750px). The rest stays, since the button's
+        // font sets the line box the label sits in.
         submitButtonStyle() {
             const buttonStyle = { ...this.viewModel.buttonStyles?.style };
-            const buttonTextStyle = {
+            const roleStyle = roleStyleFor(this.viewModel.buttonTextStyle?.textStyleType, this.roleOptions);
+            return {
                 ...buttonStyle,
-                ...this.viewModel.buttonTextStyle,
-                color: this.viewModel.buttonTextStyle.color || buttonStyle.color,
+                ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle, {
+                    omit: ['fontSize'],
+                }),
+                color: this.viewModel.buttonTextStyle?.color || buttonStyle.color,
             };
-            return buttonTextStyle;
         },
         submitButtonTextStyle() {
-            const buttonTextStyle = {
-                applyAutoScale: this.viewModel.buttonTextStyle.applyAutoScale,
-                fontSize: this.viewModel.buttonTextStyle.fontSize,
-                letterSpacing: this.viewModel.buttonTextStyle.letterSpacing,
-                lineHeight: this.viewModel.buttonTextStyle.lineHeight,
-                wordBreak: this.viewModel.buttonTextStyle.wordBreak,
-                overflowWrap: this.viewModel.buttonTextStyle.overflowWrap,
-            };
+            const { backgroundColor: _backgroundColor, ...buttonTextStyle } = this.viewModel.buttonTextStyle;
             return buttonTextStyle;
         },
         contentPaddingStyle() {

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, TextStyleOptions } from '@brand-page/models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     brandPageToken: {
         type: StringConstructor;
@@ -29,6 +29,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         isLoading: import("vue").ComputedRef<boolean>;
         siteKey: import("vue").ComputedRef<string>;
     };
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
 }, {
     email: string;
     emailError: string | undefined;
@@ -48,6 +49,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hasFormError(): boolean;
     isNameRequired(): boolean;
     hasSubmitError(): boolean;
+    buttonRoleClass(): string | undefined;
     buttonStyle(): BrandPageCssStyle;
     buttonText(): string;
     containerStyle(): BrandPageCssStyle;

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js

@@ -1,10 +1,11 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, isPreviewMode, } from '@brand-page/utils';
 import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '@brand-page/utils/text-role-css.util';
 const MAX_NAME_LENGTH = 200;
 export default defineComponent({
     props: {
@@ -28,9 +29,13 @@ export default defineComponent({
     },
     setup() {
         const recaptcha = useReCaptcha();
+        // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+        // the button bakes the button text style's own values, as before this change.
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
         return {
             mailingListTr,
             recaptcha,
+            roleOptions,
         };
     },
     data() {
@@ -72,6 +77,11 @@ export default defineComponent({
         hasSubmitError() {
             return Boolean(this.submitError);
         },
+        buttonRoleClass() {
+            return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+        },
+        // The button holds its own plain text, not a `TextWrapper` — so unlike the contact-form and
+        // payment boxes, its typography is applied here in full, size included.
         buttonStyle() {
             const buttonStyle = { ...this.viewModel.styles?.style };
             if (buttonStyle.borderStyle !== 'solid') {
@@ -79,7 +89,12 @@ export default defineComponent({
                 buttonStyle.color = textColor;
                 buttonStyle.backgroundColor = buttonStyle.backgroundColor;
             }
-            return { ...buttonStyle, ...this.viewModel.buttonTextStyle };
+            const roleStyle = roleStyleFor(this.viewModel.buttonTextStyle?.textStyleType, this.roleOptions);
+            return {
+                ...buttonStyle,
+                ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle),
+                color: this.viewModel.buttonTextStyle?.color ?? buttonStyle.color,
+            };
         },
         buttonText() {
             return (this.viewModel?.buttonText || contentSettingsTr('subscribePlaceholder'));

package/lib/src/brand-page/components/navigation/button-carousel/ButtonCarouselNavigation.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext, NavigationDesktop, NavigationMobile } from '../../../models';
+import type { BrandPageContext, NavigationDesktop, NavigationMobile, TextStyleOptions } from '../../../models';
 import type { NavViewModel } from '../../../view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     navId: {
@@ -22,7 +22,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavViewModel>;
         required: true;
     };
-}>, {}, {
+}>, {
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
+}, {
     hasInteracted: boolean;
     disablePrev: boolean;
     disableNext: boolean;
@@ -42,7 +44,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         scrollbar: boolean;
         threshold: number;
     };
-}, {}, {
+}, {
+    navRoleType(): string | undefined;
+    navRoleClass(): string | undefined;
+    navRoleStyle(): BrandPageCssStyle | undefined;
+    defaultTabStyle(): BrandPageCssStyle;
+    selectedTabStyle(): BrandPageCssStyle;
+}, {
     isCurrentPage(navItem: {
         relativePath: string;
     }): boolean;

package/lib/src/brand-page/components/navigation/button-carousel/ButtonCarouselNavigation.mixin.js

@@ -1,5 +1,6 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import debounce from 'lodash.debounce';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '../../../utils/text-role-css.util';
 export default defineComponent({
     props: {
         navId: {
@@ -23,6 +24,14 @@ export default defineComponent({
             required: true,
         },
     },
+    // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `ButtonCarouselNavigation.vue`
+    // invokes this one itself and spreads its return into its own `setup()`.
+    setup() {
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+        return {
+            roleOptions,
+        };
+    },
     data() {
         return {
             hasInteracted: false,
@@ -70,6 +79,31 @@ export default defineComponent({
             window.removeEventListener(`viewport:updated`, this.update);
         }
     },
+    computed: {
+        // One role backs the whole tab bar: `selectedButtonStyle` carries only override deltas
+        // over the default, never its own `textStyleType`.
+        navRoleType() {
+            return this.navigation.defaultButtonStyle?.textStyleType;
+        },
+        navRoleClass() {
+            return roleClassFor(this.navRoleType);
+        },
+        navRoleStyle() {
+            return roleStyleFor(this.navRoleType, this.roleOptions);
+        },
+        defaultTabStyle() {
+            return {
+                ...this.navigation.defaultButtonStyle,
+                ...roleTypographyStyle(this.navigation.defaultButtonStyle, this.navRoleStyle),
+            };
+        },
+        selectedTabStyle() {
+            return {
+                ...this.navigation.selectedButtonStyle,
+                ...roleTypographyStyle(this.navigation.selectedButtonStyle, this.navRoleStyle),
+            };
+        },
+    },
     methods: {
         isCurrentPage(navItem) {
             return navItem.relativePath === this.context.currentPageRelativePath;

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageContext, NavigationDesktop, NavigationMobile } from '../../../models';
+import type { BrandPageContext, NavigationDesktop, NavigationMobile, TextStyleOptions } from '../../../models';
 import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {
@@ -23,12 +23,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-}>, {}, {
+}>, {
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
+}, {
     expandedItems: Record<string, boolean>;
 }, {
     visibleNavItems(): NavItemViewModel[];
     closeButtonStyle(): BrandPageCssStyle;
+    navRoleType(): string | undefined;
+    navRoleClass(): string | undefined;
+    navRoleStyle(): BrandPageCssStyle | undefined;
     defaultButtonStyle(): BrandPageCssStyle;
+    sidebarStyle(): BrandPageCssStyle;
     selectedButtonStyle(): BrandPageCssStyle;
     defaultWrapperStyle(): BrandPageCssStyle;
     selectedWrapperStyle(): BrandPageCssStyle;

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -1,6 +1,7 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
 import { guardPreviewClick } from '../../../utils/context.util';
+import { TEXT_ROLE_OPTIONS_KEY, roleTypographyStyle, roleClassFor, roleStyleFor, } from '../../../utils/text-role-css.util';
 export default defineComponent({
     props: {
         context: {
@@ -28,6 +29,14 @@ export default defineComponent({
         },
     },
     emits: ['close-side-menu'],
+    // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `NavigationSideMenu.vue`
+    // invokes this one itself and spreads its return into its own `setup()`.
+    setup() {
+        const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+        return {
+            roleOptions,
+        };
+    },
     data() {
         return {
             expandedItems: {}, // Keep track of which navs are expanded
@@ -43,11 +52,26 @@ export default defineComponent({
         closeButtonStyle() {
             return Object.assign({}, this.styles.hamburgerMenuStyle.defaultButtonStyle, { fontSize: 'initial', lineHeight: 'initial' });
         },
+        navRoleType() {
+            return this.styles.hamburgerMenuStyle.defaultButtonStyle?.textStyleType;
+        },
+        navRoleClass() {
+            return roleClassFor(this.navRoleType);
+        },
+        navRoleStyle() {
+            return roleStyleFor(this.navRoleType, this.roleOptions);
+        },
         defaultButtonStyle() {
-            return this.styles.hamburgerMenuStyle.defaultButtonStyle;
+            const own = this.styles.hamburgerMenuStyle.defaultButtonStyle;
+            return { ...own, ...roleTypographyStyle(own, this.navRoleStyle) };
+        },
+        sidebarStyle() {
+            const { fontSize: _fontSize, ...rest } = this.defaultButtonStyle;
+            return rest;
         },
         selectedButtonStyle() {
-            return this.styles.hamburgerMenuStyle.selectedButtonStyle;
+            const own = this.styles.hamburgerMenuStyle.selectedButtonStyle;
+            return { ...own, ...roleTypographyStyle(own, this.navRoleStyle) };
         },
         // Prevents us from doubling down on em sizing of font
         defaultWrapperStyle() {

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

@@ -53,7 +53,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     pageScopeId: string;
 }, {
     brandPageToken(): string | null;
-    paletteStyleHtml(): string;
+    paletteCss(): string;
+    textRoleCss(): string;
     pageScopeAttrs(): Record<string, string | undefined>;
     contents(): ContentViewModel[];
     /**
@@ -168,5 +169,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, headerRowRendersCta, } from '../../constants';
-import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
+import { getSlugFromContext, getPageHeadingText, buildPaletteRootCssText, buildPaletteScopedCssText, buildTextRoleRootCssText, buildTextRoleScopedCssText, TEXT_ROLE_OPTIONS_KEY, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
 import { findNavItemByRelativePath, hasVisibleNavigation, } 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,
@@ -83,17 +92,21 @@ export default defineComponent({
         brandPageToken() {
             return this.viewModel?.brandPageToken || null;
         },
-        // The one palette emitter and scoper — every surface renders `Page`, so the
-        // published site and the maker preview can't disagree about a colour.
-        // The selector switches by surface (see the page-owned-palette-scoping ADR):
-        // standalone emits `:root` (SSR'd, and it must reach teleported content);
-        // template cards emit a per-instance scoped block because a grid holds many
-        // palettes in one document and they all share the fixed `--palette-N` names.
-        paletteStyleHtml() {
+        // Page.vue owns the native style node; this computed supplies CSS text only so hydration
+        // updates its contents without replacing the SSR-emitted element.
+        paletteCss() {
             const colors = this.viewModel?.styles?.colors ?? [];
             return this.context?.isTemplate
-                ? buildPaletteScopedCss(colors, this.pageScopeId)
-                : buildPaletteRootCss(colors);
+                ? buildPaletteScopedCssText(colors, this.pageScopeId)
+                : buildPaletteRootCssText(colors);
+        },
+        textRoleCss() {
+            const options = this.viewModel?.styles?.textStyles?.textStyleOptions;
+            if (!options)
+                return '';
+            return this.context?.isTemplate
+                ? buildTextRoleScopedCssText(options, this.pageScopeId)
+                : buildTextRoleRootCssText(options);
         },
         // Spread onto EVERY top-level node of Page's fragment (template mode only).
         // The root-background/overlay siblings paint values that can hold
@@ -161,22 +174,15 @@ 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;
-            }
-            const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
-                DEFAULT_FONT_FAMILY_KEY;
-            const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
-            if (textFontFamilyConfig) {
-                styles.fontFamily = [
-                    `"${textFontFamilyConfig.name}"`,
-                    ...FALLBACK_FONT_FAMILIES,
-                ].join(', ');
-            }
+            // 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.
+            // Text with no font of its own is Lato on every site (`0036-retire-text-font-family.md`).
+            styles.fontFamily = [
+                `"${FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name}"`,
+                ...FALLBACK_FONT_FAMILIES,
+            ].join(', ');
             return styles;
         },
         rootBackgroundStyles() {

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

@@ -1,6 +1,6 @@
 import type { PageFooterViewModel } from '@brand-page/view-models';
 import type { PropType } from 'vue';
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, TextStyleOptions } from '@brand-page/models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     viewModel: {
         type: PropType<PageFooterViewModel>;
@@ -19,12 +19,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: boolean;
     };
-}>, {}, {}, {
+}>, {
+    roleOptions: import("vue").ComputedRef<TextStyleOptions | undefined> | undefined;
+}, {}, {
     containerStyle(): BrandPageCssStyle;
     socialLinksIconStyle(): BrandPageCssStyle;
     isDisplayStyleCentered(): boolean;
     isDisplayStyleJustified(): boolean;
     renderText(): string;
+    copyrightRoleType(): string | undefined;
+    copyrightRoleClass(): string | undefined;
+    copyrightStyle(): BrandPageCssStyle;
 }, {
     onFooterContainerClick(): void;
     onLogoClick(tabName: string): void;