@grantcodes/ui 2.0.0 → 2.1.0

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

@@ -1,227 +1,228 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const appBarStyles = css`
-	*,
+  ${focusRingStyles}
+
+  *,
 	*::before,
 	*::after {
-		box-sizing: border-box;
-	}
-
-	:host {
-		display: block;
-		container-type: inline-size;
-		container-name: app-bar;
-	}
-
-	.app-bar {
-		background-color: var(--g-theme-color-background-default);
-		border-block-end: 1px solid var(--g-theme-color-border-default);
-		position: sticky;
-		inset-block-start: 0;
-		z-index: 100;
-	}
-
-	.app-bar--transparent {
-		background-color: transparent;
-		border-block-end-color: transparent;
-		box-shadow: none;
-	}
-
-	.app-bar__container {
-		display: flex;
-		align-items: center;
-		gap: 1.5rem;
-		padding-inline: 1rem;
-		padding-block: 1rem;
-		max-inline-size: 1400px;
-		margin-inline: auto;
-		flex-wrap: wrap;
-	}
-
-	/* Logo */
-	.app-bar__logo {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-	}
-
-	/* Navigation */
-	.app-bar__nav {
-		display: none;
-		flex: 1;
-		align-items: center;
-		gap: 1.5rem;
-		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: 0.5rem;
-		padding-inline: 1rem;
-		padding-block: 1rem;
-		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: 0.75rem;
-		margin-inline-start: auto;
-	}
-
-	/* Mobile Menu Button */
-	.app-bar__menu-button {
-		all: unset;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		inline-size: 2.5rem;
-		block-size: 2.5rem;
-		padding: 0.5rem;
-		border-radius: var(--g-theme-border-radius-md);
-		cursor: pointer;
-		color: var(--g-theme-color-content-default);
-		transition: background-color 0.2s ease;
-	}
-
-	.app-bar__menu-button:hover {
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.app-bar__menu-button:focus-visible {
-		outline: 2px solid var(--component-focus-ring-color);
-		outline-offset: 2px;
-	}
-
-	/* 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;
-		position: relative;
-	}
-
-	.app-bar__menu-icon::before,
-	.app-bar__menu-icon::after {
-		content: "";
-		position: absolute;
-		inline-size: 100%;
-		block-size: 2px;
-		inset-inline-start: 0;
-		background-color: currentColor;
-		transition: transform 0.2s ease;
-	}
-
-	.app-bar__menu-icon::before {
-		inset-block-start: 0.25rem;
-		box-shadow: 0 0.5rem 0 currentColor;
-	}
-
-	.app-bar__menu-icon::after {
-		inset-block-end: 0.25rem;
-	}
-
-	/* Animated hamburger to X */
-	.app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::before {
-		inset-block-start: 0.5rem;
-		transform: rotate(45deg);
-		box-shadow: none;
-	}
-
-	.app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::after {
-		inset-block-end: 0.5rem;
-		transform: rotate(-45deg);
-	}
-
-	/* Mobile Navigation */
-	.app-bar__mobile-nav {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		padding-inline: 1rem;
-		padding-block: 1rem;
-		border-block-start: 1px solid var(--g-theme-color-border-default);
-		animation: slide-down 0.2s ease-out;
-	}
-
-	/* Desktop: show nav inline and reset mobile styles */
-	@container app-bar (min-width: 768px) {
-		.app-bar__container {
-			flex-wrap: nowrap;
-		}
-
-		.app-bar__nav {
-			display: flex;
-			flex-direction: row;
-			gap: 1.5rem;
-			padding: 0;
-			border: 0;
-			width: auto;
-			order: 2;
-		}
-
-		.app-bar__actions {
-			order: 3;
-		}
-
-		.app-bar__menu-button {
-			order: 4;
-		}
-
-		/* Ensure mobile-open class doesn't affect desktop */
-		.app-bar__nav--mobile-open {
-			display: flex;
-		}
-	}
-
-	@keyframes slide-down {
-		from {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Slotted content styling helpers */
-	::slotted(a) {
-		color: var(--g-theme-color-content-default);
-		text-decoration: none;
-		padding-block: 0.5rem;
-		padding-inline: 0.75rem;
-		border-radius: var(--g-theme-border-radius-md);
-		transition: all 0.2s ease;
-		font-weight: 500;
-	}
-
-	::slotted(a:hover) {
-		color: var(--g-theme-color-content-default);
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	::slotted(a:focus-visible) {
-		outline: 2px solid var(--component-focus-ring-color);
-		outline-offset: 2px;
-	}
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    container-type: inline-size;
+    container-name: app-bar;
+  }
+
+  .app-bar {
+    background-color: var(--g-theme-color-background-default);
+    border-block-end: 1px solid var(--g-theme-color-border-default);
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 100;
+  }
+
+  .app-bar--transparent {
+    background-color: transparent;
+    border-block-end-color: transparent;
+    box-shadow: none;
+  }
+
+  .app-bar__container {
+    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);
+    max-inline-size: 1400px;
+    margin-inline: auto;
+    flex-wrap: wrap;
+  }
+
+  /* Logo */
+  .app-bar__logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Navigation */
+  .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);
+    margin-inline-start: auto;
+  }
+
+  /* Mobile Menu Button */
+  .app-bar__menu-button {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: var(--g-theme-spacing-sm);
+    border-radius: var(--g-theme-border-radius-md);
+    cursor: pointer;
+    color: var(--g-theme-color-content-default);
+    transition: background-color 0.2s ease;
+  }
+
+  .app-bar__menu-button:hover {
+    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;
+    position: relative;
+  }
+
+  .app-bar__menu-icon::before,
+  .app-bar__menu-icon::after {
+    content: "";
+    position: absolute;
+    inline-size: 100%;
+    block-size: 2px;
+    inset-inline-start: 0;
+    background-color: currentColor;
+    transition: transform 0.2s ease;
+  }
+
+  .app-bar__menu-icon::before {
+    inset-block-start: 0.25rem;
+    box-shadow: 0 0.5rem 0 currentColor;
+  }
+
+  .app-bar__menu-icon::after {
+    inset-block-end: 0.25rem;
+  }
+
+  /* Animated hamburger to X */
+  .app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::before {
+    inset-block-start: 0.5rem;
+    transform: rotate(45deg);
+    box-shadow: none;
+  }
+
+  .app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::after {
+    inset-block-end: 0.5rem;
+    transform: rotate(-45deg);
+  }
+
+  /* Mobile Navigation */
+  .app-bar__mobile-nav {
+    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);
+    animation: slide-down 0.2s ease-out;
+  }
+
+  /* Desktop: show nav inline and reset mobile styles */
+  @container app-bar (min-width: 768px) {
+    .app-bar__container {
+      flex-wrap: nowrap;
+    }
+
+    .app-bar__nav {
+      display: flex;
+      flex-direction: row;
+      gap: var(--g-theme-spacing-lg);
+      padding: 0;
+      border: 0;
+      width: auto;
+      order: 2;
+    }
+
+    .app-bar__actions {
+      order: 3;
+    }
+
+    .app-bar__menu-button {
+      order: 4;
+    }
+
+    /* Ensure mobile-open class doesn't affect desktop */
+    .app-bar__nav--mobile-open {
+      display: flex;
+    }
+  }
+
+  @keyframes slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* 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;
+    font-weight: var(--g-typography-font-weight-500);
+  }
+
+  ::slotted(a:hover) {
+    color: var(--g-theme-color-content-default);
+    background-color: var(--g-theme-color-background-subtle-hover);
+  }
+
+  ::slotted(ul) {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 `;

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

@@ -18,12 +18,20 @@ describe("App Bar Component", () => {
 
 	it("should not be sticky by default", async () => {
 		element = await fixture("grantcodes-app-bar");
-		assert.strictEqual(element.sticky, false, "Should not be sticky by default");
+		assert.strictEqual(
+			element.sticky,
+			false,
+			"Should not be sticky by default",
+		);
 	});
 
 	it("should not be transparent by default", async () => {
 		element = await fixture("grantcodes-app-bar");
-		assert.strictEqual(element.transparent, false, "Should not be transparent by default");
+		assert.strictEqual(
+			element.transparent,
+			false,
+			"Should not be transparent by default",
+		);
 	});
 
 	it("should render header element", async () => {
@@ -64,19 +72,27 @@ describe("App Bar Component", () => {
 
 	it("should have actions slot", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const actionsSlot = element.shadowRoot.querySelector('slot[name="actions"]');
+		const actionsSlot = element.shadowRoot.querySelector(
+			'slot[name="actions"]',
+		);
 		assert.ok(actionsSlot, "Actions slot should exist");
 	});
 
 	it("should render mobile menu button", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
 		assert.ok(menuButton, "Mobile menu button should exist");
 	});
 
 	it("should have mobile menu closed by default", async () => {
 		element = await fixture("grantcodes-app-bar");
-		assert.strictEqual(element._mobileMenuOpen, false, "Mobile menu should be closed by default");
+		assert.strictEqual(
+			element._mobileMenuOpen,
+			false,
+			"Mobile menu should be closed by default",
+		);
 	});
 
 	it("should not render mobile nav when closed", async () => {
@@ -91,25 +107,37 @@ describe("App Bar Component", () => {
 
 		await element.updateComplete;
 
-		const mobileNav = element.shadowRoot.querySelector(".app-bar__nav--mobile-open");
+		const mobileNav = element.shadowRoot.querySelector(
+			".app-bar__nav--mobile-open",
+		);
 		assert.ok(mobileNav, "Mobile nav should be rendered when open");
 	});
 
 	it("should toggle mobile menu when button is clicked", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
 
 		assert.strictEqual(element._mobileMenuOpen, false, "Should start closed");
 
 		click(menuButton);
 		await element.updateComplete;
 
-		assert.strictEqual(element._mobileMenuOpen, true, "Should be open after click");
+		assert.strictEqual(
+			element._mobileMenuOpen,
+			true,
+			"Should be open after click",
+		);
 
 		click(menuButton);
 		await element.updateComplete;
 
-		assert.strictEqual(element._mobileMenuOpen, false, "Should be closed after second click");
+		assert.strictEqual(
+			element._mobileMenuOpen,
+			false,
+			"Should be closed after second click",
+		);
 	});
 
 	it("should emit menu-toggle event when menu is toggled", async () => {
@@ -120,23 +148,36 @@ describe("App Bar Component", () => {
 			toggledState = e.detail.open;
 		});
 
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
 		click(menuButton);
 
 		await element.updateComplete;
 
-		assert.strictEqual(toggledState, true, "Toggle event should fire with open state");
+		assert.strictEqual(
+			toggledState,
+			true,
+			"Toggle event should fire with open state",
+		);
 	});
 
 	it("should have aria-label on menu button", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
-		assert.ok(menuButton.hasAttribute("aria-label"), "Menu button should have aria-label");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
+		assert.ok(
+			menuButton.hasAttribute("aria-label"),
+			"Menu button should have aria-label",
+		);
 	});
 
 	it("should have aria-expanded on menu button", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
 		assert.ok(
 			menuButton.hasAttribute("aria-expanded"),
 			"Menu button should have aria-expanded",
@@ -145,7 +186,9 @@ describe("App Bar Component", () => {
 
 	it("should update aria-expanded when menu is toggled", async () => {
 		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(".app-bar__menu-button");
+		const menuButton = element.shadowRoot.querySelector(
+			".app-bar__menu-button",
+		);
 
 		assert.strictEqual(
 			menuButton.getAttribute("aria-expanded"),
@@ -170,5 +213,3 @@ describe("App Bar Component", () => {
 		assert.ok(nav.hasAttribute("aria-label"), "Nav should have aria-label");
 	});
 });
-
-

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

@@ -1,3 +1 @@
 export * from "./app-bar.js";
-
-

package/src/components/avatar/avatar.js

@@ -4,15 +4,3 @@ export * from "./avatar.component.js";
 export default GrantCodesAvatar;
 
 customElements.define("grantcodes-avatar", GrantCodesAvatar);
-
-
-
-
-
-
-
-
-
-
-
-

package/src/components/avatar/avatar.stories.js

@@ -31,15 +31,3 @@ export const Initials = {
 		src: undefined,
 	},
 };
-
-
-
-
-
-
-
-
-
-
-
-