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;

src/scss/base.scss

@@ -131,9 +131,15 @@
   --header-margin: 1rem var(--container-spacing-right-safe) 1rem
     var(--container-spacing-left-safe);
   --navigation-justify-content: flex-start;
+
   --quickfacts-background: var(--theme-b-page-background-light);
+  --quickfacts-cols-double: auto;
+  --quickfacts-cols-triple: auto;
+  --quickfacts-cols-quadruple: auto;
+
   --modal-background: var(--theme-b-modal-background-light);
   --modal-width: 100%;
+
   --welcome-header-headings-flex-basis: 100%;
   --welcome-header-headings-margin: 1.5rem 0 0 0;
   --welcome-header-mainline-font-size: 2rem;
@@ -215,6 +221,10 @@
     --welcome-header-headings-margin: 0;
     --welcome-header-mainline-font-size: var(--font-size-h1);
 
+    --quickfacts-cols-double: 2 auto;
+    --quickfacts-cols-triple: 3 auto;
+    --quickfacts-cols-quadruple: 4 auto;
+
     --section-max-width: 34rem;
 
     --button-group-flex: 0 0 auto;

src/scss/main.scss

@@ -113,22 +113,6 @@ blockquote {
   padding: 1rem;
 }
 
-ul {
-  margin: 1rem 0;
-
-  &.col-2 {
-    columns: 2 auto;
-  }
-
-  &.col-3 {
-    columns: 3 auto;
-  }
-
-  &.col-4 {
-    columns: 4 auto;
-  }
-}
-
 .social {
   > * {
     &:before {

src/views/AnatomyView.vue

@@ -157,8 +157,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <ColorTable :colors="sebinColors" />
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Bipedal plantigrade</li>
         <li>Red and yellow scales</li>
         <li>Yellow scales under chin, torso, underside of tail</li>
@@ -190,8 +190,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Wings</h2>
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>
           Wingspan {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }})
         </li>
@@ -277,8 +277,8 @@ const showModal = inject<Function>(showModalKey, Function);
   </RefFigure>
 
   <section>
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Round pupils, green iris</li>
         <li>Yellow spikes for eyebrows</li>
         <li>Yellow spikes on cheeks</li>
@@ -311,8 +311,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Upper Body</h2>
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Strong upper body</li>
         <li>Big pecs</li>
         <li>Defined abs</li>
@@ -823,8 +823,8 @@ const showModal = inject<Function>(showModalKey, Function);
     <section>
       <DataTable :headings="sebinPenisHeadings" :data="sebinPenisData" />
 
-      <QuickFacts>
-        <ul class="col-2">
+      <QuickFacts :cols="2">
+        <ul>
           <li>Human-shaped with ridges</li>
           <li>Ring-like sheath surrounding shaft</li>
           <li>

src/views/GeneralView.vue

@@ -64,8 +64,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Personality</h2>
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>warm-hearted</li>
         <li>caring</li>
         <li>quick to offer help</li>
@@ -116,8 +116,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Hobbies</h2>
 
-    <QuickFacts>
-      <ul class="col-4">
+    <QuickFacts :cols="4">
+      <ul>
         <li v-for="(hobby, idx) in hobbies" :key="idx">
           {{ hobby }}
         </li>
@@ -143,8 +143,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Food &amp; Drink</h2>
 
-    <QuickFacts>
-      <ul class="col-4">
+    <QuickFacts :cols="4">
+      <ul>
         <li>sweets</li>
         <li>savory food</li>
         <li>spicy food</li>
@@ -185,8 +185,8 @@ const showModal = inject<Function>(showModalKey, Function);
 
       <DataTable :headings="nsfwHeadings" :data="nsfwData" />
 
-      <QuickFacts>
-        <ul class="col-2">
+      <QuickFacts :cols="2">
+        <ul>
           <li>Supremely horny</li>
           <li>Confident, knows what he's got</li>
           <li>Dominant lover, likes it rough but is no brute</li>