srcdev-nuxt-forms 2.4.12 → 2.4.14

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='error'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--red-8);
     --theme-form-input-border-active: var(--red-2);
     --theme-form-input-border-focus: var(--red-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
 

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='ghost'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 

package/assets/styles/forms/themes/_input-action.css

@@ -3,7 +3,7 @@
     --theme-btn-bg: transparent;
     --theme-btn-border: transparent;
     --theme-btn-outline: transparent;
-    --theme-btn-text: var(--theme-form-input-text);
+    --theme-btn-text: var(--theme-form-input-text-color-normal);
 
     --theme-btn-bg-hover: var(--blue-8);
     --theme-btn-border-hover: var(--blue-8);

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='primary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-0), var(--gray-9));
     --theme-form-input-border: var(--blue-8);
     --theme-form-input-border-active: var(--blue-2);
     --theme-form-input-border-focus: var(--blue-2);
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--blue-6);
     --theme-form-input-outline-focus: var(--blue-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-normal: light-dark(var(--gray-11), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     /* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
     --theme-form-focus-box-shadow: light-dark(red, yellowgreen);
@@ -26,7 +34,7 @@
     --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-));
+    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-1));
 
     /*
     * ToggleSwitch

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='secondary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='success'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--green-8);
     --theme-form-input-border-active: var(--green-2);
     --theme-form-input-border-focus: var(--green-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
 

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='tertiary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--gray-8);
     --theme-form-input-border-active: var(--gray-2);
     --theme-form-input-border-focus: var(--gray-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
 

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

@@ -1,13 +1,21 @@
 :root {
   [data-form-theme='warning'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-normal: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
     --theme-form-input-border: var(--orange-8);
     --theme-form-input-border-active: var(--orange-2);
     --theme-form-input-border-focus: var(--orange-2);
     --theme-form-input-outline: white;
     --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-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
+    --theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
+
+    --theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
+    --theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
+    --theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
 
     --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
 

package/assets/styles/forms/variables/_sizes.css

@@ -2,6 +2,7 @@
   --form-element-padding-block-start: 0.4lh;
   --form-element-padding-block-end: 0.4lh;
   --form-element-border-width: 0.2rem;
+  --form-element-border-width-underlined: 0.4rem;
   --form-element-outline-width: 0.1rem;
 
   --form-text-padding-inline: 0.5em;

package/assets/styles/utils/_margin-helpers.css

@@ -1,4 +1,30 @@
 /* Margin */
+.mi-auto {
+  margin-inline: auto;
+}
+.mis-auto {
+  margin-inline-start: auto;
+}
+.mie-auto {
+  margin-inline-end: auto;
+}
+.mb-auto {
+  margin-block: auto;
+}
+.mbs-auto {
+  margin-block-start: auto;
+}
+.mbe-auto {
+  margin-block-end: auto;
+}
+
+.mb-0 {
+  margin-block: 0;
+}
+.mi-0 {
+  margin-inline: 0;
+}
+
 .m-0 {
   margin: 0;
 }

package/components/forms/c12/prop-validators/index.ts

@@ -29,6 +29,7 @@ export const propValidators = {
   radioAppearance: [null, 'with-decorator'],
   optionsLayout: ['block', 'inline', 'equal-widths'],
   labelWeight: ['normal', 'semi-bold', 'bold'],
+  inputVariant: ['normal', 'outlined', 'underlined'],
   inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
   inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
   inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],

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

@@ -113,7 +113,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
   width: fit-content;
 
-  background-color: var(--theme-form-input-bg);
+  background-color: var(--theme-form-input-bg-normal);
   border-radius: var(--form-element-border-width);
   border: var(--form-element-border-width) solid var(--theme-form-input-border);
   outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
@@ -147,8 +147,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
     outline: none;
     box-shadow: none;
 
-    background-color: var(--theme-form-input-bg);
-    color: var(--theme-form-input-text);
+    background-color: var(--theme-form-input-bg-normal);
+    color: var(--theme-form-input-text-color-normal);
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
     line-height: var(--form-element-line-height);

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

@@ -3,7 +3,7 @@
     class="input-text-wrapper"
     :data-form-theme="formTheme"
     :data-size="size"
-    :class="[{ isMaterial: isMaterial }, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
   >
     <span v-if="hasLeftSlot" class="slot left-slot">
       <slot name="left"></slot>
@@ -98,14 +98,15 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
-  isMaterial: {
-    type: Boolean,
-    default: false,
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
   },
 });
 
-console.log('isMaterial: ', props.isMaterial);
-
 const slots = useSlots();
 const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
@@ -157,22 +158,88 @@ onMounted(() => {
 <style lang="css">
 .input-text-wrapper {
   --_focus-box-shadow: var(--box-shadow-off);
+  --_input-text-core-color: var(--theme-form-input-text-color-normal);
+
+  --_input-text-wrapper-background-color: var(--theme-form-input-bg-normal);
+
+  --_input-text-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-text-wrapper-border-radius: var(--form-input-border-radius);
+
+  --_input-text-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-text-wrapper-opacity: 1;
+  --_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-text-wrapper-margin-inline: 0;
+
+  &.underlined {
+    --_input-text-core-color: var(--theme-form-input-text-color-underlined);
+    --_input-text-wrapper-background-color: var(--theme-form-input-bg-underlined);
+  }
+
+  &.outlined {
+    --_input-text-wrapper-margin-inline: 1px;
+    --_input-text-wrapper-background-color: var(--theme-form-input-bg-outlined);
+  }
+
+  &.normal {
+    &:focus-within {
+      --_input-text-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-text-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  &:not(.normal) {
+    --_input-text-wrapper-border: none;
+    --_input-text-wrapper-box-shadow: none;
+    --_input-text-wrapper-outline: none;
+    --_input-text-wrapper-opacity: 0;
+
+    &:focus {
+      --_input-text-wrapper-border: none;
+      --_input-text-wrapper-box-shadow: none;
+      --_input-text-wrapper-outline: none;
+      --_input-text-wrapper-background-color: transparent;
+    }
+
+    &:focus-within {
+      --_input-text-wrapper-border: none;
+      --_input-text-wrapper-box-shadow: none;
+      --_input-text-wrapper-outline: none;
+      --_input-text-wrapper-background-color: transparent;
+    }
+
+    &.active,
+    &.dirty {
+      --_input-text-wrapper-border: none;
+      --_input-text-wrapper-box-shadow: none;
+      --_input-text-wrapper-outline: none;
+      --_input-text-wrapper-background-color: transparent;
+
+      --_input-text-wrapper-opacity: 1;
+    }
+  }
 
   display: flex;
   align-items: center;
 
-  background-color: var(--theme-form-input-bg);
-  border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--theme-form-input-border);
-  outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
-  box-shadow: var(--_focus-box-shadow);
+  background-color: var(--_input-text-wrapper-background-color);
+  border-radius: var(--_input-text-wrapper-border-radius);
+  border: var(--_input-text-wrapper-border);
+  outline: var(--_input-text-wrapper-outline);
+  box-shadow: var(--_input-text-wrapper-box-shadow);
+  opacity: var(--_input-text-wrapper-opacity);
+
+  margin-inline: var(--_input-text-wrapper-margin-inline);
+
+  &:not(.normal) {
+    transition: opacity 0.2s ease-in-out;
+  }
 
   &:not(:has(.input-button-core)) {
     .slot {
       display: inline-block;
 
       .icon {
-        color: var(--theme-form-input-text);
+        color: var(--_input-text-core-color);
         aspect-ratio: 1;
         height: var(--form-icon-size);
         width: var(--form-icon-size);
@@ -198,11 +265,6 @@ onMounted(() => {
     }
   }
 
-  &:focus-within {
-    box-shadow: var(--box-shadow-on);
-    outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
-  }
-
   .input-text-core {
     background-color: transparent;
     border: none;
@@ -210,7 +272,7 @@ onMounted(() => {
     box-shadow: none;
     flex-grow: 1;
 
-    color: var(--theme-form-input-text);
+    color: var(--_input-text-core-color);
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
     line-height: var(--form-element-line-height);
@@ -226,13 +288,6 @@ onMounted(() => {
       font-style: italic;
       font-weight: 400;
     }
-
-    /* WTH is --_focus-box-shadow undefined when attempting update here?? */
-    /*
-    &:focus-visible {
-      --_focus-box-shadow: var(--box-shadow-on);
-   :has(:has( }
-    */
   }
 
   &:has(.has-left-button),
@@ -256,23 +311,6 @@ onMounted(() => {
       border-left: 2px solid var(--theme-btn-bg-hover);
     }
   }
-
-  /* Material Design Styles */
-
-  &.isMaterial {
-    background-color: transparent;
-    border-radius: initial;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-
-    &.active,
-    &.dirty {
-      opacity: 1;
-    }
-  }
 }
 
 input:autofill,
@@ -280,11 +318,11 @@ input:-internal-autofill-selected,
 input:-webkit-autofill-strong-password,
 input:-webkit-autofill-strong-password-viewable,
 input:-webkit-autofill-and-obscured {
-  background-color: var(--theme-form-input-bg) !important;
+  background-color: var(--theme-form-input-bg-normal) !important;
   background-image: none !important;
-  color: var(--theme-form-input-text) !important;
-  -webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg) inset;
-  -webkit-text-fill-color: var(--theme-form-input-text);
+  color: var(--theme-form-input-text-color-normal) !important;
+  -webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg-normal) inset;
+  -webkit-text-fill-color: var(--theme-form-input-text-color-normal);
   transition: background-color 5000s ease-in-out 0s;
 }
 </style>

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

@@ -13,7 +13,7 @@
     :styleClassPassthrough
     :theme
     :size
-    :isMaterial
+    :inputVariant
   >
     <template #right>
       <InputButtonCore
@@ -89,9 +89,12 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
-  isMaterial: {
-    type: Boolean,
-    default: false,
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
   },
 });
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+  <div class="input-text-with-label" :data-form-theme="formTheme" :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]">
     <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
 
     <div v-if="hasDescriptionSlot" :id="`${id}-description`">
@@ -24,7 +24,7 @@
       inputmode="numeric"
       :ariaDescribedby
       :size
-      :isMaterial
+      :inputVariant
     >
       <template v-if="hasLeftSlot" #left>
         <InputButtonCore
@@ -122,9 +122,12 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
-  isMaterial: {
-    type: Boolean,
-    default: false,
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
   },
 });
 

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

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { isMaterial: isMaterial }, { dirty: isDirty }, { active: isActive }]">
+    <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
       <label :for="id" class="input-text-label">{{ label }}</label>
 
-      <div v-if="!isMaterial && hasDescriptionSlot" :id="`${id}-description`">
+      <div v-if="inputVariant === 'normal' && hasDescriptionSlot" :id="`${id}-description`">
         <slot name="description"></slot>
       </div>
 
@@ -25,7 +25,7 @@
         :theme
         :ariaDescribedby
         :size
-        :isMaterial
+        :inputVariant
       >
         <template v-if="hasLeftSlot" #left>
           <slot name="left"></slot>
@@ -38,7 +38,7 @@
       <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" />
     </div>
 
-    <div v-if="isMaterial && hasDescriptionSlot" :id="`${id}-description`">
+    <div v-if="inputVariant !== 'normal' && hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
   </div>
@@ -104,9 +104,12 @@ const props = defineProps({
       return propValidators.size.includes(value);
     },
   },
-  isMaterial: {
-    type: Boolean,
-    default: false,
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
   },
 });
 
@@ -154,62 +157,119 @@ watch(
 
 <style lang="css">
 .input-text-with-label {
+  --_input-text-with-label-margin-block-start: 0;
+  --_input-text-with-label-background-color: transparent;
+
+  --_input-text-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-text-wrapper-border-radius: var(--form-input-border-radius);
+  --_input-text-wrapper-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
+  --_input-text-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-text-wrapper-padding-block: 0;
+
   --_focus-box-shadow: var(--box-shadow-off);
 
-  .input-text-label {
-    display: block;
-    margin-block: 0.8rem;
-    font-size: var(--step-1);
-    font-weight: normal;
-    line-height: 1.5;
+  /* Label vars */
+  --_label-text-color: var(--theme-form-input-text-label-color-normal);
+  --_label-text-margin-block: 0.8rem;
+  --_label-text-size: var(--step-1);
+  --_label-text-weight: normal;
+  --_label-text-line-height: 1.5;
+
+  &.underlined {
+    --_label-text-color: var(--theme-form-input-text-label-color-underlined);
+    --_label-offset: 0 0;
+    --_input-text-with-label-background-color: var(--theme-form-input-bg-underlined);
+    --_input-text-wrapper-border-radius: 0;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      --_label-offset: 0 -2.8rem;
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
   }
 
-  /* Material Design Styles */
+  &.outlined {
+    --_label-text-color: var(--theme-form-input-text-label-color-outlined);
 
-  &.isMaterial {
-    --_label-offset: 0 0;
+    --_label-offset: 1rem 0;
+    --_input-text-with-label-background-color: var(--theme-form-input-bg-normal);
+
+    --_input-text-wrapper-padding-block: 0.4em;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      --_label-offset: 1rem -2.8rem;
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
 
+  &:not(.normal) {
+    --_input-text-with-label-margin-block-start: 2em;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      /* --_label-offset: 1rem -2.8rem; */
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+
+    &:focus-within {
+      --_input-text-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-text-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  /*
+  * Apply generic styles
+  **/
+
+  background-color: var(--_input-text-with-label-background-color);
+  border-radius: var(--_input-text-wrapper-border-radius);
+
+  &.underlined {
+    border-bottom: var(--_input-text-wrapper-border-underlined);
+  }
+
+  &.outlined {
+    border: var(--_input-text-wrapper-border);
+    outline: var(--_input-text-wrapper-outline);
+    box-shadow: var(--_input-text-wrapper-box-shadow);
+    padding-block: var(--_input-text-wrapper-padding-block);
+  }
+
+  &:not(.normal) {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
-    grid-template-areas: 'material-text-stack';
+    grid-template-areas: 'underlined-text-stack';
 
-    background-color: var(--theme-form-input-bg);
-    border-radius: var(--form-element-border-width);
-    border: var(--form-element-border-width) solid var(--theme-form-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
-    box-shadow: var(--_focus-box-shadow);
-
-    padding: 0 0.8rem;
+    margin-block-start: var(--_input-text-with-label-margin-block-start);
 
     .input-text-label {
-      grid-area: material-text-stack;
-
-      display: inline-block;
-      width: fit-content;
-      padding: 0.2rem 1.2rem;
-      background-color: var(--theme-form-input-bg);
-      border-radius: 0.4em;
-      color: var(--theme-form-input-text);
-      translate: var(--_label-offset);
-
-      font-size: var(--step-2);
-      font-weight: normal;
-      line-height: 1.5;
-
-      transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
-
-      &:has(+ .input-text-wrapper.active),
-      &:has(+ .input-text-wrapper.dirty) {
-        --_label-offset: 0 -3rem;
-        /* font-size: var(--step-2); */
-        /* padding: 0.2rem 1.2rem; */
-      }
+      grid-area: underlined-text-stack;
+      z-index: 2;
     }
-
     .input-text-wrapper {
-      grid-area: material-text-stack;
+      grid-area: underlined-text-stack;
+      z-index: 1;
     }
   }
+
+  .input-text-label {
+    display: block;
+    color: var(--_label-text-color);
+    margin-block: var(--_label-text-margin-block);
+    font-size: var(--_label-text-size);
+    font-weight: var(--_label-text-weight);
+    line-height: var(--_label-text-line-height);
+    translate: var(--_label-offset);
+    transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
+  }
 }
 </style>

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

@@ -107,7 +107,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
   display: flex;
   align-items: center;
 
-  background-color: var(--theme-form-input-bg);
+  background-color: var(--theme-form-input-bg-normal);
   border-radius: var(--form-element-border-width);
   border: var(--_border-width) solid var(--theme-form-input-border);
 
@@ -122,7 +122,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     padding-inline: 0.8rem;
 
     .icon {
-      color: var(--theme-form-input-text);
+      color: var(--theme-form-input-text-color-normal);
     }
   }
 
@@ -147,7 +147,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     box-shadow: none;
     flex-grow: 1;
 
-    color: var(--theme-form-input-text);
+    color: var(--theme-form-input-text-color-normal);
     font-family: var(--font-family);
     font-size: var(--form-element-font-size);
     line-height: var(--form-element-line-height);

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

@@ -99,7 +99,6 @@ const setColourSchemeAttr = async () => {
 };
 
 const handleInputActiveClass = () => {
-  console.log(`handleInputActiveClass`, currentActiveIndex.value);
   colourSchemeInputElements.value.forEach((element) => {
     element.classList.remove('active');
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.4.12",
+  "version": "2.4.14",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -24,28 +24,28 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "1.0.0",
-    "@nuxt/icon": "1.10.3",
-    "@nuxt/test-utils": "3.15.4",
+    "@nuxt/eslint-config": "1.2.0",
+    "@nuxt/icon": "1.11.0",
+    "@nuxt/test-utils": "3.17.2",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.19.0",
+    "eslint": "9.22.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.15.4",
+    "nuxt": "3.16.0",
     "release-it": "18.1.2",
-    "typescript": "5.7.3",
-    "vitest": "3.0.5",
+    "typescript": "5.8.2",
+    "vitest": "3.0.8",
     "vue": "3.5.13"
   },
   "dependencies": {
-    "@iconify-json/carbon": "1.2.6",
+    "@iconify-json/carbon": "1.2.8",
     "@iconify-json/gridicons": "1.2.2",
-    "@iconify-json/material-symbols": "1.2.14",
-    "@iconify-json/material-symbols-light": "1.2.14",
+    "@iconify-json/material-symbols": "1.2.16",
+    "@iconify-json/material-symbols-light": "1.2.16",
     "@iconify-json/ph": "1.2.2",
     "@iconify-json/radix-icons": "1.2.2",
     "@iconify-json/ri": "1.2.5",
     "modern-normalize": "3.0.1",
-    "zod": "3.24.1"
+    "zod": "3.24.2"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",