@grantcodes/ui 2.15.2 → 2.15.6

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [2.15.6](https://github.com/grantcodes/ui/compare/ui-v2.15.5...ui-v2.15.6) (2026-06-07)
+
+
+### Bug Fixes
+
+* **ui:** raise sticky app bar layer ([8675995](https://github.com/grantcodes/ui/commit/8675995bcc8eb07596fa741a9e86f1ca1f7b0986))
+
+## [2.15.5](https://github.com/grantcodes/ui/compare/ui-v2.15.4...ui-v2.15.5) (2026-06-07)
+
+
+### Bug Fixes
+
+* **ui:** handle app bar nav overflow ([592f8b0](https://github.com/grantcodes/ui/commit/592f8b0a29bd08a49b536dd8691ae9050cb009db))
+
+## [2.15.4](https://github.com/grantcodes/ui/compare/ui-v2.15.3...ui-v2.15.4) (2026-06-07)
+
+
+### Bug Fixes
+
+* **ui:** reflect app bar boolean attrs ([10f0685](https://github.com/grantcodes/ui/commit/10f06854563526201031734318a01bc042bfdb8a))
+
+## [2.15.3](https://github.com/grantcodes/ui/compare/ui-v2.15.2...ui-v2.15.3) (2026-06-07)
+
+
+### Bug Fixes
+
+* **ui:** h2 margins ([2dac517](https://github.com/grantcodes/ui/commit/2dac517a704817f55f2d46df2fe92340a8c5fb94))
+
 ## [2.15.2](https://github.com/grantcodes/ui/compare/ui-v2.15.1...ui-v2.15.2) (2026-06-07)
 
 

package/custom-elements.json

@@ -234,7 +234,8 @@
               },
               "description": "Whether the app bar is sticky",
               "default": "false",
-              "attribute": "sticky"
+              "attribute": "sticky",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -245,7 +246,8 @@
               },
               "description": "Whether the app bar has transparent background",
               "default": "false",
-              "attribute": "transparent"
+              "attribute": "transparent",
+              "reflects": true
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.15.2",
+  "version": "2.15.6",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",

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

@@ -10,8 +10,8 @@ export class GrantCodesAppBar extends LitElement {
 	static styles = [focusRingStyles, appBarStyles];
 
 	static properties = {
-		sticky: { type: Boolean },
-		transparent: { type: Boolean },
+		sticky: { type: Boolean, reflect: true },
+		transparent: { type: Boolean, reflect: true },
 		_mobileMenuOpen: { type: Boolean, state: true },
 	};
 

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

@@ -14,7 +14,7 @@
 	background-color: var(--g-color-background-default);
 	border-block-end: 1px solid var(--g-color-border-default);
 	position: relative;
-	z-index: 100;
+ 	z-index: 1000;
 }
 
 :host([sticky]),
@@ -214,6 +214,35 @@
 		align-items: center;
 		gap: var(--g-spacing-xs, 0.25rem);
 		flex: 1;
+		min-inline-size: 0;
+		overflow-x: auto;
+		flex-wrap: nowrap;
+		-webkit-overflow-scrolling: touch;
+		-webkit-mask-image: linear-gradient(
+			to right,
+			black calc(100% - 1.5rem),
+			transparent
+		);
+		mask-image: linear-gradient(
+			to right,
+			black calc(100% - 1.5rem),
+			transparent
+		);
+		scrollbar-width: thin;
+		scrollbar-color: var(--g-color-border-default) transparent;
+	}
+
+	.app-bar__nav::-webkit-scrollbar {
+		height: 4px;
+	}
+
+	.app-bar__nav::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.app-bar__nav::-webkit-scrollbar-thumb {
+		background: var(--g-color-border-default);
+		border-radius: 2px;
 	}
 
 	/* Reset mobile-open styles at desktop — nav is always inline */
@@ -225,10 +254,22 @@
 		box-shadow: none;
 		animation: none;
 		flex-direction: row;
+		overflow-x: auto;
+		-webkit-mask-image: linear-gradient(
+			to right,
+			black calc(100% - 1.5rem),
+			transparent
+		);
+		mask-image: linear-gradient(
+			to right,
+			black calc(100% - 1.5rem),
+			transparent
+		);
 	}
 
 	.app-bar__actions {
 		order: 3;
+		flex-shrink: 0;
 	}
 
 	.app-bar__menu-button {
@@ -239,6 +280,11 @@
 	.app-bar__overlay--visible {
 		display: none;
 	}
+
+	::slotted(ul),
+	::slotted(div[slot="nav"]) {
+		flex-shrink: 0;
+	}
 }
 
 /* Slotted content styling */

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

@@ -100,6 +100,43 @@ export const Transparent = {
 	`,
 };
 
+/**
+ * Many nav items demonstrating horizontal scroll overflow on desktop.
+ * When the viewport is wide enough for desktop mode but too narrow for all
+ * items, the nav becomes horizontally scrollable with a subtle fade affordance
+ * at the right edge and styled thin scrollbars.
+ */
+export const ManyNavItems = {
+	render: () => html`
+		<grantcodes-app-bar>
+			<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>
+				<grantcodes-nav-link><a href="/docs">Docs</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/blog">Blog</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/changelog">Changelog</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/api">API</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/support">Support</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/status">Status</a></grantcodes-nav-link>
+			</div>
+			<div slot="actions">
+				<grantcodes-button>Sign In</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+	`,
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Resize the viewport to see the nav items become horizontally scrollable on desktop with a right-edge fade affordance and thin scrollbar.",
+			},
+		},
+	},
+};
+
 /**
  * App bar with multiple action buttons.
  */

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

@@ -55,6 +55,14 @@ describe("App Bar Component", () => {
 		assert.ok(appBar, "Should have sticky class");
 	});
 
+	it("should reflect sticky to the host attribute", async () => {
+		element = await fixture("grantcodes-app-bar", {
+			sticky: true,
+		});
+
+		assert.ok(element.hasAttribute("sticky"), "Should reflect sticky attribute");
+	});
+
 	it("should apply transparent class when transparent", async () => {
 		element = await fixture("grantcodes-app-bar", {
 			transparent: true,
@@ -64,6 +72,17 @@ describe("App Bar Component", () => {
 		assert.ok(appBar, "Should have transparent class");
 	});
 
+	it("should reflect transparent to the host attribute", async () => {
+		element = await fixture("grantcodes-app-bar", {
+			transparent: true,
+		});
+
+		assert.ok(
+			element.hasAttribute("transparent"),
+			"Should reflect transparent attribute",
+		);
+	});
+
 	it("should have logo slot", async () => {
 		element = await fixture("grantcodes-app-bar");
 		const logoSlot = element.shadowRoot.querySelector('slot[name="logo"]');

package/src/components/cta/cta.component.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import ctaStyles from "./cta.css" with { type: "css" };
 import "../button/button.js";
+import "../container/container.js";
 
 export class GrantCodesCta extends LitElement {
 	static styles = [ctaStyles];
@@ -69,7 +70,7 @@ export class GrantCodesCta extends LitElement {
 		const secondary = this._secondaryAction;
 		return html`
 			<section class="cta">
-				<div class="cta__container">
+				<grantcodes-container align="prose">
 					${
 						this.eyebrow
 							? html`<p class="cta__eyebrow">${this.eyebrow}</p>`
@@ -101,7 +102,7 @@ export class GrantCodesCta extends LitElement {
 							`
 							: null
 					}
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/cta/cta.css

@@ -10,15 +10,9 @@
 
 .cta {
 	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
 	background: var(--g-color-background-subtle);
 }
 
-.cta__container {
-	max-width: 65ch;
-	margin: 0 auto;
-}
-
 :host([align="center"]) .cta {
 	text-align: center;
 }

package/src/components/feature-list/feature-list.component.js

@@ -3,6 +3,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import * as icons from "lucide-static";
 import featureListStyles from "./feature-list.css" with { type: "css" };
 import "../icon/icon.js";
+import "../container/container.js";
 
 export class GrantCodesFeatureList extends LitElement {
 	static styles = [featureListStyles];
@@ -67,7 +68,7 @@ export class GrantCodesFeatureList extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="feature-list">
-				<div class="feature-list__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="feature-list__title">${this.title}</h2>`
@@ -123,7 +124,7 @@ export class GrantCodesFeatureList extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/feature-list/feature-list.css

@@ -10,12 +10,6 @@
 
 .feature-list {
 	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
-}
-
-.feature-list__container {
-	max-width: 1200px;
-	margin: 0 auto;
 }
 
 .feature-list__title {

package/src/components/footer/footer.component.js

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import footerStyles from "./footer.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesFooter extends LitElement {
 	static styles = [footerStyles];
@@ -22,7 +23,7 @@ export class GrantCodesFooter extends LitElement {
 	render() {
 		return html`
 			<footer class="footer">
-				<div class="footer__container">
+				<grantcodes-container align="wide">
 					<div class="footer__columns" style="--footer-columns: ${this.columns}">
 						<slot></slot>
 					</div>
@@ -31,7 +32,7 @@ export class GrantCodesFooter extends LitElement {
 					<div class="footer__bottom">
 						<slot name="bottom"></slot>
 					</div>
-				</div>
+				</grantcodes-container>
 			</footer>
 		`;
 	}

package/src/components/footer/footer.css

@@ -12,17 +12,11 @@
 
 .footer {
 	margin-block-start: auto;
+	padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
 	border-block-start: 1px solid var(--g-color-border-subtle);
 	background-color: var(--g-color-background-subtle);
 }
 
-.footer__container {
-	padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
-	padding-inline: var(--g-spacing-md);
-	max-inline-size: 1400px;
-	margin-inline: auto;
-}
-
 .footer__columns {
 	display: grid;
 	grid-template-columns: repeat(var(--footer-columns, 3), 1fr);

package/src/components/footer/footer.test.js

@@ -86,7 +86,7 @@ describe("Footer Component", () => {
 
 	it("should have footer container", async () => {
 		element = await fixture("grantcodes-footer");
-		const container = element.shadowRoot.querySelector(".footer__container");
+		const container = element.shadowRoot.querySelector("grantcodes-container");
 		assert.ok(container, "Footer container should exist");
 	});
 

package/src/components/logo-cloud/logo-cloud.component.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import logoCloudStyles from "./logo-cloud.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesLogoCloud extends LitElement {
 	static styles = [logoCloudStyles];
@@ -35,7 +36,7 @@ export class GrantCodesLogoCloud extends LitElement {
 		const logos = this._logos;
 		return html`
 			<section class="logo-cloud">
-				<div class="logo-cloud__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<p class="logo-cloud__title">${this.title}</p>`
@@ -74,7 +75,7 @@ export class GrantCodesLogoCloud extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/logo-cloud/logo-cloud.css

@@ -10,16 +10,10 @@
 
 .logo-cloud {
 	padding-block: var(--g-spacing-2xl);
-	padding-inline: var(--g-spacing-md);
 	border-top: 1px solid var(--g-color-border-default);
 	border-bottom: 1px solid var(--g-color-border-default);
 }
 
-.logo-cloud__container {
-	max-width: 1200px;
-	margin: 0 auto;
-}
-
 .logo-cloud__title {
 	margin: 0 0 var(--g-spacing-xl);
 	font: var(--g-typography-body-sm-font);

package/src/components/pricing/pricing.component.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import pricingStyles from "./pricing.css" with { type: "css" };
 import "../button/button.js";
+import "../container/container.js";
 
 export class GrantCodesPricing extends LitElement {
 	static styles = [pricingStyles];
@@ -43,7 +44,7 @@ export class GrantCodesPricing extends LitElement {
 		const tiers = this._tiers;
 		return html`
 			<section class="pricing">
-				<div class="pricing__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="pricing__title">${this.title}</h2>`
@@ -112,7 +113,7 @@ export class GrantCodesPricing extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/pricing/pricing.css

@@ -10,12 +10,6 @@
 
 .pricing {
 	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
-}
-
-.pricing__container {
-	max-width: 1200px;
-	margin: 0 auto;
 }
 
 .pricing__title {

package/src/components/stats/stats.component.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import statsStyles from "./stats.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesStats extends LitElement {
 	static styles = [statsStyles];
@@ -41,7 +42,7 @@ export class GrantCodesStats extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="stats">
-				<div class="stats__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="stats__title">${this.title}</h2>`
@@ -66,7 +67,7 @@ export class GrantCodesStats extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/stats/stats.css

@@ -10,15 +10,9 @@
 
 .stats {
 	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
 	background: var(--g-color-background-subtle);
 }
 
-.stats__container {
-	max-width: 1200px;
-	margin: 0 auto;
-}
-
 .stats__title {
 	margin: 0 0 var(--g-spacing-xl);
 	font: var(--g-typography-h3-font);

package/src/components/testimonials/testimonials.component.js

@@ -2,6 +2,7 @@ import { LitElement, html } from "lit";
 import testimonialsStyles from "./testimonials.css" with { type: "css" };
 import "../card/card.js";
 import "../person/person.js";
+import "../container/container.js";
 
 export class GrantCodesTestimonials extends LitElement {
 	static styles = [testimonialsStyles];
@@ -43,7 +44,7 @@ export class GrantCodesTestimonials extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="testimonials">
-				<div class="testimonials__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="testimonials__title">${this.title}</h2>`
@@ -76,7 +77,7 @@ export class GrantCodesTestimonials extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/testimonials/testimonials.css

@@ -10,12 +10,6 @@
 
 .testimonials {
 	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
-}
-
-.testimonials__container {
-	max-width: 1200px;
-	margin: 0 auto;
 }
 
 .testimonials__title {

package/src/css/typography.css

@@ -11,15 +11,15 @@
 	}
 }
 
-:where(h1, h1, h3, h4, h5, h6, p) {
+:where(h1, h2, h3, h4, h5, h6, p) {
 	margin-block-end: 1rem;
 }
 
-:where(h1, h1, h3, h4, h5, h6, p):first-child {
+:where(h1, h2, h3, h4, h5, h6, p):first-child {
 	margin-block-start: 0;
 }
 
-:where(h1, h1, h3, h4, h5, h6, p):last-child {
+:where(h1, h2, h3, h4, h5, h6, p):last-child {
 	margin-block-end: 0;
 }