@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Form/RadioButtonsInput.vue

@@ -1,44 +1,189 @@
-<script setup lang="ts">
-import type { RadioButtonsInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+<script lang="ts" setup>
+import type { CheckboxesProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
+import { useFormDefaultValue } from '@iqual/nuxt-icms/components/Form/composables/useFormDefaultValue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
-const props = defineProps<{ formElement: RadioButtonsInput }>()
+const props = defineProps<{ formElement: CheckboxesProps; debug: boolean }>()
+const model = defineModel<string | number>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormRadioButtonsInput')
 
-const { cleanDescription, getValidationData, getFormattedOptions } =
-  useFormElement(props.formElement)
+const { cleanDescription, formattedOptions } = useFormElement(props.formElement)
+
+if (props.debug)
+  console.log(
+    `[${props.formElement.metadata.title} (${props.formElement.metadata.key})] Props:`,
+    props,
+  )
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+
+const formFieldLabel = tv({
+  base: themedClass('formFieldLabelBase', 'text-base font-medium'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldLabelVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'formFieldLabelVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'formFieldLabelVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'formFieldLabelVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const formFieldDescription = tv({
+  base: themedClass('formFieldDescriptionBase', 'text-sm'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'formFieldDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'formFieldDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'formFieldDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const radioBase = tv({
+  base: themedClass('radioBase', 'cursor-pointer size-5'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'radioBaseVariantsColorSchemeNone',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      dark: themedClass(
+        'radioBaseVariantsColorSchemeDark',
+        'ring-gray-700 dark:ring-gray-700',
+      ),
+      light: themedClass(
+        'radioBaseVariantsColorSchemeLight',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      accent: themedClass(
+        'radioBaseVariantsColorSchemeAccent',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+    },
+  },
+})
+
+const radioLabel = tv({
+  base: themedClass(
+    'radioLabelBase',
+    'text-base font-medium leading-tight mb-1 cursor-pointer',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'radioLabelVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'radioLabelVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'radioLabelVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'radioLabelVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const radioDescription = tv({
+  base: themedClass('radioDescriptionBase', 'text-xs'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'radioDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'radioDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'radioDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'radioDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+const radioIndicator = tv({
+  base: themedClass('radioIndicatorBase', 'after:bg-white after:size-2'),
+  variants: {
+    colorScheme: {
+      none: themedClass('radioIndicatorVariantsColorSchemeNone', 'text-white'),
+      dark: themedClass('radioIndicatorVariantsColorSchemeDark', 'text-white'),
+      light: themedClass(
+        'radioIndicatorVariantsColorSchemeLight',
+        'text-white',
+      ),
+      accent: themedClass(
+        'radioIndicatorVariantsColorSchemeAccent',
+        'text-white',
+      ),
+    },
+  },
+})
 </script>
 
 <template>
-  <FormKit
-    type="radio"
-    :name="formElement?.metadata?.key"
-    :help="cleanDescription"
-    :validation="getValidationData.rules || ''"
-    :validationMessages="getValidationData.messages || {}"
+  <UFormField
+    :name="formElement.metadata.key"
+    :label="formElement.metadata.title"
+    :required="Boolean(formElement.metadata.required)"
+    :description="cleanDescription"
+    :ui="{
+      label: formFieldLabel({ colorScheme }),
+      description: formFieldDescription({ colorScheme }),
+    }"
   >
-    <template #wrapper>
-      <Label class="mb-2 block text-base font-normal">
-        {{ `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}` }}
-      </Label>
-      <RadioGroup>
-        <div
-          v-for="(option, index) in getFormattedOptions"
-          :key="index"
-          class="flex items-center gap-2"
-        >
-          <RadioGroupItem
-            :id="`${formElement?.metadata?.key}-${index}`"
-            :value="option.value"
-            class="border-1 focus-visible:ring-primary data-[state=checked]:text-primary dark:focus-visible:ring-primary dark:data-[state=checked]:text-primary size-5 border-gray-200 bg-white focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:bg-white dark:data-[state=checked]:bg-white"
-          />
-          <Label
-            :for="`${formElement?.metadata?.key}-${index}`"
-            class="text-base font-normal"
-          >
-            {{ option.label }}
-          </Label>
-        </div>
-      </RadioGroup>
-    </template>
-  </FormKit>
+    <URadioGroup
+      v-model="model"
+      :items="formattedOptions"
+      :ui="{
+        container: themedClass('radioContainer', 'cursor-pointer'),
+        base: radioBase({ colorScheme }),
+        indicator: radioIndicator({ colorScheme }),
+        wrapper: themedClass('radioWrapper', 'ms-3'),
+        label: radioLabel({ colorScheme }),
+        description: radioDescription({ colorScheme }),
+      }"
+    />
+  </UFormField>
 </template>

package/components/Form/SelectInput.vue

@@ -1,54 +1,385 @@
-<script setup lang="ts">
-import type { SelectInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+<script lang="ts" setup>
+import type { SelectProps } from '@iqual/nuxt-icms/components/Form/utils/types'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
+import { useFormDefaultValue } from '@iqual/nuxt-icms/components/Form/composables/useFormDefaultValue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
 
-const props = defineProps<{ formElement: SelectInput }>()
+const props = defineProps<{ formElement: SelectProps; debug: boolean }>()
+const model = defineModel<string | number | any[]>()
+useFormDefaultValue(model, props.formElement.metadata?.defaultValue)
+const themedClass = useTheme('FormSelectInput')
 
-const { cleanDescription, getValidationData, getFormattedOptions } =
-  useFormElement(props.formElement)
+const { cleanDescription, formattedOptions } = useFormElement(props.formElement)
+
+if (props.debug)
+  console.log(
+    `[${props.formElement.metadata.title} (${props.formElement.metadata.key})] Props:`,
+    props,
+  )
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+const floatingLabels = inject<boolean>('floatingLabels', true)
+
+const formFieldLabel = tv({
+  base: themedClass('formFieldLabelBase', 'text-base font-medium'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldLabelVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'formFieldLabelVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'formFieldLabelVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'formFieldLabelVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const formFieldDescription = tv({
+  base: themedClass('formFieldDescriptionBase', 'text-sm'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'formFieldDescriptionVariantsColorSchemeNone',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      dark: themedClass(
+        'formFieldDescriptionVariantsColorSchemeDark',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      light: themedClass(
+        'formFieldDescriptionVariantsColorSchemeLight',
+        'text-gray-400 dark:text-gray-400',
+      ),
+      accent: themedClass(
+        'formFieldDescriptionVariantsColorSchemeAccent',
+        'text-white dark:text-white',
+      ),
+    },
+  },
+})
+
+const selectBase = tv({
+  base: themedClass('selectBase', 'text-base px-4 rounded-none w-full cursor-pointer'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectBaseVariantsColorSchemeNone',
+        'bg-white ring-gray-200 dark:bg-white dark:ring-gray-200',
+      ),
+      dark: themedClass(
+        'selectBaseVariantsColorSchemeDark',
+        'bg-gray-800 ring-gray-700 dark:bg-gray-800 dark:ring-gray-700',
+      ),
+      light: themedClass(
+        'selectBaseVariantsColorSchemeLight',
+        'bg-white ring-gray-200 dark:bg-white dark:ring-gray-200',
+      ),
+      accent: themedClass(
+        'selectBaseVariantsColorSchemeAccent',
+        'bg-white ring-gray-200 dark:bg-white dark:ring-gray-200',
+      ),
+    },
+    floating: {
+      true: themedClass('selectBaseVariantsFloatingTrue', 'pt-4 pb-4'),
+      false: themedClass('selectBaseVariantsFloatingFalse', 'py-3'),
+    },
+  },
+})
+
+const selectPlaceholder = tv({
+  base: themedClass('selectPlaceholderBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectPlaceholderVariantsColorSchemeNone',
+        'text-gray-400',
+      ),
+      dark: themedClass(
+        'selectPlaceholderVariantsColorSchemeDark',
+        'text-gray-400',
+      ),
+      light: themedClass(
+        'selectPlaceholderVariantsColorSchemeLight',
+        'text-gray-400',
+      ),
+      accent: themedClass(
+        'selectPlaceholderVariantsColorSchemeAccent',
+        'text-gray-400',
+      ),
+    },
+  },
+})
+
+const selectValue = tv({
+  base: themedClass('selectValueBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectValueVariantsColorSchemeNone',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      dark: themedClass(
+        'selectValueVariantsColorSchemeDark',
+        'text-gray-200 dark:text-gray-200',
+      ),
+      light: themedClass(
+        'selectValueVariantsColorSchemeLight',
+        'text-gray-950 dark:text-gray-950',
+      ),
+      accent: themedClass(
+        'selectValueVariantsColorSchemeAccent',
+        'text-gray-950 dark:text-gray-950',
+      ),
+    },
+  },
+})
+
+const selectContent = tv({
+  base: themedClass(
+    'selectContentBase',
+    'rounded-none shadow-none outline-none',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectContentVariantsColorSchemeNone',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      dark: themedClass(
+        'selectContentVariantsColorSchemeDark',
+        'ring-gray-700 dark:ring-gray-700',
+      ),
+      light: themedClass(
+        'selectContentVariantsColorSchemeLight',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+      accent: themedClass(
+        'selectContentVariantsColorSchemeAccent',
+        'ring-gray-200 dark:ring-gray-200',
+      ),
+    },
+  },
+})
+
+const selectGroup = tv({
+  base: themedClass('selectGroupBase', 'p-0'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectGroupVariantsColorSchemeNone',
+        'bg-white dark:bg-white',
+      ),
+      dark: themedClass(
+        'selectGroupVariantsColorSchemeDark',
+        'bg-gray-800 dark:bg-gray-800',
+      ),
+      light: themedClass(
+        'selectGroupVariantsColorSchemeLight',
+        'bg-white dark:bg-white',
+      ),
+      accent: themedClass(
+        'selectGroupVariantsColorSchemeAccent',
+        'bg-white dark:bg-white',
+      ),
+    },
+  },
+})
+
+const selectItem = tv({
+  base: themedClass(
+    'selectItemBase',
+    'py-3 px-4 text-base cursor-pointer before:rounded-none before:inset-0',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectItemVariantsColorSchemeNone',
+        'text-gray-950 before:bg-white data-highlighted:not-data-disabled:text-gray-950 data-highlighted:not-data-disabled:before:bg-gray-50',
+      ),
+      dark: themedClass(
+        'selectItemVariantsColorSchemeDark',
+        'text-gray-200 before:bg-gray-800 data-highlighted:not-data-disabled:text-gray-200 data-highlighted:not-data-disabled:before:bg-gray-700',
+      ),
+      light: themedClass(
+        'selectItemVariantsColorSchemeLight',
+        'text-gray-950 before:bg-white data-highlighted:not-data-disabled:text-gray-950 data-highlighted:not-data-disabled:before:bg-gray-50',
+      ),
+      accent: themedClass(
+        'selectItemVariantsColorSchemeAccent',
+        'text-gray-950 before:bg-white data-highlighted:not-data-disabled:text-gray-950 data-highlighted:not-data-disabled:before:bg-gray-50',
+      ),
+    },
+  },
+})
+
+const selectTrailingIcon = tv({
+  base: themedClass('selectTrailingIconBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectTrailingIconVariantsColorSchemeNone',
+        'text-primary-500',
+      ),
+      dark: themedClass(
+        'selectTrailingIconVariantsColorSchemeDark',
+        'text-gray-200',
+      ),
+      light: themedClass(
+        'selectTrailingIconVariantsColorSchemeLight',
+        'text-primary-500',
+      ),
+      accent: themedClass(
+        'selectTrailingIconVariantsColorSchemeAccent',
+        'text-primary-500',
+      ),
+    },
+  },
+})
+
+const selectItemTrailingIcon = tv({
+  base: themedClass('selectItemTrailingIconBase'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectItemTrailingIconVariantsColorSchemeNone',
+        'text-primary-500',
+      ),
+      dark: themedClass(
+        'selectItemTrailingIconVariantsColorSchemeDark',
+        'text-primary-500',
+      ),
+      light: themedClass(
+        'selectItemTrailingIconVariantsColorSchemeLight',
+        'text-primary-500',
+      ),
+      accent: themedClass(
+        'selectItemTrailingIconVariantsColorSchemeAccent',
+        'text-primary-500',
+      ),
+    },
+  },
+})
+
+const selectFloatingLabel = tv({
+  base: themedClass(
+    'selectFloatingLabelBase',
+    'pointer-events-none absolute left-1.5 z-10 origin-left px-1 transition-all duration-200 group-focus-within:-top-2 group-focus-within:translate-y-0 group-focus-within:text-xs group-focus-within:font-medium',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectFloatingLabelVariantsColorSchemeNone',
+        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 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',
+      ),
+      light: themedClass(
+        'selectFloatingLabelVariantsColorSchemeLight',
+        'text-gray-600 group-focus-within:text-primary-600 dark:text-gray-400 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',
+      ),
+    },
+    floating: {
+      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',
+      ),
+    },
+  },
+})
+
+const selectFloatingLabelText = tv({
+  base: themedClass(
+    'selectFloatingLabelTextBase',
+    'inline-flex px-1.5 leading-none rounded-sm bg-default',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'selectFloatingLabelTextVariantsColorSchemeNone',
+        'bg-white dark:bg-white',
+      ),
+      dark: themedClass(
+        'selectFloatingLabelTextVariantsColorSchemeDark',
+        'bg-gray-800 dark:bg-gray-800',
+      ),
+      light: themedClass(
+        'selectFloatingLabelTextVariantsColorSchemeLight',
+        'bg-white dark:bg-white',
+      ),
+      accent: themedClass(
+        'selectFloatingLabelTextVariantsColorSchemeAccent',
+        'bg-white dark:bg-white',
+      ),
+    },
+  },
+})
+
+const hasSelectedValue = computed(() => {
+  if (Array.isArray(model.value))
+    return model.value.length > 0
+
+  return model.value !== '' && model.value !== null && model.value !== undefined
+})
 </script>
 
 <template>
-  <FormKit
-    type="select"
-    :name="formElement?.metadata?.key"
-    :label="formElement?.metadata?.title"
-    :help="cleanDescription"
-    :validation="getValidationData.rules"
-    :validationMessages="getValidationData.messages"
-    :multiple="Boolean(formElement?.metadata?.multiple)"
+  <UFormField
+    :name="formElement.metadata.key"
+    :label="floatingLabels ? undefined : formElement.metadata.title"
+    :required="formElement.metadata.required"
+    :description="floatingLabels ? undefined : cleanDescription"
+    :help="floatingLabels ? cleanDescription : undefined"
+    :ui="{
+      label: formFieldLabel({ colorScheme }),
+      help: formFieldDescription({ colorScheme }),
+      description: formFieldDescription({ colorScheme }),
+    }"
   >
-    <template #wrapper="{ value, node }">
-      <Select
-        :model-value="value as string | undefined"
-        @update:model-value="node.input"
+    <div :class="themedClass('selectWrapper', 'relative group')">
+      <USelect
+        v-model="model"
+        :id="formElement.metadata.key"
+        :items="formattedOptions"
+        :multiple="Boolean(formElement.metadata.multiple)"
+        :placeholder="floatingLabels ? undefined : formElement.emptyOption?.title"
+        :ui="{
+          base: selectBase({ colorScheme, floating: floatingLabels }),
+          placeholder: selectPlaceholder({ colorScheme }),
+          value: selectValue({ colorScheme }),
+          trailingIcon: selectTrailingIcon({ colorScheme }),
+          content: selectContent({ colorScheme }),
+          viewport: themedClass('selectViewport', 'divide-none p-0'),
+          group: selectGroup({ colorScheme }),
+          item: selectItem({ colorScheme }),
+          itemTrailingIcon: selectItemTrailingIcon({ colorScheme }),
+        }"
+      />
+      <label
+        v-if="floatingLabels"
+        :class="selectFloatingLabel({ colorScheme, floating: hasSelectedValue })"
+        :for="formElement.metadata.key"
       >
-        <SelectTrigger
-          class="[&[data-state=open]>svg]:transition-200 border-1 focus:ring-primary dark:focus:ring-primary h-auto rounded-none border-gray-200 bg-white px-6 py-4 focus:outline-none focus:ring-offset-0 dark:border-gray-200 dark:bg-white dark:focus:outline-none dark:focus:ring-offset-0 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg]:transition-all"
-        >
-          <SelectValue
-            :placeholder="`${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}`"
-            class="text-medium text-base text-black"
-          >
-            {{
-              value || `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}`
-            }}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent
-          class="border-1 rounded-none border-gray-200 bg-white dark:border-gray-200 dark:bg-white [&>div]:!px-0 [&>div]:!py-1"
-        >
-          <SelectItem
-            v-for="(option, index) in getFormattedOptions"
-            :key="index"
-            :value="option.value"
-            class="cursor-pointer bg-white py-2 text-base text-black hover:bg-gray-50 hover:text-black focus:bg-gray-50 focus:text-black dark:bg-white dark:text-black dark:hover:bg-gray-50 dark:hover:text-black dark:focus:bg-gray-50 dark:focus:text-black"
-            @click="node.input(option.value)"
-          >
-            {{ option.label }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </template>
-  </FormKit>
+        <span :class="selectFloatingLabelText({ colorScheme })">{{ formElement.metadata.title }}</span>
+      </label>
+    </div>
+  </UFormField>
 </template>

package/components/Form/SubmitButton.vue

@@ -1,12 +1,25 @@
-<script setup lang="ts">
-import type { SubmitButton } from '@iqual/nuxt-icms/components/Form/utils/types'
+<script lang="ts" setup>
+import type { WebformElementActionsFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 
-defineProps<{ formElement: SubmitButton }>()
+const props = defineProps<{
+  formElement: WebformElementActionsFragment
+  debug: boolean
+}>()
+
+const { $texts } = useNuxtApp()
+
+if (props.debug) console.log('[Submit button] Props:', props)
+
+const colorScheme = inject<ColorScheme>('colorScheme')
 </script>
 
 <template>
-  <FormKit
+  <DesignSystemAtomsButton
+    as="button"
     type="submit"
-    :label="formElement?.submitLabel || formElement?.metadata?.title"
+    :label="formElement?.submitLabel || $texts('webform.submit', 'Submit')"
+    buttonStyle="focus"
+    :colorScheme="colorScheme"
   />
 </template>