@grantcodes/ui 2.0.0 → 2.1.0

package/src/components/avatar/avatar.styles.js

@@ -6,37 +6,37 @@ export const avatarStyles = css`
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .avatar {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 3rem;
-	height: 3rem;
-	border-radius: 50%;
-	overflow: hidden;
-	background-color: var(--g-color-brand-purple-200);
-	color: var(--g-color-brand-purple-900);
-	text-align: center;
-	font-size: 1.2rem;
-	font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--g-theme-spacing-2xl);
+  block-size: var(--g-theme-spacing-2xl);
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--g-color-brand-purple-200);
+  color: var(--g-color-brand-purple-900);
+  text-align: center;
+  font-size: var(--g-theme-typography-title-sm-font-size);
+  font-weight: var(--g-theme-typography-label-default-font-weight);
 }
 
 .avatar__image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	object-position: center;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
 .avatar__fallback {
-	line-height: 1;
+  line-height: 1;
 }
 
 `;

package/src/components/avatar/avatar.test.js

@@ -21,7 +21,8 @@ describe("Avatar Component", () => {
 			name: "John Doe",
 		});
 
-		const initialsElement = element.shadowRoot.querySelector(".avatar__initials");
+		const initialsElement =
+			element.shadowRoot.querySelector(".avatar__initials");
 		assert.ok(initialsElement, "Initials element should exist");
 		assert.strictEqual(
 			initialsElement.textContent,
@@ -35,7 +36,8 @@ describe("Avatar Component", () => {
 			name: "John",
 		});
 
-		const initialsElement = element.shadowRoot.querySelector(".avatar__initials");
+		const initialsElement =
+			element.shadowRoot.querySelector(".avatar__initials");
 		assert.strictEqual(
 			initialsElement.textContent,
 			"J",
@@ -81,5 +83,3 @@ describe("Avatar Component", () => {
 		}
 	});
 });
-
-

package/src/components/avatar/index.js

@@ -1,13 +1 @@
-export * from "./avatar";
-
-
-
-
-
-
-
-
-
-
-
-
+export * from "./avatar.js";

package/src/components/badge/badge.js

@@ -4,5 +4,3 @@ export * from "./badge.component.js";
 export default GrantCodesBadge;
 
 customElements.define("grantcodes-badge", GrantCodesBadge);
-
-

package/src/components/badge/badge.styles.js

@@ -1,94 +1,91 @@
 import { css } from "lit";
 
 export const badgeStyles = css`
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-	:host {
-		display: inline-block;
-	}
+  :host {
+    display: inline-block;
+  }
 
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding-inline: 0.625em;
-		padding-block: 0.375em;
-		border-radius: var(--g-theme-border-radius-md, 0.375rem);
-		font-size: var(--g-typography-font-size-14);
-		font-weight: 500;
-		line-height: 1;
-		white-space: nowrap;
-		border-width: 1px;
-		border-style: solid;
-		transition: all 0.2s ease;
-	}
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--g-theme-spacing-xs);
+    padding-inline: 0.625em;
+    padding-block: 0.375em;
+    border-radius: var(--g-theme-border-radius-md, 0.375rem);
+    font: var(--g-typography-font-label-sm);
+    line-height: 1;
+    white-space: nowrap;
+    border-width: 1px;
+    border-style: solid;
+    transition: all 0.2s ease;
+  }
 
-	
+  /* Soft style variants */
+  .badge--primary {
+    background-color: color-mix(
+      in srgb,
+      var(--g-color-brand-purple-500) 15%,
+      transparent
+    );
+    color: var(--g-color-brand-purple-700);
+    border-color: transparent;
+  }
 
-	/* Soft style variants */
-	.badge--primary {
-		background-color: color-mix(
-			in srgb,
-			var(--g-color-brand-purple-500) 15%,
-			transparent
-		);
-		color: var(--g-color-brand-purple-700);
-		border-color: transparent;
-	}
+  .badge--success {
+    background-color: color-mix(
+      in srgb,
+      var(--g-color-utility-green-500) 15%,
+      transparent
+    );
+    color: var(--g-color-utility-green-700);
+    border-color: transparent;
+  }
 
-	.badge--success {
-		background-color: color-mix(
-			in srgb,
-			var(--g-color-utility-green-500) 15%,
-			transparent
-		);
-		color: var(--g-color-utility-green-700);
-		border-color: transparent;
-	}
+  .badge--warning {
+    background-color: color-mix(
+      in srgb,
+      var(--g-color-utility-yellow-500) 15%,
+      transparent
+    );
+    color: var(--g-color-utility-yellow-700);
+    border-color: transparent;
+  }
 
-	.badge--warning {
-		background-color: color-mix(
-			in srgb,
-			var(--g-color-utility-yellow-500) 15%,
-			transparent
-		);
-		color: var(--g-color-utility-yellow-700);
-		border-color: transparent;
-	}
+  .badge--error {
+    background-color: color-mix(
+      in srgb,
+      var(--g-color-utility-red-500) 15%,
+      transparent
+    );
+    color: var(--g-color-utility-red-700);
+    border-color: transparent;
+  }
 
-	.badge--error {
-		background-color: color-mix(
-			in srgb,
-			var(--g-color-utility-red-500) 15%,
-			transparent
-		);
-		color: var(--g-color-utility-red-700);
-		border-color: transparent;
-	}
+  .badge--info {
+    background-color: color-mix(
+      in srgb,
+      var(--g-color-utility-blue-500) 15%,
+      transparent
+    );
+    color: var(--g-color-utility-blue-700);
+    border-color: transparent;
+  }
 
-	.badge--info {
-		background-color: color-mix(
-			in srgb,
-			var(--g-color-utility-blue-500) 15%,
-			transparent
-		);
-		color: var(--g-color-utility-blue-700);
-		border-color: transparent;
-	}
+  .badge--neutral {
+    background-color: var(--g-color-brand-purple-100);
+    color: var(--g-color-brand-purple-800);
+    border-color: transparent;
+  }
 
-	.badge--neutral {
-		background-color: var(--g-color-brand-purple-100);
-		color: var(--g-color-brand-purple-800);
-		border-color: transparent;
-	}
-
-	.badge__content {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25em;
-	}
+  .badge__content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+  }
 `;

package/src/components/badge/badge.test.js

@@ -18,7 +18,11 @@ describe("Badge Component", () => {
 
 	it("should have neutral variant by default", async () => {
 		element = await fixture("grantcodes-badge");
-		assert.strictEqual(element.variant, "neutral", "Default variant should be neutral");
+		assert.strictEqual(
+			element.variant,
+			"neutral",
+			"Default variant should be neutral",
+		);
 	});
 
 	// it("should have outline style by default", async () => {
@@ -41,11 +45,22 @@ describe("Badge Component", () => {
 
 		await element.updateComplete;
 
-		assert.strictEqual(element.textContent, "Badge Text", "Slotted content should be rendered");
+		assert.strictEqual(
+			element.textContent,
+			"Badge Text",
+			"Slotted content should be rendered",
+		);
 	});
 
 	it("should support all variant types", async () => {
-		const variants = ["primary", "success", "warning", "error", "info", "neutral"];
+		const variants = [
+			"primary",
+			"success",
+			"warning",
+			"error",
+			"info",
+			"neutral",
+		];
 
 		for (const variant of variants) {
 			element = await fixture("grantcodes-badge", { variant });
@@ -66,5 +81,3 @@ describe("Badge Component", () => {
 	// 	}
 	// });
 });
-
-

package/src/components/badge/index.js

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

package/src/components/breadcrumb/breadcrumb.component.js

@@ -24,7 +24,7 @@ export class GrantCodesBreadcrumb extends LitElement {
 		this.style.setProperty("--component-breadcrumb-separator", `'${value}'`);
 
 		// Track slot content changes to update separators
-		const slot = this.renderRoot.querySelector('slot:not([name])');
+		const slot = this.renderRoot.querySelector("slot:not([name])");
 		if (slot) {
 			slot.addEventListener("slotchange", () => this._updateSeparators());
 			this._updateSeparators();
@@ -45,11 +45,11 @@ export class GrantCodesBreadcrumb extends LitElement {
 	}
 
 	_updateSeparators() {
-		const slot = this.renderRoot.querySelector('slot:not([name])');
+		const slot = this.renderRoot.querySelector("slot:not([name])");
 		if (!slot) return;
-		const items = slot.assignedElements({ flatten: true }).filter((el) =>
-			el.tagName === "GRANTCODES-BREADCRUMB-ITEM",
-		);
+		const items = slot
+			.assignedElements({ flatten: true })
+			.filter((el) => el.tagName === "GRANTCODES-BREADCRUMB-ITEM");
 		items.forEach((el, index) => {
 			if (index < items.length - 1) {
 				el.setAttribute("data-has-separator", "");
@@ -95,9 +95,10 @@ export class GrantCodesBreadcrumbItem extends LitElement {
 	}
 
 	render() {
-		const content = this.href && !this.current
-			? html`<a href="${this.href}" class="breadcrumb__link"><slot></slot></a>`
-			: html`<span class="breadcrumb__text"><slot></slot></span>`;
+		const content =
+			this.href && !this.current
+				? html`<a href="${this.href}" class="breadcrumb__link focus-ring"><slot></slot></a>`
+				: html`<span class="breadcrumb__text"><slot></slot></span>`;
 
 		return html`
 			<li class="breadcrumb__item" ?data-current=${this.current}>
@@ -106,5 +107,3 @@ export class GrantCodesBreadcrumbItem extends LitElement {
 		`;
 	}
 }
-
-

package/src/components/breadcrumb/breadcrumb.js

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

package/src/components/breadcrumb/breadcrumb.styles.js

@@ -1,96 +1,92 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const breadcrumbStyles = css`
-	*,
+  ${focusRingStyles}
+
+  *,
 	*::before,
 	*::after {
-		box-sizing: border-box;
-	}
-
-	:host {
-		display: block;
-	}
-
-	.breadcrumb {
-		display: block;
-	}
-
-	.breadcrumb__list {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.5rem;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-
-	.breadcrumb__item {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-	font-size: var(--g-typography-font-size-14);
-	color: var(--g-color-brand-purple-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-brand-purple-400);
-		font-weight: 300;
-		user-select: none;
-		pointer-events: none;
-	}
-
-	/* Current page styling */
-	.breadcrumb__item[data-current] {
-		font-weight: 600;
-		color: var(--color-base-primary-900);
-	}
-
-	.breadcrumb__item[data-current]::after {
-		display: none;
-	}
-
-	.breadcrumb__link {
-		color: var(--g-color-brand-purple-600);
-		text-decoration: none;
-		transition: color 0.2s ease;
-		border-radius: var(--g-theme-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-brand-purple-700);
-		text-decoration: underline;
-	}
-
-	.breadcrumb__link:focus-visible {
-		outline: 2px solid var(--component-focus-ring-color, rgba(106, 91, 197, 0.4));
-		outline-offset: 2px;
-	}
-
-	.breadcrumb__text {
-		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:nth-last-child(2)::before {
-			content: "...";
-			display: inline-block;
-			margin-inline-end: 0.5rem;
-			color: var(--g-color-brand-purple-400);
-		}
-	}
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .breadcrumb {
+    display: block;
+  }
+
+  .breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--g-theme-spacing-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .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-color-brand-purple-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-brand-purple-400);
+    font-weight: var(--g-typography-font-weight-400);
+    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);
+  }
+
+  .breadcrumb__item[data-current]::after {
+    display: none;
+  }
+
+  .breadcrumb__link {
+    color: var(--g-color-brand-purple-600);
+    text-decoration: none;
+    transition: color 0.2s ease;
+    border-radius: var(--g-theme-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-brand-purple-700);
+    text-decoration: underline;
+  }
+
+  .breadcrumb__text {
+    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:nth-last-child(2)::before {
+      content: "...";
+      display: inline-block;
+      margin-inline-end: 0.5rem;
+      color: var(--g-color-brand-purple-400);
+    }
+  }
 `;
-
-

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

@@ -69,7 +69,11 @@ describe("Breadcrumb Item Component", () => {
 
 		const link = element.shadowRoot.querySelector(".breadcrumb__link");
 		assert.ok(link, "Link should exist");
-		assert.strictEqual(link.getAttribute("href"), "/test", "Href should be set");
+		assert.strictEqual(
+			link.getAttribute("href"),
+			"/test",
+			"Href should be set",
+		);
 	});
 
 	it("should render as span when no href", async () => {
@@ -127,12 +131,20 @@ describe("Breadcrumb Item Component", () => {
 
 		await element.updateComplete;
 
-		assert.strictEqual(element.textContent, "Home", "Slotted content should be rendered");
+		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");
+		assert.strictEqual(
+			element.current,
+			false,
+			"Should not be current by default",
+		);
 	});
 
 	it("should have empty href by default", async () => {
@@ -140,5 +152,3 @@ describe("Breadcrumb Item Component", () => {
 		assert.strictEqual(element.href, "", "Href should be empty by default");
 	});
 });
-
-

package/src/components/breadcrumb/index.js

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

package/src/components/button/button.component.js

@@ -40,7 +40,7 @@ export class GrantCodesButton extends LitElement {
 		if (isLink) {
 			return html`
 				<${tag}
-					class="button"
+					class="button focus-ring"
 					href=${this.href}
 					?disabled=${this.disabled}
 				>
@@ -51,7 +51,7 @@ export class GrantCodesButton extends LitElement {
 
 		return html`
 			<${tag}
-				class="button"
+				class="button focus-ring"
 				type=${this.type}
 				name=${this.name ?? ""}
 				value=${this.value ?? ""}