srcdev-nuxt-forms 2.3.0 → 2.4.0

package/components/forms/input-button/InputButtonCore.vue

@@ -3,7 +3,7 @@
     :type
     :readonly
     :aria-disabled="readonly"
-    :data-testid="dataTestid"
+    :data-testid
     :data-btn-theme="theme"
     :data-size="size"
     class="input-button-core"

package/components/forms/input-button/variants/InputButtonConfirm.vue

@@ -1,17 +1,5 @@
 <template>
-  <InputButtonCore
-    type="button"
-    :use-effect="useEffect"
-    :isPending="isPending"
-    :readonly
-    :effect="effect"
-    :data-testid="dataTestid"
-    :size
-    :weight
-    :button-text="buttonText"
-    :style-class-passthrough
-    :theme
-  >
+  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme>
     <template #left>
       <Icon name="material-symbols:check-circle-outline" class="icon" />
     </template>
@@ -21,7 +9,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const props = defineProps({
+defineProps({
   size: {
     type: String as PropType<string>,
     default: 'normal',

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -1,11 +1,11 @@
 <template>
-  <InputButtonCore type="button" :use-effect="useEffect" :isPending="isPending" :readonly :effect="effect" :data-testid :size :weight :button-text :style-class-passthrough :theme />
+  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme />
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const props = defineProps({
+defineProps({
   size: {
     type: String as PropType<string>,
     default: 'normal',

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

@@ -62,15 +62,11 @@
 import propValidators from '../c12/prop-validators';
 import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
-const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const { dataTestid, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
   dataTestid: {
     type: String,
     default: 'multiple-checkboxes',
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -153,9 +149,10 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleC
 const modelValue = defineModel();
 const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
+const id = useId();
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : null;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
   return fieldHasError ? errorId : ariaDescribedbyId;
 });
 </script>

package/components/forms/input-checkbox/SingleCheckbox.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxRadioWithLabel type="checkbox" :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
+      <InputCheckboxRadioWithLabel type="checkbox" :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
         <template #checkedIcon>
           <slot name="checkedIcon"></slot>
         </template>
@@ -24,15 +24,11 @@
 import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { dataTestid, id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
+const props = defineProps({
   dataTestid: {
     type: String,
     default: 'multiple-radio-buttons',
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -106,21 +102,21 @@ const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const hasDescription = computed(() => slots.description !== undefined);
 const hasLabelContent = computed(() => slots.labelContent !== undefined);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const modelValue = defineModel();
 const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
-const inputErrorStyles = ref<string[]>(styleClassPassthrough);
+const inputErrorStyles = ref<string[]>(props.styleClassPassthrough);
 
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 watchEffect(() => {
-  if (!hasDescription.value && fieldHasError) {
+  if (!hasDescription.value && props.fieldHasError) {
     inputErrorStyles.value.push('mbs-12');
   } else {
     inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');

package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, direction, ariaDescribedby } = defineProps({
+const props = defineProps({
   type: {
     type: String as PropType<'checkbox' | 'radio'>,
     required: true,
@@ -93,15 +93,15 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
 
 const slots = useSlots();
 const hasLabelContent = computed(() => slots.labelContent !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const modelValue = defineModel();
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
-const flexDirection = ref(direction);
+const flexDirection = ref(props.direction);
 </script>
 
 <style lang="css">

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { isButton, type, id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError, ariaDescribedby } = defineProps({
+const props = defineProps({
   isButton: {
     type: Boolean,
     default: false,
@@ -86,10 +86,10 @@ const { isButton, type, id, name, required, trueValue, falseValue, multipleOptio
   },
 });
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<any>();
@@ -97,16 +97,16 @@ const modelValue = defineModel<any>();
 const inputField = ref<HTMLInputElement | null>(null);
 
 const defaultIcon = computed(() => {
-  return type === 'checkbox' ? 'material-symbols:check-small' : 'material-symbols:circle';
+  return props.type === 'checkbox' ? 'material-symbols:check-small' : 'material-symbols:circle';
 });
 
 const isArray = Array.isArray(modelValue.value);
 
 const isChecked = computed(() => {
   if (isArray) {
-    return modelValue.value.includes(trueValue);
+    return modelValue.value.includes(props.trueValue);
   } else {
-    return modelValue.value === trueValue;
+    return modelValue.value === props.trueValue;
   }
 });
 </script>

package/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -15,15 +15,11 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme, ariaDescribedby } = defineProps({
+const props = defineProps({
   type: {
     type: String as PropType<'checkbox' | 'radio'>,
     required: true,
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -81,9 +77,10 @@ const { type, id, name, label, required, fieldHasError, trueValue, falseValue, s
 
 const slots = useSlots();
 const hasLabelContent = computed(() => slots.labelContent !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const modelValue = defineModel();
+const id = useId();
 </script>
 
 <style lang="css">

package/components/forms/input-number/InputNumberCore.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, min, max, step, theme, size, weight, fieldHasError, styleClassPassthrough } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -94,15 +94,13 @@ const hasLeftContent = computed(() => slots.left !== undefined);
 const hasRightContent = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<number | readonly number[]>();
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-const minLength = computed(() => `${max.toString().length + 3}ch`);
-
-// updateElementClasses(['number-1']);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const minLength = computed(() => `${props.max.toString().length + 1}em`);
 </script>
 
 <style lang="css">

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -44,11 +44,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -116,10 +112,11 @@ const slots = useSlots();
 const hasDescription = computed(() => slots.description !== undefined);
 const hasLeftContent = computed(() => slots.left !== undefined);
 const hasRightContent = computed(() => slots.right !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+const id = useId();
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<number | readonly number[]>();

package/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -62,15 +62,11 @@
 import propValidators from '../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { dataTestid, id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const props = defineProps({
   dataTestid: {
     type: String,
     default: 'multiple-radio-buttons',
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -147,12 +143,13 @@ const { dataTestid, id, name, legend, label, required, fieldHasError, placeholde
 
 const slots = useSlots();
 const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+const id = useId();
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();

package/components/forms/input-range/InputRangeCore.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, min, max, step, theme, size, weight, styleClassPassthrough, fieldHasError } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -98,7 +98,7 @@ const hasLeftContent = computed(() => slots.left !== undefined);
 const hasRightContent = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<number | readonly number[]>();

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -47,11 +47,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const { name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
   name: {
     type: String,
     required: true,
@@ -126,6 +122,7 @@ const hasLeftContent = computed(() => slots.left !== undefined);
 const hasRightContent = computed(() => slots.right !== undefined);
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
+const id = useId();
 const formTheme = computed(() => {
   return fieldHasError ? 'error' : theme;
 });

package/components/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, min, max, step, rangeLowLabel, rangeHighLabel, theme, size, weight, styleClassPassthrough, fieldHasError } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -115,10 +115,10 @@ const toolTipHighContainerStart = computed(() => {
 });
 
 const lowValue = computed(() => {
-  return Math.floor(Number(max) - Number(highValue.value));
+  return Math.floor(Number(props.max) - Number(highValue.value));
 });
 const highValue = computed(() => {
-  return Math.floor((Number(modelValue.value) / max) * 100);
+  return Math.floor((Number(modelValue.value) / props.max) * 100);
 });
 
 const update = () => {

package/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, label, rangeLowLabel, rangeHighLabel, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -95,10 +95,10 @@ const { id, name, label, rangeLowLabel, rangeHighLabel, required, min, max, step
 
 const slots = useSlots();
 const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<number | readonly number[]>();

package/components/forms/input-text/InputTextCore.vue

@@ -36,11 +36,10 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-// const props = defineProps({
-const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme, ariaDescribedby, size } = defineProps({
+const props = defineProps({
   type: {
-    // type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
-    type: String,
+    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
+    // type: String,
     default: 'text',
     validator(value: string) {
       return propValidators.inputTypesText.includes(value);
@@ -106,7 +105,7 @@ const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel();
@@ -114,7 +113,7 @@ const isDirty = defineModel('isDirty');
 const isActive = defineModel('isActive');
 
 const inputPattern = computed(() => {
-  return inputmode === 'numeric' ? '[0-9]+' : undefined;
+  return props.inputmode === 'numeric' ? '[0-9]+' : undefined;
 });
 
 const updateFocus = (isFocused: boolean) => {
@@ -123,7 +122,7 @@ const updateFocus = (isFocused: boolean) => {
 
 const inputField = ref<HTMLInputElement | null>(null);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 // TODO: Move this to a utility function to allow removeEventListener on unmounted
 // Leaving like this could lead to memory leaks
@@ -145,7 +144,7 @@ const validateInput = () => {
 };
 
 onMounted(() => {
-  if (inputmode === 'numeric') validateInput();
+  if (props.inputmode === 'numeric') validateInput();
 });
 </script>
 

package/components/forms/input-text/variants/InputPasswordWithLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <InputTextWithLabel v-model="modelValue" :data-form-theme="formTheme" :type="inputType" :maxlength :id :name :placeholder :label :errorMessage :fieldHasError :required :styleClassPassthrough :theme>
+  <InputTextWithLabel v-model="modelValue" :data-form-theme="formTheme" :type="inputType" :maxlength :name :placeholder :label :errorMessage :fieldHasError :required :styleClassPassthrough :theme>
     <template #right>
       <InputButtonCore
         type="button"
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   type: {
     type: String,
     default: 'password',
@@ -32,10 +32,6 @@ const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasErr
     type: Number,
     default: 255,
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -81,19 +77,19 @@ const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasErr
 });
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel();
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const updateFocus = (name: string, isFocused: boolean) => {
   // console.log('updateFocus', name, isFocused);
   // modelValue.value.focusedField = isFocused ? name : '';
 };
 
-const inputType = ref(type);
+const inputType = ref(props.type);
 
 const displayPassword = ref(false);
 const buttonText = computed(() => {
@@ -106,31 +102,3 @@ const toggleDisplayPassword = () => {
 
 updateElementClasses(['has-right-button']);
 </script>
-
-<style lang="css">
-/* .input-text-with-label {
-  &.has-left-button,
-  &.has-right-button {
-    .input-text-wrapper {
-      .slot {
-        .input-button-core {
-          border: initial;
-          border-radius: 0;
-          outline: initial;
-          box-shadow: unset;
-        }
-      }
-
-      .left-slot {
-        margin-inline-end: 0;
-        border-right: 2px solid var(--theme-btn-bg-hover);
-      }
-
-      .right-slot {
-        margin-inline-end: 0;
-        border-left: 2px solid var(--theme-btn-bg-hover);
-      }
-    }
-  }
-} */
-</style>

package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -56,21 +56,17 @@
         </InputButtonCore>
       </template>
     </InputTextCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, step, min, max, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -133,21 +129,22 @@ const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
+const id = useId();
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-const minLength = computed(() => `${max.toString().length + 3}ch`);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
 const updateValue = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {

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

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
@@ -54,10 +54,6 @@ const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage,
       return propValidators.inputMode.includes(value);
     },
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -108,20 +104,21 @@ const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
+const id = useId();
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const testDirty = () => {
   const watchValue = modelValue.value ?? '';

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

@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
@@ -82,7 +82,7 @@ const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
@@ -95,11 +95,7 @@ const updateFocus = (isFocused: boolean) => {
 
 const inputField = ref<HTMLInputElement | null>(null);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-
-onMounted(() => {
-  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
-});
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

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

@@ -16,15 +16,11 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -73,15 +69,16 @@ const slots = useSlots();
 const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
+const id = useId();
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const testDirty = () => {
   const watchValue = modelValue.value ?? '';

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size, ariaDescribedby } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -78,16 +78,16 @@ const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const inputId = computed(() => `toggle-sitch-${id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`);
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === trueValue ? falseValue : trueValue;
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
 };
 </script>
 

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -13,18 +13,14 @@
         <slot name="iconOff"></slot>
       </template>
     </ToggleSwitchCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, required, errorMessage, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -84,17 +80,18 @@ const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
+const id = useId();
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -16,11 +16,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, labelWeight, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -72,8 +68,10 @@ const slots = useSlots();
 const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
+const id = useId();
+
 const labelWeightClass = computed(() => {
-  switch (labelWeight) {
+  switch (props.labelWeight) {
     case 'bold':
       return 'body-normal-bold';
     case 'semi-bold':
@@ -86,7 +84,7 @@ const labelWeightClass = computed(() => {
 });
 
 const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToggleSwitchWithLabelInline v-model="displayMode" :id :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
+  <ToggleSwitchWithLabelInline v-model="displayMode" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
     <template #iconOn>
       <Icon name="radix-icons:moon" class="icon" />
     </template>
@@ -12,11 +12,7 @@
 <script setup lang="ts">
 import propValidators from '../../forms/c12/prop-validators';
 
-const { styleClassPassthrough } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+defineProps({
   name: {
     type: String,
     required: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -26,14 +26,14 @@
   "devDependencies": {
     "@nuxt/eslint-config": "0.7.5",
     "@nuxt/icon": "1.10.3",
-    "@nuxt/test-utils": "3.15.1",
+    "@nuxt/test-utils": "3.15.4",
     "@vue/test-utils": "2.4.6",
     "eslint": "9.18.0",
-    "happy-dom": "15.11.7",
+    "happy-dom": "16.6.0",
     "nuxt": "3.15.0",
     "release-it": "18.1.1",
     "typescript": "5.7.3",
-    "vitest": "2.1.8",
+    "vitest": "3.0.2",
     "vue": "3.5.13"
   },
   "dependencies": {