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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.63",
+  "version": "3.3.65",
   "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"

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

@@ -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

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

@@ -77,8 +77,9 @@ watch(
     <template #content>
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">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"> Border Radius </label>
         <select
+          id="global-border-radius"
           v-model="borderRadiusGlobal"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusGlobal(borderRadiusGlobal)"
@@ -94,8 +95,11 @@ watch(
       </div>
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">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">
+          Border Radius top left
+        </label>
         <select
+          id="border-radius-top-left"
           v-model="borderRadiusTopLeft"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
@@ -110,8 +114,11 @@ 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">
+          Border Radius top right
+        </label>
         <select
+          id="border-radius-top-right"
           v-model="borderRadiusTopRight"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusTopRight(borderRadiusTopRight)"
@@ -126,8 +133,11 @@ 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">
+          Border Radius bottom left
+        </label>
         <select
+          id="border-radius-bottom-left"
           v-model="borderRadiusBottomleft"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
@@ -142,8 +152,11 @@ 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">
+          Border Radius bottom right
+        </label>
         <select
+          id="border-radius-bottom-right"
           v-model="borderRadiusBottomRight"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderRadiusBottomRight(borderRadiusBottomRight)"

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

@@ -57,8 +57,9 @@ watch(
       <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Border</p>
 
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Border 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)"
@@ -73,8 +74,9 @@ 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"> Border Width </label>
         <select
+          id="border-width"
           v-model="borderWidth"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleBorderWidth(borderWidth)"
@@ -89,10 +91,10 @@ watch(
         </select>
       </div>
 
-      <label class="pbx-myPrimaryInputLabel"> Border 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">
+          <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

@@ -78,13 +78,14 @@ const handleAddClasses = async () => {
       </div>
 
       <div>
-        <label class="pbx-myPrimaryInputLabel">
+        <label for="custom-css" class="pbx-myPrimaryInputLabel">
           Add your CSS.
           <br />
           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="Type class"

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,11 @@ watch(
 
 <template>
   <div class="pbx-my-2 pbx-py-2">
-    <label class="pbx-myPrimaryInputLabel"> Background opacity</label>
+    <label for="bg-opacity" class="pbx-myPrimaryInputLabel"> Background Opacity</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">
@@ -79,15 +79,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 +97,10 @@ 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">{{
                     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"> Opacity</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">

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

@@ -64,8 +64,9 @@ watch(
     <template #title>Margin</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"> Vertical Margin </label>
         <select
+          id="vertical-margin"
           v-model="fontVerticalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalMargin(fontVerticalMargin)"
@@ -81,8 +82,9 @@ 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"> Horizontal Margin </label>
         <select
+          id="horizontal-margin"
           v-model="fontHorizontalMargin"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalMargin(fontHorizontalMargin)"

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

@@ -64,8 +64,9 @@ watch(
     <template #title>Padding</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"> Vertical Padding </label>
         <select
+          id="vertical-padding"
           v-model="fontVerticalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleVerticalPadding(fontVerticalPadding)"
@@ -81,8 +82,9 @@ 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"> Horizontal Padding </label>
         <select
+          id="horizontal-padding"
           v-model="fontHorizontalPadding"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleHorizontalPadding(fontHorizontalPadding)"

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

@@ -0,0 +1,115 @@
+<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>Inline Styles</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.
+      </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">
+          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="property"
+            @keydown.enter.prevent="handleEnterOnProperty"
+            autocomplete="off"
+            class="pbx-myPrimaryInput"
+          />
+          <input
+            id="custom-style-value"
+            ref="valueInputRef"
+            v-model="inputValue"
+            type="text"
+            placeholder="value"
+            @keydown.enter="handleAddStyle"
+            autocomplete="off"
+            class="pbx-myPrimaryInput"
+          />
+
+          <button @click="handleAddStyle" type="button" class="pbx-myPrimaryButton">Add</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

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

@@ -105,8 +105,9 @@ watch(
       <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 class="pbx-myPrimaryInputLabel"> Font Size </label>
+          <label for="font-base" class="pbx-myPrimaryInputLabel"> Font Size </label>
           <select
+            id="font-base"
             v-model="fontBase"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeBase(fontBase)"
@@ -119,8 +120,9 @@ watch(
         </div>
       </template>
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font size </label>
+        <label for="font-desktop" class="pbx-myPrimaryInputLabel"> Font size </label>
         <select
+          id="font-desktop"
           v-model="fontDesktop"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
@@ -133,8 +135,9 @@ watch(
       </div>
       <template v-if="false">
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font tablet size </label>
+          <label for="font-tablet" class="pbx-myPrimaryInputLabel"> Font tablet size </label>
           <select
+            id="font-tablet"
             v-model="fontTablet"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeTablet(fontTablet)"
@@ -146,8 +149,9 @@ watch(
           </select>
         </div>
         <div class="pbx-my-2 pbx-py-2">
-          <label class="pbx-myPrimaryInputLabel"> Font small screens </label>
+          <label for="font-mobile" class="pbx-myPrimaryInputLabel"> Font small screens </label>
           <select
+            id="font-mobile"
             v-model="fontMobile"
             class="pbx-myPrimarySelect"
             @change="pageBuilderService.handleFontSizeMobile(fontMobile)"
@@ -162,8 +166,9 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font weight </label>
+        <label for="font-weight" class="pbx-myPrimaryInputLabel"> Font weight </label>
         <select
+          id="font-weight"
           v-model="fontWeight"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontWeight(fontWeight)"
@@ -178,8 +183,9 @@ watch(
 
       <!-- FONT FAMILY -->
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font family </label>
+        <label for="font-family" class="pbx-myPrimaryInputLabel"> Font family </label>
         <select
+          id="font-family"
           v-model="fontFamily"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontFamily(fontFamily)"
@@ -193,8 +199,9 @@ watch(
       <hr />
 
       <div class="pbx-my-2 pbx-py-2">
-        <label class="pbx-myPrimaryInputLabel"> Font Style </label>
+        <label for="font-style" class="pbx-myPrimaryInputLabel"> Font Style </label>
         <select
+          id="font-style"
           v-model="fontStyle"
           class="pbx-myPrimarySelect"
           @change="pageBuilderService.handleFontStyle(fontStyle)"