rizzo-css 0.0.73 → 0.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "engines": {
     "node": ">=18"
   },
@@ -20,7 +20,7 @@
     }
   },
   "bin": {
-    "rizzo-css": "./bin/rizzo-css.js"
+    "rizzo-css": "bin/rizzo-css.js"
   },
   "files": [
     ".env.example",
@@ -53,9 +53,9 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mingleusa/rizzo-css.git"
+    "url": "git+https://github.com/mingleusa/rizzo-css.git"
   },
   "homepage": "https://rizzo-css.vercel.app",
   "license": "MIT",
   "author": "mingleusa"
-}
+}

package/scaffold/astro/Footer.astro

@@ -13,7 +13,7 @@ interface Props {
   links?: FooterLink[];
   /** Optional class for the root element */
   class?: string;
-  /** Optional version string (e.g. from package.json); shown as "v0.0.73" with link to CHANGELOG */
+  /** Optional version string (e.g. from package.json); shown as "v0.0.75" with link to CHANGELOG */
   version?: string;
 }
 

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

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-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 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+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 58 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/astro/variants/full/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Astro, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 58 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 

package/scaffold/react/base/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "rizzo-css": "^0.0.73",
+    "rizzo-css": "^0.0.75",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/svelte/Chart.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  interface ChartDataItem {
+    label: string;
+    value: number;
+  }
+
+  interface Props {
+    data?: ChartDataItem[];
+    class?: string;
+  }
+
+  let {
+    data = [
+      { label: 'A', value: 40 },
+      { label: 'B', value: 65 },
+      { label: 'C', value: 30 },
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  const max = $derived(Math.max(1, ...data.map((d) => d.value)));
+  const ariaLabel = $derived(`Bar chart: ${data.map((d) => `${d.label} ${d.value}`).join(', ')}`);
+</script>
+
+<div class="chart {className}" role="img" aria-label={ariaLabel}>
+  <div class="chart__bars">
+    {#each data as d (d.label)}
+      <div class="chart__bar-wrap">
+        <div class="chart__bar" style="height: {(d.value / max) * 100}%" />
+        <span class="chart__label">{d.label}</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/scaffold/svelte/Command.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  interface CommandItem {
+    id: string;
+    label: string;
+    shortcut?: string;
+  }
+
+  interface Props {
+    triggerLabel?: string;
+    searchPlaceholder?: string;
+    items?: CommandItem[];
+    class?: string;
+  }
+
+  let {
+    triggerLabel = 'Open command palette (⌘K)',
+    searchPlaceholder = 'Search…',
+    items = [],
+    class: className = '',
+  }: Props = $props();
+
+  let open = $state(false);
+  let query = $state('');
+  let selectedIndex = $state(0);
+  let searchEl: HTMLInputElement;
+
+  const filtered = $derived(items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())));
+
+  $effect(() => {
+    if (filtered.length) selectedIndex = 0;
+  });
+
+  function close() {
+    open = false;
+    query = '';
+    selectedIndex = 0;
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') close();
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      open = !open;
+    }
+  }
+
+  $effect(() => {
+    if (!open) return;
+    document.addEventListener('keydown', onKey);
+    queueMicrotask(() => searchEl?.focus());
+    return () => document.removeEventListener('keydown', onKey);
+  });
+</script>
+
+<div class="command-root {className}">
+  <button type="button" class="btn btn-outline" onclick={() => (open = true)} aria-haspopup="dialog" aria-expanded={open}>
+    {triggerLabel}
+  </button>
+  {#if open}
+    <div class="command__overlay" aria-hidden="false" role="presentation" onclick={close}></div>
+    <div class="command__dialog" role="dialog" aria-modal="true" aria-label="Command palette">
+      <div class="command__search-wrap">
+        <input
+          type="search"
+          class="command__search"
+          placeholder={searchPlaceholder}
+          autocomplete="off"
+        bind:value={query}
+            bind:this={searchEl}
+        />
+      </div>
+      <div class="command__list" role="listbox">
+        {#each filtered as item, i}
+          <button
+            type="button"
+            class="command__item"
+            role="option"
+            aria-selected={i === selectedIndex}
+            onclick={close}
+            onmouseenter={() => (selectedIndex = i)}
+          >
+            {item.label}
+            {#if item.shortcut}<kbd>{item.shortcut}</kbd>{/if}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/scaffold/svelte/Direction.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    dir?: 'ltr' | 'rtl';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { dir = 'ltr', class: className = '', children }: Props = $props();
+
+  const dirClass = $derived(dir === 'rtl' ? 'direction--rtl' : 'direction--ltr');
+</script>
+
+<div class="direction {dirClass} {className}" {dir}>
+  {@render children?.()}
+</div>

package/scaffold/svelte/InputOtp.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  interface Props {
+    length?: number;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let { length = 6, ariaLabel = 'One-time code', class: className = '' }: Props = $props();
+
+  const indices = $derived(Array.from({ length }, (_, i) => i));
+  let digits = $state<string[]>(Array(length).fill(''));
+  let containerEl: HTMLDivElement;
+
+  function inputs() {
+    return containerEl?.querySelectorAll<HTMLInputElement>('.input-otp__digit') ?? [];
+  }
+
+  function handleInput(i: number, e: Event) {
+    const v = (e.target as HTMLInputElement).value.replace(/\D/g, '').slice(-1);
+    digits = [...digits];
+    digits[i] = v;
+    if (v && i < length - 1) inputs()[i + 1]?.focus();
+  }
+
+  function handleKeyDown(i: number, e: KeyboardEvent) {
+    if (e.key === 'Backspace' && !digits[i] && i > 0) inputs()[i - 1]?.focus();
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault();
+    const pasted = (e.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, length);
+    const next = [...digits];
+    pasted.split('').forEach((ch, j) => {
+      if (next[j] !== undefined) next[j] = ch;
+    });
+    digits = next;
+    const focusIdx = Math.min(pasted.length, length) - 1;
+    inputs()[focusIdx]?.focus();
+  }
+</script>
+
+<div class="input-otp {className}" role="group" aria-label={ariaLabel} bind:this={containerEl}>
+  {#each indices as i}
+    <input
+      type="text"
+      inputmode="numeric"
+      maxlength="1"
+      autocomplete="one-time-code"
+      class="input-otp__digit"
+      aria-label="Digit {i + 1} of {length}"
+      value={digits[i]}
+      oninput={(e) => handleInput(i, e)}
+      onkeydown={(e) => handleKeyDown(i, e)}
+      onpaste={handlePaste}
+    />
+  {/each}
+</div>

package/scaffold/svelte/Menubar.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  interface MenubarMenuItem {
+    label: string;
+    href?: string;
+  }
+
+  interface MenubarItem {
+    label: string;
+    menu: MenubarMenuItem[];
+  }
+
+  interface Props {
+    items?: MenubarItem[];
+    class?: string;
+  }
+
+  let {
+    items = [
+      { label: 'File', menu: [{ label: 'New', href: '#' }, { label: 'Open', href: '#' }] },
+      { label: 'Edit', menu: [{ label: 'Undo', href: '#' }] },
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  let openIndex = $state<number | null>(null);
+  let navRef: HTMLElement;
+
+  function close(e?: MouseEvent) {
+    if (e && navRef && navRef.contains(e.target as Node)) return;
+    openIndex = null;
+  }
+
+  $effect(() => {
+    if (openIndex === null) return;
+    const onClose = (e: MouseEvent) => close(e);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') openIndex = null;
+    };
+    const t = setTimeout(() => document.addEventListener('click', onClose), 0);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      clearTimeout(t);
+      document.removeEventListener('click', onClose);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
+</script>
+
+<nav bind:this={navRef} class="menubar {className}" role="menubar" aria-label="Main menu">
+  {#each items as item, i}
+    <div class="menubar__item" role="none">
+      <button
+        type="button"
+        role="menuitem"
+        class="menubar__trigger"
+        aria-haspopup="true"
+        aria-expanded={openIndex === i}
+        onclick={() => (openIndex = openIndex === i ? null : i)}
+      >
+        {item.label}
+      </button>
+      <div
+        class="menubar__menu"
+        role="menu"
+        aria-label={item.label}
+        hidden={openIndex !== i}
+      >
+        {#each item.menu as entry}
+          {#if entry.href}
+            <a href={entry.href} class="menubar__menu-item" role="menuitem">{entry.label}</a>
+          {:else}
+            <button type="button" class="menubar__menu-item" role="menuitem" onclick={() => (openIndex = null)}>{entry.label}</button>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/each}
+</nav>

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

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = base + component picker (all 58 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 
@@ -38,6 +38,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 ## Project structure
 
 - `svelte.config.js` — SvelteKit configuration
+- `vite.config.js` — Vite config with SvelteKit plugin (required for `pnpm dev`)
 - `src/app.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page

package/scaffold/svelte/base/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});

package/scaffold/svelte/variants/full/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 53 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
+SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you chose **Create new** and Svelte, then **Full** template. **Full** = clone of the Rizzo docs site (no component picker). **Landing** / **Docs** / **Dashboard** = base + component picker (all 58 or pick). Same template choice for **Add to existing** (`npx rizzo-css add`).
 
 ## Setup
 
@@ -38,6 +38,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 ## Project structure
 
 - `svelte.config.js` — SvelteKit configuration
+- `vite.config.js` — Vite config with SvelteKit plugin (required for `pnpm dev`)
 - `src/app.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page

package/scaffold/svelte/variants/full/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});

package/scaffold/vanilla/README-RIZZO.md

@@ -15,7 +15,7 @@
   Design system · Vanilla · Astro · Svelte
 </pre>
 
-This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = CSS, fonts, icons, sfx + component picker (all 53 or pick); Landing adds hero/features; Docs adds sidebar + sample doc; Dashboard adds sidebar + stats/table. **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice**; you must add the stylesheet `<link>` yourself (CLI prints the exact tag).
+This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Landing**, **Docs**, **Dashboard**, or **Full**. **Full** = clone of the docs site. **Landing** / **Docs** / **Dashboard** = CSS, fonts, icons, sfx + component picker (all 58 or pick); Landing adds hero/features; Docs adds sidebar + sample doc; Dashboard adds sidebar + stats/table. **Add to existing project** (or `npx rizzo-css add`) uses the **same template choice**; you must add the stylesheet `<link>` yourself (CLI prints the exact tag).
 
 ## First-time setup
 
@@ -28,7 +28,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.73`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.75`, 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

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert-dialog.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/aspect-ratio.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/back-to-top.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -489,6 +489,17 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -824,6 +835,17 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+