@iqual/nuxt-icms 1.4.5 → 1.4.7

package/assets/css/components/container.css

@@ -1,6 +1,6 @@
 @layer components {
   .container {
-    @apply max-w-full px-4;
+    @apply px-4;
 
     @screen md {
       @apply px-8;

package/components/Blokkli/Media/index.vue

@@ -9,7 +9,12 @@ const props = defineProps<ParagraphIcmsLayoutMediaFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_media',
-  globalOptions: ['spacingBottom', 'spacingTop', 'width', 'colorScheme'],
+  globalOptions: [
+    'spacingBottom',
+    'spacingTop',
+    'width',
+    'colorScheme',
+    'showCaptions',
+  ],
 })
-
 </script>

package/components/DesignSystem/Atoms/Button.vue

@@ -47,7 +47,7 @@ const props = defineProps<{
 const button = tv({
   base: themedClass(
     'buttonBase',
-    'cursor-pointer font-medium py-3 px-10 duration-200 ease-in-out block w-full md:w-fit',
+    'cursor-pointer font-medium py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
   ),
   variants: {
     colorScheme: {
@@ -126,7 +126,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsDarkNormal',
-        'bg-gray-950 text-white hover:bg-white hover:text-gray-950 border-white',
+        'bg-gray-950 text-gray-200 hover:bg-white hover:text-gray-950 border-gray-200',
       ),
     },
     {
@@ -142,7 +142,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsDarkMinimal',
-        'text-primary hover:text-white',
+        'text-primary hover:text-gray-200',
       ),
     },
 

package/components/DesignSystem/Atoms/Container.vue

@@ -30,28 +30,52 @@ const props = withDefaults(
 const containerClassList = computed(() => {
   const classList = []
   if (props.colorScheme === 'none') {
-    classList.push('bg-white text-gray-950')
+    classList.push(
+      themedClass(
+        'containerClassListColorSchemeNone',
+        'bg-white text-gray-950',
+      ),
+    )
   }
   if (props.colorScheme === 'dark') {
-    classList.push('bg-gray-950 text-white')
+    classList.push(
+      themedClass(
+        'containerClassListColorSchemeDark',
+        'bg-gray-950 text-gray-200',
+      ),
+    )
   }
   if (props.colorScheme === 'light') {
-    classList.push('bg-gray-50 text-gray-950')
+    classList.push(
+      themedClass(
+        'containerClassListColorSchemeLight',
+        'bg-gray-50 text-gray-950',
+      ),
+    )
   }
   if (props.colorScheme === 'accent') {
-    classList.push('bg-primary-600 text-white')
+    classList.push(
+      themedClass(
+        'containerClassListColorSchemeAccent',
+        'bg-primary-600 text-white',
+      ),
+    )
   }
   if (props.spacing.top === 'small') {
-    classList.push('pt-16')
+    classList.push(themedClass('containerClassListSpacingTopSmall', 'pt-16'))
   }
   if (props.spacing.top === 'large') {
-    classList.push('pt-24 md:pt-32')
+    classList.push(
+      themedClass('containerClassListSpacingTopLarge', 'pt-24 md:pt-32'),
+    )
   }
   if (props.spacing.bottom === 'small') {
-    classList.push('pb-16')
+    classList.push(themedClass('containerClassListSpacingBottomSmall', 'pb-16'))
   }
   if (props.spacing.bottom === 'large') {
-    classList.push('pb-24 md:pb-32')
+    classList.push(
+      themedClass('containerClassListSpacingBottomLarge', 'pb-24 md:pb-32'),
+    )
   }
   return classList.join(' ')
 })

package/components/DesignSystem/Molecules/Card.vue

@@ -17,7 +17,7 @@
         <Media
           v-if="image"
           :media="image"
-          imageAspectRatios="4/3"
+          imageAspectRatios="16/9"
           imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
           :mediaClass="themedClass('mediaClass')"
           :figcaptionClass="themedClass('figcaptionClass')"

package/components/DesignSystem/Molecules/IconText.vue

@@ -46,7 +46,7 @@ const iconText = tv({
       none: themedClass('iconTextVariantsColorSchemeNone', 'bg-gray-50'),
       dark: themedClass(
         'iconTextVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass('iconTextVariantsColorSchemeLight', 'bg-white'),
       accent: themedClass(

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -132,7 +132,7 @@ const carouselButton = tv({
       ),
       dark: themedClass(
         'carouselButtonVariantsColorSchemeDark',
-        'bg-gray-900 text-white hover:bg-black',
+        'bg-gray-900 text-gray-200 hover:bg-black',
       ),
       light: themedClass(
         'carouselButtonVariantsColorSchemeLight',

package/components/DesignSystem/Molecules/Partnership.vue

@@ -53,11 +53,11 @@ const partnershipElement = tv({
         'bg-gray-900',
       ),
       light: themedClass(
-        'partnershipElementBaseVariantsColorSchemeLight',
+        'partnershipElementVariantsColorSchemeLight',
         'bg-white',
       ),
       accent: themedClass(
-        'partnershipElementBaseVariantsColorSchemeAccent',
+        'partnershipElementVariantsColorSchemeAccent',
         'bg-primary-700',
       ),
     },

package/components/DesignSystem/Molecules/Table.vue

@@ -9,7 +9,7 @@
       "
     >
       <thead>
-        <tr>
+        <tr :class="themedClass('tableHeaderRowClass')">
           <th
             v-for="(header, index) in tableHeaders"
             :key="index"
@@ -142,7 +142,7 @@ const caption = tv({
   variants: {
     colorScheme: {
       none: themedClass('tableCaptionVariantsColorSchemeNone', 'text-gray-400'),
-      dark: themedClass('tableCaptionVariantsColorSchemeDark', 'text-white'),
+      dark: themedClass('tableCaptionVariantsColorSchemeDark', 'text-gray-200'),
       light: themedClass(
         'tableCaptionVariantsColorSchemeLight',
         'text-gray-500',

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -14,8 +14,8 @@
     <DesignSystemMoleculesMediaSlider
       v-if="media && media.length"
       :media="media"
-      imageAspectRatios="4/3"
-      imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
+      :imageAspectRatios="imageAspectRatios"
+      :imageSizes="imageSizes"
       :colorScheme="colorScheme"
       :mediaClass="themedClass('mediaClass')"
       :containerClass="themedClass('mediaContainerClass')"

package/components/DesignSystem/Organisms/HeaderHero.vue

@@ -14,7 +14,7 @@
       v-if="image"
       :media="image"
       imageSizes="xs:100vw sm:100vw md:100vw lg:100vw"
-      imageAspectRatios="xs:1/1 md:16/9"
+      imageAspectRatios="xs:1/1 sm:1/1 md:16/9 lg:16/9"
       :mediaClass="
         themedClass('mediaClass', 'header-grid-item max-h-[1080px] h-full')
       "

package/components/DesignSystem/Organisms/SearchResults.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="themedClass('resultsContainerClass', 'mt-10 md:mt-20')">
+  <div :class="themedClass('resultsContainerClass', 'mt-10')">
     <p
       v-if="results && 'label' in results && results.label"
       :class="themedClass('resultLabelClass', 'h3 mb-4')"

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -5,7 +5,7 @@
         v-if="image"
         :media="image"
         imageSizes="xs:100vw sm:100vw md:420px lg:420px"
-        imageAspectRatios="4/3"
+        imageAspectRatios="16/9"
         :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
         :figcaptionClass="themedClass('figcaptionClass')"
         :elementClass="themedClass('elementClass', 'w-full')"
@@ -25,7 +25,7 @@
             :pretitleClass="
               themedClass(
                 'pretitleClass',
-                'mb-2 text-base lg:text-base font-medium',
+                'mb-1 text-base lg:text-base font-medium',
               )
             "
             :title="title"

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -105,7 +105,10 @@ const authorDivider = tv({
   variants: {
     colorScheme: {
       none: themedClass('authorDividerVariantsColorSchemeNone', 'border-black'),
-      dark: themedClass('authorDividerVariantsColorSchemeDark', 'border-white'),
+      dark: themedClass(
+        'authorDividerVariantsColorSchemeDark',
+        'border-gray-200',
+      ),
       light: themedClass(
         'authorDividerVariantsColorSchemeLight',
         'border-black',

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -44,7 +44,7 @@
         colorScheme="none"
         :containerClass="themedClass('mediaContainerClass', 'my-0')"
         imageSizes="xs:750px"
-        imageAspectRatios="3/2"
+        imageAspectRatios="16/9"
         :mediaClass="themedClass('mediaClass', 'my-0')"
         :figcaptionClass="themedClass('figcaptionClass')"
         :elementClass="themedClass('elementClass')"

package/components/Drupal/Webform/index.vue

@@ -1,15 +1,20 @@
 <template>
   <div :class="themedClass('wrapperClass')">
     <Transition name="fade">
-      <div v-if="!submitted && !showThankYou && !showError" :class="themedClass('formWrapperClass')">
+      <div
+        v-if="!submitted && !showThankYou && !showError"
+        :class="themedClass('formWrapperClass')"
+      >
         <FormKit
           type="form"
           :actions="false"
           :messages-class="themedClass('messagesClass', 'mt-2')"
-          :incomplete-message="$texts(
-            'webform.submission_validation_incomplete',
-            'Please fill in all required fields.',
-          )"
+          :incomplete-message="
+            $texts(
+              'webform.submission_validation_incomplete',
+              'Please fill in all required fields.',
+            )
+          "
           use-local-storage
           @submit="submitWebform"
         >
@@ -18,7 +23,6 @@
             :key="formElement?.metadata?.key"
             :class="themedClass('elementWrapperClass')"
           >
-
             <NuxtTurnstile
               v-model="token"
               v-if="formElement?.metadata?.key === 'actions'"
@@ -38,7 +42,12 @@
     <Transition name="fade">
       <div
         v-if="showThankYou"
-        :class="themedClass('successMessageClass', 'mb-4 rounded-lg border border-success-500 px-6 py-4 text-success-500')"
+        :class="
+          themedClass(
+            'successMessageClass',
+            'border-success-500 text-success-500 mb-4 rounded-lg border px-6 py-4',
+          )
+        "
       >
         <p>
           {{
@@ -54,7 +63,12 @@
     <Transition name="fade">
       <div
         v-if="showError"
-        :class="themedClass('errorMessageClass', 'mb-4 rounded-lg border border-error-500 px-6 py-4 text-error-500')"
+        :class="
+          themedClass(
+            'errorMessageClass',
+            'border-error-500 text-error-500 mb-4 rounded-lg border px-6 py-4',
+          )
+        "
       >
         <p>
           {{
@@ -111,12 +125,13 @@ const submitted = ref(false)
 const showThankYou = ref(false)
 const showError = ref(false)
 
-const queryKey = `drupalWebform-${props?.formId || '0'}`;
+const queryKey = `drupalWebform-${props?.formId || '0'}`
+
 const { data: formDefinition } = await useAsyncData(queryKey, async () => {
-    return await useGraphqlQuery('webformById', { id: props?.formId }).then(
-      (v) => v?.data?.webformById || { elements: [] }
-    )
-  })
+  return await useGraphqlQuery('webformById', { id: props?.formId }).then(
+    (v) => v?.data?.webformById || { elements: [] },
+  )
+})
 
 async function submitWebform(data: FormData) {
   try {

package/components/Drupal/Webform/query.graphql

@@ -1,5 +1,5 @@
-query webformById($id: ID!) {
-  webformById(id: "contact") {
+query webformById($id: String!) {
+  webformById(id: $id) {
     label
     id
     elements {

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

@@ -9,6 +9,7 @@
       :class="themedClass('rowClass')"
     >
       <div
+        v-if="pretitle || title"
         :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
@@ -22,6 +23,7 @@
         />
       </div>
       <div
+        v-if="subtitle || text"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
@@ -39,12 +41,12 @@
       :list="cards"
       :class="[
         themedClass(
-          'cardsContainerClass',
+          'buttonsContainerClass',
           'grid-3-col container mx-auto grid gap-x-6 gap-y-12',
         ),
         { droptarget: isEditing },
         {
-          [themedClass('buttonsContainerOffsetClass', 'mt-10 md:mt-20')]:
+          [themedClass('buttonsContainerOffsetClass', 'mt-10')]:
             pretitle || title,
         },
       ]"

package/components/Paragraph/Contact/index.vue

@@ -58,7 +58,7 @@
       >
         <DrupalWebform
           v-if="contactWebform?.id"
-          :form-id="contactWebform?.id"
+          :formId="contactWebform?.id"
           :wrapperClass="themedClass('wrapperClass')"
           :formWrapperClass="themedClass('formWrapperClass')"
           :messagesClass="themedClass('messagesClass')"
@@ -74,7 +74,7 @@
 import type { ParagraphIcmsLayoutContactFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-defineProps<ParagraphIcmsLayoutContactFragment>()
+const props = defineProps<ParagraphIcmsLayoutContactFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/Downloads/index.vue

@@ -97,7 +97,7 @@ const download = tv({
       none: themedClass('downloadVariantsColorSchemeNone', 'bg-gray-50'),
       dark: themedClass(
         'downloadVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass('downloadVariantsColorSchemeLight', 'bg-white'),
       accent: themedClass(

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

@@ -59,7 +59,7 @@ const accordionTrigger = tv({
       ),
       dark: themedClass(
         'accordionVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass(
         'accordionVariantsColorSchemeLight',

package/components/Paragraph/FlipTeasers/index.vue

@@ -39,9 +39,7 @@
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow
-      :class="
-        themedClass('secondRowClass', pretitle || title ? 'mt-10 md:mt-20' : '')
-      "
+      :class="themedClass('secondRowClass', pretitle || title ? 'mt-10' : '')"
     >
       <DesignSystemOrganismsFlipTeaser
         v-for="flipTeaser in flipTeasers"

package/components/Paragraph/Gallery/index.vue

@@ -38,9 +38,7 @@
 
     <DesignSystemAtomsGridRow
       v-if="media?.length"
-      :class="
-        themedClass('secondRowClass', pretitle || title ? 'mt-10 md:mt-20' : '')
-      "
+      :class="themedClass('secondRowClass', pretitle || title ? 'mt-10' : '')"
     >
       <div
         v-for="(image, index) in media"

package/components/Paragraph/HeroImage/index.vue

@@ -24,7 +24,7 @@
       <Media
         v-if="medium"
         :media="medium"
-        imageAspectRatios="xs:1/1 md:16/9"
+        imageAspectRatios="xs:1/1 sm:1/1 md:16/9 lg:16/9 xl:16/9 xxl:16/9"
         imageSizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw"
         imageLoading="eager"
         :videoControls="false"

package/components/Paragraph/Introduction/index.vue

@@ -18,7 +18,7 @@
             <Media
               v-if="image"
               :media="image"
-              imageAspectRatios="1/1"
+              imageAspectRatios="16/9"
               imageSizes="xs:100vw sm:100vw md:320px lg:380px"
               :mediaClass="themedClass('mediaClass')"
               :elementClass="themedClass('elementClass')"

package/components/Paragraph/Media/index.vue

@@ -9,6 +9,8 @@
         <DesignSystemMoleculesMediaSlider
           v-if="media && media.length > 1"
           :media="media"
+          :imageSizes="imageSizes"
+          :imageAspectRatios="imageAspectRatios"
           :containerClass="themedClass('mediaSliderContainerClass', 'my-0')"
           :mediaClass="themedClass('mediaSliderMediaClass')"
           :elementClass="
@@ -25,17 +27,18 @@
             themedClass('mediaSliderCarouselButtonNextClass')
           "
           colorScheme="none"
-          showCaption
+          :showCaption="showCaptions"
         />
 
         <Media
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
           :imageSizes="imageSizes"
+          :imageAspectRatios="imageAspectRatios"
           :mediaClass="themedClass('mediaMediaClass')"
           :elementClass="themedClass('mediaElementClass')"
           :figcaptionClass="themedClass('mediaFigcaptionClass')"
-          showCaption
+          :showCaption="showCaptions"
         />
       </div>
     </div>
@@ -60,6 +63,10 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+const showCaptions = computed(() => {
+  return options.value.showCaptions
+})
+
 const rowClassList = computed(() => {
   const classList = ['grid grid-cols-12 gap-6']
   if (options.value.width === 'full') {
@@ -82,6 +89,18 @@ const imageSizes = computed(() => {
   return 'xs:100vw sm:100vw md:50vw lg:640px'
 })
 
+const imageAspectRatios = computed(() => {
+  if (options.value.width === 'full') {
+    return '3/1'
+  }
+
+  if (options.value.width === 'page') {
+    return '16/9'
+  }
+
+  return '4/3'
+})
+
 const columnClassList = computed(() => {
   const classList = ['col-span-12']
 

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

@@ -50,7 +50,7 @@
             <Media
               v-if="image"
               :media="image"
-              imageAspectRatios="xs:16/9 md:1/1 lg:16/9"
+              imageAspectRatios="xs:16/9 sm:16/9 md:1/1 lg:16/9"
               imageSizes="xs:100vw sm:100vw md:50vw lg:600px"
               :mediaClass="themedClass('mediaClass')"
               :elementClass="themedClass('elementClass')"
@@ -156,7 +156,7 @@ const bulletPoint = tv({
   variants: {
     colorScheme: {
       none: themedClass('bulletPointVariantsColorSchemeNone', 'text-gray-950'),
-      dark: themedClass('bulletPointVariantsColorSchemeDark', 'text-white'),
+      dark: themedClass('bulletPointVariantsColorSchemeDark', 'text-gray-200'),
       light: themedClass(
         'bulletPointVariantsColorSchemeLight',
         'text-gray-950',

package/components/Paragraph/Table/index.vue

@@ -38,7 +38,7 @@
       :class="
         themedClass(
           'secondRowClass',
-          pretitle || title || subtitle || text ? 'mt-10 md:mt-20' : '',
+          pretitle || title || subtitle || text ? 'mt-10' : '',
         )
       "
     >

package/components/Paragraph/Tabs/Element/index.vue

@@ -63,7 +63,7 @@ const tabContent = tv({
       ),
       dark: themedClass(
         'tabContentVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass(
         'tabContentVariantsColorSchemeLight',

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

@@ -179,7 +179,7 @@ const tabTrigger = tv({
       ),
       dark: themedClass(
         'tabTriggerVariantsColorSchemeDark',
-        'bg-gray-800 dark:bg-gray-800 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white border-gray-950',
+        'bg-gray-800 dark:bg-gray-800 text-gray-200 dark:text-gray-200 data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-gray-200 border-gray-950',
       ),
       light: themedClass(
         'tabTriggerVariantsColorSchemeLight',
@@ -203,7 +203,7 @@ const tabContent = tv({
       ),
       dark: themedClass(
         'tabContentVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass(
         'tabContentVariantsColorSchemeLight',
@@ -230,7 +230,7 @@ const accordionTrigger = tv({
       ),
       dark: themedClass(
         'accordionVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass(
         'accordionVariantsColorSchemeLight',

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

@@ -42,7 +42,7 @@
           themedClass(
             'teamElementsContainerClass',
             pretitle || title || subtitle || text
-              ? 'container mx-auto mt-10 grid gap-6 md:mt-20 md:gap-12'
+              ? 'container mx-auto mt-10 grid gap-6 md:gap-12'
               : 'container mx-auto grid gap-6 md:gap-12',
           ),
           { droptarget: isEditing },

package/components/Paragraph/Teasers/index.vue

@@ -44,7 +44,7 @@
         themedClass(
           'secondRowClass',
           pretitle || title || subtitle || text
-            ? 'grid-4-col mt-10 gap-y-12 md:mt-20'
+            ? 'grid-4-col mt-10 gap-y-12'
             : 'grid-4-col gap-y-12',
         )
       "

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

@@ -106,7 +106,7 @@ const carousel = tv({
       none: themedClass('carouselVariantsColorSchemeNone', 'bg-gray-50'),
       dark: themedClass(
         'carouselVariantsColorSchemeDark',
-        'bg-gray-900 text-white',
+        'bg-gray-900 text-gray-200',
       ),
       light: themedClass('carouselVariantsColorSchemeLight', 'bg-white'),
       accent: themedClass(
@@ -133,7 +133,7 @@ const carouselButton = tv({
       ),
       dark: themedClass(
         'carouselButtonVariantsColorSchemeDark',
-        'bg-gray-800 text-white hover:bg-gray-950 dark:bg-gray-800 dark:text-white hover:dark:bg-gray-950',
+        'bg-gray-800 text-gray-200 hover:bg-gray-950 dark:bg-gray-800 dark:text-gray-200 hover:dark:bg-gray-950',
       ),
       light: themedClass(
         'carouselButtonVariantsColorSchemeLight',

package/components/Paragraph/TextMedia/index.vue

@@ -144,11 +144,11 @@ const imageAspectRatios = computed(() => {
 
   switch (width) {
     case 'narrow':
-      return '3/2'
+      return '2/1'
     case 'medium':
-      return '4/3'
+      return '16/9'
     default:
-      return '1/1'
+      return '3/2'
   }
 })
 

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

@@ -38,9 +38,7 @@
       </div>
     </DesignSystemAtomsGridRow>
 
-    <DesignSystemAtomsGridRow
-      :class="themedClass('secondRowClass', 'mt-10 lg:mt-20')"
-    >
+    <DesignSystemAtomsGridRow :class="themedClass('secondRowClass', 'mt-10')">
       <!-- Anchor navigation -->
       <div
         :class="
@@ -147,7 +145,7 @@
               cn(
                 themedClass(
                   'carouselButtonPrevClass',
-                  '-bottom-[90px] left-0 top-auto xl:bottom-auto xl:left-16 xl:top-1/2',
+                  '-bottom-[90px] left-0 top-auto',
                 ),
                 carouselButton({ colorScheme }),
               )
@@ -164,7 +162,7 @@
               cn(
                 themedClass(
                   'carouselButtonNextClass',
-                  '-bottom-[90px] left-[66px] top-auto xl:bottom-auto xl:left-auto xl:right-16 xl:top-1/2',
+                  '-bottom-[90px] left-[66px] top-auto',
                 ),
                 carouselButton({ colorScheme }),
               )
@@ -364,7 +362,7 @@ const carouselButton = tv({
       ),
       dark: themedClass(
         'carouselButtonVariantsColorSchemeDark',
-        'bg-gray-800 text-white dark:bg-gray-800 dark:text-white',
+        'bg-gray-800 text-gray-200 dark:bg-gray-800 dark:text-gray-200',
       ),
       light: themedClass(
         'carouselButtonVariantsColorSchemeLight',
@@ -418,7 +416,7 @@ const decorativeCircle = tv({
       ),
       dark: themedClass(
         'decorativeCircleVariantsColorSchemeDark',
-        'border-white bg-gray-950',
+        'border-gray-200 bg-gray-950',
       ),
       light: themedClass(
         'decorativeCircleVariantsColorSchemeLight',

package/components/Search/Facets/FacetDropdownUI.vue

@@ -398,7 +398,7 @@ const popoverTrigger = tv({
       ),
       dark: themedClass(
         'popoverTriggerVariantsColorSchemeDark',
-        'bg-gray-900 text-white border-gray-800 focus-visible:ring-primary',
+        'bg-gray-900 text-gray-200 border-gray-800 focus-visible:ring-primary',
       ),
       light: themedClass(
         'popoverTriggerVariantsColorSchemeLight',
@@ -471,7 +471,7 @@ const resultsCount = tv({
   variants: {
     colorScheme: {
       none: themedClass('resultsTextVariantsColorSchemeNone', 'text-black'),
-      dark: themedClass('resultsTextVariantsColorSchemeDark', 'text-white'),
+      dark: themedClass('resultsTextVariantsColorSchemeDark', 'text-gray-200'),
       light: themedClass('resultsTextVariantsColorSchemeLight', 'text-black'),
       accent: themedClass('resultsTextVariantsColorSchemeAccent', 'text-white'),
     },
@@ -545,7 +545,7 @@ const checkbox = tv({
       ),
       dark: themedClass(
         'checkboxVariantsColorSchemeDark',
-        'text-white border-gray-800 dark:border-gray-800 bg-gray-800 dark:bg-gray-800 data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary text-white dark:text-white data-[state=checked]:text-white dark:data-[state=checked]:text-white data-[state=checked]:border-primary dark:data-[state=checked]:border-primary',
+        'text-gray-200 border-gray-800 dark:border-gray-800 bg-gray-800 dark:bg-gray-800 data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary 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 dark:data-[state=checked]:border-primary',
       ),
       light: themedClass(
         'checkboxVariantsColorSchemeLight',
@@ -599,7 +599,7 @@ const filterOptionLabel = tv({
       ),
       dark: themedClass(
         'filterOptionLabelVariantsColorSchemeDark',
-        'text-white',
+        'text-gray-200',
       ),
       light: themedClass(
         'filterOptionLabelVariantsColorSchemeLight',
@@ -623,7 +623,7 @@ const filterOptionCount = tv({
       ),
       dark: themedClass(
         'filterOptionCountVariantsColorSchemeDark',
-        'text-white',
+        'text-gray-200',
       ),
       light: themedClass(
         'filterOptionCountVariantsColorSchemeLight',

package/components/Search/Facets/FacetedSearchUI.vue

@@ -174,7 +174,7 @@ Facets: {{ facetData.length }} items</pre
       :class="
         themedClass(
           'globalLoadMoreButtonContainer',
-          'mt-10 flex justify-center lg:mt-20',
+          'mt-10 flex justify-center',
         )
       "
     >
@@ -794,7 +794,7 @@ const button = tv({
       ),
       dark: themedClass(
         'buttonVariantsColorSchemeDark',
-        'bg-white text-black hover:bg-black hover:text-white border-black',
+        'bg-white text-black hover:bg-black hover:text-gray-200 border-black',
       ),
       light: themedClass(
         'buttonVariantsColorSchemeLight',

package/components/Search/Input/index.vue

@@ -85,7 +85,7 @@ const icon = tv({
   variants: {
     colorScheme: {
       none: themedClass('iconVariantsColorSchemeNone', 'text-primary'),
-      dark: themedClass('iconVariantsColorSchemeDark', 'text-white'),
+      dark: themedClass('iconVariantsColorSchemeDark', 'text-gray-200'),
       light: themedClass('iconVariantsColorSchemeLight', 'text-primary'),
       accent: themedClass('iconVariantsColorSchemeAccent', 'text-black'),
     },

package/components/Section/Footer/index.vue

@@ -137,7 +137,7 @@
               :class="
                 themedClass(
                   'phoneNumberClass',
-                  'hover:text-primary mb-2 block w-fit font-medium text-black motion-safe:transition-colors motion-safe:duration-200',
+                  'hover:text-primary mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
                 )
               "
             >
@@ -150,7 +150,7 @@
               :class="
                 themedClass(
                   'emailAddressClass',
-                  'hover:text-primary mb-2 block w-fit font-medium text-black motion-safe:transition-colors motion-safe:duration-200',
+                  'hover:text-primary mb-2 block w-fit font-medium motion-safe:transition-colors motion-safe:duration-200',
                 )
               "
             >

package/components/Section/Header/DesktopMainMenu.vue

@@ -1,10 +1,18 @@
 <template>
   <nav
     :aria-label="$texts('main_menu.nav_aria_label', 'Main navigation')"
-    :class="themedClass('containerClass', 'flex h-full')"
+    :class="
+      themedClass(
+        'containerClass',
+        'ml-auto hidden empty:hidden 2xl:flex 2xl:h-full 2xl:items-center',
+      )
+    "
   >
     <ul
-      :class="themedClass('listClass', 'flex items-stretch justify-end gap-8')"
+      v-if="menuItems.length"
+      :class="
+        themedClass('listClass', 'flex h-full items-stretch justify-end gap-8')
+      "
     >
       <li
         v-for="item in menuItems"
@@ -28,7 +36,7 @@
                 'submenuToggleClass',
                 'size-5 shrink-0 cursor-pointer text-black motion-safe:transition-transform motion-safe:duration-300',
               ),
-              { 'rotate-180': isOpen(item) },
+              { 'motion-safe:rotate-180': isOpen(item) },
             ]"
           />
         </component>
@@ -37,30 +45,34 @@
           :enter-active-class="
             themedClass(
               'transitionEnterActiveClass',
-              'transition-opacity duration-200 ease-in-out',
+              'motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-in-out',
             )
           "
           :enter-from-class="
-            themedClass('transitionEnterFromClass', 'opacity-0')
+            themedClass('transitionEnterFromClass', 'motion-safe:opacity-0')
+          "
+          :enter-to-class="
+            themedClass('transitionEnterToClass', 'motion-safe:opacity-100')
           "
-          :enter-to-class="themedClass('transitionEnterToClass', 'opacity-100')"
           :leave-active-class="
             themedClass(
               'transitionLeaveActiveClass',
-              'transition-opacity duration-200 ease-in-out',
+              'motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-in-out',
             )
           "
           :leave-from-class="
-            themedClass('transitionLeaveFromClass', 'opacity-100')
+            themedClass('transitionLeaveFromClass', 'motion-safe:opacity-100')
+          "
+          :leave-to-class="
+            themedClass('transitionLeaveToClass', 'motion-safe:opacity-0')
           "
-          :leave-to-class="themedClass('transitionLeaveToClass', 'opacity-0')"
         >
           <ul
             v-if="hasSubmenu(item) && isOpen(item)"
             :id="submenuId(item)"
             :class="
               themedClass(
-                'submenulistClass',
+                'submenuListClass',
                 'absolute left-0 top-full w-fit min-w-48 border border-gray-100 bg-white',
               )
             "
@@ -79,7 +91,7 @@
 <script lang="ts" setup>
 import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
 import { NuxtLink } from '#components'
-import DesktopMainMenuDropdown from './DesktopMainMenuDropdown.vue'
+import DesktopMainMenuDropdown from '@iqual/nuxt-icms/components/Section/Header/DesktopMainMenuDropdown.vue'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
@@ -122,11 +134,11 @@ function componentAttrs(item: MappedMenuLink) {
         class: cn(
           themedClass(
             'linkClass',
-            'flex items-center justify-between gap-1 hover:text-primary duration-200 whitespace-normal break-keep hyphens-none',
+            'flex items-center justify-between gap-1 hover:text-primary motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
           ),
           item.additionalClass,
         ),
-        'exact-active-class': 'text-primary',
+        'exact-active-class': themedClass('linkActiveClass', 'text-primary'),
       }
 
     case 'button':

package/components/Section/Header/DesktopMainMenuDropdown.vue

@@ -34,19 +34,27 @@
       :enter-active-class="
         themedClass(
           'transitionEnterActiveClass',
-          'transition-opacity duration-200 ease-in-out',
+          'motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-in-out',
         )
       "
-      :enter-from-class="themedClass('transitionEnterFromClass', 'opacity-0')"
-      :enter-to-class="themedClass('transitionEnterToClass', 'opacity-100')"
+      :enter-from-class="
+        themedClass('transitionEnterFromClass', 'motion-safe:opacity-0')
+      "
+      :enter-to-class="
+        themedClass('transitionEnterToClass', 'motion-safe:opacity-100')
+      "
       :leave-active-class="
         themedClass(
           'transitionLeaveActiveClass',
-          'transition-opacity duration-200 ease-in-out',
+          'motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-in-out',
         )
       "
-      :leave-from-class="themedClass('transitionLeaveFromClass', 'opacity-100')"
-      :leave-to-class="themedClass('transitionLeaveToClass', 'opacity-0')"
+      :leave-from-class="
+        themedClass('transitionLeaveFromClass', 'motion-safe:opacity-100')
+      "
+      :leave-to-class="
+        themedClass('transitionLeaveToClass', 'motion-safe:opacity-0')
+      "
     >
       <ul
         v-if="hasSubmenu(child) && isOpen(child)"
@@ -83,9 +91,7 @@ const props = defineProps<{
 const { item, menuItemActive } = props
 
 const hasSubmenu = (child: MappedMenuLink) => (child.children?.length ?? 0) > 0
-
 const submenuId = (child: MappedMenuLink) => `${child.id}-submenu`
-
 const isActive = (child: MappedMenuLink) => menuItemActive?.id === child.id
 
 const openMap = ref<Record<string, boolean>>({})
@@ -132,11 +138,11 @@ function componentAttrs(child: MappedMenuLink) {
         'aria-controls': submenu ? submenuId(child) : undefined,
         'aria-current': active ? 'page' : undefined,
         tabindex: 0,
-        'exact-active-class': 'text-primary',
+        'exact-active-class': themedClass('linkActiveClass', 'text-primary'),
         class: cn(
           themedClass(
             'linkClass',
-            'w-full flex items-center justify-between gap-4 px-6 py-3 hover:text-primary duration-200 whitespace-normal break-keep hyphens-none',
+            'w-full flex items-center justify-between gap-4 px-6 py-3 hover:text-primary motion-safe:transition-colors motion-safe:duration-200 whitespace-normal break-keep hyphens-none',
           ),
           child.additionalClass,
         ),

package/components/Section/Header/LanguageDropdown.vue

@@ -1,6 +1,7 @@
 <template>
   <ClientOnly>
     <div
+      v-if="showLanguageLinks"
       v-click-away="closeDropdown"
       @keydown.esc="closeDropdown"
       :class="themedClass('containerClass', 'relative py-2')"
@@ -105,9 +106,14 @@
 <script lang="ts" setup>
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
+const themedClass = useTheme('SectionHeaderLanguageDropdown')
 const links = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()
-const themedClass = useTheme('SectionHeaderLanguageDropdown')
+
+const showLanguageLinks = computed(() => {
+  const list = links.value ?? []
+  return list.filter((l) => l.enabled).length > 1
+})
 
 const isLangDropdownOpen = ref(false)
 

package/components/Section/Header/LanguageLinks.vue

@@ -1,6 +1,9 @@
 <template>
   <ClientOnly>
-    <div :class="themedClass('containerClass', 'flex items-center')">
+    <div
+      v-if="showLanguageLinks"
+      :class="themedClass('containerClass', 'flex items-center')"
+    >
       <ul :class="themedClass('listClass', 'flex gap-4 uppercase')">
         <li
           v-for="(lang, i) in links"
@@ -34,6 +37,11 @@
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 const { close } = useMobileMenuOverlayBus()
 
-const links = useLanguageLinks()
 const themedClass = useTheme('SectionHeaderLanguageLinks')
+
+const links = useLanguageLinks()
+const showLanguageLinks = computed(() => {
+  const list = links.value ?? []
+  return list.filter((l) => l.enabled).length > 1
+})
 </script>

package/components/Section/Header/Logo.vue

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

package/components/Section/Header/MenuIcon.vue

@@ -10,7 +10,7 @@
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      class="size-6 overflow-visible text-black"
+      :class="themedClass('hamburgerSvg', 'size-6 overflow-visible text-black')"
       aria-hidden
     >
       <rect

package/components/Section/Header/MetaMenu.vue

@@ -3,9 +3,10 @@
     :aria-label="
       $texts('meta_navigation.nav_aria_label', 'Meta navigation menu')
     "
-    :class="themedClass('containerClass')"
+    :class="themedClass('containerClass', 'empty:hidden')"
   >
     <ul
+      v-if="menuItems.length"
       :class="
         themedClass(
           'listClass',
@@ -33,7 +34,7 @@
             :target="menuItem?.target"
             :rel="menuItem?.rel"
             @click="close()"
-            exact-active-class="text-primary"
+            :exact-active-class="themedClass('linkActiveClass', 'text-primary')"
             :class="
               cn(
                 themedClass(

package/components/Section/Header/MobileMainMenuItem.vue

@@ -29,37 +29,50 @@
         :class="[
           themedClass(
             'submenuToggleClass',
-            'size-5 cursor-pointer motion-safe:transition-transform motion-safe:duration-300',
+            'size-5 cursor-pointer focus:outline-0 focus-visible:outline-2 motion-safe:transition-transform motion-safe:duration-300',
           ),
-          { 'rotate-180': isOpen },
+          { 'motion-safe:rotate-180': isOpen },
         ]"
       />
     </div>
+
     <Transition
       v-if="hasSubmenu"
       :enter-active-class="
         themedClass(
           'transitionEnterActiveClass',
-          'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+          'motion-safe:transition-[max-height,opacity] motion-safe:duration-300 motion-safe:ease-in-out overflow-hidden',
         )
       "
       :enter-from-class="
-        themedClass('transitionEnterFromClass', 'max-h-0 opacity-0')
+        themedClass(
+          'transitionEnterFromClass',
+          'motion-safe:max-h-0 motion-safe:opacity-0',
+        )
       "
       :enter-to-class="
-        themedClass('transitionEnterToClass', 'max-h-96 opacity-100')
+        themedClass(
+          'transitionEnterToClass',
+          'motion-safe:max-h-96 motion-safe:opacity-100',
+        )
       "
       :leave-active-class="
         themedClass(
           'transitionLeaveActiveClass',
-          'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+          'motion-safe:transition-[max-height,opacity] motion-safe:duration-300 motion-safe:ease-in-out overflow-hidden',
         )
       "
       :leave-from-class="
-        themedClass('transitionLeaveFromClass', 'max-h-96 opacity-100')
+        themedClass(
+          'transitionLeaveFromClass',
+          'motion-safe:max-h-96 motion-safe:opacity-100',
+        )
       "
       :leave-to-class="
-        themedClass('transitionLeaveToClass', 'max-h-0 opacity-0')
+        themedClass(
+          'transitionLeaveToClass',
+          'motion-safe:max-h-0 motion-safe:opacity-0',
+        )
       "
     >
       <ul
@@ -163,7 +176,7 @@ const componentAttrs = computed(() => {
         'aria-current': menuItemActive?.id === item.id ? 'page' : undefined,
         tabindex: 0,
         class: cn(themedClass('linkClass'), item.additionalClass),
-        'exact-active-class': 'text-primary',
+        'exact-active-class': themedClass('linkActiveClass', 'text-primary'),
       }
 
     case 'button':

package/components/Section/Header/index.vue

@@ -25,21 +25,17 @@
           :class="
             themedClass(
               'metaRowClass',
-              'flex items-center justify-end gap-8 py-2',
+              'flex items-center justify-end gap-8 py-2 empty:hidden',
             )
           "
         >
-          <div :class="themedClass('metaMenuContainer')">
-            <SectionHeaderMetaMenu />
-          </div>
-          <div :class="themedClass('metaButtonsContainer')">
-            <SectionHeaderButtons :buttons="metaLinks" />
-          </div>
+          <SectionHeaderMetaMenu />
+          <SectionHeaderMetaButtons :buttons="metaLinks" />
           <div
             :class="
               themedClass(
                 'languageDropdownContainer',
-                'flex h-full items-center',
+                'flex h-full items-center empty:hidden',
               )
             "
           >
@@ -64,18 +60,14 @@
         <div :class="themedClass('logoContainer', 'shrink-0')">
           <SectionHeaderLogo />
         </div>
+
+        <SectionHeaderDesktopMainMenu />
         <div
           :class="
-            themedClass(
-              'mainMenuContainer',
-              'ml-auto hidden 2xl:flex 2xl:h-full 2xl:items-center',
-            )
+            themedClass('mainButtonsContainer', 'hidden empty:hidden 2xl:block')
           "
         >
-          <SectionHeaderDesktopMainMenu />
-        </div>
-        <div :class="themedClass('mainButtonsContainer', 'hidden 2xl:block')">
-          <SectionHeaderButtons :buttons="contactButtons" />
+          <SectionHeaderMainButtons :buttons="contactButtons" />
         </div>
         <div
           :class="

package/composables/useIsHomepage.ts

@@ -0,0 +1,4 @@
+export function useIsHomepage() {
+  const route = useRoute()
+  return computed(() => route.name === 'home')
+}

package/composables/useNavigationOffset.ts

@@ -1,4 +1,4 @@
-import { useIsMobile } from './useIsMobile'
+import { useIsMobile } from '@iqual/nuxt-icms/composables/useIsMobile'
 
 const mobileNavHeight: number = 60 // actual height + 4
 const desktopNavHeight: number = 85 // actual height + 4

package/nuxt.config.ts

@@ -499,6 +499,11 @@ export default defineNuxtConfig({
         label: 'Reverse columns',
         default: false,
       },
+      showCaptions: {
+        type: 'checkbox',
+        label: 'Show captions',
+        default: true,
+      },
       imageAlignment: {
         type: 'radios',
         label: 'Image Alingment',

package/package.json

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

package/tailwind.config.ts

@@ -223,8 +223,8 @@ const config: Config = {
     },
   ],
   corePlugins: {
+    container: true,
     textOpacity: false,
-    container: false,
   },
 }