From a33f9d25b8db202c9c61f64596614bb11c763745 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Fri, 15 Nov 2024 11:02:27 +0200
Subject: [PATCH 1/8] Include accessibility in linting

---
 eslint.config.mjs               |  2 ++
 package-lock.json               | 36 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 src/components/ToastMessage.vue | 13 ++++++++++--
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5f6a4a4..f8f4e5c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,6 +4,7 @@ import pluginVitest from '@vitest/eslint-plugin';
 import pluginPlaywright from 'eslint-plugin-playwright';
 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
 import {includeIgnoreFile} from '@eslint/compat';
+import pluginVueA11y from 'eslint-plugin-vuejs-accessibility';
 import {fileURLToPath} from 'node:url';
 
 export default [
@@ -13,6 +14,7 @@ export default [
     files: ['**/*.{ts,mts,tsx,vue}'],
   },
 
+  ...pluginVueA11y.configs['flat/recommended'],
   ...pluginVue.configs['flat/essential'],
   ...vueTsEslintConfig(),
 
diff --git a/package-lock.json b/package-lock.json
index 258e88d..cb3f5d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "eslint": "^9.14.0",
         "eslint-plugin-playwright": "^2.0.1",
         "eslint-plugin-vue": "^9.31.0",
+        "eslint-plugin-vuejs-accessibility": "^2.4.1",
         "jsdom": "^25.0.1",
         "npm-run-all2": "^7.0.1",
         "postcss": "^8.4.49",
@@ -3924,6 +3925,16 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -5216,6 +5227,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-plugin-vuejs-accessibility": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuejs-accessibility/-/eslint-plugin-vuejs-accessibility-2.4.1.tgz",
+      "integrity": "sha512-ZRZhPdslplZXSF71MtSG+zXYRAT5KiHR4JVuo/DERQf9noAkDvi5W418VOE1qllmJd7wTenndxi1q8XeDMxdHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.0",
+        "emoji-regex": "^10.0.0",
+        "vue-eslint-parser": "^9.0.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-vuejs-accessibility/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eslint-scope": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
diff --git a/package.json b/package.json
index d738bf6..a51e30d 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "eslint": "^9.14.0",
     "eslint-plugin-playwright": "^2.0.1",
     "eslint-plugin-vue": "^9.31.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.49",
diff --git a/src/components/ToastMessage.vue b/src/components/ToastMessage.vue
index db1c2b9..547a600 100644
--- a/src/components/ToastMessage.vue
+++ b/src/components/ToastMessage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {getRandomEmojis} from '@/utils/helpers';
-import {useElementHover, useTimeout} from '@vueuse/core';
+import {useElementHover, useTimeout, useFocus} from '@vueuse/core';
 import {ref, watchEffect} from 'vue';
 
 defineProps<{
@@ -17,9 +17,10 @@ const {start, stop} = useTimeout(5500, {
 });
 
 const isHovered = useElementHover(toastMessage);
+const {focused} = useFocus(toastMessage);
 
 watchEffect(() => {
-  if (isHovered.value) {
+  if (isHovered.value || focused.value) {
     stop();
   } else {
     start();
@@ -29,11 +30,15 @@ watchEffect(() => {
 const emoji = getRandomEmojis()[0];
 </script>
 <template>
+  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
   <div
     ref="toastMessage"
     class="toast-message"
+    role="status"
+    tabindex="0"
     data-test-id="toast-message"
     @click="$emit('close')"
+    @keydown.enter="$emit('close')"
   >
     <div class="toast-message__content">
       <span class="text-2xl" aria-hidden="true">
@@ -47,6 +52,10 @@ const emoji = getRandomEmojis()[0];
 .toast-message {
   @apply w-full shadow-md p-4;
   @apply bg-sky-500;
+
+  &:focus {
+    @apply -outline-offset-2;
+  }
 }
 
 .toast-message__content {

From 4392e7925525b71a7bc75c7a0f1c2896280dfd41 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Fri, 15 Nov 2024 15:16:00 +0200
Subject: [PATCH 2/8] Change front page search prompt

---
 src/components/__tests__/__snapshots__/LogView.spec.ts.snap | 4 ++--
 src/i18n/en.json                                            | 2 +-
 src/i18n/fi.json                                            | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index 160a9ee..90775c1 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`LogView > renders 1`] = `
 "<h1 class="sr-only">Track Progress</h1>
-<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
@@ -15,7 +15,7 @@ exports[`LogView > renders 1`] = `
 
 exports[`LogView > renders with data 1`] = `
 "<h1 class="sr-only">Track Progress</h1>
-<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Track Weekly Veggies" placeholder="Track Weekly Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 14cb928..c8462fa 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -991,7 +991,7 @@
   "veggieSearch": {
     "challenge": "Your Weekly Challenge",
     "noResults": "No Results",
-    "search": "Search For Veggies"
+    "search": "Track Weekly Veggies"
   },
   "veggiesTotal": {
     "title": "Unique Veggies",
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 5b4fe7d..55669fe 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -999,7 +999,7 @@
   "veggieSearch": {
     "challenge": "Viikkohaasteesi",
     "noResults": "Ei tuloksia",
-    "search": "Etsi kasviksia"
+    "search": "Kirjaa viikon kasvikset"
   },
   "veggiesTotal": {
     "title": "Kokeillut kasvikset",

From 0eb3a2dbb326bb14018797d2766223145904ed73 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Fri, 15 Nov 2024 16:27:12 +0200
Subject: [PATCH 3/8] Move home locale changer to navbar

---
 src/App.vue                                   |  2 +-
 src/components/HomeLocaleChanger.vue          |  8 +-------
 src/components/NavBar.vue                     | 20 +++++++++++++++----
 src/components/__tests__/NavBar.spec.ts       |  2 +-
 src/components/__tests__/NavBarHome.spec.ts   | 20 +++++++++++++++++++
 .../__snapshots__/HomeView.spec.ts.snap       |  5 -----
 .../__snapshots__/NavBar.spec.ts.snap         | 11 ++++++++++
 .../__snapshots__/NavBarHome.spec.ts.snap     | 12 +++++++++++
 src/views/HomeView.vue                        |  2 --
 9 files changed, 62 insertions(+), 20 deletions(-)
 create mode 100644 src/components/__tests__/NavBarHome.spec.ts
 create mode 100644 src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
 create mode 100644 src/components/__tests__/__snapshots__/NavBarHome.spec.ts.snap

diff --git a/src/App.vue b/src/App.vue
index d977018..0d062bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,7 +44,7 @@ watchEffect(() => {
 
 <template>
   <ToastContainer />
-  <NavBar v-if="route.name !== 'home'" :showStats="!!allVeggies.length" />
+  <NavBar :showStats="!!allVeggies.length" />
   <main>
     <RouterView />
   </main>
diff --git a/src/components/HomeLocaleChanger.vue b/src/components/HomeLocaleChanger.vue
index a8fd713..4b7108d 100644
--- a/src/components/HomeLocaleChanger.vue
+++ b/src/components/HomeLocaleChanger.vue
@@ -13,7 +13,7 @@ const availableLocales = computed(() =>
 );
 </script>
 <template>
-  <div class="locale-changer__container">
+  <div class="flex-container">
     <IconComponent icon="earth" />
     <ButtonComponent
       v-for="availableLocale in availableLocales"
@@ -26,9 +26,3 @@ const availableLocales = computed(() =>
     >
   </div>
 </template>
-<style lang="scss" scoped>
-.locale-changer__container {
-  @apply absolute top-4 right-4;
-  @apply flex-container;
-}
-</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c19cd51..8ec531e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import {RouterLink} from 'vue-router';
+import {computed} from 'vue';
+import {RouterLink, useRoute} from 'vue-router';
+import HomeLocaleChanger from '@/components/HomeLocaleChanger.vue';
 defineProps<{
   showStats: boolean;
 }>();
+
+const route = useRoute();
+
+const isHome = computed(() => route.name === 'home');
 </script>
 <template>
-  <nav class="nav">
+  <nav :class="{'navbar--home': isHome}" class="navbar">
     <RouterLink
+      v-if="!isHome"
       :aria-label="$t('views.log')"
       to="/log"
       class="nav__link nav__link--log"
       data-test-id="navbar-link-log"
       >{{ $t('general.appTitle') }}</RouterLink
     >
-    <div class="flex-container">
+    <div v-if="!isHome" class="flex-container">
       <RouterLink
         v-if="showStats"
         :title="$t('views.stats')"
@@ -34,12 +41,17 @@ defineProps<{
         <IconComponent icon="cog" size="6vw" class="nav__link-icon" />
       </RouterLink>
     </div>
+    <HomeLocaleChanger v-else />
   </nav>
 </template>
 <style scoped lang="scss">
-.nav {
+.navbar {
   @apply w-full;
   @apply flex justify-between items-center;
+
+  &--home {
+    @apply justify-end;
+  }
 }
 
 .nav__link {
diff --git a/src/components/__tests__/NavBar.spec.ts b/src/components/__tests__/NavBar.spec.ts
index 8148256..614cda5 100644
--- a/src/components/__tests__/NavBar.spec.ts
+++ b/src/components/__tests__/NavBar.spec.ts
@@ -9,7 +9,7 @@ describe('NavBar', () => {
         showStats: false,
       },
     });
-    expect(wrapper).toBeTruthy();
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('uses showStats prop', async () => {
diff --git a/src/components/__tests__/NavBarHome.spec.ts b/src/components/__tests__/NavBarHome.spec.ts
new file mode 100644
index 0000000..3075e0b
--- /dev/null
+++ b/src/components/__tests__/NavBarHome.spec.ts
@@ -0,0 +1,20 @@
+import {describe, it, expect, vi} from 'vitest';
+import {mount} from '@vue/test-utils';
+import NavBar from '@/components/NavBar.vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    name: 'home',
+  }),
+}));
+
+describe('NavBar Home', () => {
+  it('renders for home', async () => {
+    const wrapper = mount(NavBar, {
+      props: {
+        showStats: false,
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
index b8acc05..398be89 100644
--- a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
@@ -2,11 +2,6 @@
 
 exports[`HomeView > renders 1`] = `
 "<div data-v-b4e148ca="" class="home__container">
-  <div data-v-ab65777b="" data-v-b4e148ca="" class="locale-changer__container"><svg data-v-ab65777b="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" class="transition-all"></path>
-    </svg><button data-v-24e38f3d="" data-v-ab65777b="" class="button button--text" data-test-id="home-locale-button-fi" aria-label="Change language to Suomi">
-      <!--v-if-->fi
-    </button></div>
   <h1 data-v-b4e148ca="" class="home__title">Eat Your Veggies</h1>
   <p data-v-b4e148ca="" class="sm:text-center">Adopt a healthy lifestyle by eating 30 plant-based ingredients each week. Track your progress easily with this free app.</p>
   <div data-v-b4e148ca="" class="flex-container justify-center"><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-info-button">
diff --git a/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
new file mode 100644
index 0000000..96d4de7
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NavBar > renders 1`] = `
+"<nav data-v-c3ceb15a="" class="navbar"><a data-v-c3ceb15a="" href="/veggies/log" class="nav__link nav__link--log" aria-label="Track Progress" data-test-id="navbar-link-log">Eat Your Veggies</a>
+  <div data-v-c3ceb15a="" class="flex-container">
+    <!--v-if--><a data-v-c3ceb15a="" href="/veggies/settings" class="nav__link" title="Settings" aria-label="Settings" data-test-id="navbar-link-settings"><svg data-v-c3ceb15a="" style="width: 6vw; height: 6vw;" class="flex-shrink-0 nav__link-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" class="transition-all"></path>
+      </svg></a>
+  </div>
+</nav>"
+`;
diff --git a/src/components/__tests__/__snapshots__/NavBarHome.spec.ts.snap b/src/components/__tests__/__snapshots__/NavBarHome.spec.ts.snap
new file mode 100644
index 0000000..fc4ca80
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/NavBarHome.spec.ts.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NavBar Home > renders for home 1`] = `
+"<nav data-v-c3ceb15a="" class="navbar--home navbar">
+  <!--v-if-->
+  <div data-v-c3ceb15a="" class="flex-container"><svg style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" class="transition-all"></path>
+    </svg><button data-v-24e38f3d="" class="button button--text" data-test-id="home-locale-button-fi" aria-label="Change language to Suomi">
+      <!--v-if-->fi
+    </button></div>
+</nav>"
+`;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1f2d0e3..8406783 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,7 +5,6 @@ import {storeToRefs} from 'pinia';
 import {DateTime} from 'luxon';
 import {useActivityStore} from '@/stores/activityStore';
 import ModalDialog from '@/components/ModalDialog.vue';
-import HomeLocaleChanger from '@/components/HomeLocaleChanger.vue';
 
 const router = useRouter();
 
@@ -20,7 +19,6 @@ const start = () => {
 </script>
 <template>
   <div class="home__container">
-    <HomeLocaleChanger />
     <h1 class="home__title">{{ $t('general.appTitle') }}</h1>
     <p class="sm:text-center">
       {{ $t('home.callout') }}

From e3e681ac78cecc282ef3295afa16836cd74f2db7 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 18 Nov 2024 09:10:19 +0200
Subject: [PATCH 4/8] Fix minor typos

---
 src/i18n/fi.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 55669fe..84ff4e4 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -430,10 +430,10 @@
     ],
     "millet": [
       "30 gramman annos hirssiä sisältää noin 11 g proteiinia. Hirssi on myös gluteeniton.",
-      "Hirssi on muinainen vilja, joka on peruselintarvike monissa osissa Afrikkaa ja Aasiaa."
+      "Hirssi on muinainen vilja, ja peruselintarvike monissa osissa Afrikkaa ja Aasiaa."
     ],
     "mint": [
-      "Minttu on myös suosittu cocktailainesosa, jota käytetään muun muassa minttujulepissa."
+      "Minttu on myös suosittu cocktailainesosa, jota käytetään esimerkiksi minttujulepissa."
     ],
     "mizuna": [
       "Mizuna on nopeasti kasvava lehtivihannes, joka kerätään tyypillisesti nuorena parhaan maun saavuttamiseksi."
@@ -480,7 +480,7 @@
     ],
     "pea sprouts": ["Herneenversoja voi kasvattaa helposti myös kotona kuivatuista herneistä."],
     "peach": [
-      "Persikat ovat kotoisin Kiinasta, mutta niitä viljellään nykyisin monillaa lauhkean ilmaston alueilla."
+      "Persikat ovat kotoisin Kiinasta, mutta niitä viljellään nykyisin monilla lauhkean ilmaston alueilla."
     ],
     "peanut": [
       "Maapähkinät ovat runsas terveellisten rasvojen ja proteiinin lähde, sisältäen runsaasti energiaa.",
@@ -492,7 +492,7 @@
       "Pekaanipähkinät ovat kotoisin Pohjois-Amerikasta ja ne olivat tärkeä ravinnonlähde alkuperäiskansoille."
     ],
     "persimmon": [
-      "Persimonit jaetaan kahteen päätyyppiin: kirpeisiin (kuten Hachiya) ja makeisiin (kuten Fuyu).",
+      "Persimonit jaetaan kahteen päätyyppiin: kirpeisiin (kuten hachiya) ja makeisiin (kuten fuyu).",
       "Persimon on Japanin kansallishedelmä."
     ],
     "pine nut": [

From 4399a3787d03808db5335120e673355753c25d4e Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 18 Nov 2024 09:10:32 +0200
Subject: [PATCH 5/8] Update dependencies

---
 package-lock.json | 358 +++++++++++++++++++++++-----------------------
 package.json      |  10 +-
 2 files changed, 184 insertions(+), 184 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb3f5d4..afd0159 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,15 +19,15 @@
         "chartjs-plugin-datalabels": "^2.2.0",
         "luxon": "^3.5.0",
         "pinia": "^2.2.6",
-        "remeda": "^2.17.0",
-        "vue": "3.5.12",
+        "remeda": "^2.17.3",
+        "vue": "3.5.13",
         "vue-chartjs": "^5.3.2",
         "vue-i18n": "^10.0.4",
         "vue-router": "^4.4.5",
         "xstate": "^5.19.0"
       },
       "devDependencies": {
-        "@eslint/compat": "^1.2.2",
+        "@eslint/compat": "^1.2.3",
         "@pinia/testing": "^0.1.7",
         "@playwright/test": "^1.48.2",
         "@tsconfig/node20": "^20.1.4",
@@ -43,7 +43,7 @@
         "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.6.0",
         "autoprefixer": "^10.4.20",
-        "eslint": "^9.14.0",
+        "eslint": "9.14.0",
         "eslint-plugin-playwright": "^2.0.1",
         "eslint-plugin-vue": "^9.31.0",
         "eslint-plugin-vuejs-accessibility": "^2.4.1",
@@ -51,8 +51,8 @@
         "npm-run-all2": "^7.0.1",
         "postcss": "^8.4.49",
         "prettier": "^3.3.3",
-        "sass-embedded": "^1.80.7",
-        "tailwindcss": "^3.4.14",
+        "sass-embedded": "^1.81.0",
+        "tailwindcss": "^3.4.15",
         "typescript": "^5.6.3",
         "vite": "^5.4.11",
         "vite-plugin-pwa": "^0.21.0",
@@ -2108,9 +2108,9 @@
       }
     },
     "node_modules/@eslint/compat": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.2.tgz",
-      "integrity": "sha512-jhgiIrsw+tRfcBQ4BFl2C3vCrIUw2trCY0cnDvGZpwTtKCEDmZhAtMfrEUP/KpnwM6PrO0T+Ltm+ccW74olG3Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.3.tgz",
+      "integrity": "sha512-wlZhwlDFxkxIZ571aH0FoK4h4Vwx7P3HJx62Gp8hTc10bfpwT2x0nULuAHmQSJBOWPgPeVf+9YtnD4j50zVHmA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2175,9 +2175,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2243,9 +2243,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.1.tgz",
-      "integrity": "sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2335,9 +2335,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.0.tgz",
-      "integrity": "sha512-xnRgu9DxZbkWak/te3fcytNyp8MTbuiZIaueg2rgEvBuN55n04nwLYLU9TX/VVlusc9L2ZNXi99nUFNkHXtr5g==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3464,13 +3464,13 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.12",
+        "@vue/shared": "3.5.13",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
@@ -3483,29 +3483,29 @@
       "license": "MIT"
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
-      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.12",
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
+        "postcss": "^8.4.48",
         "source-map-js": "^1.2.0"
       }
     },
@@ -3516,13 +3516,13 @@
       "license": "MIT"
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -3609,53 +3609,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
-      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.12"
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
-      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
-      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/runtime-core": "3.5.12",
-        "@vue/shared": "3.5.12",
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
-        "vue": "3.5.12"
+        "vue": "3.5.13"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -4496,9 +4496,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
+      "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7996,12 +7996,12 @@
       }
     },
     "node_modules/remeda": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.17.0.tgz",
-      "integrity": "sha512-mBsn4rGLSE788XqzOlePZiXUFNCrLIBVFl1ntzjBq8NqdsLZUQydxQ2naqNr13eBEDoictYLqKlwzhFTxgfydA==",
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.17.3.tgz",
+      "integrity": "sha512-xyi2rCQkz2j4BEWbWxPw6JCapv1yBuSwr4Uf9BX00AkesAJaiKvc6Il6thsBidwVZAtNiSaCIXvslkKL0ybz8w==",
       "license": "MIT",
       "dependencies": {
-        "type-fest": "^4.26.1"
+        "type-fest": "^4.27.0"
       }
     },
     "node_modules/require-from-string": {
@@ -8196,9 +8196,9 @@
       "license": "MIT"
     },
     "node_modules/sass-embedded": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.80.7.tgz",
-      "integrity": "sha512-OwF0QvpDUjW2udPCvxgaObU0tQHycpsIgCDtHBVHuOqZ2LN0OkkY+uxSO7bOaw9wD7vXtt+1V+jiIZDTxiSRVQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.81.0.tgz",
+      "integrity": "sha512-uZQ2Faxb1oWBHpeSSzjxnhClbMb3QadN0ql0ZFNuqWOLUxwaVhrMlMhPq6TDPbbfDUjihuwrMCuy695Bgna5RA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8218,32 +8218,32 @@
         "node": ">=16.0.0"
       },
       "optionalDependencies": {
-        "sass-embedded-android-arm": "1.80.7",
-        "sass-embedded-android-arm64": "1.80.7",
-        "sass-embedded-android-ia32": "1.80.7",
-        "sass-embedded-android-riscv64": "1.80.7",
-        "sass-embedded-android-x64": "1.80.7",
-        "sass-embedded-darwin-arm64": "1.80.7",
-        "sass-embedded-darwin-x64": "1.80.7",
-        "sass-embedded-linux-arm": "1.80.7",
-        "sass-embedded-linux-arm64": "1.80.7",
-        "sass-embedded-linux-ia32": "1.80.7",
-        "sass-embedded-linux-musl-arm": "1.80.7",
-        "sass-embedded-linux-musl-arm64": "1.80.7",
-        "sass-embedded-linux-musl-ia32": "1.80.7",
-        "sass-embedded-linux-musl-riscv64": "1.80.7",
-        "sass-embedded-linux-musl-x64": "1.80.7",
-        "sass-embedded-linux-riscv64": "1.80.7",
-        "sass-embedded-linux-x64": "1.80.7",
-        "sass-embedded-win32-arm64": "1.80.7",
-        "sass-embedded-win32-ia32": "1.80.7",
-        "sass-embedded-win32-x64": "1.80.7"
+        "sass-embedded-android-arm": "1.81.0",
+        "sass-embedded-android-arm64": "1.81.0",
+        "sass-embedded-android-ia32": "1.81.0",
+        "sass-embedded-android-riscv64": "1.81.0",
+        "sass-embedded-android-x64": "1.81.0",
+        "sass-embedded-darwin-arm64": "1.81.0",
+        "sass-embedded-darwin-x64": "1.81.0",
+        "sass-embedded-linux-arm": "1.81.0",
+        "sass-embedded-linux-arm64": "1.81.0",
+        "sass-embedded-linux-ia32": "1.81.0",
+        "sass-embedded-linux-musl-arm": "1.81.0",
+        "sass-embedded-linux-musl-arm64": "1.81.0",
+        "sass-embedded-linux-musl-ia32": "1.81.0",
+        "sass-embedded-linux-musl-riscv64": "1.81.0",
+        "sass-embedded-linux-musl-x64": "1.81.0",
+        "sass-embedded-linux-riscv64": "1.81.0",
+        "sass-embedded-linux-x64": "1.81.0",
+        "sass-embedded-win32-arm64": "1.81.0",
+        "sass-embedded-win32-ia32": "1.81.0",
+        "sass-embedded-win32-x64": "1.81.0"
       }
     },
     "node_modules/sass-embedded-android-arm": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.80.7.tgz",
-      "integrity": "sha512-pMxJ70yOGXYGmfoGlAMKqnr/nuP/UgKV3jc7v5kpmWGpPPMF2u63DM2QkvTqM32FyfwyxSycVaNFNT+gPomTiw==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.81.0.tgz",
+      "integrity": "sha512-NWEmIuaIEsGFNsIRa+5JpIpPJyZ32H15E85CNZqEIhhwWlk9UNw7vlOCmTH8MtabtnACwC/2NG8VyNa3nxKzUQ==",
       "cpu": [
         "arm"
       ],
@@ -8258,9 +8258,9 @@
       }
     },
     "node_modules/sass-embedded-android-arm64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.80.7.tgz",
-      "integrity": "sha512-Gwl/OY80uEA14MLm7efJvc1ErgGT51SvAv4/kIpTziOJpkk+999/nrEJHQ6YAJ7r5DuQcKvC3lHipcENUIpP9A==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.81.0.tgz",
+      "integrity": "sha512-I36P77/PKAHx6sqOmexO2iEY5kpsmQ1VxcgITZSOxPMQhdB6m4t3bTabfDuWQQmCrqqiNFtLQHeytB65bUqwiw==",
       "cpu": [
         "arm64"
       ],
@@ -8275,9 +8275,9 @@
       }
     },
     "node_modules/sass-embedded-android-ia32": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.80.7.tgz",
-      "integrity": "sha512-CJccGPgBePPYiXhyQWvgHF8AqjIDSGf+mcC4Ac/f5upRd9Z/vhQVrJfsDxt4c4tV0HGEfbQpT9xOCYF1Z6luZQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.81.0.tgz",
+      "integrity": "sha512-k8V1usXw30w1GVxvrteG1RzgYJzYQ9PfL2aeOqGdroBN7zYTD9VGJXTGcxA4IeeRxmRd7szVW2mKXXS472fh8g==",
       "cpu": [
         "ia32"
       ],
@@ -8292,9 +8292,9 @@
       }
     },
     "node_modules/sass-embedded-android-riscv64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.80.7.tgz",
-      "integrity": "sha512-kIGcyuhNes9NUDzJ9VHy/ZGKdADCCt7JAwiC7lFSc6/xs5rJtGRn6hZ+mcG7gQWAezb5oK/VMQl8ps7HBFUEXw==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.81.0.tgz",
+      "integrity": "sha512-RXlanyLXEpN/DEehXgLuKPsqT//GYlsGFxKXgRiCc8hIPAueFLQXKJmLWlL3BEtHgmFdbsStIu4aZCcb1hOFlQ==",
       "cpu": [
         "riscv64"
       ],
@@ -8309,9 +8309,9 @@
       }
     },
     "node_modules/sass-embedded-android-x64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.80.7.tgz",
-      "integrity": "sha512-oLMQiFpbSczOrGZSWlZvVJ1T9L6nDjS2u8PTxfT0MFX/FT3EhaxylHeiYKrmtY4epRufNCC/G96DMVqnSNa1QQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.81.0.tgz",
+      "integrity": "sha512-RQG0FxGQ1DERNyUDED8+BDVaLIjI+BNg8lVcyqlLZUrWY6NhzjwYEeiN/DNZmMmHtqDucAPNDcsdVUNQqsBy2A==",
       "cpu": [
         "x64"
       ],
@@ -8326,9 +8326,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-arm64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.80.7.tgz",
-      "integrity": "sha512-Vi5BbTWd9OO0tC60CPw5IY7w3Tccr1/Gy2DdkfE4qP6Rc368WmUis5ceG8ehAye0IT7aoRXpw8XTzWyXAZHbfw==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.81.0.tgz",
+      "integrity": "sha512-gLKbsfII9Ppua76N41ODFnKGutla9qv0OGAas8gxe0jYBeAQFi/1iKQYdNtQtKi4mA9n5TQTqz+HHCKszZCoyA==",
       "cpu": [
         "arm64"
       ],
@@ -8343,9 +8343,9 @@
       }
     },
     "node_modules/sass-embedded-darwin-x64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.80.7.tgz",
-      "integrity": "sha512-yeANclgSHJ7K/XLG4Lnk7aQ5dk7K+oqIOtoOP0bjXgWsdPbes9V7k1ZJ9mZGl+f/XAPaRRPqjKs4WHU9s8m8MA==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.81.0.tgz",
+      "integrity": "sha512-7uMOlT9hD2KUJCbTN2XcfghDxt/rc50ujjfSjSHjX1SYj7mGplkINUXvVbbvvaV2wt6t9vkGkCo5qNbeBhfwBg==",
       "cpu": [
         "x64"
       ],
@@ -8360,9 +8360,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.80.7.tgz",
-      "integrity": "sha512-ZttC6H2Z9YXUVFlprqZ0AgXuHdzqhvhUWsG7UUqkND9JSHvyFSwRij4h90aOK3gKg3PBGI4yG5tonLq2yV525A==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.81.0.tgz",
+      "integrity": "sha512-REqR9qM4RchCE3cKqzRy9Q4zigIV82SbSpCi/O4O3oK3pg2I1z7vkb3TiJsivusG/li7aqKZGmYOtAXjruGQDA==",
       "cpu": [
         "arm"
       ],
@@ -8377,9 +8377,9 @@
       }
     },
     "node_modules/sass-embedded-linux-arm64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.80.7.tgz",
-      "integrity": "sha512-Idb5K9LHHWklN7A/kqWUd6sktA36V70bSjZ/gvCDu/5CBJBkMsVNdrxcdpGzrZe7pYV4XUTkMZOwf91owEywtQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.81.0.tgz",
+      "integrity": "sha512-jy4bvhdUmqbyw1jv1f3Uxl+MF8EU/Y/GDx4w6XPJm4Ds+mwH/TwnyAwsxxoBhWfnBnW8q2ADy039DlS5p+9csQ==",
       "cpu": [
         "arm64"
       ],
@@ -8394,9 +8394,9 @@
       }
     },
     "node_modules/sass-embedded-linux-ia32": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.80.7.tgz",
-      "integrity": "sha512-xKnWWEFz1jFc9xDAG7nMcjPBCTuiJbqvTmEtwQoWj79hQrzVdkLM6SiUGVbGa1c2s2fJMS3Bg2fkDJBK6/BcuQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.81.0.tgz",
+      "integrity": "sha512-ga/Jk4q5Bn1aC+iHJteDZuLSKnmBUiS3dEg1fnl/Z7GaHIChceKDJOw0zNaILRXI0qT2E1at9MwzoRaRA5Nn/g==",
       "cpu": [
         "ia32"
       ],
@@ -8411,9 +8411,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.80.7.tgz",
-      "integrity": "sha512-gJLfSFiiuGaqWjaj0bcuhOlQ+t1jS9StuzXnW1b9gy2I6Y0uCprgbbELgtRVPSZlCG2BBolR76YCGQTB85M43Q==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.81.0.tgz",
+      "integrity": "sha512-oWVUvQ4d5Kx1Md75YXZl5z1WBjc+uOhfRRqzkJ3nWc8tjszxJN+y/5EOJavhsNI3/2yoTt6eMXRTqDD9b0tWSQ==",
       "cpu": [
         "arm"
       ],
@@ -8428,9 +8428,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-arm64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.80.7.tgz",
-      "integrity": "sha512-7+GCYIh+c1BG4ot/PbTvVXUxd2GxDWcMxV7i3sARStQBDpTZFfohWdjUytLyqGxQgJIrbq0Q60Ucrw6HUJtJ9A==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.81.0.tgz",
+      "integrity": "sha512-hpntWf5kjkoxncA1Vh8vhsUOquZ8AROZKx0rQh7ZjSRs4JrYZASz1cfevPKaEM3wIim/nYa6TJqm0VqWsrERlA==",
       "cpu": [
         "arm64"
       ],
@@ -8445,9 +8445,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-ia32": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.80.7.tgz",
-      "integrity": "sha512-Iw2E6P1lha335C5tGNgPjLD7Oll7OdLBJ7uPKaU+I7KbiOPk7ELsxUL9AYIrKO0/MLtgxGqOWWfTo/5cvU8xSA==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.81.0.tgz",
+      "integrity": "sha512-UEXUYkBuqTSwg5JNWiNlfMZ1Jx6SJkaEdx+fsL3Tk099L8cKSoJWH2EPz4ZJjNbyIMymrSdVfymheTeZ8u24xA==",
       "cpu": [
         "ia32"
       ],
@@ -8462,9 +8462,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-riscv64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.80.7.tgz",
-      "integrity": "sha512-gd92dkDVpTh4xJb2hpX82E6el30h4MxCb7VJLwtbQSrQuxOlZgaDX4plMSZifsNTLvOsafdLCYyI+QsZRr8bkA==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.81.0.tgz",
+      "integrity": "sha512-1D7OznytbIhx2XDHWi1nuQ8d/uCVR7FGGzELgaU//T8A9DapVTUgPKvB70AF1k4GzChR9IXU/WvFZs2hDTbaJg==",
       "cpu": [
         "riscv64"
       ],
@@ -8479,9 +8479,9 @@
       }
     },
     "node_modules/sass-embedded-linux-musl-x64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.80.7.tgz",
-      "integrity": "sha512-i5udU+i0LZrL3dhHAgIfK7LBaHtScwAceiykndNIHyRXc1TY2DX3lG0EolVUvPyWFUNnvGCgxZF8oUToPzJ+pw==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.81.0.tgz",
+      "integrity": "sha512-ia6VCTeVDQtBSMktXRFza1AZCt8/6aUoujot6Ugf4KmdytQqPJIHxkHaGftm5xwi9WdrMGYS7zgolToPijR11A==",
       "cpu": [
         "x64"
       ],
@@ -8496,9 +8496,9 @@
       }
     },
     "node_modules/sass-embedded-linux-riscv64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.80.7.tgz",
-      "integrity": "sha512-DvnXvu019c6THNQnSWfy2eY/HFWZ2ogGUjRkdKAxj7U7i/YD+bsDIxdDQHZ48qzOguzx8n2aRa/clriM0HQPUA==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.81.0.tgz",
+      "integrity": "sha512-KbxSsqu4tT1XbhZfJV/5NfW0VtJIGlD58RjqJqJBi8Rnjrx29/upBsuwoDWtsPV/LhoGwwU1XkSa9Q1ifCz4fQ==",
       "cpu": [
         "riscv64"
       ],
@@ -8513,9 +8513,9 @@
       }
     },
     "node_modules/sass-embedded-linux-x64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.80.7.tgz",
-      "integrity": "sha512-nQB+IZwCzVPpPkP5L9zV416/AGPLky7L2GGPWtvxG2CEeTV1Rzet+gkhzk2eYEdbh+3py/w9YVRTaQuZ3QV0vQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.81.0.tgz",
+      "integrity": "sha512-AMDeVY2T9WAnSFkuQcsOn5c29GRs/TuqnCiblKeXfxCSKym5uKdBl/N7GnTV6OjzoxiJBbkYKdVIaS5By7Gj4g==",
       "cpu": [
         "x64"
       ],
@@ -8530,9 +8530,9 @@
       }
     },
     "node_modules/sass-embedded-win32-arm64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.80.7.tgz",
-      "integrity": "sha512-Q6Rh/CM30m8txoKK5SIVamnwPXs028Mvfq4Ol4saHgSYro9kY/HTrrWlG/RPd6sPvYBCYIm1mX8oBteDUMCajQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.81.0.tgz",
+      "integrity": "sha512-YOmBRYnygwWUmCoH14QbMRHjcvCJufeJBAp0m61tOJXIQh64ziwV4mjdqjS/Rx3zhTT4T+nulDUw4d3kLiMncA==",
       "cpu": [
         "arm64"
       ],
@@ -8547,9 +8547,9 @@
       }
     },
     "node_modules/sass-embedded-win32-ia32": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.80.7.tgz",
-      "integrity": "sha512-VZMRp81KWUZZDqNwkL3yTDT+VRxB7ScJKUJD1M8fq6P1nyJP35+r1byXLF4UQMoNgpC5B16txxMvqdkv43OqAA==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.81.0.tgz",
+      "integrity": "sha512-HFfr/C+uLJGGTENdnssuNTmXI/xnIasUuEHEKqI+2J0FHCWT5cpz3PGAOHymPyJcZVYGUG/7gIxIx/d7t0LFYw==",
       "cpu": [
         "ia32"
       ],
@@ -8564,9 +8564,9 @@
       }
     },
     "node_modules/sass-embedded-win32-x64": {
-      "version": "1.80.7",
-      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.80.7.tgz",
-      "integrity": "sha512-4p+GzOJJ1KqxPKrkIkKisod4YAcC70fj4WMRLrQLLuUW+MzAvtKgX2+ZJf90D50CozSdgETGBvdPSj3VLjBzZw==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.81.0.tgz",
+      "integrity": "sha512-wxj52jDcIAwWcXb7ShZ7vQYKcVUkJ+04YM9l46jDY+qwHzliGuorAUyujLyKTE9heGD3gShJ3wPPC1lXzq6v9A==",
       "cpu": [
         "x64"
       ],
@@ -9167,34 +9167,34 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
-      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
+      "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
+        "jiti": "^1.21.6",
         "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -9503,9 +9503,9 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "4.26.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
-      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.27.0.tgz",
+      "integrity": "sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=16"
@@ -9988,16 +9988,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
-      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-sfc": "3.5.12",
-        "@vue/runtime-dom": "3.5.12",
-        "@vue/server-renderer": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
         "typescript": "*"
diff --git a/package.json b/package.json
index a51e30d..043d1d8 100644
--- a/package.json
+++ b/package.json
@@ -28,15 +28,15 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "luxon": "^3.5.0",
     "pinia": "^2.2.6",
-    "remeda": "^2.17.0",
-    "vue": "3.5.12",
+    "remeda": "^2.17.3",
+    "vue": "3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5",
     "xstate": "^5.19.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.2",
+    "@eslint/compat": "^1.2.3",
     "@pinia/testing": "^0.1.7",
     "@playwright/test": "^1.48.2",
     "@tsconfig/node20": "^20.1.4",
@@ -60,8 +60,8 @@
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.80.7",
-    "tailwindcss": "^3.4.14",
+    "sass-embedded": "^1.81.0",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-pwa": "^0.21.0",

From 11a49043c197f0ba94fb65c5c4e0924ff51732ed Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 18 Nov 2024 09:13:05 +0200
Subject: [PATCH 6/8] Improve overall scroll styles

---
 src/assets/main.scss                          |    3 +-
 src/components/AchievementList.vue            |  210 ++-
 src/components/ModalDialog.vue                |    2 +-
 src/components/TagsComponent.vue              |   38 +-
 src/components/VeggieList.vue                 |   52 +-
 .../AchievementList.spec.ts.snap              |  524 +++---
 .../__snapshots__/LogView.spec.ts.snap        |   30 +-
 .../__snapshots__/StatsView.spec.ts.snap      |   36 +-
 .../__snapshots__/VeggieList.spec.ts.snap     | 1452 ++++++++---------
 9 files changed, 1164 insertions(+), 1183 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index b328be7..86c680f 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -26,7 +26,8 @@
   }
 
   .has-scroll {
-    @apply overflow-hidden overflow-y-auto -m-2 p-2;
+    @apply overflow-hidden overflow-y-auto min-h-0 -m-2 p-2;
+    @apply flex-grow;
     scrollbar-width: thin;
   }
 }
diff --git a/src/components/AchievementList.vue b/src/components/AchievementList.vue
index af46077..b5f6d2b 100644
--- a/src/components/AchievementList.vue
+++ b/src/components/AchievementList.vue
@@ -7,116 +7,114 @@ import AchievementBadge from '@/components/AchievementBadge.vue';
 const {achievements} = storeToRefs(useAppStateStore());
 </script>
 <template>
-  <div class="flex min-h-0">
-    <div class="achievement-list" data-test-id="achievement-list">
-      <ContentElement :title="$t('achievements.thirtyVeggies.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            :active="achievements.thirtyVeggies >= AchievementLevel.Gold"
-            :level="AchievementLevel.Gold"
-            achievement="thirtyVeggies"
-          />
-          <AchievementBadge
-            v-if="achievements.thirtyVeggies === AchievementLevel.Platinum"
-            :active="true"
-            :level="AchievementLevel.Platinum"
-            achievement="thirtyVeggies"
-          />
-        </div>
-      </ContentElement>
-      <ContentElement :title="$t('achievements.completionist.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            :active="achievements.completionist >= AchievementLevel.Bronze"
-            :level="AchievementLevel.Bronze"
-            achievement="completionist"
-          />
-          <AchievementBadge
-            :active="achievements.completionist >= AchievementLevel.Silver"
-            :level="AchievementLevel.Silver"
-            achievement="completionist"
-          />
-          <AchievementBadge
-            :active="achievements.completionist >= AchievementLevel.Gold"
-            :level="AchievementLevel.Gold"
-            achievement="completionist"
-          />
-        </div>
-      </ContentElement>
-      <ContentElement :title="$t('achievements.challengeAccepted.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            :active="achievements.challengeAccepted >= AchievementLevel.Bronze"
-            :level="AchievementLevel.Bronze"
-            achievement="challengeAccepted"
-          />
-          <AchievementBadge
-            :active="achievements.challengeAccepted >= AchievementLevel.Silver"
-            :level="AchievementLevel.Silver"
-            achievement="challengeAccepted"
-          />
-          <AchievementBadge
-            :active="achievements.challengeAccepted >= AchievementLevel.Gold"
-            :level="AchievementLevel.Gold"
-            achievement="challengeAccepted"
-          />
-        </div>
-      </ContentElement>
-      <ContentElement :title="$t('achievements.committed.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            :active="achievements.committed >= AchievementLevel.Bronze"
-            :level="AchievementLevel.Bronze"
-            achievement="committed"
-          />
-          <AchievementBadge
-            :active="achievements.committed >= AchievementLevel.Silver"
-            :level="AchievementLevel.Silver"
-            achievement="committed"
-          />
-          <AchievementBadge
-            :active="achievements.committed >= AchievementLevel.Gold"
-            :level="AchievementLevel.Gold"
-            achievement="committed"
-          />
-        </div>
-      </ContentElement>
-      <ContentElement :title="$t('achievements.hotStreak.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            :active="achievements.hotStreak >= AchievementLevel.Bronze"
-            :level="AchievementLevel.Bronze"
-            achievement="hotStreak"
-          />
-          <AchievementBadge
-            :active="achievements.hotStreak >= AchievementLevel.Silver"
-            :level="AchievementLevel.Silver"
-            achievement="hotStreak"
-          />
-          <AchievementBadge
-            :active="achievements.hotStreak >= AchievementLevel.Gold"
-            :level="AchievementLevel.Gold"
-            achievement="hotStreak"
-          />
-        </div>
-      </ContentElement>
-      <ContentElement :title="$t('achievements.experimenterFruit.title')">
-        <div class="achievement-list__badge-container">
-          <AchievementBadge
-            v-for="category in Category"
-            :key="category"
-            :level="AchievementLevel.Gold"
-            :achievement="`experimenter${category}`"
-            :active="achievements[`experimenter${category}`] === AchievementLevel.Gold"
-          />
-        </div>
-      </ContentElement>
-    </div>
+  <div class="achievement-list" data-test-id="achievement-list">
+    <ContentElement :title="$t('achievements.thirtyVeggies.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.thirtyVeggies >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="thirtyVeggies"
+        />
+        <AchievementBadge
+          v-if="achievements.thirtyVeggies === AchievementLevel.Platinum"
+          :active="true"
+          :level="AchievementLevel.Platinum"
+          achievement="thirtyVeggies"
+        />
+      </div>
+    </ContentElement>
+    <ContentElement :title="$t('achievements.completionist.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.completionist >= AchievementLevel.Bronze"
+          :level="AchievementLevel.Bronze"
+          achievement="completionist"
+        />
+        <AchievementBadge
+          :active="achievements.completionist >= AchievementLevel.Silver"
+          :level="AchievementLevel.Silver"
+          achievement="completionist"
+        />
+        <AchievementBadge
+          :active="achievements.completionist >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="completionist"
+        />
+      </div>
+    </ContentElement>
+    <ContentElement :title="$t('achievements.challengeAccepted.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Bronze"
+          :level="AchievementLevel.Bronze"
+          achievement="challengeAccepted"
+        />
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Silver"
+          :level="AchievementLevel.Silver"
+          achievement="challengeAccepted"
+        />
+        <AchievementBadge
+          :active="achievements.challengeAccepted >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="challengeAccepted"
+        />
+      </div>
+    </ContentElement>
+    <ContentElement :title="$t('achievements.committed.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.committed >= AchievementLevel.Bronze"
+          :level="AchievementLevel.Bronze"
+          achievement="committed"
+        />
+        <AchievementBadge
+          :active="achievements.committed >= AchievementLevel.Silver"
+          :level="AchievementLevel.Silver"
+          achievement="committed"
+        />
+        <AchievementBadge
+          :active="achievements.committed >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="committed"
+        />
+      </div>
+    </ContentElement>
+    <ContentElement :title="$t('achievements.hotStreak.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          :active="achievements.hotStreak >= AchievementLevel.Bronze"
+          :level="AchievementLevel.Bronze"
+          achievement="hotStreak"
+        />
+        <AchievementBadge
+          :active="achievements.hotStreak >= AchievementLevel.Silver"
+          :level="AchievementLevel.Silver"
+          achievement="hotStreak"
+        />
+        <AchievementBadge
+          :active="achievements.hotStreak >= AchievementLevel.Gold"
+          :level="AchievementLevel.Gold"
+          achievement="hotStreak"
+        />
+      </div>
+    </ContentElement>
+    <ContentElement :title="$t('achievements.experimenterFruit.title')">
+      <div class="achievement-list__badge-container">
+        <AchievementBadge
+          v-for="category in Category"
+          :key="category"
+          :level="AchievementLevel.Gold"
+          :achievement="`experimenter${category}`"
+          :active="achievements[`experimenter${category}`] === AchievementLevel.Gold"
+        />
+      </div>
+    </ContentElement>
   </div>
 </template>
 <style lang="scss" scoped>
 .achievement-list {
-  @apply has-scroll;
+  @apply has-scroll m-0 p-0;
   @apply flex flex-col gap-6;
 }
 
diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index eee347e..ef99d95 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -58,7 +58,7 @@ defineProps<{
 }
 
 .modal-dialog {
-  @apply w-full max-w-xl max-h-full rounded-md p-4 shadow-xl relative;
+  @apply w-full max-w-xl max-h-full rounded-md p-4 shadow-xl;
   @apply flex flex-col gap-4;
   @apply bg-slate-50;
 }
diff --git a/src/components/TagsComponent.vue b/src/components/TagsComponent.vue
index c58742f..9036922 100644
--- a/src/components/TagsComponent.vue
+++ b/src/components/TagsComponent.vue
@@ -33,30 +33,28 @@ const translatedVeggies = computed(() => {
 });
 </script>
 <template>
-  <div class="flex min-h-0">
-    <TransitionGroup name="tags" tag="ul" class="tags__container">
-      <li
-        v-for="{veggie, translation} in translatedVeggies"
-        :key="veggie"
-        :data-test-id="`tag-${veggie}`"
-        class="tags__tag"
+  <TransitionGroup name="tags" tag="ul" class="tags__container">
+    <li
+      v-for="{veggie, translation} in translatedVeggies"
+      :key="veggie"
+      :data-test-id="`tag-${veggie}`"
+      class="tags__tag"
+    >
+      <ButtonComponent
+        :aria-label="$t(ariaKey, [translation])"
+        :variant="variant"
+        @click="$emit('click', veggie)"
       >
-        <ButtonComponent
-          :aria-label="$t(ariaKey, [translation])"
-          :variant="variant"
-          @click="$emit('click', veggie)"
-        >
-          <IconComponent :icon="icon" />
-          {{ translation }}</ButtonComponent
-        >
-      </li>
-    </TransitionGroup>
-  </div>
+        <IconComponent :icon="icon" />
+        {{ translation }}</ButtonComponent
+      >
+    </li>
+  </TransitionGroup>
 </template>
 <style lang="scss" scoped>
 .tags__container {
-  @apply relative has-scroll w-full;
-  @apply flex-container flex-wrap justify-center;
+  @apply relative has-scroll;
+  @apply flex-container flex-wrap justify-center content-start;
 }
 
 .tags__tag {
diff --git a/src/components/VeggieList.vue b/src/components/VeggieList.vue
index 943548d..44381a9 100644
--- a/src/components/VeggieList.vue
+++ b/src/components/VeggieList.vue
@@ -23,38 +23,34 @@ const allVeggies = computed(() => {
 </script>
 
 <template>
-  <div class="flex min-h-0">
-    <div class="veggie-list" data-test-id="veggie-list">
-      <VeggieCompletionChart :veggies="uniqueVeggies" />
-      <ul v-for="category in Category" :key="category" class="veggie-list__category">
-        <ContentElement :title="$t(`categories.${category}`)">
-          <ul class="veggie-list__veggies">
-            <li
-              v-for="{veggie, translation} in allVeggies.filter(
-                (item) => item.category === category,
-              )"
-              :key="veggie"
-              class="veggie-list__veggie"
-            >
-              <IconComponent
-                :icon="uniqueVeggies.includes(veggie) ? 'checkboxMarked' : 'checkboxBlank'"
-              />
-              <span class="truncate capitalize" :title="translation">
-                {{ translation }}
-              </span>
-              <span :data-test-id="`veggie-list-status-${veggie}`" class="sr-only">{{
-                $t(uniqueVeggies.includes(veggie) ? 'veggieList.complete' : 'veggieList.missing')
-              }}</span>
-            </li>
-          </ul>
-        </ContentElement>
-      </ul>
-    </div>
+  <div class="veggie-list" data-test-id="veggie-list">
+    <VeggieCompletionChart :veggies="uniqueVeggies" />
+    <ul v-for="category in Category" :key="category" class="veggie-list__category">
+      <ContentElement :title="$t(`categories.${category}`)">
+        <ul class="veggie-list__veggies">
+          <li
+            v-for="{veggie, translation} in allVeggies.filter((item) => item.category === category)"
+            :key="veggie"
+            class="veggie-list__veggie"
+          >
+            <IconComponent
+              :icon="uniqueVeggies.includes(veggie) ? 'checkboxMarked' : 'checkboxBlank'"
+            />
+            <span class="truncate capitalize" :title="translation">
+              {{ translation }}
+            </span>
+            <span :data-test-id="`veggie-list-status-${veggie}`" class="sr-only">{{
+              $t(uniqueVeggies.includes(veggie) ? 'veggieList.complete' : 'veggieList.missing')
+            }}</span>
+          </li>
+        </ul>
+      </ContentElement>
+    </ul>
   </div>
 </template>
 <style lang="scss" scoped>
 .veggie-list {
-  @apply has-scroll w-full;
+  @apply has-scroll m-0 p-0;
   @apply flex-container flex-col gap-4;
 }
 
diff --git a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
index 22b5940..eb48161 100644
--- a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
@@ -1,151 +1,149 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AchievementList > renders 1`] = `
-"<div data-v-1c120264="" class="flex min-h-0">
-  <div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">This week's toil</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🎉</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
-        </div>
-        <!--v-if-->
+"<div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">This week's toil</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🎉</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
       </div>
+      <!--v-if-->
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Completionist</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🐣</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🐧</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🦅</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">150 veggies</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Completionist</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🐣</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🐧</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🦅</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">150 veggies</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">Challenge Accepted</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🚁</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">✈️</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🚀</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">Challenge Accepted</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚁</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">✈️</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚀</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Committed</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌱</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🪴</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🎄</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">12 months</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Committed</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌱</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🪴</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🎄</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">12 months</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">Hot Streak</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🔥</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌋</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 Weeks</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">Hot Streak</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🔥</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌋</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 Weeks</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Experimenter</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🍎</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥦</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥬</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥕</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🫛</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌾</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Grains</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Experimenter</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🍎</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥦</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥬</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥕</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🫛</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌾</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Grains</div>
       </div>
     </div>
   </div>
@@ -153,156 +151,154 @@ exports[`AchievementList > renders 1`] = `
 `;
 
 exports[`AchievementList > renders with badges enabled 1`] = `
-"<div data-v-1c120264="" class="flex min-h-0">
-  <div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">This week's toil</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🎉</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies this week" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Platinum" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">💎</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 Weekly</div>
+"<div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">This week's toil</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🎉</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies this week" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Platinum" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">💎</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 Weekly</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Completionist</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🐣</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🐧</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🦅</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">150 veggies</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Completionist</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🐣</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🐧</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🦅</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">150 veggies</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">Challenge Accepted</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🚁</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">✈️</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🚀</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">Challenge Accepted</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚁</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">✈️</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🚀</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 challenges</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Committed</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌱</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🪴</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🎄</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">12 months</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Committed</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌱</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🪴</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🎄</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">12 months</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">Hot Streak</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🔥</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌋</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 Weeks</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">Hot Streak</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🔥</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌋</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 Weeks</div>
       </div>
     </div>
-    <div data-v-1c120264="" class="flex-container flex-col">
-      <h2 class="label-like">The Experimenter</h2>
-      <div data-v-1c120264="" class="achievement-list__badge-container">
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🍎</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥦</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥬</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🥕</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🫛</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
-        </div>
-        <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
-          <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
-            <div data-v-06381b3c="" class="badge__emoji">🌾</div>
-          </div>
-          <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Grains</div>
+  </div>
+  <div data-v-1c120264="" class="flex-container flex-col">
+    <h2 class="label-like">The Experimenter</h2>
+    <div data-v-1c120264="" class="achievement-list__badge-container">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🍎</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥦</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥬</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🥕</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🫛</div>
+        </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
+      </div>
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+        <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
+          <div data-v-06381b3c="" class="badge__emoji">🌾</div>
         </div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Grains</div>
       </div>
     </div>
   </div>
diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index 90775c1..b619556 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -8,9 +8,7 @@ exports[`LogView > renders 1`] = `
   <!---->
 </div>
 <front-page-animation-stub></front-page-animation-stub>
-<div data-v-cd627eac="" class="flex min-h-0">
-  <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>
-</div>"
+<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
 `;
 
 exports[`LogView > renders with data 1`] = `
@@ -38,18 +36,16 @@ exports[`LogView > renders with data 1`] = `
     </tbody>
   </table>
 </div>
-<div data-v-cd627eac="" class="flex min-h-0">
-  <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
-    <li data-v-cd627eac="" data-test-id="tag-rice" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rice">
-        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
-        </svg> rice
-      </button></li>
-    <li data-v-cd627eac="" data-test-id="tag-rye" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rye">
-        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
-        </svg> rye
-      </button></li>
-  </transition-group-stub>
-</div>"
+<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
+  <li data-v-cd627eac="" data-test-id="tag-rice" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rice">
+      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
+      </svg> rice
+    </button></li>
+  <li data-v-cd627eac="" data-test-id="tag-rye" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rye">
+      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
+      </svg> rye
+    </button></li>
+</transition-group-stub>"
 `;
diff --git a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
index 7cd00bc..536a178 100644
--- a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
@@ -10,25 +10,23 @@ exports[`StatsView > renders current week by default 1`] = `
     <!---->
   </transition-stub>
 </div>
-<div data-v-cd627eac="" data-v-a19ac338="" class="flex min-h-0">
-  <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
-    <li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
-        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-        </svg> apple
-      </button></li>
-    <li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
-        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-        </svg> chickpea
-      </button></li>
-    <li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
-        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-        </svg> raspberry
-      </button></li>
-  </transition-group-stub>
-</div>
+<transition-group-stub data-v-cd627eac="" data-v-a19ac338="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
+  <li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
+      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+      </svg> apple
+    </button></li>
+  <li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
+      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+      </svg> chickpea
+    </button></li>
+  <li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
+      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+      </svg> raspberry
+    </button></li>
+</transition-group-stub>
 <!--v-if-->
 <!--v-if-->
 <!--v-if-->
diff --git a/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap b/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
index 708d2a2..0daacb4 100644
--- a/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
@@ -1,734 +1,732 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`VeggieList > renders 1`] = `
-"<div data-v-5aea2802="" class="flex min-h-0">
-  <div data-v-5aea2802="" class="veggie-list" data-test-id="veggie-list">
-    <div data-v-9c01a269="" data-v-5aea2802="" class="flex-container flex-col">
-      <h2 class="label-like" aria-hidden="true">Unique Veggies</h2>
-      <div data-v-9c01a269="" class="veggie-completion-chart__background">
-        <div data-v-9c01a269="" data="[object Object]" options="[object Object]" data-test-id="veggie-completion-chart" aria-describedby="veggie-completion-table"></div>
-        <table data-v-9c01a269="" class="sr-only" id="veggie-completion-table">
-          <caption>Unique Veggies</caption>
-          <thead>
-            <tr>
-              <!--v-if-->
-              <th>Fruits And Berries</th>
-              <th>Vegetables</th>
-              <th>Leafy Greens And Herbs</th>
-              <th>Roots And Bulbs</th>
-              <th>Beans And Legumes</th>
-              <th>Grains, Nuts, And Seeds</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>0</td>
-              <td>0</td>
-              <td>0</td>
-              <td>0</td>
-              <td>0</td>
-              <td>0</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+"<div data-v-5aea2802="" class="veggie-list" data-test-id="veggie-list">
+  <div data-v-9c01a269="" data-v-5aea2802="" class="flex-container flex-col">
+    <h2 class="label-like" aria-hidden="true">Unique Veggies</h2>
+    <div data-v-9c01a269="" class="veggie-completion-chart__background">
+      <div data-v-9c01a269="" data="[object Object]" options="[object Object]" data-test-id="veggie-completion-chart" aria-describedby="veggie-completion-table"></div>
+      <table data-v-9c01a269="" class="sr-only" id="veggie-completion-table">
+        <caption>Unique Veggies</caption>
+        <thead>
+          <tr>
+            <!--v-if-->
+            <th>Fruits And Berries</th>
+            <th>Vegetables</th>
+            <th>Leafy Greens And Herbs</th>
+            <th>Roots And Bulbs</th>
+            <th>Beans And Legumes</th>
+            <th>Grains, Nuts, And Seeds</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>0</td>
+            <td>0</td>
+            <td>0</td>
+            <td>0</td>
+            <td>0</td>
+            <td>0</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Fruits And Berries</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="apple">apple</span><span data-v-5aea2802="" data-test-id="veggie-list-status-apple" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="apricot">apricot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-apricot" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="banana">banana</span><span data-v-5aea2802="" data-test-id="veggie-list-status-banana" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="blackberry">blackberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blackberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="blood grapefruit">blood grapefruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blood grapefruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="blood orange">blood orange</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blood orange" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="blueberry">blueberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blueberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="boysenberry">boysenberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-boysenberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cantaloupe">cantaloupe</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cantaloupe" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="caper">caper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-caper" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherimoya">cherimoya</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherimoya" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherry">cherry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="clementine">clementine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-clementine" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cloudberry">cloudberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cloudberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="coconut">coconut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-coconut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cranberry">cranberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cranberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="date">date</span><span data-v-5aea2802="" data-test-id="veggie-list-status-date" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="dragon fruit">dragon fruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dragon fruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="durian">durian</span><span data-v-5aea2802="" data-test-id="veggie-list-status-durian" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="fig">fig</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fig" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="gooseberry">gooseberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-gooseberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="grape">grape</span><span data-v-5aea2802="" data-test-id="veggie-list-status-grape" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="grapefruit">grapefruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-grapefruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="guava">guava</span><span data-v-5aea2802="" data-test-id="veggie-list-status-guava" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="honeydew melon">honeydew melon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-honeydew melon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="jackfruit">jackfruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jackfruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kiwi">kiwi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kiwi" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kumquat">kumquat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kumquat" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="lemon">lemon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lemon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="lime">lime</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lime" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="lingonberry">lingonberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lingonberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="longan">longan</span><span data-v-5aea2802="" data-test-id="veggie-list-status-longan" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="lychee">lychee</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lychee" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mandarin">mandarin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mandarin" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mango">mango</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mango" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mangosteen">mangosteen</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mangosteen" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="nectarine">nectarine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-nectarine" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="orange">orange</span><span data-v-5aea2802="" data-test-id="veggie-list-status-orange" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="papaya">papaya</span><span data-v-5aea2802="" data-test-id="veggie-list-status-papaya" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="passion fruit">passion fruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-passion fruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="peach">peach</span><span data-v-5aea2802="" data-test-id="veggie-list-status-peach" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pear">pear</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pear" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="persimmon">persimmon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-persimmon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pineapple">pineapple</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pineapple" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="plum">plum</span><span data-v-5aea2802="" data-test-id="veggie-list-status-plum" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pomegranate">pomegranate</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pomegranate" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pomelo">pomelo</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pomelo" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="prickly pear">prickly pear</span><span data-v-5aea2802="" data-test-id="veggie-list-status-prickly pear" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="quince">quince</span><span data-v-5aea2802="" data-test-id="veggie-list-status-quince" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="rambutan">rambutan</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rambutan" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="raspberry">raspberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-raspberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="starfruit">starfruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-starfruit" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="strawberry">strawberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-strawberry" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="watermelon">watermelon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-watermelon" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Vegetables</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="artichoke">artichoke</span><span data-v-5aea2802="" data-test-id="veggie-list-status-artichoke" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="asparagus">asparagus</span><span data-v-5aea2802="" data-test-id="veggie-list-status-asparagus" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="avocado">avocado</span><span data-v-5aea2802="" data-test-id="veggie-list-status-avocado" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="bell pepper">bell pepper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bell pepper" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="bitter melon">bitter melon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bitter melon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="black trumpet mushroom">black trumpet mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black trumpet mushroom" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="broccoli">broccoli</span><span data-v-5aea2802="" data-test-id="veggie-list-status-broccoli" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="broccolini">broccolini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-broccolini" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="brussels sprouts">brussels sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brussels sprouts" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cauliflower">cauliflower</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cauliflower" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="celery">celery</span><span data-v-5aea2802="" data-test-id="veggie-list-status-celery" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="champignon">champignon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-champignon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chanterelle">chanterelle</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chanterelle" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chayote">chayote</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chayote" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherry tomato">cherry tomato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherry tomato" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chili pepper">chili pepper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chili pepper" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="corn">corn</span><span data-v-5aea2802="" data-test-id="veggie-list-status-corn" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cucumber">cucumber</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cucumber" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="eggplant">eggplant</span><span data-v-5aea2802="" data-test-id="veggie-list-status-eggplant" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="hedgehog mushroom">hedgehog mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hedgehog mushroom" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="hokkaido pumpkin">hokkaido pumpkin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hokkaido pumpkin" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="matsutake">matsutake</span><span data-v-5aea2802="" data-test-id="veggie-list-status-matsutake" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="musk gourd">musk gourd</span><span data-v-5aea2802="" data-test-id="veggie-list-status-musk gourd" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="nori">nori</span><span data-v-5aea2802="" data-test-id="veggie-list-status-nori" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="okra">okra</span><span data-v-5aea2802="" data-test-id="veggie-list-status-okra" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="olive">olive</span><span data-v-5aea2802="" data-test-id="veggie-list-status-olive" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="oyster mushroom">oyster mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oyster mushroom" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="plantain">plantain</span><span data-v-5aea2802="" data-test-id="veggie-list-status-plantain" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="porcini">porcini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-porcini" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="portobello">portobello</span><span data-v-5aea2802="" data-test-id="veggie-list-status-portobello" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pumpkin">pumpkin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pumpkin" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="rhubarb">rhubarb</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rhubarb" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="shiitake">shiitake</span><span data-v-5aea2802="" data-test-id="veggie-list-status-shiitake" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="spaghetti squash">spaghetti squash</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spaghetti squash" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="tomatillo">tomatillo</span><span data-v-5aea2802="" data-test-id="veggie-list-status-tomatillo" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="tomato">tomato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-tomato" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="wakame">wakame</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wakame" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="yellowfoot mushroom">yellowfoot mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yellowfoot mushroom" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="zucchini">zucchini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-zucchini" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Leafy Greens And Herbs</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="arugula">arugula</span><span data-v-5aea2802="" data-test-id="veggie-list-status-arugula" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="basil">basil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-basil" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="bok choy">bok choy</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bok choy" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cabbage">cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cabbage" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chard">chard</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chard" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cilantro">cilantro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cilantro" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="collard greens">collard greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-collard greens" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="dandelion greens">dandelion greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dandelion greens" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="dill">dill</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dill" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="endive">endive</span><span data-v-5aea2802="" data-test-id="veggie-list-status-endive" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="frisée">frisée</span><span data-v-5aea2802="" data-test-id="veggie-list-status-frisée" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="holy basil">holy basil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-holy basil" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="iceberg lettuce">iceberg lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-iceberg lettuce" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kale">kale</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kale" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="lettuce">lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lettuce" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mache">mache</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mache" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mint">mint</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mint" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mizuna">mizuna</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mizuna" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mustard greens">mustard greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mustard greens" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="napa cabbage">napa cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-napa cabbage" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="oakleaf lettuce">oakleaf lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oak leaf lettuce" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsley">parsley</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsley" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pea sprouts">pea sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pea sprouts" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="radicchio">radicchio</span><span data-v-5aea2802="" data-test-id="veggie-list-status-radicchio" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="red cabbage">red cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red cabbage" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="red leaf lettuce">red leaf lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red leaf lettuce" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="romaine">romaine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-romaine" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="savoy cabbage">savoy cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-savoy cabbage" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sorrel">sorrel</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sorrel" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="spinach">spinach</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spinach" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sprouts">sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sprouts" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="thyme">thyme</span><span data-v-5aea2802="" data-test-id="veggie-list-status-thyme" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="watercress">watercress</span><span data-v-5aea2802="" data-test-id="veggie-list-status-watercress" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Roots And Bulbs</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="bamboo shoots">bamboo shoots</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bamboo shoots" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="beet">beet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-beet" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="black radish">black radish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black radish" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="black salsify">black salsify</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black salsify" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="carrot">carrot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-carrot" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="celeriac">celeriac</span><span data-v-5aea2802="" data-test-id="veggie-list-status-celeriac" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chives">chives</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chives" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="daikon">daikon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-daikon" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="fennel">fennel</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fennel" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="garlic">garlic</span><span data-v-5aea2802="" data-test-id="veggie-list-status-garlic" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="ginger">ginger</span><span data-v-5aea2802="" data-test-id="veggie-list-status-ginger" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="horseradish">horseradish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-horseradish" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="jerusalem artichoke">jerusalem artichoke</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jerusalem artichoke" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="jicama">jicama</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jicama" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kohlrabi">kohlrabi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kohlrabi" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="leek">leek</span><span data-v-5aea2802="" data-test-id="veggie-list-status-leek" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="manioc (cassava)">manioc (cassava)</span><span data-v-5aea2802="" data-test-id="veggie-list-status-manioc" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="onion">onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-onion" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsley root">parsley root</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsley root" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsnip">parsnip</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsnip" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="potato">potato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-potato" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="radish">radish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-radish" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="red onion">red onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red onion" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="rutabaga">rutabaga</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rutabaga" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="scallion">scallion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-scallion" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="shallot">shallot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-shallot" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sweet potato">sweet potato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sweet potato" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="taro">taro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-taro" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="turnip">turnip</span><span data-v-5aea2802="" data-test-id="veggie-list-status-turnip" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="wasabi">wasabi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wasabi" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="white onion">white onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-white onion" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="yam">yam</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yam" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="yellow beet">yellow beet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yellow beet" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Beans And Legumes</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="black bean">black bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="black-eyed pea">black-eyed pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black-eyed pea" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="brown lentil">brown lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brown lentil" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="butter bean (lima bean)">butter bean (lima bean)</span><span data-v-5aea2802="" data-test-id="veggie-list-status-butter bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cannellini bean">cannellini bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cannellini bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chickpea">chickpea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chickpea" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cranberry bean">cranberry bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cranberry bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="edamame">edamame</span><span data-v-5aea2802="" data-test-id="veggie-list-status-edamame" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="fava bean">fava bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fava bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="flageolet bean">flageolet bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-flageolet bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="garden pea">garden pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pea" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="green bean">green bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-green bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="green lentil">green lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-green lentil" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kidney bean">kidney bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kidney bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="mung bean">mung bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mung bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pinto bean">pinto bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pinto bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="red bean">red bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="red lentil">red lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red lentil" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="snow pea">snow pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-snow pea" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="soybean">soybean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-soybean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="split pea">split pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-split pea" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="white bean">white bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-white bean" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="yardlong bean">yardlong bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yardlong bean" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
-    <ul data-v-5aea2802="" class="veggie-list__category">
-      <div data-v-5aea2802="" class="flex-container flex-col">
-        <h2 class="label-like">Grains, Nuts, And Seeds</h2>
-        <ul data-v-5aea2802="" class="veggie-list__veggies">
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="almond">almond</span><span data-v-5aea2802="" data-test-id="veggie-list-status-almond" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="amaranth">amaranth</span><span data-v-5aea2802="" data-test-id="veggie-list-status-amaranth" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="barley">barley</span><span data-v-5aea2802="" data-test-id="veggie-list-status-barley" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="brazil nut">brazil nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brazil nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="buckwheat">buckwheat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-buckwheat" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="bulgur">bulgur</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bulgur" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="cashew nut">cashew nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cashew nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chestnut">chestnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chestnut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="chia seed">chia seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chia seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="couscous">couscous</span><span data-v-5aea2802="" data-test-id="veggie-list-status-couscous" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="farro">farro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-farro" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="flaxseed">flaxseed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-flaxseed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="hazelnut">hazelnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hazelnut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="hemp seed">hemp seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hemp seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="kamut">kamut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kamut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="macadamia nut">macadamia nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-macadamia nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="millet">millet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-millet" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="oat">oat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oat" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="peanut">peanut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-peanut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pecan nut">pecan nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pecan nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pine nut">pine nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pine nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pistachio nut">pistachio nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pistachio nut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="pumpkin seed">pumpkin seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pumpkin seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="quinoa">quinoa</span><span data-v-5aea2802="" data-test-id="veggie-list-status-quinoa" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="rice">rice</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rice" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="rye">rye</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rye" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="safflower seed">safflower seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-safflower seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sesame seed">sesame seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sesame seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sorghum">sorghum</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sorghum" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="spelt">spelt</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spelt" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="sunflower seed">sunflower seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sunflower seed" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="teff">teff</span><span data-v-5aea2802="" data-test-id="veggie-list-status-teff" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="triticale">triticale</span><span data-v-5aea2802="" data-test-id="veggie-list-status-triticale" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="walnut">walnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-walnut" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="wheat">wheat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wheat" class="sr-only">(missing)</span></li>
-          <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
-            </svg><span data-v-5aea2802="" class="truncate capitalize" title="wild rice">wild rice</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wild rice" class="sr-only">(missing)</span></li>
-        </ul>
-      </div>
-    </ul>
   </div>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Fruits And Berries</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="apple">apple</span><span data-v-5aea2802="" data-test-id="veggie-list-status-apple" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="apricot">apricot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-apricot" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="banana">banana</span><span data-v-5aea2802="" data-test-id="veggie-list-status-banana" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="blackberry">blackberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blackberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="blood grapefruit">blood grapefruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blood grapefruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="blood orange">blood orange</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blood orange" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="blueberry">blueberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-blueberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="boysenberry">boysenberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-boysenberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cantaloupe">cantaloupe</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cantaloupe" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="caper">caper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-caper" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherimoya">cherimoya</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherimoya" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherry">cherry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="clementine">clementine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-clementine" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cloudberry">cloudberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cloudberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="coconut">coconut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-coconut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cranberry">cranberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cranberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="date">date</span><span data-v-5aea2802="" data-test-id="veggie-list-status-date" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="dragon fruit">dragon fruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dragon fruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="durian">durian</span><span data-v-5aea2802="" data-test-id="veggie-list-status-durian" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="fig">fig</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fig" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="gooseberry">gooseberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-gooseberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="grape">grape</span><span data-v-5aea2802="" data-test-id="veggie-list-status-grape" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="grapefruit">grapefruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-grapefruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="guava">guava</span><span data-v-5aea2802="" data-test-id="veggie-list-status-guava" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="honeydew melon">honeydew melon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-honeydew melon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="jackfruit">jackfruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jackfruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kiwi">kiwi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kiwi" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kumquat">kumquat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kumquat" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="lemon">lemon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lemon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="lime">lime</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lime" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="lingonberry">lingonberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lingonberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="longan">longan</span><span data-v-5aea2802="" data-test-id="veggie-list-status-longan" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="lychee">lychee</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lychee" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mandarin">mandarin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mandarin" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mango">mango</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mango" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mangosteen">mangosteen</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mangosteen" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="nectarine">nectarine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-nectarine" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="orange">orange</span><span data-v-5aea2802="" data-test-id="veggie-list-status-orange" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="papaya">papaya</span><span data-v-5aea2802="" data-test-id="veggie-list-status-papaya" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="passion fruit">passion fruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-passion fruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="peach">peach</span><span data-v-5aea2802="" data-test-id="veggie-list-status-peach" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pear">pear</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pear" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="persimmon">persimmon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-persimmon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pineapple">pineapple</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pineapple" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="plum">plum</span><span data-v-5aea2802="" data-test-id="veggie-list-status-plum" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pomegranate">pomegranate</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pomegranate" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pomelo">pomelo</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pomelo" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="prickly pear">prickly pear</span><span data-v-5aea2802="" data-test-id="veggie-list-status-prickly pear" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="quince">quince</span><span data-v-5aea2802="" data-test-id="veggie-list-status-quince" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="rambutan">rambutan</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rambutan" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="raspberry">raspberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-raspberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="starfruit">starfruit</span><span data-v-5aea2802="" data-test-id="veggie-list-status-starfruit" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="strawberry">strawberry</span><span data-v-5aea2802="" data-test-id="veggie-list-status-strawberry" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="watermelon">watermelon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-watermelon" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Vegetables</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="artichoke">artichoke</span><span data-v-5aea2802="" data-test-id="veggie-list-status-artichoke" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="asparagus">asparagus</span><span data-v-5aea2802="" data-test-id="veggie-list-status-asparagus" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="avocado">avocado</span><span data-v-5aea2802="" data-test-id="veggie-list-status-avocado" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="bell pepper">bell pepper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bell pepper" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="bitter melon">bitter melon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bitter melon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="black trumpet mushroom">black trumpet mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black trumpet mushroom" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="broccoli">broccoli</span><span data-v-5aea2802="" data-test-id="veggie-list-status-broccoli" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="broccolini">broccolini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-broccolini" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="brussels sprouts">brussels sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brussels sprouts" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cauliflower">cauliflower</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cauliflower" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="celery">celery</span><span data-v-5aea2802="" data-test-id="veggie-list-status-celery" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="champignon">champignon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-champignon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chanterelle">chanterelle</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chanterelle" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chayote">chayote</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chayote" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cherry tomato">cherry tomato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cherry tomato" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chili pepper">chili pepper</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chili pepper" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="corn">corn</span><span data-v-5aea2802="" data-test-id="veggie-list-status-corn" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cucumber">cucumber</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cucumber" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="eggplant">eggplant</span><span data-v-5aea2802="" data-test-id="veggie-list-status-eggplant" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="hedgehog mushroom">hedgehog mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hedgehog mushroom" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="hokkaido pumpkin">hokkaido pumpkin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hokkaido pumpkin" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="matsutake">matsutake</span><span data-v-5aea2802="" data-test-id="veggie-list-status-matsutake" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="musk gourd">musk gourd</span><span data-v-5aea2802="" data-test-id="veggie-list-status-musk gourd" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="nori">nori</span><span data-v-5aea2802="" data-test-id="veggie-list-status-nori" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="okra">okra</span><span data-v-5aea2802="" data-test-id="veggie-list-status-okra" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="olive">olive</span><span data-v-5aea2802="" data-test-id="veggie-list-status-olive" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="oyster mushroom">oyster mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oyster mushroom" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="plantain">plantain</span><span data-v-5aea2802="" data-test-id="veggie-list-status-plantain" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="porcini">porcini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-porcini" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="portobello">portobello</span><span data-v-5aea2802="" data-test-id="veggie-list-status-portobello" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pumpkin">pumpkin</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pumpkin" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="rhubarb">rhubarb</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rhubarb" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="shiitake">shiitake</span><span data-v-5aea2802="" data-test-id="veggie-list-status-shiitake" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="spaghetti squash">spaghetti squash</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spaghetti squash" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="tomatillo">tomatillo</span><span data-v-5aea2802="" data-test-id="veggie-list-status-tomatillo" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="tomato">tomato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-tomato" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="wakame">wakame</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wakame" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="yellowfoot mushroom">yellowfoot mushroom</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yellowfoot mushroom" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="zucchini">zucchini</span><span data-v-5aea2802="" data-test-id="veggie-list-status-zucchini" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Leafy Greens And Herbs</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="arugula">arugula</span><span data-v-5aea2802="" data-test-id="veggie-list-status-arugula" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="basil">basil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-basil" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="bok choy">bok choy</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bok choy" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cabbage">cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cabbage" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chard">chard</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chard" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cilantro">cilantro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cilantro" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="collard greens">collard greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-collard greens" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="dandelion greens">dandelion greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dandelion greens" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="dill">dill</span><span data-v-5aea2802="" data-test-id="veggie-list-status-dill" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="endive">endive</span><span data-v-5aea2802="" data-test-id="veggie-list-status-endive" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="frisée">frisée</span><span data-v-5aea2802="" data-test-id="veggie-list-status-frisée" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="holy basil">holy basil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-holy basil" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="iceberg lettuce">iceberg lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-iceberg lettuce" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kale">kale</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kale" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="lettuce">lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-lettuce" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mache">mache</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mache" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mint">mint</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mint" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mizuna">mizuna</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mizuna" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mustard greens">mustard greens</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mustard greens" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="napa cabbage">napa cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-napa cabbage" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="oakleaf lettuce">oakleaf lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oak leaf lettuce" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsley">parsley</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsley" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pea sprouts">pea sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pea sprouts" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="radicchio">radicchio</span><span data-v-5aea2802="" data-test-id="veggie-list-status-radicchio" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="red cabbage">red cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red cabbage" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="red leaf lettuce">red leaf lettuce</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red leaf lettuce" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="romaine">romaine</span><span data-v-5aea2802="" data-test-id="veggie-list-status-romaine" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="savoy cabbage">savoy cabbage</span><span data-v-5aea2802="" data-test-id="veggie-list-status-savoy cabbage" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sorrel">sorrel</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sorrel" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="spinach">spinach</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spinach" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sprouts">sprouts</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sprouts" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="thyme">thyme</span><span data-v-5aea2802="" data-test-id="veggie-list-status-thyme" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="watercress">watercress</span><span data-v-5aea2802="" data-test-id="veggie-list-status-watercress" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Roots And Bulbs</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="bamboo shoots">bamboo shoots</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bamboo shoots" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="beet">beet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-beet" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="black radish">black radish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black radish" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="black salsify">black salsify</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black salsify" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="carrot">carrot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-carrot" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="celeriac">celeriac</span><span data-v-5aea2802="" data-test-id="veggie-list-status-celeriac" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chives">chives</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chives" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="daikon">daikon</span><span data-v-5aea2802="" data-test-id="veggie-list-status-daikon" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="fennel">fennel</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fennel" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="garlic">garlic</span><span data-v-5aea2802="" data-test-id="veggie-list-status-garlic" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="ginger">ginger</span><span data-v-5aea2802="" data-test-id="veggie-list-status-ginger" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="horseradish">horseradish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-horseradish" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="jerusalem artichoke">jerusalem artichoke</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jerusalem artichoke" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="jicama">jicama</span><span data-v-5aea2802="" data-test-id="veggie-list-status-jicama" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kohlrabi">kohlrabi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kohlrabi" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="leek">leek</span><span data-v-5aea2802="" data-test-id="veggie-list-status-leek" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="manioc (cassava)">manioc (cassava)</span><span data-v-5aea2802="" data-test-id="veggie-list-status-manioc" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="onion">onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-onion" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsley root">parsley root</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsley root" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="parsnip">parsnip</span><span data-v-5aea2802="" data-test-id="veggie-list-status-parsnip" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="potato">potato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-potato" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="radish">radish</span><span data-v-5aea2802="" data-test-id="veggie-list-status-radish" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="red onion">red onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red onion" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="rutabaga">rutabaga</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rutabaga" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="scallion">scallion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-scallion" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="shallot">shallot</span><span data-v-5aea2802="" data-test-id="veggie-list-status-shallot" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sweet potato">sweet potato</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sweet potato" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="taro">taro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-taro" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="turnip">turnip</span><span data-v-5aea2802="" data-test-id="veggie-list-status-turnip" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="wasabi">wasabi</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wasabi" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="white onion">white onion</span><span data-v-5aea2802="" data-test-id="veggie-list-status-white onion" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="yam">yam</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yam" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="yellow beet">yellow beet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yellow beet" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Beans And Legumes</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="black bean">black bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="black-eyed pea">black-eyed pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-black-eyed pea" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="brown lentil">brown lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brown lentil" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="butter bean (lima bean)">butter bean (lima bean)</span><span data-v-5aea2802="" data-test-id="veggie-list-status-butter bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cannellini bean">cannellini bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cannellini bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chickpea">chickpea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chickpea" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cranberry bean">cranberry bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cranberry bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="edamame">edamame</span><span data-v-5aea2802="" data-test-id="veggie-list-status-edamame" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="fava bean">fava bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-fava bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="flageolet bean">flageolet bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-flageolet bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="garden pea">garden pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pea" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="green bean">green bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-green bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="green lentil">green lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-green lentil" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kidney bean">kidney bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kidney bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="mung bean">mung bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-mung bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pinto bean">pinto bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pinto bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="red bean">red bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="red lentil">red lentil</span><span data-v-5aea2802="" data-test-id="veggie-list-status-red lentil" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="snow pea">snow pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-snow pea" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="soybean">soybean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-soybean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="split pea">split pea</span><span data-v-5aea2802="" data-test-id="veggie-list-status-split pea" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="white bean">white bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-white bean" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="yardlong bean">yardlong bean</span><span data-v-5aea2802="" data-test-id="veggie-list-status-yardlong bean" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
+  <ul data-v-5aea2802="" class="veggie-list__category">
+    <div data-v-5aea2802="" class="flex-container flex-col">
+      <h2 class="label-like">Grains, Nuts, And Seeds</h2>
+      <ul data-v-5aea2802="" class="veggie-list__veggies">
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="almond">almond</span><span data-v-5aea2802="" data-test-id="veggie-list-status-almond" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="amaranth">amaranth</span><span data-v-5aea2802="" data-test-id="veggie-list-status-amaranth" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="barley">barley</span><span data-v-5aea2802="" data-test-id="veggie-list-status-barley" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="brazil nut">brazil nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-brazil nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="buckwheat">buckwheat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-buckwheat" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="bulgur">bulgur</span><span data-v-5aea2802="" data-test-id="veggie-list-status-bulgur" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="cashew nut">cashew nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-cashew nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chestnut">chestnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chestnut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="chia seed">chia seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-chia seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="couscous">couscous</span><span data-v-5aea2802="" data-test-id="veggie-list-status-couscous" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="farro">farro</span><span data-v-5aea2802="" data-test-id="veggie-list-status-farro" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="flaxseed">flaxseed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-flaxseed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="hazelnut">hazelnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hazelnut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="hemp seed">hemp seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-hemp seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="kamut">kamut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-kamut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="macadamia nut">macadamia nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-macadamia nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="millet">millet</span><span data-v-5aea2802="" data-test-id="veggie-list-status-millet" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="oat">oat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-oat" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="peanut">peanut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-peanut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pecan nut">pecan nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pecan nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pine nut">pine nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pine nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pistachio nut">pistachio nut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pistachio nut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="pumpkin seed">pumpkin seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-pumpkin seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="quinoa">quinoa</span><span data-v-5aea2802="" data-test-id="veggie-list-status-quinoa" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="rice">rice</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rice" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="rye">rye</span><span data-v-5aea2802="" data-test-id="veggie-list-status-rye" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="safflower seed">safflower seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-safflower seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sesame seed">sesame seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sesame seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sorghum">sorghum</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sorghum" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="spelt">spelt</span><span data-v-5aea2802="" data-test-id="veggie-list-status-spelt" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="sunflower seed">sunflower seed</span><span data-v-5aea2802="" data-test-id="veggie-list-status-sunflower seed" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="teff">teff</span><span data-v-5aea2802="" data-test-id="veggie-list-status-teff" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="triticale">triticale</span><span data-v-5aea2802="" data-test-id="veggie-list-status-triticale" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="walnut">walnut</span><span data-v-5aea2802="" data-test-id="veggie-list-status-walnut" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="wheat">wheat</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wheat" class="sr-only">(missing)</span></li>
+        <li data-v-5aea2802="" class="veggie-list__veggie"><svg data-v-5aea2802="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" class="transition-all"></path>
+          </svg><span data-v-5aea2802="" class="truncate capitalize" title="wild rice">wild rice</span><span data-v-5aea2802="" data-test-id="veggie-list-status-wild rice" class="sr-only">(missing)</span></li>
+      </ul>
+    </div>
+  </ul>
 </div>"
 `;

From 76c43b83c06ad6e4a79341ce9179a5bec1b3bcca Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 18 Nov 2024 15:26:26 +0200
Subject: [PATCH 7/8] Add percentages to table

---
 .../__tests__/__snapshots__/VeggieList.spec.ts.snap  | 12 ++++++------
 src/components/charts/VeggieCompletionChart.vue      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap b/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
index 0daacb4..9aa551b 100644
--- a/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/VeggieList.spec.ts.snap
@@ -21,12 +21,12 @@ exports[`VeggieList > renders 1`] = `
         </thead>
         <tbody>
           <tr>
-            <td>0</td>
-            <td>0</td>
-            <td>0</td>
-            <td>0</td>
-            <td>0</td>
-            <td>0</td>
+            <td>0 %</td>
+            <td>0 %</td>
+            <td>0 %</td>
+            <td>0 %</td>
+            <td>0 %</td>
+            <td>0 %</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/components/charts/VeggieCompletionChart.vue b/src/components/charts/VeggieCompletionChart.vue
index d3fa334..2557e7d 100644
--- a/src/components/charts/VeggieCompletionChart.vue
+++ b/src/components/charts/VeggieCompletionChart.vue
@@ -121,7 +121,7 @@ defineExpose({chartData});
         id="veggie-completion-table"
         :title="$t('veggiesTotal.title')"
         :columnHeaders="chartData.labels.map((category) => t(`categories.${category}`))"
-        :data="[chartData.datasets[0].data]"
+        :data="[chartData.datasets[0].data.map((value) => `${value} %`)]"
       />
     </div>
   </ContentElement>

From 4702006e856a665759f72e1985f8e72458f120e6 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 18 Nov 2024 15:44:00 +0200
Subject: [PATCH 8/8] Replace stats dropdown with a tabpanel

---
 e2e/settings.spec.ts                          |   2 +-
 e2e/stats.spec.ts                             |  30 ++---
 src/components/IconComponent.vue              |  17 ++-
 src/components/__tests__/StatsView.spec.ts    |  20 ++-
 .../__snapshots__/StatsView.spec.ts.snap      |  72 ++++++-----
 src/components/charts/WeeklyAmountsChart.vue  |  20 +--
 .../charts/WeeklyCategoriesChart.vue          |  22 ++--
 src/i18n/en.json                              |   5 +-
 src/i18n/fi.json                              |   5 +-
 src/views/StatsView.vue                       | 122 +++++++-----------
 10 files changed, 152 insertions(+), 163 deletions(-)

diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
index b70b0a4..1036b7b 100644
--- a/e2e/settings.spec.ts
+++ b/e2e/settings.spec.ts
@@ -10,7 +10,7 @@ test('locale settings work', async ({page}) => {
   await page.getByTestId('navbar-link-log').click();
   await expect(page.getByTestId('veggie-search-input')).toHaveAttribute(
     'placeholder',
-    'Etsi kasviksia',
+    'Kirjaa viikon kasvikset',
   );
 });
 
diff --git a/e2e/stats.spec.ts b/e2e/stats.spec.ts
index 9c24879..47bc1a9 100644
--- a/e2e/stats.spec.ts
+++ b/e2e/stats.spec.ts
@@ -31,8 +31,7 @@ test('shows last five weeks', async ({page}) => {
   await page.getByTestId('veggie-search-button').click();
   await page.getByText('Apricot').click();
   await page.goto('stats');
-  await page.getByTestId('stats-dropdown-button').click();
-  await page.getByTestId('stats-dropdown-option-1').click();
+  await page.getByTestId('stats-tab-1').click();
   await expect(page.getByTestId('weekly-amounts-chart')).toBeVisible();
   await expect(page.getByTestId('weekly-categories-chart')).toBeVisible();
   await expect(page.locator('#weekly-amounts-table')).toBeAttached();
@@ -46,14 +45,23 @@ test('shows all time stats', async ({page}) => {
   await page.getByText('Apricot').click();
   await page.getByText('Avocado').click();
   await page.goto('stats');
-  await page.getByTestId('stats-dropdown-button').click();
-  await page.getByTestId('stats-dropdown-option-2').click();
+  await page.getByTestId('stats-tab-2').click();
   await expect(page.getByTestId('all-time-weeks')).toHaveText('In Total 1 Weeks');
   await expect(page.getByTestId('all-time-over-30')).toHaveText('Over 30 Veggies in 0 Weeks');
   await expect(page.getByTestId('all-time-unique')).toHaveText('In Total 2 Unique Veggies');
   await expect(page.getByTestId('all-time-at-most')).toHaveText('At Most 2 Veggies in a Week');
 });
 
+test('shows veggie list', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await page.getByText('Apricot').click();
+  await page.goto('stats');
+  await page.getByTestId('stats-tab-3').click();
+  await expect(page.getByTestId('veggie-list-status-apricot')).toHaveText('(complete)');
+});
+
 test('shows achievements', async ({page}) => {
   await page.goto('/');
   await page.getByTestId('home-start-button').click();
@@ -66,21 +74,9 @@ test('shows achievements', async ({page}) => {
   }
   await page.getByTestId('dialog-close-button').click();
   await page.goto('stats');
-  await page.getByTestId('stats-dropdown-button').click();
-  await page.getByTestId('stats-dropdown-option-3').click();
+  await page.getByTestId('stats-tab-4').click();
   await expect(page.getByTestId('badge-experimenterFruit-3')).toHaveAttribute(
     'aria-disabled',
     'false',
   );
 });
-
-test('shows veggie list', async ({page}) => {
-  await page.goto('/');
-  await page.getByTestId('home-start-button').click();
-  await page.getByTestId('veggie-search-button').click();
-  await page.getByText('Apricot').click();
-  await page.goto('stats');
-  await page.getByTestId('stats-dropdown-button').click();
-  await page.getByTestId('stats-dropdown-option-4').click();
-  await expect(page.getByTestId('veggie-list-status-apricot')).toHaveText('(complete)');
-});
diff --git a/src/components/IconComponent.vue b/src/components/IconComponent.vue
index 985475d..ca8ff34 100644
--- a/src/components/IconComponent.vue
+++ b/src/components/IconComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {
+  mdiCalendarWeekOutline,
   mdiChartBar,
+  mdiChartLine,
   mdiCheckboxBlankOutline,
   mdiCheckboxMarkedOutline,
   mdiCheckCircleOutline,
@@ -8,15 +10,20 @@ import {
   mdiClose,
   mdiCogOutline,
   mdiEarth,
+  mdiFormatListChecks,
+  mdiHistory,
   mdiMinus,
   mdiPlus,
   mdiRadioboxBlank,
   mdiRadioboxMarked,
   mdiTrashCan,
+  mdiTrophyOutline,
 } from '@mdi/js';
 
 export type IconString =
+  | 'calendarWeekOutline'
   | 'chart'
+  | 'chartLine'
   | 'check'
   | 'checkboxBlank'
   | 'checkboxMarked'
@@ -24,11 +31,14 @@ export type IconString =
   | 'close'
   | 'cog'
   | 'earth'
+  | 'formatListChecks'
+  | 'history'
   | 'minus'
   | 'plus'
   | 'radioboxBlank'
   | 'radioboxMarked'
-  | 'trashCan';
+  | 'trashCan'
+  | 'trophyOutline';
 
 withDefaults(
   defineProps<{
@@ -41,7 +51,9 @@ withDefaults(
 );
 
 const icons = {
+  calendarWeekOutline: mdiCalendarWeekOutline,
   chart: mdiChartBar,
+  chartLine: mdiChartLine,
   check: mdiCheckCircleOutline,
   checkboxBlank: mdiCheckboxBlankOutline,
   checkboxMarked: mdiCheckboxMarkedOutline,
@@ -49,11 +61,14 @@ const icons = {
   close: mdiClose,
   cog: mdiCogOutline,
   earth: mdiEarth,
+  formatListChecks: mdiFormatListChecks,
+  history: mdiHistory,
   minus: mdiMinus,
   plus: mdiPlus,
   radioboxBlank: mdiRadioboxBlank,
   radioboxMarked: mdiRadioboxMarked,
   trashCan: mdiTrashCan,
+  trophyOutline: mdiTrophyOutline,
 };
 </script>
 <template>
diff --git a/src/components/__tests__/StatsView.spec.ts b/src/components/__tests__/StatsView.spec.ts
index 05e4d22..108f2aa 100644
--- a/src/components/__tests__/StatsView.spec.ts
+++ b/src/components/__tests__/StatsView.spec.ts
@@ -29,8 +29,7 @@ describe('StatsView', () => {
     });
     const wrapper = mount(StatsView);
 
-    await wrapper.findByTestId('stats-dropdown-button').trigger('click');
-    await wrapper.findByTestId('stats-dropdown-option-1').trigger('click');
+    await wrapper.findByTestId('stats-tab-1').trigger('click');
     expect(wrapper.find('#weekly-amounts-table').exists()).toBe(true);
     expect(wrapper.find('#weekly-categories-table').exists()).toBe(true);
   });
@@ -43,12 +42,11 @@ describe('StatsView', () => {
     });
     const wrapper = mount(StatsView);
 
-    await wrapper.findByTestId('stats-dropdown-button').trigger('click');
-    await wrapper.findByTestId('stats-dropdown-option-2').trigger('click');
+    await wrapper.findByTestId('stats-tab-2').trigger('click');
     expect(wrapper.find('#category-status-table').exists()).toBe(true);
   });
 
-  it('renders achievements', async () => {
+  it('renders veggie list', async () => {
     activityStore.startDate = DateTime.now().startOf('week');
     activityStore.weeks.push({
       startDate: DateTime.now().startOf('week'),
@@ -56,12 +54,11 @@ describe('StatsView', () => {
     });
     const wrapper = mount(StatsView);
 
-    await wrapper.findByTestId('stats-dropdown-button').trigger('click');
-    await wrapper.findByTestId('stats-dropdown-option-3').trigger('click');
-    expect(wrapper.findByTestId('achievement-list').exists()).toBe(true);
+    await wrapper.findByTestId('stats-tab-3').trigger('click');
+    expect(wrapper.findByTestId('veggie-list').exists()).toBe(true);
   });
 
-  it('renders veggie list', async () => {
+  it('renders achievements', async () => {
     activityStore.startDate = DateTime.now().startOf('week');
     activityStore.weeks.push({
       startDate: DateTime.now().startOf('week'),
@@ -69,8 +66,7 @@ describe('StatsView', () => {
     });
     const wrapper = mount(StatsView);
 
-    await wrapper.findByTestId('stats-dropdown-button').trigger('click');
-    await wrapper.findByTestId('stats-dropdown-option-4').trigger('click');
-    expect(wrapper.findByTestId('veggie-list').exists()).toBe(true);
+    await wrapper.findByTestId('stats-tab-4').trigger('click');
+    expect(wrapper.findByTestId('achievement-list').exists()).toBe(true);
   });
 });
diff --git a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
index 536a178..2a612a9 100644
--- a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
@@ -2,35 +2,45 @@
 
 exports[`StatsView > renders current week by default 1`] = `
 "<h1 data-v-a19ac338="" class="sr-only">Statistics</h1>
-<div class="relative z-20" data-headlessui-state="">
-  <div data-v-a19ac338="" class="flex-container flex-col"><label data-v-a19ac338="" id="headlessui-listbox-label-v-0" data-headlessui-state="" class="label-like">Chosen Statistics</label><button data-v-a19ac338="" id="headlessui-listbox-button-v-1" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="stats__list-box-button" data-test-id="stats-dropdown-button"><span data-v-a19ac338="" class="truncate">This week's veggies</span><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-      </svg></button></div>
-  <transition-stub data-v-a19ac338="" leaveactiveclass="transition duration-100 ease-in" leavefromclass="opacity-100" leavetoclass="opacity-0" appear="false" persisted="false" css="true">
-    <!---->
-  </transition-stub>
-</div>
-<transition-group-stub data-v-cd627eac="" data-v-a19ac338="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
-  <li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
-      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-      </svg> apple
-    </button></li>
-  <li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
-      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-      </svg> chickpea
-    </button></li>
-  <li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
-      <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
-      </svg> raspberry
-    </button></li>
-</transition-group-stub>
-<!--v-if-->
-<!--v-if-->
-<!--v-if-->
-<!--v-if-->
-<!--v-if-->
-<!--v-if-->"
+<button aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" type="button"></button>
+<div data-v-a19ac338="" role="tablist" aria-orientation="horizontal" class="grid grid-cols-5 gap-2"><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary !bg-sky-700 justify-center" aria-label="This week's veggies" title="This week's veggies" data-test-id="stats-tab-0" id="headlessui-tabs-tab-v-0" role="tab" aria-selected="true" tabindex="0" data-headlessui-state="selected">
+    <!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.89 21 5V19C21 20.1 20.11 21 19 21H5C3.9 21 3 20.11 3 19V5C3 3.89 3.9 3 5 3M5 19H19V9H5V19M5 7H19V5H5V7M17 11V13H7V11H17" class="transition-all"></path>
+    </svg>
+  </button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Last five weeks" title="Last five weeks" data-test-id="stats-tab-1" id="headlessui-tabs-tab-v-1" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
+    <!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z" class="transition-all"></path>
+    </svg>
+  </button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="All time" title="All time" data-test-id="stats-tab-2" id="headlessui-tabs-tab-v-2" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
+    <!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" class="transition-all"></path>
+    </svg>
+  </button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Veggie list" title="Veggie list" data-test-id="stats-tab-3" id="headlessui-tabs-tab-v-3" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
+    <!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M18 2C17.1 2 16 3 16 4H8C8 3 6.9 2 6 2H2V11C2 12 3 13 4 13H6.2C6.6 15 7.9 16.7 11 17V19.08C8 19.54 8 22 8 22H16C16 22 16 19.54 13 19.08V17C16.1 16.7 17.4 15 17.8 13H20C21 13 22 12 22 11V2H18M6 11H4V4H6V11M16 11.5C16 13.43 15.42 15 12 15C8.59 15 8 13.43 8 11.5V6H16V11.5M20 11H18V4H20V11Z" class="transition-all"></path>
+    </svg>
+  </button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Achievements" title="Achievements" data-test-id="stats-tab-4" id="headlessui-tabs-tab-v-4" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
+    <!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z" class="transition-all"></path>
+    </svg>
+  </button></div>
+<div data-v-a19ac338="" class="flex flex-grow min-h-0">
+  <transition-group-stub data-v-cd627eac="" data-v-a19ac338="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container" id="headlessui-tabs-panel-v-5" role="tabpanel" tabindex="0" data-headlessui-state="selected">
+    <li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
+        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+        </svg> apple
+      </button></li>
+    <li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
+        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+        </svg> chickpea
+      </button></li>
+    <li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
+        <!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19,13H5V11H19V13Z" class="transition-all"></path>
+        </svg> raspberry
+      </button></li>
+  </transition-group-stub><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-6" role="tabpanel" tabindex="-1" class="stats__tab"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-7" role="tabpanel" tabindex="-1" class="stats__tab"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-8" role="tabpanel" tabindex="-1"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-9" role="tabpanel" tabindex="-1"></span>
+</div>"
 `;
diff --git a/src/components/charts/WeeklyAmountsChart.vue b/src/components/charts/WeeklyAmountsChart.vue
index b067606..71b6f53 100644
--- a/src/components/charts/WeeklyAmountsChart.vue
+++ b/src/components/charts/WeeklyAmountsChart.vue
@@ -53,20 +53,24 @@ const chartOptions = computed(() => {
 defineExpose({chartData});
 </script>
 <template>
-  <ContentElement :title="$t('stats.weeklyAmounts')" :labelAttrs="{'aria-hidden': true}">
-    <div class="relative flex-1">
+  <ContentElement
+    :title="$t('stats.weeklyAmounts')"
+    :labelAttrs="{'aria-hidden': true}"
+    class="flex-1"
+  >
+    <div class="relative flex-grow">
       <Line
         :options="chartOptions"
         :data="chartData"
         data-test-id="weekly-amounts-chart"
         aria-describedby="weekly-amounts-table"
       />
-      <ChartScreenReaderTable
-        id="weekly-amounts-table"
-        :title="$t('stats.weeklyAmounts')"
-        :columnHeaders="chartData.labels"
-        :data="chartData.datasets.map(prop('data'))"
-      />
     </div>
+    <ChartScreenReaderTable
+      id="weekly-amounts-table"
+      :title="$t('stats.weeklyAmounts')"
+      :columnHeaders="chartData.labels"
+      :data="chartData.datasets.map(prop('data'))"
+    />
   </ContentElement>
 </template>
diff --git a/src/components/charts/WeeklyCategoriesChart.vue b/src/components/charts/WeeklyCategoriesChart.vue
index 9ce71d0..6840a9d 100644
--- a/src/components/charts/WeeklyCategoriesChart.vue
+++ b/src/components/charts/WeeklyCategoriesChart.vue
@@ -69,21 +69,25 @@ const chartOptions = computed(() => {
 defineExpose({chartData});
 </script>
 <template>
-  <ContentElement :title="$t('stats.weeklyCategories')" :labelAttrs="{'aria-hidden': true}">
-    <div class="relative flex-1">
+  <ContentElement
+    :title="$t('stats.weeklyCategories')"
+    :labelAttrs="{'aria-hidden': true}"
+    class="flex-1"
+  >
+    <div class="relative flex-grow">
       <Bar
         :options="chartOptions"
         :data="chartData"
         data-test-id="weekly-categories-chart"
         aria-describedby="weekly-categories-table"
       />
-      <ChartScreenReaderTable
-        id="weekly-categories-table"
-        :title="$t('stats.0')"
-        :columnHeaders="chartData.labels"
-        :rowHeaders="chartData.datasets.map(prop('label'))"
-        :data="chartData.datasets.map(prop('data'))"
-      />
     </div>
+    <ChartScreenReaderTable
+      id="weekly-categories-table"
+      :title="$t('stats.weeklyCategories')"
+      :columnHeaders="chartData.labels"
+      :rowHeaders="chartData.datasets.map(prop('label'))"
+      :data="chartData.datasets.map(prop('data'))"
+    />
   </ContentElement>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c8462fa..f0a7c9d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -733,9 +733,8 @@
     "0": "This week's veggies",
     "1": "Last five weeks",
     "2": "All time",
-    "3": "Achievements",
-    "4": "Veggie list",
-    "5": "Popularity",
+    "3": "Veggie list",
+    "4": "Achievements",
     "allTimeCategories": "Comparison By Categories",
     "chosenStats": "Chosen Statistics",
     "grid1": {
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 84ff4e4..5fe422b 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -741,9 +741,8 @@
     "0": "Tämän viikon kasvikset",
     "1": "Viimeiset viisi viikkoa",
     "2": "Kokonaistilastot",
-    "3": "Saavutukset",
-    "4": "Kasvislista",
-    "5": "Suosio",
+    "3": "Kasvislista",
+    "4": "Saavutukset",
     "allTimeCategories": "Vertailu ryhmittäin",
     "chosenStats": "Valitut tilastot",
     "grid1": {
diff --git a/src/views/StatsView.vue b/src/views/StatsView.vue
index 0f4dd46..7aaa9c9 100644
--- a/src/views/StatsView.vue
+++ b/src/views/StatsView.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {ref} from 'vue';
 import {storeToRefs} from 'pinia';
-import {useMemoize} from '@vueuse/core';
-import {Listbox, ListboxLabel, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue';
+import {TabGroup, TabList, Tab, TabPanels, TabPanel} from '@headlessui/vue';
 import {useActivityStore} from '@/stores/activityStore';
 import TagsComponent from '@/components/TagsComponent.vue';
 import WeeklyAmountsChart from '@/components/charts/WeeklyAmountsChart.vue';
@@ -18,87 +17,54 @@ const {toggleVeggie} = activityStore;
 
 const selectedStat = ref(0);
 
-const getOptionClasses = useMemoize((active: boolean, selected: boolean) => {
-  const textClass = active ? 'text-slate-50' : 'text-slate-900';
-  let bgClass = 'transparent';
-  if (active) {
-    bgClass = 'bg-sky-500';
-  } else if (selected) {
-    bgClass = 'bg-sky-200';
-  }
-  return `${textClass} ${bgClass}`;
-});
+const icons = ['calendarWeekOutline', 'chartLine', 'history', 'trophyOutline', 'formatListChecks'];
 </script>
 <template>
   <h1 class="sr-only">{{ $t('views.stats') }}</h1>
-  <Listbox v-model="selectedStat" class="relative z-20" as="div" v-slot="{open}">
-    <div class="flex-container flex-col">
-      <ListboxLabel class="label-like">{{ $t('stats.chosenStats') }}</ListboxLabel>
-      <ListboxButton class="stats__list-box-button" data-test-id="stats-dropdown-button">
-        <span class="truncate">{{ $t(`stats.${selectedStat}`) }}</span>
-        <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />
-      </ListboxButton>
-    </div>
-    <Transition
-      leave-active-class="transition duration-100 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <ListboxOptions class="stats__list-box-options">
-        <ListboxOption
-          v-for="(_, index) in [...Array(5)]"
-          v-slot="{active, selected}"
-          :key="index"
-          :value="index"
-          :data-test-id="`stats-dropdown-option-${index}`"
-          as="template"
+  <TabGroup :selectedIndex="selectedStat" @change="(index) => (selectedStat = index)">
+    <TabList class="grid grid-cols-5 gap-2">
+      <Tab v-for="(_, index) in [...Array(5)]" :key="index" v-slot="{selected}" as="template">
+        <ButtonComponent
+          :aria-label="$t(`stats.${index}`)"
+          :title="$t(`stats.${index}`)"
+          :class="{'!bg-sky-700': selected}"
+          :data-test-id="`stats-tab-${index}`"
+          class="justify-center"
         >
-          <li
-            :class="[getOptionClasses(active, selected), 'stats__list-box-option']"
-            role="menuitem"
-          >
-            {{ $t(`stats.${index}`) }}
-          </li>
-        </ListboxOption>
-      </ListboxOptions>
-    </Transition>
-  </Listbox>
-  <TagsComponent
-    v-if="selectedStat === 0"
-    :veggies="currentVeggies"
-    :variant="['tag', 'remove']"
-    ariaKey="general.clickToRemove"
-    icon="minus"
-    @click="toggleVeggie"
-  />
-  <WeeklyAmountsChart v-if="selectedStat === 1" class="flex-1" />
-  <WeeklyCategoriesChart v-if="selectedStat === 1" class="flex-1" />
-  <AllTimeStatus v-if="selectedStat === 2" />
-  <CategoryStatusChart
-    v-if="selectedStat === 2"
-    totals
-    :favorites="favorites"
-    :veggies="allVeggies"
-  />
-  <AchievementList v-if="selectedStat === 3" />
-  <VeggieList :uniqueVeggies="uniqueVeggies" v-if="selectedStat === 4" />
+          <IconComponent :icon="icons[index]" />
+        </ButtonComponent>
+      </Tab>
+    </TabList>
+    <TabPanels class="flex flex-grow min-h-0">
+      <TabPanel as="template">
+        <TagsComponent
+          :veggies="currentVeggies"
+          :variant="['tag', 'remove']"
+          ariaKey="general.clickToRemove"
+          icon="minus"
+          @click="toggleVeggie"
+        />
+      </TabPanel>
+      <TabPanel class="stats__tab">
+        <WeeklyAmountsChart />
+        <WeeklyCategoriesChart />
+      </TabPanel>
+      <TabPanel class="stats__tab">
+        <AllTimeStatus />
+        <CategoryStatusChart totals :favorites="favorites" :veggies="allVeggies" />
+      </TabPanel>
+      <TabPanel as="template">
+        <VeggieList :uniqueVeggies="uniqueVeggies" />
+      </TabPanel>
+      <TabPanel as="template">
+        <AchievementList />
+      </TabPanel>
+    </TabPanels>
+  </TabGroup>
 </template>
 <style lang="scss" scoped>
-.stats__list-box-button {
-  @apply flex items-center justify-between;
-  @apply w-full button-like;
-  @apply bg-sky-500;
-
-  &:hover {
-    @apply bg-sky-600;
-  }
-}
-
-.stats__list-box-options {
-  @apply dropdown-list-container;
-}
-
-.stats__list-box-option {
-  @apply dropdown-list-option;
+.stats__tab {
+  @apply w-full;
+  @apply flex-container flex-col gap-4;
 }
 </style>