more work on nav items

docs/_includes/layout-templates/app.css.njk

@@ -60,46 +60,11 @@ wa-layout[view="desktop"] main {
 }
 
 /* Navigation / Lists */
-.app-navigation {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+/** Not sure why, but when within the app-navigation, wa-nav-item is misaligned  */
+.app-navigation wa-nav-item::part(control) {
+  align-items: stretch;
 }
 
-.app-navigation__list {
-  margin: 0;
-  padding: 0;
-  list-style-type: "";
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  max-height: 100%;
-  overflow-y: auto;
-  height: 100%;
-  padding-bottom: 4px;
-}
-
-.app-navigation__list li {
-  position: relative;
-  padding: 0px 8px;
-}
-
-/* We use a blank marker to work around a safari bug with "list-style-type: none;" */
-.app-navigation__list li::marker {
-  content: "";
-}
-
-.app-navigation__list li.is-active wa-button {
-  --background-color: var(--wa-color-blue-40);
-  --background-color-active: var(--wa-color-blue-30);
-  --text-color: var(--wa-color-white);
-  --text-color-active: var(--wa-color-white);
-}
-
-.app-navigation__list li wa-button {
-  --text-color: var(--wa-color-neutral-40);
-}
 
 /* Highlights */
 .highlight {

docs/pages/components/nav-item.md

@@ -9,9 +9,44 @@ layout: component
 of a `<wa-nav-group>` for accessibility purposes.
 
 ```html:preview
-<wa-nav-item href="#">
-  Nav Item
-</wa-nav-item>
+<wa-nav-group>
+  <wa-nav-item href="#">
+    <wa-icon name="search" slot="prefix"></wa-icon>
+    Search
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="bell" slot="prefix"></wa-icon>
+    Notifications
+  </wa-nav-item>
+
+  <wa-divider></wa-divider>
+
+  <wa-nav-item href="#" active>
+    <wa-icon name="house-door" slot="prefix"></wa-icon>
+    Home
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="music-note-list" slot="prefix"></wa-icon>
+    Playlists
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
+    Tracks
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="gear" slot="prefix"></wa-icon>
+    Settings
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="question-circle" slot="prefix"></wa-icon>
+    Help
+  </wa-nav-item>
+</wa-nav-group>
 ```
 
 ## Examples
@@ -29,7 +64,6 @@ of a `<wa-nav-group>` for accessibility purposes.
 ```html:preview
 <wa-nav-item href="#">
   <wa-icon slot="prefix" name="house-door"></wa-icon>
-  <wa-visually-hidden>Home</wa-visually-hidden>
 </wa-nav-item>
 ```
 
@@ -42,4 +76,6 @@ of a `<wa-nav-group>` for accessibility purposes.
   Nav Item
   <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
 </wa-nav-item>
-```
+```
+
+## Stuff

src/components/nav-item/nav-item.component.ts

@@ -63,10 +63,10 @@ export default class WaNavItem extends WebAwesomeElement {
       >
         <a
           class=${classMap({
-            "link": true,
-            "link--active": this.active
+            "control": true,
+            "control--active": this.active
           })}
-          part="link"
+          part="control"
           href=${ifDefined(this.href)}
           target=${ifDefined(this.target)}
           download=${ifDefined(this.download)}

src/components/nav-item/nav-item.styles.ts

@@ -9,15 +9,15 @@ export default css`
     position: relative;
     width: auto;
     cursor: pointer;
-    list-style-type: " ";
+    list-style-type: none;
   }
 
-  .link {
-    display: inline-grid;
+  .control {
+    display: grid;
     grid-auto-flow: column;
-    gap: 8px;
     align-items: center;
     justify-content: start;
+    gap: 8px;
     width: 100%;
     border: none;
     font: inherit;
@@ -25,57 +25,55 @@ export default css`
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
-    vertical-align: middle;
     transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color,
       var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow;
     cursor: inherit;
-
     color: var(--wa-color-neutral-text-on-surface);
     line-height: var(--wa-font-height-compact);
     padding: var(--wa-space-square-s);
     border-radius: var(--wa-corners-1x);
   }
 
-  .link::-moz-focus-inner {
+  .control::-moz-focus-inner {
     border: 0;
   }
 
-  .link:focus {
+  .control:focus {
     outline: transparent;
   }
 
-  .link:hover {
+  .control:hover {
     background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
     border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-neutral-text-on-vivid);
   }
 
-  .link:active {
+  .control:active {
     background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
     border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
   }
 
-  .link:focus-visible {
+  .control:focus-visible {
     outline: var(--wa-focus-ring);
     outline-offset: var(--wa-focus-ring-offset);
     outline-color: var(--wa-color-neutral-fill-vivid);
   }
 
-  .link.link--active {
+  .control.control--active {
     background-color: var(--wa-color-brand-fill-vivid);
     color: var(--wa-color-brand-text-on-vivid);
   }
 
-  .link--active:focus-visible {
+  .control--active:focus-visible {
     outline-color: var(--wa-color-brand-fill-vivid);
   }
 
-  .link--active:active {
+  .control--active:active {
     background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
     border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
   }
 
-  .link--active:hover {
+  .control--active:hover {
     background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
     border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-brand-text-on-vivid);