@designcrowd/library.brand-page 6.1.15 → 6.1.16

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -1277,6 +1277,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2569,6 +2570,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;

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

@@ -1235,6 +1235,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2527,6 +2528,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -4638,6 +4640,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     logoSliderMax(): number;
     backgroundColor(): string;
     isBackgroundColorEnabled(): boolean;
+    backgroundOpacity(): number;
+    showBackgroundOpacity(): boolean;
     copyrightPlaceholder(): string;
     copyrightText: {
         get(): string;
@@ -4689,6 +4693,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         logoImageBase64Url?: string;
     }): void;
     onSelectColor(selectedColor: UpdateItemValuePayload<string>): void;
+    onBackgroundOpacityChange(value: number | string): void;
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>): void;
     onLogoVisibleChanged(showLogo: boolean): void;
     onLogoVariationSelected(selectedLogoVariationIndex: number): void;

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

@@ -3,6 +3,7 @@ import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-sectio
 import { PAGE_SECTIONS } from '../../models';
 import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
+import { isTransparentColour } from '@brand-page/utils/color.util';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
@@ -141,6 +142,15 @@ export default defineComponent({
             return this.sections[this.sectionName][this.viewport]
                 .backgroundColorEnabled;
         },
+        backgroundOpacity() {
+            // Real default: an un-constructed (JSON.parse'd) header never saw the constructor's default.
+            return (this.sections[this.sectionName][this.viewport].backgroundStyle
+                ?.backgroundOpacity ?? 100);
+        },
+        showBackgroundOpacity() {
+            // isTransparentColour('') is false, so an unset color needs its own check.
+            return (!!this.backgroundColor && !isTransparentColour(this.backgroundColor));
+        },
         copyrightPlaceholder() {
             return commonTr(`copyrightTextPlaceholder`);
         },
@@ -394,6 +404,21 @@ export default defineComponent({
                 viewport: this.viewport,
             });
         },
+        onBackgroundOpacityChange(value) {
+            // Clamped here: the Slider's text field can emit an out-of-range value mid-typing.
+            const clamped = Math.min(100, Math.max(0, Number(value) || 0));
+            // A variable, not an inline literal — backgroundOpacity isn't on BrandPageCssStyle.
+            const backgroundStyle = {
+                backgroundOpacity: clamped,
+            };
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: this.sectionName,
+                propName: 'backgroundStyle',
+                value: backgroundStyle,
+                merge: true,
+                viewport: this.viewport,
+            });
+        },
         onBackgroundEnable(enabled) {
             this.pageSettingsStore.setPageSettingsSectionValue({
                 sectionName: this.sectionName,

package/lib/src/utils/minify-brand-page-metadata.d.ts

@@ -24,6 +24,7 @@ type MinifiedHeader = {
     logoAssetKey?: string;
     backgroundStyle?: {
         backgroundColor?: string;
+        backgroundOpacity?: number;
     };
     navigation?: {
         displayType?: string;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -389,6 +389,18 @@ const minifyFooter = (footer, logoAssetKey) => {
             : undefined,
     };
 };
+// Fully opaque (100) is the default, so it's omitted to keep the AI payload small.
+const minifyHeaderBackgroundStyle = (backgroundStyle) => {
+    const backgroundColor = backgroundStyle?.backgroundColor;
+    if (!backgroundColor)
+        return undefined;
+    const backgroundOpacity = backgroundStyle.backgroundOpacity;
+    return {
+        backgroundColor,
+        ...(backgroundOpacity !== undefined &&
+            backgroundOpacity < 100 && { backgroundOpacity }),
+    };
+};
 const minifyHeader = (header, logoAssetKey) => {
     if (!header)
         return undefined;
@@ -399,9 +411,7 @@ const minifyHeader = (header, logoAssetKey) => {
         logoImageHeight: header.logoImageHeight || undefined,
         logoImageWidth: header.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
-        backgroundStyle: header.backgroundStyle?.backgroundColor
-            ? { backgroundColor: header.backgroundStyle.backgroundColor }
-            : undefined,
+        backgroundStyle: minifyHeaderBackgroundStyle(header.backgroundStyle),
         navigation: nav
             ? {
                 displayType: nav.displayType || undefined,

package/package.json

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

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

@@ -90,6 +90,10 @@ export type BackgroundStyle = Partial<
   Omit<BrandPageCssStyle, 'backgroundColor'>
 >;
 
+export interface BackgroundColorStyle extends BrandPageCssStyle {
+  backgroundOpacity?: number;
+}
+
 /**
  * The complete default for a page's background media overlay. Seeded into
  * metadata (constructor for new models, migration-20.5 for persisted partials) so
@@ -734,7 +738,7 @@ export abstract class AbstractPageHeaderStyles {
   logoImage: LogoImageModel;
   logoTemplateImage: LogoTemplateImageModel | undefined;
   logoImageBase64Url?: string;
-  backgroundStyle: BrandPageCssStyle;
+  backgroundStyle: BackgroundColorStyle;
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
@@ -771,7 +775,10 @@ export abstract class AbstractPageHeaderStyles {
     this.logoVariation = options.logoVariation || 0;
 
     this.style = options.style || {};
-    this.backgroundStyle = options.backgroundStyle || {};
+    this.backgroundStyle = {
+      ...(options.backgroundStyle || {}),
+      backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
+    };
   }
 }
 

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

@@ -152,7 +152,9 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -225,7 +227,9 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -645,7 +649,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -718,7 +724,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1122,7 +1130,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1195,7 +1205,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

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

@@ -137,7 +137,9 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -211,7 +213,9 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

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

@@ -136,7 +136,9 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -210,7 +212,9 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -593,7 +597,9 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -667,7 +673,9 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,

package/src/brand-page/utils/view-model.util.test.ts

@@ -6,12 +6,13 @@ import {
   type ContactFormContent,
   type ColorItem,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageStyles } from '../models';
+import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
 import {
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
   mapToImageViewModel,
   mapToMailingListViewModel,
+  mapToPageHeaderViewModel,
   mapToProfileViewModel,
   mapToTextViewModel,
   mapToViewModel,
@@ -508,6 +509,149 @@ describe('view model util', () => {
     expect(url.searchParams.has('w')).toBe(true);
     expect(wParamValue).toBe('1080');
   });
+
+  describe('mapToPageHeaderViewModel background opacity (BP-5851)', () => {
+    const mapHeader = (header: PageHeaderDesktop) =>
+      mapToPageHeaderViewModel(header, new PageStyles(), []);
+
+    test('constructing without an explicit backgroundOpacity defaults it to 100 and renders unchanged', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000' },
+      });
+
+      expect(header.backgroundStyle.backgroundOpacity).toBe(100);
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
+    });
+
+    test('header constructed with no options still gets a concrete backgroundOpacity', () => {
+      expect(new PageHeaderDesktop().backgroundStyle.backgroundOpacity).toBe(
+        100,
+      );
+    });
+
+    test('un-constructed legacy header (parsed metadata that never ran the constructor) renders fully opaque', () => {
+      // The maker's live-preview path can hold the header JSON.parse'd verbatim.
+      const header = JSON.parse(
+        JSON.stringify(
+          new PageHeaderDesktop({
+            backgroundStyle: { backgroundColor: '#ff0000' },
+          }),
+        ),
+      ) as PageHeaderDesktop;
+
+      delete header.backgroundStyle.backgroundOpacity;
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
+    });
+
+    test('a header with backgroundStyle itself absent renders fully opaque instead of throwing', () => {
+      const header = new PageHeaderDesktop();
+
+      delete (header as { backgroundStyle?: unknown }).backgroundStyle;
+
+      expect(() => mapHeader(header)).not.toThrow();
+      expect(mapHeader(header).backgroundStyle).toEqual({});
+    });
+
+    test('opacity 100 (default) leaves backgroundColor unchanged', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 100 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff0000');
+    });
+
+    test('opacity 60 composites into the expected 8-digit hex backgroundColor', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 60 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000099');
+    });
+
+    test('opacity below 100 composites into an 8-digit hex backgroundColor', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 50 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000080');
+    });
+
+    test('opacity 0 composites to the transparent keyword', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 0 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
+    });
+
+    test('a palette-matched (var(--palette-n)) backgroundColor is faded via color-mix, not handed back unfaded', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: {
+          backgroundColor: 'var(--palette-1)',
+          backgroundOpacity: 30,
+        },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe(
+        'color-mix(in srgb, var(--palette-1) 30%, transparent)',
+      );
+    });
+
+    test('transparent backgroundColor is left unchanged regardless of opacity', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: {
+          backgroundColor: 'transparent',
+          backgroundOpacity: 40,
+        },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
+    });
+
+    test('unset backgroundColor is left unchanged regardless of opacity', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundOpacity: 40 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBeUndefined();
+    });
+
+    test.each([100, 30])(
+      'backgroundOpacity %i never leaks into the rendered style, and CSS opacity is never set (children must stay opaque)',
+      (backgroundOpacity) => {
+        const header = new PageHeaderDesktop({
+          backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity },
+        });
+
+        const viewModel = mapHeader(header);
+
+        expect(viewModel.backgroundStyle).not.toHaveProperty(
+          'backgroundOpacity',
+        );
+        expect(viewModel.backgroundStyle.opacity).toBeUndefined();
+      },
+    );
+  });
 });
 
 // The reCAPTCHA footnote colour is a raw colour anchored to the surface it sits on.

package/src/brand-page/utils/view-model.util.ts

@@ -88,9 +88,10 @@ import type {
   NavItemViewModel,
 } from '../view-models';
 import {
+  backgroundColorFromStyle,
   isTransparentColour,
   mutedTextForBackground,
-  backgroundColorFromStyle,
+  withColorOpacity,
 } from './color.util';
 import { resolveColorReference } from './color-palette.util';
 import {
@@ -1281,7 +1282,31 @@ export const mapToPageHeaderViewModel = (
             hamburgerMenuStyle,
           }),
     style: pageHeader.style,
-    backgroundStyle: pageHeader.backgroundStyle,
+    backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+  };
+};
+
+// Folds backgroundOpacity into backgroundColor's alpha so only the container's paint fades, not its children.
+const getHeaderBackgroundStyleWithOpacity = (
+  pageHeader: PageHeaderDesktop | PageHeaderMobile,
+): BrandPageCssStyle => {
+  // Real defaults: an un-constructed maker header, or metadata older than migration-11's backfill, can lack these entirely.
+  const { backgroundOpacity = 100, ...backgroundStyle } =
+    pageHeader.backgroundStyle ?? {};
+  const { backgroundColor } = backgroundStyle;
+
+  if (
+    backgroundOpacity >= 100 ||
+    !backgroundColor ||
+    isTransparentColour(backgroundColor)
+  ) {
+    return backgroundStyle;
+  }
+
+  // withColorOpacity, not setRgbAlpha: fades a var(--palette-n) reference too.
+  return {
+    ...backgroundStyle,
+    backgroundColor: withColorOpacity(backgroundColor, backgroundOpacity / 100),
   };
 };
 

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

@@ -259,9 +259,11 @@ export interface PageHeaderViewModel extends Omit<
   | 'logoTemplateImage'
   | 'logoImageHeight'
   | 'logoImageWidth'
+  | 'backgroundStyle'
 > {
   logo: LogoViewModel;
   pages: PageViewModel[];
+  backgroundStyle: BrandPageCssStyle;
 }
 
 export interface PageFooterViewModel extends Omit<

package/src/bundles/bundled-translations.de-DE.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Kopfzeilen-Einstellungen",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Hintergrunddeckkraft",
     "buttonSectionTitle": "Schaltfläche",
     "footerSettings": "Fußzeilen-Einstellungen",
     "managePages": "Seiten verwalten",

package/src/bundles/bundled-translations.es-ES.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Configuración del encabezado",
     "navigationSectionTitle": "Navegación",
     "headerSectionTitle": "Encabezado",
+    "backgroundOpacity": "Opacidad del fondo",
     "buttonSectionTitle": "Botón",
     "footerSettings": "Configuración del pie de página",
     "managePages": "Gestionar páginas",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

package/src/bundles/bundled-translations.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Header Settings",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Background opacity",
     "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Configurações do cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do plano de fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerenciar páginas",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Definições de cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerir páginas",