rizzo-css 0.0.43 → 0.0.44

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 (91) hide show
  1. package/README.md +1 -1
  2. package/bin/rizzo-css.js +33 -3
  3. package/dist/rizzo.min.css +23 -4
  4. package/package.json +1 -1
  5. package/scaffold/astro/Tabs.astro +4 -2
  6. package/scaffold/astro/icons/Brush.astro +8 -3
  7. package/scaffold/astro/icons/Cake.astro +7 -4
  8. package/scaffold/astro/icons/Cherry.astro +9 -4
  9. package/scaffold/astro/icons/Flower.astro +6 -4
  10. package/scaffold/astro/icons/Lemon.astro +9 -4
  11. package/scaffold/astro/icons/Sunset.astro +7 -3
  12. package/scaffold/astro/icons/devicons/Docker.astro +39 -0
  13. package/scaffold/astro/icons/devicons/Playwright.astro +30 -0
  14. package/scaffold/astro/icons/devicons/Python.astro +31 -0
  15. package/scaffold/astro/icons/devicons/Ruby.astro +59 -0
  16. package/scaffold/astro/icons/devicons/Rust.astro +24 -0
  17. package/scaffold/astro/icons/devicons/Sass.astro +24 -0
  18. package/scaffold/astro/icons/devicons/TypeScript.astro +25 -0
  19. package/scaffold/astro-core/src/layouts/Layout.astro +1 -0
  20. package/scaffold/astro-core/src/pages/index.astro +23 -0
  21. package/scaffold/svelte/DocsSidebar.svelte +1 -1
  22. package/scaffold/svelte/FontSwitcher.svelte +2 -2
  23. package/scaffold/svelte/Footer.svelte +1 -1
  24. package/scaffold/svelte/Tabs.svelte +5 -0
  25. package/scaffold/svelte/ThemeSwitcher.svelte +2 -2
  26. package/scaffold/svelte/icons/Brush.svelte +30 -9
  27. package/scaffold/svelte/icons/Cake.svelte +29 -10
  28. package/scaffold/svelte/icons/Cherry.svelte +31 -10
  29. package/scaffold/svelte/icons/Flame.svelte +16 -9
  30. package/scaffold/svelte/icons/Flower.svelte +28 -10
  31. package/scaffold/svelte/icons/Heart.svelte +16 -9
  32. package/scaffold/svelte/icons/Leaf.svelte +16 -9
  33. package/scaffold/svelte/icons/Lemon.svelte +31 -10
  34. package/scaffold/svelte/icons/Shield.svelte +16 -9
  35. package/scaffold/svelte/icons/Sun.svelte +16 -9
  36. package/scaffold/svelte/icons/Sunset.svelte +29 -9
  37. package/scaffold/svelte/icons/Zap.svelte +26 -7
  38. package/scaffold/svelte/icons/devicons/Docker.svelte +33 -0
  39. package/scaffold/svelte/icons/devicons/Playwright.svelte +24 -0
  40. package/scaffold/svelte/icons/devicons/Python.svelte +25 -0
  41. package/scaffold/svelte/icons/devicons/Ruby.svelte +53 -0
  42. package/scaffold/svelte/icons/devicons/Rust.svelte +18 -0
  43. package/scaffold/svelte/icons/devicons/Sass.svelte +18 -0
  44. package/scaffold/svelte/icons/devicons/TypeScript.svelte +19 -0
  45. package/scaffold/svelte-core/src/app.html +1 -0
  46. package/scaffold/svelte-core/src/routes/+page.svelte +18 -0
  47. package/scaffold/vanilla/README-RIZZO.md +1 -1
  48. package/scaffold/vanilla/components/accordion.html +14 -0
  49. package/scaffold/vanilla/components/alert.html +14 -0
  50. package/scaffold/vanilla/components/avatar.html +14 -0
  51. package/scaffold/vanilla/components/badge.html +14 -0
  52. package/scaffold/vanilla/components/breadcrumb.html +14 -0
  53. package/scaffold/vanilla/components/button.html +14 -0
  54. package/scaffold/vanilla/components/cards.html +14 -0
  55. package/scaffold/vanilla/components/copy-to-clipboard.html +14 -0
  56. package/scaffold/vanilla/components/divider.html +14 -0
  57. package/scaffold/vanilla/components/docs-sidebar.html +14 -0
  58. package/scaffold/vanilla/components/dropdown.html +14 -0
  59. package/scaffold/vanilla/components/font-switcher.html +14 -0
  60. package/scaffold/vanilla/components/footer.html +14 -0
  61. package/scaffold/vanilla/components/forms.html +14 -0
  62. package/scaffold/vanilla/components/icons.html +14 -0
  63. package/scaffold/vanilla/components/index.html +14 -0
  64. package/scaffold/vanilla/components/modal.html +14 -0
  65. package/scaffold/vanilla/components/navbar.html +14 -0
  66. package/scaffold/vanilla/components/pagination.html +14 -0
  67. package/scaffold/vanilla/components/progress-bar.html +14 -0
  68. package/scaffold/vanilla/components/search.html +14 -0
  69. package/scaffold/vanilla/components/settings.html +14 -0
  70. package/scaffold/vanilla/components/sound-effects.html +14 -0
  71. package/scaffold/vanilla/components/spinner.html +14 -0
  72. package/scaffold/vanilla/components/table.html +14 -0
  73. package/scaffold/vanilla/components/tabs.html +14 -0
  74. package/scaffold/vanilla/components/theme-switcher.html +14 -0
  75. package/scaffold/vanilla/components/toast.html +14 -0
  76. package/scaffold/vanilla/components/tooltip.html +14 -0
  77. package/scaffold/vanilla/icons/Brush.svg +4 -2
  78. package/scaffold/vanilla/icons/Cake.svg +3 -3
  79. package/scaffold/vanilla/icons/Cherry.svg +5 -3
  80. package/scaffold/vanilla/icons/Flower.svg +2 -3
  81. package/scaffold/vanilla/icons/Lemon.svg +5 -3
  82. package/scaffold/vanilla/icons/Sunset.svg +3 -2
  83. package/scaffold/vanilla/icons/devicons/Docker.svg +22 -0
  84. package/scaffold/vanilla/icons/devicons/Playwright.svg +13 -0
  85. package/scaffold/vanilla/icons/devicons/Python.svg +14 -0
  86. package/scaffold/vanilla/icons/devicons/Ruby.svg +42 -0
  87. package/scaffold/vanilla/icons/devicons/Rust.svg +7 -0
  88. package/scaffold/vanilla/icons/devicons/Sass.svg +7 -0
  89. package/scaffold/vanilla/icons/devicons/TypeScript.svg +8 -0
  90. package/scaffold/vanilla/index.html +25 -0
  91. package/scaffold/vanilla/js/main.js +1 -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.43 or any version) -->
66
+ <!-- unpkg (pin version: replace @latest with @0.0.44 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
@@ -230,8 +230,10 @@ function copyRizzoCssAndFontsForAstro(projectDir, cssSource) {
230
230
  const cssDir = join(projectDir, 'public', 'css');
231
231
  const cssTarget = join(cssDir, 'rizzo.min.css');
232
232
  const fontsDest = join(projectDir, 'public', 'assets', 'fonts');
233
+ const sfxDest = join(projectDir, 'public', 'assets', 'sfx');
233
234
  mkdirSync(cssDir, { recursive: true });
234
235
  mkdirSync(fontsDest, { recursive: true });
236
+ mkdirSync(sfxDest, { recursive: true });
235
237
  copyFileSync(cssSource, cssTarget);
236
238
  let css = readFileSync(cssTarget, 'utf8');
237
239
  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
@@ -253,8 +255,10 @@ function copyRizzoCssAndFontsForSvelte(projectDir, cssSource) {
253
255
  const cssDir = join(projectDir, 'static', 'css');
254
256
  const cssTarget = join(cssDir, 'rizzo.min.css');
255
257
  const fontsDest = join(projectDir, 'static', 'assets', 'fonts');
258
+ const sfxDest = join(projectDir, 'static', 'assets', 'sfx');
256
259
  mkdirSync(cssDir, { recursive: true });
257
260
  mkdirSync(fontsDest, { recursive: true });
261
+ mkdirSync(sfxDest, { recursive: true });
258
262
  copyFileSync(cssSource, cssTarget);
259
263
  let css = readFileSync(cssTarget, 'utf8');
260
264
  css = css.replace(/url\(['"]?\.\/fonts\//g, "url('/assets/fonts/");
@@ -1513,7 +1517,9 @@ async function runAddToExisting(frameworkOverride, options) {
1513
1517
  if (existsSync(vanillaJsSrc)) {
1514
1518
  mkdirSync(join(cwd, 'js'), { recursive: true });
1515
1519
  let mainJs = readFileSync(vanillaJsSrc, 'utf8');
1516
- mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
1520
+ const addSound = selectedComponents.includes('Settings') || selectedComponents.includes('SoundEffects');
1521
+ const soundScript = addSound ? (() => { const p = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js'); return existsSync(p) ? '\n' + readFileSync(p, 'utf8') : ''; })() : '';
1522
+ mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, soundScript);
1517
1523
  writeFileSync(vanillaJsPath, mainJs, 'utf8');
1518
1524
  console.log(' - Wrote js/main.js (for modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, theme switcher)');
1519
1525
  }
@@ -1714,6 +1720,7 @@ async function cmdInit(argv) {
1714
1720
  '{{THEME_LIST_COMMENT}}': themeComment,
1715
1721
  '{{TITLE}}': name || 'App',
1716
1722
  '{{PROJECT_NAME}}': projectNamePkg,
1723
+ '{{RIZZO_SOUND_SCRIPT}}': '',
1717
1724
  };
1718
1725
 
1719
1726
  const astroCoreDir = getScaffoldAstroCoreDir();
@@ -1731,23 +1738,46 @@ async function cmdInit(argv) {
1731
1738
  componentsToCopy = expandWithDeps(framework, selectedComponents);
1732
1739
  logAddedDeps(selectedComponents, componentsToCopy, framework);
1733
1740
  }
1741
+ let vanillaSoundScript = '';
1742
+ if (framework === 'vanilla' && (componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
1743
+ const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
1744
+ if (existsSync(soundPath)) vanillaSoundScript = '\n' + readFileSync(soundPath, 'utf8');
1745
+ }
1734
1746
 
1735
1747
  // Astro layout: inject Navbar and Settings when those components are selected so the settings menu works.
1736
1748
  if ((framework === 'astro') && (useHandpickAstro || useAstroBase)) {
1737
1749
  const hasNavbar = componentsToCopy.includes('Navbar');
1738
1750
  const hasSettings = componentsToCopy.includes('Settings');
1751
+ const hasSound = hasSettings || componentsToCopy.includes('SoundEffects');
1739
1752
  const layoutImports = [];
1740
1753
  if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
1741
1754
  if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
1742
1755
  replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = layoutImports.length ? '\n' + layoutImports.join('\n') + '\n' : '\n';
1743
1756
  replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = hasNavbar ? '\n <Navbar />' : '';
1744
1757
  replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = hasSettings ? '\n <Settings />' : '';
1758
+ if (hasSound) {
1759
+ const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
1760
+ if (existsSync(soundPath)) {
1761
+ replacements['{{RIZZO_SOUND_SCRIPT}}'] = '\n <script is:inline>\n' + readFileSync(soundPath, 'utf8') + '\n </script>';
1762
+ }
1763
+ }
1745
1764
  } else {
1746
1765
  replacements['{{RIZZO_LAYOUT_IMPORTS}}'] = '\n';
1747
1766
  replacements['{{RIZZO_LAYOUT_BODY_TOP}}'] = '';
1748
1767
  replacements['{{RIZZO_LAYOUT_BODY_BOTTOM}}'] = '';
1749
1768
  }
1750
1769
 
1770
+ // Svelte app.html: inject sound script when Settings or SoundEffects is included (identical behavior to Astro).
1771
+ if ((framework === 'svelte') && (useHandpickSvelte || useSvelteBase)) {
1772
+ const hasSound = componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
1773
+ if (hasSound) {
1774
+ const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
1775
+ if (existsSync(soundPath)) {
1776
+ replacements['{{RIZZO_SOUND_SCRIPT}}'] = '\n <script>\n' + readFileSync(soundPath, 'utf8') + '\n </script>';
1777
+ }
1778
+ }
1779
+ }
1780
+
1751
1781
  let cssTarget;
1752
1782
  let indexPath;
1753
1783
 
@@ -1852,7 +1882,7 @@ async function cmdInit(argv) {
1852
1882
  if (existsSync(vanillaJs)) {
1853
1883
  mkdirSync(join(projectDir, 'js'), { recursive: true });
1854
1884
  let mainJs = readFileSync(vanillaJs, 'utf8');
1855
- mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
1885
+ mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, vanillaSoundScript);
1856
1886
  writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
1857
1887
  }
1858
1888
  const vanillaCoreRepl = { ...replacements, '{{LINK_HREF}}': linkHref };
@@ -1881,7 +1911,7 @@ async function cmdInit(argv) {
1881
1911
  const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
1882
1912
  if (existsSync(vanillaJs)) {
1883
1913
  let mainJs = readFileSync(vanillaJs, 'utf8');
1884
- mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight);
1914
+ mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, vanillaSoundScript);
1885
1915
  writeFileSync(join(projectDir, 'js', 'main.js'), mainJs, 'utf8');
1886
1916
  }
1887
1917
  const vanillaRepl = { ...replacements, '{{LINK_HREF}}': 'css/rizzo.min.css' };
@@ -104,7 +104,7 @@ 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:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{background-color:var(--accent);box-shadow:var(--shadow-sm);color:var(--accent-text)}.framework-switcher__segment--current:hover{background-color:var(--accent-hover);color:var(--accent-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)}.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
108
  .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
109
  .theme-switcher__option--active:focus-visible,
110
110
  .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%}
@@ -142,7 +142,25 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
142
142
  [data-tooltip]:focus-visible::after,[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}@media (prefers-reduced-motion:reduce){[data-tooltip]::after{transform:translateX(-50%);transition-duration:.1s}
143
143
  [data-tooltip].tooltip-visible::after,
144
144
  [data-tooltip]:focus-visible::after,[data-tooltip]:hover::after{transform:translateX(-50%)}}.icon{color:var(--icon)}.icon,.icon-card,
145
- .icon-card-tooltip-host{cursor:pointer}.icons-grid{display:grid;gap:var(--spacing-3);grid-template-columns:repeat(2,1fr);margin:var(--spacing-6) 0}@media (width >= 640px){.icons-grid{gap:var(--spacing-4);grid-template-columns:repeat(3,1fr)}}@media (width >= 1024px){.icons-grid{grid-template-columns:repeat(6,1fr)}}.icon-card-tooltip-host{display:block;min-width:0;width:100%}.icon-card{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:10rem;padding:var(--spacing-3);text-align:center;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base),background-color var(--transition-base)}.icon-card:hover{background-color:var(--background-alt);border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.icon-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.icon-card__preview{align-items:center;display:flex;justify-content:center;margin-bottom:var(--spacing-2);min-height:var(--spacing-32);width:100%}.icon-card__preview--devicon{background-color:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-2)}.icon-card--devicon{background-color:var(--background)}.icon-card--devicon:hover{background-color:var(--background-alt)}.icon-card__icon{color:var(--icon);flex-shrink:0}.icon-card__content{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%}.icon-card__name{color:var(--text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-0-125) 0}.icon-card__hint,.icon-card__name{line-height:var(--line-height-tight);text-align:center}.icon-card__hint{color:var(--text-dim);font-size:calc(var(--font-size-xs)*.875);margin:0;transition:color var(--transition-base)}.icon-card__hint--copied{color:var(--accent);font-weight:var(--font-weight-medium)}@media (width <= 640px){.icons-grid{gap:var(--spacing-2);grid-template-columns:repeat(2,1fr)}.icon-card{min-height:8.5rem;padding:var(--spacing-2)}.icon-card__preview{margin-bottom:var(--spacing-1);min-height:var(--spacing-24)}.icon-card__icon{height:var(--spacing-8);width:var(--spacing-8)}.icon-card__name{font-size:calc(var(--font-size-xs)*.875)}.icon-card__hint{font-size:calc(var(--font-size-xs)*.75)}}.dropdown{display:inline-block;position:relative}.dropdown__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-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.dropdown__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.dropdown__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.dropdown__trigger[aria-expanded="true"] .dropdown__icon{transform:rotate(180deg)}
145
+ .icon-card-tooltip-host{cursor:pointer}.icons-grid{display:grid;gap:var(--spacing-3);grid-template-columns:repeat(2,1fr);margin:var(--spacing-6) 0}@media (width >= 640px){.icons-grid{gap:var(--spacing-4);grid-template-columns:repeat(3,1fr)}}@media (width >= 1024px){.icons-grid{grid-template-columns:repeat(4,1fr)}}.icon-card-tooltip-host{display:block;min-width:0;width:100%}.icon-card{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:10rem;padding:var(--spacing-3);text-align:center;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base),background-color var(--transition-base)}.icon-card:hover{background-color:var(--background-alt);border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.icon-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.icon-card__preview{align-items:center;display:flex;justify-content:center;margin-bottom:var(--spacing-2);min-height:var(--spacing-32);width:100%}.icon-card__preview--devicon{background-color:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-2)}.icon-card--devicon{background-color:var(--background)}.icon-card--devicon:hover{background-color:var(--background-alt)}.icon-card__icon{color:var(--icon);flex-shrink:0}.icon-card__content{align-items:center;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-inline:var(--spacing-2);text-align:center;width:100%}.icon-card__name{color:var(--text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-0-125) 0;max-width:100%;overflow-wrap:break-word}.icon-card__hint,.icon-card__name{line-height:var(--line-height-tight);text-align:center}.icon-card__hint{color:var(--text-dim);font-size:calc(var(--font-size-xs)*.875);margin:0;transition:color var(--transition-base)}.icon-card__hint--copied{color:var(--accent);font-weight:var(--font-weight-medium)}.devicon--rust .devicon__path{fill:#ce422b}[data-theme="github-dark-classic"] .devicon--docker .devicon__path--dark,[data-theme="github-dark-classic"] .devicon--playwright .devicon__path--dark,[data-theme="github-dark-classic"] .devicon--rust .devicon__path,
146
+ [data-theme="hack-the-box"] .devicon--docker .devicon__path--dark,
147
+ [data-theme="hack-the-box"] .devicon--playwright .devicon__path--dark,
148
+ [data-theme="hack-the-box"] .devicon--rust .devicon__path,
149
+ [data-theme="minimal-dark-neon-yellow"] .devicon--docker .devicon__path--dark,
150
+ [data-theme="minimal-dark-neon-yellow"] .devicon--playwright .devicon__path--dark,
151
+ [data-theme="minimal-dark-neon-yellow"] .devicon--rust .devicon__path,
152
+ [data-theme="pink-cat-boo"] .devicon--docker .devicon__path--dark,
153
+ [data-theme="pink-cat-boo"] .devicon--playwright .devicon__path--dark,
154
+ [data-theme="pink-cat-boo"] .devicon--rust .devicon__path,
155
+ [data-theme="rocky-blood-orange"] .devicon--docker .devicon__path--dark,
156
+ [data-theme="rocky-blood-orange"] .devicon--playwright .devicon__path--dark,
157
+ [data-theme="rocky-blood-orange"] .devicon--rust .devicon__path,
158
+ [data-theme="sandstorm-classic"] .devicon--docker .devicon__path--dark,
159
+ [data-theme="sandstorm-classic"] .devicon--playwright .devicon__path--dark,
160
+ [data-theme="sandstorm-classic"] .devicon--rust .devicon__path,
161
+ [data-theme="shades-of-purple"] .devicon--docker .devicon__path--dark,
162
+ [data-theme="shades-of-purple"] .devicon--playwright .devicon__path--dark,
163
+ [data-theme="shades-of-purple"] .devicon--rust .devicon__path{fill:var(--icon)}@media (width <= 640px){.icons-grid{gap:var(--spacing-2);grid-template-columns:repeat(2,1fr)}.icon-card{min-height:8.5rem;padding:var(--spacing-2)}.icon-card__preview{margin-bottom:var(--spacing-1);min-height:var(--spacing-24)}.icon-card__icon{height:var(--spacing-8);width:var(--spacing-8)}.icon-card__name{font-size:calc(var(--font-size-xs)*.875)}.icon-card__hint{font-size:calc(var(--font-size-xs)*.75)}}.dropdown{display:inline-block;position:relative}.dropdown__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-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.dropdown__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.dropdown__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.dropdown__trigger[aria-expanded="true"] .dropdown__icon{transform:rotate(180deg)}
146
164
  .dropdown__trigger:focus-visible .dropdown__icon,.dropdown__trigger:hover .dropdown__icon{color:var(--accent)}.dropdown__trigger-text{flex:1;text-align:left}.dropdown__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.dropdown__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);list-style:none;margin:0;max-width:calc(100vw - var(--spacing-8));min-width:var(--spacing-64);opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;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:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}.dropdown__menu--left{left:0}.dropdown__menu--right{right:0}.dropdown__menu--start{left:0}.dropdown__menu--end{right:0}.dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.dropdown__item{align-items:center;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);min-height:var(--touch-target-min);overflow:hidden;padding:var(--spacing-2) var(--spacing-4);text-align:left;text-decoration:none;text-overflow:ellipsis;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}
147
165
  .dropdown__item:focus-visible:not(.dropdown__item--disabled),.dropdown__item:hover:not(.dropdown__item--disabled){background-color:var(--background);color:var(--accent);outline:none}.dropdown__item:focus-visible:not(.dropdown__item--disabled){box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.dropdown__item--disabled{cursor:not-allowed;opacity:var(--opacity-50);pointer-events:none}.dropdown__item-icon{flex-shrink:0;height:var(--spacing-4);width:var(--spacing-4)}.dropdown__separator{background-color:var(--border);height:var(--border-width);margin:var(--spacing-2) 0}.dropdown__item-wrapper,.dropdown__item-wrapper--has-submenu{overflow:visible;position:relative}.dropdown__item--has-submenu{align-items:center;display:flex;justify-content:space-between}.dropdown__item-arrow{color:var(--icon);flex-shrink:0;height:var(--spacing-3);margin-left:var(--spacing-2);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}
148
166
  .dropdown__item:focus-visible:not(.dropdown__item--disabled) .dropdown__item-arrow,.dropdown__item:hover:not(.dropdown__item--disabled) .dropdown__item-arrow{color:var(--accent)}.dropdown__item-wrapper--has-submenu .dropdown__submenu--open ~ .dropdown__item-arrow,
@@ -157,10 +175,11 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
157
175
  .accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
158
176
  .accordion__panel-content :global(ul:first-child){margin-top:0}
159
177
  .accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
160
- .accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text-dim);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.home{padding:var(--spacing-8) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--spacing-16)}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:none}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
178
+ .accordion__panel-content :global(ul:last-child){margin-bottom:0}.accordion__slot-content{display:none}.tabs{width:100%}.tabs__list{border-bottom:var(--outline-width) solid var(--border);display:flex;gap:var(--spacing-1);margin-bottom:var(--spacing-6);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tabs__list::-webkit-scrollbar{height:var(--spacing-0-125)}.tabs__list::-webkit-scrollbar-track{background:var(--background-alt)}.tabs__list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius)}.tabs__tab{align-items:center;background:transparent;border:none;border-bottom:calc(var(--outline-width)*2) solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-dim);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;margin-bottom:calc(var(--outline-width)*-1*2);min-height:var(--touch-target-min);outline:none;padding:var(--spacing-3) var(--spacing-5);position:relative;transition:color var(--transition-base),border-color var(--transition-base),background-color var(--transition-base);white-space:nowrap}.tabs__tab-icon{flex-shrink:0;vertical-align:middle}.tabs__tab:hover:not(.tabs__tab--active){background-color:var(--background-alt);color:var(--text)}.tabs__tab:focus-visible{border-radius:var(--radius-md) var(--radius-md) 0 0;outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*3);font-weight:var(--font-weight-semibold)}.tabs__tab--active,.tabs__tab--active:hover{background-color:var(--background-alt);color:var(--accent-fg)}.tabs__tab--active:hover{border-bottom-color:var(--accent-fg)}.tabs__panels-wrapper{width:100%}.tabs__panel{display:none;min-height:var(--spacing-20);padding:var(--spacing-6) 0;width:100%}.tabs__panel--active{animation:fadeIn var(--transition-base);display:block}.tabs__panel-content{width:100%}@keyframes fade-in{from{opacity:0;transform:translateY(var(--spacing-1))}to{opacity:1;transform:translateY(0)}}.tabs__slot-content{display:none}.tabs--pills .tabs__list{border-bottom:none;gap:var(--spacing-2)}.tabs--pills .tabs__tab{border-bottom:none;border-radius:var(--radius-md);margin-bottom:0}.tabs--pills .tabs__tab--active{background-color:var(--accent);border-bottom-color:transparent;color:var(--accent-text)}.tabs--pills .tabs__tab--active:hover{background-color:var(--accent-hover);color:var(--accent-text)}.tabs--underline .tabs__list{border-bottom:var(--outline-width) solid var(--border)}.tabs--underline .tabs__tab{border-bottom:var(--outline-width) solid transparent;padding-bottom:var(--spacing-3)}.tabs--underline .tabs__tab--active{border-bottom-color:var(--accent-fg);border-bottom-width:calc(var(--outline-width)*2)}@media (width <= 640px){.tabs__list{gap:var(--spacing-1)}.tabs__tab{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.tabs__panel{padding:var(--spacing-3) 0}}@media (prefers-reduced-motion:reduce){.tabs__tab{transition:none}.tabs__panel--active{animation:none}}.progress{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.progress__track{background-color:var(--background-alt);border:var(--border-width) solid var(--border);overflow:hidden;width:100%}.progress__bar,.progress__track{border-radius:var(--radius-full)}.progress__bar{flex-shrink:0;height:100%;min-height:var(--spacing-2);transition:width var(--transition-slow) var(--ease-in-out-cubic)}.progress--sm .progress__track{height:var(--spacing-1)}.progress--sm .progress__bar{min-height:var(--spacing-1)}.progress--md .progress__track{height:var(--spacing-2)}.progress--md .progress__bar{min-height:var(--spacing-2)}.progress--lg .progress__track{height:var(--spacing-3)}.progress--lg .progress__bar{min-height:var(--spacing-3)}.progress--primary .progress__bar{background-color:var(--accent)}.progress--success .progress__bar{background-color:var(--success)}.progress--warning .progress__bar{background-color:var(--warning)}.progress--error .progress__bar{background-color:var(--error)}.progress--info .progress__bar{background-color:var(--info)}.progress__label{color:var(--text-dim);font-size:var(--font-size-sm);text-align:right}.progress--indeterminate .progress__bar{animation:progress-indeterminate 1.5s ease-in-out infinite;min-width:30%;width:30%!important}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(233.333%)}}@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}.progress--indeterminate .progress__bar{animation:none;opacity:.7;width:50%!important}}.spinner{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.spinner__ring{animation:spinner-rotate .8s linear infinite;border-color:var(--border);border-radius:var(--radius-full);border-style:solid;border-top-color:currentcolor;display:block}.spinner--sm .spinner__ring{border-width:var(--border-width-2);height:var(--spacing-4);width:var(--spacing-4)}.spinner--md .spinner__ring{border-width:var(--border-width-3);height:var(--spacing-6);width:var(--spacing-6)}.spinner--lg .spinner__ring{border-width:var(--border-width-4);height:var(--spacing-8);width:var(--spacing-8)}.spinner--primary{color:var(--accent)}.spinner--success{color:var(--success)}.spinner--warning{color:var(--warning)}.spinner--error{color:var(--error)}.spinner--info{color:var(--info)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner__ring{animation:none;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}}.avatar{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);color:var(--text-dim);display:inline-flex;flex-shrink:0;font-size:inherit;font-weight:var(--font-weight-semibold);justify-content:center;line-height:1;overflow:hidden}.avatar__img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__initials{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar--sm{font-size:var(--font-size-xs);height:var(--spacing-8);width:var(--spacing-8)}.avatar--md{font-size:var(--font-size-sm);height:var(--spacing-10);width:var(--spacing-10)}.avatar--lg{font-size:var(--font-size-base);height:var(--spacing-12);width:var(--spacing-12)}.avatar--circle{border-radius:var(--radius-full)}.avatar--square{border-radius:var(--radius-md)}.divider{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3)}.divider__line{border:none;border-left:none;border-top:var(--border-width) solid var(--border);flex:1;min-height:0;min-width:0}.divider__label{flex-shrink:0;padding:0 var(--spacing-2);white-space:nowrap}.divider--horizontal{width:100%}.divider--horizontal .divider__line{border-left:none;border-top:var(--border-width) solid var(--border)}.divider--vertical{flex-direction:column;height:100%;min-height:var(--spacing-8);width:auto}.divider--vertical .divider__line{border-left:var(--border-width) solid var(--border);border-top:none;flex:1;min-height:var(--spacing-4);width:0}.footer{background-color:var(--background-alt);border-top:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);margin-top:auto;padding:var(--spacing-6) 0}.footer__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.footer__inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between}.footer__copyright{color:var(--text-dim);margin:0}.footer__site-name{color:var(--text);font-weight:var(--font-weight-medium)}.footer__nav{margin:0}.footer__links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);list-style:none;margin:0;padding:0}.footer__link-item{margin:0}.footer__link{color:var(--text-dim);text-decoration:none;transition:color var(--transition-base)}.footer__link:hover{color:var(--accent-fg)}.footer__link:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table{display:flex;flex-direction:column;gap:var(--spacing-3);width:100%}.table__filter-wrap{align-items:center;display:flex;flex-shrink:0;position:relative}.table__filter-icon{align-items:center;color:var(--icon-dim);display:flex;justify-content:center;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.table__filter-icon-svg{color:currentcolor;height:var(--table-filter-icon-size,1.25rem);width:var(--table-filter-icon-size,1.25rem)}.table__filter-wrap:focus-within .table__filter-icon{color:var(--accent)}.table__filter-wrap .table__filter{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-family);font-size:var(--font-size-base);max-width:var(--spacing-80);padding-bottom:var(--spacing-2);padding-left:3.5rem;padding-right:var(--spacing-3);padding-top:var(--spacing-2);width:100%}.table__filter-wrap .table__filter::-moz-placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter::placeholder{color:var(--text-dim)}.table__filter-wrap .table__filter:focus{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.table__table{border-collapse:collapse;border-spacing:0;font-size:var(--font-size-sm);width:100%}.table__caption{color:var(--text);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) 0;text-align:left}.table__head .table__row{border-bottom:var(--border-width-2) solid var(--border)}.table__cell{border-bottom:var(--border-width) solid var(--border);color:var(--text);padding:var(--spacing-3) var(--spacing-4);text-align:left}.table__cell--head{color:var(--text);font-weight:var(--font-weight-semibold);white-space:nowrap}.table__sort-trigger{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--font-weight-semibold);padding:0;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);width:100%}.table__sort-trigger:hover{background-color:var(--background-alt);color:var(--text)}.table__sort-trigger:hover .table__sort-icon-svg{color:var(--accent)}.table__sort-trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.table--sortable .table__cell--head{padding:0}.table--sortable .table__cell--head .table__sort-trigger{padding:var(--spacing-3) var(--spacing-4)}.table__cell-content{display:inline-block}.table__sort-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-2)}.table__sort-icon-svg{color:var(--icon-dim);height:var(--table-sort-icon-size,1.25rem);transition:color var(--transition-fast);width:var(--table-sort-icon-size,1.25rem)}.table__body .table__row:hover{background-color:var(--background-alt)}.table__body .table__row:hover .table__cell{color:var(--text)}.table--striped .table__body .table__row:nth-child(even){background-color:var(--background-alt)}.table--striped .table__body .table__row:nth-child(even):hover{background-color:var(--background)}.table--striped .table__body .table__row:nth-child(even):hover .table__cell{color:var(--text)}.table__body .table__row[hidden]{display:none}@media (prefers-reduced-motion:reduce){.table__sort-icon-svg,.table__sort-trigger{transition:none}}.home{padding:var(--spacing-8) 0}.home__container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:var(--container-default);min-width:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.home__hero{margin-bottom:var(--spacing-16);padding:var(--spacing-16) 0;text-align:center}.home__title{color:var(--text);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-6) 0}.home__subtitle{color:var(--text-dim);font-size:var(--font-size-xl);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-8) auto;max-width:var(--spacing-175)}.home__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-top:var(--spacing-6)}.home__hero-cta{text-decoration:none}.home__section-title{color:var(--text);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8);text-align:center}.home__install{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--spacing-16);max-width:100%;min-width:0}.home__install-grid{display:grid;gap:0;grid-template-columns:1fr;margin:0 auto;max-width:var(--spacing-150);min-width:0;width:100%}@media (width >= 768px){.home__install-grid{grid-template-columns:1fr auto 1fr;max-width:100%}}.home__install-block{align-items:stretch;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);min-width:0;overflow:hidden;padding:var(--spacing-6);width:100%}.home__install-or{align-items:center;color:var(--text-dim);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-4);justify-content:center;letter-spacing:var(--letter-spacing-wider);padding:var(--spacing-4) 0}
161
179
  .home__install-or::after,.home__install-or::before{border-top:var(--border-width) solid var(--border);content:"";flex:1;height:0}@media (width >= 768px){.home__install-or{flex-direction:column;gap:var(--spacing-4);padding:0 var(--spacing-4)}
162
180
  .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,
163
- .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{margin:0}.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__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}
181
+ .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,
182
+ .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}
164
183
  .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}.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-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,
165
184
  .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)}.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,
166
185
  .docs-sidebar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rizzo-css",
3
- "version": "0.0.43",
3
+ "version": "0.0.44",
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
  },
@@ -2,8 +2,10 @@
2
2
  interface Tab {
3
3
  id: string;
4
4
  label: string;
5
- /** Optional icon URL (e.g. /icons/bun.svg) shown before the label */
5
+ /** Optional icon URL (e.g. /icons/devicons/Bun.svg) shown before the label */
6
6
  icon?: string;
7
+ /** Optional Astro icon component (theme-aware); used when present instead of icon URL */
8
+ iconComponent?: any;
7
9
  content?: string;
8
10
  }
9
11
 
@@ -51,7 +53,7 @@ const classes = `tabs ${variantClass} ${className}`.trim();
51
53
  data-tab-id={tab.id}
52
54
  data-tab-index={index}
53
55
  >
54
- {tab.icon ? <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" /> : null}
56
+ {tab.iconComponent ? <tab.iconComponent width={20} height={20} class="tabs__tab-icon" /> : tab.icon ? <img src={tab.icon} alt="" class="tabs__tab-icon" width="20" height="20" /> : null}
55
57
  {tab.label}
56
58
  </span>
57
59
  );
@@ -1,10 +1,15 @@
1
1
  ---
2
- // Paint brush icon (for Semi Light Purple theme)
2
+ // Tabler Icons - Brush (paint brush, for Semi Light Purple theme)
3
+ // Source: https://tabler.io/icons/icon/brush
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" />
9
- <path d="M7.87 14.14c-.32.32-.67.68-1.06 1.06a5.04 5.04 0 0 1-2.17 1.22c-.47.15-.85.2-1.15.2-.16 0-.3-.02-.41-.03a1 1 0 0 1-.63-.97c-.01-.14.02-.31.07-.51.1-.41.3-.95.6-1.59.3-.64.67-1.33 1.08-2.05" />
11
+ <path d="M3 21v-4a4 4 0 1 1 4 4h-4" />
12
+ <path d="M21 3a16 16 0 0 0 -12.8 10.2" />
13
+ <path d="M21 3a16 16 0 0 1 -10.2 12.8" />
14
+ <path d="M10.6 9a9 9 0 0 1 4.4 4.4" />
10
15
  </svg>
@@ -1,11 +1,14 @@
1
1
  ---
2
- // Cake icon (for Red Velvet Cupcake theme)
2
+ // Tabler Icons - Cake (for Red Velvet Cupcake theme)
3
+ // Source: https://tabler.io/icons/icon/cake
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
9
- <path d="M4 16s1-1 4-1 5 2 8 2 4-1 4-1V4" />
10
- <path d="M2 16v4M22 16v4M8 8h.01M16 8h.01M8 12h.01M16 12h.01" />
11
+ <path d="M3 20h18v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -3 3v8z" />
12
+ <path d="M3 14.803c.312 .135 .654 .204 1 .197a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1c.35 .007 .692 -.062 1 -.197" />
13
+ <path d="M12 4l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737z" />
11
14
  </svg>
@@ -1,11 +1,16 @@
1
1
  ---
2
- // Cherry icon (for Cute Pink theme)
2
+ // Tabler Icons - Cherry (for Cute Pink theme)
3
+ // Source: https://tabler.io/icons/icon/cherry
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <path d="M9 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
9
- <path d="M15 18c0-2 1.5-4 4-4s4 2 4 4c0 2-1.5 4-4 4s-4-2-4-4Z" />
10
- <path d="M12 8v4M10 10l-2 2M14 10l2 2" />
11
+ <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
12
+ <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
13
+ <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6" />
14
+ <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9" />
15
+ <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0" />
11
16
  </svg>
@@ -1,11 +1,13 @@
1
1
  ---
2
- // Flower icon (for Sunflower theme)
2
+ // Tabler Icons - Flower (for Sunflower theme)
3
+ // Source: https://tabler.io/icons/icon/flower
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <circle cx="12" cy="12" r="3" />
9
- <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
10
- <path d="M12 5v2M12 17v2M5 12h2M17 12h2" />
11
+ <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
12
+ <path d="M12 2a3 3 0 0 1 3 3c0 .562 -.259 1.442 -.776 2.64l-.724 1.36l1.76 -1.893c.499 -.6 .922 -1 1.27 -1.205a2.968 2.968 0 0 1 4.07 1.099a3.011 3.011 0 0 1 -1.09 4.098c-.374 .217 -.99 .396 -1.846 .535l-2.664 .366l2.4 .326c1 .145 1.698 .337 2.11 .576a3.011 3.011 0 0 1 1.09 4.098a2.968 2.968 0 0 1 -4.07 1.098c-.348 -.202 -.771 -.604 -1.27 -1.205l-1.76 -1.893l.724 1.36c.516 1.199 .776 2.079 .776 2.64a3 3 0 0 1 -6 0c0 -.562 .259 -1.442 .776 -2.64l.724 -1.36l-1.76 1.893c-.499 .601 -.922 1 -1.27 1.205a2.968 2.968 0 0 1 -4.07 -1.098a3.011 3.011 0 0 1 1.09 -4.098c.374 -.218 .99 -.396 1.846 -.536l2.664 -.366l-2.4 -.325c-1 -.145 -1.698 -.337 -2.11 -.576a3.011 3.011 0 0 1 -1.09 -4.099a2.968 2.968 0 0 1 4.07 -1.099c.348 .203 .771 .604 1.27 1.205l1.76 1.894c-1 -2.292 -1.5 -3.625 -1.5 -4a3 3 0 0 1 3 -3z" />
11
13
  </svg>
@@ -1,11 +1,16 @@
1
1
  ---
2
- // Lemon/citrus icon (for Orangy One Light theme)
2
+ // Tabler Icons - Lemon (citrus, for Orangy One Light theme)
3
+ // Source: https://tabler.io/icons/icon/lemon
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <path d="M15.5 6.5c.5-2.5 2.5-4 5-4 1.5 0 2.5.5 3 1" />
9
- <path d="M12 12c-2 2-3 4-3 6 0 3 2 5 5 5 2 0 4-1 6-3" />
10
- <path d="M18 12c2 2 3 4 3 6 0 3-2 5-5 5-2 0-4-1-6-3" />
11
+ <path d="M17.536 3.393c3.905 3.906 3.905 10.237 0 14.143c-3.906 3.905 -10.237 3.905 -14.143 0l14.143 -14.143" />
12
+ <path d="M5.868 15.06a6.5 6.5 0 0 0 9.193 -9.192" />
13
+ <path d="M10.464 10.464l4.597 4.597" />
14
+ <path d="M10.464 10.464v6.364" />
15
+ <path d="M10.464 10.464h6.364" />
11
16
  </svg>
@@ -1,10 +1,14 @@
1
1
  ---
2
- // Sunset icon (for Rocky Blood Orange theme)
2
+ // Tabler Icons - Sunset (for Rocky Blood Orange theme)
3
+ // Source: https://tabler.io/icons/icon/sunset
4
+ // License: MIT
5
+
3
6
  interface Props { width?: number; height?: number; class?: string; }
4
7
  const { width = 16, height = 16, class: className = '' } = Astro.props;
5
8
  ---
6
9
 
7
10
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={className} aria-hidden="true">
8
- <path d="M12 10V2M4.93 10.93l1.41 1.41M2 18h2M20 18h2M17.66 10.93l1.41-1.41M22 22H2M8 6l4-4 4 4M16 18a4 4 0 0 0-8 0" />
9
- <path d="M12 22v-4" />
11
+ <path d="M3 17h1m16 0h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7m-9.7 5.7a4 4 0 0 1 8 0" />
12
+ <path d="M3 21l18 0" />
13
+ <path d="M12 3v6l3 -3m-6 0l3 3" />
10
14
  </svg>
@@ -0,0 +1,39 @@
1
+ ---
2
+ // Devicon - Docker
3
+ // Source: https://github.com/devicons/devicon
4
+ // License: MIT
5
+
6
+ interface Props {
7
+ width?: number;
8
+ height?: number;
9
+ class?: string;
10
+ }
11
+
12
+ const { width = 16, height = 16, class: className = '' } = Astro.props;
13
+ ---
14
+
15
+ <svg
16
+ xmlns="http://www.w3.org/2000/svg"
17
+ width={width}
18
+ height={height}
19
+ viewBox="0 0 128 128"
20
+ class={`devicon devicon--docker ${className}`.trim()}
21
+ aria-hidden="true"
22
+ >
23
+ <path class="devicon__path devicon__path--dark" fill="#3a4d54" fill-rule="evenodd" d="M73.8 50.8h11.3v11.5h5.7c2.6 0 5.3-.5 7.8-1.3c1.2-.4 2.6-1 3.8-1.7c-1.6-2.1-2.4-4.7-2.6-7.3c-.3-3.5.4-8.1 2.8-10.8l1.2-1.4l1.4 1.1c3.6 2.9 6.5 6.8 7.1 11.4c4.3-1.3 9.3-1 13.1 1.2l1.5.9l-.8 1.6c-3.2 6.2-9.9 8.2-16.4 7.8c-9.8 24.3-31 35.8-56.8 35.8c-13.3 0-25.5-5-32.5-16.8l-.1-.2l-1-2.1c-2.4-5.2-3.1-10.9-2.6-16.6l.2-1.7h9.6V50.8h11.3V39.6h22.5V28.3h13.5z" clip-rule="evenodd"/>
24
+ <path fill="#00aada" d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7c-3.1 3.6-3.6 13.2 1.3 17.2c-2.8 2.4-8.5 4.7-14.5 4.7H18.6c-.6 6.2.5 11.9 3 16.8l.8 1.5c.5.9 1.1 1.7 1.7 2.6c3 .2 5.7.3 8.2.2c4.9-.1 8.9-.7 12-1.7c.5-.2.9.1 1.1.5c.2.5-.1.9-.5 1.1c-.4.1-.8.3-1.3.4c-2.4.7-5 1.1-8.3 1.3h-.6c-1.3.1-2.7.1-4.2.1c-1.6 0-3.1 0-4.9-.1c6 6.8 15.4 10.8 27.2 10.8c25 0 46.2-11.1 55.5-35.9c6.7.7 13.1-1 16-6.7c-4.5-2.7-10.5-1.8-13.9-.1"/>
25
+ <path fill="#28b8eb" d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7c-3.1 3.6-3.6 13.2 1.3 17.2c-2.8 2.4-8.5 4.7-14.5 4.7h-68c-.3 9.5 3.2 16.7 9.5 21c4.9-.1 8.9-.7 12-1.7c.5-.2.9.1 1.1.5c.2.5-.1.9-.5 1.1c-.4.1-.8.3-1.3.4c-2.4.7-5.2 1.2-8.5 1.4l-.1-.1c8.5 4.4 20.8 4.3 35-1.1c15.8-6.1 30.6-17.7 40.9-30.9c-.2.1-.4.1-.5.2"/>
26
+ <path fill="#028bb8" d="M18.7 71.8c.4 3.3 1.4 6.4 2.9 9.3l.8 1.5c.5.9 1.1 1.7 1.7 2.6c3 .2 5.7.3 8.2.2c4.9-.1 8.9-.7 12-1.7c.5-.2.9.1 1.1.5c.2.5-.1.9-.5 1.1c-.4.1-.8.3-1.3.4c-2.4.7-5.2 1.2-8.5 1.4h-.4c-1.3.1-2.7.1-4.1.1c-1.6 0-3.2 0-4.9-.1c6 6.8 15.5 10.8 27.3 10.8c21.4 0 40-8.1 50.8-26H18.7z"/>
27
+ <path fill="#019bc6" d="M23.5 71.8c1.3 5.8 4.3 10.4 8.8 13.5c4.9-.1 8.9-.7 12-1.7c.5-.2.9.1 1.1.5c.2.5-.1.9-.5 1.1c-.4.1-.8.3-1.3.4c-2.4.7-5.2 1.2-8.6 1.4c8.5 4.4 20.8 4.3 34.9-1.1c8.5-3.3 16.8-8.2 24.2-14.1z"/>
28
+ <path fill="#00acd3" fill-rule="evenodd" d="M28.4 52.7h9.8v9.8h-9.8zm.8.8h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm3-12h9.8v9.8h-9.8zm.9.8h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
29
+ <path fill="#23c2ee" fill-rule="evenodd" d="M39.6 52.7h9.8v9.8h-9.8zm.9.8h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
30
+ <path fill="#00acd3" fill-rule="evenodd" d="M50.9 52.7h9.8v9.8h-9.8zm.8.8h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
31
+ <path fill="#23c2ee" fill-rule="evenodd" d="M50.9 41.5h9.8v9.8h-9.8zm.8.8h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm3.1 10.4H72v9.8h-9.8zm.8.8h.8v8.1H63zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
32
+ <path fill="#00acd3" fill-rule="evenodd" d="M62.2 41.5H72v9.8h-9.8zm.8.8h.8v8.1H63zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
33
+ <path fill="#23c2ee" fill-rule="evenodd" d="M62.2 30.2H72V40h-9.8zm.8.8h.8v8.1H63zm1.5 0h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
34
+ <path fill="#00acd3" fill-rule="evenodd" d="M73.5 52.7h9.8v9.8h-9.8zm.8.8h.8v8.1h-.8zm1.4 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8zm1.5 0h.8v8.1h-.8z" clip-rule="evenodd"/>
35
+ <path fill="#d4eef1" fill-rule="evenodd" d="M48.8 78.3c1.5 0 2.7 1.2 2.7 2.7s-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7s1.2-2.7 2.7-2.7" clip-rule="evenodd"/>
36
+ <path class="devicon__path devicon__path--dark" fill="#3a4d54" fill-rule="evenodd" d="M48.8 79.1c.2 0 .5 0 .7.1c-.2.1-.4.4-.4.7c0 .4.4.8.8.8c.3 0 .6-.2.7-.4c.1.2.1.5.1.7c0 1.1-.9 1.9-1.9 1.9c-1.1 0-1.9-.9-1.9-1.9s.8-1.9 1.9-1.9M1.1 72.8h125.4c-2.7-.7-8.6-1.6-7.7-5.2c-5 5.7-16.9 4-20 1.2c-3.4 4.9-23 3-24.3-.8c-4.2 5-17.3 5-21.5 0c-1.4 3.8-21 5.7-24.3.8c-3 2.8-15 4.5-20-1.2c1.1 3.5-4.9 4.5-7.6 5.2" clip-rule="evenodd"/>
37
+ <path fill="#bfdbe0" d="M56 97.8c-6.7-3.2-10.3-7.5-12.4-12.2c-2.5.7-5.5 1.2-8.9 1.4c-1.3.1-2.7.1-4.1.1c-1.7 0-3.4 0-5.2-.1c6 6 13.6 10.7 27.5 10.8z"/>
38
+ <path fill="#d4eef1" d="M46.1 89.9c-.9-1.3-1.8-2.8-2.5-4.3c-2.5.7-5.5 1.2-8.9 1.4c2.3 1.2 5.7 2.4 11.4 2.9"/>
39
+ </svg>
@@ -0,0 +1,30 @@
1
+ ---
2
+ // Devicon - Playwright
3
+ // Source: https://github.com/devicons/devicon
4
+ // License: MIT
5
+
6
+ interface Props {
7
+ width?: number;
8
+ height?: number;
9
+ class?: string;
10
+ }
11
+
12
+ const { width = 16, height = 16, class: className = '' } = Astro.props;
13
+ ---
14
+
15
+ <svg
16
+ xmlns="http://www.w3.org/2000/svg"
17
+ width={width}
18
+ height={height}
19
+ viewBox="0 0 128 128"
20
+ class={`devicon devicon--playwright ${className}`.trim()}
21
+ aria-hidden="true"
22
+ >
23
+ <path class="devicon__path devicon__path--dark" fill="#2d4552" d="M43.662 70.898c-4.124 1.17-6.829 3.222-8.611 5.272c1.707-1.494 3.993-2.865 7.077-3.739c3.155-.894 5.846-.888 8.069-.459v-1.739c-1.897-.173-4.072-.035-6.536.664ZM34.863 56.28l-15.314 4.035s.279.394.796.92l12.984-3.421s-.184 2.371-1.782 4.492c3.022-2.287 3.316-6.025 3.316-6.025Zm12.819 35.991C26.131 98.076 14.729 73.1 11.277 60.137C9.682 54.153 8.986 49.621 8.8 46.697a5 5 0 0 1 .011-.794c-1.118.068-1.653.649-1.544 2.328c.186 2.923.882 7.454 2.477 13.44c3.45 12.961 14.854 37.937 36.405 32.132c4.691-1.264 8.215-3.565 10.86-6.504c-2.438 2.202-5.49 3.937-9.327 4.972m4.05-51.276v1.534h8.453c-.173-.543-.348-1.032-.522-1.534z"/>
24
+ <path class="devicon__path devicon__path--dark" fill="#2d4552" d="M62.074 53.627c3.802 1.08 5.812 3.745 6.875 6.104l4.239 1.204s-.578-8.255-8.045-10.376c-6.985-1.985-11.284 3.881-11.807 4.64c2.032-1.448 4.999-2.633 8.738-1.572m33.741 6.142c-6.992-1.994-11.289 3.884-11.804 4.633c2.034-1.446 4.999-2.632 8.737-1.566c3.796 1.081 5.804 3.743 6.87 6.104l4.245 1.208s-.588-8.257-8.048-10.379m-4.211 21.766l-35.261-9.858s.382 1.935 1.846 4.441l29.688 8.3c2.444-1.414 3.726-2.883 3.726-2.883Zm-24.446 21.218c-27.92-7.485-24.544-43.059-20.027-59.916c1.86-6.947 3.772-12.11 5.358-15.572c-.946-.195-1.73.304-2.504 1.878c-1.684 3.415-3.837 8.976-5.921 16.76c-4.516 16.857-7.892 52.429 20.027 59.914c13.159 3.525 23.411-1.833 31.053-10.247c-7.254 6.57-16.515 10.253-27.986 7.182Z"/>
25
+ <path fill="#e2574c" d="M51.732 83.935v-7.179l-19.945 5.656s1.474-8.563 11.876-11.514c3.155-.894 5.846-.888 8.069-.459V40.995h9.987c-1.087-3.36-2.139-5.947-3.023-7.744c-1.461-2.975-2.96-1.003-6.361 1.842c-2.396 2.001-8.45 6.271-17.561 8.726c-9.111 2.457-16.476 1.805-19.55 1.273c-4.357-.752-6.636-1.708-6.422 1.605c.186 2.923.882 7.455 2.477 13.44c3.45 12.962 14.854 37.937 36.405 32.132c5.629-1.517 9.603-4.515 12.357-8.336h-8.309zm-32.185-23.62l15.316-4.035s-.446 5.892-6.188 7.405c-5.743 1.512-9.128-3.371-9.128-3.371Z"/>
26
+ <path fill="#2ead33" d="M109.372 41.336c-3.981.698-13.532 1.567-25.336-1.596c-11.807-3.162-19.64-8.692-22.744-11.292c-4.4-3.685-6.335-6.246-8.24-2.372c-1.684 3.417-3.837 8.977-5.921 16.762c-4.516 16.857-7.892 52.429 20.027 59.914c27.912 7.479 42.772-25.017 47.289-41.875c2.084-7.783 2.998-13.676 3.25-17.476c.287-4.305-2.67-3.055-8.324-2.064ZM53.28 55.282s4.4-6.843 11.862-4.722c7.467 2.121 8.045 10.376 8.045 10.376zm18.215 30.706c-13.125-3.845-15.15-14.311-15.15-14.311l35.259 9.858c0-.002-7.117 8.25-20.109 4.453m12.466-21.51s4.394-6.838 11.854-4.711c7.46 2.124 8.048 10.379 8.048 10.379z"/>
27
+ <path fill="#d65348" d="M44.762 78.733L31.787 82.41s1.41-8.029 10.968-11.212l-7.347-27.573l-.635.193c-9.111 2.457-16.476 1.805-19.55 1.273c-4.357-.751-6.636-1.708-6.422 1.606c.186 2.923.882 7.454 2.477 13.44c3.45 12.961 14.854 37.937 36.405 32.132l.635-.199zM19.548 60.315l15.316-4.035s-.446 5.892-6.188 7.405c-5.743 1.512-9.128-3.371-9.128-3.371Z"/>
28
+ <path fill="#1d8d22" d="m72.086 86.132l-.594-.144c-13.125-3.844-15.15-14.311-15.15-14.311l18.182 5.082L84.15 39.77l-.116-.031c-11.807-3.162-19.64-8.692-22.744-11.292c-4.4-3.685-6.335-6.246-8.24-2.372c-1.682 3.417-3.836 8.977-5.92 16.762c-4.516 16.857-7.892 52.429 20.027 59.914l.572.129zm-18.807-30.85s4.4-6.843 11.862-4.722c7.467 2.121 8.045 10.376 8.045 10.376z"/>
29
+ <path fill="#c04b41" d="m45.423 78.544l-3.48.988c.822 4.634 2.271 9.082 4.545 13.011c.396-.087.788-.163 1.192-.273a25 25 0 0 0 2.98-1.023c-2.541-3.771-4.222-8.114-5.237-12.702Zm-1.359-32.64c-1.788 6.674-3.388 16.28-2.948 25.915a20 20 0 0 1 2.546-.923l.644-.144c-.785-10.292.912-20.78 2.825-27.915a139 139 0 0 1 1.455-5.05a45 45 0 0 1-2.578 1.53a132 132 0 0 0-1.944 6.587"/>
30
+ </svg>