rizzo-css 0.0.81 → 0.0.83

package/scaffold/vue/variants/full/src/config/docsNav.ts

@@ -0,0 +1,87 @@
+/**
+ * Docs sidebar nav for full template. Matches https://rizzo-css.vercel.app exactly.
+ * Local routes: /docs/overview, /docs/getting-started, /docs/components. All other links point to the main site.
+ */
+import { COMPONENT_CATEGORIES } from './componentCategories';
+
+const SITE_BASE = 'https://rizzo-css.vercel.app';
+const FRAMEWORK_PREFIX = '/docs/vue';
+
+function slugToTitle(slug: string): string {
+  return slug.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
+export interface DocsNavSection {
+  id: string;
+  label: string;
+}
+
+export interface DocsNavLink {
+  href: string;
+  label: string;
+  frameworkOnly?: boolean;
+  absolute?: boolean;
+  sections?: DocsNavSection[];
+  external?: boolean;
+}
+
+export interface DocsNavGroup {
+  label: string;
+  links: DocsNavLink[];
+}
+
+export const DOCS_NAV: DocsNavGroup[] = [
+  {
+    label: 'Introduction',
+    links: [
+      { href: '/docs/overview', label: 'Overview', absolute: true, sections: [{ id: 'overview', label: 'Overview' }, { id: 'installation', label: 'Installation' }, { id: 'components', label: 'Components' }, { id: 'blocks', label: 'Blocks' }] },
+      { href: `${SITE_BASE}/docs/showcase`, label: 'Showcase', absolute: true, external: true, sections: [{ id: 'components', label: 'Components' }, { id: 'themes', label: 'Themes' }, { id: 'blocks', label: 'Blocks' }, { id: 'examples', label: 'Examples' }] },
+      { href: '/docs/getting-started', label: 'Getting Started', absolute: true, sections: [{ id: 'installation', label: 'Installation' }, { id: 'installation-by-framework', label: 'By framework' }, { id: 'vanilla', label: 'Vanilla' }, { id: 'astro', label: 'Astro' }, { id: 'svelte', label: 'Svelte' }, { id: 'react', label: 'React' }, { id: 'vue', label: 'Vue' }, { id: 'project-structure', label: 'Project Structure' }, { id: 'development', label: 'Development' }, { id: 'building', label: 'Building' }, { id: 'using-components', label: 'Using Components' }, { id: 'using-themes', label: 'Using Themes' }, { id: 'css-architecture', label: 'CSS Architecture' }] },
+    ],
+  },
+  {
+    label: 'Foundations',
+    links: [
+      { href: `${SITE_BASE}/docs/design-system`, label: 'Design System', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/theming`, label: 'Theming', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/accessibility`, label: 'Accessibility', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/accessibility/manual-testing`, label: 'Manual testing checklist', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/colors`, label: 'Colors', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/tokens`, label: 'Tokens reference', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/best-practices`, label: 'Best Practices', absolute: true, external: true },
+    ],
+  },
+  {
+    label: 'Components',
+    links: [
+      { href: '/docs/components', label: 'Overview', absolute: true },
+      ...COMPONENT_CATEGORIES.flatMap((cat) =>
+        cat.slugs.map((slug) => ({
+          href: `${SITE_BASE}${FRAMEWORK_PREFIX}/components/${slug}`,
+          label: slugToTitle(slug),
+          absolute: true as const,
+          external: true as const,
+        }))
+      ),
+    ],
+  },
+  {
+    label: 'Blocks',
+    links: [
+      { href: `${SITE_BASE}/blocks`, label: 'Blocks overview', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/landing-hero`, label: 'Landing hero', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/pricing`, label: 'Pricing cards', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/dashboard-01`, label: 'Dashboard', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/docs-layout`, label: 'Docs layout', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/login`, label: 'Login', absolute: true, external: true },
+      { href: `${SITE_BASE}/blocks/signup`, label: 'Sign up', absolute: true, external: true },
+    ],
+  },
+  {
+    label: 'Examples',
+    links: [
+      { href: `${SITE_BASE}/docs/examples`, label: 'Examples overview', absolute: true, external: true },
+      { href: `${SITE_BASE}/docs/examples/form-layouts`, label: 'Form & layout examples', absolute: true, external: true, sections: [{ id: 'login-form', label: 'Login form' }, { id: 'contact-form', label: 'Contact form' }, { id: 'dashboard-stats', label: 'Dashboard stats cards' }, { id: 'card-grid', label: 'Card grid' }, { id: 'settings-panel', label: 'Settings panel' }] },
+    ],
+  },
+];

package/scaffold/vue/variants/full/src/layouts/BlocksLayout.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="docs" data-docs>
+    <div id="docs-sidebar-container">
+      <button
+        type="button"
+        class="docs__sidebar-toggle"
+        aria-label="Open blocks menu"
+        aria-expanded="false"
+        aria-controls="docs-sidebar"
+        data-docs-sidebar-toggle
+        @click="toggleSidebar"
+      >
+        <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+          <span></span><span></span><span></span>
+        </span>
+        <span class="docs__sidebar-toggle-text">Blocks</span>
+      </button>
+      <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true" @click="closeSidebar" />
+      <aside id="docs-sidebar" class="docs-sidebar" aria-label="Blocks navigation">
+        <nav class="docs-sidebar__nav">
+          <div class="docs-sidebar__group">
+            <h2 class="docs-sidebar__group-label">Blocks</h2>
+            <ul class="docs-sidebar__list">
+              <li v-for="item in BLOCKS_NAV" :key="item.href" class="docs-sidebar__item">
+                <a
+                  :href="item.href"
+                  class="docs-sidebar__link"
+                  :class="{ 'docs-sidebar__link--active': isActive(item) }"
+                  :aria-current="isActive(item) ? 'page' : undefined"
+                >
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </aside>
+    </div>
+    <div class="docs__main">
+      <div class="docs__container">
+        <div class="docs__content">
+          <router-view />
+        </div>
+      </div>
+    </div>
+  </div>
+  <BackToTop />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import BackToTop from '@/components/rizzo/BackToTop.vue';
+
+const route = useRoute();
+const currentPath = computed(() => route.path);
+
+const BLOCKS_NAV = [
+  { href: '/blocks', label: 'Overview' },
+  { href: '/blocks/landing-hero', label: 'Landing hero' },
+  { href: '/blocks/pricing', label: 'Pricing cards' },
+  { href: '/blocks/dashboard-01', label: 'Dashboard with sidebar' },
+  { href: '/blocks/docs-layout', label: 'Docs layout with sidebar' },
+  { href: '/blocks/login', label: 'Login' },
+  { href: '/blocks/signup', label: 'Sign up' },
+];
+
+function isActive(item: { href: string }) {
+  const path = currentPath.value;
+  return path === item.href || (item.href !== '/blocks' && path.startsWith(item.href));
+}
+
+function openSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  const toggle = document.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = document.querySelector('[data-docs-sidebar-overlay]');
+  docs?.classList.add('docs--sidebar-open');
+  toggle?.setAttribute('aria-expanded', 'true');
+  overlay?.setAttribute('aria-hidden', 'false');
+}
+
+function closeSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  const toggle = document.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = document.querySelector('[data-docs-sidebar-overlay]');
+  docs?.classList.remove('docs--sidebar-open');
+  toggle?.setAttribute('aria-expanded', 'false');
+  overlay?.setAttribute('aria-hidden', 'true');
+}
+
+function toggleSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  if (docs?.classList.contains('docs--sidebar-open')) closeSidebar();
+  else openSidebar();
+}
+
+onMounted(() => {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
+  document.documentElement.classList.add(w <= 1024 ? 'docs-sidebar-mobile' : 'docs-sidebar-desktop');
+
+  const container = document.getElementById('docs-sidebar-container');
+  if (!container) return;
+  const toggle = container.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = container.querySelector('[data-docs-sidebar-overlay]');
+  const docs = document.querySelector('[data-docs]');
+  if (!toggle || !overlay || !docs) return;
+
+  toggle.addEventListener('click', () => (docs.classList.contains('docs--sidebar-open') ? closeSidebar() : openSidebar()));
+  overlay.addEventListener('click', closeSidebar);
+
+  if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => container.remove());
+    } else {
+      container.remove();
+    }
+  }
+});
+</script>
+
+<style scoped>
+:deep(.docs__container) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+}
+:deep(.docs__content) {
+  width: 100%;
+  min-width: 0;
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+</style>

package/scaffold/vue/variants/full/src/layouts/DocsLayout.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="docs" data-docs>
+    <div id="docs-sidebar-container">
+      <button
+        type="button"
+        class="docs__sidebar-toggle"
+        aria-label="Open documentation menu"
+        aria-expanded="false"
+        aria-controls="docs-sidebar"
+        data-docs-sidebar-toggle
+        @click="toggleSidebar"
+      >
+        <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+          <span></span><span></span><span></span>
+        </span>
+        <span class="docs__sidebar-toggle-text">Docs</span>
+      </button>
+      <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true" @click="closeSidebar" />
+      <DocsSidebar :current-path="currentPath" path-prefix="/docs" :nav="DOCS_NAV" />
+    </div>
+    <div class="docs__main">
+      <div class="docs__container">
+        <div class="docs__content">
+          <router-view />
+        </div>
+      </div>
+    </div>
+  </div>
+  <BackToTop />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import DocsSidebar from '@/components/rizzo/DocsSidebar.vue';
+import BackToTop from '@/components/rizzo/BackToTop.vue';
+import { DOCS_NAV } from '@/config/docsNav';
+
+const route = useRoute();
+const currentPath = computed(() => route.path);
+
+function openSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  const toggle = document.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = document.querySelector('[data-docs-sidebar-overlay]');
+  docs?.classList.add('docs--sidebar-open');
+  toggle?.setAttribute('aria-expanded', 'true');
+  overlay?.setAttribute('aria-hidden', 'false');
+}
+
+function closeSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  const toggle = document.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = document.querySelector('[data-docs-sidebar-overlay]');
+  docs?.classList.remove('docs--sidebar-open');
+  toggle?.setAttribute('aria-expanded', 'false');
+  overlay?.setAttribute('aria-hidden', 'true');
+}
+
+function toggleSidebar() {
+  const docs = document.querySelector('[data-docs]');
+  if (docs?.classList.contains('docs--sidebar-open')) closeSidebar();
+  else openSidebar();
+}
+
+onMounted(() => {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 1025;
+  document.documentElement.classList.add(w <= 1024 ? 'docs-sidebar-mobile' : 'docs-sidebar-desktop');
+
+  const container = document.getElementById('docs-sidebar-container');
+  if (!container) return;
+  const toggle = container.querySelector('[data-docs-sidebar-toggle]');
+  const overlay = container.querySelector('[data-docs-sidebar-overlay]');
+  const docs = document.querySelector('[data-docs]');
+  if (!toggle || !overlay || !docs) return;
+
+  toggle.addEventListener('click', () => (docs.classList.contains('docs--sidebar-open') ? closeSidebar() : openSidebar()));
+  overlay.addEventListener('click', closeSidebar);
+
+  if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => container.remove());
+    } else {
+      container.remove();
+    }
+  }
+});
+</script>
+
+<style scoped>
+:deep(.docs__container) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+}
+:deep(.docs__content) {
+  width: 100%;
+  min-width: 0;
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+:deep(.docs__content h2) {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  margin-top: var(--section-spacing-lg);
+  margin-bottom: var(--spacing-6);
+  color: var(--text);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--border);
+}
+:deep(.docs__content h3) {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-8);
+  margin-bottom: var(--spacing-4);
+  color: var(--text);
+}
+:deep(.docs__content p) {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--spacing-5);
+}
+:deep(.docs__content ul) {
+  margin-bottom: var(--spacing-5);
+  padding-left: var(--spacing-8);
+}
+:deep(.docs__content a) {
+  color: var(--accent-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+:deep(.docs__content a:hover) {
+  color: var(--accent-fg-hover);
+}
+:deep(.docs__content .component-card-link),
+:deep(.docs__content .block-card-link) {
+  text-decoration: none;
+}
+:deep(.docs__content .component-card-link *),
+:deep(.docs__content .block-card-link *) {
+  text-decoration: none;
+}
+</style>

package/scaffold/vue/variants/full/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './index.css';
+
+createApp(App).use(router).mount('#app');

package/scaffold/vue/variants/full/src/router/index.ts

@@ -0,0 +1,38 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+import Home from '../views/Home.vue';
+import BlocksLayout from '../layouts/BlocksLayout.vue';
+import BlocksIndex from '../views/BlocksIndex.vue';
+import DocsLayout from '../layouts/DocsLayout.vue';
+import DocsIndex from '../views/DocsIndex.vue';
+import DocsOverview from '../views/DocsOverview.vue';
+import DocsGettingStarted from '../views/DocsGettingStarted.vue';
+import DocsComponents from '../views/DocsComponents.vue';
+import Themes from '../views/Themes.vue';
+
+const routes: RouteRecordRaw[] = [
+  { path: '/', name: 'Home', component: Home },
+  {
+    path: '/blocks',
+    component: BlocksLayout,
+    children: [
+      { path: '', name: 'Blocks', component: BlocksIndex },
+    ],
+  },
+  {
+    path: '/docs',
+    component: DocsLayout,
+    children: [
+      { path: '', name: 'Docs', component: DocsIndex },
+      { path: 'overview', name: 'DocsOverview', component: DocsOverview },
+      { path: 'getting-started', name: 'DocsGettingStarted', component: DocsGettingStarted },
+      { path: 'components', name: 'DocsComponents', component: DocsComponents },
+    ],
+  },
+  { path: '/themes', name: 'Themes', component: Themes },
+];
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});

package/scaffold/vue/variants/full/src/views/BlocksIndex.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="blocks-index__browse">
+    <h1 class="docs__title">Blocks</h1>
+    <p class="blocks-index__browse-desc">
+      Pre-built layouts and patterns using Rizzo components and design tokens. Use them as starting points for dashboards, docs sites, auth screens, and app shells.
+    </p>
+  </section>
+
+  <section>
+    <h2 class="blocks-index__section-label">Featured</h2>
+    <div class="blocks-index__grid">
+      <a
+        v-for="block in blocks"
+        :key="block.href"
+        :href="DOCS_BASE + block.href"
+        class="block-card-link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Card variant="elevated">
+          <div class="card__body">
+            <h3 style="margin: 0 0 var(--spacing-2) 0;">{{ block.title }}</h3>
+            <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{{ block.desc }}</p>
+            <span class="block-card-meta" style="margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--text-dim);">{{ block.meta }}</span>
+          </div>
+        </Card>
+      </a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Scaffold from CLI</h2>
+    <p>When you create a new project or add to existing, choose a <strong>template</strong>: <strong>CSS only</strong>, <strong>Landing</strong>, <strong>Docs</strong>, <strong>Dashboard</strong>, or <strong>Full</strong>. Full clones the entire docs site with home, docs, components, blocks, and themes.</p>
+    <pre><code>npx rizzo-css init
+# → Choose framework (Vanilla, Astro, Svelte, React, Vue)
+# → Choose template: CSS only | Landing | Docs | Dashboard | Full</code></pre>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Card from '@/components/rizzo/Card.vue';
+
+const DOCS_BASE = 'https://rizzo-css.vercel.app';
+
+const blocks = [
+  { href: '/blocks/landing-hero', title: 'Landing hero', desc: 'Marketing hero with headline, subtitle, and primary CTAs. Typography and button tokens.', meta: 'Hero · Buttons · Typography' },
+  { href: '/blocks/pricing', title: 'Pricing cards', desc: 'Three-tier pricing section using Card, Badge, and buttons. Theme-aware.', meta: 'Card · Badge · Buttons' },
+  { href: '/blocks/dashboard-01', title: 'Dashboard', desc: 'App dashboard with sidebar, stat cards, and data table. Uses Dashboard, Card, and Table components.', meta: 'Dashboard · Sidebar · Cards · Table' },
+  { href: '/blocks/docs-layout', title: 'Docs layout', desc: 'Documentation layout with a sidebar nav and main content area. Same pattern as this docs site.', meta: 'Docs Sidebar · Layout' },
+  { href: '/blocks/login', title: 'Login', desc: 'Centered login form on a muted background. Brand link, email/password fields, and footer links.', meta: 'Form · Button · Tokens' },
+  { href: '/blocks/signup', title: 'Sign up', desc: 'Centered sign-up form with name, email, password, and link to sign in. Same tokens as Login.', meta: 'Form · Button · Tokens' },
+];
+</script>
+
+<style scoped>
+.blocks-index__browse {
+  margin-bottom: var(--section-spacing);
+}
+.blocks-index__browse-desc {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.blocks-index__section-label {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin: 0 0 var(--page-header-margin-bottom);
+  color: var(--text);
+}
+.blocks-index__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-6);
+  margin: var(--page-header-margin-bottom) 0;
+}
+.block-card-link {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: transform var(--transition-base);
+}
+.block-card-link :deep(.card) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.block-card-link :deep(.card .card__body) {
+  flex: 1;
+}
+.block-card-link:hover {
+  transform: translateY(calc(-1 * var(--spacing-0-125)));
+}
+.block-card-link:hover :deep(.card__body h3) {
+  color: var(--accent-fg);
+}
+pre {
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+}
+pre code {
+  background: none;
+  padding: 0;
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsComponents.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <section class="docs-components-intro">
+      <h1 class="docs__title">Components</h1>
+      <p class="docs-components-intro__tagline">
+        Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, Vue, and Vanilla.
+      </p>
+      <p class="docs-components-intro__meta">
+        Each component has live demos and code on the full docs site. Quick jump:
+        <a href="https://rizzo-css.vercel.app/docs/components" target="_blank" rel="noopener noreferrer">Astro</a>
+        ·
+        <a href="https://rizzo-css.vercel.app/docs/svelte/components" target="_blank" rel="noopener noreferrer">Svelte</a>
+        ·
+        <a href="https://rizzo-css.vercel.app/docs/vanilla/components" target="_blank" rel="noopener noreferrer">Vanilla</a>.
+      </p>
+    </section>
+
+    <section v-for="cat in categories" :key="cat.id" class="docs-component-category" :id="cat.id">
+      <h2 class="docs-component-category__title">{{ cat.label }}</h2>
+      <div class="docs-component-grid">
+        <a
+          v-for="item in cat.items"
+          :key="item.href"
+          :href="DOCS_BASE + item.href"
+          class="component-card-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Card variant="elevated">
+            <div class="card__body">
+              <h3 style="margin: 0 0 var(--spacing-2) 0;">{{ item.title }}</h3>
+              <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{{ item.description }}</p>
+            </div>
+          </Card>
+        </a>
+      </div>
+    </section>
+
+    <section>
+      <h2>Component features</h2>
+      <p>All components share: semantic theming, accessibility (keyboard + ARIA), BEM naming, responsive design, and WCAG AA compliance.</p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getComponentsByCategory } from '@/config/componentCategories';
+import Card from '@/components/rizzo/Card.vue';
+
+const DOCS_BASE = 'https://rizzo-css.vercel.app';
+const categories = getComponentsByCategory();
+</script>
+
+<style scoped>
+.docs-components-intro {
+  margin-bottom: var(--spacing-10);
+}
+.docs-components-intro__tagline {
+  font-size: var(--text-lg);
+  color: var(--text-dim);
+  margin: 0 0 var(--spacing-2);
+  line-height: var(--line-height-relaxed);
+}
+.docs-components-intro__meta {
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  margin: 0;
+}
+.docs-component-category {
+  margin-bottom: var(--spacing-10);
+}
+.docs-component-category:last-of-type {
+  margin-bottom: 0;
+}
+.docs-component-category__title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-component-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--spacing-70), 1fr));
+  gap: var(--spacing-6);
+  margin: 0;
+}
+.component-card-link {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: transform var(--transition-base);
+}
+.component-card-link :deep(.card) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.component-card-link :deep(.card .card__body) {
+  flex: 1;
+}
+.component-card-link:hover {
+  transform: translateY(calc(-1 * var(--spacing-0-125)));
+}
+.component-card-link:hover :deep(.card__body h3) {
+  color: var(--accent-fg);
+}
+@media (width <= 640px) {
+  .docs-component-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>