rizzo-css 0.0.44 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +39 -4
  3. package/dist/rizzo.min.css +3 -2
  4. package/dist/sfx/click.mp3 +0 -0
  5. package/package.json +1 -1
  6. package/scaffold/vanilla/README-RIZZO.md +1 -1
  7. package/scaffold/vanilla/components/accordion.html +20 -0
  8. package/scaffold/vanilla/components/alert.html +20 -0
  9. package/scaffold/vanilla/components/avatar.html +20 -0
  10. package/scaffold/vanilla/components/badge.html +20 -0
  11. package/scaffold/vanilla/components/breadcrumb.html +20 -0
  12. package/scaffold/vanilla/components/button.html +20 -0
  13. package/scaffold/vanilla/components/cards.html +20 -0
  14. package/scaffold/vanilla/components/copy-to-clipboard.html +20 -0
  15. package/scaffold/vanilla/components/divider.html +20 -0
  16. package/scaffold/vanilla/components/docs-sidebar.html +20 -0
  17. package/scaffold/vanilla/components/dropdown.html +20 -0
  18. package/scaffold/vanilla/components/font-switcher.html +20 -0
  19. package/scaffold/vanilla/components/footer.html +20 -0
  20. package/scaffold/vanilla/components/forms.html +20 -0
  21. package/scaffold/vanilla/components/icons.html +20 -0
  22. package/scaffold/vanilla/components/index.html +20 -0
  23. package/scaffold/vanilla/components/modal.html +20 -0
  24. package/scaffold/vanilla/components/navbar.html +20 -0
  25. package/scaffold/vanilla/components/pagination.html +20 -0
  26. package/scaffold/vanilla/components/progress-bar.html +20 -0
  27. package/scaffold/vanilla/components/search.html +20 -0
  28. package/scaffold/vanilla/components/settings.html +20 -0
  29. package/scaffold/vanilla/components/sound-effects.html +20 -0
  30. package/scaffold/vanilla/components/spinner.html +20 -0
  31. package/scaffold/vanilla/components/table.html +20 -0
  32. package/scaffold/vanilla/components/tabs.html +20 -0
  33. package/scaffold/vanilla/components/theme-switcher.html +20 -0
  34. package/scaffold/vanilla/components/toast.html +20 -0
  35. package/scaffold/vanilla/components/tooltip.html +20 -0
  36. package/scaffold/vanilla/index.html +20 -0
package/README.md CHANGED
@@ -63,7 +63,7 @@ import 'rizzo-css';
63
63
  **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:
64
64
 
65
65
  ```html
66
- <!-- unpkg (pin version: replace @latest with @0.0.44 or any version) -->
66
+ <!-- unpkg (pin version: replace @latest with @0.0.46 or any version) -->
67
67
  <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
68
68
 
69
69
  <!-- or jsDelivr -->
package/bin/rizzo-css.js CHANGED
@@ -225,7 +225,21 @@ function copyRizzoFonts(cssTargetDir) {
225
225
  }
226
226
  }
227
227
 
228
- /** Astro only: copy rizzo.min.css to public/css with font URLs rewritten to /assets/fonts/, and copy fonts to public/assets/fonts. */
228
+ /** Copy package dist/sfx (click.mp3 etc.) into projectDir/assets/sfx so sound-effects-inline.js can play /assets/sfx/click.mp3. Used for Vanilla init and add. */
229
+ function copyRizzoSfx(projectDir) {
230
+ const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
231
+ if (!existsSync(sfxSrc)) return;
232
+ const dest = join(projectDir, 'assets', 'sfx');
233
+ mkdirSync(dest, { recursive: true });
234
+ const entries = readdirSync(sfxSrc, { withFileTypes: true });
235
+ for (const e of entries) {
236
+ if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
237
+ copyFileSync(join(sfxSrc, e.name), join(dest, e.name));
238
+ }
239
+ }
240
+ }
241
+
242
+ /** Astro only: copy rizzo.min.css to public/css with font URLs rewritten to ../assets/fonts/ (relative so base path works), and copy fonts to public/assets/fonts. */
229
243
  function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
230
244
  const cssDir = join(projectDir, 'public', 'css');
231
245
  const cssTarget = join(cssDir, 'rizzo.min.css');
@@ -236,7 +250,7 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
236
250
  mkdirSync(sfxDest, { recursive: true });
237
251
  copyFileSync(cssSource, cssTarget);
238
252
  let css = readFileSync(cssTarget, 'utf8');
239
- css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
253
+ css = css.replace(/url\(['"]?\.\/fonts\//g, "url('../assets/fonts/");
240
254
  writeFileSync(cssTarget, css, 'utf8');
241
255
  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
242
256
  if (existsSync(fontsSrc)) {
@@ -248,9 +262,18 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
248
262
  else copyFileSync(srcPath, destPath);
249
263
  }
250
264
  }
265
+ const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
266
+ if (existsSync(sfxSrc)) {
267
+ const entries = readdirSync(sfxSrc, { withFileTypes: true });
268
+ for (const e of entries) {
269
+ if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
270
+ copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
271
+ }
272
+ }
273
+ }
251
274
  }
252
275
 
253
- /** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to /assets/fonts/, and copy fonts to static/assets/fonts. */
276
+ /** SvelteKit only: copy rizzo.min.css to static/css with font URLs rewritten to ../assets/fonts/ (relative so base path works), and copy fonts to static/assets/fonts. */
254
277
  function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
255
278
  const cssDir = join(projectDir, 'static', 'css');
256
279
  const cssTarget = join(cssDir, 'rizzo.min.css');
@@ -261,7 +284,7 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
261
284
  mkdirSync(sfxDest, { recursive: true });
262
285
  copyFileSync(cssSource, cssTarget);
263
286
  let css = readFileSync(cssTarget, 'utf8');
264
- css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
287
+ css = css.replace(/url\(['"]?\.\/fonts\//g, "url('../assets/fonts/");
265
288
  writeFileSync(cssTarget, css, 'utf8');
266
289
  const fontsSrc = join(getPackageRoot(), 'dist', 'fonts');
267
290
  if (existsSync(fontsSrc)) {
@@ -273,6 +296,15 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
273
296
  else copyFileSync(srcPath, destPath);
274
297
  }
275
298
  }
299
+ const sfxSrc = join(getPackageRoot(), 'dist', 'sfx');
300
+ if (existsSync(sfxSrc)) {
301
+ const entries = readdirSync(sfxSrc, { withFileTypes: true });
302
+ for (const e of entries) {
303
+ if (!e.isDirectory() && /\.(mp3|wav|ogg)$/i.test(e.name)) {
304
+ copyFileSync(join(sfxSrc, e.name), join(sfxDest, e.name));
305
+ }
306
+ }
307
+ }
276
308
  }
277
309
 
278
310
  /** Copy the package LICENSE into the project dir as LICENSE-RIZZO so we do not overwrite an existing LICENSE. */
@@ -1494,6 +1526,7 @@ async function runAddToExisting(frameworkOverride, options) {
1494
1526
  mkdirSync(targetDir, { recursive: true });
1495
1527
  copyFileSync(cssSource, cssTarget);
1496
1528
  copyRizzoFonts(dirname(cssTarget));
1529
+ if (framework === 'vanilla') copyRizzoSfx(cwd);
1497
1530
  }
1498
1531
  }
1499
1532
 
@@ -1859,6 +1892,7 @@ async function cmdInit(argv) {
1859
1892
  mkdirSync(cssDir, { recursive: true });
1860
1893
  copyFileSync(cssSource, cssTarget);
1861
1894
  copyRizzoFonts(dirname(cssTarget));
1895
+ copyRizzoSfx(projectDir);
1862
1896
  if (statSync(cssTarget).size < 5000) {
1863
1897
  console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
1864
1898
  }
@@ -1899,6 +1933,7 @@ async function cmdInit(argv) {
1899
1933
  mkdirSync(cssDir, { recursive: true });
1900
1934
  copyFileSync(cssSource, cssTarget);
1901
1935
  copyRizzoFonts(dirname(cssTarget));
1936
+ if (framework === 'vanilla') copyRizzoSfx(projectDir);
1902
1937
  }
1903
1938
  if (statSync(cssTarget).size < 5000) {
1904
1939
  console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
@@ -1,4 +1,4 @@
1
- @font-face{font-display:swap;font-family:Geist Sans;font-style:normal;font-weight:100 900;src:url('./fonts/GeistSans/GeistVF.woff2) format("woff2"),url('./fonts/GeistSans/GeistVF.woff) format("woff")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url('./fonts/GeistMono/GeistMonoVF.woff2) format("woff2"),url('./fonts/GeistMono/GeistMonoVF.woff) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url('./fonts/Inter/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:100 900;src:url('./fonts/JetBrainsMono/JetBrainsMono[wght].ttf) format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Sans;font-style:normal;font-weight:100 900;src:url('./fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url('./fonts/IBMPlexMono/IBMPlexMono-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Source Sans\ 3;font-style:normal;font-weight:100 900;src:url('./fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:Source Code Pro;font-style:normal;font-weight:100 900;src:url('./fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:100 900;src:url('./fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:400;src:url('./fonts/DMMono/DMMono-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Outfit;font-style:normal;font-weight:100 900;src:url('./fonts/Outfit/Outfit-VariableFont_wght.ttf) format("truetype")}:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-geist-sans:"Geist Sans",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-geist-mono:"Geist Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-inter:"Inter",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-jetbrains-mono:"JetBrains Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-ibm-plex-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--font-family-ibm-plex-mono:"IBM Plex Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-source-sans-3:"Source Sans 3",system-ui,-apple-system,sans-serif;--font-family-source-code-pro:"Source Code Pro","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-dm-sans:"DM Sans",system-ui,-apple-system,sans-serif;--font-family-dm-mono:"DM Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-outfit:outfit,system-ui,-apple-system,sans-serif;--font-family-sans:var(--font-family-geist-sans);--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:var(--font-family-geist-mono);--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--toast-top-offset:calc(var(--spacing-16) + var(--spacing-4));--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--theme-switcher-width:var(--spacing-96);--max-height-dropdown:600px;--max-height-modal:32rem;--max-width-modal-lg:48rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--accent);--accent-fg-hover:var(--accent-hover);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg);--selection:oklch(70% 0.15 250deg);--color-neutral-50:oklch(98% 0 0deg);--color-neutral-100:oklch(96% 0.005 264deg);--color-neutral-200:oklch(91% 0.008 264deg);--color-neutral-300:oklch(84% 0.01 264deg);--color-neutral-400:oklch(63% 0.012 264deg);--color-neutral-500:oklch(50% 0.014 264deg);--color-neutral-600:oklch(40% 0.012 264deg);--color-neutral-700:oklch(32% 0.01 264deg);--color-neutral-800:oklch(24% 0.008 264deg);--color-neutral-900:oklch(16% 0.006 264deg);--color-neutral-950:oklch(10% 0.004 264deg);--color-accent-50:oklch(from var(--accent) 0.97deg 0.03 h);--color-accent-100:oklch(from var(--accent) 0.93deg 0.06 h);--color-accent-200:oklch(from var(--accent) 0.88deg 0.1 h);--color-accent-300:oklch(from var(--accent) 0.78deg 0.14 h);--color-accent-400:oklch(from var(--accent) 0.65deg 0.16 h);--color-accent-500:var(--accent);--color-accent-600:oklch(from var(--accent) 0.45deg 0.18 h);--color-accent-700:oklch(from var(--accent) 0.38deg 0.16 h);--color-accent-800:oklch(from var(--accent) 0.3deg 0.12 h);--color-accent-900:oklch(from var(--accent) 0.22deg 0.08 h);--color-accent-950:oklch(from var(--accent) 0.15deg 0.05 h);--color-success-50:oklch(from var(--success) 0.97deg 0.03 h);--color-success-100:oklch(from var(--success) 0.93deg 0.06 h);--color-success-200:oklch(from var(--success) 0.88deg 0.1 h);--color-success-300:oklch(from var(--success) 0.78deg 0.14 h);--color-success-400:oklch(from var(--success) 0.65deg 0.16 h);--color-success-500:var(--success);--color-success-600:oklch(from var(--success) 0.45deg 0.18 h);--color-success-700:oklch(from var(--success) 0.38deg 0.16 h);--color-success-800:oklch(from var(--success) 0.3deg 0.12 h);--color-success-900:oklch(from var(--success) 0.22deg 0.08 h);--color-success-950:oklch(from var(--success) 0.15deg 0.05 h);--color-warning-50:oklch(from var(--warning) 0.97deg 0.03 h);--color-warning-100:oklch(from var(--warning) 0.93deg 0.06 h);--color-warning-200:oklch(from var(--warning) 0.88deg 0.1 h);--color-warning-300:oklch(from var(--warning) 0.82deg 0.12 h);--color-warning-400:oklch(from var(--warning) 0.75deg 0.14 h);--color-warning-500:var(--warning);--color-warning-600:oklch(from var(--warning) 0.55deg 0.14 h);--color-warning-700:oklch(from var(--warning) 0.45deg 0.12 h);--color-warning-800:oklch(from var(--warning) 0.35deg 0.1 h);--color-warning-900:oklch(from var(--warning) 0.25deg 0.06 h);--color-warning-950:oklch(from var(--warning) 0.18deg 0.04 h);--color-error-50:oklch(from var(--error) 0.97deg 0.03 h);--color-error-100:oklch(from var(--error) 0.93deg 0.06 h);--color-error-200:oklch(from var(--error) 0.88deg 0.1 h);--color-error-300:oklch(from var(--error) 0.78deg 0.14 h);--color-error-400:oklch(from var(--error) 0.65deg 0.18 h);--color-error-500:var(--error);--color-error-600:oklch(from var(--error) 0.45deg 0.2 h);--color-error-700:oklch(from var(--error) 0.38deg 0.18 h);--color-error-800:oklch(from var(--error) 0.3deg 0.14 h);--color-error-900:oklch(from var(--error) 0.22deg 0.1 h);--color-error-950:oklch(from var(--error) 0.15deg 0.06 h);--color-info-50:oklch(from var(--info) 0.97deg 0.03 h);--color-info-100:oklch(from var(--info) 0.93deg 0.06 h);--color-info-200:oklch(from var(--info) 0.88deg 0.08 h);--color-info-300:oklch(from var(--info) 0.78deg 0.1 h);--color-info-400:oklch(from var(--info) 0.65deg 0.12 h);--color-info-500:var(--info);--color-info-600:oklch(from var(--info) 0.45deg 0.12 h);--color-info-700:oklch(from var(--info) 0.38deg 0.1 h);--color-info-800:oklch(from var(--info) 0.3deg 0.08 h);--color-info-900:oklch(from var(--info) 0.22deg 0.06 h);--color-info-950:oklch(from var(--info) 0.15deg 0.04 h);--alert-bg:oklch(from var(--background-alt) calc(l * 0.92) c h);--alert-success-bg:var(--color-success-200);--alert-error-bg:var(--color-error-200);--alert-warning-bg:var(--color-warning-200);--alert-info-bg:var(--color-info-200);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;max-width:100%;padding:0} blockquote,body, dd, dl,
1
+ @font-face{font-display:swap;font-family:Geist Sans;font-style:normal;font-weight:100 900;src:url('./fonts/GeistSans/GeistVF.woff2') format("woff2"),url('./fonts/GeistSans/GeistVF.woff') format("woff")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url('./fonts/GeistMono/GeistMonoVF.woff2') format("woff2"),url('./fonts/GeistMono/GeistMonoVF.woff') format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url('./fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:100 900;src:url('./fonts/JetBrainsMono/JetBrainsMono[wght].ttf') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Sans;font-style:normal;font-weight:100 900;src:url('./fonts/IBMPlexSans/IBMPlexSans-VariableFont_wdth,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url('./fonts/IBMPlexMono/IBMPlexMono-Regular.ttf') format("truetype")}@font-face{font-display:swap;font-family:Source Sans\ 3;font-style:normal;font-weight:100 900;src:url('./fonts/SourceSans3/SourceSans3-VariableFont_wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:Source Code Pro;font-style:normal;font-weight:100 900;src:url('./fonts/SourceCodePro/SourceCodePro-VariableFont_wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:100 900;src:url('./fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf') format("truetype")}@font-face{font-display:swap;font-family:DM Mono;font-style:normal;font-weight:400;src:url('./fonts/DMMono/DMMono-Regular.ttf') format("truetype")}@font-face{font-display:swap;font-family:Outfit;font-style:normal;font-weight:100 900;src:url('./fonts/Outfit/Outfit-VariableFont_wght.ttf') format("truetype")}:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-geist-sans:"Geist Sans",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-geist-mono:"Geist Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-inter:"Inter",system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-jetbrains-mono:"JetBrains Mono","SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family-ibm-plex-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--font-family-ibm-plex-mono:"IBM Plex Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-source-sans-3:"Source Sans 3",system-ui,-apple-system,sans-serif;--font-family-source-code-pro:"Source Code Pro","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-dm-sans:"DM Sans",system-ui,-apple-system,sans-serif;--font-family-dm-mono:"DM Mono","SF Mono",monaco,consolas,"Courier New",monospace;--font-family-outfit:outfit,system-ui,-apple-system,sans-serif;--font-family-sans:var(--font-family-geist-sans);--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:var(--font-family-geist-mono);--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--toast-top-offset:calc(var(--spacing-16) + var(--spacing-4));--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--theme-switcher-width:var(--spacing-96);--max-height-dropdown:600px;--max-height-modal:32rem;--max-width-modal-lg:48rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--accent);--accent-fg-hover:var(--accent-hover);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg);--selection:oklch(70% 0.15 250deg);--color-neutral-50:oklch(98% 0 0deg);--color-neutral-100:oklch(96% 0.005 264deg);--color-neutral-200:oklch(91% 0.008 264deg);--color-neutral-300:oklch(84% 0.01 264deg);--color-neutral-400:oklch(63% 0.012 264deg);--color-neutral-500:oklch(50% 0.014 264deg);--color-neutral-600:oklch(40% 0.012 264deg);--color-neutral-700:oklch(32% 0.01 264deg);--color-neutral-800:oklch(24% 0.008 264deg);--color-neutral-900:oklch(16% 0.006 264deg);--color-neutral-950:oklch(10% 0.004 264deg);--color-accent-50:oklch(from var(--accent) 0.97deg 0.03 h);--color-accent-100:oklch(from var(--accent) 0.93deg 0.06 h);--color-accent-200:oklch(from var(--accent) 0.88deg 0.1 h);--color-accent-300:oklch(from var(--accent) 0.78deg 0.14 h);--color-accent-400:oklch(from var(--accent) 0.65deg 0.16 h);--color-accent-500:var(--accent);--color-accent-600:oklch(from var(--accent) 0.45deg 0.18 h);--color-accent-700:oklch(from var(--accent) 0.38deg 0.16 h);--color-accent-800:oklch(from var(--accent) 0.3deg 0.12 h);--color-accent-900:oklch(from var(--accent) 0.22deg 0.08 h);--color-accent-950:oklch(from var(--accent) 0.15deg 0.05 h);--color-success-50:oklch(from var(--success) 0.97deg 0.03 h);--color-success-100:oklch(from var(--success) 0.93deg 0.06 h);--color-success-200:oklch(from var(--success) 0.88deg 0.1 h);--color-success-300:oklch(from var(--success) 0.78deg 0.14 h);--color-success-400:oklch(from var(--success) 0.65deg 0.16 h);--color-success-500:var(--success);--color-success-600:oklch(from var(--success) 0.45deg 0.18 h);--color-success-700:oklch(from var(--success) 0.38deg 0.16 h);--color-success-800:oklch(from var(--success) 0.3deg 0.12 h);--color-success-900:oklch(from var(--success) 0.22deg 0.08 h);--color-success-950:oklch(from var(--success) 0.15deg 0.05 h);--color-warning-50:oklch(from var(--warning) 0.97deg 0.03 h);--color-warning-100:oklch(from var(--warning) 0.93deg 0.06 h);--color-warning-200:oklch(from var(--warning) 0.88deg 0.1 h);--color-warning-300:oklch(from var(--warning) 0.82deg 0.12 h);--color-warning-400:oklch(from var(--warning) 0.75deg 0.14 h);--color-warning-500:var(--warning);--color-warning-600:oklch(from var(--warning) 0.55deg 0.14 h);--color-warning-700:oklch(from var(--warning) 0.45deg 0.12 h);--color-warning-800:oklch(from var(--warning) 0.35deg 0.1 h);--color-warning-900:oklch(from var(--warning) 0.25deg 0.06 h);--color-warning-950:oklch(from var(--warning) 0.18deg 0.04 h);--color-error-50:oklch(from var(--error) 0.97deg 0.03 h);--color-error-100:oklch(from var(--error) 0.93deg 0.06 h);--color-error-200:oklch(from var(--error) 0.88deg 0.1 h);--color-error-300:oklch(from var(--error) 0.78deg 0.14 h);--color-error-400:oklch(from var(--error) 0.65deg 0.18 h);--color-error-500:var(--error);--color-error-600:oklch(from var(--error) 0.45deg 0.2 h);--color-error-700:oklch(from var(--error) 0.38deg 0.18 h);--color-error-800:oklch(from var(--error) 0.3deg 0.14 h);--color-error-900:oklch(from var(--error) 0.22deg 0.1 h);--color-error-950:oklch(from var(--error) 0.15deg 0.06 h);--color-info-50:oklch(from var(--info) 0.97deg 0.03 h);--color-info-100:oklch(from var(--info) 0.93deg 0.06 h);--color-info-200:oklch(from var(--info) 0.88deg 0.08 h);--color-info-300:oklch(from var(--info) 0.78deg 0.1 h);--color-info-400:oklch(from var(--info) 0.65deg 0.12 h);--color-info-500:var(--info);--color-info-600:oklch(from var(--info) 0.45deg 0.12 h);--color-info-700:oklch(from var(--info) 0.38deg 0.1 h);--color-info-800:oklch(from var(--info) 0.3deg 0.08 h);--color-info-900:oklch(from var(--info) 0.22deg 0.06 h);--color-info-950:oklch(from var(--info) 0.15deg 0.04 h);--alert-bg:oklch(from var(--background-alt) calc(l * 0.92) c h);--alert-success-bg:var(--color-success-200);--alert-error-bg:var(--color-error-200);--alert-warning-bg:var(--color-warning-200);--alert-info-bg:var(--color-info-200);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;max-width:100%;padding:0} blockquote,body, dd, dl,
2
2
  figure, h1, h2, h3, h4, h5, h6, p{margin-block-end:0}
3
3
  ol[role="list"],ul[role="list"]{list-style:none}body{line-height:1.5;margin:0;max-width:100%;min-height:100vh;padding:0}
4
4
  button,h1, h2, h3, h4, h5, h6, input, label{line-height:1.1}h1, h2, h3, h4, h5, h6{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;color:currentcolor;text-decoration-skip-ink:auto}img,
@@ -104,7 +104,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
104
104
  .navbar__item--has-dropdown:hover .navbar__submenu,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{opacity:1;transform:translateY(0);visibility:visible}.navbar__sublink{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);padding:var(--spacing-0-625) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base)}.navbar__sublink:hover,.navbar__sublink[aria-current="page"]{background-color:var(--background);color:var(--accent)}.navbar__sublink[aria-current="page"]{font-weight:var(--font-weight-medium)}.navbar__sublink:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.navbar__link:hover{color:var(--accent)}.navbar__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__link::after{background-color:var(--accent);bottom:0;content:"";height:var(--spacing-0-125);left:0;position:absolute;transition:width var(--transition-slow);width:0}
105
105
  .navbar__link:focus-visible::after,.navbar__link:hover::after,
106
106
  .navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__submenu--docs .navbar__submenu-group{border-top:none;margin-top:0;padding-top:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-2);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{border-bottom:var(--border-width) solid var(--border);padding:var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-10)}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu--docs{max-height:min(70vh,420px)!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch}.navbar__submenu--docs .navbar__sublink[aria-current="page"]{background-color:oklch(from var(--accent) l c h/12%)!important;box-shadow:inset var(--spacing-0-125) 0 0 var(--accent)!important;color:var(--accent)!important;font-weight:var(--font-weight-medium)}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
107
- .navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:1;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;overflow-wrap:break-word;padding:0}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0 0 var(--spacing-2) 0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}@media (width >= 481px){.theme-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.framework-switcher__segmented{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:inset 0 1px 2px oklch(from var(--shadow-color) l c h/8%);display:inline-flex;padding:var(--spacing-0-5)}.framework-switcher__segment{align-items:center;border-radius:var(--radius-md);color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-width:var(--spacing-20);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.framework-switcher__icon{display:block;flex-shrink:0}.framework-switcher__segment--current .framework-switcher__icon{opacity:.95}.framework-switcher__segment--first{border-radius:var(--radius-md) 0 0 var(--radius-md)}.framework-switcher__segment--last{border-radius:0 var(--radius-md) var(--radius-md) 0}.framework-switcher__segment:only-child{border-radius:var(--radius-md)}.framework-switcher__segment--current,.framework-switcher__segment:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{box-shadow:var(--shadow-sm)}.framework-switcher__segment--current:hover{background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.theme-switcher__group{padding:var(--spacing-3) 0}.theme-switcher__group-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--spacing-1);padding:var(--spacing-2) var(--spacing-4);text-transform:uppercase}.theme-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
107
+ .navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:1;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;overflow-wrap:break-word;padding:0}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0 0 var(--spacing-2) 0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}@media (width >= 481px){.theme-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.framework-switcher__segmented{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:inset 0 1px 2px oklch(from var(--shadow-color) l c h/8%);display:inline-flex;padding:var(--spacing-0-5)}.framework-switcher__segment{align-items:center;border-radius:var(--radius-md);color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-width:var(--spacing-20);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.framework-switcher__icon{display:block;flex-shrink:0}.framework-switcher__segment--current .framework-switcher__icon{opacity:.95}.framework-switcher__segment--first{border-radius:var(--radius-md) 0 0 var(--radius-md)}.framework-switcher__segment--last{border-radius:0 var(--radius-md) var(--radius-md) 0}.framework-switcher__segment:only-child{border-radius:var(--radius-md)}.framework-switcher__segment--current,.framework-switcher__segment:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{box-shadow:var(--shadow-sm)}.framework-switcher__segment--current:hover{background-color:oklch(from var(--text) l c h/10%);color:var(--text)}@media (width <= 640px){.framework-switcher{align-items:stretch;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-4);padding:var(--spacing-2) 0}.framework-switcher__label{padding-bottom:var(--spacing-1)}.framework-switcher__segmented{display:flex;padding:var(--spacing-0-5);width:100%}.framework-switcher__segment{flex:1;font-size:var(--font-size-base);min-height:var(--touch-target-min);min-width:0;padding:var(--spacing-3) var(--spacing-2)}.framework-switcher__segment--first,
108
+ .framework-switcher__segment--last{border-radius:var(--radius-md)}}.theme-switcher__group{padding:var(--spacing-3) 0}.theme-switcher__group-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--spacing-1);padding:var(--spacing-2) var(--spacing-4);text-transform:uppercase}.theme-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
108
109
  .theme-switcher__option:focus-visible,.theme-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.theme-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.theme-switcher__option-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.theme-switcher__option--active,
109
110
  .theme-switcher__option--active:focus-visible,
110
111
  .theme-switcher__option--active:hover{background-color:var(--theme-bg,var(--background));border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theme-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.theme-switcher,.theme-switcher__menu{max-width:100%;width:100%}.theme-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}@media (width <= 640px){.theme-switcher__menu{left:0;right:auto}}.font-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.font-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.font-switcher__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.font-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.font-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.font-switcher__trigger[aria-expanded="true"] .font-switcher__icon{transform:rotate(180deg)}.font-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.font-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.font-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.font-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.font-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);padding:var(--spacing-4);pointer-events:none;width:var(--spacing-32)}.font-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;padding:0}.font-switcher__preview-sample{color:var(--text);font-size:var(--font-size-lg);line-height:1.3;margin:0}.font-switcher__preview-mono{color:var(--text-dim);font-family:var(--font-family-mono);font-size:var(--font-size-sm);margin:0}@media (width <= 480px){.font-switcher__preview{display:none}}@media (width >= 481px){.font-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.font-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.44",
3
+ "version": "0.0.46",
4
4
  "scripts": {
5
5
  "prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-vanilla-scaffold.js"
6
6
  },
@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
27
27
  - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
28
28
  - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
29
29
 
30
- (Replace `@latest` with a specific version, e.g. `@0.0.44`, in production.)
30
+ (Replace `@latest` with a specific version, e.g. `@0.0.46`, in production.)
31
31
 
32
32
  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.
33
33