From 03c0c1664af4212d6cf78f120936e3506f89d088 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Jun 2026 18:09:20 +0300
Subject: [PATCH] list styles

---
 src/App.scss                 | 43 ++----------------------------------
 src/components/list/list.css | 16 ++++++++++++++
 2 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 952af5b47..3e1e7e2f2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -418,45 +418,6 @@ nav {
   }
 }
 
-.list-item {
-  border-color: var(--border);
-  border-style: solid;
-  border-width: 0;
-  border-top-width: 1px;
-
-  &.-active,
-  &:hover {
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-  }
-
-  &.-active + &,
-  &:hover + & {
-    border-top-width: 0;
-  }
-
-  &:hover + .menu-item-collapsible:not(.-expanded) + &,
-  &.-active + .menu-item-collapsible:not(.-expanded) + & {
-    border-top-width: 0;
-  }
-
-  &[aria-expanded="true"] {
-    border-bottom-width: 1px;
-  }
-
-  &:first-child {
-    border-top-right-radius: var(--roundness);
-    border-top-left-radius: var(--roundness);
-    border-top-width: 0;
-  }
-
-  &:last-child {
-    border-bottom-right-radius: var(--roundness);
-    border-bottom-left-radius: var(--roundness);
-    border-bottom-width: 0;
-  }
-}
-
 .menu-item,
 .list-item {
   display: block;
@@ -480,8 +441,8 @@ nav {
     cursor: auto;
   }
 
-  a,
-  button:not(.button-default) {
+  > a,
+  > button:not(.button-default) {
     text-align: initial;
     padding: 0;
     background: none;
diff --git a/src/components/list/list.css b/src/components/list/list.css
index 84b737ed2..c478e9bc4 100644
--- a/src/components/list/list.css
+++ b/src/components/list/list.css
@@ -14,6 +14,22 @@
     display: flex;
     align-items: center;
 
+    &[aria-expanded="true"] {
+      border-bottom-width: 1px;
+    }
+
+    &:first-child {
+      border-top-right-radius: var(--roundness);
+      border-top-left-radius: var(--roundness);
+      border-top-width: 0;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: var(--roundness);
+      border-bottom-left-radius: var(--roundness);
+      border-bottom-width: 0;
+    }
+
     &:not(:last-child) {
       border-bottom: 1px dotted var(--border);
     }