@proj-airi/ui 0.6.1 → 0.7.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.0-beta.1",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -20,22 +20,17 @@
     "./components/form": "./src/components/Form/index.ts",
     "./*": "./*"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
   "dependencies": {
-    "@vueuse/core": "^13.3.0",
+    "@vueuse/core": "^13.5.0",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.3.1",
-    "vue": "^3.5.16"
+    "reka-ui": "^2.3.2",
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",
-    "vue-tsc": "^3.0.0-alpha.10"
+    "vue-tsc": "^3.0.3"
   },
   "scripts": {
-    "dev": "pnpm run build",
-    "stub": "pnpm run build",
-    "build": "tsdown",
     "typecheck": "vue-tsc --noEmit"
   }
 }

package/src/components/Animations/TransitionHorizontal.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+function enter(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  const width = el.scrollWidth
+  el.style.width = '0'
+  requestAnimationFrame(() => {
+    el.style.width = `${width}px`
+  })
+  el.addEventListener('transitionend', done)
+}
+
+function beforeLeave(el: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+}
+
+function leave(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+  el.addEventListener('transitionend', done)
+}
+</script>
+
+<template>
+  <Transition
+    name="slide-fade"
+    :css="false"
+    @enter="enter"
+    @leave="leave"
+    @before-leave="beforeLeave"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/Animations/index.ts

@@ -1 +1,2 @@
+export { default as TransitionHorizontal } from './TransitionHorizontal.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'

package/src/components/Form/Combobox/Combobox.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxRoot,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+
+const props = defineProps<{
+  options: { groupLabel: string, children?: { label: string, value: any }[] }[]
+  placeholder?: string
+}>()
+
+function toDisplayValue(value: any): string {
+  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
+  return option ? option.label : props.placeholder || ''
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    class="relative w-full"
+  >
+    <ComboboxAnchor
+      :class="[
+        'min-w-[160px] w-full inline-flex items-center justify-between rounded-lg border px-2 leading-none h-[35px] gap-[5px] outline-none',
+        'text-xs text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
+        'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
+        'border-neutral-300 dark:border-neutral-800 border-solid border-2 focus:border-neutral-400 dark:focus:border-neutral-600',
+        'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
+        'transition-colors duration-200 ease-in-out',
+      ]"
+    >
+      <ComboboxInput
+        :class="[
+          '!bg-transparent outline-none h-full selection:bg-grass5 placeholder-stone-400 w-full',
+          'text-neutral-700 dark:text-neutral-200',
+          'transition-colors duration-200 ease-in-out',
+        ]"
+        :placeholder="props.placeholder"
+        :display-value="(val) => toDisplayValue(val)"
+      />
+      <ComboboxTrigger>
+        <div
+          i-solar:alt-arrow-down-linear
+          :class="[
+            'h-4 w-4',
+            'text-neutral-700 dark:text-neutral-200',
+            'transition-colors duration-200 ease-in-out',
+          ]"
+        />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxContent
+      :avoid-collisions="true"
+      :class="[
+        'absolute z-10 w-full mt-1 min-w-[160px] overflow-hidden rounded-lg shadow-sm border will-change-[opacity,transform] max-h-50dvh',
+        'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+        'bg-white dark:bg-neutral-900',
+        'border-neutral-300 dark:border-neutral-800 border-solid border-2 focus:border-neutral-400 dark:focus:border-neutral-600',
+      ]"
+    >
+      <ComboboxViewport class="p-[2px]">
+        <ComboboxEmpty
+          :class="[
+            'font-medium py-2 px-2',
+            'text-xs text-neutral-700 dark:text-neutral-200',
+            'transition-colors duration-200 ease-in-out',
+          ]"
+        />
+
+        <template
+          v-for="(group, index) in options"
+          :key="group.name"
+        >
+          <ComboboxGroup>
+            <ComboboxSeparator
+              v-if="index !== 0"
+              class="m-[5px] h-[1px] bg-neutral-400"
+            />
+
+            <ComboboxLabel
+              :class="[
+                'px-[25px] text-xs leading-[25px]',
+                'text-neutral-500 dark:text-neutral-400',
+                'transition-colors duration-200 ease-in-out',
+              ]"
+            >
+              {{ group.groupLabel }}
+            </ComboboxLabel>
+
+            <ComboboxItem
+              v-for="option in group.children"
+              :key="option.label"
+              :text-value="option.label"
+              :value="option.value"
+              :class="[
+                'leading-none rounded-[5px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
+                'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
+                'text-xs text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600 data-[highlighted]:text-grass1',
+                'transition-colors duration-200 ease-in-out',
+                'cursor-pointer',
+              ]"
+            >
+              <ComboboxItemIndicator
+                class="absolute left-0 w-[25px] inline-flex items-center justify-center opacity-30"
+              >
+                <div i-solar:alt-arrow-right-outline />
+              </ComboboxItemIndicator>
+              <span>
+                {{ option.label }}
+              </span>
+            </ComboboxItem>
+          </ComboboxGroup>
+        </template>
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>

package/src/components/Form/Combobox/index.ts

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox.vue'

package/src/components/Form/Field/FieldCheckbox.vue

@@ -14,10 +14,14 @@ const modelValue = defineModel<boolean>({ required: true })
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Checkbox v-model="modelValue" />

package/src/components/Form/Field/FieldInput.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   singleLine: true,
 })
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>
@@ -21,11 +21,15 @@ const modelValue = defineModel<string>({ required: true })
     <label flex="~ col gap-4">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Input

package/src/components/Form/Field/FieldKeyValues.vue

@@ -32,11 +32,15 @@ watch([inputKey, inputValue], () => {
     <label flex="~ col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <div v-auto-animate flex="~ col gap-2">

package/src/components/Form/Field/FieldRange.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import Range from '../Range/Range.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   min?: number
   max?: number
   step?: number
   label?: string
   description?: string
   formatValue?: (value: number) => string
-}>()
+  as?: 'label' | 'div'
+}>(), {
+  as: 'label',
+})
 
 const modelValue = defineModel<number>({ required: true })
 </script>
 
 <template>
-  <label flex="~ col gap-4">
+  <props.as flex="~ col gap-4">
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ label }}
+          <slot name="label">
+            {{ label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </div>
       </div>
       <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
@@ -35,5 +42,5 @@ const modelValue = defineModel<number>({ required: true })
         w-full
       />
     </div>
-  </label>
+  </props.as>
 </template>

package/src/components/Form/Field/FieldSelect.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Select } from '@proj-airi/ui'
+
+const props = withDefaults(defineProps<{
+  label: string
+  description?: string
+  options?: { label: string, value: string | number }[]
+  placeholder?: string
+  disabled?: boolean
+  layout?: 'horizontal' | 'vertical'
+  selectClass?: string | string[]
+}>(), {
+  layout: 'horizontal',
+})
+
+const modelValue = defineModel<string>({ required: false })
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div
+      :class="[
+        props.layout === 'horizontal' ? 'flex flex-row items-center justify-between gap-2' : 'flex flex-col items-start justify-center gap-2',
+      ]"
+    >
+      <div class="min-w-[max-content] flex-1">
+        <div class="flex items-center gap-1 text-sm font-medium">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+      <slot>
+        <Select
+          v-model="modelValue"
+          :options="props.options?.filter(option => option.label && option.value) || []"
+          :placeholder="props.placeholder"
+          :disabled="props.disabled"
+          :title="label"
+          :class="props.selectClass"
+        >
+          <template #default="{ value }">
+            {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
+          </template>
+        </Select>
+      </slot>
+    </div>
+  </label>
+</template>

package/src/components/Form/Field/FieldValues.vue

@@ -33,11 +33,15 @@ function removeItem(index: number) {
     <label class="flex flex-col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-nowrap text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
 

package/src/components/Form/Field/index.ts

@@ -2,4 +2,5 @@ export { default as FieldCheckbox } from './FieldCheckbox.vue'
 export { default as FieldInput } from './FieldInput.vue'
 export { default as FieldKeyValues } from './FieldKeyValues.vue'
 export { default as FieldRange } from './FieldRange.vue'
+export { default as FieldSelect } from './FieldSelect.vue'
 export { default as FieldValues } from './FieldValues.vue'

package/src/components/Form/Input/BasicInputFile.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useDebounce } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  accept?: string
+  multiple?: boolean
+}>()
+
+const files = defineModel<File[]>({ required: false, default: () => [] })
+const firstFile = ref<File>()
+
+const isDragging = ref(false)
+const isDraggingDebounced = useDebounce(isDragging, 150)
+
+function handleFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  if (input.files && input.files.length > 0) {
+    firstFile.value = input.files[0]
+  }
+
+  files.value = Array.from(input.files || [])
+  isDragging.value = false
+}
+</script>
+
+<template>
+  <label
+    relative cursor-pointer
+    @dragover="isDragging = true"
+    @dragleave="isDragging = false"
+  >
+    <input
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      class="absolute inset-0 h-full w-full opacity-0"
+      @change="handleFileChange"
+    >
+    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files" />
+  </label>
+</template>

package/src/components/Form/Input/Input.vue

@@ -3,7 +3,7 @@ const props = defineProps<{
   type?: string
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>

package/src/components/Form/Input/index.ts

@@ -1,3 +1,4 @@
+export { default as BasicInputFile } from './BasicInputFile.vue'
 export { default as Input } from './Input.vue'
 export { default as InputFile } from './InputFile.vue'
 export { default as InputKeyValue } from './InputKeyValue.vue'

package/src/components/Form/Range/ColorHueRange.vue

@@ -39,23 +39,23 @@ const colorValue = defineModel<string>('colorValue', {
   );
 
   &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   .dark &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 
   .dark &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
+    --at-apply: w-1 h-12 hover:w-2 hover:h-13 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors,transform,width,height duration-200 cursor-col-resize;
   }
 }
 </style>

package/src/components/Form/Range/Range.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   min?: number
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
   trackValueColor: 'red',
 })
 
-const modelValue = defineModel<number>('modelValue', { required: true })
+const modelValue = defineModel<number>({ required: true })
 
 const scaledMin = computed(() => props.min * 10000)
 const scaledMax = computed(() => props.max * 10000)
@@ -34,15 +34,16 @@ const sliderValue = computed({
   },
 })
 
-onMounted(() => {
-  updateTrackColor()
-})
+onMounted(() => updateTrackColor())
+watch(sliderValue, () => updateTrackColor(), { immediate: true })
+watch([scaledMin, scaledMax, scaledStep], () => updateTrackColor(), { immediate: true })
 
 function updateTrackColor() {
-  if (!sliderRef.value)
+  if (!sliderRef.value) {
     return
+  }
 
-  sliderRef.value.style.setProperty('--value', sliderRef.value.value)
+  sliderRef.value.style.setProperty('--value', sliderValue.value.toString())
   sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
   sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
 }
@@ -83,17 +84,17 @@ https://toughengineer.github.io/demo/slider-styler*/
   --thumb-box-shadow: 0 0 0px #e6e6e6;
   --thumb-border: none;
   --thumb-border-radius: 999px;
-  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: none;
   --track-border: solid 2px rgb(238, 238, 238);
   --track-border-radius: 6px;
-  --track-background: rgb(238, 238, 238);
-  --track-background-hover: rgb(238, 238, 238);
-  --track-background-active: rgb(238, 238, 238);
+  --track-background: rgba(238, 238, 238, 0.6);
+  --track-background-hover: rgba(238, 238, 238, 0.6);
+  --track-background-active: rgba(238, 238, 238, 0.6);
 
   --track-value-background: rgb(255, 255, 255);
   --track-value-background-hover: rgb(255, 255, 255);
@@ -102,14 +103,14 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 .dark .form_input-range {
-  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
+  --thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
 
   --track-border: solid 2px rgb(44, 44, 44);
-  --track-background: rgb(44, 44, 44);
-  --track-background-hover: rgb(44, 44, 44);
-  --track-background-active: rgb(44, 44, 44);
+  --track-background: rgba(44, 44, 44, 0.7);
+  --track-background-hover: rgba(44, 44, 44, 0.7);
+  --track-background-active: rgba(44, 44, 44, 0.7);
 
   --track-value-background: rgb(164, 164, 164);
   --track-value-background-hover: rgb(164, 164, 164);
@@ -143,7 +144,8 @@ https://toughengineer.github.io/demo/slider-styler*/
     background 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out,
     border-color 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-webkit-slider-runnable-track {
@@ -151,6 +153,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   position: relative;
   cursor: col-resize;
@@ -161,6 +164,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-webkit-slider-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-webkit-slider-runnable-track {
@@ -207,6 +213,12 @@ https://toughengineer.github.io/demo/slider-styler*/
   box-shadow: var(--thumb-box-shadow);
   cursor: col-resize;
   margin-left: calc(0 - var(--track-value-padding));
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-moz-range-track {
@@ -214,6 +226,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   cursor: col-resize;
   /* Trim left and right paddings of track */
@@ -222,6 +235,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-moz-range-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-moz-range-track {
@@ -280,12 +296,20 @@ https://toughengineer.github.io/demo/slider-styler*/
   margin-left: calc(0 - var(--track-value-padding));
   box-sizing: border-box;
   cursor: col-resize;
+
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .form_input-range::-ms-track {
   height: var(--track-height);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   border: var(--track-border);
   box-shadow: var(--track-box-shadow);
   box-sizing: border-box;
@@ -294,6 +318,9 @@ https://toughengineer.github.io/demo/slider-styler*/
 
 .form_input-range::-ms-thumb:hover {
   background: var(--thumb-background-hover);
+
+  width: calc(var(--thumb-width) * 1.6);
+  transform: scaleY(1.2);
 }
 
 .form_input-range:hover::-ms-track {