rizzo-css 0.0.74 → 0.0.75

package/README.md

@@ -16,7 +16,7 @@ bun add rizzo-css
 
 The package works with **npm**, **pnpm**, **yarn**, and **bun**. After install, run the CLI with your manager’s runner: `npx` (npm/yarn), `pnpm dlx`, or `bunx`.
 
-**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, Svelte, React, or Vue), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 53 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte|react|vue --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, Svelte, React, or Vue), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 58 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte|react|vue --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -25,7 +25,7 @@ npm create astro@latest my-app   && cd my-app && npx rizzo-css add
 
 **Running the CLI:** npm → `npx`; pnpm → `pnpm dlx`; yarn → `npx` (Yarn 1 has no `dlx`; works with Yarn 2+ too); bun → `bunx`. The [docs site](https://rizzo-css.vercel.app/docs/getting-started) tabs show the correct command for each manager.
 
-**Same flow for new and existing:** Both prompt for **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all 53 or pick). Full = site clone (no picker); also writes **RIZZO-SNIPPET.txt** (link + theme) unless `--no-snippet`. `npx rizzo-css doctor` checks config and CSS path. `npx rizzo-css theme` lists themes.
+**Same flow for new and existing:** Both prompt for **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all 58 or pick). Full = site clone (no picker); also writes **RIZZO-SNIPPET.txt** (link + theme) unless `--no-snippet`. `npx rizzo-css doctor` checks config and CSS path. `npx rizzo-css theme` lists themes.
 
 | | **Create new** (`init` → new) | **Add to existing** (`add` or `init` → existing) |
 |---|------------------------------|--------------------------------------------------|
@@ -72,7 +72,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.74 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.75 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -196,18 +196,18 @@ const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
 const VALID_THEME_VALUES = ['system', ...THEMES];
 // Components available for scaffold (must match scaffold/svelte and scaffold/astro; missing files are skipped on copy)
 const SVELTE_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
-  'BackToTop', 'Breadcrumb',   'FormGroup', 'Input', 'InputGroup', 'Checkbox', 'Textarea', 'Select', 'Radio',
-  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
 const ASTRO_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
-  'BackToTop', 'Breadcrumb',   'FormGroup', 'Input', 'InputGroup', 'Checkbox', 'Textarea', 'Select', 'Radio',
-  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
@@ -290,8 +290,8 @@ function logAddedDeps(selected, expanded, framework) {
 // Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug. New components (label, kbd, etc.) have stub pages in scaffold/vanilla/components/.
 const VANILLA_COMPONENT_SLUGS = {
   Accordion: 'accordion', Alert: 'alert', AlertDialog: 'alert-dialog', AspectRatio: 'aspect-ratio', Avatar: 'avatar', BackToTop: 'back-to-top', Badge: 'badge', Breadcrumb: 'breadcrumb', Button: 'button', ButtonGroup: 'button-group',
-  Card: 'cards', Calendar: 'calendar', RangeCalendar: 'range-calendar', Carousel: 'carousel', Checkbox: 'forms', Collapsible: 'collapsible', ContextMenu: 'context-menu', CopyToClipboard: 'copy-to-clipboard', Dashboard: 'dashboard', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
-  Empty: 'empty', Footer: 'footer', FormGroup: 'forms', HoverCard: 'hover-card', Input: 'forms', InputGroup: 'input-group', Icons: 'icons', Kbd: 'kbd', Label: 'label',
+  Card: 'cards', Calendar: 'calendar', RangeCalendar: 'range-calendar', Carousel: 'carousel', Chart: 'chart', Checkbox: 'forms', Collapsible: 'collapsible', Command: 'command', ContextMenu: 'context-menu', CopyToClipboard: 'copy-to-clipboard', Dashboard: 'dashboard', Direction: 'direction', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
+  Empty: 'empty', Footer: 'footer', FormGroup: 'forms', HoverCard: 'hover-card', Input: 'forms', InputGroup: 'input-group', InputOtp: 'input-otp', Icons: 'icons', Kbd: 'kbd', Label: 'label', Menubar: 'menubar',
   Modal: 'modal', Navbar: 'navbar', Pagination: 'pagination', Popover: 'popover', ProgressBar: 'progress-bar',
   Radio: 'forms', ResizableHandle: 'resizable', ResizablePane: 'resizable', ResizablePaneGroup: 'resizable', ScrollArea: 'scroll-area', Search: 'search', Separator: 'separator', Select: 'forms', Settings: 'settings', Sheet: 'sheet',
   Skeleton: 'skeleton', Slider: 'slider', SoundEffects: 'sound-effects', Spinner: 'spinner', Switch: 'switch', Table: 'table',
@@ -1124,7 +1124,7 @@ Commands:
 Options (init):
   --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: landing)
   --path <dir>      Project directory (relative to cwd or absolute). Scaffold and run install there. With --yes; interactive: "Enter path" option.
-  --framework <fw>  vanilla | astro | svelte | react | vue (same 53 components each)
+  --framework <fw>  vanilla | astro | svelte | react | vue (same 58 components each)
   --template <t>    create new: css-only | landing | docs | dashboard | full (default: landing). add: same options.
   --package-manager <pm>  npm | pnpm | yarn | bun (with --yes, or skip PM prompt when interactive)
   --install         After scaffolding, run package manager install in project directory (no prompt)
@@ -1189,7 +1189,7 @@ Component dependencies (Full template):
   Full list of available components and what relies on what: npx rizzo-css help components
 
 Frameworks:
-  Scaffolds (init/add): Vanilla, Astro, Svelte, React, Vue. Same 53 components in each framework’s syntax; same CSS and BEM. Docs: https://rizzo-css.vercel.app/docs/react and Vue.
+  Scaffolds (init/add): Vanilla, Astro, Svelte, React, Vue. Same 58 components in each framework’s syntax; same CSS and BEM. Docs: https://rizzo-css.vercel.app/docs/react and Vue.
 
 Docs: https://rizzo-css.vercel.app
 `);

package/dist/rizzo.min.css

@@ -213,7 +213,9 @@ div.navbar__link{background:none;border:none;color:inherit;cursor:pointer;font:i
 .calendar__next,.calendar__prev{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;height:36px;justify-content:center;padding:0;transition:background var(--transition-fast);width:36px}
 .calendar__next:hover,.calendar__prev:hover{background:var(--border)}.calendar__month{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.calendar__grid{display:flex;flex-direction:column;gap:0}.calendar__row{display:grid;gap:0;grid-template-columns:repeat(7,1fr)}.calendar__weekday{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);text-align:center}.calendar__day{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);height:36px;justify-content:center;margin:2px;min-width:36px;padding:0;transition:background var(--transition-fast)}.calendar__day:hover{background:var(--border)}.calendar__day--today{font-weight:var(--font-weight-semibold);outline:2px solid var(--accent);outline-offset:-2px}.calendar__day--selected{background:var(--accent);color:var(--background)}.calendar__day--selected:hover{background:var(--accent-hover);color:var(--background)}.calendar__day--other-month{color:var(--text-dim);opacity:.7}.calendar__day--in-range{background:oklch(from var(--accent) l c h/20%);color:var(--text)}.calendar__day--in-range:hover{background:oklch(from var(--accent) l c h/35%)}
 .calendar__day--range-end,.calendar__day--range-start{background:var(--accent);color:var(--accent-text)}
-.calendar__day--range-end:hover,.calendar__day--range-start:hover{background:var(--accent-hover);color:var(--accent-text-on-hover)}.home{padding:var(--content-padding-y) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.home__announcement{align-items:center;background-color:oklch(from var(--accent-fg) l c h/8%);border:var(--border-width) solid oklch(from var(--accent-fg) l c h/14%);border-radius:var(--radius-lg);color:var(--text);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-2);justify-content:center;margin-bottom:var(--section-spacing);padding:var(--spacing-3) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base)}.home__announcement:hover{background-color:oklch(from var(--accent-fg) l c h/12%);border-color:oklch(from var(--accent-fg) l c h/20%)}.home__announcement-label{color:var(--accent-fg);font-weight:var(--font-weight-semibold)}.home__announcement-text{color:var(--text-dim)}.home__announcement-arrow{color:var(--text-dim);transition:transform var(--transition-base)}.home__announcement:hover .home__announcement-arrow{transform:translateX(var(--spacing-0-5))}.home__hero{margin-bottom:var(--section-spacing-lg);padding:var(--spacing-14) 0 var(--spacing-16);text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__examples-row{display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:center;margin-top:var(--spacing-10)}.home__example-pill{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);color:var(--text);display:inline-block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.home__example-pill:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent-fg)}.home__example-pill:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__showcase{margin-bottom:var(--section-spacing-lg)}.home__showcase-grid{display:grid;gap:var(--spacing-8);grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150)}@media (width >= 768px){.home__showcase-grid{grid-template-columns:1fr 1fr;max-width:100%}}.home__showcase .home__example{margin-bottom:0}.home__showcase .home__example:last-child{grid-column:1/-1;justify-self:center;max-width:var(--spacing-80)}@media (width >= 768px){.home__showcase .home__example:last-child{grid-column:auto;max-width:100%}}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--page-header-margin-bottom);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--section-spacing-lg);max-width:100%;min-width:0}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);min-width:0;width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:100%}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);min-width:0;overflow:hidden;padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
+.calendar__day--range-end:hover,.calendar__day--range-start:hover{background:var(--accent-hover);color:var(--accent-text-on-hover)}.chart{--chart-bar-fill:var(--accent);display:block;width:100%}.chart__bars{align-items:flex-end;display:flex;gap:var(--spacing-2);min-height:120px;padding:var(--spacing-4) 0}.chart__bar-wrap{align-items:center;display:flex;flex:1;flex-direction:column;gap:var(--spacing-1)}.chart__bar{background:var(--chart-bar-fill);border-radius:var(--radius-sm);max-width:2.5rem;min-height:4px;transition:height .2s ease;width:100%}.chart__label{color:var(--text-dim);font-size:var(--font-size-sm)}.command-root{position:relative}.command__overlay{background:oklch(from var(--overlay) l c h/60%);inset:0;z-index:var(--z-modal,4000)}.command__dialog,.command__overlay{animation:overlay-in .15s ease;position:fixed}.command__dialog{background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;left:50%;max-height:70vh;top:15%;transform:translateX(-50%);width:min(100% - var(--spacing-8),28rem);z-index:calc(var(--z-modal, 4000) + 1)}.command__search-wrap{border-bottom:1px solid var(--border);padding:var(--spacing-2)}.command__search{background:var(--background);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3);width:100%}.command__list{max-height:280px;overflow-y:auto;padding:var(--spacing-2)}.command__item{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-align:left;width:100%}.command__item:hover,
+.command__item[aria-selected="true"]{background:var(--background-alt)}.command__item kbd{color:var(--text-dim);font-size:var(--font-size-xs);margin-left:var(--spacing-2)}.direction{display:block}.direction--rtl{direction:rtl}.direction--ltr{direction:ltr}.input-otp{display:flex;gap:var(--spacing-2);justify-content:center}.input-otp__digit{background:var(--background);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--font-size-lg);font-variant-numeric:tabular-nums;height:2.5rem;text-align:center;width:2.5rem}.input-otp__digit:focus{outline:2px solid var(--accent);outline-offset:2px}.input-otp__digit::-moz-placeholder{color:var(--text-dim)}.input-otp__digit::placeholder{color:var(--text-dim)}.menubar{align-items:center;background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius);display:flex;gap:0;min-height:2.5rem;padding:0 var(--spacing-2)}.menubar__item{position:relative}.menubar__trigger{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.menubar__menu,.menubar__trigger:hover,
+.menubar__trigger[aria-expanded="true"]{background:var(--background)}.menubar__menu{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);left:0;margin-top:var(--spacing-1);min-width:10rem;padding:var(--spacing-1);position:absolute;top:100%;z-index:100}.menubar__menu-item{background:transparent;border:none;border-radius:var(--radius);color:var(--text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-align:left;text-decoration:none;width:100%}.menubar__menu-item:hover{background:var(--background-alt)}.home{padding:var(--content-padding-y) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--content-padding-x);padding-right:var(--content-padding-x);width:100%}.home__announcement{align-items:center;background-color:oklch(from var(--accent-fg) l c h/8%);border:var(--border-width) solid oklch(from var(--accent-fg) l c h/14%);border-radius:var(--radius-lg);color:var(--text);display:flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--spacing-2);justify-content:center;margin-bottom:var(--section-spacing);padding:var(--spacing-3) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base)}.home__announcement:hover{background-color:oklch(from var(--accent-fg) l c h/12%);border-color:oklch(from var(--accent-fg) l c h/20%)}.home__announcement-label{color:var(--accent-fg);font-weight:var(--font-weight-semibold)}.home__announcement-text{color:var(--text-dim)}.home__announcement-arrow{color:var(--text-dim);transition:transform var(--transition-base)}.home__announcement:hover .home__announcement-arrow{transform:translateX(var(--spacing-0-5))}.home__hero{margin-bottom:var(--section-spacing-lg);padding:var(--spacing-14) 0 var(--spacing-16);text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__examples-row{display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:center;margin-top:var(--spacing-10)}.home__example-pill{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);color:var(--text);display:inline-block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.home__example-pill:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent-fg)}.home__example-pill:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__showcase{margin-bottom:var(--section-spacing-lg)}.home__showcase-grid{display:grid;gap:var(--spacing-8);grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150)}@media (width >= 768px){.home__showcase-grid{grid-template-columns:1fr 1fr;max-width:100%}}.home__showcase .home__example{margin-bottom:0}.home__showcase .home__example:last-child{grid-column:1/-1;justify-self:center;max-width:var(--spacing-80)}@media (width >= 768px){.home__showcase .home__example:last-child{grid-column:auto;max-width:100%}}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--page-header-margin-bottom);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--section-spacing-lg);max-width:100%;min-width:0}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);min-width:0;width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:100%}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);min-width:0;overflow:hidden;padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
 .home__install-or::after,.home__install-or::before{border-top:var(--border-width) solid var(--border);content:"";flex:1;height:0}@media (width >= 768px){.home__install-or{flex-direction:column;gap:var(--spacing-4);padding:0 var(--spacing-4)}
   .home__install-or::after,.home__install-or::before{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-8);width:0}}.home__install-title{color:var(--text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0;text-align:center}.home__install-label{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0;text-align:center}.home__install-copy{align-items:center;display:flex;justify-content:center;width:100%}.home__install-copy .copy-to-clipboard{justify-content:space-between;width:100%}.home__install-copy .copy-to-clipboard__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home__cli-tabs{margin-top:var(--spacing-1)}.home__cli-tabs .cli-command-tabs__tabs,
 .home__cli-tabs .package-install-tabs__tabs{margin-top:0}.home__cli-tabs .tabs__list{margin-bottom:var(--spacing-2);overflow-x:visible;overflow-y:visible;scrollbar-width:none}.home__cli-tabs .tabs__list::-webkit-scrollbar{display:none}.home__cli-tabs .tabs__panel{min-height:0;padding:0}.home__cli-tabs .cli-command-tabs__panel .code-block__header{padding:var(--spacing-1) var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block pre{padding:var(--spacing-2)}.home__cli-tabs .cli-command-tabs__panel .code-block,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.74",
+  "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.74" 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.74",
+    "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
 

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
 

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.74`, 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

@@ -495,6 +495,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -833,6 +841,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -495,6 +495,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -833,6 +841,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -495,6 +495,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -833,6 +841,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -495,6 +495,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -833,6 +841,14 @@
 
 
 
+
+
+
+
+
+
+
+