@grantcodes/ui 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [2.6.0](https://github.com/grantcodes/ui/compare/ui-v2.5.1...ui-v2.6.0) (2026-04-06)
+
+
+### Features
+
+* **08-02:** add nav-link component, fix CSS cascade, refactor base styles ([fa143e2](https://github.com/grantcodes/ui/commit/fa143e2362b90b8d2879148bee7044db21dcb5e7))
+* **08-02:** rewrite app bar Storybook stories without inline styles ([1424640](https://github.com/grantcodes/ui/commit/1424640b696b5c97aca269f2594cbad8b51ec45f))
+* **08-03:** redesign mobile menu as full-screen overlay with animation ([600dc6e](https://github.com/grantcodes/ui/commit/600dc6e478691d0642ca34f52306ff67489baf12))
+* app bar improvements — nav-link component, CSS fixes, mobile menu overlay ([d1e66a2](https://github.com/grantcodes/ui/commit/d1e66a20d9d258eda22303f827491780d1d2467b))
+
+
+### Bug Fixes
+
+* **08-01:** clean up app-bar CSS — dead code, tokens, sticky, a11y, responsive ([000fd4b](https://github.com/grantcodes/ui/commit/000fd4b2c5b4be04900ab42a63298e6d8735d67c))
+* **08-03:** close mobile menu on resize past desktop breakpoint ([dac56e1](https://github.com/grantcodes/ui/commit/dac56e1bcfa735e37fe82c43fde89be3c211d0c3))
+* move font shorthand before line-height in reset.css to fix lint error ([98c9bba](https://github.com/grantcodes/ui/commit/98c9bbac15e3a7db81c103023352f6f8f071dbb6))
+
+## [2.5.1](https://github.com/grantcodes/ui/compare/ui-v2.5.0...ui-v2.5.1) (2026-04-05)
+
+
+### Bug Fixes
+
+* add .light sub-element override CSS and fix ::selection token ([1ae9007](https://github.com/grantcodes/ui/commit/1ae900779cf6a241a7e430b86a3e3c0cb988f954))
+* add .light sub-element override CSS and fix ::selection token ([9e9c0c3](https://github.com/grantcodes/ui/commit/9e9c0c32d3b68fd6db5b0b7f40ab14341cc96684))
+
 ## [2.5.0](https://github.com/grantcodes/ui/compare/ui-v2.4.1...ui-v2.5.0) (2026-04-05)
 
 

package/custom-elements.json

@@ -266,6 +266,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/app-bar/nav-link.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GrantCodesNavLink",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "grantcodes-nav-link",
+          "customElement": true,
+          "modulePath": "src/components/app-bar/nav-link.component.js",
+          "definitionPath": "src/components/app-bar/nav-link.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GrantCodesNavLink",
+          "declaration": {
+            "name": "GrantCodesNavLink",
+            "module": "src/components/app-bar/nav-link.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/app-bar/nav-link.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/app-bar/nav-link.component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "GrantCodesNavLink",
+            "module": "src/components/app-bar/nav-link.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "grantcodes-nav-link",
+          "declaration": {
+            "name": "GrantCodesNavLink",
+            "module": "/src/components/app-bar/nav-link.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/avatar/avatar.component.js",
@@ -2492,25 +2553,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "method",
-              "name": "groupTemplate",
-              "parameters": [
-                {
-                  "name": "className",
-                  "description": "html class attribute",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Template for a group of form components",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "handleLabelClick"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -47,7 +47,7 @@
     "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
     "shiki": "^3.17.1",
-    "@grantcodes/style-dictionary": "^1.4.0"
+    "@grantcodes/style-dictionary": "^1.4.1"
   },
   "devDependencies": {
     "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",

package/src/components/app-bar/app-bar.component.js

@@ -33,6 +33,30 @@ export class GrantCodesAppBar extends LitElement {
 		 * @type {boolean}
 		 */
 		this._mobileMenuOpen = false;
+
+		/**
+		 * Close mobile menu when the component crosses the desktop breakpoint.
+		 * Matches the 768px container query in app-bar.css.
+		 */
+		this._resizeObserver = typeof ResizeObserver !== "undefined"
+			? new ResizeObserver((entries) => {
+					for (const entry of entries) {
+						if (entry.contentBoxSize[0].inlineSize >= 768 && this._mobileMenuOpen) {
+							this._mobileMenuOpen = false;
+						}
+					}
+				})
+			: null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver?.observe(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
 	}
 
 	_toggleMobileMenu() {
@@ -53,13 +77,27 @@ export class GrantCodesAppBar extends LitElement {
 			"app-bar--transparent": this.transparent,
 		});
 
+		const navClasses = classMap({
+			"app-bar__nav": true,
+			"app-bar__nav--open": this._mobileMenuOpen,
+		});
+
 		return html`
 			<header class=${classes}>
-				<div class="app-bar__container">
+				<div class="app-bar__bar">
 					<div class="app-bar__logo">
 						<slot name="logo"></slot>
 					</div>
 
+					<!-- Navigation (inline on desktop, overlay on mobile) -->
+					<nav
+						part="nav"
+						class=${navClasses}
+						aria-label="Main navigation"
+					>
+						<slot name="nav"></slot>
+					</nav>
+
 					<!-- Actions (right side) -->
 					<div class="app-bar__actions">
 						<slot name="actions"></slot>
@@ -75,15 +113,13 @@ export class GrantCodesAppBar extends LitElement {
 					>
 						<span class="app-bar__menu-icon"></span>
 					</button>
-
-					<!-- Navigation (single slot, collapsible on mobile) -->
-					<nav
-						class="app-bar__nav ${this._mobileMenuOpen ? "app-bar__nav--mobile-open" : ""}"
-						aria-label="Main navigation"
-					>
-						<slot name="nav"></slot>
-					</nav>
 				</div>
+
+				<!-- Mobile overlay backdrop -->
+				<div
+					class="app-bar__overlay ${this._mobileMenuOpen ? "app-bar__overlay--visible" : ""}"
+					@click=${this._toggleMobileMenu}
+				></div>
 			</header>
 		`;
 	}

package/src/components/app-bar/app-bar.css

@@ -13,9 +13,13 @@
   .app-bar {
     background-color: var(--g-theme-color-background-default);
     border-block-end: 1px solid var(--g-theme-color-border-default);
+    position: relative;
+    z-index: 100;
+  }
+
+  .app-bar--sticky {
     position: sticky;
     inset-block-start: 0;
-    z-index: 100;
   }
 
   .app-bar--transparent {
@@ -24,7 +28,8 @@
     box-shadow: none;
   }
 
-  .app-bar__container {
+  /* Top bar row — always visible */
+  .app-bar__bar {
     display: flex;
     align-items: center;
     gap: var(--g-theme-spacing-lg);
@@ -32,7 +37,6 @@
     padding-block: var(--g-theme-spacing-md);
     max-inline-size: 1400px;
     margin-inline: auto;
-    flex-wrap: wrap;
   }
 
   /* Logo */
@@ -42,39 +46,16 @@
     flex-shrink: 0;
   }
 
-  /* Navigation */
+  /* Navigation — hidden on mobile, shown on desktop */
   .app-bar__nav {
     display: none;
-    flex: 1;
-    align-items: center;
-    gap: var(--g-theme-spacing-lg);
-    order: 5;
-    inline-size: 100%;
-  }
-
-  /* Mobile: when menu is open, show nav stacked vertically */
-  .app-bar__nav--mobile-open {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-theme-spacing-md);
-    padding-block: var(--g-theme-spacing-md);
-    border-block-start: 1px solid var(--g-theme-color-border-default);
-    width: 100%;
-  }
-
-  /* Show nav on larger screens using container queries */
-  @container app-bar (min-width: 768px) {
-    .app-bar__nav {
-      display: flex;
-    }
   }
 
   /* Actions */
   .app-bar__actions {
     display: flex;
     align-items: center;
-    gap: var(--g-spacing-12);
+    gap: var(--g-theme-spacing-sm);
     margin-inline-start: auto;
   }
 
@@ -84,8 +65,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
     padding: var(--g-theme-spacing-sm);
     border-radius: var(--g-theme-border-radius-md);
     cursor: pointer;
@@ -97,18 +78,11 @@
     background-color: var(--g-theme-color-background-subtle-hover);
   }
 
-  /* Hide menu button on larger screens */
-  @container app-bar (min-width: 768px) {
-    .app-bar__menu-button {
-      display: none;
-    }
-  }
-
   /* Hamburger Icon */
   .app-bar__menu-icon {
     display: block;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: 1.25rem;
+    block-size: 1rem;
     position: relative;
   }
 
@@ -120,55 +94,130 @@
     block-size: 2px;
     inset-inline-start: 0;
     background-color: currentColor;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, inset 0.2s ease;
   }
 
   .app-bar__menu-icon::before {
-    inset-block-start: 0.25rem;
-    box-shadow: 0 0.5rem 0 currentColor;
+    inset-block-start: 0;
+    box-shadow: 0 0.4375rem 0 currentColor;
   }
 
   .app-bar__menu-icon::after {
-    inset-block-end: 0.25rem;
+    inset-block-end: 0;
   }
 
   /* Animated hamburger to X */
   .app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::before {
-    inset-block-start: 0.5rem;
+    inset-block-start: calc(50% - 1px);
     transform: rotate(45deg);
     box-shadow: none;
   }
 
   .app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::after {
-    inset-block-end: 0.5rem;
+    inset-block-end: calc(50% - 1px);
     transform: rotate(-45deg);
   }
 
-  /* Mobile Navigation */
-  .app-bar__mobile-nav {
+  /*
+   * Mobile menu — full-width panel below the app bar.
+   * Uses clip-path for a clean slide-down reveal animation.
+   */
+  .app-bar__nav--open {
     display: flex;
     flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-theme-spacing-md);
+    gap: var(--g-theme-spacing-xs, 0.25rem);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    z-index: 99;
+    background-color: var(--g-theme-color-background-default);
+    border-block-end: 1px solid var(--g-theme-color-border-default);
     padding-block: var(--g-theme-spacing-md);
-    border-block-start: 1px solid var(--g-theme-color-border-default);
-    animation: slide-down 0.2s ease-out;
+    padding-inline: var(--g-theme-spacing-md);
+    box-shadow: var(--g-theme-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
+    animation: menu-open 0.25s ease-out;
   }
 
-  /* Desktop: show nav inline and reset mobile styles */
-  @container app-bar (min-width: 768px) {
-    .app-bar__container {
-      flex-wrap: nowrap;
+  @keyframes menu-open {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Slotted nav content stacks vertically in mobile menu */
+  .app-bar__nav--open ::slotted(ul),
+  .app-bar__nav--open ::slotted(div[slot="nav"]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-xs, 0.25rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Backdrop overlay — covers viewport below app bar when menu is open */
+  .app-bar__overlay {
+    display: none;
+  }
+
+  .app-bar__overlay--visible {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 98;
+    background-color: rgba(0, 0, 0, 0.2);
+    animation: overlay-fade 0.2s ease-out;
+  }
+
+  @keyframes overlay-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  /* Reduced motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .app-bar__menu-icon::before,
+    .app-bar__menu-icon::after {
+      transition: none;
+    }
+
+    .app-bar__menu-button {
+      transition: none;
+    }
+
+    .app-bar__nav--open {
+      animation: none;
+    }
+
+    .app-bar__overlay--visible {
+      animation: none;
     }
+  }
 
+  /* Desktop: show nav inline, hide hamburger */
+  @container app-bar (min-width: 768px) {
     .app-bar__nav {
       display: flex;
       flex-direction: row;
-      gap: var(--g-theme-spacing-lg);
-      padding: 0;
+      align-items: center;
+      gap: var(--g-theme-spacing-xs, 0.25rem);
+      flex: 1;
+    }
+
+    /* Reset mobile-open styles at desktop — nav is always inline */
+    .app-bar__nav--open {
+      position: static;
+      background-color: transparent;
       border: 0;
-      width: auto;
-      order: 2;
+      padding: 0;
+      box-shadow: none;
+      animation: none;
+      flex-direction: row;
     }
 
     .app-bar__actions {
@@ -176,46 +225,28 @@
     }
 
     .app-bar__menu-button {
-      order: 4;
-    }
-
-    /* Ensure mobile-open class doesn't affect desktop */
-    .app-bar__nav--mobile-open {
-      display: flex;
+      display: none;
     }
-  }
 
-  @keyframes slide-down {
-    from {
-      opacity: 0;
-      transform: translateY(-0.5rem);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
+    /* Overlay is never visible on desktop */
+    .app-bar__overlay--visible {
+      display: none;
     }
   }
 
-  /* Slotted content styling helpers */
-  ::slotted(a) {
-    color: var(--g-theme-color-content-default);
-    text-decoration: none;
-    padding-block: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-spacing-12);
-    border-radius: var(--g-theme-border-radius-md);
-    transition: all 0.2s ease;
+  /* Slotted content styling */
+  ::slotted(a[slot="logo"]) {
+    color: var(--g-theme-color-content-default) !important;
+    text-decoration: none !important;
     font-family: var(--g-theme-typography-label-font-family);
     font-weight: var(--g-theme-typography-label-font-weight);
   }
 
-  ::slotted(a:hover) {
-    color: var(--g-theme-color-content-default);
-    background-color: var(--g-theme-color-background-subtle-hover);
-  }
-
-  ::slotted(ul) {
+  ::slotted(ul),
+  ::slotted(div[slot="nav"]) {
     display: flex;
     flex-direction: row;
+    gap: var(--g-theme-spacing-xs, 0.25rem);
     margin: 0;
     padding: 0;
     list-style: none;

package/src/components/app-bar/app-bar.stories.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "./app-bar.js";
+import "./nav-link.js";
 import "../button/button.js";
 
 const meta = {
@@ -10,19 +11,18 @@ const meta = {
 export default meta;
 
 /**
- * Basic app bar with logo and navigation
+ * Basic app bar with logo, navigation links, and a sign in action.
+ * Nav links use <grantcodes-nav-link> for consistent ghost button styling.
  */
-export const AppBar = {
+export const Default = {
 	render: () => html`
 		<grantcodes-app-bar>
-			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--g-color-brand-purple-900);">
-				MyApp
-			</a>
-			<div slot="nav" style="display: flex; gap: 0.5rem;">
-				<a href="/">Home</a>
-				<a href="/about">About</a>
-				<a href="/features">Features</a>
-				<a href="/pricing">Pricing</a>
+			<a slot="logo" href="/">MyApp</a>
+			<div slot="nav">
+				<grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/about">About</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/pricing">Pricing</a></grantcodes-nav-link>
 			</div>
 			<div slot="actions">
 				<grantcodes-button>Sign In</grantcodes-button>
@@ -32,52 +32,90 @@ export const AppBar = {
 };
 
 /**
- * Transparent app bar for hero sections
+ * Navigation using a <ul> list — matches the real-world pattern from the Astro site.
+ * Each <li> wraps a <grantcodes-nav-link> so styling works through the shadow boundary.
+ */
+export const WithListNav = {
+	render: () => html`
+		<grantcodes-app-bar>
+			<a slot="logo" href="/">MyApp</a>
+			<ul slot="nav">
+				<li><grantcodes-nav-link><a href="/docs">Docs</a></grantcodes-nav-link></li>
+				<li><grantcodes-nav-link><a href="/blog">Blog</a></grantcodes-nav-link></li>
+				<li><grantcodes-nav-link><a href="/changelog">Changelog</a></grantcodes-nav-link></li>
+			</ul>
+			<div slot="actions">
+				<grantcodes-button>Sign In</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+	`,
+};
+
+/**
+ * Sticky app bar that stays at the top of the viewport when scrolling.
+ */
+export const Sticky = {
+	render: () => html`
+		<div style="min-height: 200vh;">
+			<grantcodes-app-bar sticky>
+				<a slot="logo" href="/">MyApp</a>
+				<div slot="nav">
+					<grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+					<grantcodes-nav-link><a href="/about">About</a></grantcodes-nav-link>
+					<grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
+					<grantcodes-nav-link><a href="/pricing">Pricing</a></grantcodes-nav-link>
+				</div>
+				<div slot="actions">
+					<grantcodes-button>Sign In</grantcodes-button>
+				</div>
+			</grantcodes-app-bar>
+			<p style="padding: 2rem;">
+				Scroll down to see the sticky app bar remain at the top of the viewport.
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+				habitant morbi tristique senectus et netus et malesuada fames ac turpis
+				egestas.
+			</p>
+		</div>
+	`,
+};
+
+/**
+ * Transparent app bar for use over hero sections or colored backgrounds.
  */
 export const Transparent = {
 	render: () => html`
 		<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 400px;">
 			<grantcodes-app-bar transparent>
-				<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: white;">
-					MyApp
-				</a>
-				<div slot="nav" style="display: flex; gap: 0.5rem;">
-					<a href="/" style="color: white;">Home</a>
-					<a href="/about" style="color: white;">About</a>
-					<a href="/features" style="color: white;">Features</a>
+				<a slot="logo" href="/">MyApp</a>
+				<div slot="nav">
+					<grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+					<grantcodes-nav-link><a href="/about">About</a></grantcodes-nav-link>
+					<grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
 				</div>
 				<div slot="actions">
-					<grantcodes-button style="--g-theme-color-background-default: white; --g-theme-color-content-default: #667eea;">
-						Sign Up
-					</grantcodes-button>
+					<grantcodes-button>Sign Up</grantcodes-button>
 				</div>
 			</grantcodes-app-bar>
-			<div style="padding: 4rem 2rem; text-align: center; color: white;">
-				<h1 style="font-size: 3rem; margin: 0;">Welcome to MyApp</h1>
-				<p style="font-size: 1.5rem; margin-top: 1rem;">The transparent app bar blends seamlessly</p>
-			</div>
 		</div>
 	`,
 };
 
 /**
- * App bar with multiple actions
+ * App bar with multiple action buttons.
  */
 export const WithMultipleActions = {
 	render: () => html`
 		<grantcodes-app-bar>
-			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--g-color-brand-purple-900);">
-				Dashboard
-			</a>
-			<div slot="nav" style="display: flex; gap: 0.5rem;">
-				<a href="/">Overview</a>
-				<a href="/analytics">Analytics</a>
-				<a href="/reports">Reports</a>
+			<a slot="logo" href="/">Dashboard</a>
+			<div slot="nav">
+				<grantcodes-nav-link><a href="/">Overview</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/analytics">Analytics</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/reports">Reports</a></grantcodes-nav-link>
 			</div>
-			<div slot="actions" style="display: flex; gap: 0.5rem; align-items: center;">
-				<grantcodes-button>🔔</grantcodes-button>
-				<grantcodes-button>⚙️</grantcodes-button>
-				<grantcodes-button>👤</grantcodes-button>
+			<div slot="actions">
+				<grantcodes-button>Notifications</grantcodes-button>
+				<grantcodes-button>Settings</grantcodes-button>
+				<grantcodes-button>Profile</grantcodes-button>
 			</div>
 		</grantcodes-app-bar>
 	`,