srcdev-nuxt-forms 5.1.1 → 6.0.1

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

@@ -0,0 +1,125 @@
+<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']">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
+    <InputTextareaCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+      :size
+      :inputVariant
+    >
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextareaCore>
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+const props = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    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);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'default',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const id = useId();
+const formTheme = computed(() => {
+  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(props.styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>

package/{components → app/components}/forms/toggle-switch/ToggleSwitchCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div @click="toggleSwitchValue" class="toggle-switch-wrapper" :class="[{ round }, { 'use-default-icons': useDefaultIcons }]" :for="inputId">
       <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required :checked="isChecked" />
       <div class="symbol-wrapper" :class="[{ round }]">

package/{components → app/components}/forms/toggle-switch/ToggleSwitchCoreOld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
       <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
       <div class="symbol-wrapper" :class="[{ round }]">

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

@@ -1,6 +1,9 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-form-theme="formTheme">
-    <label class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</label>
+  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formTheme">
+    <InputLabel :for="`toggle-sitch-${id}`" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-switch-label', 'input-text-label', 'body-normal-bold']">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
     <div v-if="hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>

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

@@ -1,6 +1,9 @@
 <template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-form-theme="theme">
-    <label class="toggle-switch-label input-text-label" :class="labelWeightClass" :for="`toggle-sitch-${id}`">{{ label }}</label>
+  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-theme="theme">
+    <InputLabel :for="`toggle-sitch-${id}`" :id :theme :name input-variant="normal" :style-class-passthrough="['input-switch-label', 'input-text-label', labelWeightClass]">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
     <ToggleSwitchCore v-model="modelValue" :id :name :true-value :false-value :theme :round :size>
       <template v-if="hasIconOnSlot" #iconOn>
         <slot name="iconOn"></slot>

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

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

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

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

package/{composables → app/composables}/useErrorMessages.ts

@@ -1,4 +1,4 @@
-import type { IFormData } from '@/types/types.forms';
+import type { IFormData } from '../../shared/types/types.forms';
 
 export function useErrorMessage(name: string, formData: Ref<IFormData>) {
   const defaultError = ref('');
@@ -12,7 +12,7 @@ export function useErrorMessage(name: string, formData: Ref<IFormData>) {
     console.log(`errorMessage()`);
     if (hasCustomError()) {
       console.log(`errorMessage() | IF`);
-      return errorMessages.value[name].message;
+      return errorMessages.value[name]?.message;
     } else {
       return defaultError.value;
     }

package/{composables → app/composables}/useFormControl.ts

@@ -1,5 +1,5 @@
-import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
-import { formFieldC12 } from '@/components/forms/c12/utils';
+import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '../../shared/types/types.forms';
+// import { formFieldC12 } from '@/components/forms/c12/utils';
 
 // export function useFormControl(name: string = '') {
 export function useFormControl(name: string = '') {
@@ -50,7 +50,13 @@ export function useFormControl(name: string = '') {
     console.log(`useFormControl | updatePreviousValues`);
 
     Object.keys(formData.value.data).forEach((key) => {
-      formData.value.formFieldsC12[key].previousValue = formData.value.data[key];
+      if (formData.value.formFieldsC12[key]) {
+        const currentValue = formData.value.data[key];
+        // Filter out undefined values and IOptionsValueArr[] which are not supported by previousValue
+        if (currentValue !== undefined && !Array.isArray(currentValue)) {
+          formData.value.formFieldsC12[key].previousValue = currentValue;
+        }
+      }
     });
   };
 
@@ -86,7 +92,7 @@ export function useFormControl(name: string = '') {
     let count = 0;
 
     for (const key in obj) {
-      if (obj.hasOwnProperty(key) && obj[key].useCustomError === true) {
+      if (obj.hasOwnProperty(key) && obj[key]?.useCustomError === true) {
         count++;
       }
     }
@@ -108,11 +114,11 @@ export function useFormControl(name: string = '') {
    */
   const updateErrorMessages = async (name: string, message: string = '', valid: boolean = false) => {
     if (!valid) {
-      // formData.value.validityState[name] = valid;
-      // formData.value.errorMessages[name] = {
-      //   useCustomError: true,
-      //   message,
-      // };
+      // Ensure the form field exists before updating it
+      if (!formData.value.formFieldsC12[name]) {
+        console.warn(`Form field "${name}" not found in formFieldsC12`);
+        return;
+      }
 
       formData.value.formFieldsC12[name].useCustomError = true;
 

package/{composables → app/composables}/useZodValidation.ts

@@ -1,6 +1,6 @@
 import { ref, reactive, toRaw, type Ref } from 'vue';
 import { z, ZodError } from 'zod';
-import type { ApiErrorResponse } from '../types/types.forms';
+import type { ApiErrorResponse } from '../../shared/types/types.forms';
 
 const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>) => {
   const zodFormControl = reactive({

package/nuxt.config.ts

@@ -2,8 +2,11 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['modern-normalize', './assets/styles/main.css'],
+  css: ['modern-normalize', './app/assets/styles/main.css'],
   modules: ['@nuxt/icon', '@nuxt/test-utils/module'],
+  alias: {
+    '#shared': './shared',
+  },
   typescript: {
     tsConfig: {
       compilerOptions: {
@@ -30,5 +33,8 @@ export default defineNuxtConfig({
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: '2024-07-13',
+  compatibilityDate: '2024-12-01',
+  future: {
+    compatibilityVersion: 4,
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "5.1.1",
+  "version": "6.0.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -18,27 +18,26 @@
     "test": "vitest"
   },
   "files": [
-    "assets/",
-    "components/",
-    "composables/",
-    "types/"
+    "app/",
+    "shared/",
+    "nuxt.config.ts"
   ],
   "devDependencies": {
     "@iconify-json/carbon": "1.2.10",
     "@iconify-json/material-symbols": "1.2.29",
     "@iconify-json/material-symbols-light": "1.2.29",
-    "@nuxt/eslint-config": "1.5.2",
+    "@nuxt/eslint-config": "1.8.0",
     "@nuxt/icon": "1.15.0",
-    "@nuxt/test-utils": "3.17.2",
+    "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "2.4.6",
     "eslint": "9.31.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.17.7",
+    "nuxt": "4.0.3",
     "release-it": "18.1.2",
     "typescript": "5.8.3",
-    "vitest": "3.0.8",
-    "vue": "3.5.17",
-    "zod": "^4.0.0"
+    "vitest": "3.2.4",
+    "vue": "3.5.18",
+    "zod": "4.0.0"
   },
   "dependencies": {
     "@iconify-json/gridicons": "1.2.2",

package/{types/types.zodFormControl.ts → shared/types/types.zodFormControl.d.ts}

@@ -1,4 +1,4 @@
-import type { IFieldsInitialState, IFormFieldsState, IFormFieldsC12, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
+import type { IFieldsInitialState, IFormFieldsState, IFormFieldsC12, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from './types.forms';
 
 export interface IZodeFormControl {
   [x: string]: string | boolean | number | URL | object;

package/assets/styles/extends-layer/srcdev-forms/components/_form-core.css

@@ -1,8 +0,0 @@
-:root {
-  .underlined,
-  .normal,
-  .input-select-core,
-  .input-checkbox-radio-options-button {
-    --form-core-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 25%));
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -1,16 +0,0 @@
-:root {
-  /* Label vars */
-  .form-fieldset {
-    --form-fieldset-legend-text-color: var(--theme-form-input-text-label-color-normal);
-    --form-fieldset-legend-text-margin-block: 0.8rem;
-    --form-fieldset-legend-text-size: var(--step-5);
-    --form-fieldset-legend-text-weight: normal;
-    --form-fieldset-legend-text-line-height: 1.5;
-
-    --form-fieldset-description-font-size: 1.6rem;
-    --form-fieldset-description-margin-top: 1.2rem;
-
-    --form-fieldset-content-margin-block-start: 0;
-    --form-fieldset-content-padding-block-start: 0;
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css

@@ -1,59 +0,0 @@
-:root {
-  .input-checkbox-radio-options-button {
-    /* --input-checkbox-radio-options-button-background-color: hsl(from var(--theme-form-input-border) h s 95%); */
-    --input-checkbox-radio-options-button-background-color: color-mix(in srgb, currentColor 5%, transparent);
-    --input-checkbox-radio-options-button-background-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
-
-    --input-checkbox-radio-options-button-border: 0.1rem solid var(--theme-form-input-border);
-    --input-checkbox-radio-options-button-border-active: 0.1rem solid var(--theme-form-input-border);
-    /* --input-checkbox-radio-options-button-border-radius: var(--form-input-border-radius); */
-    --input-checkbox-radio-options-button-border-radius: 1lh;
-    --input-checkbox-radio-options-button-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 55%);
-    --input-checkbox-radio-options-button-outline-active: 0.1rem solid hsl(from var(--theme-form-input-border) h s 5%);
-
-    /* Label styles */
-
-    --input-checkbox-radio-options-button-label-font-size: var(--form-element-font-size);
-    --input-checkbox-radio-options-button-label-min-height: var(--form-element-line-height);
-
-    --input-checkbox-radio-options-button-label-margin-block: 0.8rem;
-    --input-checkbox-radio-options-button-label-padding-inline: 0.8rem;
-
-    [data-form-theme='primary'] {
-      --input-checkbox-radio-options-button-label-text-color: light-dark(var(--gray-11), var(--gray-1));
-      --input-checkbox-radio-options-button-label-icon-color: light-dark(var(--gray-11), var(--gray-1));
-    }
-
-    /* Size variants */
-    &.x-small {
-      --input-checkbox-radio-options-padding-block: 0.2rem;
-      --input-checkbox-radio-options-padding-inline: 1.6rem;
-
-      --input-checkbox-radio-options-button-gap: 1rem;
-    }
-
-    &.small {
-      --input-checkbox-radio-options-padding-block: 0.2rem;
-      --input-checkbox-radio-options-padding-inline: 1.6rem;
-      --input-checkbox-radio-options-button-gap: 1rem;
-    }
-
-    &.default {
-      --input-checkbox-radio-options-padding-block: 0.4rem;
-      --input-checkbox-radio-options-padding-inline: 1.2rem;
-      --input-checkbox-radio-options-button-gap: 1rem;
-    }
-
-    &.medium {
-      --input-checkbox-radio-options-padding-block: 0.4rem;
-      --input-checkbox-radio-options-padding-inline: 1.2rem;
-      --input-checkbox-radio-options-button-gap: 1rem;
-    }
-
-    &.large {
-      --input-checkbox-radio-options-padding-block: 0.4rem;
-      --input-checkbox-radio-options-padding-inline: 1.2rem;
-      --input-checkbox-radio-options-button-gap: 1rem;
-    }
-  }
-}

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

@@ -1,72 +0,0 @@
-/*
-* These styles control the appearance of checkboxes.
-*/
-:root {
-  .input-checkbox-radio-wrapper {
-    &.checkbox {
-      --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
-      --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
-      --input-checkbox-radio-wrapper-border-radius: var(--form-input-border-radius);
-      --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
-
-      --input-checkbox-radio-wrapper-box-shadow-off: none;
-
-      /* Interactive state */
-      --input-checkbox-radio-wrapper-border-on: 0.1rem solid var(--theme-form-input-border);
-      --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
-      --input-checkbox-radio-wrapper-box-shadow-on: 0.1rem 0.1rem 0.1rem 0.1rem hsl(from var(--theme-form-input-border) h s 95%);
-
-      /* Color of checkbox  */
-      --input-checkbox-radio-symbol-color-default: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 15%));
-      --input-checkbox-radio-symbol-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 25%), hsl(from var(--theme-form-input-border) h s 75%));
-
-      /* Size variants for radio buttons within a button */
-      &.x-small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-      }
-
-      &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-7);
-      }
-
-      &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-      }
-
-      &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-      }
-
-      /* Size variants for default checkbox */
-      &.button {
-        &.display-as-disc {
-          --input-checkbox-radio-wrapper-border-radius: 100%;
-        }
-
-        &.x-small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-        }
-
-        &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-
-        &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-
-        &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-      }
-    }
-  }
-}

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

@@ -1,55 +0,0 @@
-:root {
-  --input-error-color: var(--theme-error-text);
-  /* --input-error-background-color: transparent; */
-  --input-error-background-color: var(--theme-error-surface);
-
-  --input-error-font-size: var(--form-element-font-size);
-  --input-error-line-height: var(--form-element-line-height);
-  --input-error-font-weight: var(--form-element-font-weight);
-
-  --input-error-margin-block-start: 0rem;
-
-  --input-error-border-radius: var(--form-input-border-radius);
-
-  /* Border styles */
-  --input-error-border-top-left-radius: 0;
-  --input-error-border-top-right-radius: 0;
-  --input-error-border-bottom-right-radius: 0;
-  --input-error-border-bottom-left-radius: 0;
-
-  --input-error-border-top-default: var(--form-element-border-width) solid transparent;
-  --input-error-border-right-default: var(--form-element-border-width) solid transparent;
-  --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid transparent;
-  --input-error-border-left-default: var(--form-element-border-width) solid transparent;
-
-  .detached {
-    --input-error-margin-block-start: 2rem;
-
-    --input-error-border-top-left-radius: var(--input-error-border-radius);
-    --input-error-border-top-right-radius: var(--input-error-border-radius);
-    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
-    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
-  }
-
-  .show {
-    --input-error-background-color: var(--theme-error-surface);
-
-    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
-    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
-
-    --input-error-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
-    --input-error-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
-    --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid var(--red-8);
-    --input-error-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
-  }
-
-  .Xunderlined.show {
-    --input-error-border-bottom-right-radius: var(--input-error-border-radius);
-    --input-error-border-bottom-left-radius: var(--input-error-border-radius);
-
-    --input-error-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
-    --input-error-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
-    --input-error-border-bottom-default: var(--form-element-border-width-underlined) solid var(--red-8);
-    --input-error-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
-  }
-}

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

@@ -1,18 +0,0 @@
-:root {
-  /* Label vars */
-  .normal {
-    --input-label-text-color: var(--theme-form-input-text-label-color-normal);
-    --input-label-text-margin-block: 0.8rem;
-    --input-label-text-size: var(--step-5);
-    --input-label-text-weight: normal;
-    --input-label-text-line-height: 1.5;
-  }
-
-  .underlined {
-    --input-label-text-color: var(--theme-form-input-text-label-color-normal);
-    --input-label-text-margin-block: 0.8rem;
-    --input-label-text-size: var(--step-5);
-    --input-label-text-weight: normal;
-    --input-label-text-line-height: 1.5;
-  }
-}

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

@@ -1,68 +0,0 @@
-/*
-* These styles control the appearance of radio buttons.
-*/
-:root {
-  .input-checkbox-radio-wrapper {
-    &.radio {
-      --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
-      --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
-      --input-checkbox-radio-wrapper-border-radius: 100%;
-      --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
-
-      --input-checkbox-radio-wrapper-box-shadow-off: none;
-
-      /* Interactive state */
-      --input-checkbox-radio-wrapper-border-on: 0.1rem solid var(--theme-form-input-border);
-      --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
-      --input-checkbox-radio-wrapper-box-shadow-on: 0rem 0rem 0rem 0.3rem hsl(from var(--theme-form-input-border) h s 95%);
-
-      /* Color of radio button  */
-      --input-checkbox-radio-symbol-color-default: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 15%));
-      --input-checkbox-radio-symbol-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 25%), hsl(from var(--theme-form-input-border) h s 75%));
-
-      /* Size variants for radio buttons within a button */
-      &.x-small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-      }
-
-      &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-7);
-      }
-
-      &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-      }
-
-      &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-      }
-
-      /* Size variants for default radio buttons */
-      .button {
-        &.x-small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-        }
-
-        &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-
-        &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-
-        &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-6);
-        }
-      }
-    }
-  }
-}

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

@@ -1,18 +0,0 @@
-:root {
-  .input-select-core {
-    --input-select-animation-duration: 0.2s;
-    --input-select-padding-block: 1.5rem;
-    --input-select-padding-inline: 1rem;
-
-    --input-select-option-padding-block: 1rem;
-    --input-select-option-padding-inline: 1.75rem;
-    --input-select-option-gap: 1.5rem;
-
-    /* --input-select-option-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%)); */
-
-    --input-select-option-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
-
-    --input-select-option-icon-size: 1.5rem;
-    --input-select-option-transition: all var(--input-select-animation-duration) ease-in-out;
-  }
-}