rizzo-css 0.0.14 → 0.0.15

package/scaffold/astro-app/src/components/Navbar.astro

@@ -2,22 +2,7 @@
 import Gear from './icons/Gear.astro';
 import Search from './Search.astro';
 import { getFrameworkFromPath } from '../config/frameworks.js';
-import type { ThemeIconKey } from '../config/themes';
-import { THEMES_DARK, THEMES_LIGHT } from '../config/themes';
-import Owl from './icons/Owl.astro';
-import Palette from './icons/Palette.astro';
-import Flame from './icons/Flame.astro';
-import Sunset from './icons/Sunset.astro';
-import Zap from './icons/Zap.astro';
-import Shield from './icons/Shield.astro';
-import Heart from './icons/Heart.astro';
-import Sun from './icons/Sun.astro';
-import Cake from './icons/Cake.astro';
-import Lemon from './icons/Lemon.astro';
-import Rainbow from './icons/Rainbow.astro';
-import Leaf from './icons/Leaf.astro';
-import Cherry from './icons/Cherry.astro';
-import Brush from './icons/Brush.astro';
+import { DOCS_NAV } from '../config/docsNav';
 
 // Extend Window interface for openSettings
 declare global {
@@ -49,48 +34,32 @@ interface NavLink {
   href: string;
   label: string;
   subLinks?: Array<{ href: string; label: string }>;
+  /** Docs dropdown: grouped sections (Introduction, Foundations) */
+  docsMenu?: {
+    groups: Array<{ label: string; links: Array<{ href: string; label: string }> }>;
+  };
   /** Components dropdown: overview full width, then two columns of links */
   componentsMenu?: {
     overview: { href: string; label: string };
     links: Array<{ href: string; label: string }>;
   };
-  /** Themes dropdown: overview full width, then Dark | Light columns with icons */
-  themesMenu?: {
-    overview: { href: string; label: string };
-    dark: Array<{ href: string; label: string; icon: typeof Owl }>;
-    light: Array<{ href: string; label: string; icon: typeof Owl }>;
-  };
 }
 
-const themeIconMap: Record<ThemeIconKey, typeof Owl> = {
-  gear: Gear,
-  owl: Owl,
-  palette: Palette,
-  flame: Flame,
-  sunset: Sunset,
-  zap: Zap,
-  shield: Shield,
-  heart: Heart,
-  sun: Sun,
-  cake: Cake,
-  lemon: Lemon,
-  rainbow: Rainbow,
-  leaf: Leaf,
-  cherry: Cherry,
-  brush: Brush,
-};
+// Build docs menu from DOCS_NAV (Introduction + Foundations only; Components has its own nav menu)
+const docsMenuGroups = DOCS_NAV.filter((group) => group.label !== 'Components').map((group) => ({
+  label: group.label,
+  links: group.links.map((link) => ({
+    href: link.frameworkOnly ? `${docsPrefix}/${link.href}` : `/docs/${link.href}`,
+    label: link.label,
+  })),
+}));
 
 const navLinks: NavLink[] = [
   { href: '/', label: 'Home' },
   {
     href: '/docs/getting-started',
     label: 'Docs',
-    subLinks: [
-      { href: '/docs/getting-started', label: 'Getting Started' },
-      { href: '/docs/design-system', label: 'Design System' },
-      { href: '/docs/accessibility', label: 'Accessibility' },
-      { href: '/docs/colors', label: 'Colors' },
-    ],
+    docsMenu: { groups: docsMenuGroups },
   },
   {
     href: componentHref('/docs/components'),
@@ -125,23 +94,6 @@ const navLinks: NavLink[] = [
       ],
     },
   },
-  {
-    href: '/docs/theming',
-    label: 'Themes',
-    themesMenu: {
-      overview: { href: '/docs/theming', label: 'Overview' },
-      dark: THEMES_DARK.map((t) => ({
-        href: `/docs/themes/${t.value}`,
-        label: t.label,
-        icon: themeIconMap[t.iconKey],
-      })),
-      light: THEMES_LIGHT.map((t) => ({
-        href: `/docs/themes/${t.value}`,
-        label: t.label,
-        icon: themeIconMap[t.iconKey],
-      })),
-    },
-  },
 ];
 ---
 
@@ -191,7 +143,7 @@ const navLinks: NavLink[] = [
     <div class="navbar__menu" id="navbar-menu" role="menu">
       {navLinks.map((link) => {
         const isActive = currentPath === link.href || (link.href !== '/' && currentPath.startsWith(link.href));
-        const hasSubLinks = (link.subLinks && link.subLinks.length > 0) || !!link.componentsMenu || !!link.themesMenu;
+        const hasSubLinks = (link.subLinks && link.subLinks.length > 0) || !!link.docsMenu || !!link.componentsMenu;
         const subLinkId = hasSubLinks ? `navbar-submenu-${link.label.toLowerCase().replace(/\s+/g, '-')}` : undefined;
         
         return (
@@ -225,7 +177,34 @@ const navLinks: NavLink[] = [
                 {link.label}
               </div>
             )}
-            {link.componentsMenu ? (
+            {link.docsMenu ? (
+              <ul class="navbar__submenu navbar__submenu--docs" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
+                {link.docsMenu.groups.map((group) => (
+                  <li class="navbar__submenu-group" role="none">
+                    <span class="navbar__submenu-group-label" aria-hidden="true">{group.label}</span>
+                    <ul class="navbar__submenu-list" role="group" aria-label={group.label}>
+                      {group.links.map((subLink) => {
+                        const isSubActive = currentPath === subLink.href;
+                        return (
+                          <li role="none">
+                            <div
+                              class="navbar__sublink"
+                              role="menuitem"
+                              tabindex={-1}
+                              aria-label={subLink.label}
+                              aria-current={isSubActive ? 'page' : undefined}
+                              data-nav-href={subLink.href}
+                            >
+                              {subLink.label}
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            ) : link.componentsMenu ? (
               <ul class="navbar__submenu navbar__submenu--components" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
                 <li class="navbar__submenu-overview" role="none">
                   <div
@@ -276,63 +255,6 @@ const navLinks: NavLink[] = [
                   </div>
                 </li>
               </ul>
-            ) : link.themesMenu ? (
-              <ul class="navbar__submenu navbar__submenu--themes" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
-                <li class="navbar__submenu-overview" role="none">
-                  <div
-                    class="navbar__sublink navbar__sublink--overview"
-                    role="menuitem"
-                    tabindex={-1}
-                    aria-label={link.themesMenu.overview.label}
-                    aria-current={currentPath === link.themesMenu.overview.href ? 'page' : undefined}
-                    data-nav-href={link.themesMenu.overview.href}
-                  >
-                    {link.themesMenu.overview.label}
-                  </div>
-                </li>
-                <li class="navbar__submenu-themes-grid" role="none">
-                  <div class="navbar__submenu-column">
-                    <span class="navbar__submenu-column-label" aria-hidden="true">Dark themes</span>
-                    {link.themesMenu.dark.map((theme) => {
-                      const isSubActive = currentPath === theme.href;
-                      const ThemeIcon = theme.icon;
-                      return (
-                        <div
-                          class="navbar__sublink navbar__sublink--with-icon"
-                          role="menuitem"
-                          tabindex={-1}
-                          aria-label={theme.label}
-                          aria-current={isSubActive ? 'page' : undefined}
-                          data-nav-href={theme.href}
-                        >
-                          <ThemeIcon width={16} height={16} class="navbar__sublink-icon" />
-                          <span class="navbar__sublink-text">{theme.label}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                  <div class="navbar__submenu-column">
-                    <span class="navbar__submenu-column-label" aria-hidden="true">Light themes</span>
-                    {link.themesMenu.light.map((theme) => {
-                      const isSubActive = currentPath === theme.href;
-                      const ThemeIcon = theme.icon;
-                      return (
-                        <div
-                          class="navbar__sublink navbar__sublink--with-icon"
-                          role="menuitem"
-                          tabindex={-1}
-                          aria-label={theme.label}
-                          aria-current={isSubActive ? 'page' : undefined}
-                          data-nav-href={theme.href}
-                        >
-                          <ThemeIcon width={16} height={16} class="navbar__sublink-icon" />
-                          <span class="navbar__sublink-text">{theme.label}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </li>
-              </ul>
             ) : hasSubLinks && link.subLinks ? (
               <ul class="navbar__submenu" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
                 {link.subLinks.map((subLink) => {
@@ -514,8 +436,8 @@ const navLinks: NavLink[] = [
           }, 0);
         }
         
-        // Focus management - only on desktop
-        if (!isMobile && !isExpanded && sublinks.length > 0) {
+        // Focus management: when opening, focus first sublink (desktop and mobile)
+        if (!isExpanded && sublinks.length > 0) {
           setTimeout(() => (sublinks[0] as HTMLElement).focus(), 0);
         }
       };

package/scaffold/astro-app/src/layouts/DocsLayout.astro

@@ -1,5 +1,9 @@
 ---
 import Layout from './Layout.astro';
+import FrameworkSwitcher from '../components/FrameworkSwitcher.astro';
+import DocsSidebar from '../components/DocsSidebar.astro';
+import { getFrameworkFromPath } from '../config/frameworks';
+
 interface Props {
 	title: string;
 	description?: string;
@@ -8,33 +12,88 @@ interface Props {
 
 const { title, description, class: className = '' } = Astro.props;
 const docsClass = className ? `docs ${className}` : 'docs';
+const { framework } = getFrameworkFromPath(currentPath);
 ---
 
 <Layout>
-	<div class={docsClass}>
-		<div class="docs__container">
-			<header class="docs__header">				<h1 class="docs__title">{title}</h1>
-				{description && <p class="docs__description">{description}</p>}
+	<div class={docsClass} data-docs>
+		<script is:inline>
+			(function(){var w=typeof window!=='undefined'?window.innerWidth:1025;if(w<=1024){document.documentElement.classList.add('docs-sidebar-mobile');}else{document.documentElement.classList.add('docs-sidebar-desktop');}})();
+		</script>
+		<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
+			>
+				<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"></div>
+			<DocsSidebar currentPath={currentPath} framework={framework} />
+		</div>
+		<div class="docs__main">
+			<div class="docs__container">
+				<header class="docs__header">					<h1 class="docs__title">{title}</h1>
+					{description && <p class="docs__description">{description}</p>}
 				<p class="docs__read-docs">
 					<a href="https://rizzo-css.vercel.app/docs" target="_blank" rel="noopener noreferrer">Read the full docs</a> (getting started, theming, API) on the main site.
 				</p>
 			
-			</header>
-			
-			<div class="docs__content">
-				<slot />
+				</header>
+				<div class="docs__content">
+					<slot />
+				</div>
 			</div>
 		</div>
 	</div>
+	<script>
+		(function () {
+			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;
+			function open() {
+				docs?.classList.add('docs--sidebar-open');
+				toggle?.setAttribute('aria-expanded', 'true');
+				overlay?.setAttribute('aria-hidden', 'false');
+			}
+			function close() {
+				docs?.classList.remove('docs--sidebar-open');
+				toggle?.setAttribute('aria-expanded', 'false');
+				overlay?.setAttribute('aria-hidden', 'true');
+			}
+			toggle.addEventListener('click', function () {
+				if (docs?.classList.contains('docs--sidebar-open')) close();
+				else open();
+			});
+			overlay.addEventListener('click', close);
+			// On mobile, remove sidebar from DOM so the page has fewer nodes
+			if (document.documentElement.classList.contains('docs-sidebar-mobile')) {
+				if (document.readyState === 'loading') {
+					document.addEventListener('DOMContentLoaded', function () { container.remove(); });
+				} else {
+					container.remove();
+				}
+			}
+		})();
+	</script>
 </Layout>
 <style>
-	.docs {
-		padding: 2rem 0;
-		min-height: calc(100vh - 4rem);
-	}
-	
 	.docs__container {
 		width: 100%;
+		max-width: var(--container-default, 1200px);
+		margin: 0 auto;
+		padding: 0 var(--spacing-4);
 	}
 	
 	.docs__header {

package/scaffold/astro-app/src/pages/components/navbar.astro

@@ -16,12 +16,12 @@ import CodeBlock from '../../components/CodeBlock.astro';
 			<div class="example-title">Live Example</div>
 			<p>The navbar is already included in the Layout component at the top of this page. It includes:</p>
 			<ul>
-				<li><strong>Desktop:</strong> 2-column dropdown layout for Components and Themes with vertical divider</li>
+				<li><strong>Desktop:</strong> Docs dropdown (Introduction, Foundations); Components dropdown with 2-column layout and vertical divider</li>
 				<li><strong>Mobile:</strong> Menu toggle on left; search and settings icon-only (same size as menu toggle) on right</li>
 				<li>Responsive mobile menu with hamburger toggle (activates at 1024px and below)</li>
 				<li>Smooth hamburger-to-X animation</li>
 				<li>Active link indicator with underline matching hover effect</li>
-				<li>Dropdown menus with sub-links (Components and Themes dropdowns)</li>
+				<li>Dropdown menus: Docs (Getting Started, Design System, Theming, Accessibility, Colors) and Components (Overview + all component links). Theming is under Docs; no separate Themes item in the nav.</li>
 				<li>Dropdown arrow rotates on hover</li>
 				<li>Smart dropdown alignment (prevents viewport overflow)</li>
 				<li>Full keyboard navigation for dropdowns (Arrow keys, Enter, Space, Escape, Home, End)</li>
@@ -52,7 +52,7 @@ import Navbar from '../../components/Navbar.astro';
 			<li><strong>Desktop Layout:</strong>
 				<ul>
 					<li>Search and settings buttons on far right</li>
-					<li><strong>2-column dropdown layout</strong> - Components and Themes dropdowns display in a 2-column grid with vertical divider for better navigation</li>
+					<li><strong>2-column dropdown layout</strong> - The Components dropdown displays in a 2-column grid with vertical divider. Docs dropdown shows Introduction and Foundations only (Theming is under Docs).</li>
 					<li>Smart dropdown positioning - Automatically adjusts to prevent viewport overflow</li>
 					<li>Dropdown arrow rotates on hover/expand</li>
 				</ul>

package/scaffold/astro-app/src/pages/components/theme-switcher.astro

@@ -32,6 +32,7 @@ import ThemeSwitcher from '../../components/ThemeSwitcher.astro';
 			<li><strong>Preview panel</strong> – Always visible when the menu is open (on viewports &gt;480px). Shows a fixed “Preview” label; the theme name, swatch, and accent bar show the <strong>current</strong> theme by default and the <strong>hovered</strong> theme on hover/focus. Full-height divider between list and preview. Hidden on small viewports.</li>
 			<li>Groups themes by Preference, Dark, and Light; each theme has a unique icon.</li>
 			<li>Shows active theme name and icon in the trigger button.</li>
+			<li><strong>Consistent width</strong> – The trigger and dropdown use a fixed width (<code>--theme-switcher-width</code>) everywhere (Settings, navbar, standalone) so the longest theme name fits on one line.</li>
 			<li>When System is selected, both System and the applied theme show the active background and accent bar.</li>
 			<li>Persists selection in <code>localStorage</code> (key <code>theme</code>: theme id or <code>system</code>).</li>
 			<li>First visit uses initial <code>data-theme</code> or OS preference.</li>

package/scaffold/svelte-app/src/lib/rizzo-docs/CodeBlock.svelte

@@ -161,7 +161,7 @@
     height: var(--spacing-5);
     color: var(--text-dim);
   }
-  .code-block__language-icon svg {
+  .code-block__language-icon :global(svg) {
     width: 100%;
     height: 100%;
     display: block;

package/scaffold/vanilla/README.md

@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.14`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.15`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Accordion</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/alert.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Alert</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/avatar.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Avatar</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/badge.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Badge</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/breadcrumb.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Breadcrumb</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/button.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Button</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/cards.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Cards</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Copy to Clipboard</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>

package/scaffold/vanilla/components/divider.html

@@ -173,6 +173,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   <main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
     <h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Divider</h1>
     <p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
@@ -188,6 +195,13 @@
 
 
 
+
+
+
+
+
+
+
   <script src="../js/main.js"></script>
 </body>
 </html>