@iqual/nuxt-icms 1.5.7 → 1.5.9

package/assets/css/components/ck-content.css

@@ -1,6 +1,24 @@
 .ck-content {
   @apply break-words;
 
+  h1:not(:first-of-type),
+  .h1:not(:first-of-type),
+  h2:not(:first-of-type),
+  .h2:not(:first-of-type),
+  h3:not(:first-of-type),
+  .h3:not(:first-of-type),
+  h4:not(:first-of-type),
+  .h4:not(:first-of-type) {
+    @apply mt-4;
+  }
+
+  h5:not(:first-of-type),
+  .h5:not(:first-of-type),
+  h6:not(:first-of-type),
+  .h6:not(:first-of-type) {
+    @apply mt-2;
+  }
+
   ol,
   ul {
     @apply mb-6;
@@ -36,4 +54,3 @@
     @apply text-sm;
   }
 }
-

package/components/DesignSystem/Atoms/Button.vue

@@ -6,11 +6,14 @@
     :title="title"
     :target="targetBlank ? '_blank' : '_self'"
     :ui="{
-      base: button({
-        colorScheme: colorScheme,
-        style: buttonStyle,
-      }),
-      label: themedClass('labelClass', 'font-medium'),
+      base: cn(
+        button({
+          colorScheme: colorScheme,
+          style: buttonStyle,
+        }),
+        buttonClass,
+      ),
+      label: cn(themedClass('labelClass', 'font-medium'), labelClass),
     }"
   />
 </template>
@@ -18,6 +21,7 @@
 <script lang="ts" setup>
 import type { ColorScheme, ButtonStyle } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemAtomsButton')
@@ -51,7 +55,7 @@ const linkComplete = computed(() => {
 const button = tv({
   base: themedClass(
     'buttonClass',
-    'rounded-none cursor-pointer py-3 px-10 block w-full md:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
+    'rounded-none cursor-pointer py-3 px-10 block w-full sm:w-fit motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out',
   ),
   variants: {
     colorScheme: {
@@ -65,7 +69,7 @@ const button = tv({
       focus: themedClass('buttonVariantsStyleFocus', 'border text-center'),
       minimal: themedClass(
         'buttonVariantsStyleMinimal',
-        'bg-transparent w-fit p-0 underline hover:bg-transparent',
+        'bg-transparent w-fit p-0 underline hover:bg-transparent active:bg-transparent',
       ),
     },
   },
@@ -75,7 +79,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsNoneNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
       ),
     },
     {
@@ -83,7 +87,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',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -91,7 +95,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsNoneMinimal',
-        'text-primary-500 hover:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950',
       ),
     },
     {
@@ -99,7 +103,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',
+        'bg-transparent text-gray-200 border-gray-200 hover:bg-gray-200 hover:text-gray-950 active:bg-gray-200 active:text-gray-950',
       ),
     },
     {
@@ -107,7 +111,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',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -115,7 +119,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsDarkMinimal',
-        'text-gray-200 hover:text-primary-500',
+        'text-gray-200 hover:text-primary-500 active:text-primary-500',
       ),
     },
     {
@@ -123,7 +127,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsLightNormal',
-        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white',
+        'bg-transparent text-primary-500 border-primary-500 hover:bg-primary-500 hover:text-white active:bg-primary-500 active:text-white',
       ),
     },
     {
@@ -131,7 +135,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',
+        'bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-600 active:border-primary-600',
       ),
     },
     {
@@ -139,7 +143,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsLightMinimal',
-        'text-primary-500 hover:text-gray-950',
+        'text-primary-500 hover:text-gray-950 active:text-gray-950',
       ),
     },
     {
@@ -147,7 +151,7 @@ const button = tv({
       style: 'normal',
       class: themedClass(
         'buttonCompoundVariantsAccentNormal',
-        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950',
+        'bg-transparent text-white border-white hover:bg-white hover:text-gray-950 active:bg-white active:text-gray-950',
       ),
     },
     {
@@ -155,7 +159,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',
+        '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',
       ),
     },
     {
@@ -163,7 +167,7 @@ const button = tv({
       style: 'minimal',
       class: themedClass(
         'buttonCompoundVariantsAccentMinimal',
-        'text-white hover:text-gray-950',
+        'text-white hover:text-gray-950 active:text-gray-950',
       ),
     },
   ],

package/components/DesignSystem/Organisms/SpotlightCard.vue

@@ -25,7 +25,7 @@
         :class="
           themedClass(
             'contentContainerClass',
-            'card-grid-item z-3 flex flex-col p-6 lg:p-8',
+            'card-grid-item z-3 flex flex-col justify-between gap-8 p-6 lg:p-8',
           )
         "
       >
@@ -42,6 +42,7 @@
         </div>
         <slot name="content">
           <DesignSystemOrganismsContentBlock
+            class="mt-auto"
             :pretitle="pretitle"
             :pretitleClass="
               themedClass(

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -7,7 +7,7 @@
           :media="image"
           imageSizes="xs:100vw sm:100vw md:420px lg:420px"
           imageAspectRatios="16/9"
-          :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
+          :mediaClass="themedClass('mediaClass', 'w-full')"
           :figcaptionClass="themedClass('figcaptionClass')"
           :elementClass="themedClass('elementClass', 'w-full')"
         />
@@ -17,7 +17,7 @@
         :class="
           themedClass(
             'textContainerClass',
-            'flex h-full flex-col @xl:w-1/2 @xl:p-0 @7xl:p-12',
+            'flex h-full flex-col @xl:max-w-1/2 @xl:basis-1/2 @xl:p-0 @7xl:p-12',
           )
         "
       >
@@ -131,15 +131,21 @@ const teaserCard = tv({
 })
 
 const mediaContainer = tv({
-  base: themedClass('mediaContainerBase', 'shrink-0 aspect-video'),
+  base: themedClass(
+    'mediaContainerBase',
+    'w-full aspect-video @xl:basis-1/2 @xl:max-w-1/2',
+  ),
   variants: {
     colorScheme: {
-      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-gray-50'),
-      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-900'),
-      light: themedClass('mediaContainerVariantsColorSchemeLight', 'bg-white'),
+      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-950'),
+      light: themedClass(
+        'mediaContainerVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
       accent: themedClass(
         'mediaContainerVariantsColorSchemeAccent',
-        'bg-primary-700',
+        'bg-primary-600',
       ),
     },
   },

package/components/Drupal/Webform/index.vue

@@ -84,7 +84,7 @@ const props = withDefaults(defineProps<{
   colorScheme?: ColorScheme
   floatingLabels?: boolean
 }>(), {
-  floatingLabels: true,
+  floatingLabels: false,
 })
 
 // Init a state object that will hold

package/components/Form/CheckboxInput.vue

@@ -27,19 +27,19 @@ const checkboxBase = tv({
     colorScheme: {
       none: themedClass(
         'checkboxBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'checkboxBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'checkboxBaseVariantsColorSchemeLight',
-        'bg-white ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'checkboxBaseVariantsColorSchemeAccent',
-        'bg-white ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },

package/components/Form/CheckboxInputs.vue

@@ -75,19 +75,19 @@ const checkboxBase = tv({
     colorScheme: {
       none: themedClass(
         'checkboxBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'checkboxBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'checkboxBaseVariantsColorSchemeLight',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'checkboxBaseVariantsColorSchemeAccent',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },
@@ -143,6 +143,7 @@ const checkboxDescription = tv({
     },
   },
 })
+
 const checkboxIndicator = tv({
   base: themedClass('checkboxIndicatorBase'),
   variants: {
@@ -175,8 +176,10 @@ const checkboxIndicator = tv({
     :required="Boolean(formElement.metadata.required)"
     :description="cleanDescription"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <UCheckboxGroup

package/components/Form/FileInput.vue

@@ -278,8 +278,10 @@ const fileUploadIcon = tv({
     :required="formElement.metadata.required"
     :description="floatingLabels ? undefined : formElement.metadata.description"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <div :class="themedClass('fileUploadWrapper', 'relative')">
@@ -296,18 +298,14 @@ const fileUploadIcon = tv({
           fileSize: fileUploadFileSize({ colorScheme }),
         }"
       >
-        <template
-          v-if="!floatingLabels"
-          #description
-        >
+        <template v-if="!floatingLabels" #description>
           <span v-html="formElement.metadata.description" />
         </template>
       </UFileUpload>
-      <label
-        v-if="floatingLabels"
-        :class="floatingLabel({ colorScheme })"
-      >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      <label v-if="floatingLabels" :class="floatingLabel({ colorScheme })">
+        <span :class="floatingLabelText({ colorScheme })">{{
+          formElement.metadata.title
+        }}</span>
       </label>
     </div>
     <div

package/components/Form/RadioButtonsInput.vue

@@ -75,19 +75,19 @@ const radioBase = tv({
     colorScheme: {
       none: themedClass(
         'radioBaseVariantsColorSchemeNone',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       dark: themedClass(
         'radioBaseVariantsColorSchemeDark',
-        'ring-gray-700 dark:ring-gray-700',
+        'bg-gray-800 dark:bg-gray-800 ring-gray-700 dark:ring-gray-700',
       ),
       light: themedClass(
         'radioBaseVariantsColorSchemeLight',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
       accent: themedClass(
         'radioBaseVariantsColorSchemeAccent',
-        'ring-gray-200 dark:ring-gray-200',
+        'bg-white dark:bg-white ring-gray-200 dark:ring-gray-200',
       ),
     },
   },
@@ -169,14 +169,17 @@ const radioIndicator = tv({
     :required="Boolean(formElement.metadata.required)"
     :description="cleanDescription"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <URadioGroup
       v-model="model"
       :items="formattedOptions"
       :ui="{
+        fieldset: themedClass('radioFieldset', 'gap-y-3'),
         container: themedClass('radioContainer', 'cursor-pointer'),
         base: radioBase({ colorScheme }),
         indicator: radioIndicator({ colorScheme }),

package/components/Form/SelectInput.vue

@@ -71,7 +71,10 @@ const formFieldDescription = tv({
 })
 
 const selectBase = tv({
-  base: themedClass('selectBase', 'text-base px-4 rounded-none w-full cursor-pointer'),
+  base: themedClass(
+    'selectBase',
+    'text-base px-4 rounded-none w-full cursor-pointer',
+  ),
   variants: {
     colorScheme: {
       none: themedClass(
@@ -104,19 +107,19 @@ const selectPlaceholder = tv({
     colorScheme: {
       none: themedClass(
         'selectPlaceholderVariantsColorSchemeNone',
-        'text-gray-400',
+        'text-gray-500',
       ),
       dark: themedClass(
         'selectPlaceholderVariantsColorSchemeDark',
-        'text-gray-400',
+        'text-gray-500',
       ),
       light: themedClass(
         'selectPlaceholderVariantsColorSchemeLight',
-        'text-gray-400',
+        'text-gray-500',
       ),
       accent: themedClass(
         'selectPlaceholderVariantsColorSchemeAccent',
-        'text-gray-400',
+        'text-gray-500',
       ),
     },
   },
@@ -281,23 +284,26 @@ const selectFloatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'selectFloatingLabelVariantsColorSchemeNone',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       dark: themedClass(
         'selectFloatingLabelVariantsColorSchemeDark',
-        'text-gray-300 group-focus-within:text-primary-400 dark:text-gray-300 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-400 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       light: themedClass(
         'selectFloatingLabelVariantsColorSchemeLight',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
       accent: themedClass(
         'selectFloatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 dark:group-focus-within:text-primary-400',
+        'text-gray-500 group-focus-within:text-primary-600 dark:text-gray-500 dark:group-focus-within:text-primary-400',
       ),
     },
     floating: {
-      true: themedClass('selectFloatingLabelVariantsFloatingTrue', '-top-2 translate-y-0 text-xs font-medium'),
+      true: themedClass(
+        'selectFloatingLabelVariantsFloatingTrue',
+        '-top-2 translate-y-0 text-xs font-medium',
+      ),
       false: themedClass(
         'selectFloatingLabelVariantsFloatingFalse',
         'top-1/2 -translate-y-1/2 text-base font-normal',
@@ -334,8 +340,7 @@ const selectFloatingLabelText = tv({
 })
 
 const hasSelectedValue = computed(() => {
-  if (Array.isArray(model.value))
-    return model.value.length > 0
+  if (Array.isArray(model.value)) return model.value.length > 0
 
   return model.value !== '' && model.value !== null && model.value !== undefined
 })
@@ -349,18 +354,22 @@ const hasSelectedValue = computed(() => {
     :description="floatingLabels ? undefined : cleanDescription"
     :help="floatingLabels ? cleanDescription : undefined"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       help: formFieldDescription({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
-    <div :class="themedClass('selectWrapper', 'relative group')">
+    <div :class="themedClass('selectWrapper', 'group relative')">
       <USelect
         v-model="model"
         :id="formElement.metadata.key"
         :items="formattedOptions"
         :multiple="Boolean(formElement.metadata.multiple)"
-        :placeholder="floatingLabels ? undefined : formElement.emptyOption?.title"
+        :placeholder="
+          floatingLabels ? undefined : formElement.emptyOption?.title
+        "
         :ui="{
           base: selectBase({ colorScheme, floating: floatingLabels }),
           placeholder: selectPlaceholder({ colorScheme }),
@@ -375,10 +384,26 @@ const hasSelectedValue = computed(() => {
       />
       <label
         v-if="floatingLabels"
-        :class="selectFloatingLabel({ colorScheme, floating: hasSelectedValue })"
+        :class="
+          selectFloatingLabel({ colorScheme, floating: hasSelectedValue })
+        "
         :for="formElement.metadata.key"
       >
-        <span :class="selectFloatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="selectFloatingLabelText({ colorScheme })">
+          {{ formElement.metadata.title }}
+          <template v-if="formElement.metadata.required">
+            <span
+              :class="
+                themedClass(
+                  'floatingLabelRequiredStarClass',
+                  'ml-0.5 inline-block text-red-600',
+                )
+              "
+            >
+              *
+            </span>
+          </template>
+        </span>
       </label>
     </div>
   </UFormField>

package/components/Form/TextAreaInput.vue

@@ -24,7 +24,11 @@ const floatingLabels = inject<boolean>('floatingLabels', true)
 const isTextAreaFocused = ref(false)
 
 const textAreaHasValue = computed(() => {
-  return model.value !== null && model.value !== undefined && `${model.value}`.length > 0
+  return (
+    model.value !== null &&
+    model.value !== undefined &&
+    `${model.value}`.length > 0
+  )
 })
 
 const textAreaShouldFloat = computed(() => {
@@ -88,19 +92,19 @@ const textAreaBase = tv({
     colorScheme: {
       none: themedClass(
         'textAreaBaseVariantsColorSchemeNone',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       dark: themedClass(
         'textAreaBaseVariantsColorSchemeDark',
-        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-400',
+        'bg-gray-800 text-gray-200 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700 dark:text-gray-200 placeholder:text-gray-500',
       ),
       light: themedClass(
         'textAreaBaseVariantsColorSchemeLight',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
       accent: themedClass(
         'textAreaBaseVariantsColorSchemeAccent',
-        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-400',
+        'bg-white text-gray-950 ring-gray-200 dark:bg-white dark:ring-gray-200 dark:text-gray-950 placeholder:text-gray-500',
       ),
     },
   },
@@ -115,27 +119,36 @@ const floatingLabel = tv({
     colorScheme: {
       none: themedClass(
         'floatingLabelVariantsColorSchemeNone',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
       dark: themedClass(
         'floatingLabelVariantsColorSchemeDark',
-        'text-gray-300 dark:text-gray-300',
+        'text-gray-500 dark:text-gray-500',
       ),
       light: themedClass(
         'floatingLabelVariantsColorSchemeLight',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
       accent: themedClass(
         'floatingLabelVariantsColorSchemeAccent',
-        'text-gray-600 dark:text-gray-400',
+        'text-gray-500 dark:text-gray-500',
       ),
     },
     floating: {
-      true: themedClass('floatingLabelVariantsFloatingTrue', '-top-2 text-xs font-medium'),
-      false: themedClass('floatingLabelVariantsFloatingFalse', 'top-4 text-base font-normal'),
+      true: themedClass(
+        'floatingLabelVariantsFloatingTrue',
+        '-top-2 text-xs font-medium',
+      ),
+      false: themedClass(
+        'floatingLabelVariantsFloatingFalse',
+        'top-4 text-base font-normal',
+      ),
     },
     focused: {
-      true: themedClass('floatingLabelVariantsFocusedTrue', 'text-primary-600 dark:text-primary-400'),
+      true: themedClass(
+        'floatingLabelVariantsFocusedTrue',
+        'text-primary-500 dark:text-primary-500',
+      ),
       false: themedClass('floatingLabelVariantsFocusedFalse', ''),
     },
   },
@@ -177,16 +190,22 @@ const floatingLabelText = tv({
     :description="floatingLabels ? undefined : cleanDescription"
     :help="floatingLabels ? cleanDescription : undefined"
     :ui="{
+      labelWrapper: themedClass('formFieldLabelWrapper', 'mb-1'),
       label: formFieldLabel({ colorScheme }),
       help: formFieldDescription({ colorScheme }),
       description: formFieldDescription({ colorScheme }),
+      wrapper: themedClass('formFieldWrapper', 'mb-2'),
     }"
   >
     <div :class="themedClass('textAreaWrapper', 'relative')">
       <UTextarea
         v-model="model"
         :id="formElement.metadata.key"
-        :placeholder="floatingLabels ? (formElement.placeholder || ' ') : formElement.placeholder"
+        :placeholder="
+          floatingLabels
+            ? formElement.placeholder || ' '
+            : formElement.placeholder
+        "
         :maxlength="formElement.maxlength"
         :minlength="formElement.minlength"
         :pattern="formElement.pattern?.rule"
@@ -200,10 +219,30 @@ const floatingLabelText = tv({
       />
       <label
         v-if="floatingLabels"
-        :class="floatingLabel({ colorScheme, floating: textAreaShouldFloat, focused: isTextAreaFocused })"
+        :class="
+          floatingLabel({
+            colorScheme,
+            floating: textAreaShouldFloat,
+            focused: isTextAreaFocused,
+          })
+        "
         :for="formElement.metadata.key"
       >
-        <span :class="floatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+        <span :class="floatingLabelText({ colorScheme })">
+          {{ formElement.metadata.title }}
+          <template v-if="formElement.metadata.required">
+            <span
+              :class="
+                themedClass(
+                  'floatingLabelRequiredStarClass',
+                  'ml-0.5 inline-block text-red-600',
+                )
+              "
+            >
+              *
+            </span>
+          </template>
+        </span>
       </label>
     </div>
   </UFormField>