@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/breadcrumb/breadcrumb.css

@@ -1,84 +1,82 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .breadcrumb {
-	display: block;
+  display: block;
 }
 
 .breadcrumb__list {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	margin: 0;
-	padding: 0;
-	list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--g-spacing-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .breadcrumb__item {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	font-size: var(--g-typography-body-sm-font-size);
-	color: var(--g-color-primary-700);
+  display: inline-flex;
+  align-items: center;
+  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-color-primary-400);
-	font-weight: var(--g-typography-body-lg-font-weight);
-	user-select: none;
-	pointer-events: none;
+  content: var(--component-breadcrumb-separator, "/");
+  display: inline-block;
+  color: var(--g-color-content-subtle);
+  font-weight: var(--g-typography-body-lg-font-weight);
+  user-select: none;
+  pointer-events: none;
 }
 
 /* Current page styling */
 .breadcrumb__item[data-current] {
-	color: var(--color-base-primary-900);
+  color: var(--g-color-content-default);
 }
 
 .breadcrumb__item[data-current]::after {
-	display: none;
+  display: none;
 }
 
 .breadcrumb__link {
-	color: var(--g-color-primary-600);
-	text-decoration: none;
-	transition: color 0.2s ease;
-	border-radius: var(--g-border-radius-md, 0.25rem);
-	padding-inline: 0.25em;
-	padding-block: 0.125em;
-	margin-inline: -0.25em;
-	margin-block: -0.125em;
+  text-decoration: none;
+  border-radius: var(--g-border-radius-md, 0.25rem);
+  padding-inline: 0.25em;
+  padding-block: 0.125em;
+  margin-inline: -0.25em;
+  margin-block: -0.125em;
 }
 
-.breadcrumb__link:hover {
-	color: var(--g-color-primary-700);
-	text-decoration: underline;
+.breadcrumb__link:hover,
+.breadcrumb__link:focus-visible {
+  text-decoration: underline wavy;
 }
 
 .breadcrumb__text {
-	display: inline-block;
+  display: inline-block;
 }
 
 /* Responsive: Show only last few items on small screens */
 @media (max-width: 640px) {
-	.breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
-		display: none;
-	}
+  .breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
+    display: none;
+  }
 
-	.breadcrumb__item:nth-last-child(2)::before {
-		content: "...";
-		display: inline-block;
-		margin-inline-end: 0.5rem;
-		color: var(--g-color-primary-400);
-	}
+  .breadcrumb__item:nth-last-child(2)::before {
+    content: "...";
+    display: inline-block;
+    margin-inline-end: 0.5rem;
+    color: var(--g-color-content-subtle);
+  }
 }

package/src/components/breadcrumb/breadcrumb.js

@@ -1,14 +1,11 @@
-import {
-	GrantCodesBreadcrumb,
-	GrantCodesBreadcrumbItem,
-} from "./breadcrumb.component.js";
+import { GrantCodesBreadcrumb, GrantCodesBreadcrumbItem } from './breadcrumb.component.js';
 
-export * from "./breadcrumb.component.js";
+export * from './breadcrumb.component.js';
 export default GrantCodesBreadcrumb;
 
-if (!customElements.get("grantcodes-breadcrumb")) {
-	customElements.define("grantcodes-breadcrumb", GrantCodesBreadcrumb);
+if (!customElements.get('grantcodes-breadcrumb')) {
+  customElements.define('grantcodes-breadcrumb', GrantCodesBreadcrumb);
 }
-if (!customElements.get("grantcodes-breadcrumb-item")) {
-	customElements.define("grantcodes-breadcrumb-item", GrantCodesBreadcrumbItem);
+if (!customElements.get('grantcodes-breadcrumb-item')) {
+  customElements.define('grantcodes-breadcrumb-item', GrantCodesBreadcrumbItem);
 }

package/src/components/breadcrumb/breadcrumb.react.js

@@ -1,18 +1,15 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import {
-	GrantCodesBreadcrumb,
-	GrantCodesBreadcrumbItem,
-} from "./breadcrumb.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesBreadcrumb, GrantCodesBreadcrumbItem } from './breadcrumb.js';
 
 export const Breadcrumb = createComponent({
-	tagName: "grantcodes-breadcrumb",
-	elementClass: GrantCodesBreadcrumb,
-	react: React,
+  tagName: 'grantcodes-breadcrumb',
+  elementClass: GrantCodesBreadcrumb,
+  react: React,
 });
 
 export const BreadcrumbItem = createComponent({
-	tagName: "grantcodes-breadcrumb-item",
-	elementClass: GrantCodesBreadcrumbItem,
-	react: React,
+  tagName: 'grantcodes-breadcrumb-item',
+  elementClass: GrantCodesBreadcrumbItem,
+  react: React,
 });

package/src/components/breadcrumb/breadcrumb.stories.js

@@ -1,9 +1,9 @@
-import { html } from "lit";
-import "./breadcrumb.js";
+import { html } from 'lit';
+import './breadcrumb.js';
 
 const meta = {
-	title: "Components/Breadcrumb",
-	component: "grantcodes-breadcrumb",
+  title: 'Components/Breadcrumb',
+  component: 'grantcodes-breadcrumb',
 };
 
 export default meta;
@@ -12,7 +12,7 @@ export default meta;
  * Basic breadcrumb navigation showing the current page hierarchy
  */
 export const Breadcrumb = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-breadcrumb>
 			<grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
 			<grantcodes-breadcrumb-item href="/products">Products</grantcodes-breadcrumb-item>

package/src/components/breadcrumb/breadcrumb.test.js

@@ -1,154 +1,142 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./breadcrumb.js";
-
-describe("Breadcrumb Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render breadcrumb container", async () => {
-		element = await fixture("grantcodes-breadcrumb");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should render nav element with aria-label", async () => {
-		element = await fixture("grantcodes-breadcrumb");
-		const nav = element.shadowRoot.querySelector("nav");
-		assert.ok(nav, "Nav element should exist");
-		assert.strictEqual(
-			nav.getAttribute("aria-label"),
-			"Breadcrumb",
-			"Should have breadcrumb aria-label",
-		);
-	});
-
-	it("should render ordered list", async () => {
-		element = await fixture("grantcodes-breadcrumb");
-		const list = element.shadowRoot.querySelector("ol");
-		assert.ok(list, "Ordered list should exist");
-		assert.ok(
-			list.classList.contains("breadcrumb__list"),
-			"Should have breadcrumb__list class",
-		);
-	});
-
-	it("should have default separator", async () => {
-		element = await fixture("grantcodes-breadcrumb");
-		assert.strictEqual(element.separator, "/", "Default separator should be /");
-	});
-
-	it("should have slot for breadcrumb items", async () => {
-		element = await fixture("grantcodes-breadcrumb");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist for breadcrumb items");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import linkStyles from '../../css/elements/a.css' with { type: 'css' };
+import { cleanup, fixture } from '../../test-utils/index.js';
+import { GrantCodesBreadcrumbItem } from './breadcrumb.component.js';
+import './breadcrumb.js';
+
+describe('Breadcrumb Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render breadcrumb container', async () => {
+    element = await fixture('grantcodes-breadcrumb');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should render nav element with aria-label', async () => {
+    element = await fixture('grantcodes-breadcrumb');
+    const nav = element.shadowRoot.querySelector('nav');
+    assert.ok(nav, 'Nav element should exist');
+    assert.strictEqual(
+      nav.getAttribute('aria-label'),
+      'Breadcrumb',
+      'Should have breadcrumb aria-label',
+    );
+  });
+
+  it('should render ordered list', async () => {
+    element = await fixture('grantcodes-breadcrumb');
+    const list = element.shadowRoot.querySelector('ol');
+    assert.ok(list, 'Ordered list should exist');
+    assert.ok(list.classList.contains('breadcrumb__list'), 'Should have breadcrumb__list class');
+  });
+
+  it('should have default separator', async () => {
+    element = await fixture('grantcodes-breadcrumb');
+    assert.strictEqual(element.separator, '/', 'Default separator should be /');
+  });
+
+  it('should have slot for breadcrumb items', async () => {
+    element = await fixture('grantcodes-breadcrumb');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist for breadcrumb items');
+  });
 });
 
-describe("Breadcrumb Item Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render breadcrumb item", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should render as link when href is provided", async () => {
-		element = await fixture("grantcodes-breadcrumb-item", {
-			href: "/test",
-		});
-
-		const link = element.shadowRoot.querySelector(".breadcrumb__link");
-		assert.ok(link, "Link should exist");
-		assert.strictEqual(
-			link.getAttribute("href"),
-			"/test",
-			"Href should be set",
-		);
-	});
-
-	it("should render as span when no href", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-
-		const span = element.shadowRoot.querySelector(".breadcrumb__text");
-		assert.ok(span, "Span should exist");
-	});
-
-	it("should render as span when current", async () => {
-		element = await fixture("grantcodes-breadcrumb-item", {
-			href: "/test",
-			current: true,
-		});
-
-		const span = element.shadowRoot.querySelector(".breadcrumb__text");
-		const link = element.shadowRoot.querySelector(".breadcrumb__link");
-		assert.ok(span, "Span should exist for current page");
-		assert.ok(!link, "Link should not exist for current page");
-	});
-
-	it("should have current attribute when current is true", async () => {
-		element = await fixture("grantcodes-breadcrumb-item", {
-			current: true,
-		});
-
-		const item = element.shadowRoot.querySelector(".breadcrumb__item");
-		assert.ok(
-			item.hasAttribute("data-current"),
-			"Should have data-current attribute",
-		);
-	});
-
-	it("should not have current attribute when current is false", async () => {
-		element = await fixture("grantcodes-breadcrumb-item", {
-			current: false,
-		});
-
-		const item = element.shadowRoot.querySelector(".breadcrumb__item");
-		assert.ok(
-			!item.hasAttribute("data-current"),
-			"Should not have data-current attribute",
-		);
-	});
-
-	it("should render list item", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-		const item = element.shadowRoot.querySelector("li");
-		assert.ok(item, "List item should exist");
-	});
-
-	it("should render slotted content", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-		element.textContent = "Home";
-
-		await element.updateComplete;
-
-		assert.strictEqual(
-			element.textContent,
-			"Home",
-			"Slotted content should be rendered",
-		);
-	});
-
-	it("should not be current by default", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-		assert.strictEqual(
-			element.current,
-			false,
-			"Should not be current by default",
-		);
-	});
-
-	it("should have empty href by default", async () => {
-		element = await fixture("grantcodes-breadcrumb-item");
-		assert.strictEqual(element.href, "", "Href should be empty by default");
-	});
+describe('Breadcrumb Item Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render breadcrumb item', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should render as link when href is provided', async () => {
+    element = await fixture('grantcodes-breadcrumb-item', {
+      href: '/test',
+    });
+
+    const link = element.shadowRoot.querySelector('.breadcrumb__link');
+    assert.ok(link, 'Link should exist');
+    assert.strictEqual(link.getAttribute('href'), '/test', 'Href should be set');
+  });
+
+  it('should render as span when no href', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+
+    const span = element.shadowRoot.querySelector('.breadcrumb__text');
+    assert.ok(span, 'Span should exist');
+  });
+
+  it('should render as span when current', async () => {
+    element = await fixture('grantcodes-breadcrumb-item', {
+      href: '/test',
+      current: true,
+    });
+
+    const span = element.shadowRoot.querySelector('.breadcrumb__text');
+    const link = element.shadowRoot.querySelector('.breadcrumb__link');
+    assert.ok(span, 'Span should exist for current page');
+    assert.ok(!link, 'Link should not exist for current page');
+  });
+
+  it('should have current attribute when current is true', async () => {
+    element = await fixture('grantcodes-breadcrumb-item', {
+      current: true,
+    });
+
+    const item = element.shadowRoot.querySelector('.breadcrumb__item');
+    assert.ok(item.hasAttribute('data-current'), 'Should have data-current attribute');
+  });
+
+  it('should not have current attribute when current is false', async () => {
+    element = await fixture('grantcodes-breadcrumb-item', {
+      current: false,
+    });
+
+    const item = element.shadowRoot.querySelector('.breadcrumb__item');
+    assert.ok(!item.hasAttribute('data-current'), 'Should not have data-current attribute');
+  });
+
+  it('should render list item', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+    const item = element.shadowRoot.querySelector('li');
+    assert.ok(item, 'List item should exist');
+  });
+
+  it('should render slotted content', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+    element.textContent = 'Home';
+
+    await element.updateComplete;
+
+    assert.strictEqual(element.textContent, 'Home', 'Slotted content should be rendered');
+  });
+
+  it('should not be current by default', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+    assert.strictEqual(element.current, false, 'Should not be current by default');
+  });
+
+  it('should have empty href by default', async () => {
+    element = await fixture('grantcodes-breadcrumb-item');
+    assert.strictEqual(element.href, '', 'Href should be empty by default');
+  });
+
+  it('adopts the shared default link styles', () => {
+    assert.ok(
+      GrantCodesBreadcrumbItem.styles.includes(linkStyles),
+      'Breadcrumb item should adopt css/elements/a.css',
+    );
+  });
 });

package/src/components/breadcrumb/index.js

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