srcdev-nuxt-forms 5.1.0 → 6.0.0

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/nuxt.config.ts

@@ -2,7 +2,7 @@
 
 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'],
   typescript: {
     tsConfig: {
@@ -30,5 +30,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.0",
+  "version": "6.0.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -18,27 +18,25 @@
     "test": "vitest"
   },
   "files": [
-    "assets/",
-    "components/",
-    "composables/",
-    "types/"
+    "app/",
+    "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/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-2);
-    --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-0);
-      }
-
-      &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
-      }
-
-      &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-      }
-
-      &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      /* 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-0);
-        }
-
-        &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
-        }
-
-        &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-      }
-    }
-  }
-}

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-2);
-    --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-2);
-    --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-0);
-      }
-
-      &.small {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-1);
-      }
-
-      &.default {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-4);
-      }
-
-      &.medium {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      &.large {
-        --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-      }
-
-      /* Size variants for default radio buttons */
-      .button {
-        &.x-small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-0);
-        }
-
-        &.small {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-1);
-        }
-
-        &.default {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.medium {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-
-        &.large {
-          --form-input-checkbox-radio-button-symbol-size: var(--step-3);
-        }
-      }
-    }
-  }
-}

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;
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/components/_input-text-as-number.css

@@ -1,22 +0,0 @@
-/*
-* See _input-select.css for the base styles
-**/
-:root {
-  .input-text-wrapper {
-    &[data-inputmode='numeric'] {
-      --input-element-padding-block: 1.25rem;
-      --element-decorator-padding-inline: 0.4rem;
-
-      [data-btn-theme='input-action'] {
-        --theme-btn-bg: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
-        --theme-btn-text: var(--gray-00);
-        --form-input-border-radius: 0.2rem;
-
-        --theme-btn-border: hsl(from var(--theme-form-input-border) h s 40%);
-
-        --theme-btn-border-hover: transparent;
-        --theme-btn-outline-hover: hsl(from var(--theme-form-input-border) h s 75%);
-      }
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-:root {
-  .input-textarea-core {
-    --input-textarea-min-height: 4em;
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/setup/_generic.css

@@ -1,7 +0,0 @@
-:root {
-  --theme-form-font-familty: var(--font-family);
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
-  --theme-form-button-font-size-normal: var(--form-element-font-size);
-  --theme-form-transition-duration: 0.2s;
-}

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

@@ -1,4 +0,0 @@
-@import './themes/';
-@import './variants/';
-@import './sizes/';
-@import './_generic';

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_default.css

@@ -1,12 +0,0 @@
-:root {
-  [data-size='default'] {
-    --form-element-font-size: var(--step-2);
-    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
-    --form-element-line-height: var(--step-2);
-    --form-icon-size: var(--step-2);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
-    --form-toggle-switch-width-adjustment: 0.2rem;
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_large.css

@@ -1,12 +0,0 @@
-:root {
-  [data-size='large'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-  }
-}

package/assets/styles/extends-layer/srcdev-forms/setup/sizes/_medium.css

@@ -1,12 +0,0 @@
-:root {
-  [data-size='medium'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-  }
-}