@zanichelli/albe-web-components 2.24.9 → 2.24.13

package/dist/cjs/z-modal-login.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{color:var(--text-grey-800);padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{font-size:12px;align-self:flex-end}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{margin:calc(var(--space-unit) * 3) 0;align-self:flex-start}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;margin-bottom:calc(var(--space-unit) * 3);border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{grid-column-start:1;grid-column-end:3;padding-bottom:var(--space-unit)}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{grid-column-start:1;grid-column-end:3;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 
-const stylesCss = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>main{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container main::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}.modal-container main::-webkit-scrollbar-track{background-color:transparent}.modal-container main::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container main::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container main{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:absolute;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
+const stylesCss = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:absolute;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
 
 const ZModal = class {
   constructor(hostRef) {
@@ -13,7 +13,7 @@ const ZModal = class {
     this.modalHeaderActive = index.createEvent(this, "modalHeaderActive", 7);
     this.modalBackgroundClick = index.createEvent(this, "modalBackgroundClick", 7);
     /** aria-label for close button (optional) */
-    this.closeButtonLabel = 'close modal';
+    this.closeButtonLabel = "close modal";
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -26,7 +26,7 @@ const ZModal = class {
   }
   render() {
     return [
-      index.h("div", { class: "modal-container", id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", null, this.modaltitle), this.modalsubtitle && index.h("h2", null, this.modalsubtitle)), index.h("slot", { name: "modalCloseButton" }, index.h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, index.h("z-icon", { name: "multiply-circle-filled" })))), index.h("main", null, index.h("slot", { name: "modalContent" }))),
+      index.h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", null, this.modaltitle), this.modalsubtitle && index.h("h2", null, this.modalsubtitle)), index.h("slot", { name: "modalCloseButton" }, index.h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, index.h("z-icon", { name: "multiply-circle-filled" })))), index.h("div", { class: "modal-content" }, index.h("slot", { name: "modalContent" }))),
       index.h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
     ];
   }

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;height:522px;width:100%;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;height:522px;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out;z-index:2}:host>div .content.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);margin-top:-2px}:host>div .front,:host>div .back{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));z-index:1;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;justify-content:center}.hideInfo{display:none}";

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{box-sizing:border-box;border-radius:0px 0px var(--radius-base) var(--radius-base);border-top:var(--border-base) solid var(--color-surface03);padding:var(--space-unit) calc(var(--space-unit) * 2) 0;height:128px;color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";
 

package/dist/cjs/z-myz-card-info.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 const utils = require('./utils-6d6841cc.js');
 require('./breakpoints-88c4fd6c.js');

package/dist/cjs/z-myz-topbar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 

package/dist/cjs/z-navigation-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 
 const stylesCss = "button{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}*::before,*::after{box-sizing:border-box}:host(:hover:not([disabled])) button,:host([selected]) button{color:var(--color-hover-secondary);fill:currentColor}:host(:hover:not([disabled])) button::after,:host([selected]) button::after{content:'';position:absolute;background-color:var(--color-hover-secondary)}:host([orientation='horizontal']:not([disabled]):hover) button::after,:host([orientation='horizontal'][selected]) button::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}:host([orientation='horizontal']) ::slotted(z-icon){margin-right:var(--space-unit)}:host(:hover:not([disabled])) button{background-color:var(--color-background)}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([disabled]) button{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}:host([size='small']) button{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}:host([size='small'][orientation='horizontal']) button{padding:var(--space-unit) calc(var(--space-unit) * 2)}:host([size='small'][orientation='horizontal']:not([disabled]):hover) button::after,:host([size='small'][orientation='horizontal'][selected]) button::after{height:var(--border-size-medium)}:host([size='small']:not([orientation='vertical'])) ::slotted(z-icon){--z-icon-width:14px;--z-icon-height:14px}:host([orientation='vertical']) button{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}:host([orientation='vertical']:hover:not([disabled])) button::after,:host([orientation='vertical'][selected]) button::after{width:var(--border-size-large);height:100%;top:0;right:0}:host([orientation='vertical']) ::slotted([slot='label']){display:none}::slotted(z-icon){--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);margin:0}";
 

package/dist/cjs/z-navigation-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{--safe-scroll-area:4px;--negative-safe-scroll-area:calc(-1 * var(--safe-scroll-area));position:relative;display:flex;flex-direction:row;z-index:0;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);font-family:var(--font-family-sans);font-weight:var(--font-rg);overflow:hidden}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}button.navigation{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);border-radius:var(--border-no-radius);cursor:pointer;z-index:1}button.navigation:focus{fill:var(--color-primary01);box-shadow:var(--shadow-focus-primary)}button.navigation:disabled{display:none}nav{display:flex;align-items:center;justify-content:flex-start;overflow:auto;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);scroll-padding:var(--safe-scroll-area);scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) button.navigation{top:0;height:100%;width:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='horizontal']) button.navigation:first-child{left:0;padding-left:var(--safe-scroll-area);box-shadow:5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='horizontal']) button.navigation:last-child{right:0;padding-right:4px;box-shadow:-5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}:host([orientation='vertical']) button.navigation{left:0;width:100%;height:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='vertical']) button.navigation:first-child{top:0;padding-top:var(--safe-scroll-area);box-shadow:0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']) button.navigation:last-child{bottom:0;padding-bottom:var(--safe-scroll-area);box-shadow:0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([size='small'][orientation='vertical']) button.navigation{height:calc(var(--space-unit) * 4)}";
@@ -44,7 +44,8 @@ const ZNavigationTabs = class {
     if (!this.tabsNav) {
       return;
     }
-    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] +
+      this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
     this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
   }
   selectedTabHandler(event) {
@@ -82,7 +83,10 @@ const ZNavigationTabs = class {
     this.checkScrollVisible();
   }
   render() {
-    return index.h(index.Host, { class: this.size === 'small' ? 'interactive-2' : 'interactive-1', scrollable: this.canNavigate, role: "tablist" }, this.canNavigate && index.h("button", { role: "tab", class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), index.h("nav", { ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && index.h("button", { role: "tab", class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
+    return index.h(index.Host, { class: {
+        'interactive-2': this.size === 'small',
+        'interactive-1': this.size !== 'small'
+      }, scrollable: this.canNavigate }, this.canNavigate && index.h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), index.h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && index.h("button", { class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{height:72px;width:calc(var(--space-unit) * 5);font-size:32px;font-weight:300;font-family:var(--font-family-sans);text-align:center;caret-color:transparent;box-sizing:border-box;padding:0;color:var(--color-surface05)}input.error{border:1px solid;border-radius:4px;border-color:var(--color-error01);background-color:var(--color-error-inverse)}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";

package/dist/cjs/z-pocket-message.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;border-bottom:var(--border-size-small) solid var(--color-surface03);padding-top:calc(var(--space-unit) * 1.5);display:grid;grid-template-rows:auto auto;grid-template-columns:36px auto}:host>div>z-icon{grid-row:1 / 2;grid-column:1 / 2}:host>div>div.content{grid-row:1 / 2;grid-column:2 / 3;margin-bottom:var(--space-unit)}:host>div>div.ctaWrapper{grid-row:2 / 3;grid-column:1 / 3;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;margin-bottom:var(--space-unit)}@media only screen and (min-width: 768px){:host>div>div.ctaWrapper{flex-direction:row;grid-column:2 / 3}}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 const utils = require('./utils-6d6841cc.js');
 const hammer = require('./hammer-6e321f0b.js');

package/dist/cjs/z-registro-table-footer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 
 const stylesCss = ".sc-z-registro-table-footer-h{display:table-footer-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 const utils = require('./utils-6d6841cc.js');
 require('./breakpoints-88c4fd6c.js');

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:fixed;display:flex;flex-direction:column;flex-wrap:nowrap;z-index:10000;margin-bottom:calc(var(--space-unit) * 2);margin-top:calc(var(--space-unit) * 2)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host(.bottom-centre),:host(.bottom-right),:host(.bottom-left){justify-content:flex-end;align-items:flex-end;bottom:0}:host(.top-left),:host(.top-right),:host(.top-centre){justify-content:flex-start;align-items:flex-start;top:0}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host(.top-centre){justify-content:flex-start;align-items:center;top:0;left:50%;transform:translateX(-50%)}:host(.top-left){justify-content:flex-start;align-items:flex-start;top:0;left:0}:host(.top-right){justify-content:flex-start;align-items:flex-end;top:0;right:0}:host(.bottom-centre){justify-content:flex-end;align-items:center;bottom:0;left:50%;transform:translateX(-50%)}:host(.bottom-right){justify-content:flex-end;align-items:flex-end;bottom:0;right:0}:host(.bottom-left){justify-content:flex-end;align-items:flex-start;bottom:0;left:0}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e494cc2.js');
+const index = require('./index-dee3e21d.js');
 const index$1 = require('./index-8f4b351d.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 const hammer = require('./hammer-6e321f0b.js');

package/dist/collection/components/inputs/z-input/index.js

@@ -160,7 +160,7 @@ export class ZInput {
   renderLabel() {
     if (!this.label)
       return;
-    return (h("z-input-label", { value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
+    return (h("z-input-label", { htmlfor: this.htmlid, value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
   }
   renderIcons() {
     return (h("span", { class: {
@@ -225,7 +225,7 @@ export class ZInput {
           after: this.labelafter,
           before: !this.labelafter,
         } },
-        h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": true }),
+        h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }),
         this.label && h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
@@ -238,7 +238,7 @@ export class ZInput {
           after: this.labelafter,
           before: !this.labelafter,
         } },
-        h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": true }),
+        h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }),
         this.label && h("span", { innerHTML: this.label }))));
   }
   /* END radio */

package/dist/collection/components/inputs/z-input-label/index.js

@@ -5,7 +5,7 @@ export class ZInputLabel {
     this.disabled = false;
   }
   render() {
-    return h("label", { class: { disabled: this.disabled } }, this.value);
+    return h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value);
   }
   static get is() { return "z-input-label"; }
   static get encapsulation() { return "shadow"; }
@@ -50,6 +50,23 @@ export class ZInputLabel {
       "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "htmlfor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "the label is attached to"
+      },
+      "attribute": "htmlfor",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/components/inputs/z-select/index.js

@@ -206,7 +206,7 @@ export class ZSelect {
   renderLabel() {
     if (!this.label)
       return;
-    return (h("z-input-label", { value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_input_label` }));
+    return (h("z-input-label", { htmlfor: this.htmlid, value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_input_label` }));
   }
   renderInput() {
     return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && !this.multiple && this.selectedItems.length

package/dist/collection/components/modal/z-modal/index.js

@@ -6,7 +6,7 @@ import { Component, Prop, h, Event } from "@stencil/core";
 export class ZModal {
   constructor() {
     /** aria-label for close button (optional) */
-    this.closeButtonLabel = 'close modal';
+    this.closeButtonLabel = "close modal";
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -19,7 +19,7 @@ export class ZModal {
   }
   render() {
     return [
-      h("div", { class: "modal-container", id: this.modalid },
+      h("div", { class: "modal-container", id: this.modalid, role: "dialog" },
         h("header", { onClick: this.emitModalHeaderActive.bind(this) },
           h("div", null,
             this.modaltitle && h("h1", null, this.modaltitle),
@@ -27,7 +27,7 @@ export class ZModal {
           h("slot", { name: "modalCloseButton" },
             h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) },
               h("z-icon", { name: "multiply-circle-filled" })))),
-        h("main", null,
+        h("div", { class: "modal-content" },
           h("slot", { name: "modalContent" }))),
       h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
     ];
@@ -108,7 +108,7 @@ export class ZModal {
       },
       "attribute": "close-button-label",
       "reflect": false,
-      "defaultValue": "'close modal'"
+      "defaultValue": "\"close modal\""
     }
   }; }
   static get events() { return [{

package/dist/collection/components/modal/z-modal/styles.css

@@ -96,14 +96,14 @@
   margin-top: calc(var(--space-unit) * 0.5);
 }
 
-.modal-container > main {
+.modal-container > .modal-content {
   flex: 1 auto;
   background: var(--color-surface01);
   overflow: auto;
   overflow-x: hidden;
 }
 
-.modal-container main::-webkit-scrollbar {
+.modal-container .modal-content::-webkit-scrollbar {
   background: linear-gradient(
     to right,
     transparent 0 3px,
@@ -114,22 +114,22 @@
   border-radius: var(--border-radius);
 }
 
-.modal-container main::-webkit-scrollbar-track {
+.modal-container .modal-content::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-.modal-container main::-webkit-scrollbar-thumb {
+.modal-container .modal-content::-webkit-scrollbar-thumb {
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
   width: 10px;
 }
 
-.modal-container main::-webkit-scrollbar-thumb:hover {
+.modal-container .modal-content::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
 /* Firefox */
-.modal-container main {
+.modal-container .modal-content {
   scrollbar-color: var(--color-primary01) transparent;
 }
 

package/dist/collection/components/navigation/z-app-topbar/styles.css

@@ -48,20 +48,19 @@
   /* width: max-content; */
   align-items: center;
   justify-content: flex-end;
+  padding-right: var(--space-unit);
 }
 
+
+
 .right.hide-actions > slot[name="actions"] {
   display: none;
 }
 
-.right > ::slotted(z-link) {
+.right > ::slotted(*) {
   padding: calc(var(--space-unit) * .5);
 }
 
-.right > ::slotted(z-app-switcher) {
-  padding: 6px;
-}
-
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   :host > div {
@@ -80,10 +79,7 @@
 
   .right {
     grid-column-gap: var(--space-unit);
-  }
-
-  .right > ::slotted(z-app-switcher) {
-    padding: 6px calc(var(--space-unit) * 2) 6px var(--space-unit);
+    padding-right: calc(var(--space-unit) * 1.5);
   }
 }
 

package/dist/collection/components/navigation/z-navigation-tabs/index.js

@@ -36,7 +36,8 @@ export class ZNavigationTabs {
     if (!this.tabsNav) {
       return;
     }
-    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] +
+      this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
     this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
   }
   selectedTabHandler(event) {
@@ -74,12 +75,15 @@ export class ZNavigationTabs {
     this.checkScrollVisible();
   }
   render() {
-    return h(Host, { class: this.size === 'small' ? 'interactive-2' : 'interactive-1', scrollable: this.canNavigate, role: "tablist" },
-      this.canNavigate && h("button", { role: "tab", class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev },
+    return h(Host, { class: {
+        'interactive-2': this.size === 'small',
+        'interactive-1': this.size !== 'small'
+      }, scrollable: this.canNavigate },
+      this.canNavigate && h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev },
         h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })),
-      h("nav", { ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) },
+      h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) },
         h("slot", null)),
-      this.canNavigate && h("button", { role: "tab", class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext },
+      this.canNavigate && h("button", { class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext },
         h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
   }
   static get is() { return "z-navigation-tabs"; }

package/dist/collection/components/navigation/z-user-dropdown/styles.css

@@ -9,9 +9,8 @@ button {
   margin: 0;
   background: var(--bg-grey-900);
   border: none;
-  padding: 0;
   font-size: calc(var(--space-unit) * 2);
-  padding: 6px;
+  padding: calc(var(--space-unit) - 2px) 0;
 }
 
 button > z-icon {
@@ -94,11 +93,11 @@ ul > li:last-child {
     align-content: stretch;
     width: min-content;
     position: absolute;
-    right: 0;
+    right: calc(var(--space-unit) * -1);
     box-shadow: 0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);
     background: var(--bg-white);
     border-radius: calc(var(--space-unit) * .5);
-    padding: calc(var(--space-unit) * .5) 0;
+    padding: calc(var(--space-unit) * .5) var(--space-unit);
     transform: translate(0, -4px);
   }
 
@@ -109,7 +108,6 @@ ul > li:last-child {
     justify-content: flex-end;
     align-items: end;
     align-content: center;
-    padding: 6px var(--space-unit);
     max-width: 200px;
   }
 
@@ -155,7 +153,8 @@ ul > li:last-child {
   ul > li {
     color: var(--gray900);
     border-bottom: var(--border-base) solid rgb(202, 204, 206);
-    padding: calc(var(--space-unit) * .5) var(--space-unit);
+    padding: calc(var(--space-unit) * .5);
+    margin: unset;
   }
 
   ul > li > * {