@designcrowd/library.brand-page 6.1.17-ast-header-button → 6.1.17-ast-header-button-2

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js

@@ -349,10 +349,10 @@ export default defineComponent({
                 ...this.headerButton,
                 ...patch,
             };
-            // Desktop and mobile must hold the SAME button config (BP-5852 AC). The
-            // whole object is written to both from one source rather than merged
-            // per-viewport, so a pair that somehow diverged is reconciled instead of
-            // each side keeping its own leftovers.
+            // Desktop and mobile must hold the SAME button config. The whole object
+            // is written to both from one source rather than merged per-viewport, so
+            // a pair that somehow diverged is reconciled instead of each side keeping
+            // its own leftovers.
             //
             // Each viewport gets its own copy: one shared object would alias the two
             // branches of store state to a single instance.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.17-ast-header-button",
+  "version": "6.1.17-ast-header-button-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/navigation/hamburger/HamburgerNavigation.vue

@@ -2,6 +2,7 @@
   <div data-component="hamburger-navigation">
     <div class="tw-w-full tw-flex tw-justify-end">
       <button
+        data-test-hamburger-toggle
         :style="iconStyle"
         class="tw-cursor-pointer tw-p-2"
         :class="{

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

@@ -26,18 +26,13 @@ export default defineComponent({
       type: Object as PropType<NavigationDesktop | NavigationMobile>,
       required: true,
     },
+    // Provided only when the header row does not render the CTA (the caller
+    // decides via headerRowRendersCta) — absent means the drawer shows none.
     headerButtonViewModel: {
       type: Object as PropType<ButtonViewModel>,
       required: false,
       default: undefined,
     },
-    // The desktop drawer suppresses the header CTA — the desktop header row already
-    // renders it. Only the mobile drawer carries the button.
-    isMobile: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   emits: ['close-side-menu'],
   data() {
@@ -87,7 +82,7 @@ export default defineComponent({
       return rest;
     },
     showHeaderButton(): boolean {
-      return this.isMobile && Boolean(this.headerButtonViewModel);
+      return Boolean(this.headerButtonViewModel);
     },
     routes(): any[] {
       return this.visibleNavItems.map((navItem, _i) => {
@@ -129,9 +124,9 @@ export default defineComponent({
     closeSideMenu(): void {
       this.$emit('close-side-menu');
     },
-    // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
-    // prevent lands before the inner anchor/router-link fires. On the published site
-    // the click follows the link and the drawer closes behind it.
+    // In the maker preview the CTA is inert (see docs/decisions/0019): capture-phase
+    // so the prevent lands before the inner anchor/router-link fires. On the
+    // published site the click follows the link and the drawer closes behind it.
     onDrawerCtaClick(event: MouseEvent): void {
       if (this.context.isPreview) {
         event.preventDefault();

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue

@@ -9,15 +9,19 @@
       }"
       @click="closeSideMenu"
     />
+    <!-- Without a CTA the panel itself scrolls, as it always has. With one, the nav
+         list takes over the scrolling so the pinned button never scrolls away. -->
     <div
       class="c-sidebar"
       :class="{
-        'c-sidebar--open tw-overflow-auto': isSideMenuOpen,
+        'c-sidebar--open': isSideMenuOpen,
         'c-sidebar--closed': !isSideMenuOpen,
+        'tw-overflow-auto': isSideMenuOpen && !showHeaderButton,
+        'c-sidebar--has-cta': showHeaderButton,
       }"
       :style="defaultButtonStyle"
     >
-      <div class="tw-w-full tw-flex tw-justify-end">
+      <div class="c-drawer-header tw-w-full tw-flex tw-justify-end">
         <button
           class="tw-mt-4 tw-w-8 tw-h-8 tw-bg-transparent tw-border-none tw-cursor-pointer"
           :style="closeButtonStyle"
@@ -27,7 +31,7 @@
           <Icon name="close" size="sm" />
         </button>
       </div>
-      <div class="tw-flex tw-flex-col">
+      <div class="c-nav-list tw-flex tw-flex-col">
         <template
           v-for="(navItem, index) in visibleNavItems"
           :key="`${navItem.relativePath}-${index}`"
@@ -166,10 +170,38 @@ export default {
   transform: rotate(180deg);
 }
 
+/* Design: the drawer CTA is pinned to the bottom of the panel and stays put while a
+   long link list scrolls. Every rule here is scoped to --has-cta, so a drawer without
+   the button keeps its original block flow and panel-level scrolling. */
+.c-sidebar--has-cta {
+  @apply tw-flex tw-flex-col;
+  overflow: hidden;
+}
+
+.c-sidebar--has-cta .c-drawer-header {
+  flex-shrink: 0;
+}
+
+.c-sidebar--has-cta .c-nav-list {
+  /* min-height:0 is what lets the list shrink below its content height, so the list —
+     not the panel — is what scrolls once there are more links than fit. */
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .c-drawer-cta {
   @apply tw-relative tw-p-4;
 }
 
+.c-sidebar--has-cta .c-drawer-cta {
+  /* Pushes the button to the bottom when the links don't fill the panel; the nav
+     list's own scrolling keeps it there when they overflow. */
+  margin-top: auto;
+  flex-shrink: 0;
+  /* Opaque against the panel so scrolled links don't show through. */
+  background-color: inherit;
+}
+
 /* Hairline separator from the nav list, drawn in the drawer's own text colour so it
    works on any panel background. A pseudo-element carries the fade — opacity on the
    section itself would wash out the button. */

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue.test.ts

@@ -21,7 +21,6 @@ const createContext = (): BrandPageContext =>
   ({
     brandPageSlug: SLUG,
     brandPageToken: '',
-    isMobile: false,
     isPreview: false,
     isProduction: false,
     isServerRender: false,
@@ -67,7 +66,6 @@ const aHeaderButton = (): HeaderButton => ({
 });
 
 const mountDrawer = async (options: {
-  isMobile?: boolean;
   headerButton?: HeaderButton;
   isPreview?: boolean;
 }) => {
@@ -104,7 +102,6 @@ const mountDrawer = async (options: {
       slug: SLUG,
       styles: headerViewModel.navigation,
       headerButtonViewModel: headerViewModel.headerButtonViewModel,
-      isMobile: options.isMobile ?? false,
     },
     global: { plugins: [router] },
   });
@@ -117,7 +114,6 @@ describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
 
   test('renders the CTA in the mobile drawer', async () => {
     const wrapper = await mountDrawer({
-      isMobile: true,
       headerButton: aHeaderButton(),
     });
 
@@ -127,29 +123,40 @@ describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
     expect(wrapper.get(CTA).text()).toContain('Book now');
   });
 
-  // The desktop hamburger header row already renders the button, so the desktop
-  // drawer must not repeat it.
-  test('renders no CTA in the desktop drawer', async () => {
+  test('renders no CTA when the site has no header button', async () => {
+    const wrapper = await mountDrawer({});
+
+    expect(wrapper.find(CTA).exists()).toBe(false);
+    expect(
+      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
+    ).toBe(false);
+  });
+
+  test('with a CTA the panel hands scrolling to the nav list and pins the button last', async () => {
     const wrapper = await mountDrawer({
-      isMobile: false,
       headerButton: aHeaderButton(),
     });
 
-    expect(wrapper.find(CTA).exists()).toBe(false);
+    const sidebar = wrapper.get('.c-sidebar');
+
+    expect(sidebar.classes()).toContain('c-sidebar--has-cta');
+    expect(sidebar.classes()).not.toContain('tw-overflow-auto');
+    expect(sidebar.element.lastElementChild).toBe(
+      wrapper.get('.c-drawer-cta').element,
+    );
   });
 
-  test('renders no CTA when the site has no header button', async () => {
-    const wrapper = await mountDrawer({ isMobile: true });
+  test('without a CTA the panel keeps its original scrolling and no layout class', async () => {
+    const wrapper = await mountDrawer({});
 
-    expect(wrapper.find(CTA).exists()).toBe(false);
-    expect(
-      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
-    ).toBe(false);
+    const sidebar = wrapper.get('.c-sidebar');
+
+    expect(sidebar.classes()).toContain('tw-overflow-auto');
+    expect(sidebar.classes()).not.toContain('c-sidebar--has-cta');
   });
 
   test('closes the drawer when the CTA is clicked', async () => {
     const wrapper = await mountDrawer({
-      isMobile: true,
       headerButton: aHeaderButton(),
     });
 
@@ -160,7 +167,6 @@ describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
 
   test('a preview CTA click is inert: no navigation, drawer stays open', async () => {
     const wrapper = await mountDrawer({
-      isMobile: true,
       headerButton: aHeaderButton(),
       isPreview: true,
     });

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

@@ -2,6 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import type {
   BrandPageViewModel,
+  ButtonViewModel,
   ContentViewModel,
   PageViewModel,
 } from '@brand-page/view-models';
@@ -14,6 +15,7 @@ import {
   DEFAULT_FONT_FAMILY_KEY,
   FALLBACK_FONT_FAMILIES,
   FONT_FAMILY_CONFIGS,
+  headerRowRendersCta,
 } from '../../constants';
 import {
   getSlugFromContext,
@@ -370,6 +372,21 @@ export default defineComponent({
       );
     },
 
+    // The mobile drawer carries the header CTA exactly when the header row does
+    // not — one shared predicate so the two can never render it twice.
+    drawerHeaderButtonViewModel(): ButtonViewModel | undefined {
+      const header = this.viewModel.headerViewModelMobile;
+
+      if (
+        !header.headerButtonViewModel ||
+        headerRowRendersCta(header.displayStyle, this.shouldShowNavigation)
+      ) {
+        return undefined;
+      }
+
+      return header.headerButtonViewModel;
+    },
+
     shouldShowNavigation(): boolean {
       // Show navigation if more than 1 non-hidden page exists, or if there's 1 page with non-hidden subpages
       const visibleNavItems = this.context.nav.navItems.filter(

package/src/brand-page/components/page/Page.vue

@@ -296,8 +296,7 @@
               :page-navigation="viewModel.nav"
               @close-side-menu="closeSideMenu"
             />
-            <!-- No header CTA here on purpose: the desktop hamburger header row
-                 already renders it (BP-5852 placement spec). -->
+            <!-- No header CTA: the desktop hamburger header row renders it. -->
           </template>
           <template #mobile>
             <NavigationSideMenu
@@ -306,10 +305,7 @@
               :slug="slug"
               :styles="viewModel.headerViewModelMobile.navigation"
               :page-navigation="viewModel.nav"
-              :header-button-view-model="
-                viewModel.headerViewModelMobile.headerButtonViewModel
-              "
-              :is-mobile="true"
+              :header-button-view-model="drawerHeaderButtonViewModel"
               @close-side-menu="closeSideMenu"
             />
           </template>

package/src/brand-page/components/page-header/HeaderLayout.stories.ts

@@ -43,6 +43,7 @@ const Template: StoryFn = (args) => ({
         nav-id="nav-1"
         :show-nav="args.showNav"
         :display-style="args.displayStyle"
+        :has-cta="args.hasCta"
         logo-width="100px"
       >
         <template v-slot:logo>
@@ -51,6 +52,9 @@ const Template: StoryFn = (args) => ({
         <template v-slot:nav>
           <div style="border: 1px solid red; display: inline-block;">Nav | Nav | Nav | Nav | Nav | Nav | Nav | Nav</div>
         </template>
+        <template v-slot:cta>
+          <div style="border: 1px solid green; display: inline-block; padding: 8px 16px;">Contact Us</div>
+        </template>
       </HeaderLayout>
     </div>
   `,
@@ -60,3 +64,9 @@ export const Sample = Template.bind({});
 Sample.args = {
   displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
 };
+
+export const WithHeaderButton = Template.bind({});
+WithHeaderButton.args = {
+  displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
+  hasCta: true,
+};

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -17,18 +17,14 @@
         <slot name="nav" />
       </div>
     </div>
-    <div
-      v-if="showCta"
-      data-component="header-layout-cta"
-      class="cta-container"
-    >
+    <div v-if="showCta" data-test-header-layout-cta class="cta-container">
       <slot name="cta" />
     </div>
   </header>
 </template>
 <script setup lang="ts">
 import { computed, withDefaults } from 'vue';
-import { HEADER_DISPLAY, type HeaderDisplayStyle } from '../../constants';
+import { headerRowRendersCta, type HeaderDisplayStyle } from '../../constants';
 
 const props = withDefaults(
   defineProps<{
@@ -44,25 +40,9 @@ const props = withDefaults(
   },
 );
 
-// The mobile hamburger row is deliberately CTA-free: the drawer carries the button
-// (NavigationSideMenu) so the compact row keeps only the logo and the icon. When the
-// nav itself is hidden (single-page site) there is no icon and no drawer, so the row
-// carries the button after all — otherwise it would be unreachable on mobile.
-const DRAWER_ONLY_CTA_DISPLAY_STYLES: HeaderDisplayStyle[] = [
-  HEADER_DISPLAY.MOBILE_HAMBURGER_1,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_2,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_3,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_4,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
-  HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
-];
-
 const showCta = computed(
   (): boolean =>
-    props.hasCta &&
-    (props.showNav === false ||
-      !DRAWER_ONLY_CTA_DISPLAY_STYLES.includes(props.displayStyle)),
+    props.hasCta && headerRowRendersCta(props.displayStyle, props.showNav),
 );
 </script>
 <style scoped>
@@ -413,15 +393,11 @@ const showCta = computed(
 }
 
 /* ==========================================================================
-   Header CTA placement (BP-5852)
-
-   Every rule here is additive and only applies once a CTA is rendered — the
-   track/flow-changing ones are gated on `.has-header-cta` — so a header with no
-   button lays out exactly as it did before. Four placements:
-     join   - inline immediately after the nav links
-     edge   - pinned to the header's outer right edge, nav left untouched
-     corner - floats top-right, out of flow, independent of a centered stack
-     row    - full-width row below the whole stack (mobile bar nav)
+   Header CTA placement. Every rule is additive and gated on the CTA being
+   rendered (`.has-header-cta` / `.cta-container`), so a header without the
+   button lays out exactly as before. The placement archetypes (join / edge /
+   corner / row) and the per-family reasoning live in
+   docs/architecture/capabilities/page-header.md.
    ========================================================================== */
 
 /* join - DESKTOP_TAB_1: appended flex child; the nav's `flex: 1` right-aligns the
@@ -468,13 +444,26 @@ const showCta = computed(
   right: 0;
 }
 
-/* row - MOBILE_TAB_1 / MOBILE_TAB_2: auto-places into an implicit third grid row
-   below the stack (both explicit rows are taken by the logo and the nav). */
+/* row - MOBILE_TAB_1: auto-places into an implicit third grid row below the stack
+   (both explicit rows are taken by the logo and the nav), giving logo / nav / button. */
 .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container,
 .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container {
   width: 100%;
   justify-self: stretch;
 }
+
+/* row - MOBILE_TAB_2: the button belongs directly under the nav and ABOVE the logo,
+   so the grid grows a middle row for it and the logo's existing `row2` names move
+   down to the third. Auto-placement would otherwise drop it below the logo. */
+.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta {
+  grid-template-rows:
+    [row1-start] var(--tab-nav-height)
+    [row1-end cta-start] auto [cta-end row2-start] 1fr [row2-end];
+}
+.mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
+  .cta-container {
+  grid-row: cta-start / cta-end;
+}
 .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta,
 .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta {
   @apply tw-flex-wrap tw-justify-center;
@@ -525,7 +514,18 @@ const showCta = computed(
 .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container,
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container {
   grid-column: cta-start;
-  align-self: center;
+  /* Explicit row: the CTA sits in DOM order after the nav, and sparse grid
+     auto-placement never backtracks to an earlier column on the same row —
+     without this the button wraps to an implicit second row. */
+  grid-row: 1;
+  /* Centre the button on the hamburger icon's line: the icon is start-aligned
+     with the nav's --page-padding margin, so mirror that margin and let the
+     (taller) button overflow a line of the icon's height evenly. */
+  align-self: start;
+  margin-top: var(--page-padding);
+  height: var(--hamburger-nav-height);
+  display: flex;
+  align-items: center;
   @apply tw-mr-4;
 }
 

package/src/brand-page/components/page-header/PageHeader.mixin.ts

@@ -60,9 +60,9 @@ export default defineComponent({
     onHeaderContainerClick() {
       this.$emit('header-container-click');
     },
-    // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
-    // prevent lands before the inner anchor/router-link fires, and the stop keeps the
-    // click from selecting the header panel. On the published site it does nothing.
+    // In the maker preview the CTA is inert (see docs/decisions/0019): capture-phase
+    // so the prevent lands before the inner anchor/router-link fires, and the stop
+    // keeps the click from selecting the header panel. Published sites: no-op.
     onHeaderCtaClick(event: MouseEvent): void {
       if (this.context.isPreview) {
         event.preventDefault();

package/src/brand-page/components/page-header/PageHeader.vue.test.ts

@@ -19,6 +19,7 @@ import {
 } from '@src/brand-page/constants';
 import type { NavItemViewModel } from '@brand-page/view-models';
 import { mapToPageHeaderViewModel } from '@brand-page/utils';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 
 // NavigationCarousel calls `new ResizeObserver(...)`, so this has to be constructible.
 global.ResizeObserver = class {
@@ -148,6 +149,11 @@ const mountHeader = async (options: {
 };
 
 describe('PageHeader - header call-to-action button (BP-5852)', () => {
+  // the empty-label fallback resolves through i18n
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
   beforeEach(() => {
     setActivePinia(createPinia());
   });
@@ -157,9 +163,9 @@ describe('PageHeader - header call-to-action button (BP-5852)', () => {
       const wrapper = await mountHeader({});
 
       expect(wrapper.find(CTA).exists()).toBe(false);
-      expect(
-        wrapper.find('[data-component="header-layout-cta"]').exists(),
-      ).toBe(false);
+      expect(wrapper.find('[data-test-header-layout-cta]').exists()).toBe(
+        false,
+      );
     });
 
     test('renders no CTA when the button is configured but hidden', async () => {

package/src/brand-page/components/page-header/i18n/page-header.json

@@ -0,0 +1,5 @@
+{
+  "pageHeader": {
+    "buttonFallbackLabel": "Contact Us"
+  }
+}

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

@@ -0,0 +1,45 @@
+import {
+  HEADER_DISPLAY,
+  headerRowRendersCta,
+} from './header-display.constants';
+
+// One predicate decides header-row vs drawer for the CTA; Page.mixin uses it
+// inverted for the drawer, so these cases pin that the two can never overlap.
+describe('headerRowRendersCta', () => {
+  test.each([
+    HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_2,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_3,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_4,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
+  ])('%s with a visible nav: the drawer carries the CTA', (displayStyle) => {
+    expect(headerRowRendersCta(displayStyle, true)).toBe(false);
+  });
+
+  test.each([
+    HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
+  ])(
+    '%s with the nav hidden: no drawer exists, the row carries it',
+    (displayStyle) => {
+      expect(headerRowRendersCta(displayStyle, false)).toBe(true);
+    },
+  );
+
+  test.each([
+    HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+    HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
+    HEADER_DISPLAY.DESKTOP_TAB_1,
+    HEADER_DISPLAY.MOBILE_TAB_1,
+    HEADER_DISPLAY.MOBILE_TAB_2,
+    HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+  ])('%s: the row carries the CTA', (displayStyle) => {
+    expect(headerRowRendersCta(displayStyle, true)).toBe(true);
+  });
+
+  test('an unknown/deprecated display style defaults to the row', () => {
+    expect(headerRowRendersCta('align-left', true)).toBe(true);
+  });
+});

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

@@ -442,3 +442,22 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     },
   },
 ];
+
+/**
+ * Whether the header ROW renders the call-to-action button, as opposed to the
+ * mobile nav drawer. The compact mobile hamburger row hands the CTA to the
+ * drawer — unless the nav is hidden (single visible page), when there is no
+ * drawer and the row must carry it. Derived from the configs so a future
+ * style classifies itself by its own viewMode/navType.
+ */
+export const headerRowRendersCta = (
+  displayStyle: string,
+  showNav: boolean,
+): boolean =>
+  !showNav ||
+  !HEADER_DISPLAY_STYLE_CONFIGS.some(
+    (config) =>
+      config.option.value === displayStyle &&
+      config.viewMode === 'mobile' &&
+      config.navType === 'hamburger',
+  );

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

@@ -753,8 +753,11 @@ export abstract class AbstractPageHeaderStyles {
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
-  /** Absent means no header call-to-action button — never seed a default. */
-  headerButton?: HeaderButton;
+  /** Absent means no header call-to-action button — never seed a default.
+   * `declare` keeps the class field type-only: a plain optional field is still
+   * DEFINED on every instance (an own `undefined` key), which would change the
+   * serialized shape released migrations receive. */
+  declare headerButton?: HeaderButton;
 
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
@@ -794,7 +797,11 @@ export abstract class AbstractPageHeaderStyles {
       backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
     };
 
-    this.headerButton = options.headerButton;
+    // Assign only when present: constructor output is part of released
+    // migrations' input contract, so an absent field must stay absent.
+    if (options.headerButton) {
+      this.headerButton = options.headerButton;
+    }
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -156,7 +156,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -232,7 +231,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -655,7 +653,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -731,7 +728,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -1138,7 +1134,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -1214,7 +1209,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -141,7 +141,6 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoDraftToken": "",
@@ -218,7 +217,6 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
-      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoDraftToken": "",