rizzo-css 0.0.46 → 0.0.48
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.
- package/README.md +1 -1
- package/bin/rizzo-css.js +16 -5
- package/dist/rizzo.min.css +2 -2
- package/package.json +2 -1
- package/scaffold/astro-core/README-RIZZO.md +1 -1
- package/scaffold/shared/click.mp3 +0 -0
- package/scaffold/shared/sound-effects-inline.js +106 -0
- package/scaffold/svelte/DocsSidebar.svelte +58 -2
- package/scaffold/svelte-core/README-RIZZO.md +1 -1
- package/scaffold/vanilla/README-RIZZO.md +5 -4
- package/scaffold/vanilla/components/accordion.html +14 -0
- package/scaffold/vanilla/components/alert.html +14 -0
- package/scaffold/vanilla/components/avatar.html +14 -0
- package/scaffold/vanilla/components/badge.html +14 -0
- package/scaffold/vanilla/components/breadcrumb.html +14 -0
- package/scaffold/vanilla/components/button.html +14 -0
- package/scaffold/vanilla/components/cards.html +14 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +14 -0
- package/scaffold/vanilla/components/divider.html +14 -0
- package/scaffold/vanilla/components/docs-sidebar.html +14 -0
- package/scaffold/vanilla/components/dropdown.html +14 -0
- package/scaffold/vanilla/components/font-switcher.html +14 -0
- package/scaffold/vanilla/components/footer.html +14 -0
- package/scaffold/vanilla/components/forms.html +14 -0
- package/scaffold/vanilla/components/icons.html +14 -0
- package/scaffold/vanilla/components/index.html +14 -0
- package/scaffold/vanilla/components/modal.html +14 -0
- package/scaffold/vanilla/components/navbar.html +14 -0
- package/scaffold/vanilla/components/pagination.html +14 -0
- package/scaffold/vanilla/components/progress-bar.html +14 -0
- package/scaffold/vanilla/components/search.html +14 -0
- package/scaffold/vanilla/components/settings.html +14 -0
- package/scaffold/vanilla/components/sound-effects.html +14 -0
- package/scaffold/vanilla/components/spinner.html +14 -0
- package/scaffold/vanilla/components/table.html +14 -0
- package/scaffold/vanilla/components/tabs.html +14 -0
- package/scaffold/vanilla/components/theme-switcher.html +14 -0
- package/scaffold/vanilla/components/toast.html +14 -0
- package/scaffold/vanilla/components/tooltip.html +14 -0
- package/scaffold/vanilla/index.html +14 -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.
|
|
66
|
+
<!-- unpkg (pin version: replace @latest with @0.0.48 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
|
@@ -1551,7 +1551,14 @@ async function runAddToExisting(frameworkOverride, options) {
|
|
|
1551
1551
|
mkdirSync(join(cwd, 'js'), { recursive: true });
|
|
1552
1552
|
let mainJs = readFileSync(vanillaJsSrc, 'utf8');
|
|
1553
1553
|
const addSound = selectedComponents.includes('Settings') || selectedComponents.includes('SoundEffects');
|
|
1554
|
-
|
|
1554
|
+
let soundScript = '';
|
|
1555
|
+
if (addSound) {
|
|
1556
|
+
const p = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
|
|
1557
|
+
if (existsSync(p)) {
|
|
1558
|
+
soundScript = readFileSync(p, 'utf8').replace("var soundBase = '/assets/sfx';", "var soundBase = 'assets/sfx';");
|
|
1559
|
+
soundScript = '\n' + soundScript;
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1555
1562
|
mainJs = mainJs.replace(/\{\{DEFAULT_DARK\}\}/g, defaultDark).replace(/\{\{DEFAULT_LIGHT\}\}/g, defaultLight).replace(/\{\{RIZZO_SOUND_SCRIPT\}\}/g, soundScript);
|
|
1556
1563
|
writeFileSync(vanillaJsPath, mainJs, 'utf8');
|
|
1557
1564
|
console.log(' - Wrote js/main.js (for modal, dropdown, tabs, toast, search, navbar, copy-to-clipboard, theme switcher)');
|
|
@@ -1772,16 +1779,20 @@ async function cmdInit(argv) {
|
|
|
1772
1779
|
logAddedDeps(selectedComponents, componentsToCopy, framework);
|
|
1773
1780
|
}
|
|
1774
1781
|
let vanillaSoundScript = '';
|
|
1775
|
-
if (framework === 'vanilla' && (componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
|
|
1782
|
+
if (framework === 'vanilla' && (useVanillaCore || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects'))) {
|
|
1776
1783
|
const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
|
|
1777
|
-
if (existsSync(soundPath))
|
|
1784
|
+
if (existsSync(soundPath)) {
|
|
1785
|
+
let script = readFileSync(soundPath, 'utf8');
|
|
1786
|
+
script = script.replace("var soundBase = '/assets/sfx';", "var soundBase = 'assets/sfx';");
|
|
1787
|
+
vanillaSoundScript = '\n' + script;
|
|
1788
|
+
}
|
|
1778
1789
|
}
|
|
1779
1790
|
|
|
1780
1791
|
// Astro layout: inject Navbar and Settings when those components are selected so the settings menu works.
|
|
1781
1792
|
if ((framework === 'astro') && (useHandpickAstro || useAstroBase)) {
|
|
1782
1793
|
const hasNavbar = componentsToCopy.includes('Navbar');
|
|
1783
1794
|
const hasSettings = componentsToCopy.includes('Settings');
|
|
1784
|
-
const hasSound = hasSettings || componentsToCopy.includes('SoundEffects');
|
|
1795
|
+
const hasSound = useAstroBase || hasSettings || componentsToCopy.includes('SoundEffects');
|
|
1785
1796
|
const layoutImports = [];
|
|
1786
1797
|
if (hasNavbar) layoutImports.push("import Navbar from '../components/rizzo/Navbar.astro';");
|
|
1787
1798
|
if (hasSettings) layoutImports.push("import Settings from '../components/rizzo/Settings.astro';");
|
|
@@ -1802,7 +1813,7 @@ async function cmdInit(argv) {
|
|
|
1802
1813
|
|
|
1803
1814
|
// Svelte app.html: inject sound script when Settings or SoundEffects is included (identical behavior to Astro).
|
|
1804
1815
|
if ((framework === 'svelte') && (useHandpickSvelte || useSvelteBase)) {
|
|
1805
|
-
const hasSound = componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
|
|
1816
|
+
const hasSound = useSvelteBase || componentsToCopy.includes('Settings') || componentsToCopy.includes('SoundEffects');
|
|
1806
1817
|
if (hasSound) {
|
|
1807
1818
|
const soundPath = join(getPackageRoot(), 'scaffold', 'shared', 'sound-effects-inline.js');
|
|
1808
1819
|
if (existsSync(soundPath)) {
|
package/dist/rizzo.min.css
CHANGED
|
@@ -181,8 +181,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
181
181
|
.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,
|
|
182
182
|
.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,
|
|
183
183
|
.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}
|
|
184
|
-
.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,
|
|
185
|
-
.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,
|
|
184
|
+
.home__docs-grid,.home__grid{grid-template-columns:1fr}}.theming-page .card a{color:var(--text);text-decoration:none;transition:color var(--transition-base)}.theming-page .card a:hover{color:var(--accent-fg)}.theming-page .card:hover{transform:translateY(calc(var(--spacing-0-125)*-1));transition:transform var(--transition-base)}.reduced-motion .theming-page .card:hover{transform:none}.theme-by{color:var(--text-dim);font-size:var(--font-size-sm);margin:0 0 var(--spacing-4) 0}.theme-by a{color:var(--accent-fg);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-fg-hover);text-decoration:underline}html:has([data-docs]){scroll-behavior:smooth}.docs{align-items:stretch;display:flex;flex-direction:row;min-height:calc(100vh - 4rem);padding:var(--spacing-6) 0;position:relative}.docs__sidebar-toggle{align-items:center;background-color:var(--accent);border:none;border-radius:var(--radius-md);bottom:var(--spacing-6);box-shadow:var(--shadow-lg);color:var(--accent-text);cursor:pointer;display:none;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);left:var(--spacing-6);padding:var(--spacing-3) var(--spacing-4);position:fixed;transition:background-color var(--transition-base),transform var(--transition-base);z-index:calc(var(--z-settings) - 1)}.docs__sidebar-toggle:hover{background-color:var(--accent-hover)}.docs__sidebar-toggle:focus-visible{outline:var(--outline-width) solid var(--accent-text);outline-offset:var(--outline-offset)}.docs__sidebar-toggle-icon{display:flex;flex-direction:column;gap:var(--spacing-0-375)}.docs__sidebar-toggle-icon span{background-color:currentcolor;border-radius:1px;display:block;height:2px;width:var(--spacing-4)}.docs__sidebar-overlay{background-color:oklch(0 0 0deg/40%);display:none;inset:0;opacity:0;position:fixed;transition:opacity var(--transition-base),visibility var(--transition-base);visibility:hidden;z-index:calc(var(--z-settings) - 2)}.docs--sidebar-open .docs__sidebar-overlay{opacity:1;visibility:visible}.docs__main{flex:1 1 0%;min-width:0}@media (width >= 1025px){#docs-sidebar-container{align-items:stretch;display:flex;flex-direction:column;min-height:0}}.docs-sidebar{background-color:var(--background);border-right:var(--border-width) solid var(--border);flex-shrink:0;overflow-y:auto;padding:var(--spacing-6) var(--spacing-4) var(--spacing-8) 0;width:var(--docs-sidebar-width,14rem)}@media (width >= 1025px){.docs-sidebar{align-self:flex-start;max-height:calc(100vh - var(--spacing-16) - var(--spacing-4));position:sticky;top:calc(var(--spacing-16) + var(--spacing-4));z-index:1}}.docs-sidebar__nav{display:flex;flex-direction:column;gap:var(--spacing-6)}.docs-sidebar__group-label{color:var(--text-dim);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);margin:0 0 var(--spacing-2) 0;padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);text-transform:uppercase}.docs-sidebar__list{list-style:none;margin:0;padding:0}.docs-sidebar__item{margin:0}.docs-sidebar__link{border-radius:var(--radius-md);color:var(--text-dim);display:block;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__link:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__link--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar__sublist{border-left:2px solid var(--border);list-style:none;margin:0 0 0 var(--spacing-2);padding:0}.docs-sidebar__subitem{margin:0}.docs-sidebar__sublink{border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-dim);display:block;font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-decoration:none;transition:color var(--transition-base),background-color var(--transition-base)}.docs-sidebar__sublink:hover{background-color:var(--background-alt);color:var(--text)}.docs-sidebar__sublink--active{background-color:oklch(from var(--accent-fg) l c h/12%);color:var(--accent-fg);font-weight:var(--font-weight-medium)}.docs-sidebar__sublink--active:hover{background-color:oklch(from var(--accent-fg) l c h/16%);color:var(--accent-fg-hover)}.docs-sidebar-demo{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);max-height:18rem;overflow:auto;padding:var(--spacing-3)}.docs-sidebar-demo .docs-sidebar{border-right:none;max-height:none;padding:0 var(--spacing-2) var(--spacing-4) 0;position:static;width:11rem}.docs-sidebar-demo .docs-sidebar__nav{gap:var(--spacing-4)}.docs-sidebar-demo .docs-sidebar__group-label,
|
|
185
|
+
.docs-sidebar-demo h2.docs-sidebar__group-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__link{font-size:.75rem;padding:var(--spacing-1) var(--spacing-2)}.docs-sidebar-demo .docs-sidebar__sublist{margin-left:var(--spacing-1)}.docs-sidebar-demo .docs-sidebar__sublink{font-size:.625rem;padding:var(--spacing-0-5) var(--spacing-1) var(--spacing-0-5) var(--spacing-2)}.theme-page__header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.theme-page__header h2{margin:0}html.docs-sidebar-mobile #docs-sidebar-container{display:none!important}@media (width <= 1024px){#docs-sidebar-container,
|
|
186
186
|
.docs-sidebar,
|
|
187
187
|
.docs__sidebar-overlay,
|
|
188
188
|
.docs__sidebar-toggle{display:none!important}}@media (width >= 1025px){.docs__sidebar-overlay[aria-hidden="true"]{display:none!important}}[data-theme="github-dark-classic"]{--bg:oklch(18% 0.012 264deg);--bg-alt:oklch(15% 0.01 264deg);--current-line:oklch(20% 0.012 264deg);--selection:oklch(28% 0.08 255deg);--fg:oklch(91% 0.004 264deg);--fg-dim:oklch(66% 0.01 264deg);--comment:oklch(52% 0.015 264deg);--cyan:oklch(72% 0.12 250deg);--green:oklch(72% 0.19 145deg);--orange:oklch(78% 0.12 55deg);--pink:oklch(68% 0.14 15deg);--purple:oklch(68% 0.14 300deg);--red:oklch(68% 0.16 15deg);--yellow:oklch(88% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.01 264deg);--border:oklch(13% 0.01 264deg);--accent:oklch(45% 0.18 250deg);--accent-hover:oklch(48% 0.18 250deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--accent-fg:var(--cyan);--accent-fg-hover:oklch(78% 0.12 250deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.1 55deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="shades-of-purple"]{--bg:oklch(18% 0.08 290deg);--bg-alt:oklch(15% 0.08 290deg);--current-line:oklch(25% 0.10 290deg);--selection:oklch(30% 0.12 290deg);--fg:oklch(95% 0.01 300deg);--fg-dim:oklch(75% 0.05 300deg);--comment:oklch(55.% 0.08 280deg);--cyan:oklch(75% 0.15 220deg);--green:oklch(70% 0.20 150deg);--orange:oklch(75% 0.18 60deg);--pink:oklch(75% 0.22 340deg);--purple:oklch(65% 0.25 290deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(85% 0.18 100deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(80% 0.05 300deg);--border:var(--current-line);--accent:var(--purple);--accent-hover:var(--pink);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 300deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.1 95deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(75% 0.14 15deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 250deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 250deg)}[data-theme="sandstorm-classic"]{--bg:oklch(16% 0.025 25deg);--bg-alt:oklch(13% 0.02 25deg);--current-line:oklch(20% 0.025 25deg);--selection:oklch(28% 0.06 25deg);--fg:oklch(90% 0.01 25deg);--fg-dim:oklch(62% 0.02 25deg);--comment:oklch(52% 0.03 25deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(72% 0.14 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 25deg);--border:oklch(22% 0.02 25deg);--accent:var(--red);--accent-hover:oklch(62% 0.16 25deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 25deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(78% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="rocky-blood-orange"]{--bg:oklch(16% 0.03 45deg);--bg-alt:oklch(13% 0.025 45deg);--current-line:oklch(20% 0.03 45deg);--selection:oklch(28% 0.06 45deg);--fg:oklch(90% 0.01 45deg);--fg-dim:oklch(60% 0.02 45deg);--comment:oklch(52% 0.03 45deg);--cyan:oklch(68% 0.12 220deg);--green:oklch(68% 0.18 145deg);--orange:oklch(62% 0.16 55deg);--pink:oklch(65% 0.16 350deg);--purple:oklch(62% 0.14 300deg);--red:oklch(58% 0.18 25deg);--yellow:oklch(82% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(72% 0.02 45deg);--border:oklch(22% 0.02 45deg);--accent:var(--orange);--accent-hover:oklch(68% 0.14 55deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:oklch(22% 0.03 55deg);--success:var(--green);--success-hover:oklch(74% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(72% 0.14 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(65% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(74% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="minimal-dark-neon-yellow"]{--bg:oklch(14% 0.01 95deg);--bg-alt:oklch(11% 0.008 95deg);--current-line:oklch(18% 0.015 95deg);--selection:oklch(25% 0.08 95deg);--fg:oklch(92% 0.02 95deg);--fg-dim:oklch(65% 0.02 95deg);--comment:oklch(50% 0.02 95deg);--icon:var(--fg);--icon-dim:oklch(72% 0.02 95deg);--cyan:oklch(72% 0.12 220deg);--green:oklch(72% 0.18 145deg);--orange:oklch(78% 0.14 55deg);--pink:oklch(68% 0.16 350deg);--purple:oklch(65% 0.14 300deg);--red:oklch(62% 0.18 25deg);--yellow:oklch(88% 0.18 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.02 95deg);--accent:var(--yellow);--accent-hover:oklch(90% 0.16 95deg);--accent-text:oklch(12% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.03 95deg);--success:var(--green);--success-hover:oklch(78% 0.16 145deg);--success-text:oklch(100% 0 0deg);--success-text-on-solid:oklch(22% 0.03 145deg);--warning:var(--orange);--warning-hover:oklch(85% 0.12 55deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 55deg);--error:var(--red);--error-hover:oklch(68% 0.16 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="hack-the-box"]{--bg:oklch(16% 0.03 255deg);--bg-alt:oklch(13% 0.025 255deg);--current-line:oklch(20% 0.03 255deg);--selection:oklch(55% 0.08 255deg);--fg:oklch(82% 0.03 255deg);--fg-dim:oklch(62% 0.04 255deg);--comment:oklch(55% 0.03 255deg);--icon:var(--fg);--icon-dim:oklch(70% 0.04 255deg);--cyan:oklch(78% 0.12 175deg);--green:oklch(88% 0.22 130deg);--orange:oklch(78% 0.14 75deg);--pink:oklch(65% 0.18 340deg);--purple:oklch(65% 0.22 300deg);--red:oklch(65% 0.22 25deg);--yellow:oklch(82% 0.16 95deg);--background:var(--bg);--background-alt:oklch(14% 0.028 255deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(20% 0.03 255deg);--accent:var(--green);--accent-hover:oklch(85% 0.2 125deg);--accent-text:oklch(12% 0.02 255deg);--accent-text-on-hover:oklch(22% 0.03 130deg);--success:var(--green);--success-hover:oklch(90% 0.18 130deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 130deg);--warning:var(--yellow);--warning-hover:oklch(92% 0.14 95deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 95deg);--error:var(--red);--error-hover:oklch(72% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 25deg);--info:oklch(68% 0.14 240deg);--info-hover:oklch(75% 0.12 240deg);--info-text:oklch(100% 0 0deg);--info-text-on-solid:oklch(22% 0.03 240deg)}[data-theme="pink-cat-boo"]{--bg:oklch(18% 0.03 280deg);--bg-alt:oklch(22% 0.04 280deg);--current-line:oklch(28% 0.06 320deg);--selection:oklch(28% 0.06 320deg);--fg:oklch(98% 0.01 350deg);--fg-dim:oklch(65% 0.04 280deg);--comment:oklch(55% 0.03 160deg);--cyan:oklch(72% 0.1 220deg);--green:oklch(72% 0.14 165deg);--orange:oklch(72% 0.14 75deg);--pink:oklch(78% 0.12 350deg);--purple:oklch(72% 0.14 300deg);--red:oklch(72% 0.18 350deg);--yellow:oklch(78% 0.14 85deg);--background:var(--bg);--background-alt:oklch(20% 0.035 280deg);--text:var(--fg);--text-dim:var(--fg-dim);--icon:var(--fg);--icon-dim:oklch(75% 0.04 280deg);--border:oklch(35% 0.04 280deg);--accent:var(--pink);--accent-hover:oklch(82% 0.1 350deg);--accent-text:oklch(18% 0.02 280deg);--accent-text-on-hover:oklch(22% 0.03 350deg);--success:var(--green);--success-hover:oklch(78% 0.12 165deg);--success-text:oklch(98% 0 0deg);--success-text-on-solid:oklch(22% 0.03 165deg);--warning:var(--yellow);--warning-hover:oklch(85% 0.12 85deg);--warning-text:oklch(98% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 85deg);--error:var(--red);--error-hover:oklch(78% 0.14 350deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:oklch(22% 0.03 15deg);--info:var(--cyan);--info-hover:oklch(78% 0.1 220deg);--info-text:oklch(98% 0 0deg);--info-text-on-solid:oklch(22% 0.03 220deg)}[data-theme="github-light"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(97% 0.005 264deg);--current-line:oklch(95% 0.008 264deg);--selection:oklch(88% 0.06 255deg);--fg:oklch(18% 0.02 264deg);--fg-dim:oklch(52% 0.02 264deg);--comment:oklch(58% 0.02 264deg);--cyan:oklch(55% 0.18 255deg);--green:oklch(48% 0.16 145deg);--orange:oklch(65% 0.14 75deg);--pink:oklch(55% 0.18 340deg);--purple:oklch(50% 0.18 290deg);--red:oklch(50% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.01 264deg);--accent:var(--cyan);--accent-hover:oklch(38% 0.18 255deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:oklch(100% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(62% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:oklch(100% 0 0deg)}[data-theme="red-velvet-cupcake"]{--bg:oklch(99% 0.005 25deg);--bg-alt:oklch(96% 0.01 25deg);--current-line:oklch(94% 0.015 25deg);--selection:oklch(92% 0.04 25deg);--fg:oklch(28% 0.02 250deg);--fg-dim:oklch(48% 0.02 250deg);--comment:oklch(55% 0.02 250deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(55% 0.17 25deg);--yellow:oklch(75% 0.12 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.015 25deg);--accent:var(--red);--accent-hover:oklch(48% 0.18 25deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(54% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(58% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="orangy-one-light"]{--bg:oklch(99% 0.008 70deg);--bg-alt:oklch(96% 0.012 70deg);--current-line:oklch(94% 0.015 70deg);--selection:oklch(92% 0.05 70deg);--fg:oklch(22% 0.02 70deg);--fg-dim:oklch(48% 0.02 70deg);--comment:oklch(55% 0.02 70deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(58% 0.16 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 70deg);--accent:var(--orange);--accent-hover:oklch(50% 0.18 55deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(72% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="sunflower"]{--bg:oklch(98% 0.03 95deg);--bg-alt:oklch(95% 0.04 95deg);--current-line:oklch(92% 0.05 95deg);--selection:oklch(88% 0.08 95deg);--fg:oklch(22% 0.03 95deg);--fg-dim:oklch(45% 0.03 95deg);--comment:oklch(52% 0.03 95deg);--cyan:oklch(55% 0.12 220deg);--green:oklch(50% 0.16 145deg);--orange:oklch(62% 0.14 55deg);--pink:oklch(58% 0.16 350deg);--purple:oklch(52% 0.16 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.16 95deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(85% 0.04 95deg);--accent:var(--yellow);--accent-hover:oklch(65% 0.18 95deg);--accent-text:oklch(15% 0.02 95deg);--accent-text-on-hover:oklch(22% 0.02 95deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--orange);--warning-hover:oklch(70% 0.12 55deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="green-breeze-light"]{--bg:oklch(98% 0.008 140deg);--bg-alt:oklch(96% 0.01 140deg);--current-line:oklch(94% 0.012 140deg);--selection:oklch(88% 0.06 200deg);--fg:oklch(20% 0.02 80deg);--fg-dim:oklch(45% 0.02 80deg);--comment:oklch(55% 0.02 80deg);--cyan:oklch(58% 0.14 205deg);--green:oklch(42% 0.14 145deg);--orange:oklch(62% 0.12 65deg);--pink:oklch(55% 0.12 340deg);--purple:oklch(55% 0.12 290deg);--red:oklch(45% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.02 140deg);--accent:oklch(48% 0.16 155deg);--accent-hover:oklch(38% 0.16 155deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 95deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 210deg);--info-text:oklch(20% 0 0deg)}[data-theme="cute-pink"]{--bg:oklch(100% 0 0deg);--bg-alt:oklch(98% 0.02 350deg);--current-line:oklch(96% 0.03 350deg);--selection:oklch(78% 0.12 350deg);--fg:oklch(25% 0.01 0deg);--fg-dim:oklch(50% 0.02 0deg);--comment:oklch(55% 0.02 0deg);--cyan:oklch(55% 0.1 220deg);--green:oklch(48% 0.12 145deg);--orange:oklch(65% 0.12 65deg);--pink:oklch(62% 0.2 350deg);--purple:oklch(42% 0.18 300deg);--red:oklch(55% 0.2 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:oklch(98% 0.025 350deg);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(88% 0.06 350deg);--accent:oklch(62% 0.22 350deg);--accent-hover:oklch(55% 0.22 350deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(58% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(80% 0.14 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(60% 0.18 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(65% 0.1 220deg);--info-text:oklch(20% 0 0deg)}[data-theme="semi-light-purple"]{--bg:oklch(96% 0.02 290deg);--bg-alt:oklch(94% 0.03 290deg);--current-line:oklch(91% 0.04 290deg);--selection:oklch(88% 0.06 290deg);--fg:oklch(25% 0.02 290deg);--fg-dim:oklch(48% 0.03 290deg);--comment:oklch(55% 0.04 280deg);--cyan:oklch(58% 0.12 220deg);--green:oklch(50% 0.14 150deg);--orange:oklch(65% 0.12 60deg);--pink:oklch(62% 0.16 340deg);--purple:oklch(52% 0.2 290deg);--red:oklch(52% 0.18 25deg);--yellow:oklch(75% 0.14 90deg);--background:var(--bg);--background-alt:var(--bg-alt);--text:var(--fg);--text-dim:var(--fg-dim);--border:oklch(86% 0.05 290deg);--accent:var(--purple);--accent-hover:oklch(45% 0.2 290deg);--accent-text:oklch(100% 0 0deg);--success:var(--green);--success-hover:oklch(55% 0.14 145deg);--success-text:oklch(20% 0 0deg);--warning:var(--yellow);--warning-hover:oklch(82% 0.12 90deg);--warning-text:oklch(20% 0 0deg);--error:var(--red);--error-hover:oklch(58% 0.16 25deg);--error-text:oklch(100% 0 0deg);--info:var(--cyan);--info-hover:oklch(62% 0.1 220deg);--info-text:oklch(20% 0 0deg)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rizzo-css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.48",
|
|
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
|
},
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"scaffold/astro",
|
|
29
29
|
"scaffold/astro-core",
|
|
30
30
|
"scaffold/config",
|
|
31
|
+
"scaffold/shared",
|
|
31
32
|
"scaffold/svelte",
|
|
32
33
|
"scaffold/svelte-core",
|
|
33
34
|
"scaffold/utils",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
Design system · Vanilla · Astro · Svelte
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template
|
|
17
|
+
Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template core` or **manual**. When you choose **Core**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
|
|
18
18
|
|
|
19
19
|
## Setup
|
|
20
20
|
|
|
Binary file
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
// Sound effects: play on click/tap when user has enabled (localStorage soundEffects === 'true'). Uses /assets/sfx/click.mp3, else Web Audio fallback. Same script for docs and all shipped scaffolds. Supports touch (touchend) so mobile plays like desktop.
|
|
2
|
+
(function() {
|
|
3
|
+
var SOUND_KEY = 'soundEffects';
|
|
4
|
+
var THROTTLE_MS = 120;
|
|
5
|
+
var clickableSelector = 'a[href], area[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], select, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="tab"], [role="option"], [role="switch"], .btn, .tabs__tab, .dropdown__trigger, .accordion__trigger, [data-accordion-trigger], .navbar__link, .navbar__brand-link, .pagination__link, .breadcrumb__link, .search__trigger, .theme-switcher__option, .font-switcher__option, .framework-switcher__segment, .modal__close, .alert__close, .copy-btn, [data-copy-btn]';
|
|
6
|
+
var audioContext = null;
|
|
7
|
+
var soundBase = '/assets/sfx';
|
|
8
|
+
var soundUrls = [soundBase + '/click.mp3'];
|
|
9
|
+
var cachedAudio = null;
|
|
10
|
+
var soundLoadTried = false;
|
|
11
|
+
var lastPlayedAt = 0;
|
|
12
|
+
var lastTouchSoundTarget = null;
|
|
13
|
+
var lastTouchSoundTime = 0;
|
|
14
|
+
function getContext() {
|
|
15
|
+
if (!audioContext && typeof window.AudioContext !== 'undefined') {
|
|
16
|
+
audioContext = new window.AudioContext();
|
|
17
|
+
}
|
|
18
|
+
return audioContext;
|
|
19
|
+
}
|
|
20
|
+
function playFallbackTone() {
|
|
21
|
+
try {
|
|
22
|
+
var ctx = getContext();
|
|
23
|
+
if (!ctx) return;
|
|
24
|
+
ctx.resume().then(function() {
|
|
25
|
+
var now = ctx.currentTime;
|
|
26
|
+
var osc = ctx.createOscillator();
|
|
27
|
+
var gain = ctx.createGain();
|
|
28
|
+
osc.connect(gain);
|
|
29
|
+
gain.connect(ctx.destination);
|
|
30
|
+
osc.frequency.setValueAtTime(800, now);
|
|
31
|
+
osc.frequency.exponentialRampToValueAtTime(200, now + 0.04);
|
|
32
|
+
osc.type = 'sine';
|
|
33
|
+
gain.gain.setValueAtTime(0.08, now);
|
|
34
|
+
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
|
|
35
|
+
osc.start(now);
|
|
36
|
+
osc.stop(now + 0.04);
|
|
37
|
+
}).catch(function() {});
|
|
38
|
+
} catch (e) {}
|
|
39
|
+
}
|
|
40
|
+
function tryLoadAssetSound() {
|
|
41
|
+
if (soundLoadTried || cachedAudio) return;
|
|
42
|
+
soundLoadTried = true;
|
|
43
|
+
var idx = 0;
|
|
44
|
+
function tryNext() {
|
|
45
|
+
if (idx >= soundUrls.length) return;
|
|
46
|
+
var a = new window.Audio(soundUrls[idx]);
|
|
47
|
+
a.volume = 0.4;
|
|
48
|
+
a.addEventListener('canplaythrough', function() { cachedAudio = a; }, { once: true });
|
|
49
|
+
a.addEventListener('error', function() { idx++; tryNext(); }, { once: true });
|
|
50
|
+
a.load();
|
|
51
|
+
}
|
|
52
|
+
tryNext();
|
|
53
|
+
}
|
|
54
|
+
function playClickSound() {
|
|
55
|
+
try {
|
|
56
|
+
if (localStorage.getItem(SOUND_KEY) !== 'true') return;
|
|
57
|
+
var now = Date.now();
|
|
58
|
+
if (now - lastPlayedAt < THROTTLE_MS) return;
|
|
59
|
+
lastPlayedAt = now;
|
|
60
|
+
tryLoadAssetSound();
|
|
61
|
+
if (cachedAudio) {
|
|
62
|
+
try {
|
|
63
|
+
cachedAudio.currentTime = 0;
|
|
64
|
+
cachedAudio.volume = 0.4;
|
|
65
|
+
cachedAudio.play().catch(function() {});
|
|
66
|
+
} catch (e) {}
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
playFallbackTone();
|
|
70
|
+
} catch (e) {}
|
|
71
|
+
}
|
|
72
|
+
function getClickable(el) {
|
|
73
|
+
if (!el || !el.closest) return null;
|
|
74
|
+
var clickable = el.closest(clickableSelector);
|
|
75
|
+
if (!clickable) return null;
|
|
76
|
+
if (clickable.disabled === true || clickable.getAttribute('aria-disabled') === 'true') return null;
|
|
77
|
+
return clickable;
|
|
78
|
+
}
|
|
79
|
+
function onDocumentClick(e) {
|
|
80
|
+
if (e.button !== 0) return;
|
|
81
|
+
var clickable = getClickable(e.target);
|
|
82
|
+
if (!clickable) return;
|
|
83
|
+
if (lastTouchSoundTarget === clickable && (Date.now() - lastTouchSoundTime) < 400) return;
|
|
84
|
+
playClickSound();
|
|
85
|
+
}
|
|
86
|
+
function onDocumentTouchend(e) {
|
|
87
|
+
var clickable = getClickable(e.target);
|
|
88
|
+
if (!clickable) return;
|
|
89
|
+
lastTouchSoundTarget = clickable;
|
|
90
|
+
lastTouchSoundTime = Date.now();
|
|
91
|
+
playClickSound();
|
|
92
|
+
setTimeout(function() { lastTouchSoundTarget = null; }, 450);
|
|
93
|
+
}
|
|
94
|
+
function initSound() {
|
|
95
|
+
document.addEventListener('click', onDocumentClick, true);
|
|
96
|
+
if ('ontouchstart' in window || (navigator && navigator.maxTouchPoints > 0)) {
|
|
97
|
+
document.addEventListener('touchend', onDocumentTouchend, true);
|
|
98
|
+
}
|
|
99
|
+
if (localStorage.getItem(SOUND_KEY) === 'true') tryLoadAssetSound();
|
|
100
|
+
}
|
|
101
|
+
if (document.readyState === 'loading') {
|
|
102
|
+
document.addEventListener('DOMContentLoaded', initSound);
|
|
103
|
+
} else {
|
|
104
|
+
initSound();
|
|
105
|
+
}
|
|
106
|
+
})();
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte';
|
|
2
3
|
import { DOCS_NAV } from '../../config/docsNav';
|
|
4
|
+
import type { DocsNavLink } from '../../config/docsNav';
|
|
3
5
|
|
|
4
6
|
interface Props {
|
|
5
7
|
/** Current URL pathname (e.g. $page.url.pathname or window.location.pathname). */
|
|
@@ -11,16 +13,51 @@
|
|
|
11
13
|
}
|
|
12
14
|
let { currentPath, pathPrefix = '/docs', omitId = false }: Props = $props();
|
|
13
15
|
|
|
16
|
+
let activeSectionId = $state<string | null>(null);
|
|
17
|
+
|
|
14
18
|
function fullHref(link: { href: string; frameworkOnly?: boolean }): string {
|
|
15
19
|
const base = link.frameworkOnly ? pathPrefix : '/docs';
|
|
16
20
|
return `${base}/${link.href}`;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
|
-
function isActive(link:
|
|
23
|
+
function isActive(link: DocsNavLink): boolean {
|
|
20
24
|
const path = currentPath.replace(/\/$/, '');
|
|
21
25
|
const href = fullHref(link);
|
|
22
26
|
return path === href;
|
|
23
27
|
}
|
|
28
|
+
|
|
29
|
+
onMount(() => {
|
|
30
|
+
function setActiveFromHash() {
|
|
31
|
+
const hash = window.location.hash.slice(1) || null;
|
|
32
|
+
activeSectionId = hash;
|
|
33
|
+
}
|
|
34
|
+
setActiveFromHash();
|
|
35
|
+
window.addEventListener('hashchange', setActiveFromHash);
|
|
36
|
+
|
|
37
|
+
let io: IntersectionObserver | null = null;
|
|
38
|
+
const content = document.querySelector('.docs__content');
|
|
39
|
+
if (content) {
|
|
40
|
+
const headings = content.querySelectorAll<HTMLHeadingElement>('h2[id]');
|
|
41
|
+
if (headings.length) {
|
|
42
|
+
io = new IntersectionObserver(
|
|
43
|
+
(entries) => {
|
|
44
|
+
for (const e of entries) {
|
|
45
|
+
if (!e.isIntersecting) continue;
|
|
46
|
+
const id = e.target.id;
|
|
47
|
+
if (id) activeSectionId = id;
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{ rootMargin: '-80px 0px -60% 0px', threshold: 0 }
|
|
52
|
+
);
|
|
53
|
+
headings.forEach((h) => io!.observe(h));
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return () => {
|
|
57
|
+
window.removeEventListener('hashchange', setActiveFromHash);
|
|
58
|
+
io?.disconnect();
|
|
59
|
+
};
|
|
60
|
+
});
|
|
24
61
|
</script>
|
|
25
62
|
|
|
26
63
|
<aside id={omitId ? undefined : 'docs-sidebar'} class="docs-sidebar" aria-label="Documentation navigation">
|
|
@@ -32,14 +69,33 @@
|
|
|
32
69
|
{#each group.links as link}
|
|
33
70
|
{@const href = fullHref(link)}
|
|
34
71
|
{@const active = isActive(link)}
|
|
72
|
+
{@const sections = link.sections ?? []}
|
|
35
73
|
<li class="docs-sidebar__item">
|
|
36
74
|
<a
|
|
37
75
|
href={href}
|
|
38
76
|
class="docs-sidebar__link"
|
|
39
|
-
class:docs-sidebar__link--active={active}
|
|
77
|
+
class:docs-sidebar__link--active={active && (sections.length === 0 || activeSectionId === null)}
|
|
78
|
+
aria-current={active && (sections.length === 0 || activeSectionId === null) ? 'page' : undefined}
|
|
40
79
|
>
|
|
41
80
|
{link.label}
|
|
42
81
|
</a>
|
|
82
|
+
{#if sections.length > 0}
|
|
83
|
+
<ul class="docs-sidebar__sublist" aria-label="Sections in {link.label}">
|
|
84
|
+
{#each sections as section}
|
|
85
|
+
{@const sublinkActive = activeSectionId === section.id && currentPath.replace(/\/$/, '') === href}
|
|
86
|
+
<li class="docs-sidebar__subitem">
|
|
87
|
+
<a
|
|
88
|
+
href="{href}#{section.id}"
|
|
89
|
+
class="docs-sidebar__sublink"
|
|
90
|
+
class:docs-sidebar__sublink--active={sublinkActive}
|
|
91
|
+
aria-current={sublinkActive ? 'location' : undefined}
|
|
92
|
+
>
|
|
93
|
+
{section.label}
|
|
94
|
+
</a>
|
|
95
|
+
</li>
|
|
96
|
+
{/each}
|
|
97
|
+
</ul>
|
|
98
|
+
{/if}
|
|
43
99
|
</li>
|
|
44
100
|
{/each}
|
|
45
101
|
</ul>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
Design system · Vanilla · Astro · Svelte
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template
|
|
17
|
+
SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template core` or **manual**. When you choose **Core**, the CLI copies all 31 Rizzo components (Button, Modal, Navbar, Search, Settings, ThemeSwitcher, etc.) into this project so they work together; **Manual** lets you pick which of those to include (all are pre-selected by default).
|
|
18
18
|
|
|
19
19
|
## Setup
|
|
20
20
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
Design system · Vanilla · Astro · Svelte
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then
|
|
17
|
+
This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then **Core** or **Manual**. **Core** = index + all 31 component pages, js, icons, and Settings/toast/sound (full showcase). **Manual** = index + CSS; component picker with all interactive components pre-selected. **Add to existing project** (or `npx rizzo-css add`) only adds the CSS and optional files (you must add the stylesheet `<link>` yourself; the CLI prints the exact tag).
|
|
18
18
|
|
|
19
19
|
## First-time setup
|
|
20
20
|
|
|
@@ -27,7 +27,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
|
|
|
27
27
|
- `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
|
|
28
28
|
- Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
|
|
29
29
|
|
|
30
|
-
(Replace `@latest` with a specific version, e.g. `@0.0.
|
|
30
|
+
(Replace `@latest` with a specific version, e.g. `@0.0.48`, in production.)
|
|
31
31
|
|
|
32
32
|
The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
|
|
33
33
|
|
|
@@ -53,6 +53,7 @@ The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}
|
|
|
53
53
|
- **Navbar** — Mobile menu: `.navbar__toggle` toggles `.navbar__menu`; Escape closes.
|
|
54
54
|
- **Copy to clipboard** — Buttons with `.copy-to-clipboard` and `data-copy-value`, or `[data-copy]` with `value` or `data-copy-value`; click copies text and shows feedback (icons/aria-label). Optional `data-copy-format` for “Copied {format}!”.
|
|
55
55
|
- **Tooltips** — Use `.tooltip-wrapper` with a `.tooltip` child, or `[data-tooltip]` on the trigger; no JS required (CSS :hover and :focus-within).
|
|
56
|
+
- **Sound effects** — When "Play sound on click" is enabled in Settings, a short click sound plays on interactive elements. The script is injected by the CLI when **Core** or when **Settings**/**SoundEffects** are included; sound files are in **`assets/sfx/`** (e.g. `click.mp3`). Off by default; persists as `soundEffects` in localStorage.
|
|
56
57
|
|
|
57
58
|
## Commands
|
|
58
59
|
|
|
@@ -66,7 +67,7 @@ pnpm dlx serve .
|
|
|
66
67
|
|
|
67
68
|
## Other scaffolds
|
|
68
69
|
|
|
69
|
-
- **Astro:** `scaffold/astro-core/` — Astro app (
|
|
70
|
-
- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (
|
|
70
|
+
- **Astro:** `scaffold/astro-core/` — Astro app (Core or Manual template); optional components from `scaffold/astro/` (see README-RIZZO.md).
|
|
71
|
+
- **Svelte:** `scaffold/svelte-core/` — SvelteKit app (Core or Manual template); optional components from `scaffold/svelte/` (see README-RIZZO.md).
|
|
71
72
|
|
|
72
73
|
Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
|