v0.2.0

.changeset/brown-bobcats-draw.md

@@ -0,0 +1,21 @@
+---
+"@studiocms/ui": minor
+---
+
+### 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.

docs/astro.config.mts

@@ -1,7 +1,7 @@
 import starlight from '@astrojs/starlight';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
+import ui from '@studiocms/ui'
 import { defineConfig, envField } from 'astro/config';
-import starlightImageZoom from 'starlight-image-zoom';
 import rehypePluginKit from './src/plugins/rehypePluginKit';
 
 // Define the Site URL
@@ -63,7 +63,7 @@ export default defineConfig({
 			defaultLocale: 'root',
 			locales,
 			social: {
-				github: 'https://github.com/withstudiocms/studiocms',
+				github: 'https://github.com/withstudiocms/ui',
 				discord: 'https://chat.studiocms.dev',
 				youtube: 'https://www.youtube.com/@StudioCMS',
 				'x.com': 'https://x.com/withstudiocms',
@@ -91,14 +91,14 @@ export default defineConfig({
 					tag: 'meta',
 					attrs: {
 						property: 'og:image',
-						content: `${site}og.jpg?v=1`,
+						content: `${site}og.png?v=1`,
 					},
 				},
 				{
 					tag: 'meta',
 					attrs: {
 						property: 'twitter:image',
-						content: `${site}og.jpg?v=1`,
+						content: `${site}og.png?v=1`,
 					},
 				},
 				{
@@ -159,6 +159,10 @@ export default defineConfig({
 						{
 							label: 'Installation',
 							link: 'docs/',
+							badge: {
+								text: 'Updated!',
+								variant: 'success',
+							}
 						},
 						{
 							label: 'Release Notes',
@@ -170,15 +174,29 @@ export default defineConfig({
 						},
 					],
 				},
+				{
+					label: 'Upgrade Guides',
+					autogenerate: {
+						directory: 'docs/upgrade-guides',
+						collapsed: true,
+					},
+				},
 				{
 					label: 'Components',
 					autogenerate: {
 						directory: 'docs/components',
 						collapsed: true,
 					},
 				},
+				{
+					label: 'Utilities',
+					autogenerate: {
+						directory: 'docs/utilities',
+						collapsed: true,
+					},
+				},
 			],
-			plugins: [starlightImageZoom()],
 		}),
+		// ui(),
 	],
 });

docs/ec.config.mjs

@@ -32,6 +32,7 @@ export default defineEcConfig({
 		frames: {
 			editorActiveTabIndicatorBottomColor: 'var(--sl-color-accent)',
 		},
+		gutterForeground: 'rgba(166, 166, 166, 0.84)',
 		twoSlash: {
 			cursorColor: '#f8f8f2',
 		},

docs/lunaria.config.ts

@@ -5,7 +5,6 @@ export default defineConfig({
 		name: 'withstudiocms/ui',
 		rootDir: 'docs',
 		hosting: 'github',
-		// TODO: Change to 'main' this once the branch is ready to merge
 		branch: 'main',
 	},
 	sourceLocale: {

docs/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@11ty/eleventy-fetch": "^5.0.1",
     "@astrojs/check": "catalog:",
-    "@astrojs/starlight": "https://gitpkg.now.sh/HiDeoo/starlight/packages/starlight?hd-astro-v5",
+    "@astrojs/starlight": "0.30.0",
     "@expressive-code/plugin-line-numbers": "^0.38.3",
     "@fontsource-variable/fira-code": "^5.1.0",
     "@fontsource-variable/onest": "catalog:",
@@ -47,8 +47,7 @@
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "sharp": "^0.33.5",
-    "starlight-image-zoom": "^0.9.0",
-    "starlight-package-managers": "^0.8.0",
+    "starlight-package-managers": "^0.8.1",
     "tsm": "^2.3.0",
     "typescript": "catalog:",
     "unist-util-visit": "^5.0.0"

docs/src/components/PreviewCard.astro

@@ -2,11 +2,16 @@
 type Props = {
 	vertical?: boolean;
 	gapSize?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  fullHeight?: boolean;
 };
 
-const { vertical = false, gapSize = 'md' } = Astro.props;
+const { vertical = false, gapSize = 'md', fullWidth, fullHeight } = Astro.props;
 ---
-<div class="preview-card not-content" class:list={[vertical && "vertical", gapSize]}>
+<div 
+  class="preview-card not-content"
+  class:list={[vertical && "vertical", gapSize]}
+>
   <slot />
 </div>
 <style>
@@ -18,6 +23,7 @@ const { vertical = false, gapSize = 'md' } = Astro.props;
     align-items: center;
     justify-content: center;
     gap: 1rem;
+    flex-wrap: wrap;
   }
 
   .preview-card.vertical {

docs/src/components/landing/EcosystemSection.astro

@@ -30,7 +30,7 @@ import SwordsIcon from '~/assets/swords.svg';
             </p>
         </div>
         <div class="benefit-card">
-            <Icon name='user-group' width={24} height={24} />
+            <Icon name='user-group' width={24} height={24} aria-hidden="true" />
             <h3>Community-built</h3>
             <p>
                 StudioCMS isn't a closed-off project or organization - it is made up of Astro 

docs/src/components/landing/HeroSection.astro

@@ -17,7 +17,7 @@ import {
 import Icon from '@studiocms/ui/utils/Icon.astro';
 import GitHubIcon from '~/components/icons/GitHubIcon.astro';
 ---
-<section class="hero not-content">
+<section class="hero not-content" aria-label="A bento grid showcasing various different components from @studiocms/ui">
    <div class="checkbox">
       <Checkbox
          label='Checkbox'
@@ -28,6 +28,7 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
    <div class="input">
       <Input
          placeholder='Input'
+         aria-label="Input example"
       />
    </div>
    <div class="toggle">
@@ -67,26 +68,26 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
       />
    </div>
    <div class="hero-text">
-      <h1>Why install another Framework just for UI?</h1>
+      <h1 id="_top">Why install another Framework just for UI?</h1>
       <div class="hero-desc">
          <p>StudioCMS UI is an Astro-native UI library.</p>
-         <p>All the components you need, without the bloat of React.</p>
+         <p>All the components you need, without the pain of React.</p>
       </div>
       <div class="cta-buttons">
          <Button color='primary' as="a" href={'/docs/'} size='lg'>
             <Icon name='book-open' slot="start-content" width={24} height={24} />
             Get started
          </Button>
-         <Button color='default' as="a" href={'https://github.com/withstudiocms/ui'} style={'color: white;'} size='lg'>
+         <Button color='default' as="a" href={'https://github.com/withstudiocms/ui'} size='lg'>
             <GitHubIcon width={24} height={23.5} class="github-icon" slot={'start-content'} />
             Star on GitHub
          </Button>
       </div>
    </div>
    <div class="theme">
       <ThemeToggle>
-         <Icon name='moon' width={24} height={24} slot="dark" />
-         <Icon name='sun' width={24} height={24} slot="light" />
+         <Icon name='moon' width={24} height={24} slot="dark" aria-label="Switch to light mode" />
+         <Icon name='sun' width={24} height={24} slot="light" aria-label="Switch to dark mode" />
       </ThemeToggle>
    </div>
    <div class="divider">
@@ -120,6 +121,7 @@ import GitHubIcon from '~/components/icons/GitHubIcon.astro';
          fullWidth
          fullHeight
          placeholder={'Countless stars scattered,\nacross obsidian skies,\nfrosty breath lingers.'}
+         aria-label="Textarea example"
       />
    </div>
    <div class="toast">