feat: migrate to native details element for quickfacts component

src/components/QuickFacts.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
+interface Props {
+  cols?: number;
+}
 
-const isExpanded = ref(false);
-
-const toggle = (): void => {
-  isExpanded.value = !isExpanded.value;
-};
+defineProps<Props>();
 </script>
 
 <template>
-  <div class="quickfacts" :class="{ open: isExpanded }">
-    <h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
-    <div class="quickfacts__list">
+  <details class="quickfacts">
+    <summary class="quickfacts__head">Quickfacts</summary>
+    <div class="quickfacts__list" :class="[`cols-${cols}`]">
       <slot></slot>
     </div>
-  </div>
+  </details>
 </template>
 
 <style lang="scss">
@@ -29,6 +27,7 @@ const toggle = (): void => {
   box-shadow: var(--container-box-shadow);
 
   overflow: hidden;
+  transition: 0.3s all ease-in-out;
 
   &:before {
     display: block;
@@ -48,31 +47,39 @@ const toggle = (): void => {
     }
   }
 
-  &.open:before {
+  &[open]:before {
     transform: rotate(0deg);
   }
 
-  &.open & {
-    &__list {
-      max-height: 25rem;
-      border-top: 0.125rem solid var(--color-quickfacts-border);
-      padding: 1.5rem;
-    }
-  }
-
   &__head {
+    font-family: var(--font-family-headings);
     font-size: 1.125rem;
+    list-style: none;
     margin: 0;
     border: 0;
     padding: 0.75rem 1.5rem;
-    transition: 0.3s all ease-in-out;
     cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   &__list {
-    max-height: 0rem;
-    padding: 0 1.5rem;
-    transition: 0.3s all ease-in-out;
+    border-top: 0.125rem solid var(--color-quickfacts-border);
+    padding: 1.5rem;
+
+    &.cols-2 ul {
+      columns: var(--quickfacts-cols-double);
+    }
+
+    &.cols-3 ul {
+      columns: var(--quickfacts-cols-triple);
+    }
+
+    &.cols-4 ul {
+      columns: var(--quickfacts-cols-quadruple);
+    }
 
     ul {
       margin: 0;