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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.64",
+  "version": "3.3.67",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/qaiswardag/vue-website-page-builder/issues"
   },
-  "homepage": "https://www.builder-demo.myissue.dk/",
+  "homepage": "https://mybuilder.dev",
   "engines": {
     "node": ">=18.0.0",
     "npm": ">=8.0.0"
@@ -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/DemoUnsplash.vue

@@ -96,13 +96,10 @@ const nextPage = async function () {
 }
 
 const applySelectedImage = async function (imageURL) {
-  // Ensure the current image is set in the store with proper structure
-  pageBuilderService.stageImageForSelectedElement({
+  await pageBuilderService.applySelectedImage({
     src: `${imageURL}`,
   })
 
-  await pageBuilderService.applyPendingImageToSelectedElement()
-
   closeMediaLibraryModal()
 }
 

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>
@@ -57,12 +57,13 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">
               <span
                 class="material-symbols-outlined"
+                style="text-shadow: rgb(0 0 0 / 10%) 1.5px 1.5px 0px"
                 :class="`pbx-text-${backgroundColor?.replace('pbx-bg-', '')}`"
               >
                 format_color_fill
@@ -98,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,17 +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 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"
@@ -92,15 +97,20 @@ 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 class="pbx-myPrimaryInputLabel"> Border Radius top left </label>
+        <label for="border-radius-top-left" class="pbx-myPrimaryInputLabel">
+          {{ $t('borderRadius.topLeft') }}
+        </label>
         <select
+          id="border-radius-top-left"
           v-model="borderRadiusTopLeft"
           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"
@@ -110,13 +120,16 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Border Radius top right </label>
+        <label for="border-radius-top-right" class="pbx-myPrimaryInputLabel">
+          {{ $t('borderRadius.topRight') }}
+        </label>
         <select
+          id="border-radius-top-right"
           v-model="borderRadiusTopRight"
           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"
@@ -126,13 +139,16 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Border Radius bottom left </label>
+        <label for="border-radius-bottom-left" class="pbx-myPrimaryInputLabel">
+          {{ $t('borderRadius.bottomLeft') }}
+        </label>
         <select
+          id="border-radius-bottom-left"
           v-model="borderRadiusBottomleft"
           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"
@@ -142,13 +158,16 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Border Radius bottom right </label>
+        <label for="border-radius-bottom-right" class="pbx-myPrimaryInputLabel">
+          {{ $t('borderRadius.bottomRight') }}
+        </label>
         <select
+          id="border-radius-bottom-right"
           v-model="borderRadiusBottomRight"
           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,18 +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 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"
@@ -73,13 +76,14 @@ watch(
         </select>
       </div>
       <div class="pbx-my-2 pbx-py-2">
-        <label 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"
@@ -89,10 +93,10 @@ watch(
         </select>
       </div>
 
-      <label 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">
+          <ListboxButton class="pbx-myPrimarySelect" id="border-color">
             <span class="pbx-flex pbx-items-center pbx-gap-2">
               <div v-if="getBorderColor === 'none'">
                 <div class="pbx-myPrimaryColorPreview pbx-border-none">

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">
@@ -78,22 +77,25 @@ const handleAddClasses = async () => {
       </div>
 
       <div>
-        <label class="pbx-myPrimaryInputLabel">
-          Add your CSS.
+        <label for="custom-css" class="pbx-myPrimaryInputLabel">
+          {{ $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/EditGetElement.vue

@@ -273,7 +273,7 @@ const getRestoredElement = computed(() => {
           <button
             @click="handleModalIframeSrc"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> play_circle </span>
           </button>
@@ -290,7 +290,7 @@ const getRestoredElement = computed(() => {
           <button
             @click="handleModalPreviewTiptap"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> edit </span>
           </button>
@@ -310,7 +310,7 @@ const getRestoredElement = computed(() => {
           <button
             @click="handleAddImage"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
           >
             <span class="material-symbols-outlined"> add_photo_alternate </span>
           </button>
@@ -332,7 +332,7 @@ const getRestoredElement = computed(() => {
         <button
           @click="pageBuilderService.deleteElementFromDOM"
           type="button"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-red-500 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <span class="material-symbols-outlined"> delete </span>
         </button>
@@ -340,7 +340,7 @@ const getRestoredElement = computed(() => {
 
       <div
         v-if="getElement && getComponent"
-        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         @click="pageBuilderService.clearHtmlSelection()"
       >
         <span class="material-symbols-outlined"> close </span>

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

@@ -32,11 +32,13 @@ watch(
 
 <template>
   <div class="pbx-my-2 pbx-py-2">
-    <label 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">
-        <ListboxButton class="pbx-myPrimarySelect">
+        <ListboxButton class="pbx-myPrimarySelect" id="bg-opacity">
           <span class="pbx-flex pbx-items-center pbx-gap-2">
             <div v-if="opacityVueModel === 'none'">
               <div class="pbx-myPrimaryColorPreview pbx-border-none">
@@ -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
@@ -79,15 +81,14 @@ watch(
             >
               <li
                 :class="[
-                  active ? 'bg-myPrimaryLinkColor text-white' : 'pbx-text-myPrimaryDarkGrayColor',
+                  active
+                    ? 'pbx-bg-myPrimaryLinkColor text-white'
+                    : 'pbx-text-myPrimaryDarkGrayColor',
                   'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
                 ]"
               >
                 <div class="pbx-flex pbx-items-center">
-                  <div
-                    v-if="backgroundOpacity === 'none'"
-                    class="pbx-aspect-square pbx-w-6 pbx-h-6"
-                  >
+                  <div v-if="backgroundOpacity === 'none'">
                     <div class="pbx-myPrimaryColorPreview pbx-border-none">
                       <span class="material-symbols-outlined"> ev_shadow </span>
                     </div>
@@ -98,10 +99,12 @@ 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">{{
                     backgroundOpacity
                   }}</span>
-                  <span v-if="backgroundOpacity === 'none'" class="pbx-ml-3">Transparent</span>
                 </div>
               </li>
             </ListboxOption>

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

@@ -31,11 +31,11 @@ watch(
 
 <template>
   <div class="pbx-my-2 pbx-py-2">
-    <label 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">
-        <ListboxButton class="pbx-myPrimarySelect">
+        <ListboxButton class="pbx-myPrimarySelect" id="default-opacity">
           <span class="pbx-flex pbx-items-center pbx-gap-2">
             <div v-if="opacityVueModel === 'none'">
               <div class="pbx-myPrimaryColorPreview pbx-border-none">
@@ -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,16 +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 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"
@@ -81,13 +84,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label 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,16 +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 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"
@@ -81,13 +84,16 @@ watch(
       </div>
       <hr />
       <div class="pbx-my-2 pbx-py-2">
-        <label 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

@@ -0,0 +1,116 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import EditorAccordion from '../EditorAccordion.vue'
+import { getPageBuilder } from '../../../../composables/builderInstance'
+
+const pageBuilderService = getPageBuilder()
+
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const currentStyles = ref(null)
+const getCurrentStyles = computed(() => pageBuilderStateStore.getCurrentStyles)
+
+watch(
+  getCurrentStyles,
+  (newValue) => {
+    currentStyles.value = newValue
+  },
+  { immediate: true },
+)
+
+const inputProperty = ref('')
+const inputValue = ref('')
+const errorMessage = ref('')
+const valueInputRef = ref(null)
+
+const handleEnterOnProperty = () => {
+  if (valueInputRef.value) {
+    valueInputRef.value.focus()
+  }
+}
+
+const handleAddStyle = async () => {
+  const property = inputProperty.value.trim()
+  const value = inputValue.value.trim()
+
+  if (!property || !value) {
+    errorMessage.value = 'Please enter a property and a value.'
+    return
+  }
+
+  if (currentStyles.value && currentStyles.value[property]) {
+    errorMessage.value = `Property "${property}" already exists. Remove it first to add a new one.`
+    return
+  }
+
+  errorMessage.value = '' // Clear error
+
+  pageBuilderService.handleAddStyle(property, value)
+  await pageBuilderService.initializeElementStyles()
+
+  inputProperty.value = ''
+  inputValue.value = ''
+}
+</script>
+
+<template>
+  <EditorAccordion>
+    <template #title>{{ $t('styleEditor.title') }}</template>
+    <template #content>
+      <label class="pbx-myPrimaryInputLabel pbx-my-4">
+        {{ $t('styleEditor.info') }}
+      </label>
+
+      <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
+        <div
+          v-for="(value, key) in currentStyles"
+          :key="key"
+          class="pbx-myPrimaryTag pbx-cursor-pointer hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-xs pbx-py-2 pbx-font-medium"
+          @click="
+            async () => {
+              pageBuilderService.handleRemoveStyle(key)
+              await pageBuilderService.initializeElementStyles()
+            }
+          "
+        >
+          <div class="pbx-flex pbx-items-center pbx-gap-1">
+            <span class="pbx-mr-1"> {{ key }}: {{ value }}; </span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <label for="custom-style-property" class="pbx-myPrimaryInputLabel">
+          {{ $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="$t('styleEditor.propertyPlaceholder')"
+            @keydown.enter.prevent="handleEnterOnProperty"
+            autocomplete="off"
+            class="pbx-myPrimaryInput"
+          />
+          <input
+            id="custom-style-value"
+            ref="valueInputRef"
+            v-model="inputValue"
+            type="text"
+            :placeholder="$t('styleEditor.valuePlaceholder')"
+            @keydown.enter="handleAddStyle"
+            autocomplete="off"
+            class="pbx-myPrimaryInput"
+          />
+
+          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">
+            {{ $t('styleEditor.addButton') }}
+          </button>
+        </div>
+      </div>
+      <p v-if="errorMessage" class="pbx-myPrimaryInputError">{{ errorMessage }}</p>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -57,12 +57,13 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">
               <span
                 class="material-symbols-outlined"
+                style="text-shadow: rgb(0 0 0 / 10%) 1.5px 1.5px 0px"
                 :class="`pbx-text-${textColor?.replace('pbx-text-', '')}`"
               >
                 format_color_text