fix(input): adds transition to number

Author: dvcol

src/lib/buttons/NeoButton.svelte

@@ -283,26 +283,26 @@
         --neo-btn-border-color,
         var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
       );
-      backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3);
+      backdrop-filter: var(--neo-btn-backdrop-filter, var(--neo-blur-2) var(--neo-saturate-3));
 
       &:focus-visible {
-        background-color: var(--neo-glass-background-color-focus);
-        backdrop-filter: var(--neo-blur-1) var(--neo-saturate-3);
+        background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color-focus));
+        backdrop-filter: var(--neo-btn-backdrop-filter-focus, var(--neo-blur-1) var(--neo-saturate-3));
       }
 
       &:hover {
-        background-color: var(--neo-glass-background-color-hover);
-        backdrop-filter: var(--neo-blur-1) var(--neo-saturate-2);
+        background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color-hover));
+        backdrop-filter: var(--neo-btn-backdrop-filter-hover, var(--neo-blur-1) var(--neo-saturate-2));
       }
 
       &.neo-pressed,
       &:active:not(.neo-loading) {
-        backdrop-filter: var(--neo-blur-0) var(--neo-saturate-2);
+        backdrop-filter: var(--neo-btn-backdrop-filter-active, var(--neo-blur-0) var(--neo-saturate-2));
       }
 
       &:disabled,
       &[disabled]:not([disabled='false']) {
-        backdrop-filter: var(--neo-blur-1);
+        backdrop-filter: var(--neo-btn-backdrop-filter-disabled, var(--neo-blur-1));
       }
 
       &.neo-inset {

src/lib/inputs/NeoInput.svelte

@@ -616,6 +616,8 @@
       --neo-btn-padding: 0.5rem 0.75rem;
       --neo-btn-margin: auto;
       --neo-btn-box-shadow-active-flat-toggle: var(--neo-box-shadow-inset-2);
+      --neo-btn-bg-color: transparent;
+      --neo-btn-backdrop-filter: none;
     }
 
     &.neo-inset :global(.neo-button) {
@@ -734,7 +736,7 @@
       opacity: var(--neo-input-opacity-disabled, var(--neo-opacity-disabled));
 
       &:not(.neo-borderless) {
-        border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled)) !important;
+        border-color: var(--neo-input-border-color-disabled, var(--neo-border-color-disabled)) !important;
       }
 
       .neo-input-label {

src/lib/inputs/NeoNumberStep.svelte

@@ -7,6 +7,7 @@
   import IconAdd from '~/icons/IconAdd.svelte';
   import IconMinus from '~/icons/IconMinus.svelte';
   import NeoInput from '~/inputs/NeoInput.svelte';
+  import { toTransition, toTransitionProps } from '~/utils/action.utils.js';
   import { DefaultShadowElevation } from '~/utils/shadow.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
@@ -20,6 +21,11 @@
     type = 'number',
     placeholder = '0',
 
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
     // Events
     onStepUp,
     onStepDown,
@@ -84,6 +90,11 @@
   });
 
   const affix = $derived(rest.clearable || rest.loading !== undefined || rest.validation);
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
 </script>
 
 {#snippet before()}
@@ -102,7 +113,15 @@
   </NeoButton>
 {/snippet}
 
-<svelte:element this={numberTag} class:neo-number-step={true} class:neo-label={rest.label} class:neo-affix={affix} {...numberProps}>
+<svelte:element
+  this={numberTag}
+  class:neo-number-step={true}
+  class:neo-label={rest.label}
+  class:neo-affix={affix}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {...numberProps}
+>
   <NeoInput bind:ref bind:labelRef bind:beforeRef bind:value bind:valid bind:dirty bind:touched {type} {placeholder} {before} {after} {...rest} />
 </svelte:element>
 

src/lib/inputs/NeoTextarea.svelte

@@ -691,7 +691,7 @@
       opacity: var(--neo-textarea-opacity-disabled, var(--neo-opacity-disabled));
 
       &:not(.neo-borderless) {
-        border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled)) !important;
+        border-color: var(--neo-input-border-color-disabled, var(--neo-border-color-disabled)) !important;
       }
 
       .neo-textarea-label {