@grantcodes/ui 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.4.0](https://github.com/grantcodes/ui/compare/ui-v2.3.0...ui-v2.4.0) (2026-03-30)
+
+
+### Features
+
+* **ui:** add CSS layers and simplify component stylesheet bundle ([42c183c](https://github.com/grantcodes/ui/commit/42c183c303b81d8a4d0a7bb7a4d5f6482697b3d9))
+
+
+### Bug Fixes
+
+* **ui:** replace sanitize.css imports with inlined custom reset ([c97182b](https://github.com/grantcodes/ui/commit/c97182bc98406055f81e6b2433427e52723776b8))
+* **ui:** replace sanitize.css with inlined custom reset ([f5fe733](https://github.com/grantcodes/ui/commit/f5fe733007783452a4f4612e846960e074386677))
+
+## [2.3.0](https://github.com/grantcodes/ui/compare/ui-v2.2.0...ui-v2.3.0) (2026-03-25)
+
+
+### Features
+
+* **01-01:** create React wrapper components for all Lit web components ([f5d47a7](https://github.com/grantcodes/ui/commit/f5d47a7e1dc45d5d5f21823dcba59c687feed56f))
+* **ui:** add react exports ([f040673](https://github.com/grantcodes/ui/commit/f04067332e5d70803d6f72aade875f08ad05e090))
+
 ## [2.2.0](https://github.com/grantcodes/ui/compare/ui-v2.1.1...ui-v2.2.0) (2026-03-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -28,11 +28,15 @@
       "require": "./src/css/themes/*"
     },
     "./styles/focus-ring.css": "./src/lib/styles/focus-ring.css",
+    "./styles/all.css": "./src/lib/styles/all.css",
     "./components/*": {
       "import": "./src/components/*",
       "require": "./src/components/*"
     },
     "./fonts/*": "./src/fonts/*",
+    "./react": {
+      "import": "./src/react.js"
+    },
     "./css-import-attributes": {
       "types": "./css-import-attributes.d.ts"
     },
@@ -40,8 +44,8 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
-    "sanitize.css": "^13.0.0",
     "shiki": "^3.17.1",
     "@grantcodes/style-dictionary": "^1.3.1"
   },
@@ -64,6 +68,7 @@
     "lucide-static": "^0.555.0",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.4",
+    "react": "^19.2.4",
     "storybook": "^10.1.4",
     "vite": "^7.2.6"
   },
@@ -77,6 +82,14 @@
     "LICENCE"
   ],
   "customElements": "custom-elements.json",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "watch": "vite build --watch",

package/src/components/accordion/accordion.react.js

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

package/src/components/app-bar/app-bar.react.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesAppBar } from "./app-bar.js"
+
+export const AppBar = createComponent({
+	tagName: "grantcodes-app-bar",
+	elementClass: GrantCodesAppBar,
+	react: React,
+	events: {
+		onMenuToggle: "menu-toggle",
+	},
+})

package/src/components/avatar/avatar.react.js

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

package/src/components/badge/badge.react.js

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

package/src/components/breadcrumb/breadcrumb.react.js

@@ -0,0 +1,15 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesBreadcrumb, GrantCodesBreadcrumbItem } from "./breadcrumb.js"
+
+export const Breadcrumb = createComponent({
+	tagName: "grantcodes-breadcrumb",
+	elementClass: GrantCodesBreadcrumb,
+	react: React,
+})
+
+export const BreadcrumbItem = createComponent({
+	tagName: "grantcodes-breadcrumb-item",
+	elementClass: GrantCodesBreadcrumbItem,
+	react: React,
+})

package/src/components/button/button.react.js

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

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

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

package/src/components/card/card.react.js

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

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

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

package/src/components/container/container.react.js

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

package/src/components/cta/cta.react.js

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

package/src/components/dialog/dialog.react.js

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

package/src/components/dropdown/dropdown.react.js

@@ -0,0 +1,21 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesDropdown, GrantCodesDropdownItem } from "./dropdown.js"
+
+export const Dropdown = createComponent({
+	tagName: "grantcodes-dropdown",
+	elementClass: GrantCodesDropdown,
+	react: React,
+	events: {
+		onToggle: "toggle",
+	},
+})
+
+export const DropdownItem = createComponent({
+	tagName: "grantcodes-dropdown-item",
+	elementClass: GrantCodesDropdownItem,
+	react: React,
+	events: {
+		onSelect: "select",
+	},
+})

package/src/components/dropzone/dropzone.react.js

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

package/src/components/feature-list/feature-list.react.js

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

package/src/components/footer/footer.react.js

@@ -0,0 +1,15 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesFooter, GrantCodesFooterColumn } from "./footer.js"
+
+export const Footer = createComponent({
+	tagName: "grantcodes-footer",
+	elementClass: GrantCodesFooter,
+	react: React,
+})
+
+export const FooterColumn = createComponent({
+	tagName: "grantcodes-footer-column",
+	elementClass: GrantCodesFooterColumn,
+	react: React,
+})

package/src/components/form-field/form-field.react.js

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

package/src/components/gallery/gallery-image.react.js

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

package/src/components/gallery/gallery.react.js

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

package/src/components/hero/hero.react.js

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

package/src/components/icon/icon.react.js

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

package/src/components/loading/loading.react.js

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

package/src/components/logo-cloud/logo-cloud.react.js

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

package/src/components/media-text/media-text.react.js

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

package/src/components/newsletter/newsletter.react.js

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

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.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.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.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.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.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.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.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.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.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.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/css/all.css

@@ -1 +1,7 @@
-@import "./base.css";
+@layer reset, base, utilities, components;
+
+@import "./base.css" layer(reset);
+@import "./typography.css" layer(base);
+@import "./elements.css" layer(base);
+@import "./util/index.css" layer(utilities);
+@import "./helpers.css" layer(utilities);

package/src/css/base.css

@@ -1,13 +1,243 @@
-/* CSS defaults */
-/* NOTE: Converted from SCSS - using standard CSS imports */
-@import "../../node_modules/sanitize.css/sanitize.css";
-@import "../../node_modules/sanitize.css/forms.css";
-@import "../../node_modules/sanitize.css/typography.css";
-@import "../../node_modules/sanitize.css/reduce-motion.css";
-
-@import "./typography.css";
-@import "./elements.css";
-@import "./util/index.css";
+/* CSS reset — inspired by sanitize.css (https://csstools.github.io/sanitize.css/)
+   Inlined to avoid broken relative node_modules paths when installed externally. */
+
+/* Box sizing and background */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+/* Root defaults */
+:where(:root) {
+	cursor: default;
+	line-height: 1.5;
+	overflow-wrap: break-word;
+	-moz-tab-size: 4;
+	tab-size: 4;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-text-size-adjust: 100%;
+}
+
+/* Typography — system font stack */
+html {
+	font-family:
+		system-ui,
+		-apple-system,
+		"Segoe UI",
+		"Roboto",
+		"Ubuntu",
+		"Cantarell",
+		"Noto Sans",
+		sans-serif,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
+}
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		"Menlo",
+		"Consolas",
+		"Roboto Mono",
+		"Ubuntu Monospace",
+		"Noto Mono",
+		"Oxygen Mono",
+		"Liberation Mono",
+		monospace,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
+}
+
+/* Sections */
+:where(body) {
+	margin: 0;
+}
+
+:where(h1) {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/* Grouping */
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin: 0;
+}
+
+:where(hr) {
+	color: inherit;
+	height: 0;
+}
+
+:where(nav) :where(ol, ul) {
+	list-style-type: none;
+	padding: 0;
+}
+
+/* Prevent VoiceOver from ignoring list semantics in Safari */
+:where(nav li)::before {
+	content: "\200B";
+	float: left;
+}
+
+:where(pre) {
+	font-size: 1em;
+	overflow: auto;
+}
+
+/* Text-level semantics */
+:where(abbr[title]) {
+	text-decoration: underline dotted;
+}
+
+:where(b, strong) {
+	font-weight: bolder;
+}
+
+:where(code, kbd, samp) {
+	font-size: 1em;
+}
+
+:where(small) {
+	font-size: 80%;
+}
+
+/* Embedded content */
+:where(audio, canvas, iframe, img, svg, video) {
+	vertical-align: middle;
+}
+
+:where(iframe) {
+	border-style: none;
+}
+
+:where(svg:not([fill])) {
+	fill: currentColor;
+}
+
+/* Tabular data */
+:where(table) {
+	border-collapse: collapse;
+	border-color: inherit;
+	text-indent: 0;
+}
+
+/* Forms — baseline normalisation */
+:where(button, input, select) {
+	margin: 0;
+}
+
+:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
+	-webkit-appearance: button;
+}
+
+:where(fieldset) {
+	border: 1px solid #a0a0a0;
+}
+
+:where(progress) {
+	vertical-align: baseline;
+}
+
+:where(textarea) {
+	margin: 0;
+	resize: vertical;
+}
+
+:where([type="search" i]) {
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+::-webkit-input-placeholder {
+	color: inherit;
+	opacity: 0.54;
+}
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button;
+	font: inherit;
+}
+
+/* Forms — typography and colour inheritance */
+:where(button, input, select, textarea) {
+	background-color: transparent;
+	border: 1px solid WindowFrame;
+	color: inherit;
+	font: inherit;
+	letter-spacing: inherit;
+	padding: 0.25em 0.375em;
+}
+
+:where([type="color" i], [type="range" i]) {
+	border-width: 0;
+	padding: 0;
+}
+
+/* Interactive */
+:where(details > summary:first-of-type) {
+	display: list-item;
+}
+
+/* Accessibility */
+:where([aria-busy="true" i]) {
+	cursor: progress;
+}
+
+:where([aria-controls]) {
+	cursor: pointer;
+}
+
+:where([aria-disabled="true" i], [disabled]) {
+	cursor: not-allowed;
+}
+
+:where([aria-hidden="false" i][hidden]) {
+	display: initial;
+}
+
+:where([aria-hidden="false" i][hidden]:not(:focus)) {
+	clip: rect(0, 0, 0, 0);
+	position: absolute;
+}
+
+/* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-delay: -1ms !important;
+		animation-duration: 1ms !important;
+		animation-iteration-count: 1 !important;
+		background-attachment: initial !important;
+		scroll-behavior: auto !important;
+		transition-delay: 0s !important;
+		transition-duration: 0s !important;
+	}
+}
 
 /* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
 :root {

package/src/css/layers.stories.js

@@ -0,0 +1,113 @@
+import { html } from "lit";
+
+const meta = {
+	title: "Styles/CSS Layers",
+};
+
+export default meta;
+
+export const LayerOrder = {
+	render: () => html`
+		<div style="max-width: 40rem;">
+			<h2>CSS Layers</h2>
+			<p>Styles are organized into CSS cascade layers, from lowest to highest priority:</p>
+
+			<ol>
+				<li><strong>reset</strong> — sanitize.css, root defaults</li>
+				<li><strong>base</strong> — typography, element styles</li>
+				<li><strong>utilities</strong> — focus-ring, helpers</li>
+				<li><strong>components</strong> — web component styles</li>
+			</ol>
+
+			<p>Unlayered styles (your overrides, theme variables) always win.</p>
+		</div>
+	`,
+};
+
+export const LayerOverrideDemo = {
+	render: () => html`
+		<style>
+			/* This override is unlayered, so it beats all layers */
+			.layer-demo-override {
+				color: var(--g-theme-color-content-brand, rebeccapurple);
+				font-weight: bold;
+			}
+		</style>
+		<div style="max-width: 40rem; display: flex; flex-direction: column; gap: 1.5rem;">
+			<h2>Layer Override Demo</h2>
+			<p>Because styles are layered, overriding component/base styles is straightforward — no <code>!important</code> needed.</p>
+
+			<div>
+				<h3>Default paragraph (base layer)</h3>
+				<p>This paragraph uses the default typography styles from the <code>base</code> layer.</p>
+			</div>
+
+			<div>
+				<h3>Overridden paragraph (unlayered)</h3>
+				<p class="layer-demo-override">This paragraph is overridden with an unlayered style — it wins over the base layer automatically.</p>
+			</div>
+
+			<div>
+				<h3>Component with override</h3>
+				<grantcodes-button>Default button</grantcodes-button>
+				<style>
+					.custom-btn::part(button) {
+						border-radius: 999px;
+					}
+				</style>
+				<grantcodes-button class="custom-btn">Custom border radius (unlayered override)</grantcodes-button>
+			</div>
+		</div>
+	`,
+};
+
+export const AllLayers = {
+	render: () => html`
+		<style>
+			.layers-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+				gap: 1rem;
+				max-width: 60rem;
+			}
+			.layer-card {
+				padding: 1rem;
+				border: 1px solid var(--g-theme-color-border-default, #ccc);
+				border-radius: var(--g-theme-border-radius-md, 0.5rem);
+			}
+			.layer-card h4 {
+				margin-top: 0;
+			}
+			.layer-card code {
+				font-size: 0.85em;
+			}
+		</style>
+		<h2>All Layers</h2>
+		<div class="layers-grid">
+			<div class="layer-card">
+				<h4>1. reset</h4>
+				<p>Lowest priority. Normalizes browser defaults.</p>
+				<code>sanitize.css</code><br>
+				<code>::selection</code><br>
+				<code>::backdrop</code>
+			</div>
+			<div class="layer-card">
+				<h4>2. base</h4>
+				<p>Typography and HTML element styles.</p>
+				<code>typography.css</code><br>
+				<code>elements.css</code>
+			</div>
+			<div class="layer-card">
+				<h4>3. utilities</h4>
+				<p>Reusable utility classes.</p>
+				<code>focus-ring.css</code><br>
+				<code>helpers.css</code>
+			</div>
+			<div class="layer-card">
+				<h4>4. components</h4>
+				<p>All web component styles.</p>
+				<code>accordion</code>, <code>button</code>, <code>card</code>, etc.
+			</div>
+		</div>
+	`,
+};

package/src/lib/styles/all.css

@@ -0,0 +1,37 @@
+@layer components {
+  @import "./focus-ring.css";
+  @import "../../components/accordion/accordion.css";
+  @import "../../components/app-bar/app-bar.css";
+  @import "../../components/avatar/avatar.css";
+  @import "../../components/badge/badge.css";
+  @import "../../components/breadcrumb/breadcrumb.css";
+  @import "../../components/button/button.css";
+  @import "../../components/button-group/button-group.css";
+  @import "../../components/card/card.css";
+  @import "../../components/code-preview/code-preview.css";
+  @import "../../components/container/container.css";
+  @import "../../components/cta/cta.css";
+  @import "../../components/dialog/dialog.css";
+  @import "../../components/dropdown/dropdown.css";
+  @import "../../components/dropzone/dropzone.css";
+  @import "../../components/feature-list/feature-list.css";
+  @import "../../components/footer/footer.css";
+  @import "../../components/footer/footer-column.css";
+  @import "../../components/form-field/form-field.css";
+  @import "../../components/gallery/gallery.css";
+  @import "../../components/hero/hero.css";
+  @import "../../components/icon/icon.css";
+  @import "../../components/loading/loading.css";
+  @import "../../components/logo-cloud/logo-cloud.css";
+  @import "../../components/media-text/media-text.css";
+  @import "../../components/newsletter/newsletter.css";
+  @import "../../components/notice/notice.css";
+  @import "../../components/pagination/pagination.css";
+  @import "../../components/pricing/pricing.css";
+  @import "../../components/sidebar/sidebar.css";
+  @import "../../components/stats/stats.css";
+  @import "../../components/tabs/tabs.css";
+  @import "../../components/testimonials/testimonials.css";
+  @import "../../components/toast/toast.css";
+  @import "../../components/tooltip/tooltip.css";
+}

package/src/react.js

@@ -0,0 +1,36 @@
+export { Accordion } from "./components/accordion/accordion.react.js"
+export { AppBar } from "./components/app-bar/app-bar.react.js"
+export { Avatar } from "./components/avatar/avatar.react.js"
+export { Badge } from "./components/badge/badge.react.js"
+export { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/breadcrumb.react.js"
+export { Button } from "./components/button/button.react.js"
+export { ButtonGroup } from "./components/button-group/button-group.react.js"
+export { Card } from "./components/card/card.react.js"
+export { CodePreview } from "./components/code-preview/code-preview.react.js"
+export { Container } from "./components/container/container.react.js"
+export { Cta } from "./components/cta/cta.react.js"
+export { Dialog } from "./components/dialog/dialog.react.js"
+export { Dropdown, DropdownItem } from "./components/dropdown/dropdown.react.js"
+export { Dropzone } from "./components/dropzone/dropzone.react.js"
+export { FeatureList } from "./components/feature-list/feature-list.react.js"
+export { Footer, FooterColumn } from "./components/footer/footer.react.js"
+export { FormField } from "./components/form-field/form-field.react.js"
+export { Gallery } from "./components/gallery/gallery.react.js"
+export { GalleryImage } from "./components/gallery/gallery-image.react.js"
+export { Hero } from "./components/hero/hero.react.js"
+export { Icon } from "./components/icon/icon.react.js"
+export { Loading } from "./components/loading/loading.react.js"
+export { LogoCloud } from "./components/logo-cloud/logo-cloud.react.js"
+export { MediaText } from "./components/media-text/media-text.react.js"
+export { Newsletter } from "./components/newsletter/newsletter.react.js"
+export { Notice } from "./components/notice/notice.react.js"
+export { Pagination } from "./components/pagination/pagination.react.js"
+export { Pricing } from "./components/pricing/pricing.react.js"
+export { Sidebar } from "./components/sidebar/sidebar.react.js"
+export { Stats } from "./components/stats/stats.react.js"
+export { Tab } from "./components/tabs/tab.react.js"
+export { Tabs } from "./components/tabs/tabs.react.js"
+export { TabsButton } from "./components/tabs/internal/tabs-button.react.js"
+export { Testimonials } from "./components/testimonials/testimonials.react.js"
+export { Toast, ToastContainer } from "./components/toast/toast.react.js"
+export { Tooltip } from "./components/tooltip/tooltip.react.js"

package/src/react.test.js

@@ -0,0 +1,56 @@
+import { describe, it } from "node:test";
+import { strict as assert } from "node:assert";
+
+describe("React Wrappers", () => {
+	it("should export all component wrappers", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.Button, "Button wrapper should be exported");
+		assert.ok(react.Card, "Card wrapper should be exported");
+		assert.ok(react.Dialog, "Dialog wrapper should be exported");
+		assert.ok(react.Accordion, "Accordion wrapper should be exported");
+		assert.ok(react.Tooltip, "Tooltip wrapper should be exported");
+		assert.ok(react.Hero, "Hero wrapper should be exported");
+		assert.ok(react.Container, "Container wrapper should be exported");
+		assert.ok(react.Icon, "Icon wrapper should be exported");
+		assert.ok(react.Loading, "Loading wrapper should be exported");
+		assert.ok(react.Notice, "Notice wrapper should be exported");
+	});
+
+	it("should export at least 35 component wrappers", async () => {
+		const react = await import("./react.js");
+		const exportCount = Object.keys(react).length;
+		assert.ok(
+			exportCount >= 35,
+			`Expected at least 35 exports, got ${exportCount}`,
+		);
+	});
+
+	it("should export event-mapped components", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.AppBar, "AppBar wrapper should be exported");
+		assert.ok(react.Dropdown, "Dropdown wrapper should be exported");
+		assert.ok(react.DropdownItem, "DropdownItem wrapper should be exported");
+		assert.ok(react.Sidebar, "Sidebar wrapper should be exported");
+		assert.ok(react.Toast, "Toast wrapper should be exported");
+	});
+
+	it("should export compound component wrappers", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.Breadcrumb, "Breadcrumb wrapper should be exported");
+		assert.ok(
+			react.BreadcrumbItem,
+			"BreadcrumbItem wrapper should be exported",
+		);
+		assert.ok(react.Footer, "Footer wrapper should be exported");
+		assert.ok(react.FooterColumn, "FooterColumn wrapper should be exported");
+		assert.ok(react.Gallery, "Gallery wrapper should be exported");
+		assert.ok(react.GalleryImage, "GalleryImage wrapper should be exported");
+		assert.ok(react.Tabs, "Tabs wrapper should be exported");
+		assert.ok(react.Tab, "Tab wrapper should be exported");
+		assert.ok(react.TabsButton, "TabsButton wrapper should be exported");
+		assert.ok(
+			react.ToastContainer,
+			"ToastContainer wrapper should be exported",
+		);
+	});
+});