rizzo-css 0.0.54 → 0.0.55

package/scaffold/astro/ResizablePaneGroup.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Group of resizable panes with handles. Use with ResizablePane and ResizableHandle.
+ * Matches shadcn-svelte Resizable.
+ */
+interface Props {
+	id?: string;
+	direction?: 'horizontal' | 'vertical';
+	class?: string;
+}
+
+const { id, direction = 'horizontal', class: className = '' } = Astro.props;
+const groupId = id || `resizable-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div
+	class={`resizable__pane-group resizable__pane-group--${direction} ${className}`.trim()}
+	id={groupId}
+	data-resizable-group
+	data-direction={direction}
+>
+	<slot />
+</div>
+
+<script is:inline define:vars={{ groupId }}>
+(function () {
+	function init() {
+		const root = document.getElementById(groupId);
+		if (!root) return;
+		const direction = root.dataset.direction === 'vertical' ? 'vertical' : 'horizontal';
+		const panes = Array.from(root.querySelectorAll('[data-resizable-pane]'));
+		const handles = Array.from(root.querySelectorAll('[data-resizable-handle]'));
+		if (panes.length < 2 || handles.length !== panes.length - 1) return;
+		function getSize(el) {
+			const style = getComputedStyle(el);
+			const basis = style.flexBasis;
+			if (basis && basis.endsWith('%')) return parseFloat(basis);
+			const rect = el.getBoundingClientRect();
+			const parent = el.parentElement;
+			if (!parent) return 50;
+			const parentRect = parent.getBoundingClientRect();
+			const pct = direction === 'horizontal' ? (rect.width / parentRect.width) * 100 : (rect.height / parentRect.height) * 100;
+			return pct;
+		}
+		function setSizes(pct1, pct2, idx) {
+			panes[idx].style.flex = '1 1 ' + pct1 + '%';
+			panes[idx + 1].style.flex = '1 1 ' + pct2 + '%';
+		}
+		handles.forEach(function (handle, i) {
+			let startX, startY, startPct1, startPct2;
+			function onMove(e) {
+				const parent = root.getBoundingClientRect();
+				let delta;
+				if (direction === 'horizontal') {
+					delta = ((e.clientX - startX) / parent.width) * 100;
+				} else {
+					delta = ((e.clientY - startY) / parent.height) * 100;
+				}
+				let p1 = startPct1 + delta;
+				let p2 = startPct2 - delta;
+				const min = 10;
+				if (p1 < min) { p1 = min; p2 = 100 - min; }
+				if (p2 < min) { p2 = min; p1 = 100 - min; }
+				setSizes(p1, p2, i);
+			}
+			function onUp() {
+				document.removeEventListener('mousemove', onMove);
+				document.removeEventListener('mouseup', onUp);
+			}
+			handle.addEventListener('mousedown', function (e) {
+				e.preventDefault();
+				startX = e.clientX;
+				startY = e.clientY;
+				startPct1 = getSize(panes[i]);
+				startPct2 = getSize(panes[i + 1]);
+				document.addEventListener('mousemove', onMove);
+				document.addEventListener('mouseup', onUp);
+			});
+		});
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/ScrollArea.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * Scrollable area with themed scrollbar. Matches shadcn-svelte Scroll Area.
+ * orientation: 'vertical' (default) or 'horizontal'
+ */
+interface Props {
+	orientation?: 'vertical' | 'horizontal';
+	class?: string;
+}
+
+const { orientation = 'vertical', class: className = '' } = Astro.props;
+const horizontal = orientation === 'horizontal';
+---
+
+<div class={`scroll-area ${horizontal ? 'scroll-area--horizontal' : ''} ${className}`.trim()}>
+	<div class="scroll-area__viewport" tabindex="0">
+		<slot />
+	</div>
+</div>

package/scaffold/astro/Separator.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * Thin separator line (horizontal or vertical). Same as Divider without label.
+ * Matches shadcn-svelte Separator.
+ */
+interface Props {
+	orientation?: 'horizontal' | 'vertical';
+	class?: string;
+}
+
+const { orientation = 'horizontal', class: className = '' } = Astro.props;
+---
+
+<div
+	class={`separator separator--${orientation} ${className}`.trim()}
+	role="separator"
+	aria-orientation={orientation}
+></div>

package/scaffold/astro/Settings.astro

@@ -32,7 +32,7 @@ const { open = false } = Astro.props;
       <section class="settings__section">
         <h3 class="settings__section-title">Theme</h3>
         <div class="settings__control">
-          <ThemeSwitcher />
+          <ThemeSwitcher idPrefix="settings" />
         </div>
       </section>
 
@@ -246,6 +246,10 @@ const { open = false } = Astro.props;
     // Open settings
     const openSettings = () => {
       previousActiveElement = document.activeElement;
+
+      const layoutContent = document.querySelector('[data-layout-content]');
+      if (layoutContent) layoutContent.setAttribute('inert', '');
+      document.body.style.overflow = 'hidden';
       
       // First, make elements visible but keep panel off-screen
       settings.setAttribute('aria-hidden', 'false');
@@ -280,7 +284,11 @@ const { open = false } = Astro.props;
         settings.setAttribute('aria-hidden', 'true');
         overlay?.setAttribute('aria-hidden', 'true');
         panel.setAttribute('aria-hidden', 'true');
-        
+
+        const layoutContent = document.querySelector('[data-layout-content]');
+        if (layoutContent) layoutContent.removeAttribute('inert');
+        document.body.style.overflow = '';
+
         // Return focus to previous element
         if (previousActiveElement) {
           previousActiveElement.focus();

package/scaffold/astro/Sheet.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * Slide-out panel (drawer) from edge. Matches shadcn-svelte Sheet / Drawer.
+ */
+import Close from './icons/Close.astro';
+
+interface Props {
+	id?: string;
+	title?: string;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	open?: boolean;
+	class?: string;
+}
+
+const { id, title, side = 'right', open = false, class: className = '' } = Astro.props;
+const sheetId = id || `sheet-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div
+	class={`sheet__overlay ${open ? 'sheet__overlay--open' : ''}`.trim()}
+	data-sheet-overlay
+	aria-hidden={!open}
+	id={`${sheetId}-overlay`}
+></div>
+<div
+	class={`sheet sheet--${side} ${open ? 'sheet--open' : ''} ${className}`.trim()}
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby={title ? `${sheetId}-title` : undefined}
+	aria-hidden={!open}
+	id={sheetId}
+	data-sheet
+	hidden={!open}
+>
+	<div class="sheet__content">
+		{title && (
+			<div class="sheet__header">
+				<h2 id={`${sheetId}-title`} class="sheet__title">{title}</h2>
+				<button type="button" class="sheet__close" aria-label="Close" data-sheet-close>
+					<Close width={20} height={20} />
+				</button>
+			</div>
+		)}
+		<div class="sheet__body">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<script is:inline define:vars={{ sheetId, open }}>
+(function () {
+	function init() {
+		const sheet = document.getElementById(sheetId);
+		if (!sheet) return;
+		const overlay = document.getElementById(sheetId + '-overlay');
+		if (!overlay) return;
+		let escapeHandler = null;
+		const close = () => {
+			sheet.classList.remove('sheet--open');
+			sheet.setAttribute('aria-hidden', 'true');
+			sheet.hidden = true;
+			overlay.classList.remove('sheet__overlay--open');
+			overlay.setAttribute('aria-hidden', 'true');
+			if (escapeHandler) {
+				document.removeEventListener('keydown', escapeHandler);
+				escapeHandler = null;
+			}
+		};
+		const openSheet = () => {
+			sheet.hidden = false;
+			sheet.classList.add('sheet--open');
+			sheet.setAttribute('aria-hidden', 'false');
+			overlay.classList.add('sheet__overlay--open');
+			overlay.setAttribute('aria-hidden', 'false');
+			if (!escapeHandler) {
+				escapeHandler = (e) => { if (e.key === 'Escape') close(); };
+				document.addEventListener('keydown', escapeHandler);
+			}
+		};
+		sheet.querySelectorAll('[data-sheet-close]').forEach((b) => b.addEventListener('click', close));
+		overlay.addEventListener('click', close);
+		sheet.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+		window['openSheet_' + sheetId.replace(/-/g, '_')] = openSheet;
+		window['closeSheet_' + sheetId.replace(/-/g, '_')] = close;
+		if (open) openSheet();
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/Skeleton.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  /** Shape variant */
+  variant?: 'text' | 'circle' | 'rect' | 'default';
+  /** Accessible label for loading state (announced by screen readers). Omit or empty = decorative (aria-hidden). */
+  label?: string;
+  class?: string;
+}
+
+const { variant = 'default', label = 'Loading', class: className = '' } = Astro.props;
+const variantClass = variant !== 'default' ? `skeleton--${variant}` : '';
+const classes = ['skeleton', variantClass, className].filter(Boolean).join(' ').trim();
+const isDecorative = label === '';
+---
+
+<span class={classes} role={isDecorative ? undefined : 'status'} aria-label={isDecorative ? undefined : label} aria-busy={isDecorative ? undefined : 'true'} aria-hidden={isDecorative ? 'true' : undefined}></span>

package/scaffold/astro/Slider.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * Range slider input. Matches shadcn-svelte Slider.
+ */
+interface Props {
+	id?: string;
+	name?: string;
+	min?: number;
+	max?: number;
+	step?: number;
+	value?: number;
+	disabled?: boolean;
+	/** Accessible name for the range input (required for axe / WCAG). */
+	ariaLabel?: string;
+	class?: string;
+}
+
+const {
+	id,
+	name,
+	min = 0,
+	max = 100,
+	step = 1,
+	value = min,
+	disabled = false,
+	ariaLabel,
+	class: className = '',
+} = Astro.props;
+const sliderId = id || `slider-${Math.random().toString(36).slice(2, 9)}`;
+const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+---
+
+<div class={`slider ${className}`.trim()} data-slider>
+	<input
+		type="range"
+		id={sliderId}
+		name={name}
+		class="slider__input"
+		min={min}
+		max={max}
+		step={step}
+		value={value}
+		disabled={disabled}
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value}
+		aria-label={ariaLabel}
+		data-slider-input
+	/>
+	<div class="slider__track" aria-hidden="true">
+		<div class="slider__fill" data-slider-fill style={`width: ${pct}%`} />
+	</div>
+</div>
+
+<script is:inline define:vars={{ sliderId, min, max }}>
+(function () {
+	function init() {
+		const root = document.getElementById(sliderId);
+		if (!root) return;
+		const input = root.querySelector('[data-slider-input]');
+		const fill = root.querySelector('[data-slider-fill]');
+		if (!input || !fill) return;
+		function updateFill() {
+			const val = parseFloat(input.value);
+			const pct = Math.min(100, Math.max(0, ((val - min) / (max - min)) * 100));
+			fill.style.width = pct + '%';
+			input.setAttribute('aria-valuenow', String(val));
+		}
+		input.addEventListener('input', updateFill);
+		input.addEventListener('change', updateFill);
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else init();
+})();
+</script>

package/scaffold/astro/SoundEffects.astro

@@ -37,6 +37,7 @@ const { class: className = '', showHelp = true } = Astro.props;
       el.checked = localStorage.getItem('soundEffects') === 'true';
       el.addEventListener('change', () => {
         localStorage.setItem('soundEffects', el.checked ? 'true' : 'false');
+        if (el.checked) window.dispatchEvent(new CustomEvent('rizzo-sound-effects-change'));
       });
     });
   }

package/scaffold/astro/Switch.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+  id?: string;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  /** Accessible label (visible or sr-only) */
+  label?: string;
+  class?: string;
+}
+
+const {
+  id,
+  name,
+  checked = false,
+  disabled = false,
+  label,
+  class: className = '',
+} = Astro.props;
+---
+
+<label class={`switch ${className}`.trim()} for={id}>
+  <input
+    type="checkbox"
+    id={id}
+    name={name}
+    class="switch__input"
+    role="switch"
+    aria-checked={checked}
+    checked={checked}
+    disabled={disabled}
+  />
+  <span class="switch__track" aria-hidden="true">
+    <span class="switch__thumb" />
+  </span>
+  {label ? <span class="switch__label">{label}</span> : null}
+</label>

package/scaffold/astro/Tabs.astro

@@ -53,7 +53,7 @@ const classes = `tabs ${variantClass} ${className}`.trim();
           data-tab-id={tab.id}
           data-tab-index={index}
         >
-          {tab.iconComponent ? <tab.iconComponent width={20} height={20} class="tabs__tab-icon" /> : tab.icon ? <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" /> : null}
+          {tab.iconComponent ? <tab.iconComponent width={20} height={20} class="tabs__tab-icon" /> : tab.icon ? <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" loading="lazy" aria-hidden="true" /> : null}
           {tab.label}
         </span>
       );

package/scaffold/astro/ThemeSwitcher.astro

@@ -41,6 +41,13 @@ const themes = {
   light: THEMES_LIGHT.map((t) => ({ ...t, icon: iconMap[t.iconKey] })),
 };
 
+interface Props {
+  /** Optional prefix for trigger/menu IDs to avoid duplicate ids when multiple ThemeSwitchers exist (e.g. idPrefix="settings"). */
+  idPrefix?: string;
+}
+const { idPrefix = '' } = Astro.props;
+const triggerId = idPrefix ? `theme-trigger-${idPrefix}` : 'theme-trigger';
+const menuId = idPrefix ? `theme-menu-${idPrefix}` : 'theme-menu';
 
 // Get current theme from HTML data attribute or default
 const getCurrentTheme = () => {
@@ -76,9 +83,9 @@ const InitialIcon = initialTheme ? initialTheme.icon : null;
     type="button"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-controls="theme-menu"
+    aria-controls={menuId}
     aria-label="Select theme"
-    id="theme-trigger"
+    id={triggerId}
   >
     <span class="theme-switcher__label-wrapper" data-theme-label-wrapper>
       <span class="theme-switcher__label" data-theme-label>{initialLabel}</span>
@@ -88,9 +95,9 @@ const InitialIcon = initialTheme ? initialTheme.icon : null;
   
   <div
     class="theme-switcher__menu"
-    id="theme-menu"
+    id={menuId}
     role="menu"
-    aria-labelledby="theme-trigger"
+    aria-labelledby={triggerId}
     aria-label="Theme selection menu"
     aria-orientation="vertical"
     aria-hidden="true"

package/scaffold/astro/Toggle.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Toggle button (pressed/unpressed state). Matches shadcn-svelte Toggle.
+ */
+interface Props {
+	pressed?: boolean;
+	disabled?: boolean;
+	type?: 'button' | 'submit' | 'reset';
+	value?: string;
+	ariaLabel?: string;
+	class?: string;
+}
+
+const {
+	pressed = false,
+	disabled = false,
+	type = 'button',
+	value,
+	ariaLabel,
+	class: className = '',
+} = Astro.props;
+const pressedClass = pressed ? 'toggle--pressed' : '';
+---
+
+<button
+	type={type}
+	class={`toggle ${pressedClass} ${className}`.trim()}
+	aria-pressed={pressed}
+	disabled={disabled}
+	value={value}
+	aria-label={ariaLabel}
+	data-toggle
+>
+	<slot />
+</button>

package/scaffold/astro/ToggleGroup.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * Group of toggle buttons (single or multiple selection). Matches shadcn-svelte Toggle Group.
+ */
+interface Props {
+	type?: 'single' | 'multiple';
+	orientation?: 'horizontal' | 'vertical';
+	class?: string;
+}
+
+const { type = 'single', orientation = 'horizontal', class: className = '' } = Astro.props;
+const orientationClass = orientation === 'vertical' ? 'toggle-group--vertical' : '';
+const role = type === 'single' ? 'radiogroup' : 'group';
+---
+
+<div
+	class={`toggle-group ${orientationClass} ${className}`.trim()}
+	role={role}
+	aria-label="Toggle group"
+	data-toggle-group
+	data-toggle-type={type}
+>
+	<slot />
+</div>

package/scaffold/astro/base/README-RIZZO.md

@@ -0,0 +1,55 @@
+# Astro + Rizzo CSS
+
+```
+      /\___/\   
+   __(  o o  )__
+     (  =^=  )  
+    _/   ~   \_ 
+   /  \_____/  \
+ ____  ___ _____________     ____ ____ ____
+|  _ \|_ _|__  /__  / _ \   / ___/ ___/ ___|
+| |_) || |  / /  / / | | | | |   \___ \___ \
+|  _ < | | / /_ / /| |_| | | |___ ___) |__) |
+|_| \_\___/____/____\___/   \____|____/____/
+      Design system · Vanilla · Astro · Svelte
+```
+
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 56 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+
+## Setup
+
+1. Copy environment example (optional):
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Install dependencies:
+   ```bash
+   pnpm install
+   # or: npm install
+   ```
+
+3. Start the dev server:
+   ```bash
+   pnpm dev
+   ```
+
+## Project structure
+
+- `.gitignore` — Astro default values (same as `create-astro`): dist/, .astro/, node_modules/, .env, logs, .DS_Store, .idea/
+- `astro.config.mjs` — Astro configuration
+- `src/layouts/Layout.astro` — Layout with Rizzo CSS and theme (edit `data-theme` for default)
+- `src/pages/index.astro` — Home page
+- **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
+- `public/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
+- `public/assets/fonts/` — Rizzo font files (added by CLI)
+- `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)
+- `LICENSE-RIZZO` — Rizzo CSS license (does not replace your project LICENSE)
+
+## Commands
+
+- `pnpm dev` — Start dev server
+- `pnpm build` — Build for production
+- `pnpm preview` — Preview production build
+
+Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)

package/scaffold/{astro-core → astro/base}/src/pages/index.astro

@@ -33,7 +33,7 @@ const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
           </div>
           <div class="home__card home__card--featured">
             <span class="home__card-icon" aria-hidden="true">Components</span>
-            <h3>34 ready components</h3>
+            <h3>All components</h3>
             <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
           </div>
         </div>

package/scaffold/astro/variants/dashboard/src/layouts/Layout.astro

@@ -0,0 +1,85 @@
+---
+/* Placeholders replaced by rizzo-css CLI when scaffolding */
+/* {{THEME_LIST_COMMENT}} */
+const DATA_THEME = '{{DATA_THEME}}';
+/** @type {{ title?: string }} */
+const { title = '{{TITLE}}' } = Astro.props;
+{{RIZZO_LAYOUT_IMPORTS}}
+---
+<!doctype html>
+<html lang="en" data-theme={DATA_THEME}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <script is:inline>
+      (function(){try{
+        var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);
+        var fs=localStorage.getItem('fontSizeScale');if(fs)document.documentElement.style.setProperty('--font-size-scale',fs);
+        var fp=localStorage.getItem('fontPair')||'geist';if(fp==='geist'){document.documentElement.style.setProperty('--font-family','var(--font-family-geist-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-geist-mono)');}else if(fp==='inter-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-inter)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}else if(fp==='ibm-plex'){document.documentElement.style.setProperty('--font-family','var(--font-family-ibm-plex-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-ibm-plex-mono)');}else if(fp==='source'){document.documentElement.style.setProperty('--font-family','var(--font-family-source-sans-3)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-source-code-pro)');}else if(fp==='dm'){document.documentElement.style.setProperty('--font-family','var(--font-family-dm-sans)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-dm-mono)');}else if(fp==='outfit-jetbrains'){document.documentElement.style.setProperty('--font-family','var(--font-family-outfit)');document.documentElement.style.setProperty('--font-family-mono','var(--font-family-jetbrains-mono)');}
+      }catch(e){}})();
+    </script>
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    {{RIZZO_SOUND_SCRIPT}}
+    <title>{title}</title>
+  </head>
+  <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    {{RIZZO_LAYOUT_BODY_TOP}}
+    <div class="dashboard">
+      <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
+        <nav class="dashboard__nav">
+          <a href="/" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
+          <a href="/" class="dashboard__nav-link">Items</a>
+          <a href="/" class="dashboard__nav-link">Settings</a>
+        </nav>
+      </aside>
+      <main id="main-content" class="dashboard__main">
+        <slot />
+      </main>
+    </div>
+    {{RIZZO_LAYOUT_BODY_BOTTOM}}
+  </body>
+</html>
+
+<style is:global>
+  .dashboard {
+    display: flex;
+    min-height: 100vh;
+  }
+  .dashboard__sidebar {
+    width: 16rem;
+    flex-shrink: 0;
+    border-right: 1px solid var(--border);
+    padding: var(--spacing-4);
+    background: var(--background-alt);
+  }
+  .dashboard__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .dashboard__nav-link {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    text-decoration: none;
+  }
+  .dashboard__nav-link:hover {
+    background: var(--background);
+  }
+  .dashboard__nav-link--active {
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .dashboard__main {
+    flex: 1;
+    padding: var(--spacing-6);
+    overflow: auto;
+  }
+  @media (max-width: 768px) {
+    .dashboard { flex-direction: column; }
+    .dashboard__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
+  }
+</style>