rizzo-css 0.0.17 → 0.0.18

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

@@ -1,263 +0,0 @@
----
-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;
-	class?: string;
-}
-
-const { title, description, class: className = '' } = Astro.props;
-const docsClass = className ? `docs ${className}` : 'docs';
-const { framework } = getFrameworkFromPath(currentPath);
----
-
-<Layout>
-	<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 />
-				</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__container {
-		width: 100%;
-		max-width: var(--container-default, 1200px);
-		margin: 0 auto;
-		padding: 0 var(--spacing-4);
-	}
-	
-	.docs__header {
-		margin-bottom: 3rem;
-		padding-bottom: 2rem;
-		border-bottom: 1px solid var(--border);
-	}
-	
-	.docs__title {
-		font-size: var(--font-size-4xl);
-		font-weight: var(--font-weight-bold);
-		color: var(--text);
-		margin: 0 0 1rem 0;
-		line-height: var(--line-height-tight);
-	}
-	
-	.docs__description {
-		font-size: var(--font-size-lg);
-		color: var(--text-dim);
-		margin: 0;
-		line-height: var(--line-height-relaxed);
-	}
-	
-	.docs__content {
-		color: var(--text);
-		line-height: var(--line-height-relaxed);
-	}
-	
-	/* Documentation typography */
-	.docs__content :global(h2) {
-		font-size: var(--font-size-3xl);
-		font-weight: var(--font-weight-bold);
-		margin-top: 3rem;
-		margin-bottom: 1.5rem;
-		color: var(--text);
-		padding-bottom: 0.5rem;
-		border-bottom: 1px solid var(--border);
-	}
-	
-	.docs__content :global(h3) {
-		font-size: var(--font-size-2xl);
-		font-weight: var(--font-weight-semibold);
-		margin-top: 2rem;
-		margin-bottom: 1rem;
-		color: var(--text);
-	}
-	
-	.docs__content :global(h4) {
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-		margin-top: 1.5rem;
-		margin-bottom: 0.75rem;
-		color: var(--text);
-	}
-	
-	.docs__content :global(p) {
-		margin-bottom: 1.25rem;
-	}
-	
-	.docs__content :global(ul),
-	.docs__content :global(ol) {
-		margin-bottom: var(--spacing-5);
-		padding-left: var(--spacing-8);
-	}
-	
-	.docs__content :global(li) {
-		margin-bottom: var(--spacing-2);
-	}
-	
-	.docs__content :global(code) {
-		background-color: var(--background-alt);
-		color: var(--accent);
-		padding: var(--spacing-0-125) var(--spacing-0-375);
-		border-radius: var(--radius);
-		font-family: var(--font-family-mono);
-		font-size: 0.9em;
-	}
-	
-	.docs__content :global(pre) {
-		background-color: var(--background-alt);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-lg);
-		padding: var(--spacing-6);
-		overflow-x: auto;
-		margin-bottom: var(--spacing-6);
-	}
-	
-	.docs__content :global(pre code) {
-		background-color: transparent;
-		color: var(--text);
-		padding: 0;
-	}
-	
-	.docs__content :global(blockquote) {
-		border-left: var(--spacing-1) solid var(--accent);
-		padding-left: var(--spacing-6);
-		margin: var(--spacing-6) 0;
-		color: var(--text-dim);
-		font-style: italic;
-	}
-	
-	.docs__content :global(table) {
-		width: 100%;
-		border-collapse: collapse;
-		margin-bottom: var(--spacing-6);
-	}
-	
-	.docs__content :global(th),
-	.docs__content :global(td) {
-		padding: var(--spacing-3);
-		text-align: left;
-		border-bottom: 1px solid var(--border);
-	}
-	
-	.docs__content :global(th) {
-		font-weight: var(--font-weight-semibold);
-		background-color: var(--background-alt);
-	}
-	
-	.docs__content :global(a) {
-		color: var(--accent);
-		text-decoration: none;
-		transition: color var(--transition-base);
-	}
-	
-	.docs__content :global(a:hover) {
-		color: var(--accent-hover);
-		text-decoration: underline;
-	}
-	
-	.docs__content :global(hr) {
-		border: none;
-		border-top: 1px solid var(--border);
-		margin: var(--spacing-8) 0;
-	}
-	
-	/* Example sections */
-	.docs__content :global(.example) {
-		background-color: var(--background-alt);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-lg);
-		padding: var(--spacing-6);
-		margin: var(--spacing-6) 0;
-	}
-	
-	.docs__content :global(.example-title) {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-semibold);
-		text-transform: uppercase;
-		letter-spacing: var(--letter-spacing-wide);
-		color: var(--text-dim);
-		margin-bottom: var(--spacing-4);
-	}
-	
-	.docs__content :global(section) {
-		margin-bottom: var(--spacing-12);
-	}
-	
-	.docs__content :global(section:last-child) {
-		margin-bottom: 0;
-	}
-	.docs__read-docs {
-		margin-top: 1rem;
-		font-size: var(--font-size-sm);
-		color: var(--text-dim);
-	}
-</style>

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

@@ -1,41 +0,0 @@
----
-import Navbar from '../components/Navbar.astro';
-import Settings from '../components/Settings.astro';
-interface Props {
-  title?: string;
-}
-
-/* Placeholders replaced by rizzo-css CLI when scaffolding */
-const DATA_THEME = '{{DATA_THEME}}';
-const THEME_LIST_COMMENT = '{{THEME_LIST_COMMENT}}';
-const { title = '{{TITLE}}' } = Astro.props;
----
-<!doctype html>
-<html lang="en" data-theme={DATA_THEME}>{THEME_LIST_COMMENT}
-  <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" />
-    <!-- Theme flash prevention + accessibility (same as main site) -->
-    <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 f=localStorage.getItem('fontSizeScale');if(f)document.documentElement.style.setProperty('--font-size-scale',f);if(localStorage.getItem('reducedMotion')==='true')document.documentElement.classList.add('reduced-motion');if(localStorage.getItem('highContrast')==='true')document.documentElement.classList.add('high-contrast');var b=localStorage.getItem('scrollbarStyle')||'thin';if(b==='thick')document.documentElement.classList.add('scrollbar-thick');else if(b==='hidden')document.documentElement.classList.add('scrollbar-hidden','hide-scrollbars');}catch(e){}})();
-    </script>
-    <!-- Toast: showToast, removeToast, removeAllToasts -->
-    <script is:inline>
-      (function(){if(typeof window==='undefined'||window.showToast)return;function t(m,o){if(!m)return null;o=o||{};var v=o.variant||'info',p=o.position||'top-right',a=o.autoDismiss!==undefined?o.autoDismiss:5000,d=o.dismissible!==undefined?o.dismissible:true,i='toast-'+Math.random().toString(36).substr(2,9);function c(){if(!document.body)return;var cn=document.getElementById('toast-container-'+p);if(!cn){cn=document.createElement('div');cn.id='toast-container-'+p;cn.className='toast-container toast-container--'+p;cn.style.cssText='display:flex;visibility:visible;z-index:1100';document.body.appendChild(cn);}var to=document.createElement('div');to.id=i;to.className='alert alert--'+v;to.setAttribute('role','alert');to.setAttribute('aria-live','polite');to.style.cssText='display:flex;visibility:visible;opacity:0;transition:opacity .3s ease-out,transform .3s ease-out';var ir=p.indexOf('right')!==-1,il=p.indexOf('left')!==-1;to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';var co=document.createElement('div');co.className='alert__content';co.textContent=m;to.appendChild(co);if(d){var cb=document.createElement('button');cb.type='button';cb.className='alert__close';cb.setAttribute('aria-label','Dismiss toast');cb.innerHTML='<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';to.appendChild(cb);cb.onclick=function(){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);};}cn.appendChild(to);requestAnimationFrame(function(){to.offsetHeight;setTimeout(function(){requestAnimationFrame(function(){to.style.opacity='1';to.style.transform=ir||il?'translateX(0)':'translateY(0)';});},10);});if(a>0)setTimeout(function(){if(to.parentNode){to.style.opacity='0';to.style.transform=ir?'translateX(100%)':il?'translateX(-100%)':'translateY(-100%)';setTimeout(function(){if(to.parentNode)to.remove();if(cn.children.length===0)cn.remove();},300);}},a);return i;}document.body?c():document.addEventListener('DOMContentLoaded',c);return i;}function r(i){var to=document.getElementById(i);if(to){var cn=to.parentElement;to.style.opacity='0';to.style.transform='translateY(-10px)';setTimeout(function(){if(to.parentNode)to.remove();if(cn&&cn.classList.contains('toast-container')&&!cn.children.length)cn.remove();},300);}}function ra(){document.querySelectorAll('.toast-container').forEach(function(c){c.querySelectorAll('.alert').forEach(function(t){t.style.opacity='0';t.style.transform='translateY(-10px)';});setTimeout(function(){c.remove();},300);});}window.showToast=t;window.removeToast=r;window.removeAllToasts=ra;})();
-    </script>
-    <!-- Rizzo CSS: full bundle (reset + base + components + themes) -->
-    <link rel="stylesheet" href="/css/rizzo.min.css" />
-    <title>{title}</title>
-  </head>
-  <body>
-    <a href="#main-content" class="skip-link">Skip to main content</a>
-    <Navbar />
-    <Settings />
-    <main id="main-content">
-      <div class="layout__container">
-        <slot />
-      </div>
-    </main>
-  </body>
-</html>

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

@@ -1,172 +0,0 @@
----
-import DocsLayout from '../../layouts/DocsLayout.astro';
-import AccordionComponent from '../../components/Accordion.astro';
-import CodeBlock from '../../components/CodeBlock.astro';
----
-
-<DocsLayout title="Accordion Component — Astro" description="Accessible accordion with collapsible sections, single or multiple open states, and keyboard navigation">
-	
-	<p class="docs__read-docs">Read the full docs for this component at <a href="https://rizzo-css.vercel.app/docs/components/accordion" target="_blank" rel="noopener noreferrer">https://rizzo-css.vercel.app/docs/components/accordion</a>.</p>
-	
-		<section>
-		<h2>Accordion Component</h2>
-		<p>An accessible accordion for collapsible sections. Supports single or multiple open panels and full keyboard navigation.</p>
-		
-		<h3>Props</h3>
-		<ul>
-			<li><code>items</code> (array, required) - Array of objects with <code>id</code>, <code>title</code>, and optional <code>content</code></li>
-			<li><code>id</code> (string, optional) - Unique identifier for the accordion</li>
-			<li><code>allowMultiple</code> (boolean, optional) - Allow multiple panels open at once (default: <code>false</code>)</li>
-			<li><code>defaultExpanded</code> (string | string[], optional) - ID or array of IDs to expand by default (defaults to first item)</li>
-			<li><code>class</code> (string, optional) - Additional CSS classes</li>
-		</ul>
-
-		<h3>Item Structure</h3>
-		<ul>
-			<li><code>id</code> (string, required) - Unique identifier for the item</li>
-			<li><code>title</code> (string, required) - Heading text for the trigger</li>
-			<li><code>content</code> (string, optional) - HTML content for the panel (alternative to using slots)</li>
-		</ul>
-
-		<h3>Basic Usage (Single Open)</h3>
-		<p>By default only one panel is open at a time. Provide panel content as children in the same order as the items array:</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<AccordionComponent
-				items={[
-					{ id: 'one', title: 'Section one' },
-					{ id: 'two', title: 'Section two' },
-					{ id: 'three', title: 'Section three' },
-				]}
-			>
-				<div>
-					<p>Content for section one. Only one panel is open at a time.</p>
-				</div>
-				<div>
-					<p>Content for section two.</p>
-				</div>
-				<div>
-					<p>Content for section three.</p>
-				</div>
-			</AccordionComponent>
-		</div>
-
-		<CodeBlock code={`---
-import Accordion from '../../components/Accordion.astro';
----
-
-<Accordion
-  items={[
-    { id: 'one', title: 'Section one' },
-    { id: 'two', title: 'Section two' },
-    { id: 'three', title: 'Section three' },
-  ]}
->
-  <div><p>Content for section one</p></div>
-  <div><p>Content for section two</p></div>
-  <div><p>Content for section three</p></div>
-</Accordion>`} language="astro" />
-
-		<h3>Multiple Panels Open</h3>
-		<p>Set <code>allowMultiple</code> to <code>true</code> to allow multiple panels to be open at once:</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<AccordionComponent
-				allowMultiple
-				items={[
-					{ id: 'a', title: 'First' },
-					{ id: 'b', title: 'Second' },
-					{ id: 'c', title: 'Third' },
-				]}
-			>
-				<div><p>First panel content. You can open several at once.</p></div>
-				<div><p>Second panel content.</p></div>
-				<div><p>Third panel content.</p></div>
-			</AccordionComponent>
-		</div>
-
-		<CodeBlock code={`<Accordion
-  allowMultiple
-  items={[
-    { id: 'a', title: 'First' },
-    { id: 'b', title: 'Second' },
-    { id: 'c', title: 'Third' },
-  ]}
->
-  <div><p>First panel content</p></div>
-  <div><p>Second panel content</p></div>
-  <div><p>Third panel content</p></div>
-</Accordion>`} language="astro" />
-
-		<h3>With Content Property</h3>
-		<p>You can provide panel content directly in the item object:</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<AccordionComponent
-				items={[
-					{ id: 'faq1', title: 'What is Rizzo CSS?', content: '<p>A design system and component library built with semantic CSS variables and Astro.</p>' },
-					{ id: 'faq2', title: 'Is it accessible?', content: '<p>Yes. Components follow WCAG 2.1 AA and use proper ARIA patterns.</p>' },
-					{ id: 'faq3', title: 'Can I use it with other frameworks?', content: '<p>The CSS is framework-agnostic. See the multi-framework documentation.</p>' },
-				]}
-			/>
-		</div>
-
-		<CodeBlock code={`<Accordion
-  items={[
-    { id: 'faq1', title: 'Question one', content: '<p>Answer one</p>' },
-    { id: 'faq2', title: 'Question two', content: '<p>Answer two</p>' },
-  ]}
-/>`} language="astro" />
-
-		<h3>Default Expanded</h3>
-		<p>Control which panel(s) are open initially with <code>defaultExpanded</code>:</p>
-		<div class="example">
-			<div class="example-title">Live Example</div>
-			<AccordionComponent
-				defaultExpanded="second"
-				items={[
-					{ id: 'first', title: 'First' },
-					{ id: 'second', title: 'Second (open by default)' },
-					{ id: 'third', title: 'Third' },
-				]}
-			>
-				<div><p>First panel</p></div>
-				<div><p>Second panel is expanded by default.</p></div>
-				<div><p>Third panel</p></div>
-			</AccordionComponent>
-		</div>
-
-		<CodeBlock code={`<Accordion
-  defaultExpanded="second"
-  items={[
-    { id: 'first', title: 'First' },
-    { id: 'second', title: 'Second' },
-    { id: 'third', title: 'Third' },
-  ]}
->
-  <div><p>First</p></div>
-  <div><p>Second</p></div>
-  <div><p>Third</p></div>
-</Accordion>`} language="astro" />
-
-		<h3>Features</h3>
-		<ul>
-			<li><strong>Collapsible sections</strong> - Expand and collapse panels with smooth transitions</li>
-			<li><strong>Single or multiple open</strong> - <code>allowMultiple</code> controls whether only one or several panels can be open</li>
-			<li><strong>Keyboard navigation</strong> - Arrow Up/Down, Home, End, Enter, and Space</li>
-			<li><strong>ARIA</strong> - <code>aria-expanded</code>, <code>aria-controls</code>, <code>region</code>, <code>aria-labelledby</code></li>
-			<li><strong>Content from props or slots</strong> - Use <code>content</code> (HTML string) or pass children for panel content</li>
-			<li><strong>Theme-aware</strong> - Uses design system variables</li>
-		</ul>
-
-		<h3>Keyboard Navigation</h3>
-		<ul>
-			<li><strong>Arrow Down</strong> - Focus next trigger</li>
-			<li><strong>Arrow Up</strong> - Focus previous trigger</li>
-			<li><strong>Home</strong> - Focus first trigger</li>
-			<li><strong>End</strong> - Focus last trigger</li>
-			<li><strong>Enter / Space</strong> - Toggle focused panel</li>
-		</ul>
-		<p><strong>Svelte & Vanilla:</strong> <a href="/docs/svelte/components/accordion">Svelte</a> · Vanilla: same HTML and BEM as in Usage above; add minimal JS for expand/collapse.</p>
-	</section>
-</DocsLayout>