@grantcodes/ui 2.0.0 → 2.1.0

package/src/components/button/button.styles.js

@@ -1,97 +1,69 @@
 import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
 
 export const buttonStyles = css`
-/* Inlined component-base mixin */
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
+  ${focusRingStyles}
 
-:host {
-	display: block;
-	--button-border-radius-start: var(--g-theme-border-radius-md);
-	--button-border-radius-end: var(--g-theme-border-radius-md);
-}
+  /* Inlined component-base mixin */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-.button {
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	background: var(--g-theme-button-primary-color-background-default);
-	color: var(--g-theme-button-primary-color-content-default);
-	border-width: var(--g-theme-border-width-md);
-	border-style: solid;
-	border-color: var(--g-theme-button-primary-color-border-default);
-	padding: 0.5em 1em;
-	border-start-start-radius: var(--button-border-radius-start);
-	border-start-end-radius: var(--button-border-radius-end);
-	border-end-start-radius: var(--button-border-radius-start);
-	border-end-end-radius: var(--button-border-radius-end);
-	font-size: 1rem;
-	font-weight: bold;
-	letter-spacing: 0.05em;
-	text-decoration: none;
-	outline: 1px solid transparent;
-	transition:
-		color 0.2s,
-		border-color 0.2s,
-		background-color 0.2s,
-		outline 0.2s;
+  :host {
+    display: block;
+    --button-border-radius-start: var(--g-theme-border-radius-md);
+    --button-border-radius-end: var(--g-theme-border-radius-md);
+  }
 
-	/* Inlined focus-ring styles */
-	outline-color: transparent;
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	outline-style: solid;
-	outline-width: var(--g-theme-focus-ring-width-default);
-}
+  .button {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--g-theme-spacing-sm);
+    background: var(--g-theme-button-primary-color-background-default);
+    color: var(--g-theme-button-primary-color-content-default);
+    border-width: var(--g-theme-border-width-md);
+    border-style: solid;
+    border-color: var(--g-theme-button-primary-color-border-default);
+    padding-block: var(--g-theme-spacing-sm);
+    padding-inline: var(--g-theme-spacing-md);
+    border-start-start-radius: var(--button-border-radius-start);
+    border-start-end-radius: var(--button-border-radius-end);
+    border-end-start-radius: var(--button-border-radius-start);
+    border-end-end-radius: var(--button-border-radius-end);
+font: var(--g-theme-typography-label-default);
+    font-family: inherit;
+    text-decoration: none;
+    transition-property: color, border-color, background-color, outline;
+  }
 
-.button:focus-visible {
-	outline-color: var(--g-theme-focus-ring-color-default);
-}
+  .button:hover,
+  .button:focus-visible {
+    color: var(--g-theme-button-primary-color-content-hover);
+    background: var(--g-theme-button-primary-color-background-hover);
+    border-color: var(--g-theme-button-primary-color-border-hover);
+    cursor: pointer;
+    text-decoration: none;
+  }
 
-@media (prefers-contrast: more) {
-	.button:focus-visible {
-		outline-color: var(--g-theme-focus-ring-color-contrast);
-		box-shadow: 0 0 0
-			calc(
-				(
-					var(--g-theme-focus-ring-width-default) +
-					var(--g-theme-focus-ring-offset-default)
-				) *
-				1.5
-			)
-			var(--g-theme-focus-ring-color-contrast-shadow);
-	}
-}
+  .button:active {
+    color: var(--g-theme-button-primary-color-content-active);
+    background: var(--g-theme-button-primary-color-background-active);
+    border-color: var(--g-theme-button-primary-color-border-active);
+  }
 
-.button:hover,
-.button:focus-visible {
-	color: var(--g-theme-button-primary-color-content-hover);
-	background: var(--g-theme-button-primary-color-background-hover);
-	border-color: var(--g-theme-button-primary-color-border-hover);
-	cursor: pointer;
-	text-decoration: none;
-}
-
-.button:active {
-	color: var(--g-theme-button-primary-color-content-active);
-	background: var(--g-theme-button-primary-color-background-active);
-	border-color: var(--g-theme-button-primary-color-border-active);
-}
-
-.button:active {
-	transform: translateY(1px);
-}
-
-.button[disabled] {
-	background: var(--g-theme-button-primary-color-background-disabled);
-	color: var(--g-theme-button-primary-color-content-disabled);
-	border-color: var(--g-theme-button-primary-color-border-disabled);
-	cursor: not-allowed;
-	filter: grayscale(70%);
-	opacity: 0.8;
-}
+  .button:active {
+    transform: translateY(1px);
+  }
 
+  .button[disabled] {
+    background: var(--g-theme-button-primary-color-background-disabled);
+    color: var(--g-theme-button-primary-color-content-disabled);
+    border-color: var(--g-theme-button-primary-color-border-disabled);
+    cursor: not-allowed;
+    filter: grayscale(70%);
+    opacity: 0.8;
+  }
 `;

package/src/components/button/button.test.js

@@ -32,7 +32,10 @@ describe("Button Component", () => {
 		assert.ok(link, "Link element should exist");
 		const href = link.getAttribute("href");
 		assert.ok(href, "Link should have href attribute");
-		assert.ok(href.includes("example.com") || href === "https://example.com", "Link href should contain example.com");
+		assert.ok(
+			href.includes("example.com") || href === "https://example.com",
+			"Link href should contain example.com",
+		);
 	});
 
 	it("should be disabled when disabled property is set", async () => {
@@ -42,7 +45,10 @@ describe("Button Component", () => {
 
 		const button = element.shadowRoot.querySelector("button");
 		assert.ok(button.disabled, "Button should be disabled");
-		assert.ok(button.hasAttribute("disabled"), "Button should have disabled attribute");
+		assert.ok(
+			button.hasAttribute("disabled"),
+			"Button should have disabled attribute",
+		);
 	});
 
 	it("should emit click event when clicked", async () => {
@@ -94,5 +100,3 @@ describe("Button Component", () => {
 		assert.ok(slot, "Slot should exist");
 	});
 });
-
-

package/src/components/button/index.js

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

package/src/components/button-group/button-group.test.js

@@ -53,5 +53,3 @@ describe("Button Group Component", () => {
 		assert.ok(group, "Button group should provide visual grouping");
 	});
 });
-
-

package/src/components/button-group/index.js

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

package/src/components/card/card.component.js

@@ -1,17 +1,48 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
+import { LitElement, html } from "lit";
 import { cardStyles } from "./card.styles.js";
 
 export class GrantCodesCard extends LitElement {
+	static properties = {
+		hasHeader: { type: Boolean, reflect: true },
+		hasFooter: { type: Boolean, reflect: true },
+	};
+
 	static styles = [cardStyles];
 
+	constructor() {
+		super();
+		this.hasHeader = false;
+		this.hasFooter = false;
+	}
+
+	firstUpdated() {
+		this._checkSlots();
+		this.shadowRoot.querySelectorAll("slot").forEach((slot) => {
+			slot.addEventListener("slotchange", () => this._checkSlots());
+		});
+	}
+
+	_checkSlots() {
+		const headerSlot = this.shadowRoot?.querySelector('slot[name="header"]');
+		const footerSlot = this.shadowRoot?.querySelector('slot[name="footer"]');
+		this.hasHeader =
+			(headerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+		this.hasFooter =
+			(footerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+
+		const headerEl = this.shadowRoot?.querySelector(".card__header");
+		const footerEl = this.shadowRoot?.querySelector(".card__footer");
+		headerEl?.toggleAttribute("data-has-content", this.hasHeader);
+		footerEl?.toggleAttribute("data-has-content", this.hasFooter);
+	}
+
 	render() {
-			return html`
-		      <div class="card">
-		        <div class="card__header"><slot name="header"></slot></div>
-		        <div class="card__content"><slot></slot></div>
-		        <div class="card__footer"><slot name="footer"></slot></div>
-		      </div>
-		    `;
+		return html`
+      <div class="card">
+        <div class="card__header"><slot name="header"></slot></div>
+        <div class="card__content"><slot></slot></div>
+        <div class="card__footer"><slot name="footer"></slot></div>
+      </div>
+    `;
 	}
 }

package/src/components/card/card.js

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

package/src/components/card/card.stories.js

@@ -18,11 +18,11 @@ const meta = {
 		template(
 			args,
 			html`<h3 slot="header">Card Header</h3>
-				<p>${args.content}</p>
-				<grantcodes-button-group slot="footer">
-					<grantcodes-button>Action 1</grantcodes-button>
-					<grantcodes-button>Action 2</grantcodes-button>
-				</grantcodes-button-group>`,
+        <p>${args.content}</p>
+        <grantcodes-button-group slot="footer">
+          <grantcodes-button>Action 1</grantcodes-button>
+          <grantcodes-button>Action 2</grantcodes-button>
+        </grantcodes-button-group>`,
 		),
 	parameters: {
 		actions: {
@@ -34,3 +34,16 @@ const meta = {
 export default meta;
 
 export const Card = {};
+
+export const CardInLink = {
+	render: () =>
+		html`<a
+      href="#"
+      style="text-decoration: none; color: inherit; display: block;"
+    >
+      <grantcodes-card class="is-clickable">
+        <h3 slot="header">Card in Link</h3>
+        <p>This card is wrapped in an anchor tag and has a hover effect.</p>
+      </grantcodes-card>
+    </a>`,
+};

package/src/components/card/card.styles.js

@@ -10,6 +10,7 @@ export const cardStyles = css`
 
   :host {
     display: block;
+    flex-grow: 1;
     /* Enable container queries for responsive card layouts */
     container-type: inline-size;
     container-name: card;
@@ -18,6 +19,7 @@ export const cardStyles = css`
   .card {
     display: flex;
     inline-size: 100%;
+    min-block-size: 100%;
     flex-direction: column;
     justify-content: flex-start;
     overflow: hidden;
@@ -26,47 +28,49 @@ export const cardStyles = css`
     border-width: var(--g-theme-border-width-sm);
     border-color: var(--g-theme-color-border-default);
     border-radius: var(--g-theme-border-radius-md);
-    box-shadow:
-      0 1px 3px rgba(0, 0, 0, 0.12),
-      0 1px 2px rgba(0, 0, 0, 0.24);
+    box-shadow: var(--g-theme-box-shadow-md);
     transition:
       box-shadow 0.2s ease,
       transform 0.2s ease,
       border-color 0.2s ease,
       background-color 0.2s ease;
-    box-shadow:
-      0 8px 24px rgba(0, 0, 0, 0.08),
-      0 6px 12px rgba(0, 0, 0, 0.04);
   }
 
   /* Image support - images in header or content will be styled appropriately */
   .card__header img,
   .card__content img {
     display: block;
-    width: 100%;
-    height: auto;
+    inline-size: 100%;
+    block-size: auto;
     border-radius: inherit;
   }
 
   .card__header {
-    padding-inline: 1rem;
-    padding-block: calc(1rem * 0.75);
+    padding-inline: var(--g-theme-spacing-md);
+    padding-block: var(--g-spacing-12);
     border-block-end: 1px solid var(--g-theme-color-border-default);
   }
 
+  .card__header:has(> slot:empty) {
+    display: none;
+  }
+
   .card__header ::slotted(*) {
     margin: 0;
-    font-weight: 600;
-    font-size: var(--g-typography-font-size-24);
+    font: var(--g-theme-typography-title-default);
   }
 
   .card__content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    gap: 1rem;
-    padding-block: 1rem;
-    padding-inline: 1rem;
+    gap: var(--g-theme-spacing-md);
+    padding-block: var(--g-theme-spacing-md);
+    padding-inline: var(--g-theme-spacing-md);
+  }
+
+  .card__content:has(::slotted(:empty)) {
+    display: none;
   }
 
   .card__content > * {
@@ -77,12 +81,19 @@ export const cardStyles = css`
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: calc(1rem * 0.5);
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--g-theme-spacing-sm);
+    padding-inline: var(--g-theme-spacing-md);
+    padding-block: var(--g-spacing-12);
     border-block-start: 1px solid var(--g-theme-color-border-default);
     background: var(--g-theme-color-background-default);
   }
 
+  .card__footer:has(> slot:empty) {
+    display: none;
+  }
+
   .card__footer ::slotted(grantcodes-button-group) {
     width: 100%;
     justify-content: flex-end;
@@ -93,11 +104,11 @@ export const cardStyles = css`
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: var(--g-theme-spacing-md);
     margin: 0;
-    padding-inline: 1rem;
+    padding-inline: var(--g-theme-spacing-md);
     padding-block: 1em;
-    font-size: var(--g-typography-font-size-14);
+    font-size: var(--g-theme-typography-meta-sm-font-size);
     /* Use color-mix() for modern color manipulation */
     background-color: color-mix(
       in srgb,
@@ -125,4 +136,19 @@ export const cardStyles = css`
   .card__meta__item dt::after {
     content: ":";
   }
+
+  :host(.is-clickable) .card {
+    cursor: pointer;
+  }
+
+  :host(.is-clickable:hover) .card {
+    transform: translateY(-2px);
+    box-shadow: var(--g-theme-box-shadow-lg);
+    border-color: var(--g-theme-color-border-default);
+  }
+
+  :host(.is-clickable:active) .card {
+    transform: translateY(-1px);
+    border-color: var(--g-theme-color-border-active);
+  }
 `;

package/src/components/card/card.test.js

@@ -55,5 +55,3 @@ describe("Card Component", () => {
 		);
 	});
 });
-
-

package/src/components/card/index.js

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

package/src/components/code-preview/code-preview.component.js

@@ -18,10 +18,10 @@ export class GrantCodesCodePreview extends LitElement {
 		this.codePreview = null;
 	}
 
-    async doHighlight() {
+	async doHighlight() {
 		const rawCode = this.textContent ?? "";
-        const { codeToHtml } = await import("shiki/bundle/web");
-        const highlightedCode = await codeToHtml(rawCode.trim(), {
+		const { codeToHtml } = await import("shiki/bundle/web");
+		const highlightedCode = await codeToHtml(rawCode.trim(), {
 			lang: this.language,
 			theme: this.theme,
 		});
@@ -29,13 +29,13 @@ export class GrantCodesCodePreview extends LitElement {
 		this.codePreview.innerHTML = highlightedCode;
 	}
 
-    async firstUpdated() {
+	async firstUpdated() {
 		this.codePreview = this.renderRoot.querySelector(".code-preview");
-        // Only highlight if we have content and we're in a browser environment,
-        // and not in a unit test environment
-        const isTestEnv =
-            typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
-        if (this.textContent && typeof window !== "undefined" && !isTestEnv) {
+		// Only highlight if we have content and we're in a browser environment,
+		// and not in a unit test environment
+		const isTestEnv =
+			typeof process !== "undefined" && process?.env?.NODE_ENV === "test";
+		if (this.textContent && typeof window !== "undefined" && !isTestEnv) {
 			try {
 				await this.doHighlight();
 			} catch (error) {

package/src/components/code-preview/code-preview.js

@@ -4,4 +4,3 @@ export * from "./code-preview.component.js";
 export default GrantCodesCodePreview;
 
 customElements.define("grantcodes-code-preview", GrantCodesCodePreview);
-

package/src/components/code-preview/code-preview.styles.js

@@ -11,8 +11,8 @@ export const codePreviewStyles = css`
   border-radius: var(--g-theme-border-radius-md);
   box-shadow: var(--g-theme-box-shadow-sm);
   font-size: var(--g-typography-font-size-14);
-  font-weight: 400;
-  padding: 1rem;
+  font-weight: var(--g-typography-font-weight-400);
+  padding: var(--g-theme-spacing-md);
 }
 
-`;
+`;

package/src/components/code-preview/code-preview.test.js

@@ -26,12 +26,20 @@ describe.skip("Code Preview Component", () => {
 
 	it("should have language property defaulting to html", async () => {
 		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(element.language, "html", "Language should default to html");
+		assert.strictEqual(
+			element.language,
+			"html",
+			"Language should default to html",
+		);
 	});
 
 	it("should have theme property defaulting to aurora-x", async () => {
 		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(element.theme, "aurora-x", "Theme should default to aurora-x");
+		assert.strictEqual(
+			element.theme,
+			"aurora-x",
+			"Theme should default to aurora-x",
+		);
 	});
 
 	it("should support different languages", async () => {
@@ -39,7 +47,11 @@ describe.skip("Code Preview Component", () => {
 			language: "javascript",
 		});
 
-		assert.strictEqual(element.language, "javascript", "Language should be javascript");
+		assert.strictEqual(
+			element.language,
+			"javascript",
+			"Language should be javascript",
+		);
 	});
 
 	it("should support different themes", async () => {
@@ -47,7 +59,11 @@ describe.skip("Code Preview Component", () => {
 			theme: "github-dark",
 		});
 
-		assert.strictEqual(element.theme, "github-dark", "Theme should be github-dark");
+		assert.strictEqual(
+			element.theme,
+			"github-dark",
+			"Theme should be github-dark",
+		);
 	});
 
 	it("should render code preview wrapper", async () => {
@@ -93,14 +109,21 @@ describe.skip("Code Preview Component", () => {
 	it.skip("should initialize codePreview property", async () => {
 		// Skipped: Can cause memory issues
 		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(element.codePreview, null, "codePreview should be null initially");
+		assert.strictEqual(
+			element.codePreview,
+			null,
+			"codePreview should be null initially",
+		);
 	});
 
 	it.skip("should set codePreview in firstUpdated", async () => {
 		// Skipped: Can cause memory issues
 		element = await fixture("grantcodes-code-preview");
 		await element.updateComplete;
-		assert.ok(element.codePreview !== null, "codePreview should be set after firstUpdated");
+		assert.ok(
+			element.codePreview !== null,
+			"codePreview should be set after firstUpdated",
+		);
 	});
 
 	it.skip("should support various programming languages", async () => {
@@ -114,5 +137,3 @@ describe.skip("Code Preview Component", () => {
 		}
 	});
 });
-
-

package/src/components/code-preview/index.js

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

package/src/components/container/container.component.js

@@ -25,6 +25,7 @@ export class GrantCodesContainer extends LitElement {
 		const containerClass = cx("container", {
 			"container--wide": this.align === "wide",
 			"container--full": this.align === "full",
+			"container--prose": this.align === "prose",
 			"container--viewport": this.align === "viewport",
 			"container--nopad": this.nopad,
 		});

package/src/components/container/container.js

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

package/src/components/container/container.stories.js

@@ -18,16 +18,18 @@ const meta = {
 		...argTypes,
 		align: {
 			type: "string",
-			options: ["default", "wide", "full", "viewport"],
+			options: ["default", "wide", "full", "viewport", "prose"],
 			control: { type: "radio" },
 		},
 	},
 	render: (args) =>
 		template(
 			args,
-			html`<div style="background-color: var(--g-theme-color-background-subtle)">
-					${args.content}
-				</div>`,
+			html`<div
+        style="background-color: var(--g-theme-color-background-subtle)"
+      >
+        ${args.content}
+      </div>`,
 		),
 	parameters: {
 		actions: {
@@ -57,3 +59,9 @@ export const ViewportContainer = {
 		align: "viewport",
 	},
 };
+
+export const ProseContainer = {
+	args: {
+		align: "prose",
+	},
+};