@iqual/nuxt-icms 1.5.16 → 1.5.18

package/components/Blokkli/Media/index.vue

@@ -13,6 +13,7 @@ const blokkliData = defineBlokkli({
     'spacingTop',
     'spacingBottom',
     'width',
+    'imageFormat',
     'colorScheme',
   ],
   options: {
@@ -20,7 +21,7 @@ const blokkliData = defineBlokkli({
       type: 'checkbox',
       label: 'Show captions',
       default: false,
-    }
-  }
+    },
+  },
 })
 </script>

package/components/Blokkli/TextMedia/index.vue

@@ -13,6 +13,7 @@ const blokkliData = defineBlokkli({
     'spacingTop',
     'spacingBottom',
     'width',
+    'imageFormat',
     'alignHorizontalReduced',
     'colorScheme',
   ],

package/components/Blokkli/Timeline/Element/index.vue

@@ -9,6 +9,6 @@ const props = defineProps<ParagraphIcmsTimelineElementFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_timeline_element',
-  globalOptions: ['alignHorizontalReduced'],
+  globalOptions: ['imageFormat', 'alignHorizontalReduced'],
 })
 </script>

package/components/Blokkli/iFrame/index.vue

@@ -12,6 +12,7 @@ const blokkliData = defineBlokkli({
   globalOptions: [
     'spacingTop',
     'spacingBottom',
+    'width',
     'alignHorizontalFull',
     'colorScheme',
   ],

package/components/DesignSystem/Atoms/Button.vue

@@ -15,6 +15,8 @@
       ),
       label: cn(themedClass('labelClass', 'font-medium'), labelClass),
     }"
+    :variant="'none'"
+    :color="'none'"
   />
 </template>
 
@@ -79,7 +81,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsNoneNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white disabled:bg-transparent disabled:text-primary-500 disabled:border-primary-500 disabled:hover:bg-transparent disabled:hover:text-primary-500 disabled:hover:border-primary-500 disabled:active:bg-transparent disabled:active:text-primary-500 disabled:active:border-primary-500 aria-disabled:bg-transparent aria-disabled:text-primary-500 aria-disabled:border-primary-500 aria-disabled:hover:bg-transparent aria-disabled:hover:text-primary-500 aria-disabled:hover:border-primary-500 aria-disabled:active:bg-transparent aria-disabled:active:text-primary-500 aria-disabled:active:border-primary-500',
       ),
     },
     {
@@ -87,7 +89,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 active:bg-primary-600 active: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 disabled:bg-primary-500 disabled:text-white disabled:border-primary-500 disabled:hover:bg-primary-500 disabled:hover:text-white disabled:hover:border-primary-500 disabled:active:bg-primary-500 disabled:active:text-white disabled:active:border-primary-500 aria-disabled:bg-primary-500 aria-disabled:text-white aria-disabled:border-primary-500 aria-disabled:hover:bg-primary-500 aria-disabled:hover:text-white aria-disabled:hover:border-primary-500 aria-disabled:active:bg-primary-500 aria-disabled:active:text-white aria-disabled:active:border-primary-500',
       ),
     },
     {
@@ -95,7 +97,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsNoneMinimal',
-        'text-primary-500 hover:text-gray-950 active:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950 disabled:text-primary-500 disabled:hover:text-primary-500 disabled:active:text-primary-500 aria-disabled:text-primary-500 aria-disabled:hover:text-primary-500 aria-disabled:active:text-primary-500',
       ),
     },
     {
@@ -103,7 +105,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 active:bg-gray-200 active: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 disabled:bg-transparent disabled:text-gray-200 disabled:border-gray-200 disabled:hover:bg-transparent disabled:hover:text-gray-200 disabled:hover:border-gray-200 disabled:active:bg-transparent disabled:active:text-gray-200 disabled:active:border-gray-200 aria-disabled:bg-transparent aria-disabled:text-gray-200 aria-disabled:border-gray-200 aria-disabled:hover:bg-transparent aria-disabled:hover:text-gray-200 aria-disabled:hover:border-gray-200 aria-disabled:active:bg-transparent aria-disabled:active:text-gray-200 aria-disabled:active:border-gray-200',
       ),
     },
     {
@@ -111,7 +113,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 active:bg-primary-600 active: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 disabled:bg-primary-500 disabled:text-white disabled:border-primary-500 disabled:hover:bg-primary-500 disabled:hover:text-white disabled:hover:border-primary-500 disabled:active:bg-primary-500 disabled:active:text-white disabled:active:border-primary-500 aria-disabled:bg-primary-500 aria-disabled:text-white aria-disabled:border-primary-500 aria-disabled:hover:bg-primary-500 aria-disabled:hover:text-white aria-disabled:hover:border-primary-500 aria-disabled:active:bg-primary-500 aria-disabled:active:text-white aria-disabled:active:border-primary-500',
       ),
     },
     {
@@ -119,7 +121,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsDarkMinimal',
-        'text-gray-200 hover:text-primary-500 active:text-primary-500',
+        'text-gray-200 hover:text-primary-500 active:text-primary-500 disabled:text-gray-200 disabled:hover:text-gray-200 disabled:active:text-gray-200 aria-disabled:text-gray-200 aria-disabled:hover:text-gray-200 aria-disabled:active:text-gray-200',
       ),
     },
     {
@@ -127,7 +129,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsLightNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white disabled:bg-transparent disabled:text-primary-500 disabled:border-primary-500 disabled:hover:bg-transparent disabled:hover:text-primary-500 disabled:hover:border-primary-500 disabled:active:bg-transparent disabled:active:text-primary-500 disabled:active:border-primary-500 aria-disabled:bg-transparent aria-disabled:text-primary-500 aria-disabled:border-primary-500 aria-disabled:hover:bg-transparent aria-disabled:hover:text-primary-500 aria-disabled:hover:border-primary-500 aria-disabled:active:bg-transparent aria-disabled:active:text-primary-500 aria-disabled:active:border-primary-500',
       ),
     },
     {
@@ -135,7 +137,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 active:bg-primary-600 active: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 disabled:bg-primary-500 disabled:text-white disabled:border-primary-500 disabled:hover:bg-primary-500 disabled:hover:text-white disabled:hover:border-primary-500 disabled:active:bg-primary-500 disabled:active:text-white disabled:active:border-primary-500 aria-disabled:bg-primary-500 aria-disabled:text-white aria-disabled:border-primary-500 aria-disabled:hover:bg-primary-500 aria-disabled:hover:text-white aria-disabled:hover:border-primary-500 aria-disabled:active:bg-primary-500 aria-disabled:active:text-white aria-disabled:active:border-primary-500',
       ),
     },
     {
@@ -143,7 +145,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsLightMinimal',
-        'text-primary-500 hover:text-gray-950 active:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950 disabled:text-primary-500 disabled:hover:text-primary-500 disabled:active:text-primary-500 aria-disabled:text-primary-500 aria-disabled:hover:text-primary-500 aria-disabled:active:text-primary-500',
       ),
     },
     {
@@ -151,7 +153,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsAccentNormal',
-        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950 active:bg-white active:text-gray-950',
+        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950 active:bg-white active:text-gray-950 disabled:bg-transparent disabled:text-white disabled:border-white disabled:hover:bg-transparent disabled:hover:text-white disabled:hover:border-white disabled:active:bg-transparent disabled:active:text-white disabled:active:border-white aria-disabled:bg-transparent aria-disabled:text-white aria-disabled:border-white aria-disabled:hover:bg-transparent aria-disabled:hover:text-white aria-disabled:hover:border-white aria-disabled:active:bg-transparent aria-disabled:active:text-white aria-disabled:active:border-white',
       ),
     },
     {
@@ -159,7 +161,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 active:bg-white active:text-gray-950 active: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 disabled:bg-gray-950 disabled:text-white disabled:border-gray-950 disabled:hover:bg-gray-950 disabled:hover:text-white disabled:hover:border-gray-950 disabled:active:bg-gray-950 disabled:active:text-white disabled:active:border-gray-950 aria-disabled:bg-gray-950 aria-disabled:text-white aria-disabled:border-gray-950 aria-disabled:hover:bg-gray-950 aria-disabled:hover:text-white aria-disabled:hover:border-gray-950 aria-disabled:active:bg-gray-950 aria-disabled:active:text-white aria-disabled:active:border-gray-950',
       ),
     },
     {
@@ -167,7 +169,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsAccentMinimal',
-        'text-white hover:text-gray-950 active:text-gray-950',
+        'text-white hover:text-gray-950 active:text-gray-950 disabled:text-white disabled:hover:text-white disabled:active:text-white aria-disabled:text-white aria-disabled:hover:text-white aria-disabled:active:text-white',
       ),
     },
   ],

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -91,15 +91,15 @@
             @select="onCarouselSelect"
             :ui="{
               root: themedClass('carouselClass', 'flex h-full w-full flex-col'),
-              item: 'basis-full',
+              item: themedClass('carouselClass', 'basis-full h-full'),
               container: themedClass('carouselContentClass', 'h-full flex-1'),
               next: themedClass(
                 'carouselNextButtonClass',
-                'absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-hidden focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+                'absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black disabled:bg-black aria-disabled:bg-black active:bg-black ring-black p-2 text-white transition-colors hover:bg-black focus:outline-hidden focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
               ),
               prev: themedClass(
                 'carouselPrevButtonClass',
-                'absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-hidden focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+                'absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black disabled:bg-black aria-disabled:bg-black active:bg-black ring-black p-2 text-white transition-colors hover:bg-black focus:outline-hidden focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
               ),
             }"
           >
@@ -297,7 +297,7 @@ const getMediaElementClass = (media: MediaFragment) => {
     case 'MediaImage':
       return themedClass(
         'elementClassMediaImage',
-        'max-h-full max-w-full object-contain',
+        'w-auto h-full object-contain',
       )
     case 'MediaVideo':
       return themedClass('elementClassMediaVideo', 'max-h-full max-w-full')

package/components/DesignSystem/Organisms/FeatureCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="themedClass('containerClass', '@container relative')">
-    <a
+    <NuxtLink
       v-if="link?.path"
-      :href="link?.path"
+      :to="link.path"
       :title="linkLabel"
       :class="themedClass('linkOverlayClass', 'absolute inset-0 z-1')"
     />

package/components/DesignSystem/Organisms/SpotlightCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="themedClass('containerClass', '@container relative')">
-    <a
+    <NuxtLink
       v-if="link?.path"
-      :href="link?.path"
+      :to="link.path"
       :title="linkLabel"
       :class="themedClass('linkOverlayClass', 'absolute inset-0 z-4')"
     />

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -1,6 +1,12 @@
 <template>
   <div :class="themedClass('containerClass', '@container')">
     <div :class="teaserCard({ colorScheme })">
+      <NuxtLink
+        v-if="link?.path"
+        :to="link.path"
+        :aria-label="title"
+        :class="themedClass('linkOverlayClass', 'absolute inset-0 z-1')"
+      />
       <div :class="mediaContainer({ colorScheme })">
         <Media
           v-if="image"
@@ -53,7 +59,12 @@
         <slot name="buttongroup">
           <div
             v-if="link?.path"
-            :class="themedClass('buttonContainerClass', 'mt-auto flex pt-6')"
+            :class="
+              themedClass(
+                'buttonContainerClass',
+                'relative z-2 mt-auto flex pt-6',
+              )
+            "
           >
             <DesignSystemAtomsButton
               :link="link?.path"

package/components/DesignSystem/Organisms/TeaserSimple.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="themedClass('containerClass', '@container relative')">
-    <a
+    <NuxtLink
       v-if="link?.path"
-      :href="link?.path"
+      :to="link.path"
       :title="linkLabel"
       :class="themedClass('linkOverlayClass', 'peer absolute inset-0 z-1')"
     />
@@ -30,7 +30,6 @@
 
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
-import type { MediaFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 

package/components/DesignSystem/Organisms/TextCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="themedClass('containerClass', '@container relative')">
-    <a
+    <NuxtLink
       v-if="link?.path"
-      :href="link?.path"
+      :to="link.path"
       :title="linkLabel"
       :class="themedClass('linkOverlayClass', 'absolute inset-0 z-1')"
     />

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -44,7 +44,7 @@
         colorScheme="none"
         :containerClass="themedClass('mediaContainerClass', 'my-0')"
         imageSizes="xs:750px"
-        imageAspectRatios="16/9"
+        :imageFormat="imageFormat"
         :mediaClass="themedClass('mediaClass', 'my-0')"
         :figcaptionClass="themedClass('figcaptionClass')"
         :elementClass="themedClass('elementClass')"
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { ColorScheme, ImageFormat } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
@@ -85,6 +85,7 @@ const props = defineProps<{
   mediaClass?: string
   figcaptionClass?: string
   elementClass?: string
+  imageFormat?: ImageFormat
 }>()
 
 const reverseColumns = ref(false)

package/components/Form/TextAreaInput.vue

@@ -145,13 +145,64 @@ const floatingLabel = tv({
       ),
     },
     focused: {
-      true: themedClass(
-        'floatingLabelVariantsFocusedTrue',
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      colorScheme: 'none',
+      focused: true,
+      class: themedClass(
+        'floatingLabelCompoundVariantsNoneFocusedTrue',
         'text-primary-500 dark:text-primary-500',
       ),
-      false: themedClass('floatingLabelVariantsFocusedFalse', ''),
     },
-  },
+    {
+      colorScheme: 'none',
+      focused: false,
+      class: themedClass('floatingLabelCompoundVariantsNoneFocusedFalse', ''),
+    },
+    {
+      colorScheme: 'dark',
+      focused: true,
+      class: themedClass(
+        'floatingLabelCompoundVariantsDarkFocusedTrue',
+        'text-primary-500 dark:text-primary-500',
+      ),
+    },
+    {
+      colorScheme: 'dark',
+      focused: false,
+      class: themedClass('floatingLabelCompoundVariantsDarkFocusedFalse', ''),
+    },
+    {
+      colorScheme: 'light',
+      focused: true,
+      class: themedClass(
+        'floatingLabelCompoundVariantsLightFocusedTrue',
+        'text-primary-500 dark:text-primary-500',
+      ),
+    },
+    {
+      colorScheme: 'light',
+      focused: false,
+      class: themedClass('floatingLabelCompoundVariantsLightFocusedFalse', ''),
+    },
+    {
+      colorScheme: 'accent',
+      focused: true,
+      class: themedClass(
+        'floatingLabelCompoundVariantsAccentFocusedTrue',
+        'text-primary-500 dark:text-primary-500',
+      ),
+    },
+    {
+      colorScheme: 'accent',
+      focused: false,
+      class: themedClass('floatingLabelCompoundVariantsAccentFocusedFalse', ''),
+    },
+  ],
 })
 
 const floatingLabelText = tv({

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

@@ -96,13 +96,17 @@ const cardVariant = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

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

@@ -268,13 +268,17 @@ const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/Contact/index.vue

@@ -106,13 +106,17 @@ const imageFormat = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/Downloads/index.vue

@@ -176,13 +176,17 @@ const downloadIconContainer = tv({
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

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

@@ -208,13 +208,17 @@ const imageFormat = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })
@@ -222,13 +226,13 @@ const alignmentClassList = computed(() => {
 const buttonAlignment = computed(() => {
   switch (options.value.buttonAlignment) {
     case 'left':
-      return 'justify-start'
+      return themedClass('buttonAlignmentLeftClass', 'justify-start')
     case 'center':
-      return 'justify-center'
+      return themedClass('buttonAlignmentCenterClass', 'justify-center')
     case 'right':
-      return 'justify-end'
+      return themedClass('buttonAlignmentRightClass', 'justify-end')
     default:
-      return 'justify-start'
+      return themedClass('buttonAlignmentDefaultClass', 'justify-start')
   }
 })
 

package/components/Paragraph/Gallery/index.vue

@@ -123,13 +123,17 @@ const {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/HeroImage/index.vue

@@ -79,7 +79,7 @@
                 'mt-6 flex flex-wrap items-center gap-6',
               ),
               { droptarget: isEditing },
-              { 'justify-center':  (alignHorizontal == 'center')}
+              { 'justify-center': alignHorizontal == 'center' },
             )
           "
         />
@@ -115,15 +115,26 @@ const columnClassList = computed(() => {
   const classList = []
 
   if (alignHorizontal.value === 'left') {
-    classList.push('md:col-start-1')
+    classList.push(
+      themedClass('columnClassListAlignLeftClass', 'md:col-start-1'),
+    )
   } else if (alignHorizontal.value === 'right') {
-    classList.push('md:col-start-7')
+    classList.push(
+      themedClass('columnClassListAlignRightClass', 'md:col-start-7'),
+    )
   } else {
-    classList.push('md:col-start-4 text-center')
+    classList.push(
+      themedClass(
+        'columnClassListAlignCenterClass',
+        'md:col-start-4 text-center',
+      ),
+    )
   }
 
   if (options.value.colorMode === 'dark') {
-    classList.push('text-white')
+    classList.push(
+      themedClass('columnClassListColorModeDarkClass', 'text-white'),
+    )
   }
 
   return classList.join(' ')
@@ -133,31 +144,69 @@ const overlayClass = computed(() => {
   const classList = []
 
   if (alignHorizontal.value === 'left') {
-    classList.push('md:bg-gradient-to-l')
+    classList.push(
+      themedClass('overlayClassAlignLeftClass', 'md:bg-gradient-to-l'),
+    )
   } else if (alignHorizontal.value === 'right') {
-    classList.push('md:bg-gradient-to-r')
+    classList.push(
+      themedClass('overlayClassAlignRightClass', 'md:bg-gradient-to-r'),
+    )
   }
 
   if (alignHorizontal.value === 'center') {
     if (options.value.colorMode === 'light') {
       classList.push(
-        'md:bg-[linear-gradient(90deg,rgba(255,255,255,0)_10%,rgba(255,255,255,0.5)_50%,rgba(255,255,255,0)_90%)]',
-        'bg-[rgba(255,255,255,0.3)]',
+        themedClass(
+          'overlayClassAlignCenterColorModeLightGradientClass',
+          'md:bg-[linear-gradient(90deg,rgba(255,255,255,0)_10%,rgba(255,255,255,0.5)_50%,rgba(255,255,255,0)_90%)]',
+        ),
+        themedClass(
+          'overlayClassAlignCenterColorModeLightBackgroundClass',
+          'bg-[rgba(255,255,255,0.3)]',
+        ),
       )
     } else if (options.value.colorMode === 'dark') {
       classList.push(
-        'md:bg-[linear-gradient(90deg,rgba(17,17,17,0)_10%,rgba(17,17,17,0.5)_50%,rgba(17,17,17,0)_90%)]',
-        'bg-[rgba(17,17,17,0.3)]',
+        themedClass(
+          'overlayClassAlignCenterColorModeDarkGradientClass',
+          'md:bg-[linear-gradient(90deg,rgba(17,17,17,0)_10%,rgba(17,17,17,0.5)_50%,rgba(17,17,17,0)_90%)]',
+        ),
+        themedClass(
+          'overlayClassAlignCenterColorModeDarkBackgroundClass',
+          'bg-[rgba(17,17,17,0.3)]',
+        ),
       )
     }
   } else {
-    classList.push('md:bg-transparent md:from-transparent md:from-25%')
+    classList.push(
+      themedClass(
+        'overlayClassAlignSideClass',
+        'md:bg-transparent md:from-transparent md:from-25%',
+      ),
+    )
 
     if (options.value.colorMode === 'light') {
-      classList.push('md:to-[rgba(255,255,255,0.75)]', 'bg-[rgba(255,255,255,0.3)]',
+      classList.push(
+        themedClass(
+          'overlayClassAlignSideColorModeLightGradientClass',
+          'md:to-[rgba(255,255,255,0.75)]',
+        ),
+        themedClass(
+          'overlayClassAlignSideColorModeLightBackgroundClass',
+          'bg-[rgba(255,255,255,0.3)]',
+        ),
       )
     } else if (options.value.colorMode === 'dark') {
-      classList.push('md:to-[rgba(17,17,17,0.75)]', 'bg-[rgba(17,17,17,0.3)]')
+      classList.push(
+        themedClass(
+          'overlayClassAlignSideColorModeDarkGradientClass',
+          'md:to-[rgba(17,17,17,0.75)]',
+        ),
+        themedClass(
+          'overlayClassAlignSideColorModeDarkBackgroundClass',
+          'bg-[rgba(17,17,17,0.3)]',
+        ),
+      )
     }
   }
 
@@ -166,15 +215,15 @@ const overlayClass = computed(() => {
 
 const textShadow = computed(() => {
   if (options.value.textShadow === 'light') {
-    return 'text-shadow-sm'
+    return themedClass('textShadowLightClass', 'text-shadow-sm')
   }
 
   if (options.value.textShadow === 'dark') {
-    return 'text-shadow-md'
+    return themedClass('textShadowDarkClass', 'text-shadow-md')
   }
 
   if (options.value.textShadow === 'darker') {
-    return 'text-shadow-lg'
+    return themedClass('textShadowDarkerClass', 'text-shadow-lg')
   }
 
   return ''
@@ -183,13 +232,19 @@ const textShadow = computed(() => {
 const elementClass = computed(() => {
   const classList = ['size-full object-cover']
   if (options.value.imageAlignment === 'top') {
-    classList.push('object-top')
+    classList.push(
+      themedClass('elementClassImageAlignmentTopClass', 'object-top'),
+    )
   }
   if (options.value.imageAlignment === 'center') {
-    classList.push('object-center')
+    classList.push(
+      themedClass('elementClassImageAlignmentCenterClass', 'object-center'),
+    )
   }
   if (options.value.imageAlignment === 'bottom') {
-    classList.push('object-bottom')
+    classList.push(
+      themedClass('elementClassImageAlignmentBottomClass', 'object-bottom'),
+    )
   }
   return classList.join(' ')
 })

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

@@ -118,13 +118,17 @@ const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

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

@@ -93,13 +93,17 @@ const spacing = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/Media/index.vue

@@ -10,11 +10,14 @@
           v-if="media && media.length > 1"
           :media="media"
           :imageSizes="imageSizes"
-          :imageAspectRatios="imageAspectRatios"
-          :containerClass="themedClass('mediaSliderContainerClass')"
+          :imageFormat="imageFormat"
+          :containerClass="themedClass('mediaSliderContainerClass', 'py-0')"
           :mediaClass="themedClass('mediaSliderMediaClass')"
           :elementClass="
-            themedClass('mediaSliderElementClass', 'block w-full h-auto')
+            themedClass(
+              'mediaSliderElementClass',
+              'block w-full h-auto max-h-dvh object-cover object-center',
+            )
           "
           :figcaptionClass="themedClass('mediaSliderFigcaptionClass')"
           :carouselClass="themedClass('mediaSliderCarouselClass')"
@@ -34,9 +37,14 @@
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
           :imageSizes="imageSizes"
-          :imageAspectRatios="imageAspectRatios"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaMediaClass')"
-          :elementClass="themedClass('mediaElementClass')"
+          :elementClass="
+            themedClass(
+              'mediaElementClass',
+              'block w-full h-auto max-h-dvh object-cover object-center',
+            )
+          "
           :figcaptionClass="themedClass('mediaFigcaptionClass')"
           :showCaption="showCaptions"
         />
@@ -73,12 +81,16 @@ const showCaptions = computed(() => {
   return options.value.showCaptions
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 const rowClassList = computed(() => {
   const classList = ['grid grid-cols-12 gap-6']
   if (options.value.width === 'wide') {
     return classList.join(' ')
   }
-  classList.push('container mx-auto')
+  classList.push(themedClass('rowWidthDefaultClass', 'container mx-auto'))
 
   return classList.join(' ')
 })
@@ -95,23 +107,13 @@ const imageSizes = computed(() => {
   return 'xs:100vw sm:100vw md:50vw lg:640px'
 })
 
-const imageAspectRatios = computed(() => {
-  if (options.value.width === 'wide') {
-    return '3/1'
-  }
-
-  if (options.value.width === 'medium') {
-    return '16/9'
-  }
-
-  return '4/3'
-})
-
 const columnClassList = computed(() => {
   const classList = ['col-span-12']
 
   if (options.value.width === 'narrow') {
-    classList.push('md:col-span-6 md:col-start-4')
+    classList.push(
+      themedClass('columnWidthNarrowClass', 'md:col-span-6 md:col-start-4'),
+    )
   }
 
   return classList.join(' ')

package/components/Paragraph/Table/index.vue

@@ -95,13 +95,17 @@ const colorScheme = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

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

@@ -86,13 +86,17 @@ const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/Teasers/index.vue

@@ -159,13 +159,17 @@ const alignHorizontalFull = computed(() => {
 const alignmentClassList = computed(() => {
   const classList = []
   if (alignHorizontalFull.value == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (alignHorizontalFull.value == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })

package/components/Paragraph/Text/index.vue

@@ -62,11 +62,14 @@ const { options, isEditing } = useAttrs().blokkliData as any
 
 const textWrapperClassList = computed(() => {
   if (options.value.width === 'medium') {
-    return 'col-span-8 col-start-3'
+    return themedClass('widthMediumClass', 'col-span-8 col-start-3')
   } else if (options.value.width === 'narrow') {
-    return 'col-span-8 col-start-3 md:col-span-6 md:col-start-4'
+    return themedClass(
+      'widthNarrowClass',
+      'col-span-8 col-start-3 md:col-span-6 md:col-start-4',
+    )
   }
-  return 'col-span-12'
+  return themedClass('widthWideClass', 'col-span-12')
 })
 
 const textColumns = computed(() => {
@@ -79,13 +82,13 @@ const alignmentClassList = computed(() => {
     options.value.alignHorizontalFull == 'center' &&
     textColumns.value === 'one'
   ) {
-    classList.push('text-center')
+    classList.push(themedClass('alignHorizontalFullCenterClass', 'text-center'))
   }
   if (
     options.value.alignHorizontalFull == 'right' &&
     textColumns.value === 'one'
   ) {
-    classList.push('text-right')
+    classList.push(themedClass('alignHorizontalFullRightClass', 'text-right'))
   }
   return classList.join(' ')
 })

package/components/Paragraph/TextMedia/index.vue

@@ -38,7 +38,7 @@
           v-if="media && media.length"
           :media="media"
           imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
-          :imageAspectRatios="imageAspectRatios"
+          :imageFormat="imageFormat"
           :containerClass="themedClass('containerClass', 'my-0')"
           :mediaClass="themedClass('mediaClass')"
           :elementClass="themedClass('elementClass')"
@@ -63,7 +63,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { ColorScheme, ImageFormat } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
@@ -78,22 +78,28 @@ const textColumnClassList = computed(() => {
   const align = options.value.alignHorizontalReduced
 
   if (width === 'medium') {
-    classList.push('md:col-span-6')
+    classList.push(themedClass('textColumnWidthMediumClass', 'md:col-span-6'))
   } else if (width === 'narrow') {
-    classList.push('md:col-span-5')
+    classList.push(themedClass('textColumnWidthNarrowClass', 'md:col-span-5'))
   } else {
-    classList.push('md:col-span-7')
+    classList.push(themedClass('textColumnWidthWideClass', 'md:col-span-7'))
   }
 
   if (align === 'right') {
-    classList.push('md:order-last')
+    classList.push(themedClass('textColumnAlignRightClass', 'md:order-last'))
 
     if (width === 'medium') {
-      classList.push('md:col-start-7')
+      classList.push(
+        themedClass('textColumnAlignRightWidthMediumClass', 'md:col-start-7'),
+      )
     } else if (width === 'narrow') {
-      classList.push('md:col-start-8')
+      classList.push(
+        themedClass('textColumnAlignRightWidthNarrowClass', 'md:col-start-8'),
+      )
     } else {
-      classList.push('md:col-start-6')
+      classList.push(
+        themedClass('textColumnAlignRightWidthWideClass', 'md:col-start-6'),
+      )
     }
   }
 
@@ -106,43 +112,38 @@ const imageColumnClassList = computed(() => {
   const align = options.value.alignHorizontalReduced
 
   if (width === 'medium') {
-    classList.push('md:col-span-6')
+    classList.push(themedClass('imageColumnWidthMediumClass', 'md:col-span-6'))
   } else if (width === 'narrow') {
-    classList.push('md:col-span-7')
+    classList.push(themedClass('imageColumnWidthNarrowClass', 'md:col-span-7'))
   } else {
-    classList.push('md:col-span-5')
+    classList.push(themedClass('imageColumnWidthWideClass', 'md:col-span-5'))
   }
 
   if (align === 'right') {
-    classList.push('md:pr-6')
+    classList.push(themedClass('imageColumnAlignRightClass', 'md:pr-6'))
   } else {
-    classList.push('md:order-last', 'md:pl-6')
+    classList.push(
+      themedClass('imageColumnAlignLeftClass', 'md:order-last md:pl-6'),
+    )
 
     if (width === 'medium') {
-      classList.push('md:col-start-7')
+      classList.push(
+        themedClass('imageColumnAlignLeftWidthMediumClass', 'md:col-start-7'),
+      )
     } else if (width === 'narrow') {
-      classList.push('md:col-start-6')
+      classList.push(
+        themedClass('imageColumnAlignLeftWidthNarrowClass', 'md:col-start-6'),
+      )
     } else {
-      classList.push('md:col-start-8')
+      classList.push(
+        themedClass('imageColumnAlignLeftWidthWideClass', 'md:col-start-8'),
+      )
     }
   }
 
   return classList.join(' ')
 })
 
-const imageAspectRatios = computed(() => {
-  const width = options.value.textWidth
-
-  switch (width) {
-    case 'narrow':
-      return '2/1'
-    case 'medium':
-      return '16/9'
-    default:
-      return '3/2'
-  }
-})
-
 const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 const colorScheme = computed(() => {
   if (options.value.colorScheme !== undefined) {
@@ -156,5 +157,9 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 provide('colorScheme', colorScheme)
 </script>

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

@@ -12,6 +12,7 @@
     :hasDecorativeLine="false"
     :reverseColumns="reverseColumns"
     :isEditing="isEditing"
+    :imageFormat="imageFormat"
     :containerClass="themedClass('containerClass')"
     :firstColumnClass="themedClass('firstColumnClass')"
     :secondColumnClass="themedClass('secondColumnClass')"
@@ -42,6 +43,10 @@ const reverseColumns = computed(() => {
   return options.value.alignHorizontalReduced === 'right' ? true : false
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>

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

@@ -490,13 +490,17 @@ const carouselDot = tv({
 const alignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
   }
   return classList.join(' ')
 })
@@ -504,10 +508,14 @@ const alignmentClassList = computed(() => {
 const buttonAlignmentClassList = computed(() => {
   const classList = []
   if (options.value.alignHorizontalFull == 'center') {
-    classList.push('justify-center')
+    classList.push(
+      themedClass('buttonAlignHorizontalFullCenterClass', 'justify-center'),
+    )
   }
   if (options.value.alignHorizontalFull == 'right') {
-    classList.push('justify-end')
+    classList.push(
+      themedClass('buttonAlignHorizontalFullRightClass', 'justify-end'),
+    )
   }
 
   return classList.join(' ')

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

@@ -31,17 +31,17 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcms2ColTextElementFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const themedClass = useTheme('ParagraphTwoColumnTextElement')
 
 const twoColumnTextElementClassList = computed(() => {
   const classList = []
   if (options.value.spacingBottom === 'small') {
-    classList.push('mb-16')
+    classList.push(themedClass('spacingBottomSmallClass', 'mb-16'))
   }
   if (options.value.spacingBottom === 'large') {
-    classList.push('mb-32')
+    classList.push(themedClass('spacingBottomLargeClass', 'mb-32'))
   }
   return classList.join(' ')
 })

package/components/Paragraph/iFrame/index.vue

@@ -9,7 +9,7 @@
         v-if="pretitle || title"
         :class="
           cn(
-            themedClass('firstColumnClass', titleWrapperClassList),
+            themedClass('firstColumnClass', widthClassList),
             alignmentClassList,
           )
         "
@@ -26,7 +26,7 @@
       <div
         :class="
           cn(
-            themedClass('secondColumnClass', textWrapperClassList),
+            themedClass('secondColumnClass', widthClassList),
             alignmentClassList,
           )
         "
@@ -66,46 +66,26 @@ const themedClass = useTheme('ParagraphiFrame')
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const titleWrapperClassList = computed(() => {
+const widthClassList = computed(() => {
   if (options.value.width === 'medium') {
-    return ['col-span-8', 'col-start-3'].join(' ')
+    return themedClass('widthMediumClass', 'col-span-8 col-start-3')
   } else if (options.value.width === 'narrow') {
-    return [
-      'col-span-8',
-      'col-start-3',
-      'md:col-span-6',
-      'md:col-start-4',
-    ].join(' ')
+    return themedClass(
+      'widthNarrowClass',
+      'col-span-8 col-start-3 md:col-span-6 md:col-start-4',
+    )
   }
-  return ['col-span-9'].join(' ')
-})
-
-const textWrapperClassList = computed(() => {
-  if (options.value.width === 'medium') {
-    return ['col-span-8', 'col-start-3'].join(' ')
-  } else if (options.value.width === 'narrow') {
-    return [
-      'col-span-8',
-      'col-start-3',
-      'md:col-span-6',
-      'md:col-start-4',
-    ].join(' ')
-  }
-  return ['col-span-12'].join(' ')
+  return themedClass('widthWideClass', 'col-span-12')
 })
 
 const alignmentClassList = computed(() => {
-  const classList = []
-  if (options.value.alignHorizontalFull == 'center') {
-    classList.push('text-center')
-    classList.push('md:col-span-8')
-    classList.push('md:col-start-3')
+  if (options.value.alignHorizontalFull === 'center') {
+    return themedClass('alignHorizontalFullCenterClass', 'text-center')
   }
-  if (options.value.alignHorizontalFull == 'right') {
-    classList.push('text-right')
-    classList.push('md:col-start-4')
+  if (options.value.alignHorizontalFull === 'right') {
+    return themedClass('alignHorizontalFullRightClass', 'text-right')
   }
-  return classList.join(' ')
+  return themedClass('alignHorizontalFullLeftClass', 'text-left')
 })
 
 const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')

package/config/svgIconSprite.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfigProperty<'svgIconSprite'>(() => {
       default: {
         importPatterns: [
           join(currentLayerDir, './assets/symbols/**/*.svg'),
-          'assets/symbols/**/*.svg',
+          'app/assets/symbols/**/*.svg',
         ]
       },
     },

package/package.json

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

package/patches/@blokkli+editor+2.0.0-alpha.13.patch

@@ -1,25 +0,0 @@
-diff --git a/node_modules/@blokkli/editor/dist/module.mjs b/node_modules/@blokkli/editor/dist/module.mjs
-index 0ff0d3b..17da062 100644
---- a/node_modules/@blokkli/editor/dist/module.mjs
-+++ b/node_modules/@blokkli/editor/dist/module.mjs
-@@ -470,7 +470,19 @@ class IconCollector extends Collector {
-       this.helper.paths.srcDir,
-       "**/icon-blokkli-*.svg"
-     );
--    const allFiles = [...filesModule, ...filesApp];
-+    // Also scan all Nuxt layer directories for icon SVGs.
-+    const layerFiles = [];
-+    const layers = this.helper.nuxt.options._layers || [];
-+    for (const layer of layers) {
-+      if (layer.config && layer.config.srcDir && layer.config.srcDir !== this.helper.paths.srcDir) {
-+        const files = await resolveFiles(
-+          layer.config.srcDir,
-+          "**/icon-blokkli-*.svg"
-+        );
-+        layerFiles.push(...files);
-+      }
-+    }
-+    const allFiles = [...filesModule, ...filesApp, ...layerFiles];
-     await Promise.all(allFiles.map((filePath) => this.addFile(filePath)));
-   }
-   runHooks() {