@grantcodes/ui 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.2.0](https://github.com/grantcodes/ui/compare/ui-v2.1.1...ui-v2.2.0) (2026-03-25)
+
+
+### Features
+
+* **01-01:** configure Vite and Storybook for CSS import attributes ([039436c](https://github.com/grantcodes/ui/commit/039436c20b160f1889944df02cab958641e768fe))
+* **02-01:** migrate button component to CSS import attributes with shared focus-ring ([a579ffd](https://github.com/grantcodes/ui/commit/a579ffd08916b37050d46ef459c458c1474567f9))
+* **02-01:** migrate focus-ring and badge to CSS import attributes ([becaad7](https://github.com/grantcodes/ui/commit/becaad7eed6ea0f233deb675b07edf1109840925))
+* **02-01:** update button to use #styles alias for focus-ring import ([6d1be3d](https://github.com/grantcodes/ui/commit/6d1be3db08f0575288436dc0eff25517060b1f1e))
+* **03-01:** migrate all 31 remaining components to CSS import attributes ([89eb3cd](https://github.com/grantcodes/ui/commit/89eb3cdbddf200dac6b606eba28f3f5f99bb663d))
+* **04-01:** add explicit CSS subpath exports for all components ([348746f](https://github.com/grantcodes/ui/commit/348746f0cf2b6de049b6ec20b6ed0887ed5dadfd))
+* **ui:** add Lit CSSResult for SSR and TypeScript declarations ([bada435](https://github.com/grantcodes/ui/commit/bada435b8dcd0fbfae75310e32c1e152ca736d84))
+* **ui:** migrate CSS styles from JS to CSS import attributes ([b9cac40](https://github.com/grantcodes/ui/commit/b9cac406ab902b3837a39b184d683849fe242402))
+
+
+### Bug Fixes
+
+* **04-01:** remove unused import in exports test ([ab70a17](https://github.com/grantcodes/ui/commit/ab70a1759545d837169d10eebe4c4da7e9387e59))
+* **ui:** add SSR-safe CSSStyleSheet guard and Astro vite plugin ([b75bddc](https://github.com/grantcodes/ui/commit/b75bddc7315107fe6f84f17f7320efb699f40f45))
+* **ui:** extract CSS import attributes plugin and fix Storybook compatibility ([5c282fc](https://github.com/grantcodes/ui/commit/5c282fc82387ef8278bb9273bf3b3522c3c7226b))
+
 ## [2.1.1](https://github.com/grantcodes/ui/compare/ui-v2.1.0...ui-v2.1.1) (2026-03-15)
 
 

package/css-import-attributes.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Type declarations for CSS files imported with `{ type: "css" }`.
+ *
+ * Usage: Add to your tsconfig.json compilerOptions.types or reference directly:
+ *   /// <reference types="@grantcodes/ui/css-import-attributes" />
+ *
+ * At build time, the Vite plugin returns a CSSStyleSheet (client) or
+ * a Lit CSSResult (SSR). Both are accepted by Lit's `static styles`.
+ */
+declare module "*.css" {
+	const styles: CSSStyleSheet;
+	export default styles;
+}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
   "module": "src/main.js",
   "types": "src/main.d.ts",
   "author": "grantcodes",
+  "imports": {
+    "#styles/*": "./src/lib/styles/*"
+  },
   "exports": {
     ".": {
       "types": "./src/main.d.ts",
@@ -24,23 +27,30 @@
       "import": "./src/css/themes/*",
       "require": "./src/css/themes/*"
     },
+    "./styles/focus-ring.css": "./src/lib/styles/focus-ring.css",
     "./components/*": {
       "import": "./src/components/*",
       "require": "./src/components/*"
     },
-    "./fonts/*": "./src/fonts/*"
+    "./fonts/*": "./src/fonts/*",
+    "./css-import-attributes": {
+      "types": "./css-import-attributes.d.ts"
+    },
+    "./vite-plugin": "./vite-plugin-css-import-attributes.js"
   },
   "license": "MIT",
   "dependencies": {
     "lit": "^3.3.1",
     "sanitize.css": "^13.0.0",
     "shiki": "^3.17.1",
-    "@grantcodes/style-dictionary": "^1.3.0"
+    "@grantcodes/style-dictionary": "^1.3.1"
   },
   "devDependencies": {
+    "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
     "@biomejs/biome": "2.3.8",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@grantcodes/commit": "^2.0.0",
+    "@lit-labs/ssr-dom-shim": "^1.5.1",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-docs": "^10.1.4",
     "@storybook/addon-themes": "^10.1.4",
@@ -60,6 +70,8 @@
   "files": [
     "src/**/*",
     "custom-elements.json",
+    "css-import-attributes.d.ts",
+    "vite-plugin-css-import-attributes.js",
     "CHANGELOG.md",
     "README.md",
     "LICENCE"
@@ -77,6 +89,6 @@
     "fix:lint": "npx @biomejs/biome format --write src",
     "test": "run-s lint test:unit",
     "lint": "npx @biomejs/biome lint src",
-    "test:unit": "NODE_ENV=test node --test --test-concurrency=1 src/**/*.test.js"
+    "test:unit": "NODE_ENV=test node --import @lit-labs/ssr-dom-shim/register-css-hook.js --test --test-concurrency=1 src/**/*.test.js"
   }
 }

package/src/components/accordion/accordion.component.js

@@ -1,9 +1,10 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { accordionStyles } from "./accordion.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import accordionStyles from "./accordion.css" with { type: "css" };
 
 export class GrantCodesAccordion extends LitElement {
-	static styles = [accordionStyles];
+	static styles = [focusRingStyles, accordionStyles];
 
 	static properties = {
 		items: { type: Array },

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

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const accordionStyles = css`
-  ${focusRingStyles}
-
   :host {
     display: block;
   }
@@ -63,4 +57,3 @@ export const accordionStyles = css`
     padding: var(--g-theme-spacing-md);
     background: var(--g-theme-color-background-default);
   }
-`;

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

@@ -1,10 +1,11 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { appBarStyles } from "./app-bar.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import appBarStyles from "./app-bar.css" with { type: "css" };
 
 export class GrantCodesAppBar extends LitElement {
-	static styles = [appBarStyles];
+	static styles = [focusRingStyles, appBarStyles];
 
 	static properties = {
 		sticky: { type: Boolean },
@@ -46,13 +47,14 @@ export class GrantCodesAppBar extends LitElement {
 	}
 
 	render() {
-		const appBarClass = cx("app-bar", {
+		const classes = classMap({
+			"app-bar": true,
 			"app-bar--sticky": this.sticky,
 			"app-bar--transparent": this.transparent,
 		});
 
 		return html`
-			<header class="${appBarClass}">
+			<header class=${classes}>
 				<div class="app-bar__container">
 					<div class="app-bar__logo">
 						<slot name="logo"></slot>

package/src/components/app-bar/{app-bar.styles.js → app-bar.css}

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const appBarStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -225,4 +219,3 @@ export const appBarStyles = css`
     padding: 0;
     list-style: none;
   }
-`;

package/src/components/avatar/avatar.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { avatarStyles } from "./avatar.styles.js";
+import avatarStyles from "./avatar.css" with { type: "css" };
 
 export class GrantCodesAvatar extends LitElement {
 	static properties = {

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const avatarStyles = css`
 
 /* Inlined component-base mixin */
 *,
@@ -39,4 +36,3 @@ export const avatarStyles = css`
   line-height: 1;
 }
 
-`;

package/src/components/badge/badge.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { badgeStyles } from "./badge.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import badgeStyles from "./badge.css" with { type: "css" };
 
 export class GrantCodesBadge extends LitElement {
 	static styles = [badgeStyles];
@@ -21,12 +21,13 @@ export class GrantCodesBadge extends LitElement {
 	}
 
 	render() {
-		const badgeClass = cx("badge", {
+		const classes = classMap({
+			badge: true,
 			[`badge--${this.variant}`]: Boolean(this.variant),
 		});
 
 		return html`
-			<span class="${badgeClass}">
+			<span class=${classes}>
 				<span class="badge__content">
 					<slot></slot>
 				</span>

package/src/components/badge/badge.css

@@ -0,0 +1,87 @@
+*,
+*::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/breadcrumb/breadcrumb.component.js

@@ -1,9 +1,10 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { breadcrumbStyles } from "./breadcrumb.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import breadcrumbStyles from "./breadcrumb.css" with { type: "css" };
 
 export class GrantCodesBreadcrumb extends LitElement {
-	static styles = [breadcrumbStyles];
+	static styles = [focusRingStyles, breadcrumbStyles];
 
 	static properties = {
 		separator: { type: String },
@@ -71,7 +72,7 @@ export class GrantCodesBreadcrumb extends LitElement {
 }
 
 export class GrantCodesBreadcrumbItem extends LitElement {
-	static styles = [breadcrumbStyles];
+	static styles = [focusRingStyles, breadcrumbStyles];
 
 	static properties = {
 		href: { type: String },

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

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const breadcrumbStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -89,4 +83,3 @@ export const breadcrumbStyles = css`
       color: var(--g-color-brand-purple-400);
     }
   }
-`;

package/src/components/button/button.component.js

@@ -1,13 +1,14 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { literal } from "lit/static-html.js";
-import { buttonStyles } from "./button.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import buttonStyles from "./button.css" with { type: "css" };
 
 export class GrantCodesButton 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 = [buttonStyles];
+	static styles = [focusRingStyles, buttonStyles];
 
 	static properties = {
 		href: { type: String },

package/src/components/button/button.css

@@ -0,0 +1,62 @@
+/* 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/components/button-group/button-group.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { buttonGroupStyles } from "./button-group.styles.js";
+import buttonGroupStyles from "./button-group.css" with { type: "css" };
 
 export class GrantCodesButtonGroup extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/button-group/{button-group.styles.js → button-group.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const buttonGroupStyles = css`
   /* Inlined component-base mixin */
   *,
   *::before,
@@ -40,4 +37,3 @@ export const buttonGroupStyles = css`
     position: relative;
     z-index: 1;
   }
-`;

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

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { cardStyles } from "./card.styles.js";
+import cardStyles from "./card.css" with { type: "css" };
 
 export class GrantCodesCard extends LitElement {
 	static properties = {

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const cardStyles = css`
   /* Inlined component-base mixin */
   *,
   *::before,
@@ -151,4 +148,3 @@ export const cardStyles = css`
     transform: translateY(-1px);
     border-color: var(--g-theme-color-border-active);
   }
-`;

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { codePreviewStyles } from "./code-preview.styles.js";
+import codePreviewStyles from "./code-preview.css" with { type: "css" };
 
 export class GrantCodesCodePreview extends LitElement {
 	static styles = [codePreviewStyles];

package/src/components/code-preview/{code-preview.styles.js → code-preview.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const codePreviewStyles = css`
 
 .code-preview > pre {
   display: block;
@@ -15,4 +12,3 @@ export const codePreviewStyles = css`
   padding: var(--g-theme-spacing-md);
 }
 
-`;

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { containerStyles } from "./container.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import containerStyles from "./container.css" with { type: "css" };
 
 export class GrantCodesContainer extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles
@@ -22,7 +22,8 @@ export class GrantCodesContainer extends LitElement {
 	}
 
 	render() {
-		const containerClass = cx("container", {
+		const classes = classMap({
+			container: true,
 			"container--wide": this.align === "wide",
 			"container--full": this.align === "full",
 			"container--prose": this.align === "prose",
@@ -31,7 +32,7 @@ export class GrantCodesContainer extends LitElement {
 		});
 
 		return html`
-      <div class="${containerClass}">
+      <div class=${classes}>
         <slot></slot>
       </div>
     `;

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const containerStyles = css`
   .container {
     display: flex;
     flex-direction: column;
@@ -29,10 +26,6 @@ export const containerStyles = css`
     inset-inline-start: 50%;
     position: relative;
     inset-inline-end: 50%;
-    margin-inline-start: -50vw;
-    margin-inline-end: -50vw;
-    max-inline-size: 100vw;
-    inline-size: 100vw;
     margin-inline-start: -50dvw;
     margin-inline-end: -50dvw;
     max-inline-size: 100dvw;
@@ -42,4 +35,3 @@ export const containerStyles = css`
   .container--nopad {
     padding-inline: 0;
   }
-`;

package/src/components/cta/cta.component.js

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

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const ctaStyles = css`
   :host {
     display: block;
   }
@@ -61,4 +58,3 @@ export const ctaStyles = css`
   .cta__secondary-link:hover {
     color: var(--g-theme-color-content-brand, #7c3aed);
   }
-`;

package/src/components/dialog/dialog.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { dialogStyles } from "./dialog.styles.js";
+import dialogStyles from "./dialog.css" with { type: "css" };
 
 export class GrantCodesDialog extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dialogStyles = css`
 
 .dialog {
   width: 100%;
@@ -71,4 +68,3 @@ export const dialogStyles = css`
   --g-theme-border-radius-md: 0;
 }
 
-`;

package/src/components/dropdown/dropdown.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { generateId } from "../../lib/generate-id.js";
-import { dropdownStyles } from "./dropdown.styles.js";
+import dropdownStyles from "./dropdown.css" with { type: "css" };
 
 export class GrantCodesDropdown extends LitElement {
 	static styles = [dropdownStyles];

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dropdownStyles = css`
 	*,
 	*::before,
 	*::after {
@@ -125,4 +122,3 @@ export const dropdownStyles = css`
 			}
 		}
 	}
-`;

package/src/components/dropzone/dropzone.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { dropzoneStyles } from "./dropzone.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import dropzoneStyles from "./dropzone.css" with { type: "css" };
 
 export class GrantCodesDropzone extends LitElement {
 	static styles = [dropzoneStyles];
@@ -121,13 +121,14 @@ export class GrantCodesDropzone extends LitElement {
 	}
 
 	render() {
-		const dropzoneClass = cx("dropzone", {
+		const classes = classMap({
+			dropzone: true,
 			"dropzone--fullscreen": this._fullscreen,
 		});
 
 		return html`
 			<div
-				class=${dropzoneClass}
+				class=${classes}
 				@mouseleave=${this._forceDisableFullscreen}
 				@dragend=${this._disableFullscreen}
 				@dragleave=${this._disableFullscreen}

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

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dropzoneStyles = css`
 *,
 *::before,
 *::after {
@@ -61,4 +58,3 @@ export const dropzoneStyles = css`
 	position: fixed;
 	z-index: 12;
 }
-`;