rizzo-css 0.0.11 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/bin/rizzo-css.js +6 -0
- package/dist/rizzo.min.css +3 -2
- package/package.json +1 -1
- package/scaffold/svelte/Table.svelte +6 -5
- package/scaffold/svelte/Tabs.svelte +3 -1
- package/scaffold/vanilla/README.md +10 -5
- package/scaffold/vanilla/index.html +1 -277
- package/scaffold/vanilla/js/main.js +747 -0
package/README.md
CHANGED
|
@@ -46,7 +46,7 @@ import 'rizzo-css';
|
|
|
46
46
|
**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:
|
|
47
47
|
|
|
48
48
|
```html
|
|
49
|
-
<!-- unpkg (pin version: replace @latest with @0.0.
|
|
49
|
+
<!-- unpkg (pin version: replace @latest with @0.0.12 or any version) -->
|
|
50
50
|
<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
|
|
51
51
|
|
|
52
52
|
<!-- or jsDelivr -->
|
package/bin/rizzo-css.js
CHANGED
|
@@ -825,6 +825,11 @@ async function cmdInit() {
|
|
|
825
825
|
if (existsSync(vanillaReadme)) {
|
|
826
826
|
copyFileSync(vanillaReadme, join(projectDir, 'README.md'));
|
|
827
827
|
}
|
|
828
|
+
const vanillaJs = join(getPackageRoot(), 'scaffold', 'vanilla', 'js', 'main.js');
|
|
829
|
+
if (existsSync(vanillaJs)) {
|
|
830
|
+
mkdirSync(join(projectDir, 'js'), { recursive: true });
|
|
831
|
+
copyFileSync(vanillaJs, join(projectDir, 'js', 'main.js'));
|
|
832
|
+
}
|
|
828
833
|
}
|
|
829
834
|
if (framework === 'svelte' && selectedComponents.length > 0) {
|
|
830
835
|
copySvelteComponents(projectDir, selectedComponents);
|
|
@@ -838,6 +843,7 @@ async function cmdInit() {
|
|
|
838
843
|
if (indexPath) console.log(' - ' + indexPath);
|
|
839
844
|
if (framework === 'vanilla') {
|
|
840
845
|
console.log(' - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
|
|
846
|
+
console.log(' - js/main.js (theme, toast, settings, tabs, modal, dropdown, accordion)');
|
|
841
847
|
console.log(' - Icons: ' + join(projectDir, 'icons') + ' (SVG files)');
|
|
842
848
|
console.log(' - README.md (setup and CDN/local options)');
|
|
843
849
|
}
|
package/dist/rizzo.min.css
CHANGED
|
@@ -100,7 +100,7 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
100
100
|
.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}
|
|
101
101
|
.navbar__link:focus-visible::after,.navbar__link:hover::after,
|
|
102
102
|
.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__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}
|
|
103
|
-
.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:100%}.
|
|
103
|
+
.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:100%}.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:var(--spacing-56);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:auto;opacity:0;overflow-y:auto;position:absolute;right:0;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;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-dim);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%}
|
|
104
104
|
.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,
|
|
105
105
|
.theme-switcher__option--active:focus-visible,
|
|
106
106
|
.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 <= 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)}
|
|
@@ -134,7 +134,8 @@ div.navbar__link{background:none;border:none;cursor:pointer;font:inherit;text-al
|
|
|
134
134
|
[data-tooltip].tooltip-visible::after,
|
|
135
135
|
[data-tooltip]:focus-visible::after,[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) scale(1)}@media (prefers-reduced-motion:reduce){[data-tooltip]::after{transform:translateX(-50%);transition-duration:.1s}
|
|
136
136
|
[data-tooltip].tooltip-visible::after,
|
|
137
|
-
[data-tooltip]:focus-visible::after,[data-tooltip]:hover::after{transform:translateX(-50%)}}.icon{color:var(--icon)}.
|
|
137
|
+
[data-tooltip]:focus-visible::after,[data-tooltip]:hover::after{transform:translateX(-50%)}}.icon{color:var(--icon)}.icon,.icon-card,
|
|
138
|
+
.icon-card-tooltip-host{cursor:pointer}.icons-grid{display:grid;gap:var(--spacing-3);grid-template-columns:repeat(2,1fr);margin:var(--spacing-6) 0}@media (width >= 640px){.icons-grid{gap:var(--spacing-4);grid-template-columns:repeat(3,1fr)}}@media (width >= 1024px){.icons-grid{grid-template-columns:repeat(6,1fr)}}.icon-card-tooltip-host{display:block;min-width:0;width:100%}.icon-card{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:10rem;padding:var(--spacing-3);text-align:center;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base),background-color var(--transition-base)}.icon-card:hover{background-color:var(--background-alt);border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(calc(var(--spacing-0-125)*-1))}.icon-card:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.icon-card__preview{align-items:center;display:flex;justify-content:center;margin-bottom:var(--spacing-2);min-height:var(--spacing-32);width:100%}.icon-card__preview--devicon{background-color:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-2)}.icon-card--devicon{background-color:var(--background)}.icon-card--devicon:hover{background-color:var(--background-alt)}.icon-card__icon{color:var(--icon);flex-shrink:0}.icon-card__content{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%}.icon-card__name{color:var(--text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-0-125) 0}.icon-card__hint,.icon-card__name{line-height:var(--line-height-tight);text-align:center}.icon-card__hint{color:var(--text-dim);font-size:calc(var(--font-size-xs)*.875);margin:0;transition:color var(--transition-base)}.icon-card__hint--copied{color:var(--accent);font-weight:var(--font-weight-medium)}@media (width <= 640px){.icons-grid{gap:var(--spacing-2);grid-template-columns:repeat(2,1fr)}.icon-card{min-height:8.5rem;padding:var(--spacing-2)}.icon-card__preview{margin-bottom:var(--spacing-1);min-height:var(--spacing-24)}.icon-card__icon{height:var(--spacing-8);width:var(--spacing-8)}.icon-card__name{font-size:calc(var(--font-size-xs)*.875)}.icon-card__hint{font-size:calc(var(--font-size-xs)*.75)}}.dropdown{display:inline-block;position:relative}.dropdown__trigger{align-items:center;background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.dropdown__trigger:hover{background-color:var(--background);border-color:var(--accent);color:var(--accent)}.dropdown__trigger:focus-visible{outline:var(--outline-width) solid var(--accent);outline-offset:var(--outline-offset)}.dropdown__trigger[aria-expanded="true"] .dropdown__icon{transform:rotate(180deg)}
|
|
138
139
|
.dropdown__trigger:focus-visible .dropdown__icon,.dropdown__trigger:hover .dropdown__icon{color:var(--accent)}.dropdown__trigger-text{flex:1;text-align:left}.dropdown__icon{color:var(--icon);flex-shrink:0;transition:transform var(--transition-base),color var(--transition-base)}.dropdown__menu{background-color:var(--background-alt);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);list-style:none;margin:0;max-width:calc(100vw - var(--spacing-8));min-width:var(--spacing-64);opacity:0;overflow:visible!important;padding:var(--spacing-2) 0;position:absolute;top:calc(100% + var(--spacing-2));transform:translateY(calc(var(--spacing-2)*-1));transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);visibility:hidden;width:-moz-max-content;width:max-content;z-index:var(--z-dropdown)}.dropdown__menu--left{left:0}.dropdown__menu--right{right:0}.dropdown__menu--start{left:0}.dropdown__menu--end{right:0}.dropdown__menu--open{opacity:1;transform:translateY(0);visibility:visible}.dropdown__item{align-items:center;background-color:transparent;border:none;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);gap:var(--spacing-2);min-height:var(--touch-target-min);overflow:hidden;padding:var(--spacing-2) var(--spacing-4);text-align:left;text-decoration:none;text-overflow:ellipsis;transition:background-color var(--transition-fast),color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}
|
|
139
140
|
.dropdown__item:focus-visible:not(.dropdown__item--disabled),.dropdown__item:hover:not(.dropdown__item--disabled){background-color:var(--background);color:var(--accent);outline:none}.dropdown__item:focus-visible:not(.dropdown__item--disabled){box-shadow:inset 0 0 0 var(--outline-width) var(--accent)}.dropdown__item--disabled{cursor:not-allowed;opacity:var(--opacity-50);pointer-events:none}.dropdown__item-icon{flex-shrink:0;height:var(--spacing-4);width:var(--spacing-4)}.dropdown__separator{background-color:var(--border);height:var(--border-width);margin:var(--spacing-2) 0}.dropdown__item-wrapper,.dropdown__item-wrapper--has-submenu{overflow:visible;position:relative}.dropdown__item--has-submenu{align-items:center;display:flex;justify-content:space-between}.dropdown__item-arrow{color:var(--icon);flex-shrink:0;height:var(--spacing-3);margin-left:var(--spacing-2);transition:transform var(--transition-base),color var(--transition-base);width:var(--spacing-3)}
|
|
140
141
|
.dropdown__item:focus-visible:not(.dropdown__item--disabled) .dropdown__item-arrow,.dropdown__item:hover:not(.dropdown__item--disabled) .dropdown__item-arrow{color:var(--accent)}.dropdown__item-wrapper--has-submenu .dropdown__submenu--open ~ .dropdown__item-arrow,
|
package/package.json
CHANGED
|
@@ -81,13 +81,13 @@
|
|
|
81
81
|
}
|
|
82
82
|
</script>
|
|
83
83
|
|
|
84
|
-
<div class={classes} data-table-id={tableId}>
|
|
84
|
+
<div class={classes} data-table-id={tableId} data-table-sortable={sortable ? 'true' : undefined} data-table-filterable={filterable ? 'true' : undefined}>
|
|
85
85
|
{#if filterable}
|
|
86
86
|
<div class="table__filter-wrap">
|
|
87
87
|
<label for="{tableId}-filter" class="sr-only">Filter table</label>
|
|
88
88
|
<span class="table__filter-icon" aria-hidden="true">
|
|
89
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="table__filter-icon-svg" aria-hidden="true">
|
|
90
|
-
<path d="
|
|
89
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="table__filter-icon-svg icon" aria-hidden="true">
|
|
90
|
+
<path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
|
|
91
91
|
</svg>
|
|
92
92
|
</span>
|
|
93
93
|
<input
|
|
@@ -129,8 +129,9 @@
|
|
|
129
129
|
>
|
|
130
130
|
<span class="table__cell-content">{col.label}</span>
|
|
131
131
|
<span class="table__sort-icon" aria-hidden="true">
|
|
132
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="table__sort-icon-svg" aria-hidden="true">
|
|
133
|
-
<path d="
|
|
132
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="table__sort-icon-svg icon" aria-hidden="true">
|
|
133
|
+
<path d="m7 15 5 5 5-5" />
|
|
134
|
+
<path d="m7 9 5-5 5 5" />
|
|
134
135
|
</svg>
|
|
135
136
|
</span>
|
|
136
137
|
</button>
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
aria-selected={isActive ? 'true' : 'false'}
|
|
86
86
|
aria-controls="{tabsId}-panel-{tab.id}"
|
|
87
87
|
data-tab-id={tab.id}
|
|
88
|
+
data-tab-index={index}
|
|
88
89
|
onclick={() => activateTab(index)}
|
|
89
90
|
onkeydown={(e) => handleKeydown(e, index)}
|
|
90
91
|
>
|
|
@@ -94,7 +95,7 @@
|
|
|
94
95
|
</div>
|
|
95
96
|
|
|
96
97
|
<div class="tabs__panels-wrapper">
|
|
97
|
-
{#each tabs as tab}
|
|
98
|
+
{#each tabs as tab, index}
|
|
98
99
|
{@const isActive = tab.id === activeTabId}
|
|
99
100
|
<div
|
|
100
101
|
class="tabs__panel {isActive ? 'tabs__panel--active' : ''}"
|
|
@@ -103,6 +104,7 @@
|
|
|
103
104
|
aria-labelledby="{tabsId}-tab-{tab.id}"
|
|
104
105
|
aria-hidden={isActive ? 'false' : 'true'}
|
|
105
106
|
data-panel-id={tab.id}
|
|
107
|
+
data-panel-index={index}
|
|
106
108
|
>
|
|
107
109
|
{#if tab.content}
|
|
108
110
|
<div class="tabs__panel-content">{@html tab.content}</div>
|
|
@@ -13,16 +13,21 @@ 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.12`, 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
|
## What’s included
|
|
21
21
|
|
|
22
|
-
- **Theme flash prevention** —
|
|
23
|
-
- **
|
|
24
|
-
- **
|
|
25
|
-
- **
|
|
22
|
+
- **Theme flash prevention** — Small inline script in `<head>` applies saved theme and settings before first paint.
|
|
23
|
+
- **js/main.js** — Bundled vanilla JS for components (loaded via `<script src="js/main.js"></script>`):
|
|
24
|
+
- **Theme** — Header and settings theme selects; `localStorage` key `theme`; system preference listener.
|
|
25
|
+
- **Settings panel** — `openSettings()`; font size, reduce motion, high contrast, scrollbar style; focus trap and Escape to close.
|
|
26
|
+
- **Toast** — `showToast(message, options)`, `removeToast(id)`, `removeAllToasts()` on `window`.
|
|
27
|
+
- **Tabs** — Any `[data-tabs]` block gets keyboard and click behavior.
|
|
28
|
+
- **Modal** — Dialogs with `[data-modal-close]` and overlay `#id-overlay`; use `[data-modal-open="modalId"]` on a button to open; `openModal_*` / `closeModal_*` on `window` (id with hyphens replaced by underscores).
|
|
29
|
+
- **Dropdown** — Any `[data-dropdown]` with `.dropdown__trigger` and `.dropdown__menu` (and optional submenus).
|
|
30
|
+
- **Accordion** — Any `[data-accordion]` with `[data-accordion-trigger]` and panels; `data-allow-multiple="true"` for multiple open.
|
|
26
31
|
|
|
27
32
|
## Commands
|
|
28
33
|
|
|
@@ -44,118 +44,6 @@
|
|
|
44
44
|
} catch (e) {}
|
|
45
45
|
})();
|
|
46
46
|
</script>
|
|
47
|
-
<!-- Toast: showToast, removeToast, removeAllToasts (same as main site) -->
|
|
48
|
-
<script>
|
|
49
|
-
(function() {
|
|
50
|
-
if (typeof window === 'undefined' || window.showToast) return;
|
|
51
|
-
function showToast(message, options) {
|
|
52
|
-
if (!message) return null;
|
|
53
|
-
options = options || {};
|
|
54
|
-
var variant = options.variant || 'info';
|
|
55
|
-
var position = options.position || 'top-right';
|
|
56
|
-
var autoDismiss = options.autoDismiss !== undefined ? options.autoDismiss : 5000;
|
|
57
|
-
var dismissible = options.dismissible !== undefined ? options.dismissible : true;
|
|
58
|
-
var toastId = 'toast-' + Math.random().toString(36).substr(2, 9);
|
|
59
|
-
function createToast() {
|
|
60
|
-
if (!document.body) return;
|
|
61
|
-
var containerId = 'toast-container-' + position;
|
|
62
|
-
var container = document.getElementById(containerId);
|
|
63
|
-
if (!container) {
|
|
64
|
-
container = document.createElement('div');
|
|
65
|
-
container.id = containerId;
|
|
66
|
-
container.className = 'toast-container toast-container--' + position;
|
|
67
|
-
container.style.cssText = 'display:flex;visibility:visible;z-index:1100;';
|
|
68
|
-
document.body.appendChild(container);
|
|
69
|
-
}
|
|
70
|
-
var toast = document.createElement('div');
|
|
71
|
-
toast.id = toastId;
|
|
72
|
-
toast.className = 'alert alert--' + variant;
|
|
73
|
-
toast.setAttribute('role', 'alert');
|
|
74
|
-
toast.setAttribute('aria-live', 'polite');
|
|
75
|
-
toast.style.cssText = 'display:flex;visibility:visible;opacity:0;transition:opacity 0.3s ease-out, transform 0.3s ease-out;';
|
|
76
|
-
var isRight = position.indexOf('right') !== -1;
|
|
77
|
-
var isLeft = position.indexOf('left') !== -1;
|
|
78
|
-
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
79
|
-
var content = document.createElement('div');
|
|
80
|
-
content.className = 'alert__content';
|
|
81
|
-
content.textContent = message;
|
|
82
|
-
toast.appendChild(content);
|
|
83
|
-
var closeBtn;
|
|
84
|
-
if (dismissible) {
|
|
85
|
-
closeBtn = document.createElement('button');
|
|
86
|
-
closeBtn.type = 'button';
|
|
87
|
-
closeBtn.className = 'alert__close';
|
|
88
|
-
closeBtn.setAttribute('aria-label', 'Dismiss toast');
|
|
89
|
-
closeBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';
|
|
90
|
-
toast.appendChild(closeBtn);
|
|
91
|
-
closeBtn.addEventListener('click', function() {
|
|
92
|
-
toast.style.opacity = '0';
|
|
93
|
-
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
94
|
-
setTimeout(function() {
|
|
95
|
-
if (toast.parentNode) toast.remove();
|
|
96
|
-
if (container.children.length === 0) container.remove();
|
|
97
|
-
}, 300);
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
container.appendChild(toast);
|
|
101
|
-
requestAnimationFrame(function() {
|
|
102
|
-
toast.offsetHeight;
|
|
103
|
-
if (variant === 'warning') {
|
|
104
|
-
toast.style.color = 'var(--warning-text)';
|
|
105
|
-
content.style.color = 'var(--warning-text)';
|
|
106
|
-
if (closeBtn) closeBtn.style.color = 'var(--warning-text)';
|
|
107
|
-
}
|
|
108
|
-
setTimeout(function() {
|
|
109
|
-
requestAnimationFrame(function() {
|
|
110
|
-
toast.style.opacity = '1';
|
|
111
|
-
toast.style.transform = isRight || isLeft ? 'translateX(0)' : 'translateY(0)';
|
|
112
|
-
});
|
|
113
|
-
}, 10);
|
|
114
|
-
});
|
|
115
|
-
if (autoDismiss > 0) {
|
|
116
|
-
setTimeout(function() {
|
|
117
|
-
if (toast.parentNode) {
|
|
118
|
-
toast.style.opacity = '0';
|
|
119
|
-
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
120
|
-
setTimeout(function() {
|
|
121
|
-
if (toast.parentNode) toast.remove();
|
|
122
|
-
if (container.children.length === 0) container.remove();
|
|
123
|
-
}, 300);
|
|
124
|
-
}
|
|
125
|
-
}, autoDismiss);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
if (document.body) createToast();
|
|
129
|
-
else document.addEventListener('DOMContentLoaded', createToast);
|
|
130
|
-
return toastId;
|
|
131
|
-
}
|
|
132
|
-
function removeToast(toastId) {
|
|
133
|
-
var toast = document.getElementById(toastId);
|
|
134
|
-
if (toast) {
|
|
135
|
-
var container = toast.parentElement;
|
|
136
|
-
var position = container ? container.id.replace('toast-container-', '') : 'top-right';
|
|
137
|
-
toast.style.opacity = '0';
|
|
138
|
-
toast.style.transform = position.indexOf('right') !== -1 ? 'translateX(100%)' : position.indexOf('left') !== -1 ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
139
|
-
setTimeout(function() {
|
|
140
|
-
if (toast.parentNode) toast.remove();
|
|
141
|
-
if (container && container.classList.contains('toast-container') && container.children.length === 0) container.remove();
|
|
142
|
-
}, 300);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
function removeAllToasts() {
|
|
146
|
-
document.querySelectorAll('.toast-container').forEach(function(c) {
|
|
147
|
-
c.querySelectorAll('.alert').forEach(function(t) {
|
|
148
|
-
t.style.opacity = '0';
|
|
149
|
-
t.style.transform = 'translateY(-10px)';
|
|
150
|
-
});
|
|
151
|
-
setTimeout(function() { c.remove(); }, 300);
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
window.showToast = showToast;
|
|
155
|
-
window.removeToast = removeToast;
|
|
156
|
-
window.removeAllToasts = removeAllToasts;
|
|
157
|
-
})();
|
|
158
|
-
</script>
|
|
159
47
|
<link rel="stylesheet" href="{{LINK_HREF}}" />
|
|
160
48
|
</head>
|
|
161
49
|
<body>
|
|
@@ -296,170 +184,6 @@
|
|
|
296
184
|
</footer>
|
|
297
185
|
</main>
|
|
298
186
|
|
|
299
|
-
<script>
|
|
300
|
-
(function() {
|
|
301
|
-
var KEY = 'theme';
|
|
302
|
-
var defaultDark = 'github-dark-classic';
|
|
303
|
-
var defaultLight = 'github-light';
|
|
304
|
-
function resolveSystem() {
|
|
305
|
-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
|
|
306
|
-
}
|
|
307
|
-
function applyTheme(value) {
|
|
308
|
-
var effective = value === 'system' ? resolveSystem() : value;
|
|
309
|
-
document.documentElement.setAttribute('data-theme', effective);
|
|
310
|
-
try { localStorage.setItem(KEY, value); } catch (e) {}
|
|
311
|
-
var headerSelect = document.getElementById('theme-select');
|
|
312
|
-
var settingsSelect = document.getElementById('settings-theme');
|
|
313
|
-
if (headerSelect && headerSelect.value !== value) headerSelect.value = value;
|
|
314
|
-
if (settingsSelect && settingsSelect.value !== value) settingsSelect.value = value;
|
|
315
|
-
try { window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue: value, effective: effective } })); } catch (e) {}
|
|
316
|
-
}
|
|
317
|
-
function syncSelects() {
|
|
318
|
-
var stored = null;
|
|
319
|
-
try { stored = localStorage.getItem(KEY); } catch (e) {}
|
|
320
|
-
var value = stored || 'system';
|
|
321
|
-
var headerSelect = document.getElementById('theme-select');
|
|
322
|
-
var settingsSelect = document.getElementById('settings-theme');
|
|
323
|
-
if (headerSelect) headerSelect.value = value;
|
|
324
|
-
if (settingsSelect) settingsSelect.value = value;
|
|
325
|
-
}
|
|
326
|
-
var headerSelect = document.getElementById('theme-select');
|
|
327
|
-
var settingsSelect = document.getElementById('settings-theme');
|
|
328
|
-
if (headerSelect) headerSelect.addEventListener('change', function() { applyTheme(headerSelect.value); });
|
|
329
|
-
if (settingsSelect) settingsSelect.addEventListener('change', function() { applyTheme(settingsSelect.value); });
|
|
330
|
-
syncSelects();
|
|
331
|
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
|
|
332
|
-
if ((localStorage.getItem(KEY) || 'system') === 'system') applyTheme('system');
|
|
333
|
-
});
|
|
334
|
-
})();
|
|
335
|
-
</script>
|
|
336
|
-
<script>
|
|
337
|
-
(function initSettings() {
|
|
338
|
-
var settings = document.querySelector('[data-settings]');
|
|
339
|
-
if (!settings) return;
|
|
340
|
-
var overlay = settings.querySelector('[data-settings-overlay]');
|
|
341
|
-
var panel = settings.querySelector('.settings__panel');
|
|
342
|
-
var closeBtn = settings.querySelector('[data-settings-close]');
|
|
343
|
-
var fontSizeSlider = settings.querySelector('[data-font-size-slider]');
|
|
344
|
-
var fontSizeValue = settings.querySelector('[data-font-size-value]');
|
|
345
|
-
var reducedMotion = settings.querySelector('[data-reduced-motion]');
|
|
346
|
-
var highContrast = settings.querySelector('[data-high-contrast]');
|
|
347
|
-
var scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
|
|
348
|
-
var html = document.documentElement;
|
|
349
|
-
if (!panel || !overlay || !closeBtn) return;
|
|
350
|
-
function updateSliderProgress(slider) {
|
|
351
|
-
var min = parseFloat(slider.min), max = parseFloat(slider.max), value = parseFloat(slider.value);
|
|
352
|
-
slider.style.setProperty('--slider-progress', ((value - min) / (max - min)) * 100 + '%');
|
|
353
|
-
}
|
|
354
|
-
function applyFontSize(scale) {
|
|
355
|
-
html.style.setProperty('--font-size-scale', scale);
|
|
356
|
-
if (fontSizeValue) fontSizeValue.textContent = Math.round(scale * 100) + '%';
|
|
357
|
-
}
|
|
358
|
-
function applyScrollbarStyle(style) {
|
|
359
|
-
html.classList.remove('scrollbar-thin', 'scrollbar-thick', 'scrollbar-hidden', 'hide-scrollbars');
|
|
360
|
-
if (style === 'thick') html.classList.add('scrollbar-thick');
|
|
361
|
-
else if (style === 'hidden') html.classList.add('scrollbar-hidden', 'hide-scrollbars');
|
|
362
|
-
}
|
|
363
|
-
function loadSettings() {
|
|
364
|
-
var saved = localStorage.getItem('fontSizeScale');
|
|
365
|
-
if (saved && fontSizeSlider) {
|
|
366
|
-
fontSizeSlider.value = saved;
|
|
367
|
-
applyFontSize(parseFloat(saved));
|
|
368
|
-
}
|
|
369
|
-
if (fontSizeSlider) updateSliderProgress(fontSizeSlider);
|
|
370
|
-
if (reducedMotion) {
|
|
371
|
-
reducedMotion.checked = localStorage.getItem('reducedMotion') === 'true';
|
|
372
|
-
html.classList.toggle('reduced-motion', reducedMotion.checked);
|
|
373
|
-
}
|
|
374
|
-
if (highContrast) {
|
|
375
|
-
highContrast.checked = localStorage.getItem('highContrast') === 'true';
|
|
376
|
-
html.classList.toggle('high-contrast', highContrast.checked);
|
|
377
|
-
}
|
|
378
|
-
var scrollbar = localStorage.getItem('scrollbarStyle') || 'thin';
|
|
379
|
-
for (var i = 0; i < scrollbarStyleRadios.length; i++) {
|
|
380
|
-
if (scrollbarStyleRadios[i].value === scrollbar) scrollbarStyleRadios[i].checked = true;
|
|
381
|
-
}
|
|
382
|
-
applyScrollbarStyle(scrollbar);
|
|
383
|
-
}
|
|
384
|
-
function getFocusable(container) {
|
|
385
|
-
var sel = 'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
386
|
-
return Array.prototype.slice.call(container.querySelectorAll(sel));
|
|
387
|
-
}
|
|
388
|
-
var previousActive = null;
|
|
389
|
-
function openSettings() {
|
|
390
|
-
previousActive = document.activeElement;
|
|
391
|
-
settings.setAttribute('aria-hidden', 'false');
|
|
392
|
-
overlay.setAttribute('aria-hidden', 'false');
|
|
393
|
-
panel.setAttribute('aria-hidden', 'false');
|
|
394
|
-
panel.removeAttribute('data-open');
|
|
395
|
-
void panel.offsetHeight;
|
|
396
|
-
requestAnimationFrame(function() {
|
|
397
|
-
requestAnimationFrame(function() {
|
|
398
|
-
panel.setAttribute('data-open', 'true');
|
|
399
|
-
if (closeBtn) closeBtn.focus();
|
|
400
|
-
});
|
|
401
|
-
});
|
|
402
|
-
}
|
|
403
|
-
function closeSettings() {
|
|
404
|
-
panel.removeAttribute('data-open');
|
|
405
|
-
var duration = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300;
|
|
406
|
-
setTimeout(function() {
|
|
407
|
-
settings.setAttribute('aria-hidden', 'true');
|
|
408
|
-
overlay.setAttribute('aria-hidden', 'true');
|
|
409
|
-
panel.setAttribute('aria-hidden', 'true');
|
|
410
|
-
if (previousActive) {
|
|
411
|
-
previousActive.focus();
|
|
412
|
-
previousActive = null;
|
|
413
|
-
}
|
|
414
|
-
}, duration);
|
|
415
|
-
}
|
|
416
|
-
closeBtn.addEventListener('click', closeSettings);
|
|
417
|
-
overlay.addEventListener('click', closeSettings);
|
|
418
|
-
document.addEventListener('keydown', function(e) {
|
|
419
|
-
if (panel.getAttribute('data-open') !== 'true') return;
|
|
420
|
-
if (e.key === 'Escape') { e.preventDefault(); closeSettings(); return; }
|
|
421
|
-
if (e.key === 'Tab') {
|
|
422
|
-
var els = getFocusable(panel);
|
|
423
|
-
if (els.length === 0) return;
|
|
424
|
-
var first = els[0], last = els[els.length - 1], active = document.activeElement;
|
|
425
|
-
if (e.shiftKey) {
|
|
426
|
-
if (active === first || !panel.contains(active)) { e.preventDefault(); last.focus(); }
|
|
427
|
-
} else {
|
|
428
|
-
if (active === last || !panel.contains(active)) { e.preventDefault(); first.focus(); }
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
});
|
|
432
|
-
if (fontSizeSlider) {
|
|
433
|
-
fontSizeSlider.addEventListener('input', function() {
|
|
434
|
-
var scale = parseFloat(this.value);
|
|
435
|
-
applyFontSize(scale);
|
|
436
|
-
updateSliderProgress(this);
|
|
437
|
-
localStorage.setItem('fontSizeScale', scale);
|
|
438
|
-
});
|
|
439
|
-
}
|
|
440
|
-
if (reducedMotion) {
|
|
441
|
-
reducedMotion.addEventListener('change', function() {
|
|
442
|
-
html.classList.toggle('reduced-motion', this.checked);
|
|
443
|
-
localStorage.setItem('reducedMotion', this.checked);
|
|
444
|
-
});
|
|
445
|
-
}
|
|
446
|
-
if (highContrast) {
|
|
447
|
-
highContrast.addEventListener('change', function() {
|
|
448
|
-
html.classList.toggle('high-contrast', this.checked);
|
|
449
|
-
localStorage.setItem('highContrast', this.checked);
|
|
450
|
-
});
|
|
451
|
-
}
|
|
452
|
-
for (var j = 0; j < scrollbarStyleRadios.length; j++) {
|
|
453
|
-
scrollbarStyleRadios[j].addEventListener('change', function() {
|
|
454
|
-
if (this.checked) {
|
|
455
|
-
applyScrollbarStyle(this.value);
|
|
456
|
-
localStorage.setItem('scrollbarStyle', this.value);
|
|
457
|
-
}
|
|
458
|
-
});
|
|
459
|
-
}
|
|
460
|
-
loadSettings();
|
|
461
|
-
window.openSettings = openSettings;
|
|
462
|
-
})();
|
|
463
|
-
</script>
|
|
187
|
+
<script src="js/main.js"></script>
|
|
464
188
|
</body>
|
|
465
189
|
</html>
|
|
@@ -0,0 +1,747 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rizzo CSS — Vanilla JS component bundle
|
|
3
|
+
* Theme, toast, settings, tabs, modal, dropdown, accordion.
|
|
4
|
+
* Load this script after the DOM (e.g. before </body>).
|
|
5
|
+
*/
|
|
6
|
+
(function () {
|
|
7
|
+
'use strict';
|
|
8
|
+
|
|
9
|
+
if (typeof window === 'undefined') return;
|
|
10
|
+
|
|
11
|
+
// --- Toast (showToast, removeToast, removeAllToasts) ---
|
|
12
|
+
if (!window.showToast) {
|
|
13
|
+
function showToast(message, options) {
|
|
14
|
+
if (!message) return null;
|
|
15
|
+
options = options || {};
|
|
16
|
+
var variant = options.variant || 'info';
|
|
17
|
+
var position = options.position || 'top-right';
|
|
18
|
+
var autoDismiss = options.autoDismiss !== undefined ? options.autoDismiss : 5000;
|
|
19
|
+
var dismissible = options.dismissible !== undefined ? options.dismissible : true;
|
|
20
|
+
var toastId = 'toast-' + Math.random().toString(36).substr(2, 9);
|
|
21
|
+
function createToast() {
|
|
22
|
+
if (!document.body) return;
|
|
23
|
+
var containerId = 'toast-container-' + position;
|
|
24
|
+
var container = document.getElementById(containerId);
|
|
25
|
+
if (!container) {
|
|
26
|
+
container = document.createElement('div');
|
|
27
|
+
container.id = containerId;
|
|
28
|
+
container.className = 'toast-container toast-container--' + position;
|
|
29
|
+
container.style.cssText = 'display:flex;visibility:visible;z-index:1100;';
|
|
30
|
+
document.body.appendChild(container);
|
|
31
|
+
}
|
|
32
|
+
var toast = document.createElement('div');
|
|
33
|
+
toast.id = toastId;
|
|
34
|
+
toast.className = 'alert alert--' + variant;
|
|
35
|
+
toast.setAttribute('role', 'alert');
|
|
36
|
+
toast.setAttribute('aria-live', 'polite');
|
|
37
|
+
toast.style.cssText = 'display:flex;visibility:visible;opacity:0;transition:opacity 0.3s ease-out, transform 0.3s ease-out;';
|
|
38
|
+
var isRight = position.indexOf('right') !== -1;
|
|
39
|
+
var isLeft = position.indexOf('left') !== -1;
|
|
40
|
+
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
41
|
+
var content = document.createElement('div');
|
|
42
|
+
content.className = 'alert__content';
|
|
43
|
+
content.textContent = message;
|
|
44
|
+
toast.appendChild(content);
|
|
45
|
+
var closeBtn;
|
|
46
|
+
if (dismissible) {
|
|
47
|
+
closeBtn = document.createElement('button');
|
|
48
|
+
closeBtn.type = 'button';
|
|
49
|
+
closeBtn.className = 'alert__close';
|
|
50
|
+
closeBtn.setAttribute('aria-label', 'Dismiss toast');
|
|
51
|
+
closeBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>';
|
|
52
|
+
toast.appendChild(closeBtn);
|
|
53
|
+
closeBtn.addEventListener('click', function () {
|
|
54
|
+
toast.style.opacity = '0';
|
|
55
|
+
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
56
|
+
setTimeout(function () {
|
|
57
|
+
if (toast.parentNode) toast.remove();
|
|
58
|
+
if (container.children.length === 0) container.remove();
|
|
59
|
+
}, 300);
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
container.appendChild(toast);
|
|
63
|
+
requestAnimationFrame(function () {
|
|
64
|
+
toast.offsetHeight;
|
|
65
|
+
if (variant === 'warning') {
|
|
66
|
+
toast.style.color = 'var(--warning-text)';
|
|
67
|
+
content.style.color = 'var(--warning-text)';
|
|
68
|
+
if (closeBtn) closeBtn.style.color = 'var(--warning-text)';
|
|
69
|
+
}
|
|
70
|
+
setTimeout(function () {
|
|
71
|
+
requestAnimationFrame(function () {
|
|
72
|
+
toast.style.opacity = '1';
|
|
73
|
+
toast.style.transform = isRight || isLeft ? 'translateX(0)' : 'translateY(0)';
|
|
74
|
+
});
|
|
75
|
+
}, 10);
|
|
76
|
+
});
|
|
77
|
+
if (autoDismiss > 0) {
|
|
78
|
+
setTimeout(function () {
|
|
79
|
+
if (toast.parentNode) {
|
|
80
|
+
toast.style.opacity = '0';
|
|
81
|
+
toast.style.transform = isRight ? 'translateX(100%)' : isLeft ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
82
|
+
setTimeout(function () {
|
|
83
|
+
if (toast.parentNode) toast.remove();
|
|
84
|
+
if (container.children.length === 0) container.remove();
|
|
85
|
+
}, 300);
|
|
86
|
+
}
|
|
87
|
+
}, autoDismiss);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
if (document.body) createToast();
|
|
91
|
+
else document.addEventListener('DOMContentLoaded', createToast);
|
|
92
|
+
return toastId;
|
|
93
|
+
}
|
|
94
|
+
function removeToast(toastId) {
|
|
95
|
+
var toast = document.getElementById(toastId);
|
|
96
|
+
if (toast) {
|
|
97
|
+
var container = toast.parentElement;
|
|
98
|
+
var position = container ? container.id.replace('toast-container-', '') : 'top-right';
|
|
99
|
+
toast.style.opacity = '0';
|
|
100
|
+
toast.style.transform = position.indexOf('right') !== -1 ? 'translateX(100%)' : position.indexOf('left') !== -1 ? 'translateX(-100%)' : 'translateY(-100%)';
|
|
101
|
+
setTimeout(function () {
|
|
102
|
+
if (toast.parentNode) toast.remove();
|
|
103
|
+
if (container && container.classList.contains('toast-container') && container.children.length === 0) container.remove();
|
|
104
|
+
}, 300);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
function removeAllToasts() {
|
|
108
|
+
document.querySelectorAll('.toast-container').forEach(function (c) {
|
|
109
|
+
c.querySelectorAll('.alert').forEach(function (t) {
|
|
110
|
+
t.style.opacity = '0';
|
|
111
|
+
t.style.transform = 'translateY(-10px)';
|
|
112
|
+
});
|
|
113
|
+
setTimeout(function () { c.remove(); }, 300);
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
window.showToast = showToast;
|
|
117
|
+
window.removeToast = removeToast;
|
|
118
|
+
window.removeAllToasts = removeAllToasts;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// --- Theme (applyTheme, sync selects, system listener) ---
|
|
122
|
+
var KEY = 'theme';
|
|
123
|
+
var defaultDark = 'github-dark-classic';
|
|
124
|
+
var defaultLight = 'github-light';
|
|
125
|
+
function resolveSystem() {
|
|
126
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
|
|
127
|
+
}
|
|
128
|
+
function applyTheme(value) {
|
|
129
|
+
var effective = value === 'system' ? resolveSystem() : value;
|
|
130
|
+
document.documentElement.setAttribute('data-theme', effective);
|
|
131
|
+
try { localStorage.setItem(KEY, value); } catch (e) {}
|
|
132
|
+
var headerSelect = document.getElementById('theme-select');
|
|
133
|
+
var settingsSelect = document.getElementById('settings-theme');
|
|
134
|
+
if (headerSelect && headerSelect.value !== value) headerSelect.value = value;
|
|
135
|
+
if (settingsSelect && settingsSelect.value !== value) settingsSelect.value = value;
|
|
136
|
+
try { window.dispatchEvent(new CustomEvent('rizzo-theme-change', { detail: { themeValue: value, effective: effective } })); } catch (e) {}
|
|
137
|
+
}
|
|
138
|
+
function syncThemeSelects() {
|
|
139
|
+
var stored = null;
|
|
140
|
+
try { stored = localStorage.getItem(KEY); } catch (e) {}
|
|
141
|
+
var value = stored || 'system';
|
|
142
|
+
var headerSelect = document.getElementById('theme-select');
|
|
143
|
+
var settingsSelect = document.getElementById('settings-theme');
|
|
144
|
+
if (headerSelect) headerSelect.value = value;
|
|
145
|
+
if (settingsSelect) settingsSelect.value = value;
|
|
146
|
+
}
|
|
147
|
+
function initTheme() {
|
|
148
|
+
var headerSelect = document.getElementById('theme-select');
|
|
149
|
+
var settingsSelect = document.getElementById('settings-theme');
|
|
150
|
+
if (headerSelect) headerSelect.addEventListener('change', function () { applyTheme(headerSelect.value); });
|
|
151
|
+
if (settingsSelect) settingsSelect.addEventListener('change', function () { applyTheme(settingsSelect.value); });
|
|
152
|
+
syncThemeSelects();
|
|
153
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
|
|
154
|
+
if ((localStorage.getItem(KEY) || 'system') === 'system') applyTheme('system');
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// --- Settings panel (openSettings, font size, reduce motion, high contrast, scrollbar) ---
|
|
159
|
+
function initSettings() {
|
|
160
|
+
var settings = document.querySelector('[data-settings]');
|
|
161
|
+
if (!settings) return;
|
|
162
|
+
var overlay = settings.querySelector('[data-settings-overlay]');
|
|
163
|
+
var panel = settings.querySelector('.settings__panel');
|
|
164
|
+
var closeBtn = settings.querySelector('[data-settings-close]');
|
|
165
|
+
var fontSizeSlider = settings.querySelector('[data-font-size-slider]');
|
|
166
|
+
var fontSizeValue = settings.querySelector('[data-font-size-value]');
|
|
167
|
+
var reducedMotion = settings.querySelector('[data-reduced-motion]');
|
|
168
|
+
var highContrast = settings.querySelector('[data-high-contrast]');
|
|
169
|
+
var scrollbarStyleRadios = settings.querySelectorAll('[data-scrollbar-style]');
|
|
170
|
+
var html = document.documentElement;
|
|
171
|
+
if (!panel || !overlay || !closeBtn) return;
|
|
172
|
+
function updateSliderProgress(slider) {
|
|
173
|
+
var min = parseFloat(slider.min), max = parseFloat(slider.max), value = parseFloat(slider.value);
|
|
174
|
+
slider.style.setProperty('--slider-progress', ((value - min) / (max - min)) * 100 + '%');
|
|
175
|
+
}
|
|
176
|
+
function applyFontSize(scale) {
|
|
177
|
+
html.style.setProperty('--font-size-scale', scale);
|
|
178
|
+
if (fontSizeValue) fontSizeValue.textContent = Math.round(scale * 100) + '%';
|
|
179
|
+
}
|
|
180
|
+
function applyScrollbarStyle(style) {
|
|
181
|
+
html.classList.remove('scrollbar-thin', 'scrollbar-thick', 'scrollbar-hidden', 'hide-scrollbars');
|
|
182
|
+
if (style === 'thick') html.classList.add('scrollbar-thick');
|
|
183
|
+
else if (style === 'hidden') html.classList.add('scrollbar-hidden', 'hide-scrollbars');
|
|
184
|
+
}
|
|
185
|
+
function loadSettings() {
|
|
186
|
+
var saved = localStorage.getItem('fontSizeScale');
|
|
187
|
+
if (saved && fontSizeSlider) {
|
|
188
|
+
fontSizeSlider.value = saved;
|
|
189
|
+
applyFontSize(parseFloat(saved));
|
|
190
|
+
}
|
|
191
|
+
if (fontSizeSlider) updateSliderProgress(fontSizeSlider);
|
|
192
|
+
if (reducedMotion) {
|
|
193
|
+
reducedMotion.checked = localStorage.getItem('reducedMotion') === 'true';
|
|
194
|
+
html.classList.toggle('reduced-motion', reducedMotion.checked);
|
|
195
|
+
}
|
|
196
|
+
if (highContrast) {
|
|
197
|
+
highContrast.checked = localStorage.getItem('highContrast') === 'true';
|
|
198
|
+
html.classList.toggle('high-contrast', highContrast.checked);
|
|
199
|
+
}
|
|
200
|
+
var scrollbar = localStorage.getItem('scrollbarStyle') || 'thin';
|
|
201
|
+
for (var i = 0; i < scrollbarStyleRadios.length; i++) {
|
|
202
|
+
if (scrollbarStyleRadios[i].value === scrollbar) scrollbarStyleRadios[i].checked = true;
|
|
203
|
+
}
|
|
204
|
+
applyScrollbarStyle(scrollbar);
|
|
205
|
+
}
|
|
206
|
+
function getFocusable(container) {
|
|
207
|
+
var sel = 'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
208
|
+
return Array.prototype.slice.call(container.querySelectorAll(sel));
|
|
209
|
+
}
|
|
210
|
+
var previousActive = null;
|
|
211
|
+
function openSettings() {
|
|
212
|
+
previousActive = document.activeElement;
|
|
213
|
+
settings.setAttribute('aria-hidden', 'false');
|
|
214
|
+
overlay.setAttribute('aria-hidden', 'false');
|
|
215
|
+
panel.setAttribute('aria-hidden', 'false');
|
|
216
|
+
panel.removeAttribute('data-open');
|
|
217
|
+
void panel.offsetHeight;
|
|
218
|
+
requestAnimationFrame(function () {
|
|
219
|
+
requestAnimationFrame(function () {
|
|
220
|
+
panel.setAttribute('data-open', 'true');
|
|
221
|
+
if (closeBtn) closeBtn.focus();
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
function closeSettings() {
|
|
226
|
+
panel.removeAttribute('data-open');
|
|
227
|
+
var duration = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300;
|
|
228
|
+
setTimeout(function () {
|
|
229
|
+
settings.setAttribute('aria-hidden', 'true');
|
|
230
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
231
|
+
panel.setAttribute('aria-hidden', 'true');
|
|
232
|
+
if (previousActive) {
|
|
233
|
+
previousActive.focus();
|
|
234
|
+
previousActive = null;
|
|
235
|
+
}
|
|
236
|
+
}, duration);
|
|
237
|
+
}
|
|
238
|
+
closeBtn.addEventListener('click', closeSettings);
|
|
239
|
+
overlay.addEventListener('click', closeSettings);
|
|
240
|
+
document.addEventListener('keydown', function (e) {
|
|
241
|
+
if (panel.getAttribute('data-open') !== 'true') return;
|
|
242
|
+
if (e.key === 'Escape') { e.preventDefault(); closeSettings(); return; }
|
|
243
|
+
if (e.key === 'Tab') {
|
|
244
|
+
var els = getFocusable(panel);
|
|
245
|
+
if (els.length === 0) return;
|
|
246
|
+
var first = els[0], last = els[els.length - 1], active = document.activeElement;
|
|
247
|
+
if (e.shiftKey) {
|
|
248
|
+
if (active === first || !panel.contains(active)) { e.preventDefault(); last.focus(); }
|
|
249
|
+
} else {
|
|
250
|
+
if (active === last || !panel.contains(active)) { e.preventDefault(); first.focus(); }
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
if (fontSizeSlider) {
|
|
255
|
+
fontSizeSlider.addEventListener('input', function () {
|
|
256
|
+
var scale = parseFloat(this.value);
|
|
257
|
+
applyFontSize(scale);
|
|
258
|
+
updateSliderProgress(this);
|
|
259
|
+
localStorage.setItem('fontSizeScale', scale);
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
if (reducedMotion) {
|
|
263
|
+
reducedMotion.addEventListener('change', function () {
|
|
264
|
+
html.classList.toggle('reduced-motion', this.checked);
|
|
265
|
+
localStorage.setItem('reducedMotion', this.checked);
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
if (highContrast) {
|
|
269
|
+
highContrast.addEventListener('change', function () {
|
|
270
|
+
html.classList.toggle('high-contrast', this.checked);
|
|
271
|
+
localStorage.setItem('highContrast', this.checked);
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
for (var j = 0; j < scrollbarStyleRadios.length; j++) {
|
|
275
|
+
scrollbarStyleRadios[j].addEventListener('change', function () {
|
|
276
|
+
if (this.checked) {
|
|
277
|
+
applyScrollbarStyle(this.value);
|
|
278
|
+
localStorage.setItem('scrollbarStyle', this.value);
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
}
|
|
282
|
+
loadSettings();
|
|
283
|
+
window.openSettings = openSettings;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// --- Tabs: init all [data-tabs] ---
|
|
287
|
+
function initTabs() {
|
|
288
|
+
document.querySelectorAll('[data-tabs]').forEach(function (tabsContainer) {
|
|
289
|
+
if (tabsContainer.getAttribute('data-rizzo-tabs-inited')) return;
|
|
290
|
+
tabsContainer.setAttribute('data-rizzo-tabs-inited', 'true');
|
|
291
|
+
var tabButtons = tabsContainer.querySelectorAll('[role="tab"]');
|
|
292
|
+
var tabPanels = tabsContainer.querySelectorAll('[role="tabpanel"]');
|
|
293
|
+
if (tabButtons.length === 0 || tabPanels.length === 0) return;
|
|
294
|
+
var activeIndex = -1;
|
|
295
|
+
for (var i = 0; i < tabButtons.length; i++) {
|
|
296
|
+
if (tabButtons[i].classList.contains('tabs__tab--active')) { activeIndex = i; break; }
|
|
297
|
+
}
|
|
298
|
+
if (activeIndex === -1) activeIndex = 0;
|
|
299
|
+
function activateTab(index) {
|
|
300
|
+
if (index < 0 || index >= tabButtons.length) return;
|
|
301
|
+
var targetButton = tabButtons[index];
|
|
302
|
+
var targetTabId = targetButton.getAttribute('data-tab-id');
|
|
303
|
+
if (!targetTabId) return;
|
|
304
|
+
for (var i = 0; i < tabButtons.length; i++) {
|
|
305
|
+
var isActive = i === index;
|
|
306
|
+
tabButtons[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
|
|
307
|
+
tabButtons[i].setAttribute('tabindex', isActive ? '0' : '-1');
|
|
308
|
+
tabButtons[i].classList.toggle('tabs__tab--active', isActive);
|
|
309
|
+
}
|
|
310
|
+
for (var p = 0; p < tabPanels.length; p++) {
|
|
311
|
+
var panelId = tabPanels[p].getAttribute('data-panel-id');
|
|
312
|
+
var isActive = panelId === targetTabId;
|
|
313
|
+
tabPanels[p].setAttribute('aria-hidden', isActive ? 'false' : 'true');
|
|
314
|
+
tabPanels[p].classList.toggle('tabs__panel--active', isActive);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
for (var i = 0; i < tabButtons.length; i++) {
|
|
318
|
+
(function (idx) {
|
|
319
|
+
tabButtons[idx].addEventListener('click', function () { activateTab(idx); });
|
|
320
|
+
tabButtons[idx].addEventListener('keydown', function (e) {
|
|
321
|
+
var targetIndex = idx;
|
|
322
|
+
switch (e.key) {
|
|
323
|
+
case 'ArrowRight':
|
|
324
|
+
case 'ArrowDown':
|
|
325
|
+
e.preventDefault();
|
|
326
|
+
targetIndex = (idx + 1) % tabButtons.length;
|
|
327
|
+
break;
|
|
328
|
+
case 'ArrowLeft':
|
|
329
|
+
case 'ArrowUp':
|
|
330
|
+
e.preventDefault();
|
|
331
|
+
targetIndex = idx === 0 ? tabButtons.length - 1 : idx - 1;
|
|
332
|
+
break;
|
|
333
|
+
case 'Home':
|
|
334
|
+
e.preventDefault();
|
|
335
|
+
targetIndex = 0;
|
|
336
|
+
break;
|
|
337
|
+
case 'End':
|
|
338
|
+
e.preventDefault();
|
|
339
|
+
targetIndex = tabButtons.length - 1;
|
|
340
|
+
break;
|
|
341
|
+
case 'Enter':
|
|
342
|
+
case ' ':
|
|
343
|
+
e.preventDefault();
|
|
344
|
+
activateTab(idx);
|
|
345
|
+
return;
|
|
346
|
+
default:
|
|
347
|
+
return;
|
|
348
|
+
}
|
|
349
|
+
activateTab(targetIndex);
|
|
350
|
+
tabButtons[targetIndex].focus();
|
|
351
|
+
});
|
|
352
|
+
})(i);
|
|
353
|
+
}
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
// --- Modal: [data-modal-open="modalId"] opens #modalId, #modalId-overlay, [data-modal-close] ---
|
|
358
|
+
function initModals() {
|
|
359
|
+
var inited = {};
|
|
360
|
+
function initModal(modalId) {
|
|
361
|
+
if (inited[modalId]) return;
|
|
362
|
+
var modal = document.getElementById(modalId);
|
|
363
|
+
var overlay = document.getElementById(modalId + '-overlay');
|
|
364
|
+
if (!modal || !overlay) return;
|
|
365
|
+
var closeBtn = modal.querySelector('[data-modal-close]');
|
|
366
|
+
if (!closeBtn) return;
|
|
367
|
+
inited[modalId] = true;
|
|
368
|
+
modal.setAttribute('data-rizzo-modal-inited', 'true');
|
|
369
|
+
var focusableSelectors = 'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
370
|
+
function getFocusable(container) {
|
|
371
|
+
return Array.prototype.slice.call(container.querySelectorAll(focusableSelectors));
|
|
372
|
+
}
|
|
373
|
+
var previousActive = null;
|
|
374
|
+
var focusTrapHandler = null;
|
|
375
|
+
function openModal() {
|
|
376
|
+
previousActive = document.activeElement;
|
|
377
|
+
modal.setAttribute('aria-hidden', 'false');
|
|
378
|
+
overlay.setAttribute('aria-hidden', 'false');
|
|
379
|
+
modal.setAttribute('data-open', 'true');
|
|
380
|
+
var focusable = getFocusable(modal);
|
|
381
|
+
var first = focusable.length ? focusable[0] : closeBtn;
|
|
382
|
+
if (first) setTimeout(function () { first.focus(); }, 0);
|
|
383
|
+
focusTrapHandler = function (e) {
|
|
384
|
+
if (modal.getAttribute('data-open') !== 'true') return;
|
|
385
|
+
if (e.key === 'Escape') { e.preventDefault(); closeModal(); return; }
|
|
386
|
+
if (e.key === 'Tab') {
|
|
387
|
+
var els = getFocusable(modal);
|
|
388
|
+
if (els.length === 0) return;
|
|
389
|
+
var firstEl = els[0], lastEl = els[els.length - 1], active = document.activeElement;
|
|
390
|
+
if (e.shiftKey) {
|
|
391
|
+
if (active === firstEl || !modal.contains(active)) { e.preventDefault(); lastEl.focus(); }
|
|
392
|
+
} else {
|
|
393
|
+
if (active === lastEl || !modal.contains(active)) { e.preventDefault(); firstEl.focus(); }
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
document.addEventListener('keydown', focusTrapHandler);
|
|
398
|
+
}
|
|
399
|
+
function closeModal() {
|
|
400
|
+
modal.setAttribute('aria-hidden', 'true');
|
|
401
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
402
|
+
modal.removeAttribute('data-open');
|
|
403
|
+
if (focusTrapHandler) {
|
|
404
|
+
document.removeEventListener('keydown', focusTrapHandler);
|
|
405
|
+
focusTrapHandler = null;
|
|
406
|
+
}
|
|
407
|
+
if (previousActive) { previousActive.focus(); previousActive = null; }
|
|
408
|
+
}
|
|
409
|
+
closeBtn.addEventListener('click', closeModal);
|
|
410
|
+
overlay.addEventListener('click', function (e) {
|
|
411
|
+
if (e.target === overlay) closeModal();
|
|
412
|
+
});
|
|
413
|
+
var idSafe = modalId.replace(/-/g, '_');
|
|
414
|
+
window['openModal_' + idSafe] = openModal;
|
|
415
|
+
window['closeModal_' + idSafe] = closeModal;
|
|
416
|
+
}
|
|
417
|
+
document.querySelectorAll('[data-modal-close]').forEach(function (closeBtn) {
|
|
418
|
+
var modal = closeBtn.closest ? closeBtn.closest('[role="dialog"]') : null;
|
|
419
|
+
if (modal && modal.id) initModal(modal.id);
|
|
420
|
+
});
|
|
421
|
+
document.querySelectorAll('[data-modal-open]').forEach(function (btn) {
|
|
422
|
+
var modalId = btn.getAttribute('data-modal-open');
|
|
423
|
+
if (!modalId) return;
|
|
424
|
+
initModal(modalId);
|
|
425
|
+
var openModalFn = window['openModal_' + modalId.replace(/-/g, '_')];
|
|
426
|
+
if (openModalFn) btn.addEventListener('click', function () { openModalFn(); });
|
|
427
|
+
});
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
// --- Dropdown: init all [data-dropdown] ---
|
|
431
|
+
function initDropdowns() {
|
|
432
|
+
var dropdowns = document.querySelectorAll('[data-dropdown]');
|
|
433
|
+
dropdowns.forEach(function (dropdown) {
|
|
434
|
+
var dropdownId = dropdown.getAttribute('data-dropdown');
|
|
435
|
+
if (!dropdownId) return;
|
|
436
|
+
if (dropdown.hasAttribute('data-dropdown-initialized')) return;
|
|
437
|
+
dropdown.setAttribute('data-dropdown-initialized', 'true');
|
|
438
|
+
var trigger = dropdown.querySelector('.dropdown__trigger');
|
|
439
|
+
var menu = dropdown.querySelector('.dropdown__menu');
|
|
440
|
+
var items = dropdown.querySelectorAll('.dropdown__item');
|
|
441
|
+
var itemWrappers = dropdown.querySelectorAll('.dropdown__item-wrapper');
|
|
442
|
+
if (!trigger || !menu) return;
|
|
443
|
+
var currentIndex = -1;
|
|
444
|
+
function getVisibleItems() {
|
|
445
|
+
return Array.prototype.filter.call(items, function (item) {
|
|
446
|
+
var disabled = item.getAttribute('aria-disabled') === 'true';
|
|
447
|
+
var wrapper = item.closest('.dropdown__item-wrapper');
|
|
448
|
+
var submenu = wrapper ? wrapper.querySelector('.dropdown__submenu') : null;
|
|
449
|
+
if (submenu && item.closest('.dropdown__submenu')) return false;
|
|
450
|
+
return !disabled && (item.offsetParent !== null || menu.classList.contains('dropdown__menu--open'));
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
function closeAllSubmenus(exceptWrapper) {
|
|
454
|
+
for (var w = 0; w < itemWrappers.length; w++) {
|
|
455
|
+
if (itemWrappers[w] === exceptWrapper) continue;
|
|
456
|
+
var sub = itemWrappers[w].querySelector('.dropdown__submenu');
|
|
457
|
+
var it = itemWrappers[w].querySelector('.dropdown__item');
|
|
458
|
+
if (sub && it) {
|
|
459
|
+
sub.classList.remove('dropdown__submenu--open');
|
|
460
|
+
sub.setAttribute('aria-hidden', 'true');
|
|
461
|
+
it.setAttribute('aria-expanded', 'false');
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
function toggleSubmenu(wrapper, open) {
|
|
466
|
+
var submenu = wrapper.querySelector('.dropdown__submenu');
|
|
467
|
+
var item = wrapper.querySelector('.dropdown__item');
|
|
468
|
+
if (!submenu || !item) return;
|
|
469
|
+
var isOpen = open !== undefined ? open : submenu.classList.contains('dropdown__submenu--open');
|
|
470
|
+
var willBeOpen = !isOpen;
|
|
471
|
+
if (willBeOpen) {
|
|
472
|
+
var parentSub = wrapper.closest('.dropdown__submenu');
|
|
473
|
+
if (parentSub) {
|
|
474
|
+
var siblings = parentSub.querySelectorAll('.dropdown__item-wrapper');
|
|
475
|
+
for (var s = 0; s < siblings.length; s++) {
|
|
476
|
+
if (siblings[s] === wrapper) continue;
|
|
477
|
+
var sSub = siblings[s].querySelector('.dropdown__submenu');
|
|
478
|
+
var sItem = siblings[s].querySelector('.dropdown__item');
|
|
479
|
+
if (sSub && sItem) {
|
|
480
|
+
sSub.classList.remove('dropdown__submenu--open');
|
|
481
|
+
sSub.setAttribute('aria-hidden', 'true');
|
|
482
|
+
sItem.setAttribute('aria-expanded', 'false');
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
} else {
|
|
486
|
+
closeAllSubmenus(wrapper);
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
if (willBeOpen) {
|
|
490
|
+
submenu.classList.add('dropdown__submenu--open');
|
|
491
|
+
submenu.setAttribute('aria-hidden', 'false');
|
|
492
|
+
item.setAttribute('aria-expanded', 'true');
|
|
493
|
+
} else {
|
|
494
|
+
submenu.classList.remove('dropdown__submenu--open');
|
|
495
|
+
submenu.setAttribute('aria-hidden', 'true');
|
|
496
|
+
item.setAttribute('aria-expanded', 'false');
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
function toggleMenu(open) {
|
|
500
|
+
var isOpen = open !== undefined ? open : menu.classList.contains('dropdown__menu--open');
|
|
501
|
+
var willBeOpen = !isOpen;
|
|
502
|
+
menu.classList.toggle('dropdown__menu--open', willBeOpen);
|
|
503
|
+
trigger.setAttribute('aria-expanded', willBeOpen.toString());
|
|
504
|
+
menu.setAttribute('aria-hidden', (!willBeOpen).toString());
|
|
505
|
+
for (var i = 0; i < items.length; i++) items[i].setAttribute('tabindex', willBeOpen ? '0' : '-1');
|
|
506
|
+
if (!willBeOpen) {
|
|
507
|
+
trigger.focus();
|
|
508
|
+
currentIndex = -1;
|
|
509
|
+
closeAllSubmenus();
|
|
510
|
+
} else {
|
|
511
|
+
var vis = getVisibleItems();
|
|
512
|
+
if (vis.length > 0) {
|
|
513
|
+
currentIndex = 0;
|
|
514
|
+
setTimeout(function () { vis[0].focus(); }, 0);
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
function closeMenu() {
|
|
519
|
+
menu.classList.remove('dropdown__menu--open');
|
|
520
|
+
trigger.setAttribute('aria-expanded', 'false');
|
|
521
|
+
menu.setAttribute('aria-hidden', 'true');
|
|
522
|
+
for (var i = 0; i < items.length; i++) items[i].setAttribute('tabindex', '-1');
|
|
523
|
+
closeAllSubmenus();
|
|
524
|
+
currentIndex = -1;
|
|
525
|
+
}
|
|
526
|
+
function handleOutsideClick(e) {
|
|
527
|
+
if (e && e.target && !dropdown.contains(e.target)) {
|
|
528
|
+
closeMenu();
|
|
529
|
+
document.removeEventListener('click', handleOutsideClick);
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
function wrappedToggle(open) {
|
|
533
|
+
var was = menu.classList.contains('dropdown__menu--open');
|
|
534
|
+
toggleMenu(open);
|
|
535
|
+
var now = menu.classList.contains('dropdown__menu--open');
|
|
536
|
+
if (now && !was) setTimeout(function () { document.addEventListener('click', handleOutsideClick); }, 0);
|
|
537
|
+
else if (!now && was) document.removeEventListener('click', handleOutsideClick);
|
|
538
|
+
}
|
|
539
|
+
trigger.addEventListener('click', function () { wrappedToggle(undefined); });
|
|
540
|
+
menu.addEventListener('click', function (e) {
|
|
541
|
+
var target = e.target;
|
|
542
|
+
var item = target.closest ? target.closest('.dropdown__item') : null;
|
|
543
|
+
if (!item) return;
|
|
544
|
+
e.stopPropagation();
|
|
545
|
+
if (item.getAttribute('aria-disabled') === 'true') { e.preventDefault(); return; }
|
|
546
|
+
var wrapper = item.closest('.dropdown__item-wrapper');
|
|
547
|
+
if (wrapper) {
|
|
548
|
+
var sub = wrapper.querySelector('.dropdown__submenu');
|
|
549
|
+
if (sub) {
|
|
550
|
+
e.preventDefault();
|
|
551
|
+
e.stopImmediatePropagation();
|
|
552
|
+
toggleSubmenu(wrapper, undefined);
|
|
553
|
+
return;
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
var href = item.getAttribute('data-dropdown-href');
|
|
557
|
+
if (href) { window.location.href = href; }
|
|
558
|
+
var onClick = item.getAttribute('data-dropdown-onclick');
|
|
559
|
+
if (onClick && typeof window[onClick] === 'function') {
|
|
560
|
+
var val = item.getAttribute('data-dropdown-value') || item.textContent.trim() || '';
|
|
561
|
+
window[onClick](val);
|
|
562
|
+
}
|
|
563
|
+
closeMenu();
|
|
564
|
+
});
|
|
565
|
+
trigger.addEventListener('keydown', function (e) {
|
|
566
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
567
|
+
e.preventDefault();
|
|
568
|
+
wrappedToggle(undefined);
|
|
569
|
+
} else if (e.key === 'ArrowDown') {
|
|
570
|
+
e.preventDefault();
|
|
571
|
+
var vis = getVisibleItems();
|
|
572
|
+
if (vis.length > 0) {
|
|
573
|
+
currentIndex = 0;
|
|
574
|
+
wrappedToggle(true);
|
|
575
|
+
setTimeout(function () { vis[0].focus(); }, 0);
|
|
576
|
+
}
|
|
577
|
+
} else if (e.key === 'ArrowUp') {
|
|
578
|
+
e.preventDefault();
|
|
579
|
+
var vis = getVisibleItems();
|
|
580
|
+
if (vis.length > 0) {
|
|
581
|
+
currentIndex = vis.length - 1;
|
|
582
|
+
wrappedToggle(true);
|
|
583
|
+
setTimeout(function () { vis[currentIndex].focus(); }, 0);
|
|
584
|
+
}
|
|
585
|
+
} else if (e.key === 'Escape') {
|
|
586
|
+
e.preventDefault();
|
|
587
|
+
closeMenu();
|
|
588
|
+
}
|
|
589
|
+
});
|
|
590
|
+
menu.addEventListener('keydown', function (e) {
|
|
591
|
+
var vis = getVisibleItems();
|
|
592
|
+
if (e.key === 'Escape') {
|
|
593
|
+
e.preventDefault();
|
|
594
|
+
closeMenu();
|
|
595
|
+
trigger.focus();
|
|
596
|
+
} else if (e.key === 'ArrowDown') {
|
|
597
|
+
e.preventDefault();
|
|
598
|
+
currentIndex = (currentIndex + 1) % vis.length;
|
|
599
|
+
vis[currentIndex].focus();
|
|
600
|
+
} else if (e.key === 'ArrowUp') {
|
|
601
|
+
e.preventDefault();
|
|
602
|
+
currentIndex = currentIndex <= 0 ? vis.length - 1 : currentIndex - 1;
|
|
603
|
+
vis[currentIndex].focus();
|
|
604
|
+
} else if (e.key === 'Home') {
|
|
605
|
+
e.preventDefault();
|
|
606
|
+
currentIndex = 0;
|
|
607
|
+
vis[0].focus();
|
|
608
|
+
} else if (e.key === 'End') {
|
|
609
|
+
e.preventDefault();
|
|
610
|
+
currentIndex = vis.length - 1;
|
|
611
|
+
vis[currentIndex].focus();
|
|
612
|
+
} else if (e.key === 'ArrowRight') {
|
|
613
|
+
var t = e.target;
|
|
614
|
+
if (t && t.closest) {
|
|
615
|
+
var w = t.closest('.dropdown__item-wrapper');
|
|
616
|
+
if (w) {
|
|
617
|
+
var sub = w.querySelector('.dropdown__submenu');
|
|
618
|
+
if (sub) {
|
|
619
|
+
e.preventDefault();
|
|
620
|
+
toggleSubmenu(w, true);
|
|
621
|
+
var first = sub.querySelector('.dropdown__item');
|
|
622
|
+
if (first) setTimeout(function () { first.focus(); }, 0);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
} else if (e.key === 'ArrowLeft') {
|
|
627
|
+
var t = e.target;
|
|
628
|
+
if (t && t.closest) {
|
|
629
|
+
var sub = t.closest('.dropdown__submenu');
|
|
630
|
+
if (sub) {
|
|
631
|
+
e.preventDefault();
|
|
632
|
+
var w = sub.closest('.dropdown__item-wrapper');
|
|
633
|
+
if (w) {
|
|
634
|
+
toggleSubmenu(w, false);
|
|
635
|
+
var p = w.querySelector('.dropdown__item');
|
|
636
|
+
if (p) p.focus();
|
|
637
|
+
}
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
} else if (e.key === 'Enter' || e.key === ' ') {
|
|
641
|
+
e.preventDefault();
|
|
642
|
+
var t = e.target;
|
|
643
|
+
if (t && t.getAttribute && t.getAttribute('aria-disabled') !== 'true') {
|
|
644
|
+
var w = t.closest('.dropdown__item-wrapper');
|
|
645
|
+
var sub = w ? w.querySelector('.dropdown__submenu') : null;
|
|
646
|
+
if (sub) toggleSubmenu(w, undefined);
|
|
647
|
+
else {
|
|
648
|
+
if (t.tagName === 'A') t.click();
|
|
649
|
+
else if (t.tagName === 'BUTTON') t.click();
|
|
650
|
+
closeMenu();
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
} else if (e.key === 'Tab') {
|
|
654
|
+
closeMenu();
|
|
655
|
+
}
|
|
656
|
+
});
|
|
657
|
+
});
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
// --- Accordion: init all [data-accordion] ---
|
|
661
|
+
function initAccordions() {
|
|
662
|
+
function initOne(accordion) {
|
|
663
|
+
if (accordion.getAttribute('data-accordion-init') === 'true') return;
|
|
664
|
+
accordion.setAttribute('data-accordion-init', 'true');
|
|
665
|
+
var isMultiple = accordion.getAttribute('data-allow-multiple') === 'true';
|
|
666
|
+
var triggers = accordion.querySelectorAll('[data-accordion-trigger]');
|
|
667
|
+
function setExpanded(trigger, expanded) {
|
|
668
|
+
var panelId = trigger.getAttribute('aria-controls');
|
|
669
|
+
var panel = panelId ? accordion.querySelector('#' + CSS.escape(panelId)) : null;
|
|
670
|
+
trigger.setAttribute('aria-expanded', String(expanded));
|
|
671
|
+
trigger.classList.toggle('accordion__trigger--expanded', expanded);
|
|
672
|
+
if (panel) {
|
|
673
|
+
panel.classList.toggle('accordion__panel--expanded', expanded);
|
|
674
|
+
panel.hidden = !expanded;
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
function toggle(trigger) {
|
|
678
|
+
var expanded = trigger.getAttribute('aria-expanded') === 'true';
|
|
679
|
+
if (!isMultiple) {
|
|
680
|
+
for (var i = 0; i < triggers.length; i++) setExpanded(triggers[i], false);
|
|
681
|
+
}
|
|
682
|
+
setExpanded(trigger, !expanded);
|
|
683
|
+
}
|
|
684
|
+
for (var i = 0; i < triggers.length; i++) {
|
|
685
|
+
triggers[i].addEventListener('click', function () { toggle(this); });
|
|
686
|
+
}
|
|
687
|
+
for (var i = 0; i < triggers.length; i++) {
|
|
688
|
+
(function (idx) {
|
|
689
|
+
triggers[idx].addEventListener('keydown', function (e) {
|
|
690
|
+
var targetIndex = idx;
|
|
691
|
+
switch (e.key) {
|
|
692
|
+
case 'ArrowDown':
|
|
693
|
+
e.preventDefault();
|
|
694
|
+
targetIndex = Math.min(idx + 1, triggers.length - 1);
|
|
695
|
+
break;
|
|
696
|
+
case 'ArrowUp':
|
|
697
|
+
e.preventDefault();
|
|
698
|
+
targetIndex = Math.max(idx - 1, 0);
|
|
699
|
+
break;
|
|
700
|
+
case 'Home':
|
|
701
|
+
e.preventDefault();
|
|
702
|
+
targetIndex = 0;
|
|
703
|
+
break;
|
|
704
|
+
case 'End':
|
|
705
|
+
e.preventDefault();
|
|
706
|
+
targetIndex = triggers.length - 1;
|
|
707
|
+
break;
|
|
708
|
+
case 'Enter':
|
|
709
|
+
case ' ':
|
|
710
|
+
e.preventDefault();
|
|
711
|
+
toggle(triggers[idx]);
|
|
712
|
+
return;
|
|
713
|
+
default:
|
|
714
|
+
return;
|
|
715
|
+
}
|
|
716
|
+
if (targetIndex !== idx) triggers[targetIndex].focus();
|
|
717
|
+
});
|
|
718
|
+
})(i);
|
|
719
|
+
}
|
|
720
|
+
var slotContent = accordion.querySelector('.accordion__slot-content');
|
|
721
|
+
if (slotContent) {
|
|
722
|
+
var slotChildren = Array.prototype.slice.call(slotContent.children);
|
|
723
|
+
for (var i = 0; i < slotChildren.length; i++) {
|
|
724
|
+
var placeholder = accordion.querySelector('[data-accordion-slot-index="' + i + '"]');
|
|
725
|
+
if (placeholder) placeholder.appendChild(slotChildren[i]);
|
|
726
|
+
}
|
|
727
|
+
slotContent.remove();
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
document.querySelectorAll('[data-accordion]').forEach(initOne);
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
function run() {
|
|
734
|
+
initTheme();
|
|
735
|
+
initSettings();
|
|
736
|
+
initTabs();
|
|
737
|
+
initModals();
|
|
738
|
+
initDropdowns();
|
|
739
|
+
initAccordions();
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
if (document.readyState === 'loading') {
|
|
743
|
+
document.addEventListener('DOMContentLoaded', run);
|
|
744
|
+
} else {
|
|
745
|
+
run();
|
|
746
|
+
}
|
|
747
|
+
})();
|