srcdev-nuxt-forms 6.1.22 → 6.2.0

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

@@ -4,10 +4,9 @@
     :readonly
     :aria-disabled="readonly"
     :data-testid
-    :data-theme="theme"
     :data-size="size"
     class="input-button-core"
-    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }]"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }, theme]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="slots.left && !slots.iconOnly">

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

@@ -2,9 +2,8 @@
   <label
     :for="id"
     class="input-checkbox-radio-options-button"
-    :data-theme="formTheme"
     :data-size="size"
-    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }, { lozenge: displayAsLozenge }]"
+    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }, { lozenge: displayAsLozenge }, formTheme]"
   >
     <InputCheckboxRadioCore
       :isButton="true"

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

@@ -1,8 +1,6 @@
 <template>
   <div
     class="input-checkbox-radio-wrapper"
-    :data-theme="formTheme"
-    :data-size="size"
     :class="[
       type,
       size,
@@ -10,6 +8,7 @@
       { error: fieldHasError },
       { button: isButton },
       { 'display-as-disc': displayAsDisc },
+      formTheme,
     ]"
   >
     <div class="input-checked-icon-slot">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-wrapper" :data-theme="formTheme" :data-size="size">
+  <div class="input-number-wrapper" :class="formTheme" :data-size="size">
     <div v-if="slots.left" class="slot left">
       <slot name="left"></slot>
     </div>

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

@@ -1,9 +1,8 @@
 <template>
   <div
     class="input-number-with-label"
-    :data-theme="formTheme"
     :data-size="size"
-    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
+    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }, formTheme]"
   >
     <InputLabel
       :for="id"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-wrapper" :data-theme="formTheme">
+  <div class="input-range-wrapper" :class="formTheme">
     <div v-if="slots.left" class="slot left">
       <slot name="left"></slot>
     </div>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
+  <div class="input-range-with-label" :class="[elementClasses, formTheme, { error: fieldHasError }]">
     <InputLabel
       :for="id"
       :id

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-fancy-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
+  <div class="input-range-fancy-with-label" :class="[elementClasses, formTheme, { error: fieldHasError }]">
     <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
     <template v-if="slots.description">
       <slot name="description"></slot>

package/app/components/forms/input-select/InputSelectCore.vue

@@ -1,9 +1,8 @@
 <template>
   <div
     class="input-select-wrapper"
-    :data-theme="formTheme"
     :data-size="size"
-    :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+    :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, formTheme, { error: fieldHasError }]"
   >
     <select v-model="modelValue" class="input-select-core" :name :id :title>
       <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
@@ -130,8 +129,10 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
     }
 
     &::picker(select) {
-      transition: display allow-discrete var(--theme-form-transition-duration),
-        opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
+      transition:
+        display allow-discrete var(--theme-form-transition-duration),
+        opacity var(--theme-form-transition-duration),
+        overlay var(--theme-form-transition-duration) allow-discrete;
     }
 
     &:not(:open)::picker(select) {

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

@@ -2,10 +2,8 @@
   <div>
     <div
       class="input-select-with-label"
-      :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+      :class="[inputVariant, formTheme, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
       :data-testid
-      :data-theme="formTheme"
-      :data-size="size"
     >
       <InputLabel
         :for="id"

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

@@ -1,11 +1,11 @@
 <template>
   <div
     class="input-text-wrapper"
-    :data-theme="formTheme"
-    :data-size="size"
     :data-inputmode="inputmode"
     :class="[
       inputVariant,
+      formTheme,
+      size,
       { dirty: isDirty },
       { active: isActive },
       { error: fieldHasError },

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

@@ -1,8 +1,7 @@
 <template>
   <div
     class="input-text-with-label"
-    :data-theme="formTheme"
-    :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]"
+    :class="[inputVariant, formTheme, elementClasses, { dirty: isDirty }, { active: isActive }]"
   >
     <InputLabel
       :for="id"

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

@@ -2,8 +2,7 @@
   <div>
     <div
       class="input-text-with-label"
-      :data-theme="formTheme"
-      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
+      :class="[elementClasses, inputVariant, formTheme, { dirty: isDirty }, { active: isActive }]"
     >
       <InputLabel
         :for="id"

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

@@ -1,10 +1,10 @@
 <template>
   <div
     class="input-textarea-wrapper"
-    :data-theme="formTheme"
-    :data-size="size"
     :class="[
       inputVariant,
+      formTheme,
+      size,
       { dirty: isDirty },
       { active: isActive },
       { error: fieldHasError },

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

@@ -2,8 +2,7 @@
   <div>
     <div
       class="input-textarea-with-label"
-      :data-theme="formTheme"
-      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
+      :class="[elementClasses, formTheme, inputVariant, { dirty: isDirty }, { active: isActive }]"
     >
       <InputLabel
         :for="id"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
+  <div class="toggle-switch-core" :class="[elementClasses, formTheme, size]">
     <div
       @click="toggleSwitchValue"
       class="toggle-switch-wrapper"

package/app/components/forms/toggle-switch/ToggleSwitchCoreOld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
+  <div class="toggle-switch-core" :class="[elementClasses, formTheme, size]">
     <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
       <input
         type="checkbox"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formTheme">
+  <div class="toggle-switch-with-label" :class="[elementClasses, formTheme]">
     <InputLabel
       :for="`toggle-sitch-${id}`"
       :id

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-theme="theme">
+  <div class="toggle-switch-with-label-inline" :class="[elementClasses, theme]">
     <InputLabel
       :for="`toggle-sitch-${id}`"
       :id

package/app/components/forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="triple-toggle-switch" :class="[elementClasses]" :data-size="size" :data-theme="theme">
+  <div class="triple-toggle-switch" :class="[elementClasses, size, theme]">
     <div class="triple-toggle-switch-wrapper">
       <div class="selected-option-marker-wrapper">
         <div class="selected-option-marker" :class="[{ show: showMarker }]"></div>

package/app/components/utils/colour-scheme-select/ColourSchemeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="colour-scheme-select" :data-size="size" :data-theme="theme">
+  <div class="colour-scheme-select" :class="[theme, size]">
     <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
       <div class="select-scheme-marker-wrapper">
         <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
@@ -165,8 +165,8 @@ watch(currentActiveIndex, () => {
   --_form-outline-colour: var(--theme-form-radio-outline);
 
   --_form-border-radius: calc(
-    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) +
-      var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
+    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) +
+      var(--_form-padding) + var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
       var(--_select-scheme-group-outline-width)
   );
 

package/app/components/utils/colour-scheme-select/ColourSchemeSelectOld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="colour-scheme-select" :data-size="size" :data-theme="theme">
+  <div class="colour-scheme-select" :class="[theme, size]">
     <p>Color Scheme select</p>
 
     <form class="colour-scheme-select-form mbe-20">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.22",
+  "version": "6.2.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -23,30 +23,31 @@
     "nuxt.config.ts"
   ],
   "devDependencies": {
-    "@iconify-json/carbon": "1.2.13",
+    "@iconify-json/carbon": "1.2.14",
     "@iconify-json/gridicons": "1.2.4",
-    "@iconify-json/material-symbols": "1.2.40",
-    "@iconify-json/material-symbols-light": "1.2.40",
+    "@iconify-json/material-symbols": "1.2.44",
+    "@iconify-json/material-symbols-light": "1.2.44",
     "@iconify-json/radix-icons": "1.2.5",
-    "@nuxt/eslint": "1.9.0",
-    "@nuxt/icon": "2.0.0",
-    "@nuxt/test-utils": "3.19.2",
+    "@iconify-json/ri": "1.2.6",
+    "@nuxt/eslint": "1.10.0",
+    "@nuxt/icon": "2.1.0",
+    "@nuxt/test-utils": "3.20.1",
+    "@pinia/nuxt": "0.11.3",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.37.0",
-    "happy-dom": "18.0.1",
-    "nuxt": "4.1.2",
-    "release-it": "19.0.5",
+    "eslint": "9.39.1",
+    "happy-dom": "20.0.10",
+    "nuxt": "4.2.1",
+    "patch-package": "8.0.1",
+    "pinia": "3.0.4",
+    "pinia-plugin-persistedstate": "4.7.1",
+    "release-it": "19.0.6",
     "typescript": "5.9.3",
-    "vitest": "3.2.4",
+    "vitest": "3.2.0",
     "zod": "4.1.12"
   },
   "dependencies": {
     "@iconify-json/ph": "1.2.2",
-    "@iconify-json/ri": "1.2.5",
-    "@pinia/nuxt": "0.11.2",
-    "modern-normalize": "3.0.1",
-    "pinia": "3.0.3",
-    "pinia-plugin-persistedstate": "4.5.0"
+    "modern-normalize": "3.0.1"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",