@designcrowd/library.brand-page 6.1.10 → 6.1.11-ast-header-opacity

package/lib/src/{CreatedOnBrandCrowd-de-de-nsMF2NQ9.js → CreatedOnBrandCrowd-de-de-CktLQkFP.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BQI_UCR7.js → CreatedOnBrandCrowd-en-us-D6HNUOiU.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DgNOoSPn.js → CreatedOnBrandCrowd-es-es-B9WlJ-K0.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-JFRaxjvx.js → CreatedOnBrandCrowd-fr-ca-BqaKSx5Z.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-JFRaxjvx.js → CreatedOnBrandCrowd-fr-fr-BqaKSx5Z.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DP6_-90i.js → CreatedOnBrandCrowd-pt-br-CZIdZJXJ.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DP6_-90i.js → CreatedOnBrandCrowd-pt-pt-CZIdZJXJ.js}

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

package/lib/src/{CreatedOnDcom-de-de-07F2wjkk.js → CreatedOnDcom-de-de-BFWQ0l0n.js}

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

package/lib/src/{CreatedOnDcom-en-us-DaV9sa6e.js → CreatedOnDcom-en-us-DkWqmrra.js}

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

package/lib/src/{CreatedOnDcom-es-es-73uOymvv.js → CreatedOnDcom-es-es-YbgOM-xc.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-Ci9Ome30.js → CreatedOnDcom-fr-ca-D3VNHHhZ.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DLHuMHfE.js → CreatedOnDcom-fr-fr-DOg4SZ-0.js}

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

package/lib/src/{CreatedOnDcom-pt-br-Fbt7tY-E.js → CreatedOnDcom-pt-br-BfQrkhp2.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-V2jTB6of.js → CreatedOnDcom-pt-pt-BUTTvb8-.js}

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

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

@@ -5,4 +5,5 @@ export * from './misc.constants';
 export * from './logo.constants';
 export * from './sections/header-display.constants';
 export * from './sections/navigation-display.constants';
+export * from './sections/navigation-type.constants';
 export * from './sections/footer-display.constants';

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

@@ -5,4 +5,5 @@ export * from './misc.constants';
 export * from './logo.constants';
 export * from './sections/header-display.constants';
 export * from './sections/navigation-display.constants';
+export * from './sections/navigation-type.constants';
 export * from './sections/footer-display.constants';

package/lib/src/brand-page/constants/sections/header-display.constants.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import type { NavigationType } from './navigation-type.constants';
 export declare const HEADER_DISPLAY: {
     /** @deprecated */
     readonly ALIGN_CENTERED: "centered";
@@ -37,7 +38,7 @@ export type PageSectionDisplayStyle = (typeof HEADER_DISPLAY)[keyof typeof HEADE
 export type HeaderDisplayStyle = PageSectionDisplayStyle;
 interface HeaderDisplayStyleConfig {
     viewMode: 'desktop' | 'mobile';
-    navType: 'tabs' | 'hamburger';
+    navType: NavigationType;
     supportLogo: boolean;
     supportedNavTypes: string[];
     option: ButtonGroupOption;

package/lib/src/brand-page/constants/sections/header-display.constants.js

@@ -44,7 +44,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_1,
             iconName: 'header-desktop-nav-style-tab-display-style-1',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_1,
             isSelected: false,
         },
@@ -57,7 +57,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_2,
             iconName: 'header-desktop-nav-style-tab-display-style-2',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_2,
             isSelected: false,
         },
@@ -70,7 +70,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_3,
             iconName: 'header-desktop-nav-style-tab-display-style-3',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_3,
             isSelected: false,
         },
@@ -83,7 +83,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_4,
             iconName: 'header-desktop-nav-style-tab-display-style-4',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_4,
             isSelected: false,
         },
@@ -96,7 +96,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_5,
             iconName: 'header-desktop-nav-style-tab-display-style-5',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_5,
             isSelected: false,
         },
@@ -109,7 +109,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_6,
             iconName: 'header-desktop-nav-style-tab-display-style-6',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_6,
             isSelected: false,
         },
@@ -123,7 +123,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
             iconName: 'header-nav-style-tab-display-style-no-logo-1',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
             isSelected: false,
         },
@@ -136,7 +136,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
             iconName: 'header-nav-style-tab-display-style-no-logo-2',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
             isSelected: false,
         },
@@ -149,7 +149,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_3,
             iconName: 'header-nav-style-tab-display-style-no-logo-3',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_3,
             isSelected: false,
         },
@@ -168,7 +168,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
             iconName: 'header-desktop-nav-style-hamburger-display-style-1',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
             isSelected: false,
         },
@@ -186,7 +186,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
             iconName: 'header-desktop-nav-style-hamburger-display-style-2',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
             isSelected: false,
         },
@@ -205,7 +205,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_1,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-1',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_1,
             isSelected: false,
         },
@@ -223,7 +223,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_2,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-2',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_2,
             isSelected: false,
         },
@@ -241,7 +241,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-3',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
             isSelected: false,
         },
@@ -255,7 +255,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_TAB_1,
             iconName: 'header-mobile-nav-style-tab-display-style-1',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_1,
             isSelected: false,
         },
@@ -268,7 +268,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_TAB_2,
             iconName: 'header-mobile-nav-style-tab-display-style-2',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_2,
             isSelected: false,
         },
@@ -282,7 +282,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
             iconName: 'header-nav-style-tab-display-style-no-logo-2',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
             isSelected: false,
         },
@@ -301,7 +301,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
             iconName: 'header-mobile-nav-style-hamburger-display-style-1',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
             isSelected: false,
         },
@@ -319,7 +319,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_2,
             iconName: 'header-mobile-nav-style-hamburger-display-style-2',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_2,
             isSelected: false,
         },
@@ -337,7 +337,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_3,
             iconName: 'header-mobile-nav-style-hamburger-display-style-3',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_3,
             isSelected: false,
         },
@@ -355,7 +355,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_4,
             iconName: 'header-mobile-nav-style-hamburger-display-style-4',
-            iconViewBox: '0 0 169 57',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_4,
             isSelected: false,
         },
@@ -374,7 +374,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-1',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
             isSelected: false,
         },
@@ -392,7 +392,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-2',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
             isSelected: false,
         },
@@ -410,7 +410,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         option: {
             value: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
             iconName: 'header-nav-style-hamburger-display-style-no-logo-3',
-            iconViewBox: '0 0 169 75',
+            iconViewBox: '0 0 160 56',
             dataAttribute: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
             isSelected: false,
         },

package/lib/src/brand-page/constants/sections/navigation-type.constants.d.ts

@@ -0,0 +1,9 @@
+import type { NavigationDisplayType } from './navigation-display.constants';
+export declare const NAVIGATION_TYPE: {
+    readonly bar: "tabs";
+    readonly hamburger: "hamburger";
+};
+export type NavigationType = (typeof NAVIGATION_TYPE)[keyof typeof NAVIGATION_TYPE];
+export declare const NAVIGATION_TYPE_BY_DISPLAY_TYPE: Record<NavigationDisplayType, NavigationType>;
+export declare const NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE: Record<NavigationType, NavigationDisplayType>;
+export declare const getNavigationType: (displayType: string) => NavigationType;

package/lib/src/brand-page/constants/sections/navigation-type.constants.js

@@ -0,0 +1,33 @@
+import { NAVIGATION_DISPLAY } from './navigation-display.constants';
+export const NAVIGATION_TYPE = {
+    // 'tabs' matches the legacy persisted HEADER_DISPLAY_STYLE_CONFIGS.navType
+    // value — the key/value mismatch is load-bearing for backward compat.
+    bar: 'tabs',
+    hamburger: 'hamburger',
+};
+// Exhaustive: TS forces every NAVIGATION_DISPLAY value (current + deprecated legacy) to be classified
+// into a group here, so a future style can't be added without deciding which group it belongs to.
+export const NAVIGATION_TYPE_BY_DISPLAY_TYPE = {
+    [NAVIGATION_DISPLAY.TAB_1]: NAVIGATION_TYPE.bar,
+    [NAVIGATION_DISPLAY.TAB_2]: NAVIGATION_TYPE.bar,
+    [NAVIGATION_DISPLAY.HAMBURGER_1]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.HAMBURGER_2]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.HAMBURGER_3]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.HAMBURGER_4]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.tabs]: NAVIGATION_TYPE.bar,
+    [NAVIGATION_DISPLAY.buttons]: NAVIGATION_TYPE.bar,
+    [NAVIGATION_DISPLAY.hamburger]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.hamburgerLight]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.hamburgerLightHalf]: NAVIGATION_TYPE.hamburger,
+    [NAVIGATION_DISPLAY.hamburgerRounded]: NAVIGATION_TYPE.hamburger,
+};
+export const NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE = {
+    [NAVIGATION_TYPE.bar]: NAVIGATION_DISPLAY.TAB_1,
+    [NAVIGATION_TYPE.hamburger]: NAVIGATION_DISPLAY.HAMBURGER_1,
+};
+// Falls back to a substring sniff for any value not in the map (e.g. a hand-edited
+// or not-yet-migrated draft) so this can never fail to classify a stored displayType.
+export const getNavigationType = (displayType) => NAVIGATION_TYPE_BY_DISPLAY_TYPE[displayType] ??
+    (displayType.includes('hamburger')
+        ? NAVIGATION_TYPE.hamburger
+        : NAVIGATION_TYPE.bar);

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

@@ -520,6 +520,8 @@ export declare abstract class AbstractPageHeaderStyles {
     logoTemplateImage: LogoTemplateImageModel | undefined;
     logoImageBase64Url?: string;
     backgroundStyle: BrandPageCssStyle;
+    /** 0-100. Alpha applied to backgroundStyle.backgroundColor at render time only. */
+    backgroundOpacity: number;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
     protected constructor(options?: AbstractPageHeaderStylesType);
@@ -556,7 +558,7 @@ export declare abstract class AbstractPageFooterStyles {
     viewport: ViewportsType;
     logoImageHeight: string | undefined;
     logoImageWidth: string | undefined;
-    protected constructor(options?: AbstractPageFooterStylesType, theme?: Theme);
+    protected constructor(options?: AbstractPageFooterStylesType, _theme?: Theme);
 }
 export type MediaTypes = 'getty-video' | 'user-upload-video' | 'image';
 export declare abstract class AbstractMedia {

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

@@ -225,6 +225,8 @@ export class AbstractPageHeaderStyles {
     logoTemplateImage;
     logoImageBase64Url;
     backgroundStyle;
+    /** 0-100. Alpha applied to backgroundStyle.backgroundColor at render time only. */
+    backgroundOpacity;
     style;
     viewport;
     constructor(options = {}) {
@@ -254,6 +256,7 @@ export class AbstractPageHeaderStyles {
         this.logoVariation = options.logoVariation || 0;
         this.style = options.style || {};
         this.backgroundStyle = options.backgroundStyle || {};
+        this.backgroundOpacity = options.backgroundOpacity ?? 100;
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {
@@ -313,7 +316,7 @@ export class AbstractPageFooterStyles {
     viewport;
     logoImageHeight;
     logoImageWidth;
-    constructor(options = {}, theme) {
+    constructor(options = {}, _theme) {
         if (typeof options.viewport === 'undefined') {
             throw new Error('"viewport" is required');
         }
@@ -378,11 +381,11 @@ export class AbstractPageFooterStyles {
                 imageLink: '',
             },
         ];
-        // Seed the social-icon colour from the theme's PRIMARY (logo text) colour: the
-        // footer background is transparent, so icons sit on the page background — the
-        // logo-background colour — and need the contrasting one to stay legible.
-        // Object.assign so an explicit persisted colour still wins.
-        this.iconStyle = Object.assign(theme?.primaryColor ? { fill: theme.primaryColor } : {}, options.iconStyle || {});
+        // No colour seed: the social icons carry no fill of their own, so an unstyled footer
+        // leaves them unset and the fallback is decided downstream — migration-21 bakes an
+        // 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;
     }
 }

package/lib/src/brand-page/utils/container-text-color.util.d.ts

@@ -57,10 +57,13 @@ export declare const containerTextColorDefaults: (content: Content, styles: Page
  * than silently recolouring published sites to the linked global — the exact trap ADR 0014
  * names, here applied to the migration bake (ADR 0015).
  *
- * Two frame families, mirroring the renderer:
- *  - **text / profile** — framed when the content has its own SOLID background (gate mirrors
- *    the view-model's container gate: a `background`/`backgroundColor` present and not an
- *    alpha-`00` hex).
+ * Two frame families:
+ *  - **text / profile** — framed when the content has its own painted background. The gate
+ *    deliberately mirrors the PRE-V2 renderer (`!isHexTransparent`), NOT the current
+ *    view-model gate (`!isTransparentColour`): the legacy renderer framed the literal
+ *    `'transparent'` (the maker's default background) too — only an alpha-`00` hex was
+ *    unframed — so its empty-mark RTE inherited the button colour. This bake must reproduce
+ *    that, or every default text/profile section silently recolours to the root paint.
  *  - **the container-bound blocks** (mailing-list, request-payment, support-me, non-brandSite
  *    contact-form) — always framed; `containerSurfaceForContent` is the existing oracle for
  *    "does this block paint a frame" (and encodes the brandSite contact-form carve-out), and

package/lib/src/brand-page/utils/container-text-color.util.js

@@ -1,5 +1,5 @@
 import { BRAND_PAGE_TYPES } from '../models';
-import { backgroundColorFromStyle, isTransparentColour } from './color.util';
+import { backgroundColorFromStyle, isTransparentColour, isHexTransparent, } from './color.util';
 import { resolveColorReference, bestContrastBrandRole, toColorVarReference, roleValueOrDefault, } from './color-palette.util';
 /**
  * The text-style fields that sit on the block's filled surface. `buttonTextStyle` is
@@ -167,10 +167,13 @@ const OWN_BACKGROUND_FRAME_TYPES = new Set([
  * than silently recolouring published sites to the linked global — the exact trap ADR 0014
  * names, here applied to the migration bake (ADR 0015).
  *
- * Two frame families, mirroring the renderer:
- *  - **text / profile** — framed when the content has its own SOLID background (gate mirrors
- *    the view-model's container gate: a `background`/`backgroundColor` present and not an
- *    alpha-`00` hex).
+ * Two frame families:
+ *  - **text / profile** — framed when the content has its own painted background. The gate
+ *    deliberately mirrors the PRE-V2 renderer (`!isHexTransparent`), NOT the current
+ *    view-model gate (`!isTransparentColour`): the legacy renderer framed the literal
+ *    `'transparent'` (the maker's default background) too — only an alpha-`00` hex was
+ *    unframed — so its empty-mark RTE inherited the button colour. This bake must reproduce
+ *    that, or every default text/profile section silently recolours to the root paint.
  *  - **the container-bound blocks** (mailing-list, request-payment, support-me, non-brandSite
  *    contact-form) — always framed; `containerSurfaceForContent` is the existing oracle for
  *    "does this block paint a frame" (and encodes the brandSite contact-form carve-out), and
@@ -189,7 +192,9 @@ export const rteFrameFallbackColour = (content, styles, brandPageType) => {
     if (OWN_BACKGROUND_FRAME_TYPES.has(content.type)) {
         const background = content.backgroundColor;
         const reference = background?.background || background?.backgroundColor;
-        return reference && !isTransparentColour(reference)
+        // `isHexTransparent`, not `isTransparentColour`: the pre-V2 renderer framed the literal
+        // `'transparent'` (only an alpha-00 hex was unframed), so the bake must too — see docblock.
+        return reference && !isHexTransparent(reference)
             ? buttonTextColour
             : undefined;
     }

package/lib/src/brand-page/utils/migration/migration-21.js

@@ -356,6 +356,63 @@ export const moveRootTextColourIntoGlobalStyles = (brandPageModel) => {
     // Copy and delete stay together so the source is never dropped unconverted.
     delete textStyles['style'];
 };
+/* -------------------------------------------------------------------------- *
+ * Step FINAL−: bake the social-icon fills the palette walk leaves unset
+ * -------------------------------------------------------------------------- */
+/**
+ * The footer social icons carry no `fill` in their SVGs, so an unset footer icon painted
+ * the SVG default (black). Baked as a LITERAL, not a palette ref — a fixed fallback for
+ * that previously-implicit default, so it does not mint a palette custom or follow palette
+ * edits. Painted after pass B, so referencify never sees it.
+ */
+const FOOTER_ICON_FALLBACK_COLOUR = '#000000';
+/**
+ * Bake the two social-icon fills that neither the palette walk nor a resolver sets, so
+ * each persists an explicit colour instead of a render-time seed that changed under V2:
+ *
+ * - **social-links content** (`iconFillStyles.fill`) → the site's ROOT text colour, the
+ *   colour the icon followed before the palette split (`styles.textStyles.style.color`).
+ *   Read here — already referencified by pass B — BEFORE
+ *   `moveRootTextColourIntoGlobalStyles` retires it, which is why this runs at Step FINAL−.
+ * - **footer** (`pageFooter{Desktop,Mobile}.iconStyle.fill`) → a literal black
+ *   (`FOOTER_ICON_FALLBACK_COLOUR`).
+ *
+ * Blank-only: an explicit persisted colour is never touched (`Object`-spread with the fill
+ * appended only when absent). A re-run finds every fill set, so it is a no-op.
+ */
+const bakeIconColours = (brandPageModel) => {
+    const rootTextColour = legacyRootTextColour(brandPageModel);
+    if (!isBlankColorValue(rootTextColour)) {
+        for (const page of brandPageModel.pages ?? []) {
+            for (const content of page.contents ?? []) {
+                if (content.type !== 'social-links') {
+                    continue;
+                }
+                const fields = content;
+                const iconFillStyles = (fields.iconFillStyles ?? {});
+                if (isBlankColorValue(iconFillStyles.fill)) {
+                    fields.iconFillStyles = { ...iconFillStyles, fill: rootTextColour };
+                }
+            }
+        }
+    }
+    for (const footer of [
+        brandPageModel.pageFooterDesktop,
+        brandPageModel.pageFooterMobile,
+    ]) {
+        if (!footer) {
+            continue;
+        }
+        const footerRecord = footer;
+        const iconStyle = (footerRecord.iconStyle ?? {});
+        if (isBlankColorValue(iconStyle.fill)) {
+            footerRecord.iconStyle = {
+                ...iconStyle,
+                fill: FOOTER_ICON_FALLBACK_COLOUR,
+            };
+        }
+    }
+};
 /* -------------------------------------------------------------------------- *
  * Step 0.1: retire styles.logoStyles.backgroundStyle onto the logo content
  * -------------------------------------------------------------------------- */
@@ -707,6 +764,11 @@ export const migration21 = async (migrationResult, _options) => {
     const referencify = makeReferencifyTransform(builder, paletteRoleByCanonical);
     parts.forEach((part) => walkModelColors(part, referencify, true));
     brandPageModel.styles.colors = builder.toColorItems();
+    // ---- Step FINAL−: bake icon fills before the root colour is retired ----
+    // Social-links icons take the now-referencified root text colour they followed before
+    // the palette split; footer icons take a literal black fallback. Reads the root ref, so
+    // it MUST precede its retirement below.
+    bakeIconColours(brandPageModel);
     // ---- Step FINAL: retire the root text colour (order matters — see docblock) ----
     moveRootTextColourIntoGlobalStyles(brandPageModel);
     // ---- Step FINAL+1: bake the resolved colour into inherit-only RTE runs ----

package/lib/src/brand-page/utils/view-model.util.js

@@ -2,7 +2,7 @@ import { reactive } from 'vue';
 import { assertUnreachable } from '../../helpers/ts.helper';
 import { ButtonStyles, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
-import { isTransparentColour, mutedTextForBackground, backgroundColorFromStyle, } from './color.util';
+import { backgroundColorFromStyle, isTransparentColour, mutedTextForBackground, withColorOpacity, } from './color.util';
 import { resolveColorReference } from './color-palette.util';
 import { containerTextColorDefaults, containerSurfaceForContent, } from './container-text-color.util';
 import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, } from '../constants';
@@ -737,7 +737,28 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
                 hamburgerMenuStyle,
             }),
         style: pageHeader.style,
-        backgroundStyle: pageHeader.backgroundStyle,
+        backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+        backgroundOpacity: pageHeader.backgroundOpacity,
+    };
+};
+// Composites backgroundOpacity into backgroundColor's alpha channel so the
+// header container's own paint is translucent without affecting children
+// (unlike CSS `opacity`, which would fade the logo/nav/text too).
+const getHeaderBackgroundStyleWithOpacity = (pageHeader) => {
+    const { backgroundStyle } = pageHeader;
+    const backgroundColor = backgroundStyle.backgroundColor;
+    const backgroundOpacity = pageHeader.backgroundOpacity ?? 100;
+    if (backgroundOpacity >= 100 ||
+        !backgroundColor ||
+        isTransparentColour(backgroundColor)) {
+        return backgroundStyle;
+    }
+    // withColorOpacity (not setRgbAlpha) — it fades a `var(--palette-n)` reference
+    // via color-mix instead of handing it back unfaded, which matters now that a
+    // colour-matched header background can be a palette reference.
+    return {
+        ...backgroundStyle,
+        backgroundColor: withColorOpacity(backgroundColor, backgroundOpacity / 100),
     };
 };
 export const mapToPageFooterViewModel = (pageFooter, pageStyles, useOldLogoRenderSize = false) => {