rizzo-css 0.0.7 → 0.0.9

package/scaffold/svelte/Dropdown.svelte

@@ -29,17 +29,18 @@
     align = 'start',
   }: Props = $props();
 
-  const dropdownId = $derived(id ?? `dropdown-${Math.random().toString(36).slice(2, 11)}`);
-  const menuId = `${dropdownId}-menu`;
-  const triggerId = `${dropdownId}-trigger`;
+  const fallbackId = `dropdown-${Math.random().toString(36).slice(2, 11)}`;
+  const dropdownId = $derived(id ?? fallbackId);
+  const menuId = $derived(`${dropdownId}-menu`);
+  const triggerId = $derived(`${dropdownId}-trigger`);
 
   let open = $state(false);
   let openSubmenuIndex = $state<number | null>(null);
   let menuEl: HTMLDivElement;
   let triggerEl: HTMLButtonElement;
 
-  const classes = ['dropdown', className].filter(Boolean).join(' ').trim();
-  const menuClasses = `dropdown__menu dropdown__menu--${position} dropdown__menu--${align}`;
+  const classes = $derived(['dropdown', className].filter(Boolean).join(' ').trim());
+  const menuClasses = $derived(`dropdown__menu dropdown__menu--${position} dropdown__menu--${align}`);
 
   function closeMenu() {
     open = false;
@@ -119,7 +120,8 @@
   >
     <span class="dropdown__trigger-text">{trigger}</span>
     <span class="dropdown__icon" aria-hidden="true">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="{dropdownId}-trigger-icon-title">
+        <title id="{dropdownId}-trigger-icon-title">Expand menu</title>
         <path d="m6 9 6 6 6-6" />
       </svg>
     </span>
@@ -147,7 +149,8 @@
             <a
               class="dropdown__item dropdown__item--disabled={item.disabled}"
               role="menuitem"
-              href={item.disabled ? undefined : item.href}
+              href={item.href}
+              aria-label={item.label}
               aria-disabled={item.disabled ? 'true' : undefined}
               tabindex={open ? 0 : -1}
               onclick={(e) => {
@@ -175,16 +178,21 @@
                 }
               }}
               onkeydown={(e) => {
+                if (item.disabled) return;
                 if (hasSubmenu && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight')) {
                   e.preventDefault();
                   toggleSubmenu(index);
+                } else if (!hasSubmenu && (e.key === 'Enter' || e.key === ' ')) {
+                  e.preventDefault();
+                  handleItemClick(item, e as unknown as MouseEvent);
                 }
               }}
             >
               <span>{item.label}</span>
               {#if hasSubmenu}
                 <span class="dropdown__item-arrow" aria-hidden="true">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="{dropdownId}-submenu-arrow-{index}-title">
+                    <title id="{dropdownId}-submenu-arrow-{index}-title">Expand submenu</title>
                     <path d="m6 9 6 6 6-6" />
                   </svg>
                 </span>
@@ -205,9 +213,13 @@
                   <a
                     class="dropdown__item dropdown__submenu-item dropdown__item--disabled={subItem.disabled}"
                     role="menuitem"
-                    href={subItem.disabled ? undefined : subItem.href}
+                    href={subItem.href}
+                    aria-label={subItem.label}
                     aria-disabled={subItem.disabled ? 'true' : undefined}
-                    onclick={() => closeMenu()}
+                    onclick={(e) => {
+                      if (subItem.disabled) e.preventDefault();
+                      else closeMenu();
+                    }}
                   >
                     <span>{subItem.label}</span>
                   </a>
@@ -223,6 +235,14 @@
                         closeMenu();
                       }
                     }}
+                    onkeydown={(e) => {
+                      if (subItem.disabled) return;
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        subItem.onClick?.(subItem.value ?? subItem.label);
+                        closeMenu();
+                      }
+                    }}
                   >
                     <span>{subItem.label}</span>
                   </div>

package/scaffold/svelte/Modal.svelte

@@ -138,6 +138,7 @@
     <h2 id="{modalId}-title" class="modal__title">{title}</h2>
     <button type="button" class="modal__close" aria-label="Close modal" data-modal-close onclick={close}>
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <title>Close</title>
         <path d="M18 6L6 18" />
         <path d="M6 6l12 12" />
       </svg>

package/scaffold/svelte/Table.svelte

@@ -29,10 +29,12 @@
   }: Props = $props();
 
   const tableId = `table-${Math.random().toString(36).slice(2, 11)}`;
-  const stripClass = striped ? 'table--striped' : '';
-  const sortClass = sortable ? 'table--sortable' : '';
-  const filterClass = filterable ? 'table--filterable' : '';
-  const classes = ['table', stripClass, sortClass, filterClass, className].filter(Boolean).join(' ').trim();
+  const classes = $derived(
+    ['table', striped ? 'table--striped' : '', sortable ? 'table--sortable' : '', filterable ? 'table--filterable' : '', className]
+      .filter(Boolean)
+      .join(' ')
+      .trim()
+  );
 
   let sortColumnIndex = $state<number | null>(null);
   let sortDirection = $state<'ascending' | 'descending'>('ascending');
@@ -85,6 +87,7 @@
       <label for="{tableId}-filter" class="sr-only">Filter table</label>
       <span class="table__filter-icon" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="table__filter-icon-svg" aria-hidden="true">
+          <title>Filter</title>
           <path d="M4 6h16M4 12h10M4 18h6" />
         </svg>
       </span>
@@ -128,6 +131,7 @@
                   <span class="table__cell-content">{col.label}</span>
                   <span class="table__sort-icon" aria-hidden="true">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="table__sort-icon-svg" aria-hidden="true">
+                      <title>Sort</title>
                       <path d="M3 6h18M7 12h10M10 18h4" />
                     </svg>
                   </span>

package/scaffold/svelte-app/README.md

@@ -0,0 +1,28 @@
+# SvelteKit + Rizzo CSS
+
+This project was scaffolded with `npx rizzo-css init` (Svelte).
+
+## First-time setup
+
+**Install dependencies before running any SvelteKit command:**
+
+```bash
+pnpm install
+# or: npm install
+```
+
+Then start the dev server:
+
+```bash
+pnpm dev
+```
+
+The theme selected during `rizzo-css init` is set in `src/app.html` (`data-theme`) and is used on first load when you have no saved preference in the browser.
+
+## 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/svelte-app/src/app.d.ts

@@ -1,5 +1,14 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+
+/** Toast options (injected by app.html script from Rizzo CSS scaffold) */
+interface ToastOptions {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  position?: string;
+  autoDismiss?: number;
+  dismissible?: boolean;
+}
+
 declare global {
   namespace App {
     // interface Error {}
@@ -8,6 +17,12 @@ declare global {
     // interface PageState {}
     // interface Platform {}
   }
+
+  interface Window {
+    showToast?(message: string, options?: ToastOptions): string | null;
+    removeToast?(id: string): void;
+    removeAllToasts?(): void;
+  }
 }
 
 export {};

package/scaffold/svelte-app/src/app.html

@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Theme flash prevention + accessibility (same as main site) -->
+    <script>
+      (function(){try{var s=localStorage.getItem('theme');var d='github-dark-classic';var l='github-light';var initial=document.documentElement.getAttribute('data-theme');var r=!s?(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>
+      (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" />
     %sveltekit.head%

package/scaffold/svelte-app/src/routes/+page.svelte

@@ -1,12 +1,31 @@
 <script>
-  // Welcome page
+  function showDemoToast() {
+    if (typeof window !== 'undefined' && window.showToast) {
+      window.showToast('Hello from Rizzo!', { variant: 'success' });
+    }
+  }
 </script>
 
-<main style="padding: var(--spacing-6); max-width: 65ch;">
-  <h1>Hello, Rizzo CSS</h1>
-  <p>Your SvelteKit project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Astro.</p>
-  <p>
-    <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
-    — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
-  </p>
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
+  <a href="/" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
+  <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Docs</a>
+</header>
+<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);">
+  <span class="badge badge--primary badge--sm mb-4">Svelte + Rizzo CSS</span>
+  <h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
+  <p style="font-size: var(--font-size-xl); color: var(--text-dim); max-width: 42ch; margin: 0 0 var(--spacing-8) 0; line-height: var(--line-height-relaxed);">Same design system as Vanilla JS and Astro — 14 themes, 24 components, full keyboard and screen reader support.</p>
+  <div class="flex flex-wrap justify-center gap-4 mb-12">
+    <a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Get started</a>
+    <a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline" target="_blank" rel="noopener noreferrer">Components</a>
+    <button type="button" class="btn btn-outline" on:click={showDemoToast}>Show toast</button>
+  </div>
+  <div class="flex flex-wrap justify-center gap-3 mb-16">
+    <span class="badge badge--info">14 themes</span>
+    <span class="badge badge--info">24 components</span>
+    <span class="badge badge--info">WCAG AA</span>
+  </div>
+  <footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
+    <a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web
+  </footer>
 </main>