@myissue/vue-website-page-builder 3.3.65 → 3.3.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.65",
+  "version": "3.3.68",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -79,6 +79,7 @@
     "pinia": "^2.1.7",
     "uuid": "^9.0.0",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.9",
     "vue-website-page-builder": "file:"
   },
   "devDependencies": {

package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue

@@ -49,7 +49,7 @@ watch(
               class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
               :class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
             ></div>
-            <div>Background Color</div>
+            <div>{{ $t('backgroundColorEditor.label') }}</div>
           </div>
 
           <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
@@ -99,7 +99,7 @@ watch(
             >
               <div v-if="color === 'none'" class="pbx-flex pbx-items-center">
                 <span class="material-symbols-outlined"> ev_shadow </span>
-                <span class="pbx-ml-3">Transparent</span>
+                <span class="pbx-ml-3">{{ $t('backgroundColorEditor.transparent') }}</span>
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div

package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue

@@ -73,18 +73,22 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>Border Radius</template>
+    <template #title>{{ $t('borderRadius.title') }}</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Global</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ $t('borderRadius.global') }}
+      </p>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="global-border-radius" class="pbx-myPrimaryInputLabel"> Border Radius </label>
+        <label for="global-border-radius" class="pbx-myPrimaryInputLabel">{{
+          $t('borderRadius.label')
+        }}</label>
         <select
           id="global-border-radius"
           v-model="borderRadiusGlobal"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusGlobal(borderRadiusGlobal)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borderRadius.select') }}</option>
           <option
             v-for="borderRadiusGlobal in tailwindBorderRadius.roundedGlobal"
             :key="borderRadiusGlobal"
@@ -93,10 +97,12 @@ watch(
           </option>
         </select>
       </div>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Specific</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ $t('borderRadius.specific') }}
+      </p>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-top-left" class="pbx-myPrimaryInputLabel">
-          Border Radius top left
+          {{ $t('borderRadius.topLeft') }}
         </label>
         <select
           id="border-radius-top-left"
@@ -104,7 +110,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borderRadius.select') }}</option>
           <option
             v-for="borderRadiusTopLeft in tailwindBorderRadius.roundedTopLeft"
             :key="borderRadiusTopLeft"
@@ -115,7 +121,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-top-right" class="pbx-myPrimaryInputLabel">
-          Border Radius top right
+          {{ $t('borderRadius.topRight') }}
         </label>
         <select
           id="border-radius-top-right"
@@ -123,7 +129,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopRight(borderRadiusTopRight)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borderRadius.select') }}</option>
           <option
             v-for="borderRadiusTopRight in tailwindBorderRadius.roundedTopRight"
             :key="borderRadiusTopRight"
@@ -134,7 +140,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-left" class="pbx-myPrimaryInputLabel">
-          Border Radius bottom left
+          {{ $t('borderRadius.bottomLeft') }}
         </label>
         <select
           id="border-radius-bottom-left"
@@ -142,7 +148,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borderRadius.select') }}</option>
           <option
             v-for="borderRadiusBottomleft in tailwindBorderRadius.roundedBottomLeft"
             :key="borderRadiusBottomleft"
@@ -153,7 +159,7 @@ watch(
       </div>
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-right" class="pbx-myPrimaryInputLabel">
-          Border Radius bottom right
+          {{ $t('borderRadius.bottomRight') }}
         </label>
         <select
           id="border-radius-bottom-right"
@@ -161,7 +167,7 @@ watch(
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borderRadius.select') }}</option>
           <option
             v-for="borderRadiusBottomRight in tailwindBorderRadius.roundedBottomRight"
             :key="borderRadiusBottomRight"

package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue

@@ -52,19 +52,21 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>Border Style, Width & Color</template>
+    <template #title>{{ $t('borders.title') }}</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Border</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ $t('borders.border') }}
+      </p>
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-style" class="pbx-myPrimaryInputLabel"> Border Style </label>
+        <label for="border-style" class="pbx-myPrimaryInputLabel">{{ $t('borders.style') }}</label>
         <select
           id="border-style"
           v-model="borderStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderStyle(borderStyle)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borders.select') }}</option>
           <option
             v-for="borderStyle in tailwindBorderStyleWidthPlusColor.borderStyle"
             :key="borderStyle"
@@ -74,14 +76,14 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-width" class="pbx-myPrimaryInputLabel"> Border Width </label>
+        <label for="border-width" class="pbx-myPrimaryInputLabel">{{ $t('borders.width') }}</label>
         <select
           id="border-width"
           v-model="borderWidth"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderWidth(borderWidth)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('borders.select') }}</option>
           <option
             v-for="borderWidth in tailwindBorderStyleWidthPlusColor.borderWidth"
             :key="borderWidth"
@@ -91,7 +93,7 @@ watch(
         </select>
       </div>
 
-      <label for="border-color" class="pbx-myPrimaryInputLabel"> Border Color </label>
+      <label for="border-color" class="pbx-myPrimaryInputLabel">{{ $t('borders.color') }}</label>
       <Listbox as="div" v-model="borderColor">
         <div class="pbx-relative pbx-mt-2">
           <ListboxButton class="pbx-myPrimarySelect" id="border-color">

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -50,11 +50,10 @@ const handleAddClasses = async () => {
 
 <template>
   <EditorAccordion>
-    <template #title>Generated CSS</template>
+    <template #title>{{ $t('classEditor.title') }}</template>
     <template #content>
       <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the
-        selected element.
+        {{ $t('classEditor.info') }}
       </label>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
@@ -79,22 +78,24 @@ const handleAddClasses = async () => {
 
       <div>
         <label for="custom-css" class="pbx-myPrimaryInputLabel">
-          Add your CSS.
+          {{ $t('classEditor.add') }}
           <br />
-          The pbx- prefix is added automatically.
+          {{ $t('classEditor.prefix') }}
         </label>
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
           <input
             id="custom-css"
             v-model="inputClass"
             type="text"
-            placeholder="Type class"
+            :placeholder="$t('classEditor.placeholder')"
             @keydown.enter="handleAddClasses()"
             autocomplete="off"
             class="pbx-myPrimaryInput"
           />
 
-          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">Add</button>
+          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">
+            {{ $t('classEditor.addButton') }}
+          </button>
         </div>
       </div>
       <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>

package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue

@@ -32,7 +32,9 @@ watch(
 
 <template>
   <div class="pbx-my-2 pbx-py-2">
-    <label for="bg-opacity" class="pbx-myPrimaryInputLabel"> Background Opacity</label>
+    <label for="bg-opacity" class="pbx-myPrimaryInputLabel">{{
+      $t('backgroundOpacity.label')
+    }}</label>
 
     <Listbox as="div" v-model="opacityVueModel">
       <div class="pbx-relative">
@@ -51,7 +53,7 @@ watch(
             ></div>
 
             <span class="pbx-block pbx-truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
-              opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
+              opacityVueModel === 'none' ? $t('backgroundOpacity.transparent') : opacityVueModel
             }}</span>
           </span>
           <span
@@ -97,7 +99,9 @@ watch(
                     class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
                     :class="`${backgroundOpacity}`"
                   ></div>
-                  <span v-if="backgroundOpacity === 'none'" class="pbx-ml-3">Transparent</span>
+                  <span v-if="backgroundOpacity === 'none'" class="pbx-ml-3">{{
+                    $t('backgroundOpacity.transparent')
+                  }}</span>
                   <span v-if="backgroundOpacity !== 'none'" class="pbx-ml-3">{{
                     backgroundOpacity
                   }}</span>

package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue

@@ -31,7 +31,7 @@ watch(
 
 <template>
   <div class="pbx-my-2 pbx-py-2">
-    <label for="default-opacity" class="pbx-myPrimaryInputLabel"> Opacity</label>
+    <label for="default-opacity" class="pbx-myPrimaryInputLabel">{{ $t('opacity.label') }}</label>
 
     <Listbox as="div" v-model="opacityVueModel">
       <div class="pbx-relative">
@@ -50,7 +50,7 @@ watch(
             ></div>
 
             <span class="pbx-block pbx-truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
-              opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
+              opacityVueModel === 'none' ? $t('opacity.transparent') : opacityVueModel
             }}</span>
           </span>
           <span
@@ -96,7 +96,9 @@ watch(
                     class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
                     :class="`${elementOpacity}`"
                   ></div>
-                  <span v-if="elementOpacity === 'none'" class="pbx-ml-3">Transparent</span>
+                  <span v-if="elementOpacity === 'none'" class="pbx-ml-3">{{
+                    $t('opacity.transparent')
+                  }}</span>
                   <span v-if="elementOpacity !== 'none'" class="pbx-ml-3">{{
                     elementOpacity
                   }}</span>

package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue

@@ -61,17 +61,19 @@ watch(
 </script>
 <template>
   <EditorAccordion>
-    <template #title>Margin</template>
+    <template #title>{{ $t('margin.title') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="vertical-margin" class="pbx-myPrimaryInputLabel"> Vertical Margin </label>
+        <label for="vertical-margin" class="pbx-myPrimaryInputLabel">{{
+          $t('margin.vertical')
+        }}</label>
         <select
           id="vertical-margin"
           v-model="fontVerticalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalMargin(fontVerticalMargin)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('margin.select') }}</option>
           <option
             v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
             :key="verticalMargin"
@@ -82,14 +84,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-margin" class="pbx-myPrimaryInputLabel"> Horizontal Margin </label>
+        <label for="horizontal-margin" class="pbx-myPrimaryInputLabel">{{
+          $t('margin.horizontal')
+        }}</label>
         <select
           id="horizontal-margin"
           v-model="fontHorizontalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalMargin(fontHorizontalMargin)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('margin.select') }}</option>
           <option
             v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
             :key="horizontalMargin"

package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue

@@ -6,7 +6,7 @@ import ManageOpacity from './ManageOpacity.vue'
 
 <template>
   <EditorAccordion>
-    <template #title>Opacity & Transparency </template>
+    <template #title>{{ $t('opacityEditor.title') }}</template>
     <template #content>
       <ManageOpacity></ManageOpacity>
       <hr />

package/src/Components/PageBuilder/EditorMenu/Editables/Padding.vue

@@ -61,17 +61,19 @@ watch(
 </script>
 <template>
   <EditorAccordion>
-    <template #title>Padding</template>
+    <template #title>{{ $t('padding.title') }}</template>
     <template #content>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="vertical-padding" class="pbx-myPrimaryInputLabel"> Vertical Padding </label>
+        <label for="vertical-padding" class="pbx-myPrimaryInputLabel">{{
+          $t('padding.vertical')
+        }}</label>
         <select
           id="vertical-padding"
           v-model="fontVerticalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalPadding(fontVerticalPadding)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('padding.select') }}</option>
           <option
             v-for="verticalPadding in tailwindPaddingPlusMargin.verticalPadding"
             :key="verticalPadding"
@@ -82,14 +84,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label for="horizontal-padding" class="pbx-myPrimaryInputLabel"> Horizontal Padding </label>
+        <label for="horizontal-padding" class="pbx-myPrimaryInputLabel">{{
+          $t('padding.horizontal')
+        }}</label>
         <select
           id="horizontal-padding"
           v-model="fontHorizontalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalPadding(fontHorizontalPadding)"
         >
-          <option disabled value="">Select</option>
+          <option disabled value="">{{ $t('padding.select') }}</option>
           <option
             v-for="horizontalPadding in tailwindPaddingPlusMargin.horizontalPadding"
             :key="horizontalPadding"

package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue

@@ -56,11 +56,10 @@ const handleAddStyle = async () => {
 
 <template>
   <EditorAccordion>
-    <template #title>Inline Styles</template>
+    <template #title>{{ $t('styleEditor.title') }}</template>
     <template #content>
       <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        These are the inline styles applied by the builder. Add your own styles and press Enter to
-        apply them to the selected element.
+        {{ $t('styleEditor.info') }}
       </label>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
@@ -83,14 +82,14 @@ const handleAddStyle = async () => {
 
       <div>
         <label for="custom-style-property" class="pbx-myPrimaryInputLabel">
-          Add your own style.
+          {{ $t('styleEditor.add') }}
         </label>
         <div class="pbx-flex pbx-gap-2 pbx-flex-col pbx-item-center">
           <input
             id="custom-style-property"
             v-model="inputProperty"
             type="text"
-            placeholder="property"
+            :placeholder="$t('styleEditor.propertyPlaceholder')"
             @keydown.enter.prevent="handleEnterOnProperty"
             autocomplete="off"
             class="pbx-myPrimaryInput"
@@ -100,13 +99,15 @@ const handleAddStyle = async () => {
             ref="valueInputRef"
             v-model="inputValue"
             type="text"
-            placeholder="value"
+            :placeholder="$t('styleEditor.valuePlaceholder')"
             @keydown.enter="handleAddStyle"
             autocomplete="off"
             class="pbx-myPrimaryInput"
           />
 
-          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">Add</button>
+          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">
+            {{ $t('styleEditor.addButton') }}
+          </button>
         </div>
       </div>
       <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>

package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue

@@ -99,13 +99,17 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title> Typographies </template>
+    <template #title>{{ $t('typography.title') }}</template>
     <template #content>
       <!-- FONT SIZES -->
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Font Appearance</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
+        {{ $t('typography.appearance') }}
+      </p>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-base" class="pbx-myPrimaryInputLabel"> Font Size </label>
+          <label for="font-base" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontSize')
+          }}</label>
           <select
             id="font-base"
             v-model="fontBase"
@@ -120,7 +124,9 @@ watch(
         </div>
       </template>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-desktop" class="pbx-myPrimaryInputLabel"> Font size </label>
+        <label for="font-desktop" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontSize')
+        }}</label>
         <select
           id="font-desktop"
           v-model="fontDesktop"
@@ -135,7 +141,9 @@ watch(
       </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-tablet" class="pbx-myPrimaryInputLabel"> Font tablet size </label>
+          <label for="font-tablet" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontTabletSize')
+          }}</label>
           <select
             id="font-tablet"
             v-model="fontTablet"
@@ -149,7 +157,9 @@ watch(
           </select>
         </div>
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-mobile" class="pbx-myPrimaryInputLabel"> Font small screens </label>
+          <label for="font-mobile" class="pbx-myPrimaryInputLabel">{{
+            $t('typography.fontMobileSize')
+          }}</label>
           <select
             id="font-mobile"
             v-model="fontMobile"
@@ -166,7 +176,9 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-weight" class="pbx-myPrimaryInputLabel"> Font weight </label>
+        <label for="font-weight" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontWeight')
+        }}</label>
         <select
           id="font-weight"
           v-model="fontWeight"
@@ -183,7 +195,9 @@ watch(
 
       <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-family" class="pbx-myPrimaryInputLabel"> Font family </label>
+        <label for="font-family" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontFamily')
+        }}</label>
         <select
           id="font-family"
           v-model="fontFamily"
@@ -199,7 +213,9 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-style" class="pbx-myPrimaryInputLabel"> Font Style </label>
+        <label for="font-style" class="pbx-myPrimaryInputLabel">{{
+          $t('typography.fontStyle')
+        }}</label>
         <select
           id="font-style"
           v-model="fontStyle"

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -133,7 +133,7 @@ const handleCloseGlobalPageStyles = async function () {
         <span class="material-symbols-outlined"> close </span>
       </button>
       <p class="pbx-font-medium pbx-text-sm">
-        Editing
+        {{ $t('rightSidebar.editing') }}
         <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
       </p>
     </div>
@@ -181,16 +181,15 @@ const handleCloseGlobalPageStyles = async function () {
       <!-- Global Page Styles -->
       <article class="pbx-my-1 pbx-bg-white">
         <EditorAccordion>
-          <template #title>Global Page Styles</template>
+          <template #title>{{ $t('rightSidebar.globalPageStylesTitle') }}</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              Apply styles that affect the entire page. These settings include global font family,
-              text color, background color, and other universal styles that apply to all sections.
+              {{ $t('rightSidebar.globalPageStylesDescription') }}
             </label>
 
             <div class="pbx-mt-4">
               <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
-                Update Page Styles
+                {{ $t('rightSidebar.updatePageStyles') }}
               </button>
             </div>
           </template>
@@ -204,15 +203,14 @@ const handleCloseGlobalPageStyles = async function () {
         class="pbx-my-1 pbx-bg-white"
       >
         <EditorAccordion>
-          <template #title>Download HTML</template>
+          <template #title>{{ $t('rightSidebar.downloadHtmlTitle') }}</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              Export the entire page as a standalone HTML file. This includes all sections, content,
-              and applied styles, making it ready for use or integration elsewhere.
+              {{ $t('rightSidebar.downloadHtmlDescription') }}
             </label>
             <div class="pbx-mt-4">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
-                Download HTML file
+                {{ $t('rightSidebar.downloadHtmlButton') }}
               </button>
             </div>
           </template>
@@ -225,7 +223,7 @@ const handleCloseGlobalPageStyles = async function () {
       maxWidth="md"
       minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
       :showModalBuilder="showModalGlobalPageStyles"
-      title="Global Page Styles"
+      :title="$t('rightSidebar.globalPageStylesTitle')"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
       <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
@@ -244,8 +242,7 @@ const handleCloseGlobalPageStyles = async function () {
         <div v-if="!isLoadingPageStyles && showModalGlobalPageStyles" class="pbx-pb-12">
           <div>
             <p class="pbx-myPrimaryParagraph">
-              Apply styles that affect the entire page. These settings include global font family,
-              text color, background color, and other universal styles that apply to all sections.
+              {{ $t('rightSidebar.globalPageStylesDescription') }}
             </p>
             <article class="pbx-my-1 pbx-bg-gray-100">
               <Typography></Typography>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -299,7 +299,7 @@ const getPageBuilderConfig = computed(() => {
                         class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
                       >
                         <div class="pbx-min-w-[30rem] pbx-w-max">
-                          {{ getPageBuilderConfig.userSettings.language }}
+                          {{ getPageBuilderConfig.userSettings.language?.default }}
                         </div>
                       </td>
                     </tr>
@@ -317,8 +317,8 @@ const getPageBuilderConfig = computed(() => {
                             class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
                             :class="
                               getPageBuilderConfig.userSettings.autoSave
-                                ? 'bg-green-100 text-green-800'
-                                : 'bg-red-100 text-red-800'
+                                ? 'pbx-bg-green-100 pbx-text-green-800'
+                                : 'pbx-bg-red-100 pbx-text-red-800'
                             "
                           >
                             {{