srcdev-nuxt-forms 2.1.9 → 2.1.11

package/assets/styles/forms/themes/_error.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--red-6);
     --theme-form-input-outline-focus: var(--red-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-checkbox-outline: light-dark(var(--red-1), var(--red-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--red-6);
-    --theme-form-checkbox-symbol: var(--red-8);
+    --theme-form-checkbox-symbol: var(--red-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-radio-outline: light-dark(var(--red-1), var(--red-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--red-6);
-    --theme-form-radio-symbol: var(--red-8);
+    --theme-form-radio-symbol: var(--red-12);
+
+    --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
   }
 
   [data-btn-theme='error'] {
@@ -37,9 +44,6 @@
     --theme-btn-outline-focus: var(--red-0);
     --theme-btn-text-focus: var(--red-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
   }
-
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
 }

package/assets/styles/forms/themes/_ghost.css

@@ -8,35 +8,42 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='ghost'] {
-    --theme-btn-bg: var(--gray-0);
-    --theme-btn-border: transparent;
-    --theme-btn-outline: transparent;
-    --theme-btn-text: var(--gray-12);
-
-    --theme-btn-bg-hover: var(--gray-2);
-    --theme-btn-border-hover: transparent;
-    --theme-btn-outline-hover: transparent;
+    --theme-btn-bg: var(--gray-12);
+    --theme-btn-border: var(--gray-0);
+    --theme-btn-outline: var(--gray-12);
+    --theme-btn-text: var(--gray-0);
+
+    --theme-btn-bg-hover: var(--gray-0);
+    --theme-btn-border-hover: var(--gray-12);
+    --theme-btn-outline-hover: var(--gray-0);
     --theme-btn-text-hover: var(--gray-12);
 
-    --theme-btn-bg-focus: var(--gray-1);
-    --theme-btn-border-focus: transparent;
-    --theme-btn-outline-focus: transparent;
+    --theme-btn-bg-focus: var(--gray-0);
+    --theme-btn-border-focus: var(--gray-12);
+    --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_primary.css

@@ -12,14 +12,20 @@
     --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-checkbox-outline: light-dark(var(--blue-1), var(--blue-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--blue-6);
     --theme-form-checkbox-symbol: var(--blue-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-radio-outline: light-dark(var(--blue-1), var(--blue-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--blue-6);
     --theme-form-radio-symbol: var(--blue-12);
+
+    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-3));
   }
 
   [data-btn-theme='primary'] {

package/assets/styles/forms/themes/_secondary.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='secondary'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--gray-0);
     --theme-btn-text-focus: var(--gray-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
   }
 }

package/assets/styles/forms/themes/_success.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--green-6);
     --theme-form-input-outline-focus: var(--green-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-checkbox-outline: light-dark(var(--green-1), var(--green-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--green-6);
-    --theme-form-checkbox-symbol: var(--green-8);
+    --theme-form-checkbox-symbol: var(--green-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-radio-outline: light-dark(var(--green-1), var(--green-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--green-6);
-    --theme-form-radio-symbol: var(--green-8);
+    --theme-form-radio-symbol: var(--green-12);
+
+    --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
   }
 
   [data-btn-theme='success'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--green-0);
     --theme-btn-text-focus: var(--green-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
   }
 }

package/assets/styles/forms/themes/_tertiary.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-8);
+    --theme-form-checkbox-symbol: var(--gray-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-8);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
   }
 
   [data-btn-theme='tertiary'] {

package/assets/styles/forms/themes/_warning.css

@@ -8,17 +8,24 @@
     --theme-form-input-outline-active: var(--orange-6);
     --theme-form-input-outline-focus: var(--orange-6);
     --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
     --theme-form-checkbox-shadow: transparent;
     --theme-form-checkbox-shadow-focus: var(--orange-6);
-    --theme-form-checkbox-symbol: var(--orange-8);
+    --theme-form-checkbox-symbol: var(--orange-12);
 
     --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
     --theme-form-radio-shadow: transparent;
     --theme-form-radio-shadow-focus: var(--orange-6);
-    --theme-form-radio-symbol: var(--orange-8);
+    --theme-form-radio-symbol: var(--orange-12);
+
+    --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
   }
 
   [data-btn-theme='warning'] {
@@ -37,6 +44,6 @@
     --theme-btn-outline-focus: var(--orange-0);
     --theme-btn-text-focus: var(--orange-12);
 
-    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
   }
 }

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

@@ -1,6 +1,9 @@
 <template>
   <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon :name="icon" class="input-checkbox-decorator" />
+    <slot name="checkedIcon" v-if="isChecked">
+      <Icon name="material-symbols:check-small" class="input-checked-icon" />
+    </slot>
+
     <input
       type="checkbox"
       :true-value="trueValue"
@@ -19,7 +22,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, stateIcon, fieldHasError } = defineProps({
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
   id: {
     type: String,
     required: true,
@@ -58,13 +61,6 @@ const { id, name, required, trueValue, falseValue, multipleOptions, theme, style
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:checkbox-checked',
-      unchecked: 'carbon:checkbox',
-    },
-  },
   fieldHasError: {
     type: Boolean,
     default: false,
@@ -94,24 +90,29 @@ const isChecked = computed(() => {
     return modelValue.value === trueValue;
   }
 });
-
-const icon = computed(() => {
-  return isChecked.value ? stateIcon.checked : stateIcon.unchecked;
-});
 </script>
 
-<style scoped lang="css">
+<style lang="css">
 .input-checkbox-wrapper {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
   --_border-width: var(--input-border-width-default);
+  --_border-color: var(--theme-form-checkbox-border);
+  --_outline-color: var(--theme-form-checkbox-outline);
   --_box-shadow: none;
 
   display: grid;
   grid-template-areas: 'element-stack';
+  place-content: center;
 
-  background-color: var(--theme-form-radio-bg);
+  background-color: var(--theme-form-checkbox-bg);
   border-radius: 4px;
+  border: var(--_border-width) solid var(--_border-color);
+  outline: 1px solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+
+  height: var(--_checkbox-size);
+  width: var(--_checkbox-size);
 
   &:has(.input-checkbox-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -134,9 +135,9 @@ const icon = computed(() => {
     --_checkbox-size: 44px;
   }
 
-  .input-checkbox-decorator {
+  .input-checked-icon {
     grid-area: element-stack;
-    color: var(--theme-form-radio-symbol);
+    color: var(--theme-form-checkbox-symbol);
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
     box-shadow: var(--_box-shadow);
@@ -149,13 +150,15 @@ const icon = computed(() => {
     overflow: hidden;
     opacity: 0;
 
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
     &:hover {
       cursor: pointer;
     }
 
-    &:focus {
-      border: var(--_border-width) solid var(--theme-form-input-border);
-      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    &:focus-visible {
+      --_box-shadow: var(--theme-form-focus-box-shadow);
     }
   }
 }

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

@@ -1,6 +1,10 @@
 <template>
   <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
+    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxCore>
     <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
@@ -11,7 +15,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, optionsLayout, styleClassPassthrough, theme } = defineProps({
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -47,13 +51,6 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, s
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:checkbox-checked',
-      unchecked: 'carbon:checkbox',
-    },
-  },
   optionsLayout: {
     type: String as PropType<string>,
     default: 'equal-widths',

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

@@ -6,7 +6,11 @@
     </template>
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
+        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :optionsLayout :theme>
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputCheckboxWithLabel>
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -19,7 +23,7 @@ import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
 import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -74,13 +78,6 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: Boolean,
     default: true,
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:checkbox-checked',
-      unchecked: 'carbon:checkbox',
-    },
-  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],

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

@@ -5,7 +5,10 @@
       <slot name="description"></slot>
     </template>
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :stateIcon :theme>
+      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme>
+        <template #checkedIcon>
+          <slot name="checkedIcon"></slot>
+        </template>
         <template v-if="hasLabelContent" #labelContent>
           <slot name="labelContent"></slot>
         </template>
@@ -19,7 +22,7 @@
 import propValidators from '../../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -79,13 +82,6 @@ const { id, name, legend, label, required, fieldHasError, errorMessage, size, op
     type: Boolean,
     default: true,
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:checkbox-checked',
-      unchecked: 'carbon:checkbox',
-    },
-  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],

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

@@ -13,7 +13,7 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          theme="primary"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -28,7 +28,7 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          theme="primary"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

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

@@ -1,6 +1,8 @@
 <template>
   <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon :name="icon" class="input-radiobutton-decorator" />
+    <slot name="checkedIcon" v-if="isChecked">
+      <Icon name="material-symbols:circle" class="input-checked-icon" />
+    </slot>
     <input
       type="radio"
       :true-value="trueValue"
@@ -19,7 +21,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, stateIcon, fieldHasError } = defineProps({
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
   id: {
     type: String,
     required: true,
@@ -58,13 +60,6 @@ const { id, name, required, trueValue, falseValue, multipleOptions, theme, style
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:radio-button-checked',
-      unchecked: 'carbon:radio-button',
-    },
-  },
   fieldHasError: {
     type: Boolean,
     default: false,
@@ -97,36 +92,29 @@ const isChecked = computed(() => {
     return modelValue.value === trueValue;
   }
 });
-
-const icon = computed(() => {
-  return isChecked.value ? stateIcon.checked : stateIcon.unchecked;
-});
-
-const useCustomizeIcon = (content: string, name: string, prefix: string, provider: string) => {
-  console.log('useCustomizeIcon');
-  // if (prefix !== 'carbon') return content; // Ignore Prefix
-
-  return content
-    .replace(/stroke-width="[^"]*"/g, `stroke-width="2"`) // Change stroke width to 2
-    .replace(/stroke="[^"]*"/g, `stroke="#ff0000"`) // Change stroke color to red
-    .replace(/fill="[^"]*"/g, `fill="#00ff00"`) // Change fill color to green
-    .replace(/animation-duration="[^"]*"/g, `animation-duration="1s"`) // Change animation duration to 1s (for animated icons)
-    .replace(/opacity="[^"]*"/g, `opacity="0.8"`); // Change opacity to 0.8
-};
 </script>
 
-<style scoped lang="css">
+<style lang="css">
 .input-radiobutton-wrapper {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
   --_border-width: var(--input-border-width-default);
+  --_border-color: var(--theme-form-radio-border);
+  --_outline-color: var(--theme-form-radio-outline);
   --_box-shadow: none;
 
   display: grid;
   grid-template-areas: 'element-stack';
+  /* place-content: center; */
 
   background-color: var(--theme-form-radio-bg);
   border-radius: 50%;
+  border: var(--_border-width) solid var(--_border-color);
+  outline: 1px solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+
+  height: var(--_checkbox-size);
+  width: var(--_checkbox-size);
 
   &:has(.input-radiobutton-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -149,12 +137,15 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
     --_checkbox-size: 44px;
   }
 
-  .input-radiobutton-decorator {
+  .input-checked-icon {
+    --_checked-size: calc(var(--_checkbox-size) * 0.65);
     grid-area: element-stack;
+    align-self: center;
+    justify-self: center;
     color: var(--theme-form-radio-symbol);
-    height: var(--_checkbox-size);
-    width: var(--_checkbox-size);
-    box-shadow: var(--_box-shadow);
+    height: var(--_checked-size);
+    width: var(--_checked-size);
+    translate: -2px -2px;
   }
 
   .input-radiobutton-core {
@@ -164,13 +155,15 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
     overflow: hidden;
     opacity: 0;
 
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
     &:hover {
       cursor: pointer;
     }
 
-    &:focus {
-      border: var(--_border-width) solid var(--theme-form-input-border);
-      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    &:focus-visible {
+      --_box-shadow: var(--theme-form-focus-box-shadow);
     }
   }
 }

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

@@ -1,6 +1,10 @@
 <template>
   <div class="input-radiobutton-with-label" :class="[elementClasses, { error: fieldHasError }]">
-    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
+    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputRadiobuttonCore>
     <label v-if="hasLabelContent" class="input-radiobutton-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
@@ -11,7 +15,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -47,13 +51,6 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, s
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:radio-button-checked',
-      unchecked: 'carbon:radio-button',
-    },
-  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],

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

@@ -6,7 +6,11 @@
     </template>
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
+        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="`${name}-${item.name}`" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :theme>
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputRadiobuttonWithLabel>
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -15,11 +19,9 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+import type { IFormMultipleOptions } from '@/types/types.forms';
 
-import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
-
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -74,13 +76,6 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: Boolean,
     default: true,
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:radio-button-checked',
-      unchecked: 'carbon:radio-button',
-    },
-  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],

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

@@ -16,7 +16,7 @@
         :list="hasDataList ? name + '-datalist' : ''"
         :class="['input-range-core', `input-range--${size}`, `input-range--${weight}`, styleClassPassthrough]"
         v-model="modelValue"
-        ref="inputField"
+        ref="inputRange"
       />
 
       <template v-if="hasDataList">
@@ -102,6 +102,15 @@ const formTheme = computed(() => {
 });
 
 const modelValue = defineModel<number | readonly number[]>();
+
+// @input="changeBackgroundColor"
+const changeBackgroundColor = () => {
+  console.log('changeBackgroundColor()');
+  const inputRange = ref<HTMLInputElement | null>(null);
+  if (inputRange.value !== null) {
+    inputRange.value.style.accentColor = 'hsl(' + modelValue.value + ', 100%, 50%)';
+  }
+};
 </script>
 
 <style lang="css">
@@ -126,11 +135,41 @@ const modelValue = defineModel<number | readonly number[]>();
   .input-range-container {
     flex-grow: 1;
     .input-range-core {
-      color: var(--theme-form-input-text);
+      accent-color: var(--theme-form-range-accent-color);
       height: var(--_input-range-height);
       margin: 0;
       width: 100%;
 
+      /* For Chrome, Safari, Opera, and Edge */
+      /* &::-webkit-slider-runnable-track {
+        background: var(--theme-form-range-accent-color);
+        height: var(--_input-range-height);
+      } */
+
+      /* For Firefox */
+      /* &::-moz-range-track {
+        background: var(--theme-form-range-accent-color);
+        height: var(--_input-range-height);
+      } */
+
+      /* Stling the thumb */
+      /* &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        background: #5cd5eb;
+        height: 2rem;
+        width: 1rem;
+        border-radius: 10px;
+      } */
+
+      /* For Firefox */
+      /* &::-moz-range-thumb {
+        background: #5cd5eb;
+        height: 2rem;
+        width: 1rem;
+        border-radius: 10px;
+        border: none;
+      } */
+
       &:focus-visible {
         box-shadow: var(--theme-form-focus-box-shadow);
       }

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

@@ -16,7 +16,7 @@
           :readonly="Number(modelValue) === min"
           :is-pending="false"
           buttonText="Step down"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -31,7 +31,7 @@
           :readonly="Number(modelValue) === max"
           :is-pending="false"
           buttonText="Step up"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

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

@@ -6,7 +6,7 @@
         @click.stop.prevent="toggleDisplayPassword"
         :is-pending="false"
         :buttonText
-        theme="ghost"
+        :theme
         size="x-small"
         @focusin="updateFocus(name, true)"
         @focusout="updateFocus(name, false)"

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

@@ -29,7 +29,7 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>
@@ -44,7 +44,7 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          theme="ghost"
+          :theme
           size="x-small"
         >
           <template #iconOnly>

package/package.json

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