@iqual/nuxt-icms 1.4.6 → 1.4.9

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

@@ -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/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/Table.vue

@@ -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="16/9"
-      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/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/Drupal/Webform/index.vue

@@ -132,7 +132,6 @@ const { data: formDefinition } = await useAsyncData(queryKey, async () => {
     (v) => v?.data?.webformById || { elements: [] },
   )
 })
-console.log('Drupal Webform formDefinition:', formDefinition)
 
 async function submitWebform(data: FormData) {
   try {

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

@@ -46,7 +46,7 @@
         ),
         { droptarget: isEditing },
         {
-          [themedClass('buttonsContainerOffsetClass', 'mt-10 md:mt-20')]:
+          [themedClass('buttonsContainerOffsetClass', 'mt-10')]:
             pretitle || title,
         },
       ]"

package/components/Paragraph/Contact/index.vue

@@ -76,8 +76,6 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutContactFragment>()
 
-console.log('Contact', props)
-
 const { options, isEditing } = useAttrs().blokkliData
 
 const themedClass = useTheme('ParagraphContact')

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

@@ -10,7 +10,9 @@
   >
     <ul
       v-if="menuItems.length"
-      :class="themedClass('listClass', 'flex items-stretch justify-end gap-8')"
+      :class="
+        themedClass('listClass', 'flex h-full items-stretch justify-end gap-8')
+      "
     >
       <li
         v-for="item in menuItems"

package/components/Section/Header/MobileMainMenuItem.vue

@@ -29,7 +29,7 @@
         :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',
           ),
           { 'motion-safe:rotate-180': isOpen },
         ]"

package/components/Section/Header/index.vue

@@ -30,7 +30,7 @@
           "
         >
           <SectionHeaderMetaMenu />
-          <SectionHeaderButtons :buttons="metaLinks" />
+          <SectionHeaderMetaButtons :buttons="metaLinks" />
           <div
             :class="
               themedClass(
@@ -67,7 +67,7 @@
             themedClass('mainButtonsContainer', 'hidden empty:hidden 2xl:block')
           "
         >
-          <SectionHeaderButtons :buttons="contactButtons" />
+          <SectionHeaderMainButtons :buttons="contactButtons" />
         </div>
         <div
           :class="

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.6",
+  "version": "1.4.9",
   "description": "ICMS Base",
   "type": "module",
   "private": false,