rizzo-css 0.0.16 → 0.0.18
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 +4 -4
- package/bin/rizzo-css.js +473 -164
- package/dist/rizzo.min.css +4 -1
- package/package.json +9 -4
- package/scaffold/astro-minimal/.env.example +3 -0
- package/scaffold/astro-minimal/README.md +36 -0
- package/scaffold/astro-minimal/package.json +13 -0
- package/scaffold/astro-minimal/src/layouts/Layout.astro +28 -0
- package/scaffold/astro-minimal/src/pages/index.astro +10 -0
- package/scaffold/svelte-minimal/.env.example +3 -0
- package/scaffold/svelte-minimal/README.md +37 -0
- package/scaffold/svelte-minimal/package.json +20 -0
- package/scaffold/svelte-minimal/src/app.d.ts +11 -0
- package/scaffold/svelte-minimal/src/app.html +15 -0
- package/scaffold/svelte-minimal/src/routes/+layout.svelte +1 -0
- package/scaffold/svelte-minimal/src/routes/+page.svelte +5 -0
- package/scaffold/svelte-minimal/svelte.config.js +10 -0
- package/scaffold/svelte-minimal/tsconfig.json +11 -0
- package/scaffold/vanilla/README.md +4 -4
- package/scaffold/vanilla/components/accordion.html +18 -0
- package/scaffold/vanilla/components/alert.html +18 -0
- package/scaffold/vanilla/components/avatar.html +18 -0
- package/scaffold/vanilla/components/badge.html +18 -0
- package/scaffold/vanilla/components/breadcrumb.html +18 -0
- package/scaffold/vanilla/components/button.html +18 -0
- package/scaffold/vanilla/components/cards.html +18 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +18 -0
- package/scaffold/vanilla/components/divider.html +18 -0
- package/scaffold/vanilla/components/dropdown.html +18 -0
- package/scaffold/vanilla/components/forms.html +18 -0
- package/scaffold/vanilla/components/icons.html +18 -0
- package/scaffold/vanilla/components/index.html +18 -0
- package/scaffold/vanilla/components/modal.html +18 -0
- package/scaffold/vanilla/components/navbar.html +18 -0
- package/scaffold/vanilla/components/pagination.html +18 -0
- package/scaffold/vanilla/components/progress-bar.html +18 -0
- package/scaffold/vanilla/components/search.html +18 -0
- package/scaffold/vanilla/components/settings.html +18 -0
- package/scaffold/vanilla/components/spinner.html +18 -0
- package/scaffold/vanilla/components/table.html +18 -0
- package/scaffold/vanilla/components/tabs.html +18 -0
- package/scaffold/vanilla/components/theme-switcher.html +18 -0
- package/scaffold/vanilla/components/toast.html +18 -0
- package/scaffold/vanilla/components/tooltip.html +18 -0
- package/scaffold/vanilla/index.html +18 -0
- package/scaffold/astro-app/README.md +0 -43
- package/scaffold/astro-app/package.json +0 -1
- package/scaffold/astro-app/src/components/Accordion.astro +0 -178
- package/scaffold/astro-app/src/components/Alert.astro +0 -131
- package/scaffold/astro-app/src/components/Avatar.astro +0 -59
- package/scaffold/astro-app/src/components/Badge.astro +0 -24
- package/scaffold/astro-app/src/components/Breadcrumb.astro +0 -61
- package/scaffold/astro-app/src/components/Button.astro +0 -3
- package/scaffold/astro-app/src/components/Card.astro +0 -18
- package/scaffold/astro-app/src/components/Checkbox.astro +0 -38
- package/scaffold/astro-app/src/components/CodeBlock.astro +0 -393
- package/scaffold/astro-app/src/components/CopyToClipboard.astro +0 -219
- package/scaffold/astro-app/src/components/Divider.astro +0 -37
- package/scaffold/astro-app/src/components/DocsSidebar.astro +0 -51
- package/scaffold/astro-app/src/components/Dropdown.astro +0 -807
- package/scaffold/astro-app/src/components/FormGroup.astro +0 -59
- package/scaffold/astro-app/src/components/FrameworkSwitcher.astro +0 -72
- package/scaffold/astro-app/src/components/Input.astro +0 -59
- package/scaffold/astro-app/src/components/Modal.astro +0 -212
- package/scaffold/astro-app/src/components/Navbar.astro +0 -623
- package/scaffold/astro-app/src/components/Pagination.astro +0 -240
- package/scaffold/astro-app/src/components/ProgressBar.astro +0 -65
- package/scaffold/astro-app/src/components/Radio.astro +0 -38
- package/scaffold/astro-app/src/components/Search.astro +0 -1259
- package/scaffold/astro-app/src/components/Select.astro +0 -49
- package/scaffold/astro-app/src/components/Settings.astro +0 -382
- package/scaffold/astro-app/src/components/Spinner.astro +0 -30
- package/scaffold/astro-app/src/components/Table.astro +0 -181
- package/scaffold/astro-app/src/components/Tabs.astro +0 -223
- package/scaffold/astro-app/src/components/Textarea.astro +0 -58
- package/scaffold/astro-app/src/components/ThemeIcon.astro +0 -50
- package/scaffold/astro-app/src/components/ThemeSwitcher.astro +0 -504
- package/scaffold/astro-app/src/components/Toast.astro +0 -30
- package/scaffold/astro-app/src/components/Tooltip.astro +0 -32
- package/scaffold/astro-app/src/components/icons/Brush.astro +0 -10
- package/scaffold/astro-app/src/components/icons/Cake.astro +0 -11
- package/scaffold/astro-app/src/components/icons/Check.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Cherry.astro +0 -11
- package/scaffold/astro-app/src/components/icons/ChevronDown.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Circle.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Close.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Cmd.astro +0 -26
- package/scaffold/astro-app/src/components/icons/Copy.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Eye.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Filter.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Flame.astro +0 -28
- package/scaffold/astro-app/src/components/icons/Flower.astro +0 -11
- package/scaffold/astro-app/src/components/icons/Gear.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Heart.astro +0 -28
- package/scaffold/astro-app/src/components/icons/IceCream.astro +0 -31
- package/scaffold/astro-app/src/components/icons/Leaf.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Lemon.astro +0 -11
- package/scaffold/astro-app/src/components/icons/Moon.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Owl.astro +0 -34
- package/scaffold/astro-app/src/components/icons/Palette.astro +0 -33
- package/scaffold/astro-app/src/components/icons/Rainbow.astro +0 -31
- package/scaffold/astro-app/src/components/icons/Search.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Shield.astro +0 -28
- package/scaffold/astro-app/src/components/icons/Snowflake.astro +0 -34
- package/scaffold/astro-app/src/components/icons/Sort.astro +0 -30
- package/scaffold/astro-app/src/components/icons/Sun.astro +0 -29
- package/scaffold/astro-app/src/components/icons/Sunset.astro +0 -10
- package/scaffold/astro-app/src/components/icons/Zap.astro +0 -9
- package/scaffold/astro-app/src/components/icons/devicons/Astro.astro +0 -53
- package/scaffold/astro-app/src/components/icons/devicons/Bash.astro +0 -34
- package/scaffold/astro-app/src/components/icons/devicons/Css3.astro +0 -29
- package/scaffold/astro-app/src/components/icons/devicons/Git.astro +0 -24
- package/scaffold/astro-app/src/components/icons/devicons/Html5.astro +0 -27
- package/scaffold/astro-app/src/components/icons/devicons/Javascript.astro +0 -25
- package/scaffold/astro-app/src/components/icons/devicons/Nodejs.astro +0 -47
- package/scaffold/astro-app/src/components/icons/devicons/Plaintext.astro +0 -33
- package/scaffold/astro-app/src/components/icons/devicons/React.astro +0 -27
- package/scaffold/astro-app/src/components/icons/devicons/Svelte.astro +0 -25
- package/scaffold/astro-app/src/components/icons/devicons/Vue.astro +0 -26
- package/scaffold/astro-app/src/config/frameworks.ts +0 -26
- package/scaffold/astro-app/src/config/themes.ts +0 -54
- package/scaffold/astro-app/src/layouts/DocsLayout.astro +0 -263
- package/scaffold/astro-app/src/layouts/Layout.astro +0 -41
- package/scaffold/astro-app/src/pages/components/accordion.astro +0 -172
- package/scaffold/astro-app/src/pages/components/alert.astro +0 -250
- package/scaffold/astro-app/src/pages/components/avatar.astro +0 -102
- package/scaffold/astro-app/src/pages/components/badge.astro +0 -119
- package/scaffold/astro-app/src/pages/components/breadcrumb.astro +0 -124
- package/scaffold/astro-app/src/pages/components/button.astro +0 -74
- package/scaffold/astro-app/src/pages/components/cards.astro +0 -247
- package/scaffold/astro-app/src/pages/components/copy-to-clipboard.astro +0 -49
- package/scaffold/astro-app/src/pages/components/divider.astro +0 -74
- package/scaffold/astro-app/src/pages/components/dropdown.astro +0 -394
- package/scaffold/astro-app/src/pages/components/forms.astro +0 -367
- package/scaffold/astro-app/src/pages/components/icons.astro +0 -246
- package/scaffold/astro-app/src/pages/components/modal.astro +0 -152
- package/scaffold/astro-app/src/pages/components/navbar.astro +0 -80
- package/scaffold/astro-app/src/pages/components/pagination.astro +0 -126
- package/scaffold/astro-app/src/pages/components/progress-bar.astro +0 -94
- package/scaffold/astro-app/src/pages/components/search.astro +0 -155
- package/scaffold/astro-app/src/pages/components/settings.astro +0 -78
- package/scaffold/astro-app/src/pages/components/spinner.astro +0 -81
- package/scaffold/astro-app/src/pages/components/table.astro +0 -144
- package/scaffold/astro-app/src/pages/components/tabs.astro +0 -220
- package/scaffold/astro-app/src/pages/components/theme-switcher.astro +0 -69
- package/scaffold/astro-app/src/pages/components/toast.astro +0 -157
- package/scaffold/astro-app/src/pages/components/tooltip.astro +0 -209
- package/scaffold/astro-app/src/pages/components.astro +0 -290
- package/scaffold/astro-app/src/pages/docs/accessibility.astro +0 -9
- package/scaffold/astro-app/src/pages/docs/colors.astro +0 -9
- package/scaffold/astro-app/src/pages/docs/design-system.astro +0 -9
- package/scaffold/astro-app/src/pages/docs/getting-started.astro +0 -9
- package/scaffold/astro-app/src/pages/docs/index.astro +0 -15
- package/scaffold/astro-app/src/pages/docs/themes/[theme].astro +0 -14
- package/scaffold/astro-app/src/pages/docs/theming.astro +0 -10
- package/scaffold/astro-app/src/pages/index.astro +0 -24
- package/scaffold/svelte-app/README.md +0 -39
- package/scaffold/svelte-app/package.json +0 -22
- package/scaffold/svelte-app/src/app.d.ts +0 -28
- package/scaffold/svelte-app/src/app.html +0 -21
- package/scaffold/svelte-app/src/lib/assets/favicon.svg +0 -1
- package/scaffold/svelte-app/src/lib/rizzo/Accordion.svelte +0 -128
- package/scaffold/svelte-app/src/lib/rizzo/Alert.svelte +0 -85
- package/scaffold/svelte-app/src/lib/rizzo/Avatar.svelte +0 -39
- package/scaffold/svelte-app/src/lib/rizzo/Badge.svelte +0 -31
- package/scaffold/svelte-app/src/lib/rizzo/Breadcrumb.svelte +0 -49
- package/scaffold/svelte-app/src/lib/rizzo/Button.svelte +0 -27
- package/scaffold/svelte-app/src/lib/rizzo/Card.svelte +0 -17
- package/scaffold/svelte-app/src/lib/rizzo/Checkbox.svelte +0 -37
- package/scaffold/svelte-app/src/lib/rizzo/CopyToClipboard.svelte +0 -79
- package/scaffold/svelte-app/src/lib/rizzo/Divider.svelte +0 -28
- package/scaffold/svelte-app/src/lib/rizzo/Dropdown.svelte +0 -254
- package/scaffold/svelte-app/src/lib/rizzo/FormGroup.svelte +0 -51
- package/scaffold/svelte-app/src/lib/rizzo/Input.svelte +0 -59
- package/scaffold/svelte-app/src/lib/rizzo/Modal.svelte +0 -157
- package/scaffold/svelte-app/src/lib/rizzo/Pagination.svelte +0 -93
- package/scaffold/svelte-app/src/lib/rizzo/ProgressBar.svelte +0 -58
- package/scaffold/svelte-app/src/lib/rizzo/Radio.svelte +0 -38
- package/scaffold/svelte-app/src/lib/rizzo/Select.svelte +0 -51
- package/scaffold/svelte-app/src/lib/rizzo/Spinner.svelte +0 -14
- package/scaffold/svelte-app/src/lib/rizzo/Table.svelte +0 -158
- package/scaffold/svelte-app/src/lib/rizzo/Tabs.svelte +0 -117
- package/scaffold/svelte-app/src/lib/rizzo/Textarea.svelte +0 -59
- package/scaffold/svelte-app/src/lib/rizzo/ThemeIcon.svelte +0 -54
- package/scaffold/svelte-app/src/lib/rizzo/ThemeSwitcher.svelte +0 -315
- package/scaffold/svelte-app/src/lib/rizzo/Toast.svelte +0 -33
- package/scaffold/svelte-app/src/lib/rizzo/Tooltip.svelte +0 -19
- package/scaffold/svelte-app/src/lib/rizzo/icons/Check.svelte +0 -29
- package/scaffold/svelte-app/src/lib/rizzo/icons/ChevronDown.svelte +0 -29
- package/scaffold/svelte-app/src/lib/rizzo/icons/Circle.svelte +0 -29
- package/scaffold/svelte-app/src/lib/rizzo/icons/Close.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/Cmd.svelte +0 -27
- package/scaffold/svelte-app/src/lib/rizzo/icons/Copy.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/Eye.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/Filter.svelte +0 -29
- package/scaffold/svelte-app/src/lib/rizzo/icons/Gear.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/IceCream.svelte +0 -31
- package/scaffold/svelte-app/src/lib/rizzo/icons/Moon.svelte +0 -29
- package/scaffold/svelte-app/src/lib/rizzo/icons/Owl.svelte +0 -34
- package/scaffold/svelte-app/src/lib/rizzo/icons/Palette.svelte +0 -33
- package/scaffold/svelte-app/src/lib/rizzo/icons/Rainbow.svelte +0 -31
- package/scaffold/svelte-app/src/lib/rizzo/icons/Search.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/Snowflake.svelte +0 -34
- package/scaffold/svelte-app/src/lib/rizzo/icons/Sort.svelte +0 -30
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Astro.svelte +0 -45
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Bash.svelte +0 -28
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Css3.svelte +0 -23
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Git.svelte +0 -18
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Html5.svelte +0 -21
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Javascript.svelte +0 -19
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Nodejs.svelte +0 -44
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Plaintext.svelte +0 -24
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/React.svelte +0 -21
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/SvelteIcon.svelte +0 -19
- package/scaffold/svelte-app/src/lib/rizzo/icons/devicons/Vue.svelte +0 -20
- package/scaffold/svelte-app/src/lib/rizzo/index.ts +0 -35
- package/scaffold/svelte-app/src/lib/rizzo-docs/CodeBlock.svelte +0 -239
- package/scaffold/svelte-app/src/lib/rizzo-docs/SvelteDocPage.svelte +0 -99
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/AccordionDoc.svelte +0 -53
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/AlertDoc.svelte +0 -114
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/AvatarDoc.svelte +0 -92
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/BadgeDoc.svelte +0 -60
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/BreadcrumbDoc.svelte +0 -55
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ButtonDoc.svelte +0 -55
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/CardsDoc.svelte +0 -173
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ComingSoon.svelte +0 -12
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ComponentsOverview.svelte +0 -92
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/CopyToClipboardDoc.svelte +0 -26
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/DividerDoc.svelte +0 -105
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/DropdownDoc.svelte +0 -161
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/FormsDoc.svelte +0 -375
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/IconsDoc.svelte +0 -246
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/Index.svelte +0 -8
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ModalDoc.svelte +0 -50
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/NavbarDoc.svelte +0 -79
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/PaginationDoc.svelte +0 -44
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ProgressBarDoc.svelte +0 -95
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/SearchDoc.svelte +0 -147
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/SettingsDoc.svelte +0 -158
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/SpinnerDoc.svelte +0 -41
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/TableDoc.svelte +0 -116
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/TabsDoc.svelte +0 -152
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ThemeSwitcherDoc.svelte +0 -189
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/Theming.svelte +0 -6
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ToastDoc.svelte +0 -136
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/TooltipDoc.svelte +0 -57
- package/scaffold/svelte-app/src/routes/+layout.svelte +0 -10
- package/scaffold/svelte-app/src/routes/+page.svelte +0 -31
- package/scaffold/svelte-app/src/routes/components/+page.svelte +0 -4
- package/scaffold/svelte-app/src/routes/components/[slug]/+page.svelte +0 -7
- package/scaffold/svelte-app/static/robots.txt +0 -3
- package/scaffold/svelte-app/svelte.config.js +0 -13
- package/scaffold/svelte-app/tsconfig.json +0 -21
- package/scaffold/svelte-app/vite.config.ts +0 -6
- /package/scaffold/{astro-app → astro-minimal}/astro.config.mjs +0 -0
- /package/scaffold/{astro-app → astro-minimal}/public/.gitkeep +0 -0
- /package/scaffold/{astro-app → astro-minimal}/public/favicon.svg +0 -0
- /package/scaffold/{astro-app → astro-minimal}/tsconfig.json +0 -0
- /package/scaffold/{svelte-app → svelte-minimal}/static/.gitkeep +0 -0
package/dist/rizzo.min.css
CHANGED
|
@@ -150,7 +150,10 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
150
150
|
.accordion__panel-content :global(ol:first-child),.accordion__panel-content :global(p:first-child),
|
|
151
151
|
.accordion__panel-content :global(ul:first-child){margin-top:0}
|
|
152
152
|
.accordion__panel-content :global(ol:last-child),.accordion__panel-content :global(p:last-child),
|
|
153
|
-
.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);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: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);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)}.tabs__tab--active:hover{border-bottom-color:var(--accent)}.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);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}.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{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:var(--spacing-6);grid-template-columns:1fr 1fr;margin:0 auto;max-width:var(--spacing-150);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);display:flex;flex-direction:column;justify-content:center;min-height:var(--spacing-24);padding:var(--spacing-6)}.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__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.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)}.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 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);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)}
|
|
153
|
+
.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);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: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);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)}.tabs__tab--active:hover{border-bottom-color:var(--accent)}.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);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}.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{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}
|
|
154
|
+
.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)}
|
|
155
|
+
.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,
|
|
156
|
+
.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__grid{display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fit,minmax(var(--spacing-75),1fr));margin-bottom:var(--spacing-16)}.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)}.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 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);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)}
|
|
154
157
|
.home__docs-grid,.home__grid,.home__install-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)}.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);text-decoration:none;transition:color var(--transition-base)}.theme-by a:hover{color:var(--accent-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:0 var(--spacing-3);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) l c h/10%);color:var(--accent);font-weight:var(--font-weight-medium)}.docs-sidebar__link--active:hover{background-color:oklch(from var(--accent) l c h/14%);color:var(--accent-hover)}.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,
|
|
155
158
|
.docs-sidebar,
|
|
156
159
|
.docs__sidebar-overlay,
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rizzo-css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.18",
|
|
4
4
|
"scripts": {
|
|
5
|
-
"prepublishOnly": "cd ../.. && pnpm run lint:css:fix && pnpm run build:css && node scripts/copy-scaffold.js && node scripts/prepare-
|
|
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
|
},
|
|
7
|
-
"description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM).
|
|
7
|
+
"description": "A modern CSS design system with semantic theming, 14 themes, and accessible components (BEM). Optimized for Vanilla JS, Astro, and Svelte; same CSS and component styles for all.",
|
|
8
8
|
"style": "dist/rizzo.min.css",
|
|
9
9
|
"main": "dist/rizzo.min.css",
|
|
10
10
|
"unpkg": "dist/rizzo.min.css",
|
|
@@ -25,7 +25,11 @@
|
|
|
25
25
|
"LICENSE",
|
|
26
26
|
".env.example",
|
|
27
27
|
"bin",
|
|
28
|
-
"scaffold"
|
|
28
|
+
"scaffold/astro",
|
|
29
|
+
"scaffold/svelte",
|
|
30
|
+
"scaffold/vanilla",
|
|
31
|
+
"scaffold/astro-minimal",
|
|
32
|
+
"scaffold/svelte-minimal"
|
|
29
33
|
],
|
|
30
34
|
"keywords": [
|
|
31
35
|
"css",
|
|
@@ -33,6 +37,7 @@
|
|
|
33
37
|
"theming",
|
|
34
38
|
"bem",
|
|
35
39
|
"accessibility",
|
|
40
|
+
"vanilla",
|
|
36
41
|
"astro",
|
|
37
42
|
"svelte"
|
|
38
43
|
],
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# Astro + Rizzo CSS (minimal)
|
|
2
|
+
|
|
3
|
+
Minimal Astro project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework astro --template minimal`.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
1. Copy environment example (optional):
|
|
8
|
+
```bash
|
|
9
|
+
cp .env.example .env
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
2. Install dependencies:
|
|
13
|
+
```bash
|
|
14
|
+
pnpm install
|
|
15
|
+
# or: npm install
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
3. Start the dev server:
|
|
19
|
+
```bash
|
|
20
|
+
pnpm dev
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Project structure
|
|
24
|
+
|
|
25
|
+
- `astro.config.mjs` — Astro configuration
|
|
26
|
+
- `src/layouts/Layout.astro` — Layout with Rizzo CSS and theme (edit `data-theme` for default)
|
|
27
|
+
- `src/pages/index.astro` — Home page
|
|
28
|
+
- `public/css/rizzo.min.css` — Rizzo CSS bundle
|
|
29
|
+
|
|
30
|
+
## Commands
|
|
31
|
+
|
|
32
|
+
- `pnpm dev` — Start dev server
|
|
33
|
+
- `pnpm build` — Build for production
|
|
34
|
+
- `pnpm preview` — Preview production build
|
|
35
|
+
|
|
36
|
+
Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
/* Placeholders replaced by rizzo-css CLI when scaffolding */
|
|
3
|
+
const DATA_THEME = '{{DATA_THEME}}';
|
|
4
|
+
const THEME_LIST_COMMENT = '{{THEME_LIST_COMMENT}}';
|
|
5
|
+
interface Props {
|
|
6
|
+
title?: string;
|
|
7
|
+
}
|
|
8
|
+
const { title = '{{TITLE}}' } = Astro.props;
|
|
9
|
+
---
|
|
10
|
+
<!doctype html>
|
|
11
|
+
<html lang="en" data-theme={DATA_THEME}>{THEME_LIST_COMMENT}
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="UTF-8" />
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
15
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
16
|
+
<script is:inline>
|
|
17
|
+
(function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
|
|
18
|
+
</script>
|
|
19
|
+
<link rel="stylesheet" href="/css/rizzo.min.css" />
|
|
20
|
+
<title>{title}</title>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
24
|
+
<main id="main-content">
|
|
25
|
+
<slot />
|
|
26
|
+
</main>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
---
|
|
2
|
+
import Layout from '../layouts/Layout.astro';
|
|
3
|
+
const TITLE = '{{TITLE}}';
|
|
4
|
+
---
|
|
5
|
+
<Layout title={TITLE}>
|
|
6
|
+
<div class="layout__container" style="padding: var(--spacing-12) var(--spacing-4); min-height: 100vh;">
|
|
7
|
+
<h1>Hello, Rizzo CSS</h1>
|
|
8
|
+
<p>Edit <code>src/pages/index.astro</code> and add your content. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
|
|
9
|
+
</div>
|
|
10
|
+
</Layout>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# SvelteKit + Rizzo CSS (minimal)
|
|
2
|
+
|
|
3
|
+
Minimal SvelteKit project with Rizzo CSS. Scaffolded with `npx rizzo-css init --framework svelte --template minimal`.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
1. Copy environment example (optional):
|
|
8
|
+
```bash
|
|
9
|
+
cp .env.example .env
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
2. Install dependencies:
|
|
13
|
+
```bash
|
|
14
|
+
pnpm install
|
|
15
|
+
# or: npm install
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
3. Start the dev server:
|
|
19
|
+
```bash
|
|
20
|
+
pnpm dev
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Project structure
|
|
24
|
+
|
|
25
|
+
- `svelte.config.js` — SvelteKit configuration
|
|
26
|
+
- `src/app.html` — HTML shell with Rizzo CSS and theme (edit `data-theme` for default)
|
|
27
|
+
- `src/routes/+layout.svelte` — Root layout
|
|
28
|
+
- `src/routes/+page.svelte` — Home page
|
|
29
|
+
- `static/css/rizzo.min.css` — Rizzo CSS bundle (copied by CLI)
|
|
30
|
+
|
|
31
|
+
## Commands
|
|
32
|
+
|
|
33
|
+
- `pnpm dev` — Start dev server
|
|
34
|
+
- `pnpm build` — Build for production
|
|
35
|
+
- `pnpm preview` — Preview production build
|
|
36
|
+
|
|
37
|
+
Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{PROJECT_NAME}}",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite dev",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"preview": "vite preview",
|
|
9
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
|
|
10
|
+
},
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"@sveltejs/adapter-auto": "^7.0.0",
|
|
13
|
+
"@sveltejs/kit": "^2.50.2",
|
|
14
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
15
|
+
"svelte": "^5.49.2",
|
|
16
|
+
"svelte-check": "^4.3.6",
|
|
17
|
+
"typescript": "^5.9.3",
|
|
18
|
+
"vite": "^7.3.1"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<script>
|
|
7
|
+
(function(){try{var s=localStorage.getItem('theme');var d='{{DEFAULT_DARK}}';var l='{{DEFAULT_LIGHT}}';var initial=document.documentElement.getAttribute('data-theme');var r=!s?((initial&&initial!=='system')?initial:(matchMedia('(prefers-color-scheme: dark)').matches?d:l)):s==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?d:l):s;document.documentElement.setAttribute('data-theme',r);}catch(e){}})();
|
|
8
|
+
</script>
|
|
9
|
+
<link rel="stylesheet" href="/css/rizzo.min.css" />
|
|
10
|
+
%sveltekit.head%
|
|
11
|
+
</head>
|
|
12
|
+
<body data-sveltekit-preload-data="hover">
|
|
13
|
+
<div style="display: contents">%sveltekit.body%</div>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<slot />
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
2
|
+
<main id="main-content" class="layout__container" style="padding: var(--spacing-12) var(--spacing-4); min-height: 100vh;">
|
|
3
|
+
<h1>Hello, Rizzo CSS</h1>
|
|
4
|
+
<p>Edit <code>src/routes/+page.svelte</code> and add your content. Docs: <a href="https://rizzo-css.vercel.app">rizzo-css.vercel.app</a></p>
|
|
5
|
+
</main>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Vanilla JS + Rizzo CSS
|
|
2
2
|
|
|
3
|
-
This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS
|
|
3
|
+
This project was scaffolded with `npx rizzo-css init` when you chose **Create new project** and Vanilla JS, then picked a **template** (full or minimal). **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).
|
|
4
4
|
|
|
5
5
|
## First-time setup
|
|
6
6
|
|
|
@@ -13,7 +13,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
|
|
|
13
13
|
- `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`
|
|
14
14
|
- Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`
|
|
15
15
|
|
|
16
|
-
(Replace `@latest` with a specific version, e.g. `@0.0.
|
|
16
|
+
(Replace `@latest` with a specific version, e.g. `@0.0.18`, in production.)
|
|
17
17
|
|
|
18
18
|
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.
|
|
19
19
|
|
|
@@ -48,7 +48,7 @@ pnpm dlx serve .
|
|
|
48
48
|
|
|
49
49
|
## Other scaffolds
|
|
50
50
|
|
|
51
|
-
- **Astro:** `scaffold/astro-
|
|
52
|
-
- **Svelte:** `scaffold/svelte-
|
|
51
|
+
- **Astro:** `scaffold/astro-minimal/` — minimal Astro app; optional components from `scaffold/astro/` (see its README).
|
|
52
|
+
- **Svelte:** `scaffold/svelte-minimal/` — minimal SvelteKit app; optional components from `scaffold/svelte/` (see its README).
|
|
53
53
|
|
|
54
54
|
Docs: [rizzo-css.vercel.app](https://rizzo-css.vercel.app)
|