rizzo-css 0.0.47 → 0.0.49

package/README.md

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

package/bin/rizzo-css.js

@@ -233,7 +233,7 @@ function copyRizzoSfx(projectDir) {
   mkdirSync(dest, { recursive: true });
   const entries = readdirSync(sfxSrc, { withFileTypes: true });
   for (const e of entries) {
-    if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+    if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
       copyFileSync(join(sfxSrc, e.name), join(dest, e.name));
     }
   }
@@ -266,7 +266,7 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
   if (existsSync(sfxSrc)) {
     const entries = readdirSync(sfxSrc, { withFileTypes: true });
     for (const e of entries) {
-      if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+      if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
         copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
       }
     }
@@ -300,7 +300,7 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
   if (existsSync(sfxSrc)) {
     const entries = readdirSync(sfxSrc, { withFileTypes: true });
     for (const e of entries) {
-      if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
+      if (!e.isDirectory() && /\.mp3$/i.test(e.name)) {
         copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
       }
     }

package/dist/rizzo.min.css

@@ -181,8 +181,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
   .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,
 .home__cli-tabs .package-install-tabs__panel .code-block{margin:0;min-width:0;overflow:hidden}.home__features{margin-bottom:var(--spacing-16)}.home__features-intro{color:var(--text-dim);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-10) auto;max-width:var(--spacing-125);text-align:center}.home__features-featured{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--spacing-80)),1fr));margin-bottom:var(--spacing-8)}.home__features-supporting-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-4) 0;text-align:center;text-transform:uppercase}.home__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.home__grid--supporting{gap:var(--spacing-5);margin-bottom:0}.home__card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);padding:var(--spacing-6);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.home__card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.home__card--featured{border-color:var(--border);border-top:3px solid oklch(from var(--accent) l c h/24%);padding:var(--spacing-8)}.home__card--featured:hover{border-color:oklch(from var(--accent) l c h/28%);border-top-color:oklch(from var(--accent) l c h/40%);box-shadow:var(--shadow-md)}.home__card--supporting{display:flex;flex-direction:column;min-height:var(--spacing-32);padding:var(--spacing-5)}.home__card--supporting h3{font-size:var(--font-size-base);margin-bottom:var(--spacing-2)}.home__card--supporting p{font-size:var(--font-size-sm)}.home__card-icon{background-color:oklch(from var(--accent) l c h/14%);border-radius:var(--radius-md);color:var(--accent-fg);display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wider);margin-bottom:var(--spacing-3);padding:var(--spacing-1) var(--spacing-2);text-transform:uppercase}.home__card h3{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.home__card--featured h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-4)}.home__card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}.home__examples{margin-bottom:var(--spacing-16)}.home__example{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-8);padding:var(--spacing-8)}.home__example h3{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.home__example p{color:var(--text-dim);margin-bottom:var(--spacing-4)}.home__button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.home__theme-demo{max-width:var(--spacing-75)}.home__theme-demo .theme-switcher{position:relative;width:100%;z-index:var(--z-dropdown)}.home__theme-demo .theme-switcher__menu{z-index:var(--z-dropdown)}.home__add-command{margin-bottom:var(--spacing-16)}.home__add-command-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-2);max-width:100%;min-width:0;overflow:hidden}.home__add-command-block pre{color:var(--text);flex:1;font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0;min-width:0;overflow-x:auto;padding:var(--spacing-4)}.home__add-command-block code{white-space:pre}.home__add-command-copy{align-self:center;flex-shrink:0;margin-right:var(--spacing-2)}.home__docs{margin-bottom:var(--spacing-8)}.home__docs-grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-70),1fr))}.home__doc-card{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:block;padding:var(--spacing-6);text-decoration:none;transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.home__doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.home__doc-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.home__doc-card h3{color:var(--accent-fg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.home__doc-card p{color:var(--text-dim);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.home__title{font-size:var(--font-size-4xl)}.home__subtitle{font-size:var(--font-size-lg)}.home__install-grid{grid-template-columns:1fr}.home__features-intro{font-size:var(--font-size-base)}.home__features-featured{grid-template-columns:1fr}.home__card--supporting{min-height:0}
-  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
-.docs-sidebar-demo h2.docs-sidebar__group-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:.75rem;padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:.625rem;padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
+  .home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
+.docs-sidebar-demo h2.docs-sidebar__group-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:var(--font-size-xs);padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
   .docs-sidebar,
   .docs__sidebar-overlay,
   .docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
   },
@@ -28,6 +28,7 @@
     "scaffold/astro",
     "scaffold/astro-core",
     "scaffold/config",
+    "scaffold/shared",
     "scaffold/svelte",
     "scaffold/svelte-core",
     "scaffold/utils",

package/scaffold/astro/FontSwitcher.astro

@@ -112,6 +112,13 @@ const menuId = idPrefix ? `font-pair-menu-${idPrefix}` : 'font-pair-menu';
         if (monoEl) monoEl.style.fontFamily = '';
       };
 
+      /** Resolve var(--font-family-xxx) to the actual font stack from :root so preview shows the correct font. */
+      const resolveFontVar = (cssValue: string): string => {
+        const m = cssValue.match(/^var\((--[a-zA-Z0-9-]+)\)$/);
+        if (!m) return cssValue;
+        const resolved = getComputedStyle(document.documentElement).getPropertyValue(m[1]).trim();
+        return resolved || cssValue;
+      };
       const updatePreview = (option: Element | null) => {
         if (!preview || !sample || !monoEl) return;
         if (!option) {
@@ -122,8 +129,8 @@ const menuId = idPrefix ? `font-pair-menu-${idPrefix}` : 'font-pair-menu';
         }
         const sans = option.getAttribute('data-font-pair-sans') || '';
         const mono = option.getAttribute('data-font-pair-mono') || '';
-        sample.style.fontFamily = sans;
-        monoEl.style.fontFamily = mono;
+        sample.style.fontFamily = resolveFontVar(sans);
+        monoEl.style.fontFamily = resolveFontVar(mono);
         preview.setAttribute('aria-hidden', 'false');
       };
 

package/scaffold/shared/sound-effects-inline.js

@@ -0,0 +1,106 @@
+// Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3 (or relative assets/sfx for Vanilla), else Web Audio fallback. Single source for main site (Layout.astro) and all shipped scaffolds (Astro, Svelte, Vanilla); keep behavior in sync. Supports touch (touchend) so mobile plays like desktop.
+(function() {
+	var SOUND_KEY = 'soundEffects';
+	var THROTTLE_MS = 120;
+	var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, [data-copy-btn]';
+	var audioContext = null;
+	var soundBase = '/assets/sfx';
+	var soundUrls = [soundBase + '/click.mp3'];
+	var cachedAudio = null;
+	var soundLoadTried = false;
+	var lastPlayedAt = 0;
+	var lastTouchSoundTarget = null;
+	var lastTouchSoundTime = 0;
+	function getContext() {
+		if (!audioContext && typeof window.AudioContext !== 'undefined') {
+			audioContext = new window.AudioContext();
+		}
+		return audioContext;
+	}
+	function playFallbackTone() {
+		try {
+			var ctx = getContext();
+			if (!ctx) return;
+			ctx.resume().then(function() {
+				var now = ctx.currentTime;
+				var osc = ctx.createOscillator();
+				var gain = ctx.createGain();
+				osc.connect(gain);
+				gain.connect(ctx.destination);
+				osc.frequency.setValueAtTime(800, now);
+				osc.frequency.exponentialRampToValueAtTime(200, now + 0.04);
+				osc.type = 'sine';
+				gain.gain.setValueAtTime(0.08, now);
+				gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
+				osc.start(now);
+				osc.stop(now + 0.04);
+			}).catch(function() {});
+		} catch (e) {}
+	}
+	function tryLoadAssetSound() {
+		if (soundLoadTried || cachedAudio) return;
+		soundLoadTried = true;
+		var idx = 0;
+		function tryNext() {
+			if (idx >= soundUrls.length) return;
+			var a = new window.Audio(soundUrls[idx]);
+			a.volume = 0.4;
+			a.addEventListener('canplaythrough', function() { cachedAudio = a; }, { once: true });
+			a.addEventListener('error', function() { idx++; tryNext(); }, { once: true });
+			a.load();
+		}
+		tryNext();
+	}
+	function playClickSound() {
+		try {
+			if (localStorage.getItem(SOUND_KEY) !== 'true') return;
+			var now = Date.now();
+			if (now - lastPlayedAt < THROTTLE_MS) return;
+			lastPlayedAt = now;
+			tryLoadAssetSound();
+			if (cachedAudio) {
+				try {
+					cachedAudio.currentTime = 0;
+					cachedAudio.volume = 0.4;
+					cachedAudio.play().catch(function() {});
+				} catch (e) {}
+				return;
+			}
+			playFallbackTone();
+		} catch (e) {}
+	}
+	function getClickable(el) {
+		if (!el || !el.closest) return null;
+		var clickable = el.closest(clickableSelector);
+		if (!clickable) return null;
+		if (clickable.disabled === true || clickable.getAttribute('aria-disabled') === 'true') return null;
+		return clickable;
+	}
+	function onDocumentClick(e) {
+		if (e.button !== 0) return;
+		var clickable = getClickable(e.target);
+		if (!clickable) return;
+		if (lastTouchSoundTarget === clickable && (Date.now() - lastTouchSoundTime) < 400) return;
+		playClickSound();
+	}
+	function onDocumentTouchend(e) {
+		var clickable = getClickable(e.target);
+		if (!clickable) return;
+		lastTouchSoundTarget = clickable;
+		lastTouchSoundTime = Date.now();
+		playClickSound();
+		setTimeout(function() { lastTouchSoundTarget = null; }, 450);
+	}
+	function initSound() {
+		document.addEventListener('click', onDocumentClick, true);
+		if ('ontouchstart' in window || (navigator && navigator.maxTouchPoints > 0)) {
+			document.addEventListener('touchend', onDocumentTouchend, true);
+		}
+		if (localStorage.getItem(SOUND_KEY) === 'true') tryLoadAssetSound();
+	}
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', initSound);
+	} else {
+		initSound();
+	}
+})();

package/scaffold/svelte/FontSwitcher.svelte

@@ -38,8 +38,24 @@
     triggerEl?.focus();
   }
 
+  /** Resolve var(--font-family-xxx) to the actual font stack from :root so preview shows the correct primary and code fonts. */
+  function resolveFontVar(cssValue: string): string {
+    if (typeof document === 'undefined') return cssValue;
+    const m = cssValue.match(/^var\((--[a-zA-Z0-9-]+)\)$/);
+    if (!m) return cssValue;
+    const resolved = getComputedStyle(document.documentElement).getPropertyValue(m[1]).trim();
+    return resolved || cssValue;
+  }
+
   function setPreview(option: { sans: string; mono: string } | null) {
-    previewOption = option;
+    if (!option) {
+      previewOption = null;
+      return;
+    }
+    previewOption = {
+      sans: resolveFontVar(option.sans),
+      mono: resolveFontVar(option.mono),
+    };
   }
 
   function addClickOutsideListener() {

package/scaffold/vanilla/README-RIZZO.md

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/alert.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/avatar.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/badge.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/breadcrumb.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/button.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/cards.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/divider.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/dropdown.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/footer.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/forms.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/icons.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/index.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -585,6 +593,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/modal.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/navbar.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/pagination.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/search.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/settings.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/spinner.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/table.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tabs.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

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

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/toast.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/components/tooltip.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -556,6 +564,14 @@
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/scaffold/vanilla/index.html

@@ -388,6 +388,14 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -642,6 +650,14 @@
 
 
 
+
+
+
+
+
+
+
+