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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -65,6 +65,7 @@ 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, } from '@brand-page/utils';
+import { getRenderText, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
@@ -146,6 +146,24 @@ 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,6 +48,7 @@ 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, } from '@brand-page/utils';
+import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } 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,6 +69,13 @@ 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,5 +7,21 @@ 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,6 +47,62 @@ 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,6 +50,7 @@ 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,6 +13,7 @@ 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';
@@ -73,6 +74,10 @@ 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,6 +2,7 @@ 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: {
@@ -19,6 +20,9 @@ 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() {
@@ -30,12 +34,6 @@ 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 &&

package/lib/src/brand-page-maker/composables/useQuickLinkBarVisibility.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef } from 'vue';
+/**
+ * Whether the QuickLinkBar is rendered in the maker.
+ *
+ * The bar shows when at least one of its inner clusters has something to
+ * display: the undo/redo controls (flag on, non-admin — see
+ * {@link useUndoRedoFlag}) OR the published-URL cluster (page published).
+ *
+ * This is the single source of truth shared by the bar itself
+ * (`QuickLinkBar`) and the layout components that offset their content to sit
+ * clear of the fixed bar on mobile (`Device`, `SideBar`). Keeping the offset
+ * bound to the same predicate the bar renders on prevents the two from
+ * drifting — a drift where the bar showed for the undo/redo reason but the
+ * offset only accounted for the published reason caused the bar to overlap
+ * the mobile preview.
+ */
+export declare function useQuickLinkBarVisibility(): ComputedRef<boolean>;

package/lib/src/brand-page-maker/composables/useQuickLinkBarVisibility.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from './useUndoRedoFlag';
+/**
+ * Whether the QuickLinkBar is rendered in the maker.
+ *
+ * The bar shows when at least one of its inner clusters has something to
+ * display: the undo/redo controls (flag on, non-admin — see
+ * {@link useUndoRedoFlag}) OR the published-URL cluster (page published).
+ *
+ * This is the single source of truth shared by the bar itself
+ * (`QuickLinkBar`) and the layout components that offset their content to sit
+ * clear of the fixed bar on mobile (`Device`, `SideBar`). Keeping the offset
+ * bound to the same predicate the bar renders on prevents the two from
+ * drifting — a drift where the bar showed for the undo/redo reason but the
+ * offset only accounted for the published reason caused the bar to overlap
+ * the mobile preview.
+ */
+export function useQuickLinkBarVisibility() {
+    const containerStore = useBrandPageContainerStore();
+    const undoRedoEnabled = useUndoRedoFlag();
+    return computed(() => undoRedoEnabled.value || containerStore.isPublished);
+}