v0.3.1 (#27)

* Add pathe to fix path issues on windows and add astro-integration keyword

* Add changeset

* Virtualize globals.css import

* Remove integration from docs

---

Co-authored-by: Adam Matthiesen <30383579+Adammatthiesen@users.noreply.github.com>
Co-authored-by: itisgriff <152933301+itisgriff@users.noreply.github.com>

.changeset/empty-cars-turn.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": minor
+---
+
+Add pathe as a dependency to deal with path issues on Windows

.vscode/settings.json

@@ -18,6 +18,7 @@
     "louisescher",
     "Matthiesen",
     "onest",
+    "pathe",
     "socialproof",
     "studiocms",
     "Thum",

docs/src/content/docs/docs/changelog.md

@@ -8,6 +8,26 @@ editUrl: false
 This document contains release notes for the `@studiocms/ui` package.
 For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
 
+## 0.3.0
+
+- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
+
+  This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
+  an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
+
+  ### Components
+
+  - Added a new `<Tabs />` component based on the tabs on the homepage.
+  - Updated the `<Card />` component to include a new "filled" style.
+
+  ### Utilities
+
+  - Moved the `ThemeHelper` class to its own category in the docs.
+
+  ### Accessibility
+
+  - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
+
 ## 0.1.0
 
 - [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release

packages/studiocms_ui/package.json

@@ -21,7 +21,8 @@
     "astro-ui-library",
     "astro-components",
     "studiocms",
-    "ui-library"
+    "ui-library",
+    "astro-integration"
   ],
   "homepage": "https://ui.studiocms.dev",
   "publishConfig": {
@@ -42,8 +43,9 @@
     "./types": "./src/types/index.ts"
   },
   "dependencies": {
+    "@iconify-json/heroicons": "catalog:",
     "@iconify/utils": "catalog:",
-    "@iconify-json/heroicons": "catalog:"
+    "pathe": "catalog:"
   },
   "peerDependencies": {
     "astro": "catalog:peers"

packages/studiocms_ui/src/integration.ts

@@ -1,17 +1,26 @@
 import type { AstroIntegration } from 'astro';
 import { createResolver } from './utils/create-resolver';
+import { viteVirtualModulePluginBuilder } from './utils/virtual-module-plugin-builder'
 
 // biome-ignore lint/complexity/noBannedTypes: Will be implemented in v0.3.0
 type Options = {};
 
 export default function integration(options: Options = {}): AstroIntegration {
 	const { resolve } = createResolver(import.meta.url);
 
+	const globalCss = viteVirtualModulePluginBuilder('studiocms:ui/global-css', 'sui-global-css', `import '${resolve('./css/global.css')}'`);
+
 	return {
 		name: '@studiocms/ui',
 		hooks: {
-			'astro:config:setup': ({ injectScript }) => {
-				injectScript('page-ssr', `import '${resolve('./css/global.css')}'`);
+			'astro:config:setup': ({ injectScript, updateConfig }) => {
+				updateConfig({
+					vite: {
+						plugins: [globalCss()],
+					},
+				});
+
+				injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
 			},
 		},
 	};

packages/studiocms_ui/src/utils/create-resolver.ts

@@ -1,5 +1,5 @@
-import { dirname, resolve } from 'node:path'; // Swapped out pathe for node:path to cut down on dependencies
 import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'pathe';
 
 /**
  * From the Astro Integration Kit (https://astro-integration-kit.netlify.app/).

packages/studiocms_ui/src/utils/virtual-module-plugin-builder.ts

@@ -0,0 +1,37 @@
+import type { AstroConfig } from 'astro';
+
+type VitePlugin = Required<AstroConfig['vite']>['plugins'][number];
+
+/**
+ * Builds a Vite plugin that creates a virtual module.
+ *
+ * @param moduleId - The ID of the virtual module.
+ * @param name - The name of the plugin.
+ * @param moduleContent - The content of the virtual module.
+ * @returns A Vite plugin that resolves and loads the virtual module.
+ */
+export function viteVirtualModulePluginBuilder(
+  moduleId: string,
+  name: string,
+  moduleContent: string
+) {
+  return function modulePlugin(): VitePlugin {
+      const resolvedVirtualModuleId = `\0${moduleId}`; // Prefix with \0 to avoid conflicts
+
+      return {
+          name,
+          resolveId(id) {
+            if (id === moduleId) {
+              return resolvedVirtualModuleId;
+            }
+            return;
+          },
+          load(id) {
+            if (id === resolvedVirtualModuleId) {
+              return moduleContent;
+            }
+            return;
+          },
+      };
+  };
+}

pnpm-workspace.yaml

@@ -11,9 +11,10 @@ catalog:
   "@iconify/utils": ^2.1.33
   "@sentry/astro": ^8.42.0
   "@types/node": ^20.14.11
+  pathe: ^1.1.2
   astro: ^5.0.3
   typescript: ^5.7.2
 
 catalogs:
   peers:
-    astro: ^4.5 || ^5.0.0-beta.0
+    astro: ^4.5 || ^5.0.0-beta.0