fix: 🐛 prevent styles from bleeding into other components

src/components/navigation.webc

@@ -1,4 +1,4 @@
-<nav :aria-label="label">
+<nav class="character-nav" :aria-label="label">
   <label for="nav-toggle">
     <icon icon="bars" webc:nokeep></icon>
   </label>
@@ -22,7 +22,7 @@
 </nav>
 
 <style>
-  nav {
+  .character-nav {
     --nav-spacing: 1em;
     --nav-background-color: var(--clr-nav-background);
     --nav-border: var(--border-thin) solid var(--clr-box-border);
@@ -49,17 +49,17 @@
       --nav-spacing: 2em;
     }
 
-    &:has(input:checked) {
-      & ul {
+    &:has(#nav-toggle:checked) {
+      & .list {
         opacity: 1;
       }
 
-      & li {
+      & .item {
         height: 100%;
       }
     }
 
-    & label {
+    & label[for='nav-toggle'] {
       width: 1.5em;
       height: 1.5em;
       margin-block: 0.75em;
@@ -74,11 +74,11 @@
       }
     }
 
-    & input {
+    & #nav-toggle {
       display: none;
     }
 
-    & ul {
+    & .list {
       --nav-items-position: absolute;
       --nav-items-orientation: column nowrap;
 
@@ -113,12 +113,12 @@
       }
     }
 
-    & li {
+    & .item {
       overflow: hidden;
       height: 0;
       transition: height 0.4s ease-in-out;
 
-      @media (min-width:35em) {
+      @media (min-width: 35em) {
         height: 100%;
       }
     }