minor improvements

docs/.vitepress/theme/components/base/FakeInput.vue

@@ -26,6 +26,7 @@ const SearchIcon = createLucideIcon('search', search)
   cursor: text;
   display: flex;
   gap: 12px;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
 .fake-input:hover, .fake-input:focus {

docs/.vitepress/theme/components/base/RangeSlider.vue

@@ -1,11 +1,18 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <script lang="ts" setup>
 import { computed } from "vue";
 
 interface Props {
-    modelValue: number;
-    min?: number;
-    max?: number;
-    step?: number;
+  modelValue: number | string;
+  min?: number;
+  max?: number;
+  step?: number;
+  id: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,23 +22,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits(['update:modelValue'])
 
-const percentage = computed<string>(() => `${((props.modelValue - props.min) / (props.max - props.min)) * 100}%`);
+const percentage = computed<string>(() => `${((Number(props.modelValue) - props.min) / (props.max - props.min)) * 100}%`);
 // TODO: Steps must be implemented
 </script>
 
+
 <template>
-    <div class="slider">
-        <input
-            type="range"
-            v-bind="$attrs"
-            v-bind:value="modelValue"
-            v-on:input="$emit('update:modelValue', Number($event.target.value))"
-            :min="min"
-            :max="max"
-            :step="step"
-        />
-        <div class="bar"></div>
-    </div>
+  <div class="slider">
+    <input
+      :id="id"
+      type="range"
+      v-bind="$attrs"
+      v-bind:value="modelValue"
+      v-on:input="$emit('update:modelValue', Number($event.target.value))"
+      :min="min"
+      :max="max"
+      :step="step"
+    />
+    <div class="bar"></div>
+  </div>
 </template>
 
 <style>

docs/.vitepress/theme/components/home/HomePackagesSection.vue

@@ -23,6 +23,7 @@ const { go } = useRouter()
           height="36"
           width="36"
           loading="lazy"
+          :alt="`${name} logo`"
         />
       </a>
     </div>

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -4,7 +4,7 @@ import type { IconEntity, Category } from '../../types'
 import IconDetailOverlay from './IconDetailOverlay.vue'
 import IconGrid from './IconGrid.vue'
 import useSearch from '../../composables/useSearch'
-import Input from '../base/Input.vue'
+import InputSearch from '../base/InputSearch.vue'
 import useSearchInput from '../../composables/useSearchInput'
 
 const props = defineProps<{
@@ -53,7 +53,12 @@ const activeIcon = computed(() =>
 </script>
 
 <template>
-  <Input type="search" placeholder="Search icons..." v-model="searchQuery" class="input-wrapper" ref="searchInput"/>
+  <InputSearch
+    :placeholder="`Search ${icons.length} icons ...`"
+    v-model="searchQuery"
+    class="input-wrapper"
+    ref="searchInput"
+  />
   <section class="category" v-for="category in categories" :key="category.name">
     <h2 class="title" :id="category.name">
       <a class="header-anchor" :href="`#${category.name}`" :aria-label="`Permalink to &quot;${category.title}&quot;`">&ZeroWidthSpace;</a>
@@ -89,12 +94,6 @@ const activeIcon = computed(() =>
   margin-bottom: 32px;
 }
 
-.input-wrapper:deep(.input) {
-  padding: 12px 24px;
-  font-size: 14px;
-  height: 48px;
-}
-
 .input-wrapper {
   margin-bottom: 16px;
 }

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -68,7 +68,7 @@ watch(searchQueryThrottled, (searchString) => {
 
 <template>
   <InputSearch
-    placeholder="Search icons..."
+    :placeholder="`Search ${icons.length} icons ...`"
     v-model="searchQuery"
     class="input-wrapper"
     ref="searchInput"

docs/icons/index.md

@@ -13,6 +13,9 @@ import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 const { categories, icons } = data
 </script>
 
-<PageContainer>
-  <IconsOverview :icons="icons" />
-</PageContainer>
+<div class="VPDoc content">
+  <PageContainer>
+    <IconsOverview :icons="icons" />
+  </PageContainer>
+</div>
+```