@iqual/nuxt-icms 1.5.7 → 1.5.9

package/components/Form/TextEmailInput.vue

@@ -70,6 +70,18 @@ const formFieldDescription = tv({
   },
 })
 
+const inputRoot = tv({
+  base: themedClass('inputRoot', 'w-full'),
+  variants: {
+    colorScheme: {
+      none: themedClass('inputRootVariantsColorSchemeNone'),
+      dark: themedClass('inputRootVariantsColorSchemeDark'),
+      light: themedClass('inputRootVariantsColorSchemeLight'),
+      accent: themedClass('inputRootVariantsColorSchemeAccent'),
+    },
+  },
+})
+
 const inputBase = tv({
   base: themedClass(
     'inputBase',
@@ -79,19 +91,19 @@ const inputBase = tv({
     colorScheme: {
       none: themedClass(
         'inputBaseVariantsColorSchemeNone',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       dark: themedClass(
         'inputBaseVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-400',
+        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-500',
       ),
       light: themedClass(
         'inputBaseVariantsColorSchemeLight',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       accent: themedClass(
         'inputBaseVariantsColorSchemeAccent',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
     },
   },
@@ -106,19 +118,19 @@ const floatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'floatingLabelVariantsColorSchemeNone',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       dark: themedClass(
         'floatingLabelVariantsColorSchemeDark',
-        'text-gray-300 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-300 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       light: themedClass(
         'floatingLabelVariantsColorSchemeLight',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       accent: themedClass(
         'floatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
     },
   },
@@ -160,21 +172,28 @@ const floatingLabelText = tv({
     :description="floatingLabels ? undefined : cleanDescription"
     :help="floatingLabels ? cleanDescription : undefined"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       help: formFieldDescription({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <UInput
       v-model="model"
       :id="formElement.metadata.key"
       :type="formElement.metadata.type"
-      :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+      :placeholder="
+        floatingLabels
+          ? formElement.placeholder || ' '
+          : formElement.placeholder
+      "
       :maxlength="formElement.maxlength"
       :minlength="formElement.minlength"
       :pattern="formElement.pattern?.rule"
       :data-floating="floatingLabels"
       :ui="{
+        root: inputRoot({ colorScheme }),
         base: inputBase({ colorScheme }),
       }"
     >
@@ -183,7 +202,21 @@ const floatingLabelText = tv({
         :class="floatingLabel({ colorScheme })"
         :for="formElement.metadata.key"
       >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="floatingLabelText({ colorScheme })">
+          {{ formElement.metadata.title }}
+          <template v-if="formElement.metadata.required">
+            <span
+              :class="
+                themedClass(
+                  'floatingLabelRequiredStarClass',
+                  'ml-0.5 inline-block text-red-600',
+                )
+              "
+            >
+              *
+            </span>
+          </template>
+        </span>
       </label>
     </UInput>
   </UFormField>

package/components/Form/TextInput.vue

@@ -70,6 +70,18 @@ const formFieldDescription = tv({
   },
 })
 
+const inputRoot = tv({
+  base: themedClass('inputRoot', 'w-full'),
+  variants: {
+    colorScheme: {
+      none: themedClass('inputRootVariantsColorSchemeNone'),
+      dark: themedClass('inputRootVariantsColorSchemeDark'),
+      light: themedClass('inputRootVariantsColorSchemeLight'),
+      accent: themedClass('inputRootVariantsColorSchemeAccent'),
+    },
+  },
+})
+
 const inputBase = tv({
   base: themedClass(
     'inputBase',
@@ -79,19 +91,19 @@ const inputBase = tv({
     colorScheme: {
       none: themedClass(
         'inputBaseVariantsColorSchemeNone',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       dark: themedClass(
         'inputBaseVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-400',
+        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-500',
       ),
       light: themedClass(
         'inputBaseVariantsColorSchemeLight',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       accent: themedClass(
         'inputBaseVariantsColorSchemeAccent',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
     },
   },
@@ -106,19 +118,19 @@ const floatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'floatingLabelVariantsColorSchemeNone',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       dark: themedClass(
         'floatingLabelVariantsColorSchemeDark',
-        'text-gray-300 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-300 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       light: themedClass(
         'floatingLabelVariantsColorSchemeLight',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       accent: themedClass(
         'floatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
     },
   },
@@ -160,21 +172,28 @@ const floatingLabelText = tv({
     :description="floatingLabels ? undefined : cleanDescription"
     :help="floatingLabels ? cleanDescription : undefined"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
       help: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <UInput
       v-model="model"
       :id="formElement.metadata.key"
       :type="formElement.metadata.type"
-      :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+      :placeholder="
+        floatingLabels
+          ? formElement.placeholder || ' '
+          : formElement.placeholder
+      "
       :maxlength="formElement.maxlength"
       :minlength="formElement.minlength"
       :pattern="formElement.pattern?.rule"
       :data-floating="floatingLabels"
       :ui="{
+        root: inputRoot({ colorScheme }),
         base: inputBase({ colorScheme }),
       }"
     >
@@ -183,7 +202,21 @@ const floatingLabelText = tv({
         :class="floatingLabel({ colorScheme })"
         :for="formElement.metadata.key"
       >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="floatingLabelText({ colorScheme })">
+          {{ formElement.metadata.title }}
+          <template v-if="formElement.metadata.required">
+            <span
+              :class="
+                themedClass(
+                  'floatingLabelRequiredStarClass',
+                  'ml-0.5 inline-block text-red-600',
+                )
+              "
+            >
+              *
+            </span>
+          </template>
+        </span>
       </label>
     </UInput>
   </UFormField>

package/components/Form/TextPhoneInput.vue

@@ -70,6 +70,18 @@ const formFieldDescription = tv({
   },
 })
 
+const inputRoot = tv({
+  base: themedClass('inputRoot', 'w-full'),
+  variants: {
+    colorScheme: {
+      none: themedClass('inputRootVariantsColorSchemeNone'),
+      dark: themedClass('inputRootVariantsColorSchemeDark'),
+      light: themedClass('inputRootVariantsColorSchemeLight'),
+      accent: themedClass('inputRootVariantsColorSchemeAccent'),
+    },
+  },
+})
+
 const inputBase = tv({
   base: themedClass(
     'inputBase',
@@ -79,19 +91,19 @@ const inputBase = tv({
     colorScheme: {
       none: themedClass(
         'inputBaseVariantsColorSchemeNone',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       dark: themedClass(
         'inputBaseVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-400',
+        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-500',
       ),
       light: themedClass(
         'inputBaseVariantsColorSchemeLight',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       accent: themedClass(
         'inputBaseVariantsColorSchemeAccent',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
     },
   },
@@ -106,19 +118,19 @@ const floatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'floatingLabelVariantsColorSchemeNone',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       dark: themedClass(
         'floatingLabelVariantsColorSchemeDark',
-        'text-gray-300 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-300 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-400 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       light: themedClass(
         'floatingLabelVariantsColorSchemeLight',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
       accent: themedClass(
         'floatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 peer-placeholder-shown:text-gray-400 peer-focus:text-primary-600 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
+        'text-gray-500 peer-placeholder-shown:text-gray-500 peer-focus:text-primary-600 dark:text-gray-500 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-primary-400',
       ),
     },
   },
@@ -160,21 +172,28 @@ const floatingLabelText = tv({
     :description="floatingLabels ? undefined : cleanDescription"
     :help="floatingLabels ? cleanDescription : undefined"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       help: formFieldDescription({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <UInput
       v-model="model"
       :id="formElement.metadata.key"
       :type="formElement.metadata.type"
-      :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+      :placeholder="
+        floatingLabels
+          ? formElement.placeholder || ' '
+          : formElement.placeholder
+      "
       :maxlength="formElement.maxlength"
       :minlength="formElement.minlength"
       :pattern="formElement.pattern?.rule"
       :data-floating="floatingLabels"
       :ui="{
+        root: inputRoot({ colorScheme }),
         base: inputBase({ colorScheme }),
       }"
     >
@@ -183,7 +202,21 @@ const floatingLabelText = tv({
         :class="floatingLabel({ colorScheme })"
         :for="formElement.metadata.key"
       >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="floatingLabelText({ colorScheme })">
+          {{ formElement.metadata.title }}
+          <template v-if="formElement.metadata.required">
+            <span
+              :class="
+                themedClass(
+                  'floatingLabelRequiredStarClass',
+                  'ml-0.5 inline-block text-red-600',
+                )
+              "
+            >
+              *
+            </span>
+          </template>
+        </span>
       </label>
     </UInput>
   </UFormField>

package/components/Paragraph/FAQ/Layout/index.vue

@@ -157,7 +157,7 @@ const accordionItem = tv({
 const accordionTrigger = tv({
   base: themedClass(
     'accordionTriggerBase',
-    'items-center py-4 hover:no-underline gap-4 text-left text-base cursor-pointer',
+    'items-center px-6 py-4 hover:no-underline gap-4 text-left text-base cursor-pointer',
   ),
   variants: {
     colorScheme: {
@@ -182,7 +182,7 @@ const accordionTrigger = tv({
 })
 
 const accordionContent = tv({
-  base: themedClass('accordionContentBase', 'p-4 pb-6 text-base'),
+  base: themedClass('accordionContentBase', 'px-6 pt-4 pb-6 text-base'),
   variants: {
     colorScheme: {
       none: themedClass('accordionContentVariantsColorSchemeNone'),

package/components/Search/Facets/FacetDropdownUI.vue

@@ -44,28 +44,32 @@
         <UPopover
           v-model:open="openPopovers[field.field]"
           :class="popover({ colorScheme })"
+          :ui="{
+            content: themedClass(
+              'popoverUiContentClass',
+              'rounded-none ring-0',
+            ),
+          }"
         >
-          <template #trigger>
-            <button :class="popoverTrigger({ colorScheme })">
-              <span
-                :class="
-                  themedClass('popoverTriggerLabelClass', 'text-h8 truncate')
-                "
-              >
-                {{ fieldTriggerLabel(field) }}
-              </span>
-              <SpriteSymbol
-                name="chevron-down"
-                aria-hidden="true"
-                :class="[
-                  popoverTriggerIcon({ colorScheme }),
-                  openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
-                ]"
-              />
-            </button>
-          </template>
-
-          <template #panel>
+          <button type="button" :class="popoverTrigger({ colorScheme })">
+            <span
+              :class="
+                themedClass('popoverTriggerLabelClass', 'text-h8 truncate')
+              "
+            >
+              {{ fieldTriggerLabel(field) }}
+            </span>
+            <SpriteSymbol
+              name="chevron-down"
+              aria-hidden="true"
+              :class="[
+                popoverTriggerIcon({ colorScheme }),
+                openPopovers[field.field] ? 'rotate-180' : 'rotate-0',
+              ]"
+            />
+          </button>
+
+          <template #content>
             <div :class="popoverContent({ colorScheme })">
               <!-- Filter options container -->
               <div
@@ -87,7 +91,15 @@
                       :model-value="
                         selections[field.field]?.includes(opt.value)
                       "
-                      :class="checkbox({ colorScheme })"
+                      :ui="{
+                        root: themedClass('filterOptionUCheckboxRoot'),
+                        container: themedClass(
+                          'filterOptionUCheckboxContainer',
+                        ),
+                        base: checkboxBase({ colorScheme }),
+                        indicator: checkboxIndicator({ colorScheme }),
+                        icon: themedClass('filterOptionUCheckboxIcon'),
+                      }"
                       tabindex="-1"
                       @click.stop
                     />
@@ -558,28 +570,43 @@ const resetFiltersButton = tv({
   },
 })
 
-const checkbox = tv({
-  base: themedClass(
-    'checkboxBase',
-    'pointer-events-none w-[18px] h-[18px] mt-0.5 transition-all duration-200',
-  ),
+const checkboxBase = tv({
+  base: themedClass('checkboxBase', 'rounded-none'),
+  variants: {
+    colorScheme: {
+      none: themedClass('checkboxBaseVariantsColorSchemeNone', 'ring-gray-200'),
+      dark: themedClass('checkboxBaseVariantsColorSchemeDark', 'ring-gray-800'),
+      light: themedClass(
+        'checkboxBaseVariantsColorSchemeLight',
+        'ring-gray-200',
+      ),
+      accent: themedClass(
+        'checkboxBaseVariantsColorSchemeAccent',
+        'ring-white',
+      ),
+    },
+  },
+})
+
+const checkboxIndicator = tv({
+  base: themedClass('checkboxIndicatorBase'),
   variants: {
     colorScheme: {
       none: themedClass(
-        'checkboxVariantsColorSchemeNone',
-        'text-black border-gray-200 dark:border-gray-200 bg-white dark:bg-white data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
+        'checkboxIndicatorVariantsColorSchemeNone',
+        'text-white',
       ),
       dark: themedClass(
-        'checkboxVariantsColorSchemeDark',
-        'text-gray-200 border-gray-800 dark:border-gray-800 bg-gray-800 dark:bg-gray-800 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-gray-200 dark:text-gray-200 data-[state=checked]:text-gray-200 dark:data-[state=checked]:text-gray-200 data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
+        'checkboxIndicatorVariantsColorSchemeDark',
+        'text-white',
       ),
       light: themedClass(
-        'checkboxVariantsColorSchemeLight',
-        'text-black border-gray-200 dark:border-gray-200 bg-gray-50 dark:bg-gray-50 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-500 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-500 dark:data-[state=checked]:border-primary',
+        'checkboxIndicatorVariantsColorSchemeLight',
+        'text-white',
       ),
       accent: themedClass(
-        'checkboxVariantsColorSchemeAccent',
-        'text-white border-primary-600 dark:border-primary-600 bg-primary-600 dark:bg-primary-600 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-600 text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-600',
+        'checkboxIndicatorVariantsColorSchemeAccent',
+        'text-primary bg-white',
       ),
     },
   },

package/components/Search/Facets/FacetedSearchUI.vue

@@ -180,21 +180,15 @@ Facets: {{ facetData.length }} items</pre
       "
     >
       <slot name="load-more" :loadMore="loadMore" :loading="loadingMore">
-        <button
-          @click="loadMore"
+        <DesignSystemAtomsButton
+          type="button"
+          :colorScheme="colorScheme"
+          buttonStyle="normal"
+          :label="loadingMore ? defaultLoadingText : defaultLoadMoreText"
           :disabled="loadingMore"
-          :class="cn(button({ colorScheme }), loadMoreButtonClass)"
-        >
-          <span
-            v-if="!loadingMore"
-            :class="themedClass('globalLoadMoreButtonLabel')"
-          >
-            {{ defaultLoadMoreText }}
-          </span>
-          <span v-else :class="themedClass('globalLoadMoreLoadingButtonLabel')">
-            {{ defaultLoadingText }}
-          </span>
-        </button>
+          :class="loadMoreButtonClass"
+          @click="loadMore"
+        />
       </slot>
     </div>
   </div>

package/components/Section/Header/Buttons.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="buttons?.length"
-    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+    :class="themedClass('containerClass', 'flex flex-wrap gap-2')"
   >
     <DesignSystemAtomsButton
       v-for="(link, key) in buttons"
@@ -13,6 +13,8 @@
       :target-blank="link?.targetBlank"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
+      colorScheme="none"
+      buttonStyle="focus"
       @click="close()"
     />
   </div>

package/components/Section/Header/Logo.vue

@@ -8,9 +8,9 @@
     <Media
       v-if="companyLogo"
       :media="companyLogo"
-      :mediaClass="themedClass('mediaClass', 'h-10 2xl:h-16')"
+      :mediaClass="themedClass('mediaClass', 'h-8 2xl:h-10')"
       :figcaptionClass="themedClass('figcaptionClass')"
-      :elementClass="themedClass('elementClass', 'h-10 2xl:h-16 w-auto')"
+      :elementClass="themedClass('elementClass', 'h-8 2xl:h-10 w-auto')"
     />
   </NuxtLink>
 </template>

package/components/Section/Header/MainButtons.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="contactButtons?.length !== 0"
-    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+    :class="themedClass('containerClass', 'flex gap-2')"
   >
     <DesignSystemAtomsButton
       v-for="(link, key) in contactButtons"
@@ -13,6 +13,8 @@
       :target-blank="link?.targetBlank"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
+      colorScheme="none"
+      buttonStyle="focus"
       @click="close()"
     />
   </div>

package/components/Section/Header/MetaButtons.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="metaLinks?.length !== 0"
-    :class="themedClass('containerClass', 'flex flex-col gap-2')"
+    :class="themedClass('containerClass', 'flex gap-2')"
   >
     <DesignSystemAtomsButton
       v-for="(link, key) in metaLinks"
@@ -13,6 +13,8 @@
       :targetBlank="link?.targetBlank"
       :buttonClass="themedClass('buttonClass', 'xs:w-fit')"
       :labelClass="themedClass('labelClass')"
+      colorScheme="none"
+      buttonStyle="focus"
       @click="close()"
     />
   </div>

package/components/Section/Header/MetaMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <nav
+    v-if="menuItems.length"
     :aria-label="
       $texts('meta_navigation.nav_aria_label_meta', 'Meta navigation menu')
     "
     :class="themedClass('containerClass', 'empty:hidden')"
   >
     <ul
-      v-if="menuItems.length"
       :class="
         themedClass(
           'listClass',

package/components/Section/Header/MobileMainMenu.vue

@@ -3,7 +3,7 @@
     :aria-label="$texts('main_menu.nav_aria_label_main', 'Main navigation')"
     :class="themedClass('containerClass')"
   >
-    <ul role="menu" :class="themedClass('listClass', 'flex flex-col gap-2')">
+    <ul role="menu" :class="themedClass('listClass', 'flex flex-col gap-4')">
       <MobileMainMenuItem
         v-for="item in menuItems"
         :key="item.id"

package/components/Section/Header/MobileMainMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     role="menuitem"
-    :class="themedClass('listItemClass', 'relative flex flex-col gap-2')"
+    :class="themedClass('listItemClass', 'relative flex flex-col gap-4')"
   >
     <div
       :class="
@@ -78,7 +78,7 @@
       <ul
         v-show="isOpen"
         :id="submenuId"
-        :class="themedClass('submenuListClass', 'flex flex-col gap-2 pl-4')"
+        :class="themedClass('submenuListClass', 'flex flex-col gap-4 pl-4')"
       >
         <MobileMainMenuItem
           v-for="item in item.children"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "ICMS Base",
   "type": "module",
   "private": false,