srcdev-nuxt-forms 6.1.1 → 6.1.2

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-description.css

@@ -0,0 +1,13 @@
+.srcdev-forms-extended {
+  .input-description {
+    .input-description-html {
+      margin-block: 0.4rem 0.8rem;
+    }
+    .input-description-text {
+      color: var(--form-description-color);
+      font-size: var(--step-4);
+      margin-block: 0.4rem 0.8rem;
+      line-height: var(--step-4);
+    }
+  }
+}

package/app/assets/styles/extends-layer/srcdev-forms/components/index.css

@@ -1,9 +1,10 @@
-@import './_input-error';
-@import './_input-select';
-@import './_input-label';
-@import './_input-textarea';
-@import './_input-text';
-@import './_input-checkbox-radio-core';
-@import './_input-button';
-@import './_input-checkbox-radio-options-button';
-@import './_form-fieldset';
+@import "./_input-error";
+@import "./_input-select";
+@import "./_input-label";
+@import "./_input-description";
+@import "./_input-textarea";
+@import "./_input-text";
+@import "./_input-checkbox-radio-core";
+@import "./_input-button";
+@import "./_input-checkbox-radio-options-button";
+@import "./_form-fieldset";

package/app/assets/styles/setup/theming/themes/_default.css

@@ -21,6 +21,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-5));

package/app/assets/styles/setup/theming/themes/_error.css

@@ -1,4 +1,4 @@
-[data-theme='error'] {
+[data-theme="error"] {
   --colour-theme-0: var(--red-0);
   --colour-theme-1: var(--red-1);
   --colour-theme-2: var(--red-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_secondary.css

@@ -1,4 +1,4 @@
-[data-theme='secondary'] {
+[data-theme="secondary"] {
   --colour-theme-0: var(--gray-0);
   --colour-theme-1: var(--gray-1);
   --colour-theme-2: var(--gray-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_success.css

@@ -1,4 +1,4 @@
-[data-theme='success'] {
+[data-theme="success"] {
   --colour-theme-0: var(--green-0);
   --colour-theme-1: var(--green-1);
   --colour-theme-2: var(--green-2);
@@ -20,6 +20,9 @@
   --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
   --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+  /* Description */
+  --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
   /* Input Elements */
   --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
   --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/theming/themes/_warning.css

@@ -1,5 +1,5 @@
 :root {
-  [data-theme='warning'] {
+  [data-theme="warning"] {
     --colour-theme-0: var(--orange-0);
     --colour-theme-1: var(--orange-1);
     --colour-theme-2: var(--orange-2);
@@ -21,6 +21,9 @@
     --form-fieldset-legend-color: light-dark(var(--gray-12), var(--gray-1));
     --form-label-color: light-dark(var(--gray-12), var(--gray-1));
 
+    /* Description */
+    --form-description-color: light-dark(var(--gray-12), var(--gray-1));
+
     /* Input Elements */
     --theme-input-surface: light-dark(var(--gray-1), var(--gray-8));
     --theme-input-surface-hover: light-dark(var(--gray-1), var(--gray-10));

package/app/assets/styles/setup/utility-classes/_margin.css

@@ -0,0 +1,334 @@
+/* Margin */
+.mi-auto {
+  margin-inline: auto;
+}
+.mis-auto {
+  margin-inline-start: auto;
+}
+.mie-auto {
+  margin-inline-end: auto;
+}
+.mb-auto {
+  margin-block: auto;
+}
+.mbs-auto {
+  margin-block-start: auto;
+}
+.mbe-auto {
+  margin-block-end: auto;
+}
+
+.mb-0 {
+  margin-block: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+
+.m-0 {
+  margin: 0;
+}
+.mbs-0 {
+  margin-block-start: 0;
+}
+.mbe-0 {
+  margin-block-end: 0;
+}
+.mis-0 {
+  margin-inline-start: 0;
+}
+.mie-0 {
+  margin-inline-end: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+.mb-0 {
+  margin-block: 0;
+}
+
+.m-1 {
+  margin: 0.1rem;
+}
+.mbs-1 {
+  margin-block-start: 0.1rem;
+}
+.mbe-1 {
+  margin-block-end: 0.1rem;
+}
+.mis-1 {
+  margin-inline-start: 0.1rem;
+}
+.mie-1 {
+  margin-inline-end: 0.1rem;
+}
+.mi-1 {
+  margin-inline: 0.1rem;
+}
+.mb-1 {
+  margin-block: 0.1rem;
+}
+
+.m-2 {
+  margin: 0.2rem;
+}
+.mbs-2 {
+  margin-block-start: 0.2rem;
+}
+.mbe-2 {
+  margin-block-end: 0.2rem;
+}
+.mis-2 {
+  margin-inline-start: 0.2rem;
+}
+.mie-2 {
+  margin-inline-end: 0.2rem;
+}
+.mi-2 {
+  margin-inline: 0.2rem;
+}
+.mb-2 {
+  margin-block: 0.2rem;
+}
+
+.m-4 {
+  margin: 0.4rem;
+}
+.mbs-4 {
+  margin-block-start: 0.4rem;
+}
+.mbe-4 {
+  margin-block-end: 0.4rem;
+}
+.mis-4 {
+  margin-inline-start: 0.4rem;
+}
+.mie-4 {
+  margin-inline-end: 0.4rem;
+}
+.mi-4 {
+  margin-inline: 0.4rem;
+}
+.mb-4 {
+  margin-block: 0.4rem;
+}
+
+.m-6 {
+  margin: 0.6rem;
+}
+.mbs-6 {
+  margin-block-start: 0.6rem;
+}
+.mbe-6 {
+  margin-block-end: 0.6rem;
+}
+.mis-6 {
+  margin-inline-start: 0.6rem;
+}
+.mie-6 {
+  margin-inline-end: 0.6rem;
+}
+.mi-6 {
+  margin-inline: 0.6rem;
+}
+.mb-6 {
+  margin-block: 0.6rem;
+}
+
+.m-8 {
+  margin: 0.8rem;
+}
+.mbs-8 {
+  margin-block-start: 0.8rem;
+}
+.mbe-8 {
+  margin-block-end: 0.8rem;
+}
+.mis-8 {
+  margin-inline-start: 0.8rem;
+}
+.mie-8 {
+  margin-inline-end: 0.8rem;
+}
+.mi-8 {
+  margin-inline: 0.8rem;
+}
+.mb-8 {
+  margin-block: 0.8rem;
+}
+
+.m-10 {
+  margin: 1rem;
+}
+.mbs-10 {
+  margin-block-start: 1rem;
+}
+.mbe-10 {
+  margin-block-end: 1rem;
+}
+.mis-10 {
+  margin-inline-start: 1rem;
+}
+.mie-10 {
+  margin-inline-end: 1rem;
+}
+.mi-10 {
+  margin-inline: 1rem;
+}
+.mb-10 {
+  margin-block: 1rem;
+}
+
+.m-12 {
+  margin: 1.2rem;
+}
+.mbs-12 {
+  margin-block-start: 1.2rem;
+}
+.mbe-12 {
+  margin-block-end: 1.2rem;
+}
+.mis-12 {
+  margin-inline-start: 1.2rem;
+}
+.mie-12 {
+  margin-inline-end: 1.2rem;
+}
+.mi-12 {
+  margin-inline: 1.2rem;
+}
+.mb-12 {
+  margin-block: 1.2rem;
+}
+
+.m-18 {
+  margin: 1.8rem;
+}
+.mbs-18 {
+  margin-block-start: 1.8rem;
+}
+.mbe-18 {
+  margin-block-end: 1.8rem;
+}
+.mis-18 {
+  margin-inline-start: 1.8rem;
+}
+.mie-18 {
+  margin-inline-end: 1.8rem;
+}
+.mi-18 {
+  margin-inline: 1.8rem;
+}
+.mb-18 {
+  margin-block: 1.8rem;
+}
+
+.m-20 {
+  margin: 2rem;
+}
+.mbs-20 {
+  margin-block-start: 2rem;
+}
+.mbe-20 {
+  margin-block-end: 2rem;
+}
+.mis-20 {
+  margin-inline-start: 2rem;
+}
+.mie-20 {
+  margin-inline-end: 2rem;
+}
+.mi-20 {
+  margin-inline: 2rem;
+}
+.mb-20 {
+  margin-block: 2rem;
+}
+
+.m-24 {
+  margin: 2.4rem;
+}
+.mbs-24 {
+  margin-block-start: 2.4rem;
+}
+.mbe-24 {
+  margin-block-end: 2.4rem;
+}
+.mis-24 {
+  margin-inline-start: 2.4rem;
+}
+.mie-24 {
+  margin-inline-end: 2.4rem;
+}
+.mi-24 {
+  margin-inline: 2.4rem;
+}
+.mb-24 {
+  margin-block: 2.4rem;
+}
+
+.m-32 {
+  margin: 3.2rem;
+}
+.mbs-32 {
+  margin-block-start: 3.2rem;
+}
+.mbe-32 {
+  margin-block-end: 3.2rem;
+}
+.mis-32 {
+  margin-inline-start: 3.2rem;
+}
+.mie-32 {
+  margin-inline-end: 3.2rem;
+}
+.mi-32 {
+  margin-inline: 3.2rem;
+}
+.mb-32 {
+  margin-block: 3.2rem;
+}
+
+.m-40 {
+  margin: 4rem;
+}
+.mbs-40 {
+  margin-block-start: 4rem;
+}
+.mbe-40 {
+  margin-block-end: 4rem;
+}
+.mis-40 {
+  margin-inline-start: 4rem;
+}
+.mie-40 {
+  margin-inline-end: 4rem;
+}
+.mi-40 {
+  margin-inline: 4rem;
+}
+.mb-40 {
+  margin-block: 4rem;
+}
+
+.m-60 {
+  margin: 6rem;
+}
+.mbs-60 {
+  margin-block-start: 6rem;
+}
+.mbe-60 {
+  margin-block-end: 6rem;
+}
+.mis-60 {
+  margin-inline-start: 6rem;
+}
+.mie-60 {
+  margin-inline-end: 6rem;
+}
+.mi-60 {
+  margin-inline: 6rem;
+}
+.mb-60 {
+  margin-block: 6rem;
+}

package/app/assets/styles/setup/utility-classes/_padding.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 0.1rem;
+}
+.pbs-1 {
+  padding-block-start: 0.1rem;
+}
+.pbe-1 {
+  padding-block-end: 0.1rem;
+}
+.pis-1 {
+  padding-inline-start: 0.1rem;
+}
+.pie-1 {
+  padding-inline-end: 0.1rem;
+}
+.pi-1 {
+  padding-inline: 0.1rem;
+}
+.pb-1 {
+  padding-block: 0.1rem;
+}
+
+.p-2 {
+  padding: 0.2rem;
+}
+.pbs-2 {
+  padding-block-start: 0.2rem;
+}
+.pbe-2 {
+  padding-block-end: 0.2rem;
+}
+.pis-2 {
+  padding-inline-start: 0.2rem;
+}
+.pie-2 {
+  padding-inline-end: 0.2rem;
+}
+.pi-2 {
+  padding-inline: 0.2rem;
+}
+.pb-2 {
+  padding-block: 0.2rem;
+}
+
+.p-4 {
+  padding: 0.4rem;
+}
+.pbs-4 {
+  padding-block-start: 0.4rem;
+}
+.pbe-4 {
+  padding-block-end: 0.4rem;
+}
+.pis-4 {
+  padding-inline-start: 0.4rem;
+}
+.pie-4 {
+  padding-inline-end: 0.4rem;
+}
+.pi-4 {
+  padding-inline: 0.4rem;
+}
+.pb-4 {
+  padding-block: 0.4rem;
+}
+
+.p-6 {
+  padding: 0.6rem;
+}
+.pbs-6 {
+  padding-block-start: 0.6rem;
+}
+.pbe-6 {
+  padding-block-end: 0.6rem;
+}
+.pis-6 {
+  padding-inline-start: 0.6rem;
+}
+.pie-6 {
+  padding-inline-end: 0.6rem;
+}
+.pi-6 {
+  padding-inline: 0.6rem;
+}
+.pb-6 {
+  padding-block: 0.6rem;
+}
+
+.p-8 {
+  padding: 0.8rem;
+}
+.pbs-8 {
+  padding-block-start: 0.8rem;
+}
+.pbe-8 {
+  padding-block-end: 0.8rem;
+}
+.pis-8 {
+  padding-inline-start: 0.8rem;
+}
+.pie-8 {
+  padding-inline-end: 0.8rem;
+}
+.pi-8 {
+  padding-inline: 0.8rem;
+}
+.pb-8 {
+  padding-block: 0.8rem;
+}
+
+.p-10 {
+  padding: 1rem;
+}
+.pbs-10 {
+  padding-block-start: 1rem;
+}
+.pbe-10 {
+  padding-block-end: 1rem;
+}
+.pis-10 {
+  padding-inline-start: 1rem;
+}
+.pie-10 {
+  padding-inline-end: 1rem;
+}
+.pi-10 {
+  padding-inline: 1rem;
+}
+.pb-10 {
+  padding-block: 1rem;
+}
+
+.p-12 {
+  padding: 1.2rem;
+}
+.pbs-12 {
+  padding-block-start: 1.2rem;
+}
+.pbe-12 {
+  padding-block-end: 1.2rem;
+}
+.pis-12 {
+  padding-inline-start: 1.2rem;
+}
+.pie-12 {
+  padding-inline-end: 1.2rem;
+}
+.pi-12 {
+  padding-inline: 1.2rem;
+}
+.pb-12 {
+  padding-block: 1.2rem;
+}
+
+.p-18 {
+  padding: 1.8rem;
+}
+.pbs-18 {
+  padding-block-start: 1.8rem;
+}
+.pbe-18 {
+  padding-block-end: 1.8rem;
+}
+.pis-18 {
+  padding-inline-start: 1.8rem;
+}
+.pie-18 {
+  padding-inline-end: 1.8rem;
+}
+.pi-18 {
+  padding-inline: 1.8rem;
+}
+.pb-18 {
+  padding-block: 1.8rem;
+}
+
+.p-20 {
+  padding: 2rem;
+}
+.pbs-20 {
+  padding-block-start: 2rem;
+}
+.pbe-20 {
+  padding-block-end: 2rem;
+}
+.pis-20 {
+  padding-inline-start: 2rem;
+}
+.pie-20 {
+  padding-inline-end: 2rem;
+}
+.pi-20 {
+  padding-inline: 2rem;
+}
+.pb-20 {
+  padding-block: 2rem;
+}
+
+.p-24 {
+  padding: 2.4rem;
+}
+.pbs-24 {
+  padding-block-start: 2.4rem;
+}
+.pbe-24 {
+  padding-block-end: 2.4rem;
+}
+.pis-24 {
+  padding-inline-start: 2.4rem;
+}
+.pie-24 {
+  padding-inline-end: 2.4rem;
+}
+.pi-24 {
+  padding-inline: 2.4rem;
+}
+.pb-24 {
+  padding-block: 2.4rem;
+}
+
+.p-32 {
+  padding: 3.2rem;
+}
+.pbs-32 {
+  padding-block-start: 3.2rem;
+}
+.pbe-32 {
+  padding-block-end: 3.2rem;
+}
+.pis-32 {
+  padding-inline-start: 3.2rem;
+}
+.pie-32 {
+  padding-inline-end: 3.2rem;
+}
+.pi-32 {
+  padding-inline: 3.2rem;
+}
+.pb-32 {
+  padding-block: 3.2rem;
+}
+
+.p-40 {
+  padding: 4rem;
+}
+.pbs-40 {
+  padding-block-start: 4rem;
+}
+.pbe-40 {
+  padding-block-end: 4rem;
+}
+.pis-40 {
+  padding-inline-start: 4rem;
+}
+.pie-40 {
+  padding-inline-end: 4rem;
+}
+.pi-40 {
+  padding-inline: 4rem;
+}
+.pb-40 {
+  padding-block: 4rem;
+}
+
+.p-60 {
+  padding: 6rem;
+}
+.pbs-60 {
+  padding-block-start: 6rem;
+}
+.pbe-60 {
+  padding-block-end: 6rem;
+}
+.pis-60 {
+  padding-inline-start: 6rem;
+}
+.pie-60 {
+  padding-inline-end: 6rem;
+}
+.pi-60 {
+  padding-inline: 6rem;
+}
+.pb-60 {
+  padding-block: 6rem;
+}

package/app/assets/styles/setup/utility-classes/index.css

@@ -1,2 +1,4 @@
-@import './_fluid-spacing';
-@import './animations/';
+@import "./animations/";
+@import "./_fluid-spacing";
+@import "./_margin";
+@import "./_padding";

package/app/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -8,9 +8,14 @@
     :data-testid
     :styleClassPassthrough="['multiple-checkboxes-fieldset']"
   >
-    <template #description>
-      <slot name="description"></slot>
-    </template>
+    <InputDescription :id :name :field-has-error="fieldHasError" :style-class-passthrough="['input-text-description']">
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
 
     <template #content>
       <div class="multiple-checkboxes-items" :class="[optionsLayout]">
@@ -22,15 +27,15 @@
             :name
             :required
             :label="item.label"
-            :fieldHasError
+            :field-has-error
             v-model="modelValue"
             :true-value="item.value"
             :size
-            :optionsLayout
+            :options-layout
             :theme
             :direction
-            :ariaDescribedby
-            :displayAsDisc
+            :aria-describedby
+            :display-as-disc
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -48,14 +53,14 @@
             :name
             :required
             :label="item.label"
-            :fieldHasError
+            :field-has-error
             v-model="modelValue"
             :true-value="item.value"
             :size
-            :optionsLayout
+            :options-layout
             :theme
-            :ariaDescribedby
-            :displayAsDisc
+            :aria-describedby
+            :display-as-disc
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -72,23 +77,7 @@
 import propValidators from "../c12/prop-validators"
 import type { IOptionsConfig, IFormMultipleOptions } from "../../../../shared/types/types.forms"
 
-const {
-  dataTestid,
-  name,
-  legend,
-  label,
-  required,
-  fieldHasError,
-  placeholder,
-  isButton,
-  errorMessage,
-  size,
-  optionsLayout,
-  equalCols,
-  styleClassPassthrough,
-  theme,
-  direction,
-} = defineProps({
+const props = defineProps({
   dataTestid: {
     type: String,
     default: "multiple-checkboxes",
@@ -176,11 +165,11 @@ const slots = useSlots()
 const modelValue = defineModel()
 const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
 
-const id = `${name}-input-${useId()}`
-const errorId = `${name}-error-message`
+const id = `${props.name}-${useId()}`
+const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = slots.description ? `${name}-description` : undefined
-  return fieldHasError ? errorId : ariaDescribedbyId
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 </script>
 

package/app/components/forms/input-description/InputDescription.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="slots.descriptionText || slots.descriptionHtml"
+    class="input-description"
+    :class="[elementClasses]"
+    :id="descriptionId"
+  >
+    <div v-if="slots.descriptionHtml" class="input-description-html">
+      <slot name="descriptionHtml"></slot>
+    </div>
+    <p v-if="slots.descriptionText" class="input-description-text">
+      <slot name="descriptionText"></slot>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from "../c12/prop-validators"
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: "primary",
+    validator(value: string) {
+      return propValidators.theme.includes(value)
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: "default",
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value)
+    },
+  },
+})
+
+const slots = useSlots()
+
+const descriptionId = `${props.id}-description`
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+</script>
+<style lang="css">
+.input-description {
+  .input-description-html {
+    margin-block: 0.4rem 0.8rem;
+  }
+  .input-description-text {
+    color: var(--form-description-color);
+    font-size: var(--step-4);
+    margin-block: 0.4rem 0.8rem;
+    line-height: var(--step-4);
+  }
+}
+</style>

package/app/components/forms/input-label/InputLabel.vue

@@ -73,5 +73,9 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     line-height: 1.5;
     display: block;
   }
+
+  & + .input-description {
+    margin-block-end: 0.2rem;
+  }
 }
 </style>

package/app/components/forms/input-select/variants/InputSelectWithLabel.vue

@@ -19,9 +19,21 @@
         <template #textLabel>{{ label }}</template>
       </InputLabel>
 
-      <div v-if="inputVariant === 'normal' && slots.description" :id="`${id}-description`">
-        <slot name="description"></slot>
-      </div>
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
 
       <InputSelectCore
         v-model="modelValue"
@@ -31,13 +43,13 @@
         :id
         :name
         :placeholder
-        :fieldHasError
+        :field-has-error
         :required
-        :styleClassPassthrough
+        :style-class-passthrough
         :theme="formTheme"
-        :ariaDescribedby="ariaDescribedby"
+        :aria-describedby
         :size
-        :inputVariant
+        :input-variant
       />
 
       <InputError
@@ -48,9 +60,21 @@
         :inputVariant
       />
     </div>
-    <div v-if="inputVariant !== 'normal' && slots.description" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :id
+      :name
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
   </div>
 </template>
 
@@ -121,9 +145,9 @@ const formTheme = computed(() => {
 })
 
 const id = `${props.name}-${useId()}`
-const errorId = `${name}-error-message`
+const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = slots.description ? `${id}-description` : undefined
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
   return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 

package/app/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -17,9 +17,21 @@
         <template #textLabel>{{ label }}</template>
       </InputLabel>
 
-      <div v-if="inputVariant === 'normal' && slots.description" :id="`${id}-description`">
-        <slot name="description"></slot>
-      </div>
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
 
       <InputTextCore
         v-model="modelValue"
@@ -33,13 +45,13 @@
         :placeholder
         :label
         :errorMessage
-        :fieldHasError
+        :field-has-error
         :required
-        :styleClassPassthrough
+        :style-class-passthrough
         :theme
-        :ariaDescribedby
+        :aria-describedby
         :size
-        :inputVariant
+        :input-variant
       >
         <template v-if="slots.left" #left>
           <slot name="left"></slot>
@@ -52,9 +64,21 @@
       <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
     </div>
 
-    <div v-if="inputVariant !== 'normal' && slots.description" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :id
+      :name
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
   </div>
 </template>
 
@@ -136,7 +160,7 @@ const formTheme = computed(() => {
 const id = `${props.name}-${useId()}`
 const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = slots.description ? `${id}-description` : undefined
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
   return props.fieldHasError ? errorId : ariaDescribedbyId
 })
 

package/app/components/forms/input-textarea/InputTextareaCore.vue

@@ -26,7 +26,7 @@
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
-      :aria-describedby="`${id}-error-message`"
+      :aria-describedby
       @focusin="updateFocus(true)"
       @focusout="updateFocus(false)"
     ></textarea>
@@ -56,6 +56,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  ariaDescribedby: {
+    type: String,
+    default: "",
+  },
   fieldHasError: {
     type: Boolean,
     default: false,

package/app/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -1,45 +1,79 @@
 <template>
-  <div
-    class="input-textarea-with-label"
-    :data-theme="formTheme"
-    :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
-  >
-    <InputLabel
-      :for="id"
-      :id
-      :theme
-      :name
-      :input-variant
-      :field-has-error
-      :style-class-passthrough="['input-textarea-label']"
+  <div>
+    <div
+      class="input-textarea-with-label"
+      :data-theme="formTheme"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
     >
-      <template #textLabel>{{ label }}</template>
-    </InputLabel>
+      <InputLabel
+        :for="id"
+        :id
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-textarea-label']"
+      >
+        <template #textLabel>{{ label }}</template>
+      </InputLabel>
+
+      <InputDescription
+        v-if="inputVariant !== 'outlined'"
+        :id
+        :name
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
 
-    <InputTextareaCore
-      v-model="modelValue"
-      v-model:isDirty="isDirty"
-      v-model:isActive="isActive"
-      :maxlength
+      <InputTextareaCore
+        v-model="modelValue"
+        v-model:isDirty="isDirty"
+        v-model:isActive="isActive"
+        :maxlength
+        :id
+        :name
+        :placeholder
+        :label
+        :field-has-error
+        :required
+        :style-class-passthrough
+        :theme
+        :size
+        :input-variant
+      >
+        <template v-if="slots.left" #left>
+          <slot name="left"></slot>
+        </template>
+        <template v-if="slots.right" #right>
+          <slot name="right"></slot>
+        </template>
+      </InputTextareaCore>
+      <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
+    </div>
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
       :id
       :name
-      :placeholder
-      :label
-      :fieldHasError
-      :required
-      :styleClassPassthrough
-      :theme
-      :size
-      :inputVariant
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
     >
-      <template v-if="slots.left" #left>
-        <slot name="left"></slot>
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
       </template>
-      <template v-if="slots.right" #right>
-        <slot name="right"></slot>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
       </template>
-    </InputTextareaCore>
-    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
+    </InputDescription>
   </div>
 </template>
 
@@ -103,11 +137,17 @@ const props = defineProps({
 
 const slots = useSlots()
 
-const id = useId()
 const formTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme
 })
 
+const id = `${props.name}-${useId()}`
+const errorId = `${id}-error-message`
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = slots.descriptionText || slots.descriptionHtml ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
+})
+
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
 const isActive = ref<boolean>(false)
 const isDirty = ref<boolean>(false)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",