@designcrowd/library.brand-page 6.0.14-5804-2 → 6.0.14

package/lib/src/{CreatedOnBrandCrowd-de-de-BW15_bVX.js → CreatedOnBrandCrowd-de-de-DmzRlsce.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-MXDRWPa1.js → CreatedOnBrandCrowd-en-us-Bar3LFZV.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BkeN_bU4.js → CreatedOnBrandCrowd-es-es-BIiEe4jb.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DWPl8vN2.js → CreatedOnBrandCrowd-fr-ca-DqwzTDeo.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DWPl8vN2.js → CreatedOnBrandCrowd-fr-fr-DqwzTDeo.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B2_xFYID.js → CreatedOnBrandCrowd-pt-br-BY23Zbv_.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-B2_xFYID.js → CreatedOnBrandCrowd-pt-pt-BY23Zbv_.js}

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

package/lib/src/{CreatedOnDcom-de-de-D-Y_NKQ3.js → CreatedOnDcom-de-de-D5P5YJNx.js}

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

package/lib/src/{CreatedOnDcom-en-us-TkzWmLPE.js → CreatedOnDcom-en-us-BDS8zKK8.js}

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

package/lib/src/{CreatedOnDcom-es-es-BRcN78-W.js → CreatedOnDcom-es-es-oRaJy9ar.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DcpgnOV-.js → CreatedOnDcom-fr-ca-CCNBdzYl.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CdppomFF.js → CreatedOnDcom-fr-fr-BHQfOJAM.js}

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

package/lib/src/{CreatedOnDcom-pt-br-Dm05huFx.js → CreatedOnDcom-pt-br-CvMLP93q.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-C2O9rV7u.js → CreatedOnDcom-pt-pt-ClBnrBW0.js}

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

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

@@ -65,7 +65,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderText(): string;
     renderSuccessText(): string;
     successMessageColorStyle(): BrandPageCssStyle;
-    disclosureColor(): string | undefined;
 }, {
     submitContactForm(): Promise<void>;
     validateFormValues(): void;

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, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } 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({
@@ -146,24 +146,6 @@ export default defineComponent({
             }
             return {};
         },
-        disclosureColor() {
-            // Anchor the reCAPTCHA footnote to the surface it visually sits on, which
-            // differs by website type:
-            // - brandSite: the card style (card + divided layouts) or the section
-            //   background (other layouts).
-            // - brand.page / brand.contact: there's no section background, so the
-            //   coloured surface is the global button fill.
-            // Falls back to the title colour when there's no solid colour to anchor to.
-            const style = this.context.isBrandSite
-                ? this.hasCard || this.isDividedContent
-                    ? this.viewModel.cardStyle
-                    : this.hasBgColor
-                        ? this.viewModel.backgroundStyle
-                        : undefined
-                : this.viewModel.buttonStyles?.style;
-            return (mutedTextForBackground(backgroundColorFromStyle(style)) ??
-                this.viewModel.titleStyle?.color);
-        },
     },
     watch: {
         fields(fields) {

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

@@ -48,7 +48,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hasFormError(): boolean;
     isNameRequired(): boolean;
     hasSubmitError(): boolean;
-    disclosureColor(): string | undefined;
     buttonStyle(): BrandPageCssStyle;
     buttonText(): string;
     containerStyle(): BrandPageCssStyle;

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, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } 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';
@@ -69,13 +69,6 @@ export default defineComponent({
         hasSubmitError() {
             return Boolean(this.submitError);
         },
-        disclosureColor() {
-            // The mailing-list box uses the button style as its background, so anchor
-            // the reCAPTCHA footnote to that. Falls back to the title colour when the
-            // background isn't a solid colour.
-            const bg = backgroundColorFromStyle(this.viewModel.styles?.style);
-            return mutedTextForBackground(bg) ?? this.viewModel.titleStyle?.color;
-        },
         buttonStyle() {
             const buttonStyle = { ...this.viewModel.styles?.style };
             if (buttonStyle.borderStyle !== 'solid') {

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

@@ -7,21 +7,5 @@ export declare const removeAlphaFromHex: (hex: string) => string;
 export declare const addTransparentAlphaChannelToHex: (hex: string) => string;
 export declare const addOpacityToHex: (hex: string, opacity: number) => string;
 export declare const setRgbAlpha: (rgb: string, alpha: number) => string;
-/**
- * A muted text colour whose lightness runs opposite to the background: darker
- * text on light backgrounds (e.g. beige), lighter text on dark ones. Starts
- * faded (close to the background) and is nudged toward black or white — whichever
- * the background contrasts with more — only until it reaches a legible target
- * contrast, so the result is as subtle as legibility allows.
- *
- * Returns undefined when the background isn't a solid, opaque colour (image,
- * gradient, transparent, unparseable) so callers can fall back.
- */
-export declare const mutedTextForBackground: (bgColor: string | undefined, { targetContrast, start, step }?: {
-    targetContrast?: number | undefined;
-    start?: number | undefined;
-    step?: number | undefined;
-}) => string | undefined;
-export declare const backgroundColorFromStyle: (style: BrandPageCssStyle | undefined) => string | undefined;
 export declare const getThemeByTextStyleAndLogoTheme: (textStyle: BrandPageCssStyle, logoTheme: LogoTheme) => Theme;
 export declare const getNewColorBasedOnTargetColorTheme: (originalColor: string, targetColor: string) => ColorInstance | undefined;

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

@@ -47,62 +47,6 @@ export const setRgbAlpha = (rgb, alpha) => {
     }
     return `rgba(${match[1]},${match[2]},${match[3]},${alpha})`;
 };
-// Weighted linear blend of two colours in sRGB (weight = amount of `b`, 0..1).
-const mixRgb = (a, b, weight) => {
-    const [ar, ag, ab] = a.rgb().array();
-    const [br, bg, bb] = b.rgb().array();
-    return Color.rgb(ar + (br - ar) * weight, ag + (bg - ag) * weight, ab + (bb - ab) * weight);
-};
-// WCAG contrast ratio (1..21) between two colours.
-const contrastRatio = (a, b) => {
-    const [ar, ag, ab] = a.rgb().array();
-    const [br, bg, bb] = b.rgb().array();
-    const la = luminance(ar, ag, ab);
-    const lb = luminance(br, bg, bb);
-    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
-};
-/**
- * A muted text colour whose lightness runs opposite to the background: darker
- * text on light backgrounds (e.g. beige), lighter text on dark ones. Starts
- * faded (close to the background) and is nudged toward black or white — whichever
- * the background contrasts with more — only until it reaches a legible target
- * contrast, so the result is as subtle as legibility allows.
- *
- * Returns undefined when the background isn't a solid, opaque colour (image,
- * gradient, transparent, unparseable) so callers can fall back.
- */
-export const mutedTextForBackground = (bgColor, { targetContrast = 3.5, start = 0.12, step = 0.04 } = {}) => {
-    if (!bgColor) {
-        return undefined;
-    }
-    let bg;
-    try {
-        bg = Color(bgColor);
-    }
-    catch {
-        return undefined;
-    }
-    // Can't anchor to a see-through background — caller should fall back.
-    if (bg.alpha() === 0) {
-        return undefined;
-    }
-    const black = Color.rgb(0, 0, 0);
-    const white = Color.rgb(255, 255, 255);
-    const target = contrastRatio(bg, black) >= contrastRatio(bg, white) ? black : white;
-    let weight = start;
-    let text = mixRgb(bg, target, weight);
-    while (weight < 1 && contrastRatio(text, bg) < targetContrast) {
-        weight += step;
-        text = mixRgb(bg, target, weight);
-    }
-    return text.hex();
-};
-// Pull a usable background colour out of a style object. Section backgrounds are
-// written under the `background` shorthand (the background-settings store forbids
-// `backgroundColor`), while card/button styles use `backgroundColor` — so check
-// both. The value may be a gradient/shorthand; callers that need a solid colour
-// pass it through mutedTextForBackground, which rejects anything unparseable.
-export const backgroundColorFromStyle = (style) => style?.backgroundColor || style?.background;
 export const getThemeByTextStyleAndLogoTheme = (textStyle, logoTheme) => {
     const primaryColor = textStyle.color;
     let secondaryColor = primaryColor;

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

@@ -50,7 +50,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSaving: import("vue").ComputedRef<boolean>;
     isPublishing: import("vue").ComputedRef<boolean>;
     isPublished: import("vue").ComputedRef<boolean>;
-    shouldShowQuickLinkBar: import("vue").ComputedRef<boolean>;
     isBrandPageOrIsBrandContact: import("vue").ComputedRef<boolean>;
     brandPageViewModel: import("vue").ComputedRef<import("@brand-page").BrandPageViewModel>;
     backUrl: import("vue").ComputedRef<string>;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -13,7 +13,6 @@ import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
-import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -74,10 +73,6 @@ export default defineComponent({
             isSaving: computed(() => brandPageMakerStore.isSaving),
             isPublishing: computed(() => brandPageMakerStore.isPublishing),
             isPublished: computed(() => brandPageMakerStore.isPublished),
-            // Whether the QuickLinkBar renders — used to offset the preview (Device)
-            // and SideBar clear of the fixed bar on mobile. Must match the bar's own
-            // render condition, so it shares the same predicate.
-            shouldShowQuickLinkBar: useQuickLinkBarVisibility(),
             isBrandPageOrIsBrandContact: computed(() => brandPageMakerStore.isBrandPageOrIsBrandContact),
             brandPageViewModel: computed(() => brandPageMakerStore.brandPageViewModel),
             backUrl: computed(() => localisedRouteStore.backToWebsiteManageUrlPath),

package/lib/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.d.ts

@@ -292,11 +292,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushManageWebPageUnpublishClickEvent(): Promise<void>;
     }>;
     undoRedoEnabled: import("vue").ComputedRef<boolean>;
-    shouldShowBar: import("vue").ComputedRef<boolean>;
 }, {
     copied: boolean;
 }, {
     isPublished(): boolean;
+    shouldShowBar(): boolean;
     brandPageUrl(): string;
     copyButtonLabel(): string;
 }, {

package/lib/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.js

@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import { CUSTOM_DOMAIN_STATUSES } from '@brand-page-maker/constants';
 import { useBrandPageContainerStore, useEventManagerStore, } from '@brand-page-maker/stores';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
-import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 export default defineComponent({
     props: {
@@ -20,9 +19,6 @@ export default defineComponent({
             brandPageContainerStore: useBrandPageContainerStore(),
             eventManagerStore: useEventManagerStore(),
             undoRedoEnabled: useUndoRedoFlag(),
-            // Single source of truth for whether the bar renders — shared with the
-            // layout components (Device, SideBar) that offset content clear of it.
-            shouldShowBar: useQuickLinkBarVisibility(),
         };
     },
     data() {
@@ -34,6 +30,12 @@ export default defineComponent({
         isPublished() {
             return this.brandPageContainerStore.isPublished;
         },
+        // Only render the bar when at least one inner cluster has something to
+        // show. Otherwise we'd render an empty white strip — e.g. on an
+        // unpublished page with the undo flag off.
+        shouldShowBar() {
+            return Boolean(this.undoRedoEnabled) || this.isPublished;
+        },
         brandPageUrl() {
             if (this.brandPageContainerStore.isCustomDomainEnabled &&
                 this.brandPageContainerStore.customDomain &&