rizzo-css 0.0.82 → 0.0.84

package/scaffold/vanilla/components/tooltip.html

@@ -516,6 +516,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -872,6 +877,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -516,6 +516,11 @@
   
   
   
+  
+  
+  
+  
+  
   
   
   
@@ -962,6 +967,11 @@
 
 
 
+
+
+
+
+
 
 
 

package/scaffold/vue/DocsSidebar.vue

@@ -12,6 +12,8 @@ export interface DocsNavLink {
   frameworkOnly?: boolean;
   absolute?: boolean;
   sections?: DocsNavSection[];
+  /** When true, open in new tab (external to main site). */
+  external?: boolean;
 }
 
 export interface DocsNavGroup {
@@ -36,7 +38,7 @@ const props = withDefaults(
 const activeSectionId = ref<string | null>(null);
 
 function fullHref(link: { href: string; frameworkOnly?: boolean; absolute?: boolean }): string {
-  if (link.absolute && link.href.startsWith('/')) return link.href;
+  if (link.absolute && link.href) return link.href;
   const base = link.frameworkOnly ? props.pathPrefix : '/docs';
   return `${base}/${link.href}`;
 }
@@ -98,6 +100,8 @@ onUnmounted(() => {
               :href="fullHref(link)"
               class="docs-sidebar__link"
               :class="{ 'docs-sidebar__link--active': isActive(link) && (link.sections?.length === 0 || activeSectionId == null) }"
+              :target="link.external ? '_blank' : undefined"
+              :rel="link.external ? 'noopener noreferrer' : undefined"
               :aria-current="isActive(link) && (link.sections?.length === 0 || activeSectionId == null) ? 'page' : undefined"
             >
               {{ link.label }}
@@ -111,8 +115,10 @@ onUnmounted(() => {
                 <a
                   :href="`${fullHref(link)}#${section.id}`"
                   class="docs-sidebar__sublink"
-                  :class="{ 'docs-sidebar__sublink--active': activeSectionId === section.id && currentPath.replace(/\/$/, '') === fullHref(link) }"
-                  :aria-current="(activeSectionId === section.id && currentPath.replace(/\/$/, '') === fullHref(link)) ? 'location' : undefined"
+                  :class="{ 'docs-sidebar__sublink--active': !link.external && activeSectionId === section.id && currentPath.replace(/\/$/, '') === fullHref(link).split('#')[0] }"
+                  :aria-current="(!link.external && activeSectionId === section.id && currentPath.replace(/\/$/, '') === fullHref(link).split('#')[0]) ? 'location' : undefined"
+                  :target="link.external ? '_blank' : undefined"
+                  :rel="link.external ? 'noopener noreferrer' : undefined"
                 >
                   {{ section.label }}
                 </a>

package/scaffold/vue/base/package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "rizzo-css": "^0.0.82",
+    "rizzo-css": "^0.0.84",
     "typescript": "~5.6.2",
     "vite": "^6.0.1",
     "vue-tsc": "^2.1.10"

package/scaffold/vue/variants/full/package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "rizzo-css": "^0.0.82",
+    "rizzo-css": "^0.0.84",
     "typescript": "~5.6.2",
     "vite": "^6.0.1",
     "vue-tsc": "^2.1.10"

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

@@ -1,6 +1,16 @@
 /**
- * Docs nav for the full template. Matches main site structure (Introduction, Components, Blocks, Themes).
+ * 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;
@@ -12,6 +22,7 @@ export interface DocsNavLink {
   frameworkOnly?: boolean;
   absolute?: boolean;
   sections?: DocsNavSection[];
+  external?: boolean;
 }
 
 export interface DocsNavGroup {
@@ -23,48 +34,54 @@ export const DOCS_NAV: DocsNavGroup[] = [
   {
     label: 'Introduction',
     links: [
-      {
-        href: 'overview',
-        label: 'Overview',
-        frameworkOnly: true,
-        sections: [
-          { id: 'overview', label: 'Overview' },
-          { id: 'installation', label: 'Installation' },
-          { id: 'components', label: 'Components' },
-          { id: 'blocks', label: 'Blocks' },
-        ],
-      },
-      {
-        href: 'getting-started',
-        label: 'Getting Started',
-        sections: [
-          { id: 'installation', label: 'Installation' },
-          { id: 'project-structure', label: 'Project Structure' },
-          { id: 'development', label: 'Development' },
-          { id: 'using-components', label: 'Using Components' },
-          { id: 'using-themes', label: 'Using Themes' },
-        ],
-      },
+      { 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: 'components', label: 'Overview', frameworkOnly: true }],
+    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: '/blocks', label: 'Blocks overview', absolute: true },
-      { href: '/blocks/landing-hero', label: 'Landing hero', absolute: true },
-      { href: '/blocks/pricing', label: 'Pricing cards', absolute: true },
-      { href: '/blocks/dashboard-01', label: 'Dashboard', absolute: true },
-      { href: '/blocks/docs-layout', label: 'Docs layout', absolute: true },
-      { href: '/blocks/login', label: 'Login', absolute: true },
-      { href: '/blocks/signup', label: 'Sign up', absolute: true },
+      { 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: 'Themes',
-    links: [{ href: '/themes', label: 'Themes', absolute: 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' }] },
+    ],
   },
 ];