@myissue/vue-website-page-builder 3.3.67 → 3.3.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.67",
+  "version": "3.3.70",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

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>{{ $t('backgroundColorEditor.label') }}</div>
+            <div>Background Color</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">{{ $t('backgroundColorEditor.transparent') }}</span>
+                <span class="pbx-ml-3">Transparent</span>
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div

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

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

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

@@ -52,21 +52,19 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>{{ $t('borders.title') }}</template>
+    <template #title>Border Style, Width & Color</template>
     <template #content>
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ $t('borders.border') }}
-      </p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Border</p>
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-style" class="pbx-myPrimaryInputLabel">{{ $t('borders.style') }}</label>
+        <label for="border-style" class="pbx-myPrimaryInputLabel"> Border Style </label>
         <select
           id="border-style"
           v-model="borderStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderStyle(borderStyle)"
         >
-          <option disabled value="">{{ $t('borders.select') }}</option>
+          <option disabled value="">Select</option>
           <option
             v-for="borderStyle in tailwindBorderStyleWidthPlusColor.borderStyle"
             :key="borderStyle"
@@ -76,14 +74,14 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="border-width" class="pbx-myPrimaryInputLabel">{{ $t('borders.width') }}</label>
+        <label for="border-width" class="pbx-myPrimaryInputLabel"> Border Width </label>
         <select
           id="border-width"
           v-model="borderWidth"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderWidth(borderWidth)"
         >
-          <option disabled value="">{{ $t('borders.select') }}</option>
+          <option disabled value="">Select</option>
           <option
             v-for="borderWidth in tailwindBorderStyleWidthPlusColor.borderWidth"
             :key="borderWidth"
@@ -93,7 +91,7 @@ watch(
         </select>
       </div>
 
-      <label for="border-color" class="pbx-myPrimaryInputLabel">{{ $t('borders.color') }}</label>
+      <label for="border-color" class="pbx-myPrimaryInputLabel"> Border 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,10 +50,11 @@ const handleAddClasses = async () => {
 
 <template>
   <EditorAccordion>
-    <template #title>{{ $t('classEditor.title') }}</template>
+    <template #title>Generated CSS</template>
     <template #content>
       <label class="pbx-myPrimaryInputLabel pbx-my-4">
-        {{ $t('classEditor.info') }}
+        This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the
+        selected element.
       </label>
 
       <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
@@ -78,24 +79,22 @@ const handleAddClasses = async () => {
 
       <div>
         <label for="custom-css" class="pbx-myPrimaryInputLabel">
-          {{ $t('classEditor.add') }}
+          Add your CSS.
           <br />
-          {{ $t('classEditor.prefix') }}
+          The pbx- prefix is added automatically.
         </label>
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
           <input
             id="custom-css"
             v-model="inputClass"
             type="text"
-            :placeholder="$t('classEditor.placeholder')"
+            placeholder="Type class"
             @keydown.enter="handleAddClasses()"
             autocomplete="off"
             class="pbx-myPrimaryInput"
           />
 
-          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">
-            {{ $t('classEditor.addButton') }}
-          </button>
+          <button @click="handleAddClasses" type="button" class="pbx-myPrimaryButton">Add</button>
         </div>
       </div>
       <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>

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

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

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

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

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

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

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

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

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

@@ -99,17 +99,13 @@ watch(
 
 <template>
   <EditorAccordion>
-    <template #title>{{ $t('typography.title') }}</template>
+    <template #title> Typographies </template>
     <template #content>
       <!-- FONT SIZES -->
-      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">
-        {{ $t('typography.appearance') }}
-      </p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Font Appearance</p>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-base" class="pbx-myPrimaryInputLabel">{{
-            $t('typography.fontSize')
-          }}</label>
+          <label for="font-base" class="pbx-myPrimaryInputLabel"> Font Size </label>
           <select
             id="font-base"
             v-model="fontBase"
@@ -124,9 +120,7 @@ watch(
         </div>
       </template>
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-desktop" class="pbx-myPrimaryInputLabel">{{
-          $t('typography.fontSize')
-        }}</label>
+        <label for="font-desktop" class="pbx-myPrimaryInputLabel"> Font size </label>
         <select
           id="font-desktop"
           v-model="fontDesktop"
@@ -141,9 +135,7 @@ watch(
       </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-tablet" class="pbx-myPrimaryInputLabel">{{
-            $t('typography.fontTabletSize')
-          }}</label>
+          <label for="font-tablet" class="pbx-myPrimaryInputLabel"> Font tablet size </label>
           <select
             id="font-tablet"
             v-model="fontTablet"
@@ -157,9 +149,7 @@ watch(
           </select>
         </div>
         <div class="pbx-my-2 pbx-py-2">
-          <label for="font-mobile" class="pbx-myPrimaryInputLabel">{{
-            $t('typography.fontMobileSize')
-          }}</label>
+          <label for="font-mobile" class="pbx-myPrimaryInputLabel"> Font small screens </label>
           <select
             id="font-mobile"
             v-model="fontMobile"
@@ -176,9 +166,7 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-weight" class="pbx-myPrimaryInputLabel">{{
-          $t('typography.fontWeight')
-        }}</label>
+        <label for="font-weight" class="pbx-myPrimaryInputLabel"> Font weight </label>
         <select
           id="font-weight"
           v-model="fontWeight"
@@ -195,9 +183,7 @@ watch(
 
       <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-family" class="pbx-myPrimaryInputLabel">{{
-          $t('typography.fontFamily')
-        }}</label>
+        <label for="font-family" class="pbx-myPrimaryInputLabel"> Font family </label>
         <select
           id="font-family"
           v-model="fontFamily"
@@ -213,9 +199,7 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label for="font-style" class="pbx-myPrimaryInputLabel">{{
-          $t('typography.fontStyle')
-        }}</label>
+        <label for="font-style" class="pbx-myPrimaryInputLabel"> Font Style </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">
-        {{ $t('rightSidebar.editing') }}
+        Editing
         <span class="pbx-lowercase">&lt;{{ elementTag }}&gt;</span>
       </p>
     </div>
@@ -181,15 +181,16 @@ const handleCloseGlobalPageStyles = async function () {
       <!-- Global Page Styles -->
       <article class="pbx-my-1 pbx-bg-white">
         <EditorAccordion>
-          <template #title>{{ $t('rightSidebar.globalPageStylesTitle') }}</template>
+          <template #title>Global Page Styles</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              {{ $t('rightSidebar.globalPageStylesDescription') }}
+              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.
             </label>
 
             <div class="pbx-mt-4">
               <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
-                {{ $t('rightSidebar.updatePageStyles') }}
+                Update Page Styles
               </button>
             </div>
           </template>
@@ -203,14 +204,15 @@ const handleCloseGlobalPageStyles = async function () {
         class="pbx-my-1 pbx-bg-white"
       >
         <EditorAccordion>
-          <template #title>{{ $t('rightSidebar.downloadHtmlTitle') }}</template>
+          <template #title>Download HTML</template>
           <template #content>
             <label class="pbx-myPrimaryInputLabel pbx-my-4">
-              {{ $t('rightSidebar.downloadHtmlDescription') }}
+              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.
             </label>
             <div class="pbx-mt-4">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
-                {{ $t('rightSidebar.downloadHtmlButton') }}
+                Download HTML file
               </button>
             </div>
           </template>
@@ -223,7 +225,7 @@ const handleCloseGlobalPageStyles = async function () {
       maxWidth="md"
       minHeight="pbx-min-h-[65vh] pbx-max-h-[65vh]"
       :showModalBuilder="showModalGlobalPageStyles"
-      :title="$t('rightSidebar.globalPageStylesTitle')"
+      title="Global Page Styles"
       @closeMainModalBuilder="handleCloseGlobalPageStyles"
     >
       <div class="pbx-flex pbx-flex-col pbx-gap-2 pbx-pt-4 pbx-pb-2">
@@ -242,7 +244,8 @@ const handleCloseGlobalPageStyles = async function () {
         <div v-if="!isLoadingPageStyles && showModalGlobalPageStyles" class="pbx-pb-12">
           <div>
             <p class="pbx-myPrimaryParagraph">
-              {{ $t('rightSidebar.globalPageStylesDescription') }}
+              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.
             </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?.default }}
+                          {{ getPageBuilderConfig.userSettings.language }}
                         </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
-                                ? 'pbx-bg-green-100 pbx-text-green-800'
-                                : 'pbx-bg-red-100 pbx-text-red-800'
+                                ? 'bg-green-100 text-green-800'
+                                : 'bg-red-100 text-red-800'
                             "
                           >
                             {{

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -156,7 +156,7 @@ const openHTMLSettings = function () {
         <!-- Component Start -->
         <div class="pbx-relative pbx-group">
           <button type="button" class="pbx-mySecondaryButton pbx-font-normal pbx-text-xs">
-            <span> {{ $t('options.button') }} </span>
+            <span> Options </span>
           </button>
           <div
             class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
@@ -172,7 +172,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              <span> {{ $t('options.configOverview') }} </span>
+              Config Overview
             </button>
             <!-- Main Settings End -->
 
@@ -182,7 +182,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              <span> {{ $t('options.htmlOverview') }} </span>
+              HTML Overview
             </button>
             <!-- HTML Settings End -->
 
@@ -192,7 +192,7 @@ const openHTMLSettings = function () {
               class="pbx-myPrimaryDeleteButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              <span> {{ $t('options.deleteLayout') }} </span>
+              Delete Layout
             </button>
             <!-- Delete Layout End -->
           </div>