@grantcodes/ui 2.12.1 → 2.15.5

package/src/components/accordion/accordion-item.css

@@ -10,8 +10,8 @@
 
 .accordion__item {
 	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);
+		var(--g-color-border-subtle, var(--g-color-border-default));
+	border-radius: var(--g-border-radius-md, 0.5rem);
 }
 
 .accordion__item::details-content {
@@ -27,23 +27,23 @@
 }
 
 .accordion__summary {
-	padding: var(--g-theme-spacing-md);
+	padding: var(--g-spacing-md);
 	cursor: pointer;
-	background: var(--g-theme-color-background-subtle);
-	font-weight: var(--g-typography-font-weight-500);
+	background: var(--g-color-background-subtle);
+	font-weight: var(--g-typography-body-font-weight);
 	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);
+	gap: var(--g-spacing-md);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	transition-property: background-color, outline-width, outline-color;
 }
 
 .accordion__summary:hover {
 	background: var(
-		--g-theme-color-background-subtle-hover,
-		var(--g-theme-color-background-subtle)
+		--g-color-background-subtle-hover,
+		var(--g-color-background-subtle)
 	);
 }
 
@@ -57,7 +57,7 @@
 	block-size: 1em;
 	flex-shrink: 0;
 	transition: transform 0.25s ease;
-	color: var(--g-theme-color-content-subtle, currentColor);
+	color: var(--g-color-content-subtle, currentColor);
 }
 
 .accordion__item[open] .accordion__chevron {
@@ -65,10 +65,10 @@
 }
 
 .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);
+	padding: var(--g-spacing-md);
+	background: var(--g-color-background-default);
+	border-radius: 0 0 var(--g-border-radius-md, 0.5rem)
+		var(--g-border-radius-md, 0.5rem);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/accordion/accordion.css

@@ -11,5 +11,5 @@
 .accordion {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }

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

@@ -11,12 +11,13 @@
 }
 
 .app-bar {
-	background-color: var(--g-theme-color-background-default);
-	border-block-end: 1px solid var(--g-theme-color-border-default);
+	background-color: var(--g-color-background-default);
+	border-block-end: 1px solid var(--g-color-border-default);
 	position: relative;
 	z-index: 100;
 }
 
+:host([sticky]),
 .app-bar--sticky {
 	position: sticky;
 	inset-block-start: 0;
@@ -32,9 +33,9 @@
 .app-bar__bar {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-lg);
-	padding-inline: var(--g-theme-spacing-md);
-	padding-block: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-lg);
+	padding-inline: var(--g-spacing-md);
+	padding-block: var(--g-spacing-md);
 	max-inline-size: 1400px;
 	margin-inline: auto;
 }
@@ -55,7 +56,7 @@
 .app-bar__actions {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	margin-inline-start: auto;
 }
 
@@ -67,15 +68,15 @@
 	justify-content: center;
 	inline-size: 2.75rem;
 	block-size: 2.75rem;
-	padding: var(--g-theme-spacing-sm);
-	border-radius: var(--g-theme-border-radius-md);
+	padding: var(--g-spacing-sm);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 	transition: background-color 0.2s ease;
 }
 
 .app-bar__menu-button:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Hamburger Icon */
@@ -127,16 +128,16 @@
 .app-bar__nav--open {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-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);
-	padding-inline: var(--g-theme-spacing-md);
-	box-shadow: var(--g-theme-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
+	background-color: var(--g-color-background-default);
+	border-block-end: 1px solid var(--g-color-border-default);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
+	box-shadow: var(--g-box-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
 	animation: menu-open 0.25s ease-out;
 }
 
@@ -156,7 +157,7 @@
 .app-bar__nav--open ::slotted(div[slot="nav"]) {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -211,8 +212,37 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: var(--g-theme-spacing-xs, 0.25rem);
+		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 */
@@ -224,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 {
@@ -238,21 +280,25 @@
 	.app-bar__overlay--visible {
 		display: none;
 	}
+
+	::slotted(ul),
+	::slotted(div[slot="nav"]) {
+		flex-shrink: 0;
+	}
 }
 
 /* Slotted content styling */
 ::slotted(a[slot="logo"]) {
-	color: var(--g-theme-color-content-default) !important;
+	color: var(--g-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);
+	font: var(--g-typography-body-sm-font);
 }
 
 ::slotted(ul),
 ::slotted(div[slot="nav"]) {
 	display: flex;
 	flex-direction: row;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 	margin: 0;
 	padding: 0;
 	list-style: none;

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/app-bar/nav-link.css

@@ -11,7 +11,7 @@
 .nav-link {
 	display: inline-flex;
 	align-items: center;
-	border-radius: var(--g-theme-border-radius-md);
+	border-radius: var(--g-border-radius-md);
 	background-color: transparent;
 	transition: background-color 0.15s ease;
 }
@@ -19,7 +19,7 @@
 .nav-link:hover {
 	background-color: color-mix(
 		in srgb,
-		var(--g-theme-color-content-default) 8%,
+		var(--g-color-content-default) 8%,
 		transparent
 	);
 }
@@ -39,21 +39,20 @@
 ::slotted(a:focus-visible) {
 	display: inline-flex;
 	align-items: center;
-	color: var(--g-theme-color-content-default) !important;
+	color: var(--g-color-content-default) !important;
 	text-decoration: none !important;
 	opacity: 1 !important;
-	padding-block: var(--g-theme-spacing-xs, 0.25rem);
-	padding-inline: var(--g-theme-spacing-sm);
-	font-family: var(--g-theme-typography-label-font-family);
-	font-weight: var(--g-theme-typography-label-font-weight);
+	padding-block: var(--g-spacing-xs, 0.25rem);
+	padding-inline: var(--g-spacing-sm);
+	font: var(--g-typography-body-sm-font);
 	white-space: nowrap;
 }
 
 ::slotted(a:focus-visible) {
-	outline: var(--g-theme-focus-ring-width-default) solid
-		var(--g-theme-focus-ring-color-default);
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	border-radius: var(--g-theme-border-radius-md);
+	outline: var(--g-focus-ring-width-default) solid
+		var(--g-focus-ring-color-default);
+	outline-offset: var(--g-focus-ring-offset-default);
+	border-radius: var(--g-border-radius-md);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/avatar/avatar.css

@@ -13,15 +13,14 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	inline-size: var(--g-theme-spacing-2xl);
-	block-size: var(--g-theme-spacing-2xl);
+	inline-size: var(--g-spacing-2xl);
+	block-size: var(--g-spacing-2xl);
 	border-radius: 50%;
 	overflow: hidden;
-	background-color: var(--g-theme-color-primary-200);
-	color: var(--g-theme-color-primary-900);
+	background-color: var(--g-color-primary-200);
+	color: var(--g-color-primary-900);
 	text-align: center;
-	font-size: var(--g-theme-typography-h6-font-size);
-	font-weight: var(--g-theme-typography-label-default-font-weight);
+	font: var(--g-typography-h6-font)
 }
 
 .avatar__image {

package/src/components/badge/badge.css

@@ -11,11 +11,12 @@
 .badge {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 	padding-inline: 0.625em;
 	padding-block: 0.375em;
-	border-radius: var(--g-theme-border-radius-md, 0.375rem);
-	font: var(--g-theme-typography-meta);
+	border-radius: var(--g-border-radius-md);
+	font: var(--g-typography-body-sm-font);
+	font-size: var(--g-typography-font-size-2xs);
 	line-height: 1;
 	white-space: nowrap;
 	border-width: 1px;
@@ -25,54 +26,54 @@
 
 /* Soft style variants */
 .badge--primary {
-	background-color: var(--g-theme-color-primary-200);
-	color: var(--g-theme-color-primary-600);
+	background-color: var(--g-color-primary-200);
+	color: var(--g-color-primary-600);
 	border-color: transparent;
 }
 
 .badge--success {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-green-500) 15%,
+		var(--g-color-utility-success) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-green-700);
+	color: var(--g-color-content-utility-success);
 	border-color: transparent;
 }
 
 .badge--warning {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-yellow-500) 15%,
+		var(--g-color-utility-warning) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-yellow-700);
+	color: var(--g-color-content-utility-warning);
 	border-color: transparent;
 }
 
 .badge--error {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-red-500) 15%,
+		var(--g-color-utility-error) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-red-700);
+	color: var(--g-color-content-utility-error);
 	border-color: transparent;
 }
 
 .badge--info {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-blue-500) 15%,
+		var(--g-color-utility-info) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-blue-700);
+	color: var(--g-color-content-utility-info);
 	border-color: transparent;
 }
 
 .badge--neutral {
-	background-color: var(--g-theme-color-background-subtle);
-	color: var(--g-theme-color-content-default);
+	background-color: var(--g-color-background-subtle);
+	color: var(--g-color-content-default);
 	border-color: transparent;
 }
 

package/src/components/breadcrumb/breadcrumb.css

@@ -16,7 +16,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -25,24 +25,23 @@
 .breadcrumb__item {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	font-size: var(--g-typography-font-size-14);
-	color: var(--g-theme-color-primary-700);
+	gap: var(--g-spacing-sm);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-color-primary-700);
 }
 
 /* Separator using ::after pseudo-element; driven by parent via data-has-separator */
 :host([data-has-separator]) .breadcrumb__item::after {
 	content: var(--component-breadcrumb-separator, "/");
 	display: inline-block;
-	color: var(--g-theme-color-primary-400);
-	font-weight: var(--g-typography-font-weight-400);
+	color: var(--g-color-primary-400);
+	font-weight: var(--g-typography-body-lg-font-weight);
 	user-select: none;
 	pointer-events: none;
 }
 
 /* Current page styling */
 .breadcrumb__item[data-current] {
-	font-weight: var(--g-typography-font-weight-600);
 	color: var(--color-base-primary-900);
 }
 
@@ -51,10 +50,10 @@
 }
 
 .breadcrumb__link {
-	color: var(--g-theme-color-primary-600);
+	color: var(--g-color-primary-600);
 	text-decoration: none;
 	transition: color 0.2s ease;
-	border-radius: var(--g-theme-border-radius-md, 0.25rem);
+	border-radius: var(--g-border-radius-md, 0.25rem);
 	padding-inline: 0.25em;
 	padding-block: 0.125em;
 	margin-inline: -0.25em;
@@ -62,7 +61,7 @@
 }
 
 .breadcrumb__link:hover {
-	color: var(--g-theme-color-primary-700);
+	color: var(--g-color-primary-700);
 	text-decoration: underline;
 }
 
@@ -80,6 +79,6 @@
 		content: "...";
 		display: inline-block;
 		margin-inline-end: 0.5rem;
-		color: var(--g-theme-color-primary-400);
+		color: var(--g-color-primary-400);
 	}
 }