@designcrowd/library.brand-page 5.18.4 → 5.18.6-ast-padding-1

package/lib/src/{CreatedOnBrandCrowd-de-de-DQLtpdLe.js → CreatedOnBrandCrowd-de-de-CAtPZtwo.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CvEhlADd.js → CreatedOnBrandCrowd-en-us-Dcx4yFkK.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-pYQeTTC0.js → CreatedOnBrandCrowd-es-es-DpodH0gD.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CcE-iCEq.js → CreatedOnBrandCrowd-fr-ca-DZbMRJn-.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CcE-iCEq.js → CreatedOnBrandCrowd-fr-fr-DZbMRJn-.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-OyhWWWyO.js → CreatedOnBrandCrowd-pt-br-C3gBveLk.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-OyhWWWyO.js → CreatedOnBrandCrowd-pt-pt-C3gBveLk.js}

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

package/lib/src/{CreatedOnDcom-de-de-DH98FFLS.js → CreatedOnDcom-de-de-DHNyyTV9.js}

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

package/lib/src/{CreatedOnDcom-en-us-DK67NN1r.js → CreatedOnDcom-en-us-BjqZ0Jmw.js}

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

package/lib/src/{CreatedOnDcom-es-es-9-QU4BU6.js → CreatedOnDcom-es-es-tiNjDJmH.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-U9J9H9VB.js → CreatedOnDcom-fr-ca-COUSI6w1.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DqdzB1DJ.js → CreatedOnDcom-fr-fr-c3UCfh9A.js}

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

package/lib/src/{CreatedOnDcom-pt-br-c4UiWtkB.js → CreatedOnDcom-pt-br-U1jbo_g5.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Do2qJsYp.js → CreatedOnDcom-pt-pt-BOW_n3bo.js}

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

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

@@ -45,6 +45,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     submitButtonStyle(): BrandPageCssStyle;
     submitButtonTextStyle(): BrandPageCssStyle;
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     hasCard(): boolean;
     hasBgImage(): boolean;
     hasBgColor(): boolean;

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

@@ -4,7 +4,7 @@ import { getEmailValidationError, getMessageValidationError, getNameValidationEr
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
-import { getRenderText } from '@brand-page/utils';
+import { getRenderText, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
@@ -64,6 +64,9 @@ export default defineComponent({
             };
             return buttonTextStyle;
         },
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         hasCard() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
                 this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE);
@@ -72,9 +75,10 @@ export default defineComponent({
             return this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE;
         },
         hasBgColor() {
-            return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
-                this.viewModel.layoutStyle === TEXT_ONLY ||
-                this.viewModel.layoutStyle === ALIGN_CENTERED);
+            // Every brandSite layout applies the background colour on the section
+            // root (banner-style) so the padding control reveals it; for the image
+            // layouts it only shows in the padding bands around the image block.
+            return Boolean(this.viewModel.layoutStyle);
         },
         isCenteredLayout() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.d.ts

@@ -23,6 +23,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {
     imageModalSelectedImageIndex: number | undefined;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     getContainerStyle(): BrandPageCssStyle;
     images(): any[] | undefined;
     galleryType(): GalleryType;

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import { GALLERY_TYPES } from '@brand-page/models';
@@ -29,6 +30,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         getContainerStyle() {
             if (this.galleryType === 'carousel') {
                 const maxWidth = this.containerClientWidth

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

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSubmitting: boolean;
     show: boolean;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     hasNameError(): boolean;
     hasEmailError(): boolean;
     hasFormError(): boolean;

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
@@ -51,6 +51,9 @@ export default defineComponent({
         }
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         hasNameError() {
             return !!this.nameError;
         },

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

@@ -21,6 +21,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedPaymentOptionIds: string[];
     imageType: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     isCustomerRequestDetailsValid(): boolean;
     paymentRequestDetails(): PaymentRequestDetails;
     paymentOptions(): PaymentOption[];

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

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import { PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../../models';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
@@ -28,6 +29,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         isCustomerRequestDetailsValid() {
             return (!this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||
                 this.customerRequestDetails === undefined ||

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

@@ -17,6 +17,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prevCustomAmount: string;
     customAmount: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     isCustomAmountFieldVisible(): boolean;
     isCustomerMessageFieldVisible(): boolean;
     isCustomerMessageValid(): boolean;

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
-import { isPaymentAmountValid } from '../../../utils';
+import { isPaymentAmountValid, contentPaddingStyle as toContentPaddingStyle, } from '../../../utils';
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
@@ -24,6 +24,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         isCustomAmountFieldVisible() {
             return this.viewModel.supportMeConfig.paymentOptions.some((o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME);
         },

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

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isCollapsed: boolean;
     title: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     arrowStyle(): BrandPageCssStyle;
     containerStyle(): BrandPageCssStyle;
     videoUrl(): string;

package/lib/src/brand-page/components/video/Video.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../constants';
 export default defineComponent({
@@ -16,6 +17,9 @@ export default defineComponent({
         title: 'Video',
     }),
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         arrowStyle() {
             return {
                 color: this.viewModel.buttonStyles.style?.color,

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

@@ -29,6 +29,36 @@ export declare const TEXT_ONLY = "text-only";
 export declare const ALIGN_LEFT_FULL_IMAGE = "left-aligned-full-image";
 export declare const ALIGN_RIGHT_FULL_IMAGE = "right-aligned-full-image";
 export declare const ALTERNATE_IMAGE = "alternate-image";
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: their
+ * padding sits on the section root and reveals the background colour around
+ * the image block (same as the banner), while the spacing inside/over the
+ * image stays fixed — existing pages rendered the image flush to the section
+ * edges.
+ */
+export declare const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number>;
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export declare const BANNER_DEFAULT_PADDING = 32;
+export declare const BANNER_FULL_BLEED_DISPLAY_STYLES: string[];
+export declare const bannerDisplayStyleDefaultPadding: (displayStyle?: string) => number;
+/**
+ * About: same rule as the banner. The two full-image display styles render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0;
+ * every other About style keeps 32. Used by the About display-style convertor
+ * and the migration backfill.
+ */
+export declare const ABOUT_DEFAULT_PADDING = 32;
+export declare const ABOUT_FULL_BLEED_DISPLAY_STYLES: string[];
+export declare const aboutDisplayStyleDefaultPadding: (displayStyle?: string) => number;
 export declare const BIG_IMAGE = "big-image";
 export declare const MEDIA_ONLY = "media-only";
 export declare const COLUMNS = "columns";

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

@@ -30,6 +30,57 @@ export const TEXT_ONLY = 'text-only';
 export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: their
+ * padding sits on the section root and reveals the background colour around
+ * the image block (same as the banner), while the spacing inside/over the
+ * image stays fixed — existing pages rendered the image flush to the section
+ * edges.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING = {
+    '': 0, // collapsible (default on Brand Page / Brand Contact)
+    [ALIGN_CENTERED]: 24,
+    [ALIGN_CARD_CENTER]: 32,
+    [ALIGN_CARD_CENTER_IMAGE]: 0,
+    [TEXT_ONLY]: 32,
+    [ALIGN_LEFT_FULL_IMAGE]: 0,
+    [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export const BANNER_DEFAULT_PADDING = 32;
+export const BANNER_FULL_BLEED_DISPLAY_STYLES = [
+    ALIGN_LEFT_FULL_IMAGE,
+    ALIGN_RIGHT_FULL_IMAGE,
+    ALIGN_TOP_FULL_IMAGE,
+    ALIGN_BOTTOM_FULL_IMAGE,
+    ALIGN_MIDDLE_FULL_IMAGE,
+];
+export const bannerDisplayStyleDefaultPadding = (displayStyle) => displayStyle && BANNER_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
+    ? 0
+    : BANNER_DEFAULT_PADDING;
+/**
+ * About: same rule as the banner. The two full-image display styles render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0;
+ * every other About style keeps 32. Used by the About display-style convertor
+ * and the migration backfill.
+ */
+export const ABOUT_DEFAULT_PADDING = 32;
+export const ABOUT_FULL_BLEED_DISPLAY_STYLES = [
+    ALIGN_LEFT_FULL_IMAGE,
+    ALIGN_RIGHT_FULL_IMAGE,
+];
+export const aboutDisplayStyleDefaultPadding = (displayStyle) => displayStyle && ABOUT_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
+    ? 0
+    : ABOUT_DEFAULT_PADDING;
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

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

@@ -47,6 +47,8 @@ export interface Content {
     id: string;
     type: ContentType;
     personalisationRole?: PersonalisationRole;
+    topPadding?: number;
+    bottomPadding?: number;
     imageUrlOverride?: string;
     imageUrlsOverride?: string;
     avatarImageUrlOverride?: string;

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

@@ -8,6 +8,13 @@ export declare class NavigationMenuStyles {
     subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
+/**
+ * The hamburger sub nav background colour is auto color-matched only when the
+ * user has not deliberately set it - i.e. it has no value or is transparent.
+ * Any explicit colour (a hex) or an already color-matched key is preserved.
+ */
+export declare const isUnsetOrTransparentColor: (color: string | undefined | null) => boolean;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };

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

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -15,6 +15,29 @@ export class NavigationMenuStyles {
             options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
+/**
+ * The hamburger sub nav background colour is auto color-matched only when the
+ * user has not deliberately set it - i.e. it has no value or is transparent.
+ * Any explicit colour (a hex) or an already color-matched key is preserved.
+ */
+export const isUnsetOrTransparentColor = (color) => {
+    if (color == null) {
+        return true;
+    }
+    const normalised = color.trim().toLowerCase();
+    return normalised === '' || normalised === 'transparent';
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
@@ -79,7 +102,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
-            subNavBackgroundColor: theme?.secondaryColor,
+            // No sub nav default: a hex here defeats migration-16's colour match.
         });
     }
 }

package/lib/src/brand-page/utils/content-padding.util.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export declare const contentPaddingStyle: (content: {
+    topPadding?: number;
+    bottomPadding?: number;
+}) => {
+    paddingTop: string;
+    paddingBottom: string;
+};

package/lib/src/brand-page/utils/content-padding.util.js

@@ -0,0 +1,10 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export const contentPaddingStyle = (content) => ({
+    paddingTop: `${content.topPadding ?? 0}px`,
+    paddingBottom: `${content.bottomPadding ?? 0}px`,
+});

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

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

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

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/lib/src/brand-page/utils/migration/migration-16.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData, MigrationOptions } from '../migration.util';
+export declare const migration16: (migrationResult: MigrationData, options: MigrationOptions) => Promise<MigrationData>;

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

@@ -0,0 +1,47 @@
+import { getDefaultSubNavBackgroundColor, isUnsetOrTransparentColor, } from '../../models';
+/**
+ * Migration 16: default the sub nav background colour to "colour matched" (the opposite
+ * logo colour) when the menu font is itself colour matched and the sub nav has no
+ * deliberate value. The default is applied ONCE, when content is first materialised — a
+ * template load, the create-draft flow, or the admin maker (isUserDraft === false). An
+ * existing user draft already carries its resolved value (including a deliberate
+ * transparent/explicit choice), so it is left untouched.
+ */
+// Hamburger keeps its styles on hamburgerMenuStyle; every other nav type uses the
+// top-level navigation styles. (This only locates the styles - the rule itself is uniform.)
+const isHamburger = (displayType) => displayType.includes('hamburger');
+const applyDefaultSubNavColorMatch = (navigation) => {
+    if (!navigation?.displayType) {
+        return;
+    }
+    let menuStyles;
+    if (isHamburger(navigation.displayType)) {
+        navigation.hamburgerMenuStyle =
+            navigation.hamburgerMenuStyle ?? {};
+        menuStyles = navigation.hamburgerMenuStyle;
+    }
+    else {
+        menuStyles = navigation;
+    }
+    // Leave a deliberately-set colour (an explicit hex or an already colour-matched key).
+    if (!isUnsetOrTransparentColor(menuStyles.subNavBackgroundColor)) {
+        return;
+    }
+    // Only when the menu font is itself colour matched: take the opposite logo colour
+    // (the helper returns undefined when the font is not colour matched).
+    const colorMatchedSubNav = getDefaultSubNavBackgroundColor(menuStyles.defaultButtonStyle?.color);
+    if (colorMatchedSubNav) {
+        menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+    }
+};
+export const migration16 = async (migrationResult, options) => {
+    // Skip user drafts (isUserDraft === true) — they already have their value. Only
+    // templates (isUserDraft === false) get the sub nav default.
+    if (options.isUserDraft) {
+        return migrationResult;
+    }
+    const { brandPageModel } = migrationResult;
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration/migration-17.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration17: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,50 @@
+import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING, aboutDisplayStyleDefaultPadding, bannerDisplayStyleDefaultPadding, } from '../../constants';
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ */
+const BLOCK_DEFAULT_PADDING = {
+    text: 12,
+    'images-section': 32,
+    'social-links': 32,
+    'shapes-section': 32,
+    'booking-section': 32,
+    'shop-section': 16,
+};
+export const migration17 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            // Contact Form, Banner and About previously varied their hard-coded spacing by
+            // layout/display style (full-bleed image layouts had no outer padding), so they're
+            // keyed by that rather than a single per-type value.
+            let value;
+            if (content.type === 'contact-form') {
+                value =
+                    CONTACT_FORM_LAYOUT_DEFAULT_PADDING[content.layoutStyle ?? ''];
+            }
+            else if (content.type === 'banner-section') {
+                value = bannerDisplayStyleDefaultPadding(content.displayStyle);
+            }
+            else if (content.type === 'about-section') {
+                value = aboutDisplayStyleDefaultPadding(content.displayStyle);
+            }
+            else {
+                value = BLOCK_DEFAULT_PADDING[content.type];
+            }
+            if (value === undefined) {
+                return;
+            }
+            if (content.topPadding === undefined) {
+                content.topPadding = value;
+            }
+            if (content.bottomPadding === undefined) {
+                content.bottomPadding = value;
+            }
+        });
+    });
+    return migrationResult;
+};