@grantcodes/ui 2.0.2 → 2.1.1

package/src/components/toast/toast.styles.js

@@ -1,207 +1,205 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const toastStyles = css`
-	*,
+  ${focusRingStyles}
+
+  *,
 	*::before,
 	*::after {
-		box-sizing: border-box;
-	}
-
-	:host {
-		display: block;
-		pointer-events: none;
-	}
-
-	/* Toast Container */
-	.toast-container {
-		position: fixed;
-		z-index: 9999;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		padding: 1rem;
-		pointer-events: none;
-		max-inline-size: 100vw;
-		max-block-size: 100vh;
-		overflow: hidden;
-	}
-
-	/* Container positions */
-	.toast-container--top-left {
-		inset-block-start: 0;
-		inset-inline-start: 0;
-	}
-
-	.toast-container--top-center {
-		inset-block-start: 0;
-		inset-inline-start: 50%;
-		transform: translateX(-50%);
-	}
-
-	.toast-container--top-right {
-		inset-block-start: 0;
-		inset-inline-end: 0;
-	}
-
-	.toast-container--bottom-left {
-		inset-block-end: 0;
-		inset-inline-start: 0;
-	}
-
-	.toast-container--bottom-center {
-		inset-block-end: 0;
-		inset-inline-start: 50%;
-		transform: translateX(-50%);
-	}
-
-	.toast-container--bottom-right {
-		inset-block-end: 0;
-		inset-inline-end: 0;
-	}
-
-	/* Toast */
-	.toast {
-		display: flex;
-		align-items: flex-start;
-		gap: 0.75rem;
-		min-inline-size: 300px;
-		max-inline-size: 500px;
-		padding-block: 1rem;
-		padding-inline: 1rem;
-		border-radius: var(--g-theme-border-radius-md);
-		background-color: var(--g-theme-color-background-default);
-		border-inline-start-width: 4px;
-		border-inline-start-style: solid;
-		pointer-events: auto;
-		opacity: 0;
-		transform: translateY(-1rem);
-		transition:
-			opacity 0.3s ease,
-			transform 0.3s ease;
-	}
-
-	.toast--visible {
-		opacity: 1;
-		transform: translateY(0);
-	}
-
-	/* Variant colors */
-	.toast--info {
-		border-inline-start-color: var(--g-theme-color-background-utility-info);
-	}
-
-	.toast--success {
-		border-inline-start-color: var(--g-theme-color-background-utility-success);
-	}
-
-	.toast--warning {
-		border-inline-start-color: var(--g-theme-color-background-utility-warning);
-	}
-
-	.toast--error {
-		border-inline-start-color: var(--g-theme-color-background-utility-error);
-	}
-
-	/* Toast icon */
-	.toast__icon {
-		flex-shrink: 0;
-		inline-size: 1.5rem;
-		block-size: 1.5rem;
-	}
-
-	.toast--info .toast__icon {
-		color: var(--g-theme-color-background-utility-info);
-	}
-
-	.toast--success .toast__icon {
-		color: var(--g-theme-color-background-utility-success);
-	}
-
-	.toast--warning .toast__icon {
-		color: var(--g-theme-color-background-utility-warning);
-	}
-
-	.toast--error .toast__icon {
-		color: var(--g-theme-color-background-utility-error);
-	}
-
-	/* Toast content */
-	.toast__content {
-		flex: 1;
-		min-inline-size: 0;
-	}
-
-	.toast__title {
-		font-weight: 600;
-		font-size: var(--g-typography-font-size-16);
-		margin-block-end: 0.25rem;
-		color: var(--g-theme-color-content-default);
-	}
-
-	.toast__message {
-		font-size: var(--g-typography-font-size-14);
-		color: var(--g-theme-color-content-secondary);
-		line-height: 1.5;
-	}
-
-	/* Close button */
-	.toast__close {
-		all: unset;
-		flex-shrink: 0;
-		inline-size: 1.5rem;
-		block-size: 1.5rem;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: var(--g-theme-border-radius-md);
-		color: var(--g-theme-color-content-secondary);
-		cursor: pointer;
-		transition: all 0.2s ease;
-		margin-inline-start: 0.5rem;
-	}
-
-	.toast__close:hover {
-		color: var(--g-theme-color-content-default);
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.toast__close:focus-visible {
-		outline: 2px solid var(--component-focus-ring-color);
-		outline-offset: 2px;
-	}
-
-	/* Bottom position toasts slide up instead of down */
-	.toast--bottom-left,
-	.toast--bottom-center,
-	.toast--bottom-right {
-		transform: translateY(1rem);
-	}
-
-	.toast--bottom-left.toast--visible,
-	.toast--bottom-center.toast--visible,
-	.toast--bottom-right.toast--visible {
-		transform: translateY(0);
-	}
-
-	/* Responsive */
-	@media (max-width: 640px) {
-		.toast-container {
-			inset-inline: 0;
-			transform: none;
-		}
-
-		.toast {
-			min-inline-size: auto;
-			inline-size: 100%;
-		}
-	}
-
-	/* View transitions */
-	@media (prefers-reduced-motion: no-preference) {
-		@supports (view-transition-name: auto) {
-			.toast {
-				view-transition-name: toast;
-			}
-		}
-	}
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    pointer-events: none;
+  }
+
+  /* Toast Container */
+  .toast-container {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+    padding: var(--g-theme-spacing-md);
+    pointer-events: none;
+    max-inline-size: 100vw;
+    max-block-size: 100vh;
+    overflow: hidden;
+  }
+
+  /* Container positions */
+  .toast-container--top-left {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-container--top-center {
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .toast-container--top-right {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .toast-container--bottom-left {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-container--bottom-center {
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .toast-container--bottom-right {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+
+  /* Toast */
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--g-theme-spacing-sm);
+    min-inline-size: 300px;
+    max-inline-size: 500px;
+    padding-block: var(--g-theme-spacing-md);
+    padding-inline: var(--g-theme-spacing-md);
+    border-radius: var(--g-theme-border-radius-md);
+    background-color: var(--g-theme-color-background-default);
+    border-inline-start-width: 4px;
+    border-inline-start-style: solid;
+    pointer-events: auto;
+    opacity: 0;
+    transform: translateY(-1rem);
+    transition:
+      opacity 0.3s ease,
+      transform 0.3s ease;
+  }
+
+  .toast--visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Variant colors */
+  .toast--info {
+    border-inline-start-color: var(--g-theme-color-background-utility-info);
+  }
+
+  .toast--success {
+    border-inline-start-color: var(--g-theme-color-background-utility-success);
+  }
+
+  .toast--warning {
+    border-inline-start-color: var(--g-theme-color-background-utility-warning);
+  }
+
+  .toast--error {
+    border-inline-start-color: var(--g-theme-color-background-utility-error);
+  }
+
+  /* Toast icon */
+  .toast__icon {
+    flex-shrink: 0;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  .toast--info .toast__icon {
+    color: var(--g-theme-color-background-utility-info);
+  }
+
+  .toast--success .toast__icon {
+    color: var(--g-theme-color-background-utility-success);
+  }
+
+  .toast--warning .toast__icon {
+    color: var(--g-theme-color-background-utility-warning);
+  }
+
+  .toast--error .toast__icon {
+    color: var(--g-theme-color-background-utility-error);
+  }
+
+  /* Toast content */
+  .toast__content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .toast__title {
+    font-weight: var(--g-typography-font-weight-600);
+    font-size: var(--g-typography-font-size-16);
+    margin-block-end: 0.25rem;
+    color: var(--g-theme-color-content-default);
+  }
+
+  .toast__message {
+    font-size: var(--g-typography-font-size-14);
+    color: var(--g-theme-color-content-secondary);
+    line-height: 1.5;
+  }
+
+  /* Close button */
+  .toast__close {
+    all: unset;
+    flex-shrink: 0;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--g-theme-border-radius-md);
+    color: var(--g-theme-color-content-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-inline-start: 0.5rem;
+  }
+
+  .toast__close:hover {
+    color: var(--g-theme-color-content-default);
+    background-color: var(--g-theme-color-background-subtle-hover);
+  }
+
+  /* Bottom position toasts slide up instead of down */
+  .toast--bottom-left,
+  .toast--bottom-center,
+  .toast--bottom-right {
+    transform: translateY(1rem);
+  }
+
+  .toast--bottom-left.toast--visible,
+  .toast--bottom-center.toast--visible,
+  .toast--bottom-right.toast--visible {
+    transform: translateY(0);
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .toast-container {
+      inset-inline: 0;
+      transform: none;
+    }
+
+    .toast {
+      min-inline-size: auto;
+      inline-size: 100%;
+    }
+  }
+
+  /* View transitions */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (view-transition-name: auto) {
+      .toast {
+        view-transition-name: toast;
+      }
+    }
+  }
 `;

package/src/components/toast/toast.test.js

@@ -18,22 +18,38 @@ describe("Toast Component", () => {
 
 	it("should have info variant by default", async () => {
 		element = await fixture("grantcodes-toast");
-		assert.strictEqual(element.variant, "info", "Default variant should be info");
+		assert.strictEqual(
+			element.variant,
+			"info",
+			"Default variant should be info",
+		);
 	});
 
 	it("should have 5000ms duration by default", async () => {
 		element = await fixture("grantcodes-toast");
-		assert.strictEqual(element.duration, 5000, "Default duration should be 5000ms");
+		assert.strictEqual(
+			element.duration,
+			5000,
+			"Default duration should be 5000ms",
+		);
 	});
 
 	it("should have top-right position by default", async () => {
 		element = await fixture("grantcodes-toast");
-		assert.strictEqual(element.position, "top-right", "Default position should be top-right");
+		assert.strictEqual(
+			element.position,
+			"top-right",
+			"Default position should be top-right",
+		);
 	});
 
 	it("should be dismissible by default", async () => {
 		element = await fixture("grantcodes-toast");
-		assert.strictEqual(element.dismissible, true, "Should be dismissible by default");
+		assert.strictEqual(
+			element.dismissible,
+			true,
+			"Should be dismissible by default",
+		);
 	});
 
 	it("should render toast with correct variant class", async () => {
@@ -52,7 +68,11 @@ describe("Toast Component", () => {
 
 		const title = element.shadowRoot.querySelector(".toast__title");
 		assert.ok(title, "Title element should exist");
-		assert.strictEqual(title.textContent, "Test Title", "Title text should match");
+		assert.strictEqual(
+			title.textContent,
+			"Test Title",
+			"Title text should match",
+		);
 	});
 
 	it("should not render title when not provided", async () => {
@@ -84,7 +104,11 @@ describe("Toast Component", () => {
 		element = await fixture("grantcodes-toast");
 
 		const toast = element.shadowRoot.querySelector(".toast");
-		assert.strictEqual(toast.getAttribute("role"), "status", "Should have status role");
+		assert.strictEqual(
+			toast.getAttribute("role"),
+			"status",
+			"Should have status role",
+		);
 	});
 
 	it("should have aria-live=polite", async () => {
@@ -154,7 +178,11 @@ describe("Toast Container Component", () => {
 
 	it("should have top-right position by default", async () => {
 		element = await fixture("grantcodes-toast-container");
-		assert.strictEqual(element.position, "top-right", "Default position should be top-right");
+		assert.strictEqual(
+			element.position,
+			"top-right",
+			"Default position should be top-right",
+		);
 	});
 
 	it("should render container with correct position class", async () => {
@@ -162,7 +190,9 @@ describe("Toast Container Component", () => {
 			position: "bottom-left",
 		});
 
-		const container = element.shadowRoot.querySelector(".toast-container--bottom-left");
+		const container = element.shadowRoot.querySelector(
+			".toast-container--bottom-left",
+		);
 		assert.ok(container, "Container should have bottom-left position class");
 	});
 
@@ -192,5 +222,3 @@ describe("Toast Container Component", () => {
 		}
 	});
 });
-
-

package/src/components/tooltip/index.js

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

package/src/components/tooltip/tooltip.js

@@ -3,5 +3,6 @@ import { GrantCodesTooltip } from "./tooltip.component.js";
 export * from "./tooltip.component.js";
 export default GrantCodesTooltip;
 
-customElements.define("grantcodes-tooltip", GrantCodesTooltip);
-
+if (!customElements.get("grantcodes-tooltip")) {
+	customElements.define("grantcodes-tooltip", GrantCodesTooltip);
+}

package/src/components/tooltip/tooltip.styles.js

@@ -13,8 +13,8 @@ export const tooltipStyles = css`
 }
 
 .tooltip__slot {
-  padding: 0.5rem;
-  margin: -0.5rem;
+  padding: var(--g-theme-spacing-sm);
+  margin: calc(-1 * var(--g-theme-spacing-sm));
   /* Anchor name will be set via JavaScript to include unique ID */
 }
 
@@ -75,4 +75,4 @@ export const tooltipStyles = css`
   }
 }
 
-`;
+`;

package/src/components/tooltip/tooltip.test.js

@@ -21,7 +21,11 @@ describe("Tooltip Component", () => {
 			label: "Tooltip label",
 		});
 
-		assert.strictEqual(element.label, "Tooltip label", "Label property should be set");
+		assert.strictEqual(
+			element.label,
+			"Tooltip label",
+			"Label property should be set",
+		);
 	});
 
 	it("should have description property", async () => {
@@ -52,7 +56,11 @@ describe("Tooltip Component", () => {
 
 		const content = element.shadowRoot.querySelector(".tooltip__content");
 		assert.ok(content, "Tooltip content should exist");
-		assert.strictEqual(content.textContent.trim(), "Test label", "Content should match label");
+		assert.strictEqual(
+			content.textContent.trim(),
+			"Test label",
+			"Content should match label",
+		);
 	});
 
 	it("should have role=tooltip on content", async () => {
@@ -146,5 +154,3 @@ describe("Tooltip Component", () => {
 		// In a test environment, this might need special handling
 	});
 });
-
-

package/src/css/base.css

@@ -7,17 +7,20 @@
 
 @import "./typography.css";
 @import "./elements.css";
+@import "./util/index.css";
 
 /* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
 :root {
 	--grantcodes-ui-theme: "none";
 	background-color: var(--g-theme-color-background-default);
 	fill: currentColor;
-	
-	/* Focus ring styles - using tier-3 component tokens */
-	--component-focus-ring-color: var(--g-theme-focus-ring-color-default);
-	--component-focus-ring-width: var(--g-theme-focus-ring-width-default);
-	--component-focus-ring-offset: var(--g-theme-focus-ring-offset-default);
+}
+
+/* Allow transitioning auto */
+:root {
+	@supports (interpolate-size: allow-keywords) {
+		interpolate-size: allow-keywords;
+	}
 }
 
 ::selection {