@grantcodes/ui 2.15.6 → 2.16.0

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

@@ -1,238 +1,191 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup, click } from "../../test-utils/index.js";
-import "./app-bar.js";
-
-describe("App Bar Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-app-bar");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	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",
-		);
-	});
-
-	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",
-		);
-	});
-
-	it("should render header element", async () => {
-		element = await fixture("grantcodes-app-bar");
-		const header = element.shadowRoot.querySelector("header");
-		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,
-		});
-
-		const appBar = element.shadowRoot.querySelector(".app-bar--sticky");
-		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,
-		});
-
-		const appBar = element.shadowRoot.querySelector(".app-bar--transparent");
-		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"]');
-		assert.ok(logoSlot, "Logo slot should exist");
-	});
-
-	it("should have nav slot", async () => {
-		element = await fixture("grantcodes-app-bar");
-		const navSlot = element.shadowRoot.querySelector('slot[name="nav"]');
-		assert.ok(navSlot, "Nav slot should exist");
-	});
-
-	it("should have actions slot", async () => {
-		element = await fixture("grantcodes-app-bar");
-		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",
-		);
-		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",
-		);
-	});
-
-	it("should not render mobile nav when closed", async () => {
-		element = await fixture("grantcodes-app-bar");
-		const mobileNav = element.shadowRoot.querySelector(".app-bar__mobile-nav");
-		assert.ok(!mobileNav, "Mobile nav should not be rendered when closed");
-	});
-
-	it("should render mobile nav when opened", async () => {
-		element = await fixture("grantcodes-app-bar");
-		element._mobileMenuOpen = true;
-
-		await element.updateComplete;
-
-		const mobileNav = element.shadowRoot.querySelector(".app-bar__nav--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",
-		);
-
-		assert.strictEqual(element._mobileMenuOpen, false, "Should start closed");
-
-		click(menuButton);
-		await element.updateComplete;
-
-		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",
-		);
-	});
-
-	it("should emit menu-toggle event when menu is toggled", async () => {
-		element = await fixture("grantcodes-app-bar");
-
-		let toggledState = null;
-		element.addEventListener("menu-toggle", (e) => {
-			toggledState = e.detail.open;
-		});
-
-		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",
-		);
-	});
-
-	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",
-		);
-	});
-
-	it("should have aria-expanded on menu button", async () => {
-		element = await fixture("grantcodes-app-bar");
-		const menuButton = element.shadowRoot.querySelector(
-			".app-bar__menu-button",
-		);
-		assert.ok(
-			menuButton.hasAttribute("aria-expanded"),
-			"Menu button should have aria-expanded",
-		);
-	});
-
-	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",
-		);
-
-		assert.strictEqual(
-			menuButton.getAttribute("aria-expanded"),
-			"false",
-			"Should be false initially",
-		);
-
-		click(menuButton);
-		await element.updateComplete;
-
-		assert.strictEqual(
-			menuButton.getAttribute("aria-expanded"),
-			"true",
-			"Should be true when open",
-		);
-	});
-
-	it("should have nav element with aria-label", async () => {
-		element = await fixture("grantcodes-app-bar");
-		const nav = element.shadowRoot.querySelector("nav");
-		assert.ok(nav, "Nav element should exist");
-		assert.ok(nav.hasAttribute("aria-label"), "Nav should have aria-label");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, click, fixture } from '../../test-utils/index.js';
+import './app-bar.js';
+
+describe('App Bar Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-app-bar');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  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');
+  });
+
+  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');
+  });
+
+  it('should render header element', async () => {
+    element = await fixture('grantcodes-app-bar');
+    const header = element.shadowRoot.querySelector('header');
+    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,
+    });
+
+    const appBar = element.shadowRoot.querySelector('.app-bar--sticky');
+    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,
+    });
+
+    const appBar = element.shadowRoot.querySelector('.app-bar--transparent');
+    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"]');
+    assert.ok(logoSlot, 'Logo slot should exist');
+  });
+
+  it('should have nav slot', async () => {
+    element = await fixture('grantcodes-app-bar');
+    const navSlot = element.shadowRoot.querySelector('slot[name="nav"]');
+    assert.ok(navSlot, 'Nav slot should exist');
+  });
+
+  it('should have actions slot', async () => {
+    element = await fixture('grantcodes-app-bar');
+    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');
+    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');
+  });
+
+  it('should not render mobile nav when closed', async () => {
+    element = await fixture('grantcodes-app-bar');
+    const mobileNav = element.shadowRoot.querySelector('.app-bar__mobile-nav');
+    assert.ok(!mobileNav, 'Mobile nav should not be rendered when closed');
+  });
+
+  it('should render mobile nav when opened', async () => {
+    element = await fixture('grantcodes-app-bar');
+    element._mobileMenuOpen = true;
+
+    await element.updateComplete;
+
+    const mobileNav = element.shadowRoot.querySelector('.app-bar__nav--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');
+
+    assert.strictEqual(element._mobileMenuOpen, false, 'Should start closed');
+
+    click(menuButton);
+    await element.updateComplete;
+
+    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');
+  });
+
+  it('should emit menu-toggle event when menu is toggled', async () => {
+    element = await fixture('grantcodes-app-bar');
+
+    let toggledState = null;
+    element.addEventListener('menu-toggle', (e) => {
+      toggledState = e.detail.open;
+    });
+
+    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');
+  });
+
+  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');
+  });
+
+  it('should have aria-expanded on menu button', async () => {
+    element = await fixture('grantcodes-app-bar');
+    const menuButton = element.shadowRoot.querySelector('.app-bar__menu-button');
+    assert.ok(menuButton.hasAttribute('aria-expanded'), 'Menu button should have aria-expanded');
+  });
+
+  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');
+
+    assert.strictEqual(
+      menuButton.getAttribute('aria-expanded'),
+      'false',
+      'Should be false initially',
+    );
+
+    click(menuButton);
+    await element.updateComplete;
+
+    assert.strictEqual(
+      menuButton.getAttribute('aria-expanded'),
+      'true',
+      'Should be true when open',
+    );
+  });
+
+  it('should have nav element with aria-label', async () => {
+    element = await fixture('grantcodes-app-bar');
+    const nav = element.shadowRoot.querySelector('nav');
+    assert.ok(nav, 'Nav element should exist');
+    assert.ok(nav.hasAttribute('aria-label'), 'Nav should have aria-label');
+  });
 });

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

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

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

@@ -1,17 +1,15 @@
-import { LitElement, html } from "lit";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import navLinkStyles from "./nav-link.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import focusRingStyles from '../../lib/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];
+  static styles = [focusRingStyles, navLinkStyles];
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<span class="nav-link">
 				<slot></slot>
 			</span>
 		`;
-	}
+  }
 }

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

@@ -1,27 +1,23 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: inline-flex;
+  display: inline-flex;
 }
 
 .nav-link {
-	display: inline-flex;
-	align-items: center;
-	border-radius: var(--g-border-radius-md);
-	background-color: transparent;
-	transition: background-color 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--g-border-radius-md);
+  background-color: transparent;
+  transition: background-color 0.15s ease;
 }
 
 .nav-link:hover {
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-content-default) 8%,
-		transparent
-	);
+  background-color: color-mix(in srgb, var(--g-color-content-default) 8%, transparent);
 }
 
 /*
@@ -37,26 +33,25 @@
 ::slotted(a:hover),
 ::slotted(a:active),
 ::slotted(a:focus-visible) {
-	display: inline-flex;
-	align-items: center;
-	color: var(--g-color-content-default) !important;
-	text-decoration: none !important;
-	opacity: 1 !important;
-	padding-block: var(--g-spacing-xs, 0.25rem);
-	padding-inline: var(--g-spacing-sm);
-	font: var(--g-typography-body-sm-font);
-	white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  color: var(--g-color-content-default) !important;
+  text-decoration: none !important;
+  opacity: 1 !important;
+  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-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);
+  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) {
-	.nav-link {
-		transition: none;
-	}
+  .nav-link {
+    transition: none;
+  }
 }

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

@@ -1,6 +1,6 @@
-import { GrantCodesNavLink } from "./nav-link.component.js";
+import { GrantCodesNavLink } from './nav-link.component.js';
 
-export * from "./nav-link.component.js";
+export * from './nav-link.component.js';
 export default GrantCodesNavLink;
 
-customElements.define("grantcodes-nav-link", GrantCodesNavLink);
+customElements.define('grantcodes-nav-link', GrantCodesNavLink);

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesNavLink } from "./nav-link.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesNavLink } from './nav-link.js';
 
 export const NavLink = createComponent({
-	tagName: "grantcodes-nav-link",
-	elementClass: GrantCodesNavLink,
-	react: React,
+  tagName: 'grantcodes-nav-link',
+  elementClass: GrantCodesNavLink,
+  react: React,
 });