@iqual/nuxt-icms 1.4.5 → 1.4.6

package/assets/css/components/container.css

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

package/components/DesignSystem/Atoms/Button.vue

@@ -47,7 +47,7 @@ const props = defineProps<{
 const button = tv({
   base: themedClass(
     'buttonBase',
-    'cursor-pointer font-medium py-3 px-10 duration-200 ease-in-out block w-full md:w-fit',
+    'cursor-pointer font-medium py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
   ),
   variants: {
     colorScheme: {

package/components/DesignSystem/Atoms/Container.vue

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

package/components/DesignSystem/Molecules/Card.vue

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

package/components/DesignSystem/Molecules/Partnership.vue

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

package/components/DesignSystem/Molecules/Table.vue

@@ -9,7 +9,7 @@
       "
     >
       <thead>
-        <tr>
+        <tr :class="themedClass('tableHeaderRowClass')">
           <th
             v-for="(header, index) in tableHeaders"
             :key="index"

package/components/DesignSystem/Organisms/ContentBlock.vue

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

package/components/DesignSystem/Organisms/TeaserCard.vue

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

package/components/DesignSystem/Organisms/TimelineElement.vue

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

package/components/Drupal/Webform/index.vue

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

package/components/Drupal/Webform/query.graphql

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

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

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

package/components/Paragraph/Contact/index.vue

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

package/components/Paragraph/Introduction/index.vue

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

package/components/Section/Header/DesktopMainMenu.vue

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

package/components/Section/Header/DesktopMainMenuDropdown.vue

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

package/components/Section/Header/LanguageDropdown.vue

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

package/components/Section/Header/LanguageLinks.vue

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

package/components/Section/Header/Logo.vue

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

package/components/Section/Header/MenuIcon.vue

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

package/components/Section/Header/MetaMenu.vue

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

package/components/Section/Header/MobileMainMenuItem.vue

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

package/components/Section/Header/index.vue

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

package/composables/useIsHomepage.ts

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

package/composables/useNavigationOffset.ts

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

package/package.json

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

package/tailwind.config.ts

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