@designcrowd/library.brand-page 6.1.17-ast-optional-button-1 → 6.1.17-ast-optional-button-3

package/lib/src/{CreatedOnBrandCrowd-de-de-BY2Z3NZY.js → CreatedOnBrandCrowd-de-de-Cu_ukOxI.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-a9o3Bztc.js → CreatedOnBrandCrowd-en-us-BK04pmL9.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Bg8SCqkB.js → CreatedOnBrandCrowd-es-es-DfREN5ib.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-N9bzJuGP.js → CreatedOnBrandCrowd-fr-ca-C0_zl1cL.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-N9bzJuGP.js → CreatedOnBrandCrowd-fr-fr-C0_zl1cL.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-ComX3scB.js → CreatedOnBrandCrowd-pt-br-CKQK6zH9.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-ComX3scB.js → CreatedOnBrandCrowd-pt-pt-CKQK6zH9.js}

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

package/lib/src/{CreatedOnDcom-de-de-m-KtGGWQ.js → CreatedOnDcom-de-de-yrdfxkUi.js}

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

package/lib/src/{CreatedOnDcom-en-us-8O5yFoBn.js → CreatedOnDcom-en-us-DanUrMxL.js}

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

package/lib/src/{CreatedOnDcom-es-es-BtEMligL.js → CreatedOnDcom-es-es-D8d_PqxB.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CN8NWPFk.js → CreatedOnDcom-fr-ca-C1-28hQH.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-VuC39Anm.js → CreatedOnDcom-fr-fr-DKm8kfeQ.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CyIeNya-.js → CreatedOnDcom-pt-br-DQN8j45I.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DUIrNGr-.js → CreatedOnDcom-pt-pt-Bq9n3MeJ.js}

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

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

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
+import { guardPreviewClick } from '../../../utils/context.util';
 export default defineComponent({
     props: {
         context: {
@@ -95,14 +96,11 @@ export default defineComponent({
         closeSideMenu() {
             this.$emit('close-side-menu');
         },
-        // Preview: inert (same guard as onHeaderCtaClick); published: follow link, close the side menu.
+        // Preview: inert; published: follow the link and close the side menu behind it.
         onSideMenuCtaClick(event) {
-            if (this.context.isPreview) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
+            if (!guardPreviewClick(event, this.context)) {
+                this.closeSideMenu();
             }
-            this.closeSideMenu();
         },
         toggleExpanded(pageId) {
             const isCurrentlyExpanded = this.expandedItems[pageId];

package/lib/src/brand-page/components/page-header/PageHeader.mixin.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
 import { hasVisibleNavigation } from '../../utils/route.util';
+import { guardPreviewClick } from '../../utils/context.util';
 export default defineComponent({
     props: {
         navId: {
@@ -48,10 +49,7 @@ export default defineComponent({
         },
         // Preview only: deliberately inert — no link-follow, no Header Settings open.
         onHeaderCtaClick(event) {
-            if (this.context.isPreview) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
+            guardPreviewClick(event, this.context);
         },
     },
 });

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

@@ -178,6 +178,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-hamburger-display-style-with-button-1',
     },
     {
         viewMode: 'desktop',
@@ -196,6 +197,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-hamburger-display-style-with-button-2',
     },
     // desktop - hamburger no logo
     {
@@ -265,6 +267,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_1,
             isSelected: false,
         },
+        withButtonIconName: 'header-mobile-nav-style-tab-display-style-with-button-1',
     },
     {
         viewMode: 'mobile',
@@ -278,6 +281,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_2,
             isSelected: false,
         },
+        withButtonIconName: 'header-mobile-nav-style-tab-display-style-with-button-2',
     },
     // mobile - tab with no logo
     {

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

@@ -8,3 +8,4 @@ export declare const getSlugFromContext: (context: BrandPageContext) => string;
  * placeholders) must keep reading `context.isPreview` directly.
  */
 export declare const isPreviewMode: (context: BrandPageContext) => boolean;
+export declare const guardPreviewClick: (event: MouseEvent, context: BrandPageContext) => boolean;

package/lib/src/brand-page/utils/context.util.js

@@ -12,3 +12,12 @@ export const getSlugFromContext = (context) => {
  * placeholders) must keep reading `context.isPreview` directly.
  */
 export const isPreviewMode = (context) => !!(context.isPreview || context.isLivePreview);
+// Blocks a click in the maker preview (no link-follow, no bubbling); true when it fired.
+export const guardPreviewClick = (event, context) => {
+    if (!context.isPreview) {
+        return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+};

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

@@ -699,7 +699,8 @@ const HEADER_BUTTON_LINK_ROLES = {
     [BUTTON_LINK_TYPE.tel]: 'phone',
 };
 const mapToHeaderButtonViewModel = (headerButton, styles) => {
-    if (!headerButton?.isVisible) {
+    // No label means no button — hidden in preview and on the published site.
+    if (!headerButton?.isVisible || !headerButton.text?.trim()) {
         return undefined;
     }
     const titleStyle = headerButton.buttonTextStyle ?? {
@@ -713,7 +714,7 @@ const mapToHeaderButtonViewModel = (headerButton, styles) => {
         iconUrl: '',
         modalImageUrl: '',
         colorReplacements: [],
-        title: headerButton.text?.trim() ?? '',
+        title: headerButton.text.trim(),
         titleStyle,
         url: headerButton.url ?? '',
         page: headerButton.buttonPageId ?? '',
@@ -721,6 +722,12 @@ const mapToHeaderButtonViewModel = (headerButton, styles) => {
     }, styles, { titleStyle });
     return {
         ...viewModel,
+        // A wrapped label justifies; the last (or only) line stays centered like a short label.
+        titleStyle: {
+            ...viewModel.titleStyle,
+            textAlign: 'justify',
+            textAlignLast: 'center',
+        },
         styles: {
             ...viewModel.styles,
             style: {