@grantcodes/ui 2.1.1 → 2.3.0

package/src/components/notice/notice.component.js

@@ -1,8 +1,8 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { cx } from "../../lib/classnames.js";
-import { noticeStyles } from "./notice.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import noticeStyles from "./notice.css" with { type: "css" };
 import { GrantCodesIcon } from "../icon/icon.component.js";
 import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
 
@@ -60,9 +60,13 @@ export class GrantCodesNotice extends LitElement {
 
 	render() {
 		const icon = ICONS[this.variant];
+		const classes = classMap({
+			notice: true,
+			[`notice--${this.variant}`]: true,
+		});
 
 		return html`
-			<aside class="${cx("notice", `notice--${this.variant}`)}">
+			<aside class=${classes}>
 				<grantcodes-icon class="notice__icon">${unsafeHTML(icon)}</grantcodes-icon>
 
 				<div class="notice__content">

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const noticeStyles = css`
 
 .notice {
   display: flex;
@@ -69,4 +66,3 @@ export const noticeStyles = css`
   margin: 0;
 }
 
-`;

package/src/components/notice/notice.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesNotice } from "./notice.js"
+
+export const Notice = createComponent({
+	tagName: "grantcodes-notice",
+	elementClass: GrantCodesNotice,
+	react: React,
+})

package/src/components/pagination/pagination.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { paginationStyles } from "./pagination.styles.js";
+import paginationStyles from "./pagination.css" with { type: "css" };
 import { GrantCodesButton } from "../button/button.component.js";
 import "../button/button.js";
 

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const paginationStyles = css`
 
 .pagination {
   display: flex;
@@ -16,4 +13,3 @@ export const paginationStyles = css`
   margin-inline-end: auto;
 }
 
-`;

package/src/components/pagination/pagination.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesPagination } from "./pagination.js"
+
+export const Pagination = createComponent({
+	tagName: "grantcodes-pagination",
+	elementClass: GrantCodesPagination,
+	react: React,
+})

package/src/components/pricing/pricing.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { pricingStyles } from "./pricing.styles.js";
+import pricingStyles from "./pricing.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesPricing extends LitElement {

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const pricingStyles = css`
   :host {
     display: block;
   }
@@ -132,4 +129,3 @@ export const pricingStyles = css`
   .pricing__cta grantcodes-button {
     width: 100%;
   }
-`;

package/src/components/pricing/pricing.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesPricing } from "./pricing.js"
+
+export const Pricing = createComponent({
+	tagName: "grantcodes-pricing",
+	elementClass: GrantCodesPricing,
+	react: React,
+})

package/src/components/sidebar/sidebar.component.js

@@ -1,10 +1,11 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { sidebarStyles } from "./sidebar.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import sidebarStyles from "./sidebar.css" with { type: "css" };
 
 export class GrantCodesSidebar extends LitElement {
-	static styles = [sidebarStyles];
+	static styles = [focusRingStyles, sidebarStyles];
 
 	static properties = {
 		position: { type: String },
@@ -104,7 +105,8 @@ export class GrantCodesSidebar extends LitElement {
 	}
 
 	render() {
-		const sidebarClass = cx("sidebar", {
+		const sidebarClasses = classMap({
+			sidebar: true,
 			"sidebar--collapsed": this.collapsed,
 			[`sidebar--${this.position}`]: true,
 			"sidebar--drawer-open": this._drawerOpen,
@@ -137,7 +139,7 @@ export class GrantCodesSidebar extends LitElement {
 
 			<!-- Sidebar -->
 			<aside
-				class="${sidebarClass}"
+				class=${sidebarClasses}
 				style="--sidebar-width: ${this.width}"
 			>
 				<!-- Collapse Toggle (Desktop) -->

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

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const sidebarStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -184,4 +178,3 @@ export const sidebarStyles = css`
       }
     }
   }
-`;

package/src/components/sidebar/sidebar.react.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesSidebar } from "./sidebar.js"
+
+export const Sidebar = createComponent({
+	tagName: "grantcodes-sidebar",
+	elementClass: GrantCodesSidebar,
+	react: React,
+	events: {
+		onToggle: "toggle",
+		onDrawerToggle: "drawer-toggle",
+	},
+})

package/src/components/stats/stats.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { statsStyles } from "./stats.styles.js";
+import statsStyles from "./stats.css" with { type: "css" };
 
 export class GrantCodesStats extends LitElement {
 	static styles = [statsStyles];

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const statsStyles = css`
   :host {
     display: block;
   }
@@ -63,4 +60,3 @@ export const statsStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/stats/stats.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesStats } from "./stats.js"
+
+export const Stats = createComponent({
+	tagName: "grantcodes-stats",
+	elementClass: GrantCodesStats,
+	react: React,
+})

package/src/components/tabs/internal/tabs-button.component.js

@@ -2,7 +2,8 @@ import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { GrantCodesTabsItem } from "./tabs-item.component.js";
-import { tabsStyles } from "../tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "../tabs.css" with { type: "css" };
 
 export class GrantCodesTabsButton extends GrantCodesTabsItem {
 	static shadowRootOptions = {
@@ -10,7 +11,7 @@ export class GrantCodesTabsButton extends GrantCodesTabsItem {
 		delegatesFocus: true,
 	};
 
-	static styles = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	render() {
 		console.log("GrantCodesTabsButton", this, {

package/src/components/tabs/internal/tabs-button.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTabsButton } from "./tabs-button.js"
+
+export const TabsButton = createComponent({
+	tagName: "grantcodes-tabs-button",
+	elementClass: GrantCodesTabsButton,
+	react: React,
+})

package/src/components/tabs/tab.component.js

@@ -1,9 +1,10 @@
 import { GrantCodesTabsItem } from "./internal/tabs-item.component.js";
 import { html } from "lit/static-html.js";
-import { tabsStyles } from "./tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "./tabs.css" with { type: "css" };
 
 export class GrantCodesTab extends GrantCodesTabsItem {
-	static styles = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	render() {
 		return html`

package/src/components/tabs/tab.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTab } from "./tab.js"
+
+export const Tab = createComponent({
+	tagName: "grantcodes-tab",
+	elementClass: GrantCodesTab,
+	react: React,
+})

package/src/components/tabs/tabs.component.js

@@ -1,7 +1,8 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { tabsStyles } from "./tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "./tabs.css" with { type: "css" };
 import { GrantCodesTab } from "./tab.component.js";
 import { GrantCodesTabsButton } from "./internal/tabs-button.component.js";
 import "./internal/tabs-button.js";
@@ -11,7 +12,7 @@ export class GrantCodesTabs extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles
 	// on the main page or in other components. Styling API can be exposed
 	// via CSS custom properties.
-	static styles = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	static properties = {
 		label: { type: String },

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

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const tabsStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -95,4 +89,3 @@ export const tabsStyles = css`
   .tabs__panel.is-active {
     display: block;
   }
-`;

package/src/components/tabs/tabs.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTabs } from "./tabs.js"
+
+export const Tabs = createComponent({
+	tagName: "grantcodes-tabs",
+	elementClass: GrantCodesTabs,
+	react: React,
+})

package/src/components/testimonials/testimonials.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { testimonialsStyles } from "./testimonials.styles.js";
+import testimonialsStyles from "./testimonials.css" with { type: "css" };
 import "../card/card.js";
 import "../avatar/avatar.js";
 

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const testimonialsStyles = css`
   :host {
     display: block;
   }
@@ -79,4 +76,3 @@ export const testimonialsStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/testimonials/testimonials.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTestimonials } from "./testimonials.js"
+
+export const Testimonials = createComponent({
+	tagName: "grantcodes-testimonials",
+	elementClass: GrantCodesTestimonials,
+	react: React,
+})

package/src/components/toast/toast.component.js

@@ -1,8 +1,9 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { cx } from "../../lib/classnames.js";
-import { toastStyles } from "./toast.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import toastStyles from "./toast.css" with { type: "css" };
 import { GrantCodesIcon } from "../icon/icon.component.js";
 import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
 
@@ -15,7 +16,7 @@ const ICONS = {
 
 export class GrantCodesToast extends LitElement {
 	static dependencies = { "grancodes-icon": GrantCodesIcon };
-	static styles = [toastStyles];
+	static styles = [focusRingStyles, toastStyles];
 
 	static properties = {
 		variant: { type: String },
@@ -128,14 +129,15 @@ export class GrantCodesToast extends LitElement {
 
 	render() {
 		const icon = ICONS[this.variant];
-		const toastClass = cx("toast", {
+		const classes = classMap({
+			toast: true,
 			[`toast--${this.variant}`]: true,
 			[`toast--${this.position}`]: true,
 			"toast--visible": this._visible,
 		});
 
 		return html`
-			<div class="${toastClass}" role="status" aria-live="polite">
+			<div class=${classes} role="status" aria-live="polite">
 				<grantcodes-icon class="toast__icon">${unsafeHTML(icon)}</grantcodes-icon>
 
 				<div class="toast__content">
@@ -155,7 +157,7 @@ export class GrantCodesToast extends LitElement {
  * Toast container for managing multiple toasts
  */
 export class GrantCodesToastContainer extends LitElement {
-	static styles = [toastStyles];
+	static styles = [focusRingStyles, toastStyles];
 
 	static properties = {
 		position: { type: String },
@@ -172,12 +174,13 @@ export class GrantCodesToastContainer extends LitElement {
 	}
 
 	render() {
-		const containerClass = cx("toast-container", {
+		const classes = classMap({
+			"toast-container": true,
 			[`toast-container--${this.position}`]: true,
 		});
 
 		return html`
-			<div class="${containerClass}">
+			<div class=${classes}>
 				<slot></slot>
 			</div>
 		`;

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

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const toastStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -202,4 +196,3 @@ export const toastStyles = css`
       }
     }
   }
-`;

package/src/components/toast/toast.react.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesToast, GrantCodesToastContainer } from "./toast.js"
+
+export const Toast = createComponent({
+	tagName: "grantcodes-toast",
+	elementClass: GrantCodesToast,
+	react: React,
+	events: {
+		onDismiss: "dismiss",
+	},
+})
+
+export const ToastContainer = createComponent({
+	tagName: "grantcodes-toast-container",
+	elementClass: GrantCodesToastContainer,
+	react: React,
+})

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/components/tooltip/tooltip.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTooltip } from "./tooltip.js"
+
+export const Tooltip = createComponent({
+	tagName: "grantcodes-tooltip",
+	elementClass: GrantCodesTooltip,
+	react: React,
+})

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);
+  }
+}