@zanichelli/albe-web-components 2.17.1 → 2.18.3

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.js');
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * .5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.content>div>div{padding:calc(var(--space-unit) * 3) 0;font-size:14px;letter-spacing:0.16px;line-height:20px}.content>div>div>p{margin:0}.content>div>div>p>a{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host a{cursor:pointer}header{position:sticky;top:0;z-index:99;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main-header\";margin-bottom:calc(var(--space-unit) * 6.5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}.main-header{display:grid;grid-template-columns:2fr 2fr 4fr 100px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header;grid-column-gap:calc(var(--space-unit) * .5);align-items:center;background-color:var(--bg-grey-900);height:auto;align-items:center;z-index:10}.main-header.myz-out{background-color:var(--bg-white)}.logo{grid-area:logo;padding:6px}z-logo{transform:scale(0.9)}.dropdown-menu{display:none}.dropdown-menu.hidden{visibility:hidden}.dropdown-links{grid-area:dropdown-links;list-style:none;display:block;max-height:32px;margin:0;padding:0}.arrow{fill:var(--text-grey-200)}.dropdown-links>li{list-style:none;display:inline-block;margin:0;padding:0}.dropdown-links>li>a{width:auto;height:auto;color:var(--myz-blue);font-size:14px;letter-spacing:0.18px;line-height:32px;text-decoration:none;margin:var(--space-unit);padding-bottom:calc(var(--space-unit) * .5)}.dropdown-links>li>a:hover,.dropdown-links>li>a.active{color:var(--text-grey-800);border-bottom:2px solid var(--myz-blue)}.mobile-header{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);z-index:inherit;height:52px;position:fixed;top:0px;left:0;z-index:999}.mobile-header.myz-out{background-color:var(--bg-white)}.mobile-header>z-button{margin:0 calc(var(--space-unit) * 2)}.mobile-content{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;width:100%;background-color:var(--bg-grey-900);position:fixed;top:52px;left:0;z-index:999;max-height:0px;overflow:hidden;transition:max-height 1s cubic-bezier(0.46, 0, 1, 0.79)}.mobile-content.open{max-height:100vh;transition:max-height 2s cubic-bezier(0, 0.79, 0.46, 1)}.mobile-content.myz-out{background-color:var(--bg-white)}hr{display:block;position:relative;padding:0;margin:0px calc(var(--space-unit) * 4);height:0;width:calc(100% - 64px);max-height:0;font-size:1px;line-height:0;clear:both;border:none;border-top:1px solid var(--text-grey-700)}.menu-mobile{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;color:var(--bg-white);padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);cursor:pointer}.myz-out .menu-mobile{color:var(--text-grey-800)}.menu-toggle{grid-area:menu-toggle;display:flex;flex-direction:column;margin:0 var(--space-unit)}.menu-toggle .bar{width:20px;height:2px;background-color:var(--bg-white);margin:2px auto;transition:all 0.3s ease-in-out}.myz-out .menu-toggle .bar{background-color:var(--text-grey-800)}.menu-toggle:hover{cursor:pointer}#mobile-menu.is-active .bar:nth-child(2){opacity:0}#mobile-menu.is-active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}#mobile-menu.is-active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.booktab-button,.mobile-login{overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.hidden{visibility:hidden}.login{grid-area:login;display:flex;justify-content:flex-end;padding:0 calc(var(--space-unit) * 2)}.login>z-button{color:var(--bg-white);fill:var(--bg-white)}.booktab-button>z-button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center;padding:calc(var(--space-unit) * 2) 0px calc(var(--space-unit) * 4) 0px}.link-ext{grid-area:link-ext;overflow:hidden;height:0%;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-ext-span{display:inline-block;width:100%;margin:calc(var(--space-unit) * .5) auto;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.link-ext-span.myz:hover,.link-ext-span.myz:focus{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-ext z-link{font-size:12px;font-weight:var(--font-sb)}.link-int{overflow:hidden;max-height:100%;width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;padding:0}.link-int>span{width:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:flex-start}.link-int>span>.menu-item{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.link-int>span>.menu-item:hover,.link-int>span>.menu-item:focus{border-radius:0px}.link-int>span>.menu-item>span{white-space:nowrap}.link-int>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;text-align:right}.link-int>span:first-child>.menu-item{margin-top:0}.link-int>span>svg{display:none}.link-int>.mobile-dropdown{padding:0 48px}.mobile-login>span{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:flex-start;fill:white}.mobile-login>span:focus,.mobile-login>span:hover{background:var(--text-grey-800)}.myz-out .mobile-login>span:focus,.myz-out .mobile-login>span:hover{background:none}.mobile-login>span>.menu-item{height:auto;color:var(--bg-white);letter-spacing:0.2px;font-weight:var(--font-sb);font-size:16px;text-decoration:none;outline:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:stretch;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px}.myz-out .mobile-login>span>.menu-item{color:var(--text-grey-800)}.mobile-login>span>.menu-item>i{padding-top:calc(var(--space-unit) * 2);height:28px;width:24px;text-align:right}.mobile-login>span>.menu-item>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-login>span>.menu-item>span>z-icon{padding-right:var(--space-unit);fill:var(--bg-white)}.menu-item>i::before{border-style:solid;border-width:0.12em 0.12em 0 0;content:\" \";display:inline-block;height:0.45em;left:0.16em;position:relative;top:-0.12em;transform:rotate(135deg) scale(1.2);vertical-align:top;width:0.45em;margin-top:2px;margin-left:2px;margin-right:6px;transition:all 0.5s ease}.menu-item.isopen>i::before{top:0.24em;transform:rotate(-45deg) scale(1.2);transition:all 0.5s ease}.mobile-dropdown{background:white;display:block;overflow:hidden;width:100%;box-sizing:border-box;margin:0px auto 0px auto;padding:0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);line-height:44px;max-height:0px;transition:max-height 0.3s ease}.mobile-dropdown.visible{max-height:100vh;transition:max-height 0.5s ease}@media only screen and (min-width: 768px){header{grid-template-columns:1fr 0.8fr 1.5fr 1.1fr 0.7fr;grid-template-rows:0.2fr auto;grid-template-areas:\"main-header main-header main-header main-header main-header\" \"dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu\";margin-bottom:0}header.myz-out{top:0px;grid-template-rows:1fr}.main-header{display:grid;grid-template-columns:170px auto auto 120px;grid-template-rows:1fr;grid-template-areas:\"logo link-int link-ext login\";grid-area:main-header}.dropdown-menu{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"dropdown-links\";grid-area:dropdown-menu;grid-column-gap:var(--space-unit);background:var(--bg-grey-200);height:32px;visibility:visible;z-index:9;padding-left:160px}.booktab-button,.mobile-header,.mobile-login,.mobile-dropdown,.menu-mobile{display:none}.link-int{grid-area:link-int;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;max-height:46px;margin-top:calc(var(--space-unit) * .5)}.link-int>span{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;width:auto}.link-int>span>.menu-item{width:auto;height:auto;color:var(--bg-white);letter-spacing:0.2px;line-height:14px;font-weight:var(--font-sb);text-decoration:none;outline:none;padding:calc(var(--space-unit) * 1.5)}.link-int>span>svg{display:block}.menu-item>i{display:none}.link-int>span>.menu-item:focus,.link-int>span>.menu-item:hover{background:var(--text-grey-800);border-radius:var(--border-radius);cursor:pointer}.link-int>span>.menu-item::-moz-focus-inner{border:0}.link-int>span>.menu-item:focus+svg{visibility:visible}.link-ext{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-content:center;max-height:46px}.link-ext-span{width:auto;line-height:14px;margin:var(--space-unit);padding:calc(var(--space-unit) * .5) var(--space-unit)}}@media only screen and (min-width: 1152px){.main-header{grid-template-columns:170px auto auto 180px}}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{font-size:12px;font-weight:var(--font-sb);color:var(--color-primary01);fill:var(--color-primary01)}:host>z-pocket>z-pocket-header span.badge{background:var(--color-secondary02);color:var(--color-surface01);border-radius:50%;padding:0 calc(var(--space-unit)* 0.5);display:inline-block;margin-left:var(--space-unit)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;margin:0 var(--space-unit);padding:var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{background-image:linear-gradient(rgba(255, 0, 0, 0), white);position:absolute;top:0;left:0;right:0;bottom:0}:host>z-pocket.open>z-pocket-body>div.body{max-height:calc(100vh - 166px);overflow:auto;scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-width:thin;scrollbar-color:var(--color-primary01) var(--color-surface03)}:host ::-webkit-scrollbar{background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--radius-base);width:10px}:host ::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--radius-base);width:var(--space-unit)}}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.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)}}";
 
@@ -64,7 +64,7 @@ const zModalLogin = class {
     return (index.h("z-button", { variant: index$1.ButtonVariantEnum.secondary, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" }, index.h("div", { class: "zd" }, index.h("svg", { width: "18px", height: "24px", viewBox: "0 0 18 24" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { transform: "translate(-313.000000, -329.000000)", fill: "#E2001A", "fill-rule": "nonzero" }, index.h("g", { transform: "translate(25.000000, 191.000000)" }, index.h("g", null, index.h("g", { transform: "translate(0.000000, 100.000000)" }, index.h("g", null, index.h("g", { transform: "translate(276.000000, 28.000000)" }, index.h("path", { d: "M29.8953704,30.5632326 C29.9143039,30.3327754 29.5356326,30.0447041 29.1380277,29.8142469 C29.2516291,28.7963947 29.4409647,26.9719425 29.2705626,26.3189807 C29.0433598,25.416357 28.3428178,24.8018047 28.380685,23.822362 C28.4185521,22.8429193 28.1913493,16.5437582 27.0364017,15.1802202 C26.1654576,14.162368 25.4649156,12.8372396 23.4390239,12.2418921 C23.4390239,12.0498445 23.4390239,11.8770016 23.4200903,11.7425683 C23.3822232,10.9167637 21.9622056,10.090959 21.6214014,10.0525495 C21.2805972,10.01414 20.371786,9.95652568 20.0309818,10.0525495 C19.6901775,10.1293685 19.0464362,11.128016 18.7434992,11.4352922 C18.5920306,11.5889302 18.5541635,11.9538207 18.5730971,12.3187111 C17.437083,12.6836015 16.1306669,13.4325871 15.4490584,14.9497631 C14.2941108,17.676839 13.4799674,18.9251483 13.6693031,24.1680477 C13.5935688,25.1090809 13.2906318,25.6084046 13.1012961,25.6852237 C12.9119604,25.7620427 12.798359,25.9156808 12.7604919,26.1077284 C12.7226247,26.2805712 12.5522226,28.37389 12.7415583,29.8718612 C12.3818205,30.1023183 12.0788834,30.3519802 12.097817,30.5632326 C12.1546177,31.0625563 11.8516806,31.7731324 12.097817,32.0612038 C12.230352,32.2148419 12.7226247,32.5413228 13.3284989,32.8293942 C13.6125024,33.4631512 14.199443,33.9240655 15.467992,33.9816797 C18.1565586,34.0584988 26.2601254,33.8664512 26.5630625,33.9048607 C26.847066,33.9432702 28.4374857,34.0008845 28.683622,32.8293942 C29.2894962,32.5413228 29.781769,32.2148419 29.9143039,32.0612038 C30.1415067,31.7731324 29.8385697,31.0625563 29.8953704,30.5632326 Z M12.0319858,31.2 C12.1173988,31.1230769 12.3736379,31.0461538 12.743761,31 C12.857645,31.3230769 12.914587,31.6615385 13,32 C12.4021089,31.8153846 11.8611598,31.5692308 12.0319858,31.2 Z M21.1618497,12.8394441 C21.1618497,12.8394441 20.6763006,12.8165075 20,13 L20,12.9770634 C20,12.5642053 20.3121387,11.3256309 20.3988439,11.1192018 C20.4855491,10.9127728 21.265896,11.0274556 21.8554913,11.0733287 C22.6358382,11.0503922 22.4624277,11.2568212 22.8092486,11.9907912 C22.9306358,12.2889666 22.982659,12.6559516 23,13 C22.4797688,12.8623806 21.8728324,12.8165075 21.1618497,12.8394441 Z M28.3324094,30 C28.6648189,30.0833333 28.9085858,30.2222222 28.9750677,30.3888889 C29.1301921,31.1666667 28.5318551,31.6388889 28,32 C28.0221606,31.5 28.0664819,31.1111111 28.0664819,31.1111111 L28.2437669,30.6111111 L28.3324094,30 Z M21.8571429,23 L21.8571429,23.8 L22.7142857,23.8 L22.7142857,24.6 L23.5714286,24.6 L23.5714286,25.4 L24.4285714,25.4 L24.4285714,26.2 L25.2857143,26.2 L25.2857143,27 L26.1428571,27 L26.1428571,27.8 L27,27.8 L27,28.6 L24.4285714,28.6 L24.4285714,29.4 L25.2857143,29.4 L25.2857143,31 L24.4285714,31 L24.4285714,30.2 L23.5714286,30.2 L23.5714286,29.4 L22.7142857,29.4 L22.7142857,30.2 L21.8571429,30.2 L21.8571429,31 L21,31 L21,23 L21.8571429,23 Z" }))))))))), index.h("span", null, "ZAINO DIGITALE"))));
   }
   render() {
-    return (index.h("z-modal", { modaltitle: this.heading }, index.h("div", { class: "wrapper", slot: "modalContent" }, index.h("form", { method: "post" }, index.h("div", { class: "username" }, index.h("slot", { name: "username" }, index.h("z-input", { id: "username", label: "email o numero di cellulare", placeholder: "Inserisci l'email o il cellulare", autocomplete: "username", name: "username", status: this.status, message: this.message, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))), index.h("div", { class: "password" }, index.h("slot", { name: "password" }, index.h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: "password", name: "password", autocomplete: "current-password", status: this.status, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))), index.h("z-link", { class: "forget", href: "https://my.zanichelli.it" }, "Password dimenticata?"), index.h("div", { class: "login" }, index.h("slot", { name: "login" }, index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))), index.h("hr", null), index.h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"), index.h("div", { class: "signup" }, index.h("slot", { name: "signup" }, index.h("z-button", { variant: index$1.ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))), index.h("div", { class: "providers" }, index.h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"), !this.externalProviderCheck && (index.h("slot", { name: "provider" }, this.renderZainoDigitaleButton(), index.h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
+    return (index.h("z-modal", { modaltitle: this.heading }, index.h("div", { class: "wrapper", slot: "modalContent" }, index.h("form", { method: "post" }, index.h("div", { class: "username" }, index.h("slot", { name: "username" }, index.h("z-input", { id: "username", label: "email o numero di cellulare", placeholder: "Inserisci l'email o il cellulare", autocomplete: "username", name: "username", status: this.status, message: this.message, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))), index.h("div", { class: "password" }, index.h("slot", { name: "password" }, index.h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: "password", name: "password", autocomplete: "current-password", status: this.status, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))), index.h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"), index.h("div", { class: "login" }, index.h("slot", { name: "login" }, index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))), index.h("hr", null), index.h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"), index.h("div", { class: "signup" }, index.h("slot", { name: "signup" }, index.h("z-button", { variant: index$1.ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))), !this.externalProviderCheck && (index.h("div", { class: "providers" }, index.h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"), index.h("slot", { name: "provider" }, this.renderZainoDigitaleButton(), index.h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
   }
   get hostElement() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.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-info.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
-const utils = require('./utils-943dc109.js');
+const index$1 = require('./index-66eb89b1.js');
+const utils = require('./utils-2636e75b.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:100%}:host>div{background:var(--color-surface01);width:calc(100% + calc(var(--space-unit) * 2));margin-left:calc(-1 * var(--space-unit));height:402px;border:var(--border-size-small) solid var(--color-primary01);box-shadow:0px 2px 4px 0px rgba(66, 69, 72, 0.35);border-radius:0px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);position:relative}:host>div>z-icon{fill:var(--color-primary01);cursor:pointer;position:absolute;top:var(--space-unit);right:var(--space-unit)}:host>div{display:grid}:host>div>div.cta-wrapper{align-self:end;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between}:host>div>div.content-wrapper{overflow:hidden;position:relative;align-self:stretch}:host>div>div.content-wrapper>section{border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);padding:var(--space-unit) 0;font-size:14px;line-height:20px;box-sizing:border-box}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden:after{background:linear-gradient(\n    180deg,\n    rgba(255, 0, 0, 0),\n    rgba(255, 0, 0, 0) 60%,\n    white\n  );content:\"\";position:absolute;pointer-events:none;top:0;left:0;right:0;bottom:0}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-tooltip{position:absolute;top:0px;left:calc(var(--space-unit) * 4)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.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)}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.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_3.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
-const utils = require('./utils-943dc109.js');
+const index$1 = require('./index-66eb89b1.js');
+const utils = require('./utils-2636e75b.js');
 const hammer = require('./hammer-6e321f0b.js');
 require('./breakpoints-88c4fd6c.js');
 

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
-const utils = require('./utils-943dc109.js');
+const index$1 = require('./index-66eb89b1.js');
+const utils = require('./utils-2636e75b.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:inherit}:host>div{display:flex;flex-direction:column;width:inherit}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;top:50%;width:auto;cursor:pointer;transition:0.6s ease;margin:0 var(--space-unit);fill:var(--color-primary01);z-index:10}main .scroll.disabled{opacity:50%;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;transition:all 300ms;line-height:0px;overflow-y:hidden}footer{height:56px;width:100%;align-items:center;display:grid;grid-template-columns:2;grid-template-rows:2;grid-template-areas:\"center center\" \"left right\";border-top:var(--border-base) solid var(--color-surface02)}footer>div{align-items:center;width:100%}footer .footerCenter{grid-area:center}footer .footerLeft{grid-area:left}footer .footerRight{grid-area:right}footer .bulletContainer{display:flex;margin:0 auto;justify-content:center;align-items:center;min-height:60px}footer .bulletContainer .bullet{width:8px;height:8px;border-radius:50%;background-color:var(--bg-neutral-150);margin:var(--space-unit) 2px;pointer-events:none}footer .bulletContainer .bullet.selected{background-color:var(--bg-neutral-400)}@media only screen and (min-width: 768px){footer{grid-template-columns:1fr 2fr 1fr;grid-template-rows:1;grid-template-areas:\"left center right\";height:76px;border-top:var(--border-base) solid var(--color-surface02)}footer .bulletContainer .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bulletContainer .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);pointer-events:auto;cursor:pointer}}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e494cc2.js');
-const index$1 = require('./index-3a977d24.js');
+const index$1 = require('./index-66eb89b1.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

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

package/dist/collection/beans/index.js

@@ -145,12 +145,12 @@ export var TableHeaderSize;
   TableHeaderSize["large"] = "large";
   TableHeaderSize["special"] = "special";
 })(TableHeaderSize || (TableHeaderSize = {}));
-export var SortingOrientation;
-(function (SortingOrientation) {
-  SortingOrientation["asc"] = "asc";
-  SortingOrientation["desc"] = "desc";
-  SortingOrientation["none"] = "none";
-})(SortingOrientation || (SortingOrientation = {}));
+export var SortDirectionEnum;
+(function (SortDirectionEnum) {
+  SortDirectionEnum["asc"] = "asc";
+  SortDirectionEnum["desc"] = "desc";
+  SortDirectionEnum["none"] = "none";
+})(SortDirectionEnum || (SortDirectionEnum = {}));
 export var AvatarSize;
 (function (AvatarSize) {
   AvatarSize["small"] = "small";

package/dist/collection/collection-manifest.json

@@ -6,7 +6,6 @@
     "./components/buttons/z-button-sort/index.js",
     "./components/buttons/z-chip/index.js",
     "./components/buttons/z-toggle-button/index.js",
-    "./components/contextual-menu/index.js",
     "./components/footer/z-footer/index.js",
     "./components/footer/z-footer-link/index.js",
     "./components/footer/z-footer-section/index.js",
@@ -51,6 +50,7 @@
     "./components/typography/z-heading/index.js",
     "./components/z-avatar/index.js",
     "./components/z-card/index.js",
+    "./components/z-contextual-menu/index.js",
     "./components/z-divider/index.js",
     "./components/z-ghost-loading/index.js",
     "./components/z-popover/index.js",

package/dist/collection/components/icons/z-icon/index.js

@@ -1,12 +1,6 @@
 import { Component, Prop, h } from "@stencil/core";
 import { icons } from "../icons";
 export class ZIcon {
-  constructor() {
-    /** icon height (optional) */
-    this.height = 18;
-    /** icon width (optional) */
-    this.width = 18;
-  }
   selectPathOrPolygon(iconName) {
     if (iconName && iconName.startsWith("M")) {
       return h("path", { d: icons[this.name] });
@@ -59,8 +53,7 @@ export class ZIcon {
         "text": "icon height (optional)"
       },
       "attribute": "height",
-      "reflect": false,
-      "defaultValue": "18"
+      "reflect": false
     },
     "width": {
       "type": "number",
@@ -77,8 +70,7 @@ export class ZIcon {
         "text": "icon width (optional)"
       },
       "attribute": "width",
-      "reflect": false,
-      "defaultValue": "18"
+      "reflect": false
     },
     "iconid": {
       "type": "string",

package/dist/collection/components/icons/z-icon/styles.css

@@ -1,16 +1,14 @@
 :host {
   line-height: 0;
   vertical-align: middle;
-  width: var(--z-icon-width, 18px);
-  height: var(--z-icon-height, 18px);
   margin-right: var(--z-icon-right-margin, 0);
   margin-left: var(--z-icon-left-margin, 0);
 }
 
-:host(:not([width])) svg {
+:host svg:not([width]) {
   width: var(--z-icon-width, 18px);
 }
 
-:host(:not([height])) svg {
+:host svg:not([height]) {
   height: var(--z-icon-height, 18px);
 }

package/dist/collection/components/list/z-list-element/index.js

@@ -46,7 +46,7 @@ export class ZListElement {
      */
     this.disabled = false;
     /**
-     * [optional] If is used in ContextualMenu component
+     * [optional] If is used in ZContextualMenu component
      */
     this.isContextualMenu = false;
     this.showInnerContent = false;
@@ -387,7 +387,7 @@ export class ZListElement {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "[optional] If is used in ContextualMenu component"
+        "text": "[optional] If is used in ZContextualMenu component"
       },
       "attribute": "is-contextual-menu",
       "reflect": true,

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

@@ -81,7 +81,7 @@ export class zModalLogin {
           h("div", { class: "password" },
             h("slot", { name: "password" },
               h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: "password", name: "password", autocomplete: "current-password", status: this.status, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))),
-          h("z-link", { class: "forget", href: "https://my.zanichelli.it" }, "Password dimenticata?"),
+          h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"),
           h("div", { class: "login" },
             h("slot", { name: "login" },
               h("z-button", { variant: ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))),
@@ -90,9 +90,9 @@ export class zModalLogin {
         h("div", { class: "signup" },
           h("slot", { name: "signup" },
             h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))),
-        h("div", { class: "providers" },
+        !this.externalProviderCheck && (h("div", { class: "providers" },
           h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"),
-          !this.externalProviderCheck && (h("slot", { name: "provider" },
+          h("slot", { name: "provider" },
             this.renderZainoDigitaleButton(),
             h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
   }
@@ -105,6 +105,23 @@ export class zModalLogin {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "forgotPasswordUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Forgot Password Url"
+      },
+      "attribute": "forgot-password-url",
+      "reflect": false
+    },
     "heading": {
       "type": "string",
       "mutable": false,

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

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Event } from "@stencil/core";
+import { Component, Prop, h, Event, Element } from "@stencil/core";
+import { Host, State } from "@stencil/core/internal";
 /**
  * @slot - link content
  */
@@ -15,9 +16,14 @@ export class ZLink {
     /** white variant flag (optional) */
     this.iswhite = false;
     /** link text variant (optional) */
-    this.textcolor = "blue";
+    this.textcolor = "primary";
     /** big link version */
     this.big = false;
+    /** link icon position (optional) */
+    this.iconposition = "left";
+    /** draw underline on text (optional) */
+    this.underline = false;
+    this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
   }
@@ -25,6 +31,9 @@ export class ZLink {
     if (this.iswhite) {
       console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
     }
+    if (this.big) {
+      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
+    }
   }
   emitZLinkClick(e, linkId) {
     this.emitZLinkInteraction(e, linkId);
@@ -32,14 +41,27 @@ export class ZLink {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
+  componentDidRender() {
+    if (this.icon) {
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      const currentSize = this.big ? 18 : Math.round(height * 1.125);
+      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
+        this.iconSize = currentSize;
+      }
+    }
+  }
   render() {
-    return (h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled && "disabled"}
-          ${this.isactive && "active"}
-          ${this.textcolor}
-          ${this.iswhite && "white"}
-          ${this.big && "big"}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) },
-      this.icon && (h("z-icon", { name: this.icon, width: this.big ? 18 : 12, height: this.big ? 18 : 12 })),
-      h("slot", null)));
+    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
+    return (h(Host, { style: style },
+      h("a", { id: this.htmlid, href: this.href, class: `${this.isdisabled ? "disabled" : ""}
+            ${this.isactive ? "active" : ""}
+            ${this.textcolor}
+            ${this.iswhite ? "white" : ""}
+            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) },
+        this.iconposition === "right" && h("slot", null),
+        this.icon &&
+          h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }),
+        this.iconposition === "left" && h("slot", null))));
   }
   static get is() { return "z-link"; }
   static get encapsulation() { return "shadow"; }
@@ -178,8 +200,8 @@ export class ZLink {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"white\" | \"blue\" | \"black\"",
-        "resolved": "\"black\" | \"blue\" | \"white\"",
+        "original": "\"primary\"| \"inverse\" | \"white\" | \"black\"",
+        "resolved": "\"black\" | \"inverse\" | \"primary\" | \"white\"",
         "references": {}
       },
       "required": false,
@@ -190,7 +212,7 @@ export class ZLink {
       },
       "attribute": "textcolor",
       "reflect": false,
-      "defaultValue": "\"blue\""
+      "defaultValue": "\"primary\""
     },
     "icon": {
       "type": "string",
@@ -226,8 +248,47 @@ export class ZLink {
       "attribute": "big",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "iconposition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\"",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "link icon position (optional)"
+      },
+      "attribute": "iconposition",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "underline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "draw underline on text (optional)"
+      },
+      "attribute": "underline",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "iconSize": {}
+  }; }
   static get events() { return [{
       "method": "zLinkClick",
       "name": "zLinkClick",
@@ -244,4 +305,5 @@ export class ZLink {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/navigation/z-link/styles.css

@@ -1,15 +1,20 @@
+:host {
+  --font-size-link: inherit;
+  --font-weight-link: inherit;
+}
+
 :host {
   font-family: var(--dashboard-font);
-  font-weight: inherit;
-  font-size: inherit;
+  font-weight: var(--font-weight-link);
+  font-size: var(--font-size-link);
   line-height: inherit;
   outline: none;
 }
 
 a {
   cursor: pointer;
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
+  color: var(--color-link-primary);
+  fill: var(--color-link-primary);
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -18,58 +23,139 @@ a {
   border-bottom: var(--border-size-medium) solid transparent;
 }
 
-a:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-  text-decoration: none;
+a:hover,
+a:focus,
+a:active {
+  text-decoration: underline;
+}
+
+a.active {
+  color: var(--color-active-link);
+  fill: var(--color-active-link);
+}
+
+a:hover,
+a:focus {
+  color: var(--color-hover-link);
+  fill: var(--color-hover-link);
+}
+
+a:active {
+  color: var(--color-pressed-link);
+  fill: var(--color-pressed-link);
 }
 
-a.disabled {
+a:visited {
+  color: var(--color-visited-link);
+  fill: var(--color-visited-link);
+}
+
+a.disabled,
+a.inverse.disabled {
   cursor: default;
   pointer-events: none;
+  color: var(--color-disabled03);
+  fill: var(--color-disabled03);
+}
+
+a.underline,
+a.underline:active,
+a.underline:hover,
+a.underline:visited,
+a.underline.disabled,
+a.underline.black,
+a.underline.white {
+  text-decoration: underline;
 }
 
 a.disabled,
 a.disabled:active,
 a.disabled:visited,
 a.disabled:hover {
-  color: var(--bg-neutral-200);
-  fill: var(--bg-neutral-200);
   text-decoration: none;
 }
 
-a.black,
-a.black:active,
-a.black:visited,
-a.black:hover {
+a.inverse {
+  color: var(--color-inverse-link);
+  fill: var(--color-inverse-link);
+}
+
+a.inverse.active {
+  color: var(--color-inverse-active-link);
+  fill: var(--color-inverse-active-link);
+}
+
+a.inverse:hover,
+a.inverse:focus {
+  color: var(--color-inverse-hover-link);
+  fill: var(--color-inverse-hover-link);
+}
+
+a.inverse:active {
+  color: var(--color-inverse-pressed-link);
+  fill: var(--color-inverse-pressed-link);
+}
+
+a.inverse:visited {
+  color: var(--color-inverse-visited-link);
+  fill: var(--color-inverse-visited-link);
+}
+
+a.black {
   color: var(--bg-grey-900);
   fill: var(--bg-grey-900);
   text-decoration: none;
 }
 
+a.black:hover,
+a.black.active,
+a.black:visited {
+  color: var(--bg-black);
+  fill: var(--bg-black);
+}
+
+a.black:hover,
+a.black:focus,
+a.black:active {
+  text-decoration: underline;
+}
+
+a.black:active {
+  color: var(--gray-700);
+  fill: var(--gray-700);
+}
+
 a.white,
 a.white:active,
-a.white:visited,
-a.white:hover {
+a.white:hover,
+a.white.active {
   color: var(--bg-white);
   fill: var(--bg-white);
   text-decoration: none;
 }
 
-a.active,
-a.active:active,
-a.active:visited {
-  color: var(--text-grey-800);
-  fill: var(--text-grey-800);
-  text-decoration: none;
-  border-bottom: var(--border-size-medium) solid var(--myz-blue);
+a.white:visited {
+  color: var(--bg-gray-300);
+  fill: var(--bg-gray-300);
 }
 
-a.big {
-  font-size: 16px;
-  font-weight: 600;
+a.white:hover,
+a.white:focus,
+a.white:active {
+  text-decoration: underline;
 }
 
-a > z-icon {
+
+a.white.disabled,
+a.black.disabled {
+  color: var(--bg-gray-500);
+  fill: var(--bg-gray-500);
+}
+
+a > z-icon:first-child {
   margin-right: 8px;
 }
+
+a > z-icon:last-child {
+  margin-left: 8px;
+}