@iqual/nuxt-icms 1.5.7 → 1.5.8

package/assets/css/components/ck-content.css

@@ -1,6 +1,24 @@
 .ck-content {
   @apply break-words;
 
+  h1:not(:first-of-type),
+  .h1:not(:first-of-type),
+  h2:not(:first-of-type),
+  .h2:not(:first-of-type),
+  h3:not(:first-of-type),
+  .h3:not(:first-of-type),
+  h4:not(:first-of-type),
+  .h4:not(:first-of-type) {
+    @apply mt-4;
+  }
+
+  h5:not(:first-of-type),
+  .h5:not(:first-of-type),
+  h6:not(:first-of-type),
+  .h6:not(:first-of-type) {
+    @apply mt-2;
+  }
+
   ol,
   ul {
     @apply mb-6;
@@ -36,4 +54,3 @@
     @apply text-sm;
   }
 }
-

package/components/DesignSystem/Atoms/Button.vue

@@ -6,11 +6,14 @@
     :title="title"
     :target="targetBlank ? '_blank' : '_self'"
     :ui="{
-      base: button({
-        colorScheme: colorScheme,
-        style: buttonStyle,
-      }),
-      label: themedClass('labelClass', 'font-medium'),
+      base: cn(
+        button({
+          colorScheme: colorScheme,
+          style: buttonStyle,
+        }),
+        buttonClass,
+      ),
+      label: cn(themedClass('labelClass', 'font-medium'), labelClass),
     }"
   />
 </template>
@@ -18,6 +21,7 @@
 <script lang="ts" setup>
 import type { ColorScheme, ButtonStyle } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemAtomsButton')
@@ -51,7 +55,7 @@ const linkComplete = computed(() => {
 const button = tv({
   base: themedClass(
     'buttonClass',
-    'rounded-none cursor-pointer py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
+    'rounded-none cursor-pointer py-3 px-10 block w-full sm:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
   ),
   variants: {
     colorScheme: {
@@ -65,7 +69,7 @@ const button = tv({
       focus: themedClass('buttonVariantsStyleFocus', 'border text-center'),
       minimal: themedClass(
         'buttonVariantsStyleMinimal',
-        'bg-transparent w-fit p-0 underline hover:bg-transparent',
+        'bg-transparent w-fit p-0 underline hover:bg-transparent active:bg-transparent',
       ),
     },
   },
@@ -75,7 +79,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsNoneNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
       ),
     },
     {
@@ -83,7 +87,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsNoneFocus',
-        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -91,7 +95,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsNoneMinimal',
-        'text-primary-500 hover:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950',
       ),
     },
     {
@@ -99,7 +103,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsDarkNormal',
-        'bg-transparent text-gray-200 border-gray-200 hover:bg-gray-200 hover:text-gray-950',
+        'bg-transparent text-gray-200 border-gray-200 hover:bg-gray-200 hover:text-gray-950 active:bg-gray-200 active:text-gray-950',
       ),
     },
     {
@@ -107,7 +111,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsDarkFocus',
-        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -115,7 +119,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsDarkMinimal',
-        'text-gray-200 hover:text-primary-500',
+        'text-gray-200 hover:text-primary-500 active:text-primary-500',
       ),
     },
     {
@@ -123,7 +127,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsLightNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
       ),
     },
     {
@@ -131,7 +135,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsLightFocus',
-        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -139,7 +143,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsLightMinimal',
-        'text-primary-500 hover:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950',
       ),
     },
     {
@@ -147,7 +151,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsAccentNormal',
-        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950',
+        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950 active:bg-white active:text-gray-950',
       ),
     },
     {
@@ -155,7 +159,7 @@ const button = tv({
       style: 'focus',
       class: themedClass(
         'buttonCompoundVariantsAccentFocus',
-        'bg-gray-950 text-white border-gray-950 hover:bg-white hover:text-gray-950 hover:border-white',
+        'bg-gray-950 text-white border-gray-950 hover:bg-white hover:text-gray-950 hover:border-white active:bg-white active:text-gray-950 active:border-white',
       ),
     },
     {
@@ -163,7 +167,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsAccentMinimal',
-        'text-white hover:text-gray-950',
+        'text-white hover:text-gray-950 active:text-gray-950',
       ),
     },
   ],

package/components/DesignSystem/Organisms/SpotlightCard.vue

@@ -25,7 +25,7 @@
         :class="
           themedClass(
             'contentContainerClass',
-            'card-grid-item z-3 flex flex-col p-6 lg:p-8',
+            'card-grid-item z-3 flex flex-col justify-between gap-8 p-6 lg:p-8',
           )
         "
       >
@@ -42,6 +42,7 @@
         </div>
         <slot name="content">
           <DesignSystemOrganismsContentBlock
+            class="mt-auto"
             :pretitle="pretitle"
             :pretitleClass="
               themedClass(

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -7,7 +7,7 @@
           :media="image"
           imageSizes="xs:100vw sm:100vw md:420px lg:420px"
           imageAspectRatios="16/9"
-          :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
+          :mediaClass="themedClass('mediaClass', 'w-full')"
           :figcaptionClass="themedClass('figcaptionClass')"
           :elementClass="themedClass('elementClass', 'w-full')"
         />
@@ -17,7 +17,7 @@
         :class="
           themedClass(
             'textContainerClass',
-            'flex h-full flex-col @xl:w-1/2 @xl:p-0 @7xl:p-12',
+            'flex h-full flex-col @xl:max-w-1/2 @xl:basis-1/2 @xl:p-0 @7xl:p-12',
           )
         "
       >
@@ -131,15 +131,21 @@ const teaserCard = tv({
 })
 
 const mediaContainer = tv({
-  base: themedClass('mediaContainerBase', 'shrink-0 aspect-video'),
+  base: themedClass(
+    'mediaContainerBase',
+    'w-full aspect-video @xl:basis-1/2 @xl:max-w-1/2',
+  ),
   variants: {
     colorScheme: {
-      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-gray-50'),
-      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-900'),
-      light: themedClass('mediaContainerVariantsColorSchemeLight', 'bg-white'),
+      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-950'),
+      light: themedClass(
+        'mediaContainerVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
       accent: themedClass(
         'mediaContainerVariantsColorSchemeAccent',
-        'bg-primary-700',
+        'bg-primary-600',
       ),
     },
   },

package/components/Form/CheckboxInput.vue

@@ -27,19 +27,19 @@ const checkboxBase = tv({
     colorScheme: {
       none: themedClass(
         'checkboxBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'checkboxBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'checkboxBaseVariantsColorSchemeLight',
-        'bg-white ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'checkboxBaseVariantsColorSchemeAccent',
-        'bg-white ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },

package/components/Form/CheckboxInputs.vue

@@ -75,19 +75,19 @@ const checkboxBase = tv({
     colorScheme: {
       none: themedClass(
         'checkboxBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'checkboxBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'checkboxBaseVariantsColorSchemeLight',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'checkboxBaseVariantsColorSchemeAccent',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },
@@ -143,6 +143,7 @@ const checkboxDescription = tv({
     },
   },
 })
+
 const checkboxIndicator = tv({
   base: themedClass('checkboxIndicatorBase'),
   variants: {
@@ -175,8 +176,10 @@ const checkboxIndicator = tv({
     :required="Boolean(formElement.metadata.required)"
     :description="cleanDescription"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <UCheckboxGroup

package/components/Form/FileInput.vue

@@ -278,8 +278,10 @@ const fileUploadIcon = tv({
     :required="formElement.metadata.required"
     :description="floatingLabels ? undefined : formElement.metadata.description"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <div :class="themedClass('fileUploadWrapper', 'relative')">
@@ -296,18 +298,14 @@ const fileUploadIcon = tv({
           fileSize: fileUploadFileSize({ colorScheme }),
         }"
       >
-        <template
-          v-if="!floatingLabels"
-          #description
-        >
+        <template v-if="!floatingLabels" #description>
           <span v-html="formElement.metadata.description" />
         </template>
       </UFileUpload>
-      <label
-        v-if="floatingLabels"
-        :class="floatingLabel({ colorScheme })"
-      >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      <label v-if="floatingLabels" :class="floatingLabel({ colorScheme })">
+        <span :class="floatingLabelText({ colorScheme })">{{
+          formElement.metadata.title
+        }}</span>
       </label>
     </div>
     <div

package/components/Form/RadioButtonsInput.vue

@@ -75,19 +75,19 @@ const radioBase = tv({
     colorScheme: {
       none: themedClass(
         'radioBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'radioBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'radioBaseVariantsColorSchemeLight',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'radioBaseVariantsColorSchemeAccent',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },
@@ -169,14 +169,17 @@ const radioIndicator = tv({
     :required="Boolean(formElement.metadata.required)"
     :description="cleanDescription"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <URadioGroup
       v-model="model"
       :items="formattedOptions"
       :ui="{
+        fieldset: themedClass('radioFieldset', 'gap-y-3'),
         container: themedClass('radioContainer', 'cursor-pointer'),
         base: radioBase({ colorScheme }),
         indicator: radioIndicator({ colorScheme }),

package/components/Form/SelectInput.vue

@@ -71,7 +71,10 @@ const formFieldDescription = tv({
 })
 
 const selectBase = tv({
-  base: themedClass('selectBase', 'text-base px-4 rounded-none w-full cursor-pointer'),
+  base: themedClass(
+    'selectBase',
+    'text-base px-4 rounded-none w-full cursor-pointer',
+  ),
   variants: {
     colorScheme: {
       none: themedClass(
@@ -104,19 +107,19 @@ const selectPlaceholder = tv({
     colorScheme: {
       none: themedClass(
         'selectPlaceholderVariantsColorSchemeNone',
-        'text-gray-400',
+        'text-gray-500',
       ),
       dark: themedClass(
         'selectPlaceholderVariantsColorSchemeDark',
-        'text-gray-400',
+        'text-gray-500',
       ),
       light: themedClass(
         'selectPlaceholderVariantsColorSchemeLight',
-        'text-gray-400',
+        'text-gray-500',
       ),
       accent: themedClass(
         'selectPlaceholderVariantsColorSchemeAccent',
-        'text-gray-400',
+        'text-gray-500',
       ),
     },
   },
@@ -281,23 +284,26 @@ const selectFloatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'selectFloatingLabelVariantsColorSchemeNone',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       dark: themedClass(
         'selectFloatingLabelVariantsColorSchemeDark',
-        'text-gray-300 group-focus-within:text-primary-400 dark:text-gray-300 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-400 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       light: themedClass(
         'selectFloatingLabelVariantsColorSchemeLight',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       accent: themedClass(
         'selectFloatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
     },
     floating: {
-      true: themedClass('selectFloatingLabelVariantsFloatingTrue', '-top-2 translate-y-0 text-xs font-medium'),
+      true: themedClass(
+        'selectFloatingLabelVariantsFloatingTrue',
+        '-top-2 translate-y-0 text-xs font-medium',
+      ),
       false: themedClass(
         'selectFloatingLabelVariantsFloatingFalse',
         'top-1/2 -translate-y-1/2 text-base font-normal',
@@ -334,8 +340,7 @@ const selectFloatingLabelText = tv({
 })
 
 const hasSelectedValue = computed(() => {
-  if (Array.isArray(model.value))
-    return model.value.length > 0
+  if (Array.isArray(model.value)) return model.value.length > 0
 
   return model.value !== '' && model.value !== null && model.value !== undefined
 })
@@ -349,18 +354,22 @@ const hasSelectedValue = computed(() => {
     :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'),
     }"
   >
-    <div :class="themedClass('selectWrapper', 'relative group')">
+    <div :class="themedClass('selectWrapper', 'group relative')">
       <USelect
         v-model="model"
         :id="formElement.metadata.key"
         :items="formattedOptions"
         :multiple="Boolean(formElement.metadata.multiple)"
-        :placeholder="floatingLabels ? undefined : formElement.emptyOption?.title"
+        :placeholder="
+          floatingLabels ? undefined : formElement.emptyOption?.title
+        "
         :ui="{
           base: selectBase({ colorScheme, floating: floatingLabels }),
           placeholder: selectPlaceholder({ colorScheme }),
@@ -375,10 +384,14 @@ const hasSelectedValue = computed(() => {
       />
       <label
         v-if="floatingLabels"
-        :class="selectFloatingLabel({ colorScheme, floating: hasSelectedValue })"
+        :class="
+          selectFloatingLabel({ colorScheme, floating: hasSelectedValue })
+        "
         :for="formElement.metadata.key"
       >
-        <span :class="selectFloatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="selectFloatingLabelText({ colorScheme })">{{
+          formElement.metadata.title
+        }}</span>
       </label>
     </div>
   </UFormField>

package/components/Form/TextAreaInput.vue

@@ -24,7 +24,11 @@ const floatingLabels = inject<boolean>('floatingLabels', true)
 const isTextAreaFocused = ref(false)
 
 const textAreaHasValue = computed(() => {
-  return model.value !== null && model.value !== undefined && `${model.value}`.length > 0
+  return (
+    model.value !== null &&
+    model.value !== undefined &&
+    `${model.value}`.length > 0
+  )
 })
 
 const textAreaShouldFloat = computed(() => {
@@ -88,19 +92,19 @@ const textAreaBase = tv({
     colorScheme: {
       none: themedClass(
         'textAreaBaseVariantsColorSchemeNone',
-        '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(
         'textAreaBaseVariantsColorSchemeDark',
-        '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(
         'textAreaBaseVariantsColorSchemeLight',
-        '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(
         'textAreaBaseVariantsColorSchemeAccent',
-        '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',
       ),
     },
   },
@@ -115,27 +119,36 @@ const floatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'floatingLabelVariantsColorSchemeNone',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
       dark: themedClass(
         'floatingLabelVariantsColorSchemeDark',
-        'text-gray-300 dark:text-gray-300',
+        'text-gray-500 dark:text-gray-500',
       ),
       light: themedClass(
         'floatingLabelVariantsColorSchemeLight',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
       accent: themedClass(
         'floatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
     },
     floating: {
-      true: themedClass('floatingLabelVariantsFloatingTrue', '-top-2 text-xs font-medium'),
-      false: themedClass('floatingLabelVariantsFloatingFalse', 'top-4 text-base font-normal'),
+      true: themedClass(
+        'floatingLabelVariantsFloatingTrue',
+        '-top-2 text-xs font-medium',
+      ),
+      false: themedClass(
+        'floatingLabelVariantsFloatingFalse',
+        'top-4 text-base font-normal',
+      ),
     },
     focused: {
-      true: themedClass('floatingLabelVariantsFocusedTrue', 'text-primary-600 dark:text-primary-400'),
+      true: themedClass(
+        'floatingLabelVariantsFocusedTrue',
+        'text-primary-500 dark:text-primary-500',
+      ),
       false: themedClass('floatingLabelVariantsFocusedFalse', ''),
     },
   },
@@ -177,16 +190,22 @@ 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'),
     }"
   >
     <div :class="themedClass('textAreaWrapper', 'relative')">
       <UTextarea
         v-model="model"
         :id="formElement.metadata.key"
-        :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+        :placeholder="
+          floatingLabels
+            ? formElement.placeholder || ' '
+            : formElement.placeholder
+        "
         :maxlength="formElement.maxlength"
         :minlength="formElement.minlength"
         :pattern="formElement.pattern?.rule"
@@ -200,10 +219,18 @@ const floatingLabelText = tv({
       />
       <label
         v-if="floatingLabels"
-        :class="floatingLabel({ colorScheme, floating: textAreaShouldFloat, focused: isTextAreaFocused })"
+        :class="
+          floatingLabel({
+            colorScheme,
+            floating: textAreaShouldFloat,
+            focused: isTextAreaFocused,
+          })
+        "
         :for="formElement.metadata.key"
       >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="floatingLabelText({ colorScheme })">{{
+          formElement.metadata.title
+        }}</span>
       </label>
     </div>
   </UFormField>

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,9 @@ 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 }}
+        </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,9 @@ 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 }}
+        </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,9 @@ 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 }}
+        </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.8",
   "description": "ICMS Base",
   "type": "module",
   "private": false,