minor fixes

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

@@ -26,12 +26,12 @@ const value = computed({
         v-model="value"
       />
     </div>
-    <!-- TODO: This should have an hidden label -->
     <input
       type="text"
       :id="`${id}-input`"
       :name="`${id}-input`"
       class="color-input-text"
+      aria-label="Color picker input"
       v-model="value"
     />
   </div>

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

@@ -7,7 +7,7 @@
 <style scoped>
 
 .icon-button {
-  display: inline-block;
+  display: inline-flex;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;
@@ -17,7 +17,6 @@
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
   border-radius: 6px;
   background-color: var(--vp-c-bg-alt);
-  display: inline-flex;
   /* width: 56px;
   height: 56px; */
   font-size: 24px;

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

@@ -54,17 +54,15 @@ onBeforeUnmount(() => {
     <div class="icons-card">
       <div class="card-grid">
         <TransitionGroup  name="list" mode="out-in">
-          <IconButton
+          <div
             v-for="icon in items"
-            @click="() => go(`/icons/${icon.name}`)"
-            :aria-label="`See ${icon.name} icon`"
             :key="icon.name"
             class="random-icon"
           >
             <LucideIcon
               v-bind="icon"
             />
-          </IconButton>
+          </div>
         </TransitionGroup>
       </div>
       <FakeInput @click="go('/icons/?focus')" class="search-box">
@@ -138,6 +136,12 @@ onBeforeUnmount(() => {
   top: -64px;
 }
 
+.random-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (min-width: 960px) {
   .search-box {
     top: unset;