rizzo-css 0.0.34 → 0.0.35
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/dist/rizzo.min.css +2 -2
- package/package.json +1 -1
- package/scaffold/astro/Modal.astro +6 -0
- package/scaffold/astro/ProgressBar.astro +1 -1
- package/scaffold/astro-minimal/src/pages/index.astro +42 -3
- package/scaffold/svelte/Modal.svelte +7 -0
- package/scaffold/svelte/ProgressBar.svelte +1 -1
- package/scaffold/svelte/ThemeSwitcher.svelte +8 -2
- package/scaffold/svelte-minimal/src/routes/+page.svelte +45 -3
- package/scaffold/vanilla/README-RIZZO.md +2 -2
- package/scaffold/vanilla/components/accordion.html +12 -0
- package/scaffold/vanilla/components/alert.html +12 -0
- package/scaffold/vanilla/components/avatar.html +12 -0
- package/scaffold/vanilla/components/badge.html +12 -0
- package/scaffold/vanilla/components/breadcrumb.html +12 -0
- package/scaffold/vanilla/components/button.html +12 -0
- package/scaffold/vanilla/components/cards.html +12 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +12 -0
- package/scaffold/vanilla/components/divider.html +12 -0
- package/scaffold/vanilla/components/dropdown.html +12 -0
- package/scaffold/vanilla/components/forms.html +12 -0
- package/scaffold/vanilla/components/icons.html +12 -0
- package/scaffold/vanilla/components/index.html +12 -0
- package/scaffold/vanilla/components/modal.html +12 -0
- package/scaffold/vanilla/components/navbar.html +12 -0
- package/scaffold/vanilla/components/pagination.html +12 -0
- package/scaffold/vanilla/components/progress-bar.html +12 -0
- package/scaffold/vanilla/components/search.html +12 -0
- package/scaffold/vanilla/components/settings.html +12 -0
- package/scaffold/vanilla/components/spinner.html +12 -0
- package/scaffold/vanilla/components/table.html +12 -0
- package/scaffold/vanilla/components/tabs.html +12 -0
- package/scaffold/vanilla/components/theme-switcher.html +12 -0
- package/scaffold/vanilla/components/toast.html +12 -0
- package/scaffold/vanilla/components/tooltip.html +12 -0
- package/scaffold/vanilla/index.html +51 -16
package/README.md
CHANGED
|
@@ -61,7 +61,7 @@ import 'rizzo-css';
|
|
|
61
61
|
**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:
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
|
-
<!-- unpkg (pin version: replace @latest with @0.0.
|
|
64
|
+
<!-- unpkg (pin version: replace @latest with @0.0.35 or any version) -->
|
|
65
65
|
<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
|
|
66
66
|
|
|
67
67
|
<!-- or jsDelivr -->
|
package/dist/rizzo.min.css
CHANGED
|
@@ -104,10 +104,10 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
104
104
|
.navbar__item--has-dropdown:hover .navbar__submenu,.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{opacity:1;transform:translateY(0);visibility:visible}.navbar__sublink{color:var(--text);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);padding:var(--spacing-0-625) var(--spacing-4);text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base)}.navbar__sublink:hover,.navbar__sublink[aria-current="page"]{background-color:var(--background);color:var(--accent)}.navbar__sublink[aria-current="page"]{font-weight:var(--font-weight-medium)}.navbar__sublink:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:calc(var(--outline-offset)*-1)}.navbar__link:hover{color:var(--accent)}.navbar__link:focus-visible{border-radius:var(--radius);outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__link::after{background-color:var(--accent);bottom:0;content:"";height:var(--spacing-0-125);left:0;position:absolute;transition:width var(--transition-slow);width:0}
|
|
105
105
|
.navbar__link:focus-visible::after,.navbar__link:hover::after,
|
|
106
106
|
.navbar__link[aria-current="page"]::after{width:100%}.navbar__link[aria-current="page"]{color:var(--accent)}.navbar__actions,.navbar__actions .search{display:none}.navbar__settings-btn{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__settings-btn:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.navbar__settings-btn:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.navbar__settings-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.navbar__settings-label{font-size:var(--font-size-sm)}@media (width <= 1023px){.navbar{overflow-x:clip}.navbar__container{gap:var(--spacing-2);min-width:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.navbar__brand{flex-shrink:1;min-width:0;order:0;overflow:hidden}.navbar__brand-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__toggle{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);display:flex;margin-left:var(--spacing-2);margin-right:0;min-height:var(--touch-target-min);min-width:var(--touch-target-min);order:1;padding:var(--spacing-2) var(--spacing-3);transition:background-color var(--transition-base),border-color var(--transition-base)}.navbar__toggle:hover{background-color:var(--background);border-color:var(--accent)}.navbar__toggle-icon{height:var(--spacing-5)!important;width:var(--spacing-5)!important}.navbar__toggle-icon span{border-radius:var(--radius-sm);height:calc(var(--spacing-0-125)*1.5)!important}.navbar__menu{align-items:stretch;background-color:var(--background-alt);border-top:none;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;gap:var(--spacing-0);left:0;margin:0;max-height:0;max-width:100%;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;right:0;top:100%;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;z-index:var(--z-navbar-mobile-menu)}.navbar__menu--open{border-bottom:none!important;left:0;max-height:var(--vh-80);opacity:1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-4) 0;pointer-events:auto;position:fixed;right:0;scroll-behavior:auto;top:var(--spacing-16);transform:translateZ(0);transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-in),padding var(--transition-slowest) var(--ease-in-out-cubic);width:100%;will-change:scroll-position;z-index:var(--z-navbar-mobile-menu-open)}.navbar__menu .navbar__item{contain:layout;margin:0;max-width:100%;padding:0;width:100%}.navbar__menu:not(.navbar__menu--open){padding:0;transition:max-height var(--transition-slowest) var(--ease-in-out-cubic),opacity var(--transition-ease-out),padding var(--transition-slowest) var(--ease-in-out-cubic)}.navbar__menu--open .navbar__item:last-of-type .navbar__link{border-bottom:none!important}.navbar__item{width:100%}.navbar__link{align-items:center;border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:flex;justify-content:space-between;margin:0;max-width:100%;min-height:var(--touch-target-min);min-width:0;overflow-wrap:break-word;padding:var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);transition:background-color var(--transition-base) ease,color var(--transition-base) ease;width:100%}.navbar__link .navbar__dropdown-icon{display:block!important;flex-shrink:0!important;height:var(--spacing-3)!important;margin-left:var(--spacing-2);margin-right:var(--spacing-4);opacity:1!important;transition:transform var(--transition-base) ease-out;visibility:visible!important;width:var(--spacing-3)!important}.navbar__submenu{background-color:var(--background);border:none;border-top:var(--border-width) solid var(--border);box-shadow:none;contain:layout;grid-template-columns:none!important;list-style:none;margin:0!important;max-height:0;max-width:100%!important;opacity:1;overflow:hidden;padding:0!important;position:static;transform:none;transition:max-height .25s cubic-bezier(.4,0,.2,1);visibility:visible;width:100%!important}.navbar__submenu,.navbar__submenu--components .navbar__submenu-components-grid{display:block!important}.navbar__submenu--components .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--components .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu{max-height:var(--max-height-navbar-submenu);overflow:visible;padding:0!important}@media (prefers-reduced-motion:reduce){.navbar__menu,.navbar__menu--open,.navbar__submenu{transition:none}}.navbar__submenu li{padding:0!important}.navbar__sublink,.navbar__submenu li{display:block!important;margin:0!important;max-width:100%!important;width:100%!important}.navbar__sublink{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box!important;min-height:var(--touch-target-min)!important;min-width:0!important;overflow-wrap:break-word!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__sublink:last-child{border-bottom:none}.navbar__submenu--themes .navbar__submenu-themes-grid{display:block!important}.navbar__submenu--themes .navbar__submenu-column{display:block!important;margin-top:var(--spacing-2);width:100%!important}.navbar__submenu--themes .navbar__submenu-column-label{border-bottom:var(--border-width) solid var(--border);box-sizing:border-box;display:block;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-0-625);margin-top:var(--spacing-2);padding-bottom:var(--spacing-0-625);padding-left:var(--spacing-10);padding-right:var(--spacing-5);width:100%}.navbar__submenu--themes .navbar__submenu-column:first-of-type .navbar__submenu-column-label{margin-top:0}.navbar__submenu--themes .navbar__submenu-column .navbar__sublink{border-bottom:var(--border-width) solid var(--border);min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__submenu--themes .navbar__sublink--with-icon{align-items:center;display:flex!important;gap:var(--spacing-2)}.navbar__submenu--themes .navbar__sublink-icon{color:var(--text-dim);flex-shrink:0}.navbar__submenu--themes .navbar__sublink-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.navbar__submenu--docs .navbar__submenu-group{border-top:none;margin-top:0;padding-top:0}.navbar__submenu--docs .navbar__submenu-group:not(:first-child){border-top:var(--border-width) solid var(--border);margin-top:var(--spacing-2);padding-top:var(--spacing-2)}.navbar__submenu--docs .navbar__submenu-group-label{border-bottom:var(--border-width) solid var(--border);padding:var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-10)}.navbar__submenu--docs .navbar__submenu-list .navbar__sublink{min-height:var(--touch-target-min)!important;padding:var(--spacing-3) var(--spacing-5) var(--spacing-3) var(--spacing-10)!important}.navbar__item--has-dropdown[aria-expanded="true"] .navbar__submenu--docs{max-height:min(70vh,420px)!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch}.navbar__submenu--docs .navbar__sublink[aria-current="page"]{background-color:oklch(from var(--accent) l c h/12%)!important;box-shadow:inset var(--spacing-0-125) 0 0 var(--accent)!important;color:var(--accent)!important;font-weight:var(--font-weight-medium)}.navbar__item:last-of-type .navbar__link{border-bottom:var(--border-width) solid var(--border)}.navbar__actions-desktop .navbar__settings-btn{align-items:center;display:flex;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}.navbar__actions-desktop .navbar__settings-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop .search__trigger{justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-2) var(--spacing-3);width:auto}
|
|
107
|
-
.navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:1;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;overflow-wrap:break-word;padding:0}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0 0 var(--spacing-2) 0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}@media (width >= 481px){.theme-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text
|
|
107
|
+
.navbar__actions-desktop .search__kbd,.navbar__actions-desktop .search__trigger-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navbar__actions-desktop{display:flex;flex-shrink:0;gap:var(--spacing-2);margin-left:auto;margin-right:0;min-width:0;order:2}.search__panel{z-index:var(--z-navbar-mobile-search-panel)}.search__overlay{z-index:var(--z-navbar-mobile-search-overlay)}}.theme-switcher{display:inline-block;position:relative;width:var(--theme-switcher-width)}.theme-switcher__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);justify-content:space-between;min-width:0;padding:var(--spacing-3) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base);width:100%}.theme-switcher__label-wrapper{align-items:center;display:flex;gap:var(--spacing-2)}.theme-switcher__label-icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-5);justify-content:center;width:var(--spacing-5)}.theme-switcher__label-icon svg{height:100%;width:100%}.theme-switcher__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--text)}.theme-switcher__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.theme-switcher__trigger[aria-expanded="true"] .theme-switcher__icon{transform:rotate(180deg)}.theme-switcher__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.theme-switcher__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:row;gap:0;left:0;max-height:var(--spacing-100);min-width:var(--theme-switcher-width);opacity:0;overflow-y:auto;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:var(--theme-switcher-width);z-index:var(--z-dropdown)}.theme-switcher__menu--open{opacity:1;transform:translateY(0);visibility:visible}.theme-switcher__menu-options{flex:1 1 auto;min-width:0;overflow-y:auto}.theme-switcher__preview{background-color:var(--background);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--spacing-2);justify-content:flex-start;min-width:var(--spacing-32);opacity:1;padding:var(--spacing-4);pointer-events:none;transition:opacity var(--transition-fast);width:var(--spacing-32)}.theme-switcher__preview-title{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1.2;margin:0 0 var(--spacing-1) 0;overflow-wrap:break-word;padding:0}.theme-switcher__preview-header{color:var(--preview-accent,var(--text-dim));font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:1.2;margin:0 0 var(--spacing-2) 0;min-height:1.25em;overflow-wrap:break-word;padding:0;text-transform:uppercase}.theme-switcher__preview-swatch-wrap{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px oklch(0 0 0deg/6%);padding:var(--spacing-1)}.theme-switcher__preview-swatch{background-color:var(--background);border-radius:var(--radius);height:var(--spacing-10);min-height:var(--spacing-10);transition:background-color var(--transition-fast);width:100%}.theme-switcher__preview-accent{background-color:var(--preview-accent,var(--accent));border-radius:var(--radius-full);flex-shrink:0;height:var(--spacing-2);transition:background-color var(--transition-fast);width:100%}@media (width <= 480px){.theme-switcher__preview{display:none}}@media (width >= 481px){.theme-switcher__menu-options{border-right:var(--border-width) solid var(--border)}}.framework-switcher{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-3) 0}.framework-switcher__label{color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.framework-switcher__segmented{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:inset 0 1px 2px oklch(from var(--shadow-color) l c h/8%);display:inline-flex;padding:var(--spacing-0-5)}.framework-switcher__segment{align-items:center;border-radius:var(--radius-md);color:var(--text-dim);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;min-width:var(--spacing-20);padding:var(--spacing-2) var(--spacing-4);text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.framework-switcher__icon{display:block;flex-shrink:0}.framework-switcher__segment--current .framework-switcher__icon{opacity:.95}.framework-switcher__segment--first{border-radius:var(--radius-md) 0 0 var(--radius-md)}.framework-switcher__segment--last{border-radius:0 var(--radius-md) var(--radius-md) 0}.framework-switcher__segment:only-child{border-radius:var(--radius-md)}.framework-switcher__segment:hover:not(.framework-switcher__segment--current){background-color:oklch(from var(--text) l c h/10%);color:var(--text)}.framework-switcher__segment--current{background-color:var(--accent);box-shadow:var(--shadow-sm);color:var(--accent-text)}.framework-switcher__segment--current:hover{background-color:var(--accent-hover);color:var(--accent-text)}.theme-switcher__group{padding:var(--spacing-3) 0}.theme-switcher__group-label{border-bottom:var(--border-width) solid var(--border);color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--spacing-1);padding:var(--spacing-2) var(--spacing-4);text-transform:uppercase}.theme-switcher__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font:inherit;font-family:var(--font-family);font-size:var(--font-size-base);gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-4);position:relative;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
|
|
108
108
|
.theme-switcher__option:focus-visible,.theme-switcher__option:hover{background-color:var(--background);color:var(--text);outline:none}.theme-switcher__option:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.theme-switcher__option-icon{color:var(--icon);flex-shrink:0;height:var(--spacing-5);width:var(--spacing-5)}.theme-switcher__option--active,
|
|
109
109
|
.theme-switcher__option--active:focus-visible,
|
|
110
|
-
.theme-switcher__option--active:hover{background-color:var(--theme-bg,var(--background));border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theme-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.theme-switcher,.theme-switcher__menu{max-width:100%;width:100%}.theme-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}@media (width <= 640px){.theme-switcher__menu{left:0;right:auto}}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out)}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-width:var(--spacing-105);overflow-y:auto;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-6)}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
|
|
110
|
+
.theme-switcher__option--active:hover{background-color:var(--theme-bg,var(--background));border-left:var(--border-width-accent) solid var(--accent);border-radius:var(--radius);color:var(--text);font-weight:var(--font-weight-medium);padding-left:calc(var(--spacing-4) - var(--border-width-accent))}.theme-switcher__option--active:focus-visible{box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}@media (width <= 768px){.theme-switcher,.theme-switcher__menu{max-width:100%;width:100%}.theme-switcher__menu{box-sizing:border-box;left:0;min-width:0;right:auto}}@media (width <= 640px){.theme-switcher__menu{left:0;right:auto}}.settings{inset:0;pointer-events:none;position:fixed;z-index:var(--z-settings)}.settings[aria-hidden="true"]{display:none}.settings__overlay{backdrop-filter:blur(var(--blur-sm));background-color:var(--overlay);inset:0;opacity:0;pointer-events:all;position:absolute;transition:opacity var(--transition-ease-out)}.settings[aria-hidden="false"] .settings__overlay[aria-hidden="false"],.settings__overlay[aria-hidden="false"]{opacity:1}.settings__panel{background-color:var(--background-alt);border-left:var(--border-width) solid var(--border);box-shadow:calc(var(--spacing-1)*-1) 0 var(--spacing-3) calc(var(--spacing-0-125)*-1) oklch(from var(--shadow-color) l c h/15%);display:flex;flex-direction:column;height:100%;max-width:var(--spacing-105);overflow-y:auto;pointer-events:all;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform var(--transition-ease-out);width:100%}.settings__panel[data-open="true"]{transform:translateX(0)}.settings[aria-hidden="false"] .settings__panel:not([data-open]){transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.settings__overlay,.settings__panel{transition:none}}.settings__header{align-items:center;background-color:var(--background-alt);border-bottom:var(--border-width) solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-6);position:sticky;top:0;z-index:var(--z-dropdown)}.settings__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.settings__close{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;height:var(--spacing-8);justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:0;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);width:var(--spacing-8)}.settings__close:hover{background-color:var(--background-alt);border-color:var(--accent);color:var(--accent)}.settings__close:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__content{background-color:var(--background);display:flex;flex:1;flex-direction:column;gap:var(--spacing-8);padding:var(--spacing-6)}.settings__section{display:flex;flex-direction:column;gap:var(--spacing-4)}.settings__section-title{color:var(--text);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4)}.settings__control{display:flex;flex-direction:column;gap:var(--spacing-3)}.settings__control .theme-switcher{max-width:100%;width:100%}.settings__control .theme-switcher__menu{box-sizing:border-box;max-width:100%;min-width:0;width:100%}.settings__label{align-items:center;color:var(--text);display:flex;font-weight:var(--font-weight-medium);justify-content:space-between;margin-bottom:var(--spacing-3)}.settings__label-text{font-size:var(--font-size-base)}.settings__label-value{color:var(--text-dim);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.settings__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:var(--spacing-2);outline:none;width:100%}.settings__slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-moz-range-track{background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--slider-progress,50%),var(--background-alt) var(--slider-progress,50%),var(--background-alt) 100%);border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);height:var(--spacing-2);width:100%}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);margin-top:calc(var(--spacing-2)*-1);-webkit-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-webkit-slider-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider::-moz-range-thumb{background-color:var(--accent);border:var(--outline-width) solid var(--background);border-radius:var(--radius-circle);box-shadow:0 0 0 var(--spacing-0-125) var(--border);cursor:pointer;height:var(--spacing-5);-moz-transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);transition:background-color var(--transition-base),transform var(--transition-base),border-color var(--transition-base);width:var(--spacing-5)}.settings__slider::-moz-range-thumb:hover{background-color:var(--accent-hover);transform:scale(1.1)}.settings__slider:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.settings__slider-labels{color:var(--text-dim);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--spacing-1)}.settings__checkbox-label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-3);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__checkbox-label:hover{color:var(--accent)}.settings__checkbox{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__radio-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.settings__radio-label{align-items:center;border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);gap:var(--spacing-2);padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base);-webkit-user-select:none;-moz-user-select:none;user-select:none}.settings__radio-label:hover{background-color:var(--background-alt);color:var(--accent)}.settings__radio{accent-color:var(--accent);cursor:pointer;height:var(--spacing-5);margin:0;width:var(--spacing-5)}.settings__help-text{color:var(--text-dim);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}@media (width <= 640px){.settings__panel{max-width:100%;width:100%}}.modal__overlay{backdrop-filter:blur(var(--blur-sm));background-color:oklch(from var(--shadow-color) l c h/60%);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--transition-slow) ease;z-index:var(--z-modal-backdrop)}.modal__overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal{background-color:var(--background);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;left:50%;max-height:var(--vh-90);max-width:var(--max-height-modal);opacity:0;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;width:100%;z-index:var(--z-modal)}.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal__header{align-items:center;border-bottom:var(--border-width) solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-6)}.modal__title{color:var(--text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal__close{align-items:center;background:none;border:none;border-radius:var(--radius);color:var(--text-dim);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:var(--spacing-2);transition:background-color var(--transition-base),color var(--transition-base)}.modal__close:hover{background-color:var(--background-alt);color:var(--text)}.modal__close:focus{box-shadow:0 0 0 3px oklch(from var(--accent) l c h/10%);outline:none}.modal__body{flex:1;min-height:0;overflow-y:auto;padding:var(--spacing-6)}.modal__footer{border-top:var(--border-width) solid var(--border);display:flex;flex-shrink:0;gap:var(--spacing-3);justify-content:flex-end;padding:var(--spacing-6)}.modal__footer:empty{display:none}.modal--sm{max-width:var(--spacing-96)}.modal--md{max-width:var(--max-height-modal)}.modal--lg{max-width:var(--max-width-modal-lg)}
|
|
111
111
|
.reduced-motion .modal,.reduced-motion .modal__overlay{transition:none}@media (width <= 640px){.modal{bottom:auto;left:auto;margin:var(--spacing-4);max-height:95vh;max-width:95vw;right:auto;top:auto}.modal,.modal[aria-hidden="false"]{transform:none}
|
|
112
112
|
.modal__body,
|
|
113
113
|
.modal__footer,.modal__header{padding:var(--spacing-4)}}.copy-to-clipboard{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--font-family-mono);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);position:relative;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.copy-to-clipboard:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.copy-to-clipboard:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.copy-to-clipboard__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-to-clipboard__icon{align-items:center;color:var(--icon);display:flex;flex-shrink:0;height:var(--spacing-4);justify-content:center;transition:opacity var(--transition-base),transform var(--transition-base);width:var(--spacing-4)}.copy-to-clipboard__icon--check{opacity:0;position:absolute;right:var(--spacing-3);transform:scale(var(--scale-80))}.copy-to-clipboard__icon--check:not(.copy-to-clipboard__icon--hidden){opacity:1;transform:scale(var(--scale-100))}.copy-to-clipboard__icon--copy.copy-to-clipboard__icon--hidden{opacity:0;transform:scale(var(--scale-80))}.copy-to-clipboard__feedback{border-width:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.alert{align-items:flex-start;background-color:var(--alert-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);color:var(--text);display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3);padding:var(--spacing-4) var(--spacing-5);position:relative;transition:opacity var(--transition-base),transform var(--transition-base)}.alert:last-child{margin-bottom:0}.alert__content{flex:1;min-width:0}.alert__close{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;fill:none;flex-shrink:0;height:var(--spacing-6);justify-content:center;margin:calc(var(--spacing-1)*-1) calc(var(--spacing-2)*-1) calc(var(--spacing-1)*-1) 0;opacity:var(--opacity-80);padding:0;stroke:currentcolor;transition:opacity var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);width:var(--spacing-6)}.alert__close:hover{background-color:oklch(from var(--background) l c h/25%);border-color:var(--border);color:var(--text);opacity:1}.alert__close:focus-visible{opacity:1;outline:var(--outline-width) solid currentcolor;outline-offset:var(--outline-offset)}.alert--success{background-color:var(--alert-success-bg);border-color:var(--success);color:var(--success-text)}.alert--error{background-color:var(--alert-error-bg);border-color:var(--error);color:var(--error-text)}.alert--warning{background-color:var(--alert-warning-bg);border-color:var(--warning)}.alert--warning,.alert--warning .alert__content,
|
package/package.json
CHANGED
|
@@ -30,6 +30,7 @@ const classes = `modal ${sizeClass} ${className}`.trim();
|
|
|
30
30
|
class="modal__overlay"
|
|
31
31
|
data-modal-overlay
|
|
32
32
|
aria-hidden={open ? 'false' : 'true'}
|
|
33
|
+
{...(!open && { inert: true })}
|
|
33
34
|
id={`${modalId}-overlay`}
|
|
34
35
|
></div>
|
|
35
36
|
|
|
@@ -39,6 +40,7 @@ const classes = `modal ${sizeClass} ${className}`.trim();
|
|
|
39
40
|
aria-modal="true"
|
|
40
41
|
aria-labelledby={`${modalId}-title`}
|
|
41
42
|
aria-hidden={open ? 'false' : 'true'}
|
|
43
|
+
{...(!open && { inert: true })}
|
|
42
44
|
id={modalId}
|
|
43
45
|
data-modal
|
|
44
46
|
>
|
|
@@ -132,6 +134,8 @@ const classes = `modal ${sizeClass} ${className}`.trim();
|
|
|
132
134
|
// Open modal
|
|
133
135
|
const openModal = () => {
|
|
134
136
|
previousActiveElement = document.activeElement;
|
|
137
|
+
modal.removeAttribute('inert');
|
|
138
|
+
overlay.removeAttribute('inert');
|
|
135
139
|
modal.setAttribute('aria-hidden', 'false');
|
|
136
140
|
overlay.setAttribute('aria-hidden', 'false');
|
|
137
141
|
modal.setAttribute('data-open', 'true');
|
|
@@ -185,6 +189,8 @@ const classes = `modal ${sizeClass} ${className}`.trim();
|
|
|
185
189
|
// Close modal
|
|
186
190
|
const closeModal = () => {
|
|
187
191
|
setFocusablesInert(modal);
|
|
192
|
+
modal.setAttribute('inert', '');
|
|
193
|
+
overlay.setAttribute('inert', '');
|
|
188
194
|
modal.setAttribute('aria-hidden', 'true');
|
|
189
195
|
overlay.setAttribute('aria-hidden', 'true');
|
|
190
196
|
modal.removeAttribute('data-open');
|
|
@@ -43,7 +43,7 @@ const ariaAttrs = indeterminate
|
|
|
43
43
|
'aria-valuenow': clampedValue,
|
|
44
44
|
'aria-valuemin': 0,
|
|
45
45
|
'aria-valuemax': safeMax,
|
|
46
|
-
'aria-label': label ??
|
|
46
|
+
'aria-label': label ?? 'Progress',
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
const barStyle = indeterminate ? {} : { width: `${percentage}%` };
|
|
@@ -1,10 +1,49 @@
|
|
|
1
1
|
---
|
|
2
2
|
import Layout from '../layouts/Layout.astro';
|
|
3
3
|
const TITLE = '{{TITLE}}';
|
|
4
|
+
const DOCS_BASE = 'https://rizzo-css.vercel.app';
|
|
4
5
|
---
|
|
5
6
|
<Layout title={TITLE}>
|
|
6
|
-
<div class="
|
|
7
|
-
<
|
|
8
|
-
|
|
7
|
+
<div class="home">
|
|
8
|
+
<div class="home__container">
|
|
9
|
+
<header class="home__hero">
|
|
10
|
+
<h1 class="home__title">Rizzo CSS</h1>
|
|
11
|
+
<p class="home__subtitle">A modern CSS design system built on Astro with semantic theming, accessibility-first components, and PostCSS optimization. Start here then make it your own.</p>
|
|
12
|
+
<div class="home__hero-ctas">
|
|
13
|
+
<a href={`${DOCS_BASE}/docs/getting-started`} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
|
|
14
|
+
<a href={`${DOCS_BASE}/docs/components`} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
|
|
15
|
+
</div>
|
|
16
|
+
</header>
|
|
17
|
+
|
|
18
|
+
<section class="home__docs">
|
|
19
|
+
<h2 class="home__section-title">Documentation</h2>
|
|
20
|
+
<div class="home__docs-grid">
|
|
21
|
+
<a href={`${DOCS_BASE}/docs/getting-started`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
22
|
+
<h3>Getting Started</h3>
|
|
23
|
+
<p>Installation, project structure, and quick start guide</p>
|
|
24
|
+
</a>
|
|
25
|
+
<a href={`${DOCS_BASE}/docs/components`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
26
|
+
<h3>Components</h3>
|
|
27
|
+
<p>Component library with usage examples and live demos</p>
|
|
28
|
+
</a>
|
|
29
|
+
<a href={`${DOCS_BASE}/docs/theming`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
30
|
+
<h3>Theming</h3>
|
|
31
|
+
<p>Theme system, custom themes, and color format guide</p>
|
|
32
|
+
</a>
|
|
33
|
+
<a href={`${DOCS_BASE}/docs/design-system`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
34
|
+
<h3>Design System</h3>
|
|
35
|
+
<p>Semantic variables, typography, and design principles</p>
|
|
36
|
+
</a>
|
|
37
|
+
<a href={`${DOCS_BASE}/docs/accessibility`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
38
|
+
<h3>Accessibility</h3>
|
|
39
|
+
<p>Accessibility guidelines, utilities, and best practices</p>
|
|
40
|
+
</a>
|
|
41
|
+
<a href={`${DOCS_BASE}/docs/colors`} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
42
|
+
<h3>Colors</h3>
|
|
43
|
+
<p>Interactive color reference with multiple format options</p>
|
|
44
|
+
</a>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
|
+
</div>
|
|
9
48
|
</div>
|
|
10
49
|
</Layout>
|
|
@@ -113,6 +113,11 @@
|
|
|
113
113
|
}
|
|
114
114
|
});
|
|
115
115
|
|
|
116
|
+
$effect(() => {
|
|
117
|
+
if (overlayEl) overlayEl.inert = !open;
|
|
118
|
+
if (modalEl) modalEl.inert = !open;
|
|
119
|
+
});
|
|
120
|
+
|
|
116
121
|
function handleOverlayClick(e: MouseEvent) {
|
|
117
122
|
if (closeOnOverlayClick && e.target === overlayEl) close();
|
|
118
123
|
}
|
|
@@ -123,6 +128,7 @@
|
|
|
123
128
|
class="modal__overlay"
|
|
124
129
|
data-modal-overlay
|
|
125
130
|
aria-hidden={!open}
|
|
131
|
+
inert={!open ? true : undefined}
|
|
126
132
|
id="{modalId}-overlay"
|
|
127
133
|
onclick={handleOverlayClick}
|
|
128
134
|
role="presentation"
|
|
@@ -135,6 +141,7 @@
|
|
|
135
141
|
aria-modal="true"
|
|
136
142
|
aria-labelledby="{modalId}-title"
|
|
137
143
|
aria-hidden={!open}
|
|
144
|
+
inert={!open ? true : undefined}
|
|
138
145
|
id={modalId}
|
|
139
146
|
data-modal
|
|
140
147
|
data-open={open || undefined}
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
role="progressbar"
|
|
46
46
|
aria-valuemin={0}
|
|
47
47
|
aria-valuemax={safeMax}
|
|
48
|
-
aria-label={label ?? (indeterminate ? 'Loading' :
|
|
48
|
+
aria-label={label ?? (indeterminate ? 'Loading' : 'Progress')}
|
|
49
49
|
aria-valuetext={indeterminate ? 'Loading' : undefined}
|
|
50
50
|
aria-valuenow={indeterminate ? undefined : clampedValue}
|
|
51
51
|
>
|
|
@@ -10,6 +10,12 @@
|
|
|
10
10
|
THEME_SYSTEM,
|
|
11
11
|
} from './theme';
|
|
12
12
|
|
|
13
|
+
interface Props {
|
|
14
|
+
/** Optional prefix for trigger/menu IDs to avoid duplicates when multiple ThemeSwitchers exist (e.g. idPrefix="doc" → theme-switcher-doc-trigger, theme-switcher-doc-menu). */
|
|
15
|
+
idPrefix?: string;
|
|
16
|
+
}
|
|
17
|
+
let { idPrefix = '' }: Props = $props();
|
|
18
|
+
|
|
13
19
|
const DEFAULT_THEME_DARK = 'github-dark-classic';
|
|
14
20
|
const DEFAULT_THEME_LIGHT = 'github-light';
|
|
15
21
|
|
|
@@ -53,8 +59,8 @@
|
|
|
53
59
|
let menuEl: HTMLElement | null = $state(null);
|
|
54
60
|
let triggerEl: HTMLElement | null = $state(null);
|
|
55
61
|
|
|
56
|
-
const menuId = 'theme-switcher-menu';
|
|
57
|
-
const triggerId = 'theme-switcher-trigger';
|
|
62
|
+
const menuId = idPrefix ? `theme-switcher-${idPrefix}-menu` : 'theme-switcher-menu';
|
|
63
|
+
const triggerId = idPrefix ? `theme-switcher-${idPrefix}-trigger` : 'theme-switcher-trigger';
|
|
58
64
|
|
|
59
65
|
function getStored(): string {
|
|
60
66
|
if (typeof localStorage === 'undefined') return DEFAULT_THEME_DARK;
|
|
@@ -1,5 +1,47 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const DOCS_BASE = 'https://rizzo-css.vercel.app';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
1
5
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
2
|
-
<main id="main-content" class="
|
|
3
|
-
<
|
|
4
|
-
|
|
6
|
+
<main id="main-content" class="home">
|
|
7
|
+
<div class="home__container">
|
|
8
|
+
<header class="home__hero">
|
|
9
|
+
<h1 class="home__title">Rizzo CSS</h1>
|
|
10
|
+
<p class="home__subtitle">A modern CSS design system built on Astro with semantic theming, accessibility-first components, and PostCSS optimization. Start here then make it your own.</p>
|
|
11
|
+
<div class="home__hero-ctas">
|
|
12
|
+
<a href={DOCS_BASE + '/docs/getting-started'} class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
|
|
13
|
+
<a href={DOCS_BASE + '/docs/components'} class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
|
|
14
|
+
</div>
|
|
15
|
+
</header>
|
|
16
|
+
|
|
17
|
+
<section class="home__docs">
|
|
18
|
+
<h2 class="home__section-title">Documentation</h2>
|
|
19
|
+
<div class="home__docs-grid">
|
|
20
|
+
<a href={DOCS_BASE + '/docs/getting-started'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
21
|
+
<h3>Getting Started</h3>
|
|
22
|
+
<p>Installation, project structure, and quick start guide</p>
|
|
23
|
+
</a>
|
|
24
|
+
<a href={DOCS_BASE + '/docs/components'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
25
|
+
<h3>Components</h3>
|
|
26
|
+
<p>Component library with usage examples and live demos</p>
|
|
27
|
+
</a>
|
|
28
|
+
<a href={DOCS_BASE + '/docs/theming'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
29
|
+
<h3>Theming</h3>
|
|
30
|
+
<p>Theme system, custom themes, and color format guide</p>
|
|
31
|
+
</a>
|
|
32
|
+
<a href={DOCS_BASE + '/docs/design-system'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
33
|
+
<h3>Design System</h3>
|
|
34
|
+
<p>Semantic variables, typography, and design principles</p>
|
|
35
|
+
</a>
|
|
36
|
+
<a href={DOCS_BASE + '/docs/accessibility'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
37
|
+
<h3>Accessibility</h3>
|
|
38
|
+
<p>Accessibility guidelines, utilities, and best practices</p>
|
|
39
|
+
</a>
|
|
40
|
+
<a href={DOCS_BASE + '/docs/colors'} class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
41
|
+
<h3>Colors</h3>
|
|
42
|
+
<p>Interactive color reference with multiple format options</p>
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
</section>
|
|
46
|
+
</div>
|
|
5
47
|
</main>
|
|
@@ -13,13 +13,13 @@ 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.35`, 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
|
|
|
20
20
|
## Editing the cloned site
|
|
21
21
|
|
|
22
|
-
- **Home** — `index.html` (hero
|
|
22
|
+
- **Home** — `index.html` (hero and documentation cards with links to the main docs site). Edit the main content or add your own. Component showcase at `components/index.html`.
|
|
23
23
|
- **Component showcase** — `components/index.html` lists all components; `components/<name>.html` (e.g. `button.html`) each has a "Read the full docs" link to the main site. Edit or add HTML files; keep the same header/footer if you want the theme switcher and settings on every page.
|
|
24
24
|
- **CSS** — The CLI copies `css/rizzo.min.css`; the link uses `{{LINK_HREF}}` (replaced at init). To use a CDN, replace that with the CDN URL.
|
|
25
25
|
- **Scripts** — `js/main.js` provides theme sync, settings panel, toast, tabs, modal, dropdown, accordion, search (overlay), navbar mobile menu, and copy-to-clipboard. Customize or extend as needed.
|
|
@@ -294,23 +294,52 @@
|
|
|
294
294
|
|
|
295
295
|
|
|
296
296
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
<main id="main-content" class="home">
|
|
304
|
+
<div class="home__container">
|
|
305
|
+
<header class="home__hero">
|
|
306
|
+
<h1 class="home__title">Rizzo CSS</h1>
|
|
307
|
+
<p class="home__subtitle">A modern CSS design system built on Astro with semantic theming, accessibility-first components, and PostCSS optimization. Start here then make it your own.</p>
|
|
308
|
+
<div class="home__hero-ctas">
|
|
309
|
+
<a href="https://rizzo-css.vercel.app/docs/getting-started" class="btn btn-primary home__hero-cta" target="_blank" rel="noopener noreferrer">Get Started</a>
|
|
310
|
+
<a href="https://rizzo-css.vercel.app/docs/components" class="btn btn-outline home__hero-cta" target="_blank" rel="noopener noreferrer">View Components</a>
|
|
311
|
+
</div>
|
|
312
|
+
</header>
|
|
313
|
+
<section class="home__docs">
|
|
314
|
+
<h2 class="home__section-title">Documentation</h2>
|
|
315
|
+
<div class="home__docs-grid">
|
|
316
|
+
<a href="https://rizzo-css.vercel.app/docs/getting-started" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
317
|
+
<h3>Getting Started</h3>
|
|
318
|
+
<p>Installation, project structure, and quick start guide</p>
|
|
319
|
+
</a>
|
|
320
|
+
<a href="https://rizzo-css.vercel.app/docs/components" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
321
|
+
<h3>Components</h3>
|
|
322
|
+
<p>Component library with usage examples and live demos</p>
|
|
323
|
+
</a>
|
|
324
|
+
<a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
325
|
+
<h3>Theming</h3>
|
|
326
|
+
<p>Theme system, custom themes, and color format guide</p>
|
|
327
|
+
</a>
|
|
328
|
+
<a href="https://rizzo-css.vercel.app/docs/design-system" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
329
|
+
<h3>Design System</h3>
|
|
330
|
+
<p>Semantic variables, typography, and design principles</p>
|
|
331
|
+
</a>
|
|
332
|
+
<a href="https://rizzo-css.vercel.app/docs/accessibility" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
333
|
+
<h3>Accessibility</h3>
|
|
334
|
+
<p>Accessibility guidelines, utilities, and best practices</p>
|
|
335
|
+
</a>
|
|
336
|
+
<a href="https://rizzo-css.vercel.app/docs/colors" class="home__doc-card" target="_blank" rel="noopener noreferrer">
|
|
337
|
+
<h3>Colors</h3>
|
|
338
|
+
<p>Interactive color reference with multiple format options</p>
|
|
339
|
+
</a>
|
|
340
|
+
</div>
|
|
341
|
+
</section>
|
|
310
342
|
</div>
|
|
311
|
-
<footer style="margin-top: auto; padding-top: var(--spacing-8); color: var(--text-dim); font-size: var(--font-size-sm);">
|
|
312
|
-
<a href="https://rizzo-css.vercel.app" style="color: var(--accent);">Rizzo CSS</a> — design system for the web. <a href="https://rizzo-css.vercel.app/docs" target="_blank" rel="noopener noreferrer">Full docs</a>.
|
|
313
|
-
</footer>
|
|
314
343
|
</main>
|
|
315
344
|
|
|
316
345
|
|
|
@@ -399,6 +428,12 @@
|
|
|
399
428
|
|
|
400
429
|
|
|
401
430
|
|
|
431
|
+
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
|
|
402
437
|
|
|
403
438
|
|
|
404
439
|
|