@zanichelli/albe-web-components 16.3.0 → 16.3.1

package/dist/cjs/z-info-reveal.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 const index$1 = require('./index-bab7a651.js');
 
 const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}";
@@ -50,7 +50,7 @@ const ZInfoReveal = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f6264a965cec2cac4e38ce1ffb8e6738f3b1fcd4', open: this.open }, index.h("button", { key: 'fdeac683e761204c28a6f9a017062a2bf86a06d6', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && index.h("z-icon", { key: 'ea75d8979c67562f88768aa02e237883f0ea89f8', name: this.icon }), this.label && index.h("span", { key: '4e37cd8bdb878f083682f65ac592b15af04d48e4', class: "z-info-reveal-label" }, this.label)), index.h("div", { key: '1808554bf404059a691058c5069c7e3bddf8e50f', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, index.h("slot", { key: 'b1aca025f4e3fe0e27ebe28b0faaf37971cb2c32' }), index.h("button", { key: '9037710ed3fc0f2972dbe263b0d5df120373b34a', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, index.h("z-icon", { key: 'f0cc7e4778dfa59623c32b02c69b0aed00892aeb', name: "multiply" })))));
+        return (index.h(index.Host, { key: '26f1289a1592702b470934f4d9fe38c34039a013', open: this.open }, index.h("button", { key: '970af3aaf1e9460ee380249de460389f1bdfdfda', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && index.h("z-icon", { key: '396653feab94053d64b2157d4a79699d54cf5cf5', name: this.icon }), this.label && index.h("span", { key: '785319a805aecdf9f8c2ffa5f451c0f2868c5df3', class: "z-info-reveal-label" }, this.label)), index.h("div", { key: '729762b03fd3d2fb73914ed9a46d2634ff6b8d0b', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, index.h("slot", { key: 'a16a68e1e7c4b1bcb10e69d1fe48fbe5f8dfda26' }), index.h("button", { key: 'e91b170b87e62dab979876413aad47bdb5e9d758', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, index.h("z-icon", { key: '772445e4bc3895c5c0328a5e7adca8994324c471', name: "multiply" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-logo.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 
 const stylesCss = ":host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";
 const ZLogoStyle0 = stylesCss;
@@ -25,7 +25,7 @@ const ZLogo = class {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (index.h(index.Host, { key: 'ed2dc5272d8e229b9d329b5425611ee504286a75', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (index.h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, index.h("img", { alt: this.imageAlt }))) : (index.h("img", { alt: this.imageAlt }))));
+        return (index.h(index.Host, { key: '62a2be82e036760d34d812904b967ac96a22604a', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (index.h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, index.h("img", { alt: this.imageAlt }))) : (index.h("img", { alt: this.imageAlt }))));
     }
 };
 ZLogo.style = ZLogoStyle0;

package/dist/cjs/z-menu-deprecated.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 
 const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuDeprecatedStyle0 = stylesCss;

package/dist/cjs/z-menu-section-deprecated.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e801ae96.js');
+const index = require('./index-96af6326.js');
 
 const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuSectionDeprecatedStyle0 = stylesCss;

package/dist/cjs/z-menu-section.cjs.entry.js

@@ -2,121 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e801ae96.js');
-const index$1 = require('./index-bab7a651.js');
+const index$1 = require('./index-96af6326.js');
+const index = require('./index-bab7a651.js');
 
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"section\"]:hover),.items>::slotted([slot=\"section\"]:focus:focus-visible),.items>::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-secondary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot=\"section\"]:last-of-type){border:none}::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}::slotted([slot=\"section\"]:hover),::slotted([slot=\"section\"]:focus:focus-visible),::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuSectionStyle0 = stylesCss;
 
 const ZMenuSection = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.opened = index.createEvent(this, "opened", 7);
-        this.closed = index.createEvent(this, "closed", 7);
-        this.currentIndex = -1;
-        this.currentCanvasOpenStatus = false;
-        this.active = undefined;
-        this.open = undefined;
-        this.hasContent = undefined;
-    }
-    canvasOpenStatusChanged(e) {
-        this.currentCanvasOpenStatus = e.detail;
-    }
-    handleKeyDown(e) {
-        if (e.code === index$1.KeyboardCode.ENTER) {
-            return;
-        }
-        if (this.open && !this.currentCanvasOpenStatus) {
-            this.handleNavigationSideArrow(e);
-        }
-        this.handleArrowsNav(e);
-    }
-    handleNavigationSideArrow(e) {
-        if (e.code !== index$1.KeyboardCode.ARROW_RIGHT && e.code !== index$1.KeyboardCode.ARROW_LEFT) {
-            return;
-        }
-        if (e.code === index$1.KeyboardCode.ARROW_RIGHT) {
-            const nextElement = this.hostElement.parentElement.nextElementSibling;
-            if (nextElement) {
-                const menuButton = nextElement.shadowRoot.querySelector(".menu-label");
-                console.log(this.hostElement.parentElement);
-                menuButton.focus();
-            }
-            this.open = false;
-            nextElement.setAttribute("open", "true");
-        }
-        else if (e.code === index$1.KeyboardCode.ARROW_LEFT) {
-            const prevElement = this.hostElement.parentElement.previousElementSibling;
-            if (prevElement) {
-                const menuButton = prevElement.shadowRoot.querySelector(".menu-label");
-                menuButton.focus();
-            }
-            prevElement.setAttribute("open", "true");
-            this.open = false;
-        }
-    }
-    handleArrowsNav(e) {
-        const menuItems = Array.from(this.hostElement.querySelectorAll('[slot="section"]'));
-        if (this.open) {
-            e.preventDefault();
-            e.stopPropagation();
-            if (e.code === index$1.KeyboardCode.ARROW_DOWN || e.code === index$1.KeyboardCode.ARROW_UP) {
-                let nextFocusableItem;
-                // INFO: reset focus on all menu items
-                menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
-                if (e.code === index$1.KeyboardCode.ARROW_DOWN) {
-                    nextFocusableItem = this.getNextItem(menuItems, 1);
-                }
-                else if (e.code === index$1.KeyboardCode.ARROW_UP) {
-                    nextFocusableItem = this.getNextItem(menuItems, -1);
-                }
-                if (nextFocusableItem) {
-                    nextFocusableItem.setAttribute("tabindex", "0");
-                    nextFocusableItem.focus();
-                }
-            }
-            else if (e.code === index$1.KeyboardCode.ESC) {
-                this.focusToParentAndCloseMenu();
-            }
-            else if (e.shiftKey && e.code === index$1.KeyboardCode.TAB) {
-                this.focusToParentAndCloseMenu();
-            }
-        }
-    }
-    getNextItem(menuItems, direction) {
-        if (this.currentIndex === -1) {
-            this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;
-            return menuItems[this.currentIndex];
-        }
-        this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;
-        return menuItems[this.currentIndex];
-    }
-    focusToParentAndCloseMenu() {
-        const menuButton = this.hostElement.shadowRoot.querySelector("button");
-        menuButton.focus();
-        this.currentIndex = -1;
-        this.open = false;
+    get focusableItem() {
+        return this.items.find(({ tabIndex }) => tabIndex === 0);
     }
     toggle() {
-        if (!this.hasContent) {
+        if (!this.hasItems) {
             return;
         }
         this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
+        this.setFocus();
     }
-    /** Close the list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.open || this.hostElement.contains(ev.target)) {
+    setItemsA11yAttrs() {
+        if (!this.hasItems) {
             return;
         }
-        this.open = false;
-        this.closed.emit();
+        this.items.forEach((item, index) => {
+            item.setAttribute("role", "menuitem");
+            item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+        });
     }
-    /**
-     * Check if some content slot is set.
-     */
-    checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="section"]').length > 0;
+    onItemsChange() {
+        this.items = Array.from(this.host.querySelectorAll('[slot="section"]'));
+        this.hasItems = this.items.length > 0;
+        this.setItemsA11yAttrs();
     }
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
@@ -124,22 +39,136 @@ const ZMenuSection = class {
      */
     onLabelSlotChange(ev) {
         const labelElement = ev.target.assignedElements()[0];
-        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === index.KeyboardCode.ENTER || ev.key === index.KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+        }
+    }
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     */
+    moveFocus(receiver, current) {
+        receiver.tabIndex = 0;
+        setTimeout(() => {
+            receiver.focus();
+        }, 100);
+        if (current) {
+            current.tabIndex = -1;
+        }
     }
-    focusFirstSectionItemOnKeyUp() {
-        const firstElement = this.hostElement.querySelectorAll('[slot="section"]')[0];
-        if (firstElement) {
-            firstElement.focus();
-            this.currentIndex = 0;
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        setTimeout(() => {
+            this.label.focus();
+        }, 100);
+    }
+    /** Focus the last item. */
+    async focusLastItem() {
+        this.htmlTabindex = 0;
+        this.moveFocus(this.items[this.items.length - 1]);
+    }
+    onOpenChange() {
+        if (!this.open) {
+            this.closed.emit();
+            this.setItemsA11yAttrs();
         }
+        else {
+            this.opened.emit();
+        }
+    }
+    onTabindexChange() {
+        this.label.tabIndex = this.htmlTabindex;
+    }
+    onItemsKeydown(ev) {
+        switch (ev.key) {
+            case index.KeyboardCode.ESC:
+            case index.KeyboardCode.ARROW_LEFT:
+                if (!this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.label.focus();
+                this.open = false;
+                break;
+            case index.KeyboardCode.ARROW_RIGHT:
+                if (this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = true;
+                break;
+            case index.KeyboardCode.ARROW_DOWN: {
+                if (!this.open) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(this.items[0]);
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex + 1];
+                if (receiver) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                break;
+            }
+            case index.KeyboardCode.ARROW_UP: {
+                if (!this.open || document.activeElement === this.host) {
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex - 1];
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (receiver) {
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                else {
+                    // since there isn't a previous item to focus, give the focus to the label element
+                    this.setFocus();
+                }
+                break;
+            }
+        }
+    }
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.opened = index$1.createEvent(this, "opened", 7);
+        this.closed = index$1.createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.htmlTabindex = -1;
+        this.open = undefined;
+        this.hasItems = undefined;
+        this.items = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+        this.onItemsKeydown = this.onItemsKeydown.bind(this);
     }
-    componentWillLoad() {
-        this.checkContent();
+    connectedCallback() {
+        this.onItemsChange();
     }
     render() {
-        return (index.h(index.Host, { key: '1370ec8c9379a204ed8bfb387ef53f6ad976ce0f', role: "menu", open: this.open }, index.h("button", { key: '4a474f4f47b9f72f3621a4c1f043f287ebf98d66', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this), onKeyUp: this.focusFirstSectionItemOnKeyUp.bind(this) }, index.h("slot", { key: '1332d96212421fd936b1ee1e295c856219bfb1cc', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && index.h("z-icon", { key: '04b94f8f22bd56d16f7cdb3f394024c5726435e5', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (index.h("div", { key: '01353c9f9b57cce04361849e79c3264f5f106472', class: "items" }, index.h("slot", { key: '29379c69dff6189d4226246eb859dad6c67ca0ec', name: "section", onSlotchange: this.checkContent.bind(this) })))));
+        return (index$1.h(index$1.Host, { key: '387e43b42ac8233f88d329a592bef924ebcf9ee9', open: this.open }, index$1.h("button", { key: 'd6014cdeb9a6ff2b4e95c43db7d2bae2b4d1c811', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.toggle, onKeyDown: this.onLabelKeydown }, index$1.h("slot", { key: 'd0065cf62f83d83df43b5c2413d3e13b23a1bb6a', onSlotchange: this.onLabelSlotChange }), this.hasItems && index$1.h("z-icon", { key: 'e6adc51de79f1fbcb76b025cd6226388ff4d90f0', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (index$1.h("div", { key: '151f31f24ec306ce4cb45b70b8ae5a6023fd063d', class: "items", role: "menu" }, index$1.h("slot", { key: 'd4d67539788121360de0e4dabf51ba22086c1345', name: "section", onSlotchange: this.onItemsChange })))));
     }
-    get hostElement() { return index.getElement(this); }
+    get host() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }; }
 };
 ZMenuSection.style = ZMenuSectionStyle0;
 

package/dist/cjs/z-menu-section.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-menu-section.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"section\"]:hover),\n.items > ::slotted([slot=\"section\"]:focus:focus-visible),\n.items > ::slotted([slot=\"section\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private currentIndex = -1;\n\n  private currentCanvasOpenStatus = false;\n\n  @Listen(\"canvasOpenStatusChanged\", {target: \"document\"})\n  canvasOpenStatusChanged(e: CustomEvent): void {\n    this.currentCanvasOpenStatus = e.detail;\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ENTER) {\n      return;\n    }\n\n    if (this.open && !this.currentCanvasOpenStatus) {\n      this.handleNavigationSideArrow(e);\n    }\n\n    this.handleArrowsNav(e);\n  }\n\n  private handleNavigationSideArrow(e: KeyboardEvent): void {\n    if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {\n      return;\n    }\n    if (e.code === KeyboardCode.ARROW_RIGHT) {\n      const nextElement = this.hostElement.parentElement.nextElementSibling;\n      if (nextElement) {\n        const menuButton = nextElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        console.log(this.hostElement.parentElement);\n        menuButton.focus();\n      }\n      this.open = false;\n      nextElement.setAttribute(\"open\", \"true\");\n    } else if (e.code === KeyboardCode.ARROW_LEFT) {\n      const prevElement = this.hostElement.parentElement.previousElementSibling;\n      if (prevElement) {\n        const menuButton = prevElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n        menuButton.focus();\n      }\n      prevElement.setAttribute(\"open\", \"true\");\n      this.open = false;\n    }\n  }\n\n  private handleArrowsNav(e: KeyboardEvent): void {\n    const menuItems = Array.from(this.hostElement.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    if (this.open) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {\n        let nextFocusableItem: HTMLElement;\n        // INFO: reset focus on all menu items\n        menuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n\n        if (e.code === KeyboardCode.ARROW_DOWN) {\n          nextFocusableItem = this.getNextItem(menuItems, 1);\n        } else if (e.code === KeyboardCode.ARROW_UP) {\n          nextFocusableItem = this.getNextItem(menuItems, -1);\n        }\n\n        if (nextFocusableItem) {\n          nextFocusableItem.setAttribute(\"tabindex\", \"0\");\n          nextFocusableItem.focus();\n        }\n      } else if (e.code === KeyboardCode.ESC) {\n        this.focusToParentAndCloseMenu();\n      } else if (e.shiftKey && e.code === KeyboardCode.TAB) {\n        this.focusToParentAndCloseMenu();\n      }\n    }\n  }\n\n  private getNextItem(menuItems: HTMLElement[], direction: number): HTMLElement {\n    if (this.currentIndex === -1) {\n      this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;\n\n      return menuItems[this.currentIndex];\n    }\n\n    this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;\n\n    return menuItems[this.currentIndex];\n  }\n\n  private focusToParentAndCloseMenu(): void {\n    const menuButton = this.hostElement.shadowRoot.querySelector(\"button\") as HTMLElement;\n    menuButton.focus();\n    this.currentIndex = -1;\n    this.open = false;\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"section\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  private focusFirstSectionItemOnKeyUp(): void {\n    const firstElement = this.hostElement.querySelectorAll('[slot=\"section\"]')[0] as HTMLElement;\n    if (firstElement) {\n      firstElement.focus();\n      this.currentIndex = 0;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n          onKeyUp={this.focusFirstSectionItemOnKeyUp.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"section\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-menu-section.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: var(--space-unit) 0;\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n  outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n  border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() host: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Tabindex value to set on the label button.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  /** The opening state of the section. */\n  @Prop({mutable: true})\n  open: boolean;\n\n  @State()\n  hasItems: boolean;\n\n  @State()\n  items: HTMLElement[];\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private label: HTMLButtonElement;\n\n  private get focusableItem(): HTMLElement {\n    return this.items.find(({tabIndex}) => tabIndex === 0);\n  }\n\n  private toggle(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.setFocus();\n  }\n\n  private setItemsA11yAttrs(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.items.forEach((item, index) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\");\n    });\n  }\n\n  private onItemsChange(): void {\n    this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    this.hasItems = this.items.length > 0;\n    this.setItemsA11yAttrs();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   */\n  private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n    receiver.tabIndex = 0;\n    setTimeout(() => {\n      receiver.focus();\n    }, 100);\n    if (current) {\n      current.tabIndex = -1;\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    setTimeout(() => {\n      this.label.focus();\n    }, 100);\n  }\n\n  /** Focus the last item. */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    this.htmlTabindex = 0;\n    this.moveFocus(this.items[this.items.length - 1]);\n  }\n\n  @Watch(\"open\")\n  onOpenChange(): void {\n    if (!this.open) {\n      this.closed.emit();\n      this.setItemsA11yAttrs();\n    } else {\n      this.opened.emit();\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  onTabindexChange(): void {\n    this.label.tabIndex = this.htmlTabindex;\n  }\n\n  @Listen(\"keydown\")\n  private onItemsKeydown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.label.focus();\n        this.open = false;\n        break;\n      case KeyboardCode.ARROW_RIGHT:\n        if (this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = true;\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (!this.open) {\n          break;\n        }\n        if (document.activeElement === this.host) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(this.items[0]);\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex + 1];\n        if (receiver) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(receiver, this.focusableItem);\n        }\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (!this.open || document.activeElement === this.host) {\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex - 1];\n        ev.preventDefault();\n        ev.stopPropagation();\n        if (receiver) {\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          // since there isn't a previous item to focus, give the focus to the label element\n          this.setFocus();\n        }\n        break;\n      }\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    this.onItemsKeydown = this.onItemsKeydown.bind(this);\n  }\n\n  connectedCallback(): void {\n    this.onItemsChange();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host open={this.open}>\n        <button\n          ref={(el) => (this.label = el)}\n          class=\"label\"\n          aria-haspopup={`${this.hasItems}`}\n          aria-expanded={`${!!this.open}`}\n          role=\"menuitem\"\n          tabindex={this.htmlTabindex}\n          onClick={this.toggle}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"section\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}