@grantcodes/ui 2.1.0 → 2.2.0

package/src/components/tooltip/tooltip.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { tooltipStyles } from "./tooltip.styles.js";
+import tooltipStyles from "./tooltip.css" with { type: "css" };
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesTooltip extends LitElement {

package/src/components/tooltip/{tooltip.styles.js → tooltip.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const tooltipStyles = css`
 
 :host,
 .tooltip,
@@ -44,12 +41,11 @@ export const tooltipStyles = css`
   
   /* Try anchor positioning first (modern browsers) */
   position-anchor: var(--tooltip-anchor, none);
-  inset-area: block-end;
   position-area: block-end;
   margin-block-start: 0.5rem;
   
   /* Fallback for browsers without anchor positioning support */
-  @supports not (inset-area: block-end) {
+  @supports not (position-area: block-end) {
     /* Traditional positioning as fallback */
     position: absolute;
     top: 100%;
@@ -75,4 +71,3 @@ export const tooltipStyles = css`
   }
 }
 
-`;

package/src/exports.test.js

@@ -0,0 +1,119 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const pkgPath = path.resolve(__dirname, '..', 'package.json')
+const pkgRoot = path.dirname(pkgPath)
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+const exports = pkg.exports
+
+// All 34 component CSS files expected to exist on disk
+// These are resolved via the ./components/* wildcard export
+const expectedComponentCss = [
+	'accordion/accordion.css',
+	'app-bar/app-bar.css',
+	'avatar/avatar.css',
+	'badge/badge.css',
+	'breadcrumb/breadcrumb.css',
+	'button/button.css',
+	'button-group/button-group.css',
+	'card/card.css',
+	'code-preview/code-preview.css',
+	'container/container.css',
+	'cta/cta.css',
+	'dialog/dialog.css',
+	'dropdown/dropdown.css',
+	'dropzone/dropzone.css',
+	'feature-list/feature-list.css',
+	'footer/footer.css',
+	'footer/footer-column.css',
+	'form-field/form-field.css',
+	'gallery/gallery.css',
+	'hero/hero.css',
+	'icon/icon.css',
+	'loading/loading.css',
+	'logo-cloud/logo-cloud.css',
+	'media-text/media-text.css',
+	'newsletter/newsletter.css',
+	'notice/notice.css',
+	'pagination/pagination.css',
+	'pricing/pricing.css',
+	'sidebar/sidebar.css',
+	'stats/stats.css',
+	'tabs/tabs.css',
+	'testimonials/testimonials.css',
+	'toast/toast.css',
+	'tooltip/tooltip.css',
+]
+
+describe('package.json exports', () => {
+	describe('component CSS files exist (resolved via ./components/* wildcard)', () => {
+		for (const cssFile of expectedComponentCss) {
+			it(`src/components/${cssFile} exists on disk`, () => {
+				const fullPath = path.resolve(pkgRoot, 'src', 'components', cssFile)
+				assert.ok(
+					fs.existsSync(fullPath),
+					`CSS file does not exist: ${fullPath}`,
+				)
+			})
+		}
+
+		it('has ./components/* wildcard export that covers CSS files', () => {
+			assert.ok(
+				exports['./components/*'],
+				'Missing ./components/* wildcard export',
+			)
+		})
+	})
+
+	describe('focus-ring shared styles export', () => {
+		it('has export for ./styles/focus-ring.css', () => {
+			assert.ok(
+				exports['./styles/focus-ring.css'] !== undefined,
+				'Missing export for ./styles/focus-ring.css',
+			)
+		})
+
+		it('./styles/focus-ring.css points to an existing file', () => {
+			const exportValue = exports['./styles/focus-ring.css']
+			const filePath =
+				typeof exportValue === 'string' ? exportValue : exportValue?.import
+			assert.ok(filePath, 'No file path found for ./styles/focus-ring.css')
+			const fullPath = path.resolve(pkgRoot, filePath)
+			assert.ok(
+				fs.existsSync(fullPath),
+				`File does not exist: ${fullPath}`,
+			)
+		})
+	})
+
+	describe('existing exports preserved', () => {
+		it('has root export (.)', () => {
+			assert.ok(exports['.'], 'Missing root export')
+			assert.ok(exports['.'].import, 'Missing root import')
+		})
+
+		it('has ./icons export', () => {
+			assert.ok(exports['./icons'], 'Missing ./icons export')
+		})
+
+		it('has ./styles/base.css export', () => {
+			assert.ok(exports['./styles/base.css'], 'Missing ./styles/base.css export')
+		})
+
+		it('has ./styles/themes/* export', () => {
+			assert.ok(exports['./styles/themes/*'], 'Missing ./styles/themes/* export')
+		})
+
+		it('has ./components/* wildcard export', () => {
+			assert.ok(exports['./components/*'], 'Missing ./components/* wildcard export')
+		})
+
+		it('has ./fonts/* export', () => {
+			assert.ok(exports['./fonts/*'], 'Missing ./fonts/* export')
+		})
+	})
+})

package/src/lib/styles/focus-ring.css

@@ -0,0 +1,30 @@
+.focus-ring,
+:host(.focus-ring) {
+  outline: 0px solid transparent;
+  outline-offset: var(--g-theme-focus-ring-offset-default);
+  transition-duration: var(--g-animation-duration-20);
+  transition-property: outline-color, width;
+}
+
+.focus-ring:focus-visible,
+:host(.focus-ring):focus-visible {
+  outline: var(--g-theme-focus-ring-width-default) solid
+    var(--g-theme-focus-ring-color-default);
+}
+
+@media (prefers-contrast: more) {
+  .focus-ring:focus-visible,
+  :host(.focus-ring):focus-visible {
+    outline: var(--g-theme-focus-ring-width-default) solid
+      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);
+  }
+}

package/vite-plugin-css-import-attributes.js

@@ -0,0 +1,96 @@
+import { readFile } from "node:fs/promises";
+
+/**
+ * Vite plugin that handles CSS import attributes (`with { type: 'css' }`).
+ *
+ * When a JS/TS file imports a CSS file with `with { type: 'css' }`,
+ * this plugin transforms it into a module that exports a CSSStyleSheet
+ * (client) or a Lit CSSResult (SSR), compatible with Lit's `static styles`.
+ *
+ * The virtual module ID uses a `.js` suffix to prevent Vite's built-in
+ * CSS plugin from intercepting and transforming the output.
+ */
+export function cssImportAttributes() {
+	const virtualPrefix = "\0css-sheet:";
+	const ssrPrefix = "\0css-sheet-ssr:";
+	// Suffix prevents Vite's CSS plugin from treating this as a CSS module
+	const virtualSuffix = ".js";
+
+	const jsExts = new Set(["js", "mjs", "jsx", "ts", "mts", "tsx"]);
+
+	return {
+		enforce: "pre",
+		name: "css-import-attributes",
+
+		async resolveId(source, importer, options) {
+			if (!source.endsWith(".css") || !importer) return;
+
+			// Strip query strings from importer
+			const cleanImporter = importer.split("?")[0];
+			const ext = cleanImporter.split(".").pop();
+			if (!jsExts.has(ext)) return;
+
+			// Read the importer to check for `with { type: 'css' }`
+			let importerContent;
+			try {
+				importerContent = await readFile(cleanImporter, "utf-8");
+			} catch {
+				return;
+			}
+
+			// Check if the import uses CSS import attributes
+			const escapedSource = source.replace(
+				/[.*+?^${}()|[\]\\]/g,
+				"\\$&",
+			);
+			const regex = new RegExp(
+				escapedSource +
+					`['"] *(?:with|assert) *{ *type: *['"]css['"]`,
+			);
+			if (!regex.test(importerContent)) return;
+
+			// Resolve to absolute path
+			const resolved = (await this.resolve(source, importer, options))
+				?.id;
+			if (!resolved) return;
+
+			// Encode SSR flag into virtual ID prefix so load() can detect it
+			const prefix = options.ssr ? ssrPrefix : virtualPrefix;
+			return prefix + resolved + virtualSuffix;
+		},
+
+		async load(id) {
+			const isSsr = id.startsWith(ssrPrefix);
+			const isClient = id.startsWith(virtualPrefix);
+			if (!isSsr && !isClient) return;
+
+			// Strip prefix and suffix to get real CSS path
+			const prefix = isSsr ? ssrPrefix : virtualPrefix;
+			const realPath = id.slice(prefix.length, -virtualSuffix.length);
+
+			const css = await readFile(realPath, "utf-8");
+			this.addWatchFile(realPath);
+
+			// Escape backticks, backslashes, and dollar signs for template literal
+			const escaped = css
+				.replace(/\\/g, "\\\\")
+				.replace(/`/g, "\\`")
+				.replace(/\$/g, "\\$");
+
+			if (isSsr) {
+				// SSR: return a Lit CSSResult for proper Lit SSR integration
+				return (
+					`import { css } from "lit";\n` +
+					`export default css\`${escaped}\`;\n`
+				);
+			}
+
+			// Client: return a native CSSStyleSheet
+			return (
+				`const sheet = new CSSStyleSheet();\n` +
+				`sheet.replaceSync(\`${escaped}\`);\n` +
+				`export default sheet;\n`
+			);
+		},
+	};
+}

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

@@ -1,91 +0,0 @@
-import { css } from "lit";
-
-export const badgeStyles = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: inline-block;
-  }
-
-  .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;
-  }
-
-  .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--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--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;
-  }
-`;

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

@@ -1,69 +0,0 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const buttonStyles = css`
-  ${focusRingStyles}
-
-  /* Inlined component-base mixin */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    --button-border-radius-start: var(--g-theme-border-radius-md);
-    --button-border-radius-end: var(--g-theme-border-radius-md);
-  }
-
-  .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: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;
-  }
-`;

package/src/lib/classnames.js

@@ -1,61 +0,0 @@
-// classnames npm package moved to a local dependency
-
-var hasOwn = {}.hasOwnProperty;
-
-export function cx() {
-	var classes = "";
-	var i;
-	var arg;
-
-	for (i = 0; i < arguments.length; i++) {
-		arg = arguments[i];
-		if (arg) {
-			classes = appendClass(classes, parseValue(arg));
-		}
-	}
-
-	return classes;
-}
-
-function parseValue(arg) {
-	if (typeof arg === "string" || typeof arg === "number") {
-		return arg;
-	}
-
-	if (typeof arg !== "object") {
-		return "";
-	}
-
-	if (Array.isArray(arg)) {
-		return cx.apply(null, arg);
-	}
-
-	if (
-		arg.toString !== Object.prototype.toString &&
-		!arg.toString.toString().includes("[native code]")
-	) {
-		return arg.toString();
-	}
-
-	var classes = "";
-
-	for (var key in arg) {
-		if (hasOwn.call(arg, key) && arg[key]) {
-			classes = appendClass(classes, key);
-		}
-	}
-
-	return classes;
-}
-
-function appendClass(value, newClass) {
-	if (!newClass) {
-		return value;
-	}
-
-	if (value) {
-		return `${value} ${newClass}`;
-	}
-
-	return value + newClass;
-}

package/src/lib/styles/focus-ring.styles.js

@@ -1,34 +0,0 @@
-import { css } from "lit";
-
-export const focusRingStyles = css`
-  .focus-ring,
-  :host(.focus-ring) {
-    outline: 0px solid transparent;
-    outline-offset: var(--g-theme-focus-ring-offset-default);
-    transition-duration: var(--g-animation-duration-20);
-    transition-properties: outline-color, width;
-  }
-
-  .focus-ring:focus-visible,
-  :host(.focus-ring):focus-visible {
-    outline: var(--g-theme-focus-ring-width-default) solid
-      var(--g-theme-focus-ring-color-default);
-  }
-
-  @media (prefers-contrast: more) {
-    .focus-ring:focus-visible,
-    :host(.focus-ring):focus-visible {
-      outline: var(--g-theme-focus-ring-width-default) solid
-        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);
-    }
-  }
-`;