@grantcodes/ui 2.5.1 → 2.7.0

package/src/components/accordion/accordion.component.js

@@ -22,7 +22,10 @@ export class GrantCodesAccordion extends LitElement {
 					(item, index) => html`
             <details class="accordion__item">
               <summary class="accordion__summary focus-ring">
-                ${item.title}
+                <span>${item.title}</span>
+                <svg class="accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
               </summary>
               <div class="accordion__content">${item.content}</div>
             </details>

package/src/components/accordion/accordion.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }
@@ -9,51 +15,53 @@
   }
 
   .accordion__item {
-    border: 1px solid var(--g-theme-color-border-default);
+    border: 1px solid var(--g-theme-color-border-subtle, var(--g-theme-color-border-default));
     border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    height: 3.5rem;
-    transition: height 0.25s;
-  }
-
-  .accordion__item[open] {
-    height: auto;
-    overflow: clip;
   }
 
   .accordion__summary {
     padding: var(--g-theme-spacing-md);
     cursor: pointer;
     background: var(--g-theme-color-background-subtle);
-    border: var(--g-theme-border-width-md) solid
-      var(--g-theme-color-border-subtle);
-    border-radius: var(--g-theme-border-radius-md);
     font-weight: var(--g-typography-font-weight-500);
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: var(--g-theme-spacing-md);
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
     transition-property: background-color, outline-width, outline-color;
   }
 
   .accordion__summary:hover {
-    background: var(--g-theme-color-background-subtle-hover);
+    background: var(--g-theme-color-background-subtle-hover, var(--g-theme-color-background-subtle));
   }
 
   .accordion__summary::-webkit-details-marker {
     display: none;
   }
 
-  .accordion__summary::after {
-    content: "+";
-    font: var(--g-theme-typography-h5);
-    line-height: 1;
+  .accordion__chevron {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    flex-shrink: 0;
+    transition: transform 0.25s ease;
+    color: var(--g-theme-color-content-secondary, currentColor);
   }
 
-  .accordion__item[open] .accordion__summary::after {
-    content: "-";
+  .accordion__item[open] .accordion__chevron {
+    transform: rotateX(180deg);
   }
 
   .accordion__content {
     padding: var(--g-theme-spacing-md);
     background: var(--g-theme-color-background-default);
+    border-radius: 0 0 var(--g-theme-border-radius-md, 0.5rem) var(--g-theme-border-radius-md, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__chevron {
+      transition: none;
+    }
   }

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>
 	`,

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

@@ -40,6 +40,12 @@ describe("App Bar Component", () => {
 		assert.ok(header, "Header element should exist");
 	});
 
+	it("should not have sticky class by default", async () => {
+		element = await fixture("grantcodes-app-bar");
+		const appBar = element.shadowRoot.querySelector(".app-bar--sticky");
+		assert.ok(!appBar, "Should not have sticky class by default");
+	});
+
 	it("should apply sticky class when sticky", async () => {
 		element = await fixture("grantcodes-app-bar", {
 			sticky: true,
@@ -108,7 +114,7 @@ describe("App Bar Component", () => {
 		await element.updateComplete;
 
 		const mobileNav = element.shadowRoot.querySelector(
-			".app-bar__nav--mobile-open",
+			".app-bar__nav--open",
 		);
 		assert.ok(mobileNav, "Mobile nav should be rendered when open");
 	});

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

@@ -0,0 +1,15 @@
+import { LitElement, html } from "lit";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import navLinkStyles from "./nav-link.css" with { type: "css" };
+
+export class GrantCodesNavLink extends LitElement {
+	static styles = [focusRingStyles, navLinkStyles];
+
+	render() {
+		return html`
+			<span class="nav-link">
+				<slot></slot>
+			</span>
+		`;
+	}
+}