@iqual/nuxt-icms 1.4.2 → 1.4.4

package/assets/css/fe-fixes.css

@@ -5,6 +5,22 @@
   mask-image: url(/modules/contrib/icms_admin/img/iqual-logo-q.svg) !important;
 }
 
+/**
+ *
+ * BLÖKKLI EDIT PAGE BUTTON
+ *
+ **/
+body {
+  position: relative;
+
+  .bk .bk-edit-indicator {
+    transform: translate(0) !important;
+    position: fixed;
+    top: 275px;
+    z-index: 1000;
+  }
+}
+
 /**
  *
  * BLÖKKLI SIDEBAR
@@ -39,7 +55,6 @@
 button.bk-list-item[data-item-bundle^='icms_layout_'] {
   /* Adds a margin between layout and a separator */
   &:not(.bk-is-disabled):last-of-type {
-
     .bk-add-list.bk-is-vertical & {
       margin-block-end: 30px;
       /* box-shadow:

package/assets/css/typography.css

@@ -53,7 +53,7 @@
     }
 
     a {
-      @apply underline;
+      @apply underline hover:no-underline;
     }
 
     p {

package/components/DesignSystem/Atoms/Button.vue

@@ -27,7 +27,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
-const themedClass = useTheme('DesignSystemAtomsAtoms')
+const themedClass = useTheme('DesignSystemAtomsButton')
 
 const props = defineProps<{
   label?: string

package/components/DesignSystem/Molecules/Card.vue

@@ -32,7 +32,7 @@
         :class="
           themedClass(
             'contentContainerClass',
-            '@xl:w-1/2 @xl:shrink-0 @xl:py-6 @xl:px-8 @7xl:p-16 w-full p-6 pt-0',
+            '@xl:w-1/2 @xl:shrink-0 @xl:py-6 @xl:px-8 @7xl:p-16 w-full p-6 pb-4 pt-0',
           )
         "
       >
@@ -78,7 +78,7 @@ defineProps<{
 const card = tv({
   base: themedClass(
     'cardBase',
-    'flex gap-6 flex-col @xl:flex-row @xl:gap-0 @xl:p-0',
+    'flex h-full gap-6 flex-col @xl:flex-row @xl:gap-0 @xl:p-0',
   ),
   variants: {
     colorScheme: {

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -19,6 +19,8 @@
           <Media
             v-if="element"
             :media="element"
+            :imageSizes="imageSizes"
+            :imageAspectRatios="imageAspectRatios"
             :showCaption="showCaption"
             :mediaClass="themedClass('mediaClass')"
             :figcaptionClass="

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -43,7 +43,8 @@
         :media="media"
         colorScheme="none"
         :containerClass="themedClass('mediaContainerClass', 'my-0')"
-        imageSizes="xs:750px sm:750px md:750px lg:750px"
+        imageSizes="xs:750px"
+        imageAspectRatios="3/2"
         :mediaClass="themedClass('mediaClass', 'my-0')"
         :figcaptionClass="themedClass('figcaptionClass')"
         :elementClass="themedClass('elementClass')"

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

@@ -5,11 +5,11 @@
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow
-      v-if="pretitle || title"
+      v-if="pretitle || title || subtitle || text"
       :class="themedClass('rowClass')"
     >
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"

package/components/Paragraph/Contact/index.vue

@@ -6,7 +6,8 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        v-if="pretitle || title || subtitle"
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -21,6 +22,7 @@
         />
       </div>
       <div
+        v-if="text || media?.length"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
       >
         <DesignSystemOrganismsContentBlock
@@ -48,14 +50,16 @@
         :class="
           themedClass(
             'thirdColumnClass',
-            'col-span-12 md:col-span-6 md:col-start-7',
+            text || media?.length
+              ? 'col-span-12 md:col-span-6 md:col-start-7'
+              : 'col-span-12',
           )
         "
       >
         <DrupalWebform
           v-if="contactWebform?.id"
           :form-id="contactWebform?.id"
-          :wrapperClass="themedClass('wrapperClass', 'mt-4 md:mt-0')"
+          :wrapperClass="themedClass('wrapperClass')"
           :formWrapperClass="themedClass('formWrapperClass')"
           :messagesClass="themedClass('messagesClass')"
           :elementWrapperClass="themedClass('elementWrapperClass')"

package/components/Paragraph/Downloads/index.vue

@@ -6,7 +6,8 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        v-if="pretitle || title"
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -19,6 +20,7 @@
         />
       </div>
       <div
+        v-if="text || media?.length"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
       >
         <DesignSystemOrganismsContentBlock
@@ -34,7 +36,9 @@
         :class="
           themedClass(
             'thirdColumnClass',
-            'col-span-12 md:order-last md:col-span-7 md:col-start-7',
+            text || media?.length
+              ? 'col-span-12 md:order-last md:col-span-7 md:col-start-7'
+              : 'col-span-12',
           )
         "
       >
@@ -84,7 +88,10 @@ const spacing = computed(() => {
 })
 
 const download = tv({
-  base: themedClass('downloadBase', 'flex items-center gap-4 mb-4 py-4 px-5'),
+  base: themedClass(
+    'downloadBase',
+    'flex items-center gap-4 not-last:mb-4 py-4 px-5',
+  ),
   variants: {
     colorScheme: {
       none: themedClass('downloadVariantsColorSchemeNone', 'bg-gray-50'),

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

@@ -6,7 +6,8 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        v-if="pretitle || title || subtitle"
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -21,6 +22,7 @@
         />
       </div>
       <div
+        v-if="text || media?.length || buttons?.length"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
       >
         <DesignSystemOrganismsContentBlock
@@ -38,7 +40,9 @@
             cn(
               themedClass(
                 'buttonsContainerClass',
-                'mt-6 flex flex-wrap items-center gap-6',
+                pretitle || title || subtitle || text || media?.length
+                  ? 'mt-6 flex flex-wrap items-center gap-6'
+                  : 'flex flex-wrap items-center gap-6',
               ),
               buttonAlignment,
               { droptarget: isEditing },
@@ -50,7 +54,9 @@
         :class="
           themedClass(
             'thirdColumnClass',
-            'relative col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0',
+            text || media?.length || buttons?.length
+              ? 'col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0'
+              : 'col-span-12',
           )
         "
       >

package/components/Paragraph/FlipTeasers/index.vue

@@ -6,8 +6,9 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
       <div
+        v-if="pretitle || title"
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -38,7 +39,9 @@
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow
-      :class="themedClass('secondRowClass', 'mt-10 md:mt-20')"
+      :class="
+        themedClass('secondRowClass', pretitle || title ? 'mt-10 md:mt-20' : '')
+      "
     >
       <DesignSystemOrganismsFlipTeaser
         v-for="flipTeaser in flipTeasers"

package/components/Paragraph/Gallery/index.vue

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

package/components/Paragraph/HeroImage/index.vue

@@ -33,7 +33,10 @@
         videoLoop
         :mediaClass="themedClass('mediaClass')"
         :elementClass="
-          themedClass('elementClass', 'size-full object-cover object-center')
+          cn(
+            themedClass('elementClass', 'size-full object-cover'),
+            elementClass,
+          )
         "
         :figcaptionClass="themedClass('figcaptionClass')"
       />

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

@@ -6,7 +6,8 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        v-if="pretitle || title || subtitle"
+        :class="themedClass('firstColumnClass', 'col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -21,6 +22,7 @@
         />
       </div>
       <div
+        v-if="text || media?.length || buttons?.length"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
       >
         <DesignSystemOrganismsContentBlock
@@ -39,7 +41,9 @@
             cn(
               themedClass(
                 'buttonsContainerClass',
-                'mt-6 flex flex-wrap items-center gap-6',
+                text || media?.length
+                  ? 'mt-6 flex flex-wrap items-center gap-6'
+                  : 'flex flex-wrap items-center gap-6',
               ),
               buttonAlignment,
               { droptarget: isEditing },
@@ -53,7 +57,9 @@
         :class="[
           themedClass(
             'iconTextElementsContainerClass',
-            'col-span-12 mt-4 flex flex-col gap-6 md:col-span-6 md:col-start-7 md:mt-0',
+            text || media?.length || buttons?.length
+              ? 'col-span-12 mt-4 flex flex-col gap-6 md:col-span-6 md:col-start-7 md:mt-0'
+              : 'col-span-12 flex flex-col gap-6',
           ),
           { droptarget: isEditing },
         ]"

package/components/Paragraph/Introduction/index.vue

@@ -29,7 +29,7 @@
             :class="
               themedClass(
                 'introductionRowSecondColumnClass',
-                'col-span-12 flex flex-col p-8 pt-0 md:col-span-7 md:p-12 md:pl-5 lg:p-16 lg:pl-12',
+                'col-span-12 flex flex-col md:col-span-7 md:pl-5 lg:pl-12',
               )
             "
           >

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

@@ -11,7 +11,7 @@
             :class="
               themedClass(
                 'partnershipsRowFirstColumnClass',
-                'col-span-12 p-8 pb-0 md:col-span-6 md:p-12 md:pr-0 lg:p-16 lg:pr-0',
+                'col-span-12 md:col-span-6',
               )
             "
           >
@@ -50,46 +50,35 @@
             <Media
               v-if="image"
               :media="image"
-              imageAspectRatios="1/1"
-              imageSizes="xs:100vw sm:100vw md:25vw lg:320px"
+              imageAspectRatios="xs:16/9 md:1/1 lg:16/9"
+              imageSizes="xs:100vw sm:100vw md:50vw lg:600px"
               :mediaClass="themedClass('mediaClass')"
               :elementClass="themedClass('elementClass')"
               :figcaptionClass="themedClass('figcaptionClass')"
             />
-          </div>
-        </DesignSystemAtomsGridRow>
 
-        <DesignSystemAtomsGridRow
-          :class="partnershipsOffsetRow({ colorScheme })"
-        >
-          <div
-            :class="
-              themedClass(
-                'partnershipsOffsetRowColumnClass',
-                'col-span-1 p-5 lg:p-8',
-              )
-            "
-          >
-            <DesignSystemOrganismsContentBlock
-              :pretitle="overlayTitle"
-              :pretitleClass="themedClass('overlayTitle')"
-              :text="overlayText"
-              :textClass="themedClass('overlayText')"
-              :colorScheme="colorScheme"
-            />
+            <div :class="partnershipsOffsetRow({ colorScheme })">
+              <DesignSystemOrganismsContentBlock
+                :pretitle="overlayTitle"
+                :pretitleClass="themedClass('overlayTitle')"
+                :text="overlayText"
+                :textClass="themedClass('overlayText')"
+                :colorScheme="colorScheme"
+              />
 
-            <BlokkliField
-              v-if="partnershipElements"
-              name="field_icms_partnership_elements"
-              :list="partnershipElements"
-              :class="[
-                themedClass(
-                  'partnershipsContainerClass',
-                  'mt-8 flex flex-wrap xl:flex-nowrap',
-                ),
-                { droptarget: isEditing },
-              ]"
-            />
+              <BlokkliField
+                v-if="partnershipElements"
+                name="field_icms_partnership_elements"
+                :list="partnershipElements"
+                :class="[
+                  themedClass(
+                    'partnershipsContainerClass',
+                    'mt-8 flex flex-wrap xl:flex-nowrap',
+                  ),
+                  { droptarget: isEditing },
+                ]"
+              />
+            </div>
           </div>
         </DesignSystemAtomsGridRow>
       </div>
@@ -135,7 +124,7 @@ const partnershipsRow = tv({
 const partnershipsOffsetRow = tv({
   base: themedClass(
     'partnershipsOffsetRowBase',
-    'p-0 max-w-[75%] md:max-w-[50%] md:-mr-12 -mt-40 sm:-mt-52 relative z-10 grid-cols-1',
+    'relative max-w-[75%] md:max-w-none mx-auto -mt-20 lg:-mt-8 z-10 p-5 lg:p-8 md:-mx-8 z-10',
   ),
   variants: {
     colorScheme: {

package/components/Paragraph/Table/index.vue

@@ -6,8 +6,9 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
       <div
+        v-if="pretitle || title || subtitle"
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -22,6 +23,7 @@
         />
       </div>
       <div
+        v-if="text"
         :class="
           themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
         "
@@ -33,7 +35,12 @@
       </div>
     </DesignSystemAtomsGridRow>
     <DesignSystemAtomsGridRow
-      :class="themedClass('secondRowClass', 'mt-10 md:mt-20')"
+      :class="
+        themedClass(
+          'secondRowClass',
+          pretitle || title || subtitle || text ? 'mt-10 md:mt-20' : '',
+        )
+      "
     >
       <div :class="themedClass('secondRowColumnClass', 'relative col-span-12')">
         <DesignSystemMoleculesTable

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

@@ -5,7 +5,10 @@
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
-      <div :class="themedClass('firstRowColumnClass', 'col-span-12')">
+      <div
+        v-if="title"
+        :class="themedClass('firstRowColumnClass', 'col-span-12')"
+      >
         <DesignSystemOrganismsContentBlock
           :title="title"
           :titleWeight="titleWeight"
@@ -148,7 +151,7 @@ const { isMobile } = useIsMobile()
 const tabList = tv({
   base: themedClass(
     'tabListBase',
-    'rounded-none flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent border-b',
+    'rounded-none flex flex-col items-stretch justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent border-b',
   ),
   variants: {
     colorScheme: {
@@ -166,7 +169,7 @@ const tabList = tv({
 const tabTrigger = tv({
   base: themedClass(
     'tabTriggerBase',
-    'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none data-[state=active]:shadow-none py-4 text-base transition-all disabled:pointer-events-none lg:w-fit not-last:border-r',
+    'min-w-0 inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none data-[state=active]:shadow-none py-4 text-base transition-all disabled:pointer-events-none lg:w-fit not-last:border-r [&>span]:overflow-visible [&>span]:text-ellipsis-none [&>span]:whitespace-normal',
   ),
   variants: {
     colorScheme: {

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

@@ -6,7 +6,8 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+        v-if="pretitle || title || subtitle"
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -21,6 +22,7 @@
         />
       </div>
       <div
+        v-if="text"
         :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
       >
         <DesignSystemOrganismsContentBlock
@@ -39,7 +41,9 @@
           'grid-3-col',
           themedClass(
             'teamElementsContainerClass',
-            'container mx-auto mt-10 grid gap-6 md:mt-20 md:gap-12',
+            pretitle || title || subtitle || text
+              ? 'container mx-auto mt-10 grid gap-6 md:mt-20 md:gap-12'
+              : 'container mx-auto grid gap-6 md:gap-12',
           ),
           { droptarget: isEditing },
         )

package/components/Paragraph/Teasers/index.vue

@@ -6,8 +6,9 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
       <div
+        v-if="pretitle || title"
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
         "
       >
         <DesignSystemOrganismsContentBlock
@@ -21,6 +22,7 @@
         />
       </div>
       <div
+        v-if="subtitle || text"
         :class="
           themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
         "
@@ -39,7 +41,12 @@
 
     <DesignSystemAtomsGridRow
       :class="
-        themedClass('secondRowClass', 'grid-4-col mt-10 gap-y-12 md:mt-20')
+        themedClass(
+          'secondRowClass',
+          pretitle || title || subtitle || text
+            ? 'grid-4-col mt-10 gap-y-12 md:mt-20'
+            : 'grid-4-col gap-y-12',
+        )
       "
     >
       <component

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

@@ -6,6 +6,7 @@
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
       <div
+        v-if="pretitle || title || subtitle"
         :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-4')"
       >
         <DesignSystemOrganismsContentBlock
@@ -24,7 +25,9 @@
         :class="
           themedClass(
             'secondColumnClass',
-            'col-span-12 md:col-span-7 md:col-start-6',
+            pretitle || title || subtitle
+              ? 'col-span-12 md:col-span-7 md:col-start-6'
+              : 'col-span-12',
           )
         "
       >

package/components/Paragraph/Text/index.vue

@@ -27,7 +27,9 @@
             cn(
               themedClass(
                 'buttonsContainerClass',
-                'mt-8 flex flex-wrap items-center gap-6',
+                pretitle || title || subtitle || text
+                  ? 'mt-8 flex flex-wrap items-center gap-6'
+                  : 'flex flex-wrap items-center gap-6',
               ),
               buttonAlignment,
               { droptarget: isEditing },

package/components/Paragraph/TextMedia/index.vue

@@ -39,6 +39,7 @@
           v-if="media && media.length"
           :media="media"
           imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
+          :imageAspectRatios="imageAspectRatios"
           :containerClass="themedClass('containerClass', 'my-0')"
           :mediaClass="themedClass('mediaClass')"
           :elementClass="themedClass('elementClass')"
@@ -138,6 +139,19 @@ const imageColumnClassList = computed(() => {
   return classList.join(' ')
 })
 
+const imageAspectRatios = computed(() => {
+  const width = options.value.textWidth
+
+  switch (width) {
+    case 'narrow':
+      return '3/2'
+    case 'medium':
+      return '4/3'
+    default:
+      return '1/1'
+  }
+})
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

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

@@ -11,7 +11,7 @@
     >
       <div
         :class="
-          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-9')
         "
       >
         <DesignSystemOrganismsContentBlock

package/components/Paragraph/iFrame/index.vue

@@ -5,7 +5,10 @@
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
-      <div :class="themedClass('firstColumnClass', titleWrapperClassList)">
+      <div
+        v-if="pretitle || title"
+        :class="themedClass('firstColumnClass', titleWrapperClassList)"
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :pretitleClass="themedClass('pretitleClass')"
@@ -17,6 +20,7 @@
       </div>
       <div :class="themedClass('secondColumnClass', textWrapperClassList)">
         <DesignSystemOrganismsContentBlock
+          v-if="text"
           :text="text"
           :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
@@ -25,7 +29,12 @@
         <div
           v-if="embed"
           v-html="embed"
-          :class="themedClass('emberContainer', 'embed-wrapper mt-10')"
+          :class="
+            themedClass(
+              'embedContainer',
+              text ? 'embed-wrapper mt-10' : 'embed-wrapper',
+            )
+          "
           :style="{ '--iframe-height': `${props.height || 600}px` }"
         />
       </div>
@@ -54,7 +63,7 @@ const titleWrapperClassList = computed(() => {
       'md:col-start-4',
     ].join(' ')
   }
-  return ['col-span-12'].join(' ')
+  return ['col-span-9'].join(' ')
 })
 
 const textWrapperClassList = computed(() => {
@@ -68,7 +77,7 @@ const textWrapperClassList = computed(() => {
       'md:col-start-4',
     ].join(' ')
   }
-  return ['col-span-9'].join(' ')
+  return ['col-span-12'].join(' ')
 })
 
 const colorScheme = computed(() => {

package/components/Section/Header/DesktopMainMenu.vue

@@ -60,7 +60,7 @@
             :id="submenuId(item)"
             :class="
               themedClass(
-                'listClass',
+                'submenulistClass',
                 'absolute left-0 top-full w-fit min-w-48 border border-gray-100 bg-white',
               )
             "

package/components/Section/Header/LanguageDropdown.vue

@@ -55,7 +55,7 @@
           :class="
             themedClass(
               'langDropdownContainerClass',
-              'absolute left-0 top-full -mt-[1px]',
+              'absolute left-0 top-full z-10 -mt-[1px]',
             )
           "
         >

package/components/Section/Header/index.vue

@@ -20,7 +20,7 @@
         )
       "
     >
-      <div ref="metaContainer">
+      <div ref="metaContainer" :class="themedClass('metaRefContainerClass')">
         <DesignSystemAtomsGridRow
           :class="
             themedClass(

package/nuxt.config.ts

@@ -480,7 +480,7 @@ export default defineNuxtConfig({
           none: { class: 'bg-white', label: 'None' },
           light: { class: 'bg-gray-200', label: 'Light' },
           dark: { class: 'bg-gray-500', label: 'Dark' },
-          darker: { class: 'bg-gray-900', label: 'Darker' },
+          darker: { class: 'bg-gray-800', label: 'Darker' },
         },
       },
       colorMode: {
@@ -489,7 +489,7 @@ export default defineNuxtConfig({
         default: 'none',
         displayAs: 'colors',
         options: {
-          none: { class: 'bg-grey-200', label: 'None' },
+          none: { class: 'bg-gray-200', label: 'None' },
           dark: { class: 'bg-black', label: 'Dark' },
           light: { class: 'bg-white', label: 'Light' },
         },

package/package.json

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

package/tailwind.config.ts

@@ -183,6 +183,8 @@ const config: Config = {
       },
     },
   },
+  // Added as part of https://support-iqual.atlassian.net/browse/ICMS-312
+  safelist: [{ pattern: /bg-gray-\d+/ }],
   future: {
     hoverOnlyWhenSupported: true,
   },