rizzo-css 0.0.80 → 0.0.81

package/README.md

@@ -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.80 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.81 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -199,7 +199,7 @@ const SVELTE_COMPONENTS = [
   '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',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', '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',
@@ -208,7 +208,7 @@ const ASTRO_COMPONENTS = [
   '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',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', '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',
@@ -221,7 +221,7 @@ const RECOMMENDED_COMPONENTS = [
   'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
   'BackToTop', 'Breadcrumb', 'FormGroup', 'Input', 'Checkbox', 'Textarea', 'Select', 'Radio',
   'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
-  'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
+  'Modal', 'Toast', 'Table', 'ThemeIcon', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Search', 'Settings', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "engines": {
     "node": ">=18"
   },

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.80",
+    "rizzo-css": "^0.0.81",
     "typescript": "~5.6.2",
     "vite": "^6.0.1"
   }

package/scaffold/svelte/Settings.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { FONT_PAIRS, FONT_PAIR_DEFAULT } from './config/fonts';
+  import ThemeSwitcher from './ThemeSwitcher.svelte';
+  import FontSwitcher from './FontSwitcher.svelte';
+  import SoundEffects from './SoundEffects.svelte';
 
   interface Props {
     open?: boolean;
@@ -11,8 +13,6 @@
   const isBrowser = typeof window !== 'undefined' && typeof localStorage?.getItem === 'function';
   let fontSizeLabel = $state('100%');
   let fontSizeSlider = $state(1);
-  let fontPairValue = $state(isBrowser ? localStorage.getItem('fontPair') || FONT_PAIR_DEFAULT : FONT_PAIR_DEFAULT);
-  let soundEffects = $state(isBrowser && localStorage.getItem('soundEffects') === 'true');
   let reducedMotion = $state(isBrowser && localStorage.getItem('reducedMotion') === 'true');
   let highContrast = $state(isBrowser && localStorage.getItem('highContrast') === 'true');
   let scrollbarStyle = $state((isBrowser ? localStorage.getItem('scrollbarStyle') || 'thin' : 'thin') as 'thin' | 'thick' | 'hidden');
@@ -24,16 +24,6 @@
     fontSizeLabel = `${Math.round(scale * 100)}%`;
   }
 
-  function applyFontPair(value: string) {
-    if (typeof document === 'undefined') return;
-    const pair = FONT_PAIRS.find((p) => p.value === value);
-    if (pair) {
-      document.documentElement.style.setProperty('--font-family', pair.sans);
-      document.documentElement.style.setProperty('--font-family-mono', pair.mono);
-      localStorage?.setItem('fontPair', value);
-    }
-  }
-
   $effect(() => {
     if (typeof window === 'undefined') return;
     (window as unknown as { openSettings?: () => void }).openSettings = () => {
@@ -61,21 +51,12 @@
       const scale = saved ? parseFloat(saved) : 1;
       fontSizeSlider = scale;
       fontSizeLabel = `${Math.round(scale * 100)}%`;
-      const savedPair = localStorage?.getItem('fontPair') || FONT_PAIR_DEFAULT;
-      fontPairValue = savedPair;
-      soundEffects = localStorage?.getItem('soundEffects') === 'true';
       reducedMotion = localStorage?.getItem('reducedMotion') === 'true';
       highContrast = localStorage?.getItem('highContrast') === 'true';
       scrollbarStyle = (localStorage?.getItem('scrollbarStyle') || 'thin') as 'thin' | 'thick' | 'hidden';
     }
   });
 
-  function onSoundEffectsChange(e: Event) {
-    const checked = (e.target as HTMLInputElement).checked;
-    soundEffects = checked;
-    localStorage?.setItem('soundEffects', checked ? 'true' : 'false');
-  }
-
   function close() {
     openInternal = false;
   }
@@ -87,13 +68,6 @@
     applyFontSize(scale);
   }
 
-  function onFontPairChange(e: Event) {
-    const target = e.target as HTMLSelectElement;
-    const value = target.value;
-    fontPairValue = value;
-    applyFontPair(value);
-  }
-
   function onReducedMotionChange(e: Event) {
     const checked = (e.target as HTMLInputElement).checked;
     reducedMotion = checked;
@@ -133,6 +107,12 @@
       <button type="button" class="settings__close" data-settings-close aria-label="Close settings" onclick={close}>×</button>
     </div>
     <div class="settings__content" tabindex="-1" aria-label="Settings options">
+      <section class="settings__section">
+        <h3 class="settings__section-title">Theme</h3>
+        <div class="settings__control">
+          <ThemeSwitcher idPrefix="settings" />
+        </div>
+      </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Font Size</h3>
         <div class="settings__control">
@@ -159,31 +139,14 @@
       <section class="settings__section">
         <h3 class="settings__section-title">Font</h3>
         <div class="settings__control">
-          <label for="font-pair-select" class="settings__label"><span class="settings__label-text">Font pair (sans + mono)</span></label>
-          <select
-            id="font-pair-select"
-            class="form-control"
-            aria-label="Font pair"
-            data-font-pair
-            style="width: 100%;"
-            value={fontPairValue}
-            onchange={onFontPairChange}
-          >
-            {#each FONT_PAIRS as pair}
-              <option value={pair.value} data-sans={pair.sans} data-mono={pair.mono}>{pair.label}</option>
-            {/each}
-          </select>
+          <FontSwitcher idPrefix="settings" />
           <p class="settings__help-text">Body text and code blocks use the selected pair.</p>
         </div>
       </section>
       <section class="settings__section">
         <h3 class="settings__section-title">Sound</h3>
         <div class="settings__control">
-          <label class="settings__checkbox-label">
-            <input type="checkbox" class="settings__checkbox" aria-label="Play sound on click" checked={soundEffects} onchange={onSoundEffectsChange} />
-            <span>Play sound on click</span>
-          </label>
-          <p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>
+          <SoundEffects showHelp={true} />
         </div>
       </section>
       <section class="settings__section">

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

@@ -44,6 +44,7 @@ SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init` when you
 - `src/routes/+layout.svelte` — Root layout
 - `src/routes/+page.svelte` — Home page
 - **Navbar** — Flat links (Docs, Components, Blocks, Themes, Colors); Search and Settings in the scaffold
+- **Settings** — Slide-in panel (gear icon): Theme (ThemeSwitcher), Font Size, Font (FontSwitcher), Sound (SoundEffects), Accessibility (reduce motion, high contrast, scrollbar style). Same contents as the docs site.
 - `static/css/rizzo.min.css` — Rizzo CSS bundle (added by CLI; font URLs point to `/assets/fonts/`)
 - `static/assets/fonts/` — Rizzo font files (added by CLI)
 - `README-RIZZO.md` — This file (scaffold docs; does not replace your project README)

package/scaffold/vanilla/README-RIZZO.md

@@ -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.80`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.81`, 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

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

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

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/alert.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

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

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/avatar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

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

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/badge.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/breadcrumb.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/button-group.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/button.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/calendar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/cards.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/carousel.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/chart.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/collapsible.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/command.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/context-menu.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/copy-to-clipboard.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/dashboard.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/direction.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/divider.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/docs-sidebar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/dropdown.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/empty.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/font-switcher.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/footer.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/forms.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/hover-card.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/icons.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/index.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -927,6 +928,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/input-group.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/input-otp.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/kbd.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/label.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/menubar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/modal.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/navbar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/pagination.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/popover.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/progress-bar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/range-calendar.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/resizable.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/scroll-area.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/search.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/separator.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/settings.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/sheet.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/skeleton.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/slider.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/sound-effects.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/spinner.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/switch.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/table.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/tabs.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/theme-switcher.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/toast.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/toggle-group.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/toggle.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/components/tooltip.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <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);">
@@ -868,6 +869,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vanilla/index.html

@@ -516,6 +516,7 @@
   
   
   
+  
   
   
   <main id="main-content" class="home">
@@ -958,6 +959,7 @@
 
 
 
+
 
 
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">

package/scaffold/vue/base/package.json

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