Final few components

lib/components/search/Categories.vue

@@ -39,7 +39,7 @@ export default {
   flex-wrap: wrap;
   gap: var(--gap-sm);
 
-  span ::v-deep {
+  :deep(span) {
     display: flex;
     flex-direction: row;
     color: var(--color-icon);

lib/components/search/SearchFilter.vue

@@ -0,0 +1,73 @@
+<template>
+  <Checkbox
+    class="filter"
+    :model-value="activeFilters.includes(facetName)"
+    :description="displayName"
+    @update:model-value="toggle()"
+  >
+    <div class="filter-text">
+      <div v-if="icon" aria-hidden="true" class="icon" v-html="icon" />
+      <div v-else class="icon">
+        <slot />
+      </div>
+      <span aria-hidden="true"> {{ displayName }}</span>
+    </div>
+  </Checkbox>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Checkbox from '@/components/base/Checkbox.vue'
+export default defineComponent({
+  components: {
+    Checkbox,
+  },
+  props: {
+    facetName: {
+      type: String,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    activeFilters: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  emits: ['toggle'],
+  methods: {
+    toggle() {
+      this.$emit('toggle', this.facetName)
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.filter {
+  margin-bottom: 0.5rem;
+  :deep(.filter-text) {
+    display: flex;
+    align-items: center;
+    .icon {
+      height: 1rem;
+      svg {
+        margin-right: 0.25rem;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+  span {
+    user-select: none;
+  }
+}
+</style>