@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/collection/components/z-app-header/styles.css

@@ -1,42 +1,5 @@
 :host {
-  --app-header-typography-1-size: 24px;
-  --app-header-typography-2-size: 28px;
-  --app-header-typography-3-size: 32px;
-  --app-header-typography-4-size: 36px;
-  --app-header-typography-5-size: 42px;
-  --app-header-typography-6-size: 48px;
-  --app-header-typography-7-size: 54px;
-  --app-header-typography-8-size: 60px;
-  --app-header-typography-9-size: 68px;
-  --app-header-typography-10-size: 76px;
-  --app-header-typography-11-size: 84px;
-  --app-header-typography-12-size: 92px;
-  --app-header-typography-1-lineheight: 1.33;
-  --app-header-typography-2-lineheight: 1.29;
-  --app-header-typography-3-lineheight: 1.25;
-  --app-header-typography-4-lineheight: 1.24;
-  --app-header-typography-5-lineheight: 1.24;
-  --app-header-typography-6-lineheight: 1.25;
-  --app-header-typography-7-lineheight: 1.2;
-  --app-header-typography-8-lineheight: 1.26;
-  --app-header-typography-9-lineheight: 1.24;
-  --app-header-typography-10-lineheight: 1.26;
-  --app-header-typography-11-lineheight: 1.2;
-  --app-header-typography-12-lineheight: 1.2;
-  --app-header-typography-1-tracking: calc(-0.2 / 1em);
-  --app-header-typography-2-tracking: calc(-0.4 / 1em);
-  --app-header-typography-3-tracking: calc(-0.6 / 1em);
-  --app-header-typography-4-tracking: calc(-0.8 / 1em);
-  --app-header-typography-5-tracking: calc(-1 / 1em);
-  --app-header-typography-6-tracking: calc(-1.2 / 1em);
-  --app-header-typography-7-tracking: calc(-1.4 / 1em);
-  --app-header-typography-8-tracking: calc(-1.6 / 1em);
-  --app-header-typography-9-tracking: calc(-1.8 / 1em);
-  --app-header-typography-10-tracking: calc(-2 / 1em);
-  --app-header-typography-11-tracking: calc(-2.2 / 1em);
-  --app-header-typography-12-tracking: calc(-2.4 / 1em);
   --app-header-content-max-width: 100%;
-  --app-header-height: auto;
 
   /* Variable to set stuck header and drawer's top offset.
   Useful when something is absolutely positioned above the header. */
@@ -52,26 +15,17 @@
   /* Variable to customize text and icon color. */
   --app-header-text-color: var(--color-default-text);
 
-  /* Variable to customize the title's font size.
-  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */
-  --app-header-title-font-size: var(--app-header-typography-3-size);
-
   /* Variable to customize the title's line-height.
   NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
   and use the same level as the one of the font size. */
-  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);
-
-  /* Variable to customize the title's letter-spacing.
-  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value
-  and use the same level as the one of the font size. */
-  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);
+  --app-header-title-lineheight: 1.25;
 
   /* Variable to customize stuck header's text and icon color. */
   --app-header-stucked-text-color: var(--color-default-text);
 
   position: relative;
   display: block;
-  height: var(--app-header-height);
+  box-shadow: 0 2px 4px 0 var(--shadow-color-base);
   color: var(--app-header-text-color);
 }
 
@@ -89,14 +43,9 @@
   flex-grow: 0;
   flex-shrink: 0;
   align-items: baseline;
-  padding: var(--grid-margin);
+  padding: calc(var(--space-unit) * 2);
   margin: 0 auto;
   background: var(--app-header-bg);
-  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
-}
-
-.hero-container + .heading-panel {
-  background: transparent;
 }
 
 :host(:empty) .heading-panel {
@@ -114,12 +63,43 @@
   justify-content: flex-start;
 }
 
+.heading-panel .heading-container {
+  flex-direction: column-reverse;
+}
+
+:host([enable-search]) .heading-panel .heading-container {
+  flex-direction: column;
+}
+
+:host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
+  flex-direction: row;
+}
+
 .heading-title {
   display: flex;
-  max-width: 100%;
+  width: 100%;
   flex-direction: row;
-  align-items: flex-start;
-  column-gap: calc(var(--space-unit) * 2);
+  align-items: start;
+}
+
+img.z-logo {
+  content: url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>');
+}
+
+.heading-title > img.z-logo {
+  height: calc(var(--space-unit) * 3);
+  margin: 4px var(--space-unit) 0 0;
+}
+
+:host([stuck]) .heading-stuck .heading-title > img.z-logo {
+  margin-top: 0;
+}
+
+::slotted([slot="product-logo"]) {
+  width: 32px;
+  height: 32px;
+  margin-right: var(--space-unit);
+  border-radius: 50%;
 }
 
 ::slotted([slot="title"]),
@@ -127,48 +107,52 @@
 ::slotted([slot="stucked-title"]) {
   margin: 0;
   font-family: "IBM Plex Serif", serif;
-  font-weight: var(--font-bd);
 }
 
 ::slotted([slot="title"]) {
-  font-size: var(--app-header-title-font-size);
-  letter-spacing: var(--app-header-title-letter-spacing);
-  line-height: var(--app-header-title-lineheight);
+  display: -webkit-box;
+  overflow: hidden;
+  flex-grow: 1;
+  padding-right: calc(var(--space-unit) * 2);
+  -webkit-box-orient: vertical;
+  font-size: var(--font-size-6);
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  white-space: initial;
 }
 
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
-  font-size: var(--app-header-typography-3-size);
-  letter-spacing: var(--app-header-typography-3-tracking);
-  line-height: var(--app-header-typography-3-lineheight);
+:host(:not([menu-length="0"])) .p-left {
+  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
 }
 
-:host(:not([menu-length="0"])) .heading-subtitle {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));
+:host(:is([enable-offcanvas="true"]):not([menu-length="0"])) {
+  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
 }
 
-::slotted([slot="top-subtitle"]),
-::slotted([slot="subtitle"]) {
+::slotted([slot="top-subtitle"]) {
+  display: -webkit-box;
+  overflow: hidden;
+  max-width: 80%;
   margin: 0;
+  -webkit-box-orient: vertical;
   font-family: var(--font-family-sans);
-  font-size: 20px;
+  font-size: 14px;
   font-style: italic;
-  line-height: 26px;
-}
-
-::slotted([slot="subtitle"]) {
-  font-weight: 500;
-}
-
-::slotted([slot="top-subtitle"]) {
   font-weight: 400;
+  -webkit-line-clamp: 2;
+  line-height: 18.2px;
+  white-space: initial;
 }
 
 .menu-container {
   display: flex;
   width: 100%;
   flex: 1 auto;
-  flex-flow: row wrap;
+  column-gap: calc(var(--space-unit) * 4);
+}
+
+.menu-container:focus:focus-visible {
+  outline: none;
 }
 
 :host([menu-length="0"]:not([enable-search])) .menu-container,
@@ -181,14 +165,23 @@
   z-index: 3;
 }
 
+.menu-container ::slotted([slot="menu"]:not(:last-child))::after {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--space-unit) * -2);
+  width: var(--border-size-small);
+  height: 1em;
+  background-color: currentcolor;
+  content: "";
+  transform: translateY(-50%);
+}
+
 z-searchbar {
   z-index: 0;
   display: flex;
-  width: auto;
-  min-width: calc(var(--space-unit) * 32);
-  flex: 1 auto;
+  width: 100%;
   align-items: center;
-  margin-left: auto;
+  padding-top: calc(var(--space-unit) * 2);
 }
 
 .heading-stuck {
@@ -210,7 +203,6 @@ z-searchbar {
   align-items: center;
   padding: var(--space-unit) var(--grid-margin);
   margin: 0 auto;
-  column-gap: calc(var(--space-unit) * 2);
 }
 
 .heading-stuck .heading-title {
@@ -218,9 +210,17 @@ z-searchbar {
 }
 
 .heading-stuck .heading-title > *,
-.heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
+::slotted([slot="stucked-title"]) {
+  font-size: var(--font-size-9);
+  font-weight: var(--font-bd);
+  line-height: 1.25;
+}
+
+.heading-stuck .heading-title [name="stucked-title"] {
   display: block;
   overflow: hidden;
+  margin-right: calc(var(--space-unit) * 2);
+  font-size: var(--font-size-5);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -232,12 +232,17 @@ z-searchbar {
 .drawer-trigger {
   padding: 0;
   border: 0;
-  margin: 0;
+  margin-right: var(--space-unit);
   appearance: none;
   background: none;
   border-radius: 0;
   color: inherit;
   cursor: pointer;
+  outline: none;
+}
+
+.drawer-trigger:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
 }
 
 .drawer-trigger:focus-visible {
@@ -252,14 +257,6 @@ z-searchbar {
   fill: currentcolor;
 }
 
-/* Simulate the height of the first line of text,
-to correctly align drawer icon and search page button with the title */
-.heading-container :is(.drawer-trigger, z-button.search-page-button) {
-  display: flex;
-  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
-  align-items: center;
-}
-
 .heading-container z-button.search-page-button {
   margin-left: auto;
 }
@@ -301,74 +298,57 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
   box-shadow: var(--shadow-focus-primary);
 }
 
-.hero-container {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host([enable-search]:not([search-page-url])) .heading-container .heading-title {
+    flex-wrap: nowrap;
+  }
 
-:host([overlay]) .heading-panel .drawer-trigger z-icon,
-:host([overlay]) .heading-panel .heading-container,
-:host([overlay]) .heading-panel .menu-container {
-  color: var(--color-white);
-  fill: var(--color-white);
-}
+  z-searchbar {
+    width: 30%;
+    padding-top: 0;
+  }
 
-:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {
-  --z-menu-label-color: var(--color-white);
-}
+  ::slotted([slot="title"]) {
+    font-size: var(--font-size-9);
+  }
 
-:host([overlay]) .hero-container::after {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--color-black);
-  content: "";
-  opacity: 0.5;
-}
+  .heading-title {
+    align-items: center;
+  }
 
-.hero-container img,
-.hero-container ::slotted(*) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-  -webkit-user-drag: none;
-}
+  .heading-container .heading-title {
+    align-items: flex-start;
+  }
 
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-6-size);
-    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);
+  div.heading-container .heading-title button,
+  div.heading-container .heading-title z-searchbar,
+  div.heading-container .heading-title img,
+  div.heading-container .heading-title ::slotted([slot="product-logo"]),
+  div.heading-container .heading-title .search-page-button {
+    margin-top: var(--space-unit);
+  }
+
+  .heading-title > img.z-logo {
+    height: 32px;
   }
 
   .heading-panel {
-    flex-flow: row wrap;
     align-items: center;
-    padding-bottom: calc(var(--space-unit) * 2);
+    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);
   }
 
-  .heading-container {
-    margin-right: auto;
+  .heading-panel.has-menu {
+    padding-bottom: 0;
   }
 
-  :host(:is([flow="offcanvas"], [menu-length="0"])) :is(.heading-container, .menu-container) {
-    width: auto;
+  :host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
+    flex-direction: column;
   }
 
-  :host(:not([flow="offcanvas"])) .heading-subtitle {
-    padding-left: 0;
+  .heading-panel .heading-container {
+    flex-direction: column;
+    margin-right: auto;
   }
 
   .menu-container {
@@ -377,47 +357,40 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
   }
 
   :host([menu-length="0"]) .menu-container:not(:empty) {
-    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
+    height: calc(var(--space-unit) * 4.5 * var(--app-header-title-lineheight));
   }
 
-  :host(:not([flow="offcanvas"])) .menu-container {
-    gap: var(--space-unit) calc(var(--space-unit) * 5);
+  :host(:not([enable-offcanvas="false"])) .menu-container {
+    margin-top: calc((var(--space-unit) * 1.75));
   }
 
-  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
+  :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {
     display: none;
   }
-}
 
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-7-size);
-    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);
+  .heading-stuck .heading-title > *,
+  .heading-stuck .heading-title [name="stucked-title"] {
+    font-size: var(--font-size-8);
   }
 
-  .heading-panel {
-    justify-content: flex-start;
-    padding-bottom: calc(var(--space-unit) * 3);
+  .heading-stuck-content {
+    padding: 6px var(--grid-margin);
   }
 
-  .heading-container,
-  .menu-container {
-    width: auto;
+  ::slotted([slot="product-logo"]) {
+    margin-right: calc(var(--space-unit) * 1.5);
   }
 
-  :host([flow="stack"]) .heading-panel {
-    flex-flow: column;
-    align-items: flex-start;
-  }
-
-  :host([flow="stack"]) .menu-container {
-    width: 100%;
+  /* stylelint-disable-next-line selector-not-notation */
+  :host(:not([enable-offcanvas]):not([menu-length="0"])) {
+    padding-left: 0;
   }
+}
 
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-panel {
-    row-gap: calc(var(--space-unit) * 3);
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  ::slotted([slot="product-logo"]) {
+    margin-right: var(--space-unit);
   }
 
   z-searchbar {
@@ -426,15 +399,6 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
   }
 }
 
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-9-size);
-    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);
-  }
-}
-
 @keyframes slide-stuck-heading-in {
   0% {
     transform: translate3d(0, -100%, 0);

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '3dc09efdfb273cbb3700c75f6e83112d6d158fb0', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '109c1e5fa0fa0bd7fa990c7fdb23c0f65dd6811e' })));
+        return (h(Host, { key: '851bdac7b9b7c2dd4a5042a78cfacfe234051928', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'e3217c0633b68f55bd62c26fd1afb6d00dfe2708' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '63564a1499f36b406dcece1fd47bb0aa8e06ed6d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '4be97c710d33cc6dd35c1f0a7141b7f13c6e161f', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '9813952059608df9a5cdf74db7038aec2751dfa8' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'd918f83b5212cb7618e30a0dc040f0c312341386', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'af2d27fb007244f5830151e24e68cc757761d84e' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'c507bc501c79eeb009e979242b5224a1fab85470', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-book-card/index.js

@@ -124,7 +124,7 @@ export class ZBookCard {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '93b847b7f5067c69880ea8ba283a207c8b691a2a', class: {
+        return (h("article", { key: '00cfaf1ddd32ce35c1e4db212332470941d7774e', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

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

@@ -193,10 +193,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: 'bba9d5bf2b1316c4e29eebcc00cb23c3e6635a36', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '4d916bcbb730f4e3cd0d051b630336db7222aa30', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '103caf1740a6663402282211d961204bce9b8a70', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '6fea4845c60c77671d59abc70d9b4d10ce33c0f7', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '654d8e9cad8417a155f1bc349b7b16687c8db96e' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '608d68e56a5810e77358afc316d5d4d721155628' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-button-sort/index.js

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: 'ec1021febf46cd3a012af1142e74157e16e6b363', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '84013f6114589408dc62323285a1441c94fc9ddf', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'bc938175d5453e7c59f577b92452d63658417e0a', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '10fba0801dcbc47569e79c81179d7a485dc3582e', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '51035628c557620d4681db63a6a1b6080b57275a', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: 'b6c328214c3d75310976a734cdaff34a47f5822c', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '4bc5edbe60157542dbea6e1cc8d9e7d1da76ab38', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'ae64bab422698547fe8767adb0793fa43741b754', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f109549ca43596ae840703a3444e5a2b6efbc9e6', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '3e81d1762cd1f385d72eb2079a41f13583fa036b', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '97f98567047b81864de0326e6ec89153d83cc1c1', class: {
+        return (h("div", { key: '53ee49e87ccaa13c3c80be83f799d48b5d43b09a', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '45a3661a2cbda05351c56bbc9fd697fad9bc96ea', name: this.icon }), h("slot", { key: '9d81610f7d11777a0ab71772f35e610796d65e98' }), this.interactiveIcon && (h("button", { key: '53c13cdad61a96cb139c32923c469e9e1237bc15', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '0baf684cbd662f7b3cedbd2a7468215f896472c6', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'd8d6c51f9aeeeec166898f263f75588f3c666cef', name: this.icon }), h("slot", { key: '3f1e2925b5e3ae370d4c37bcbdc95f142ff22a3f' }), this.interactiveIcon && (h("button", { key: '13b028125d5718b882351ab017418246e8bf900d', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '913f66b93c948aeaf67e89a76d6870c26ce48a31', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '118ffd4229b6b7f060d9b28ace7d5a59796620b9', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '4d1d99f8d0f180054a363b17d478098380677de2', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-cover-hero/index.js

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '782c8ef237b2744069752392ab29176ae65bf798' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '0442ee31b5680684016e70c34f6fe5e2c3b9fce2' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '97f1b49350218a75b19946a46190c63c15f70058', class: "main-container" }, h("div", { key: '2dc3210d8807b998ad1823bb2776d59a762f15dd', class: "cover-container" }, h("slot", { key: '2ab5b85aa02c25ee81ecafb3db91e0e57df549b3', name: "cover" })), h("slot", { key: 'a77f81fef651d1aae577079c4918cb26fb9af328', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '06709aca22e8f925ed0a3fcb3f0bd4f6e25f5893', class: "main-container" }, h("div", { key: '1e963192dbb9782b11f196f21a9722accc42999d', class: "cover-container" }, h("slot", { key: '698d87aaf8c141a3a781e238e9b13619cc4c60d3', name: "cover" })), h("slot", { key: '5f92a6143b679620fdfe5149b2af891da718665d', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: 'eb614abec38cb1f4c558cb1b2daf4eae845842c8', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '899f574dfd9b29724104827540e0a751e4a3b589', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: 'dbc7747f3cf3b0578212c4d86f28410d40826cdc' });
+        return h(Host, { key: '72423981dd27b511f927751a0886182a0872d512' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-box/index.js

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '52cbca4a972a1fb53f65bf86428ee23f8933b616', id: this.boxid }, h("slot", { key: '3b83aa34338ceb6c11f74a316bf50dd77bd0c662', name: "content" }), this.isclosable && (h("z-icon", { key: '2b3f8bbb5ce69105bddac3253047199028f4e2c0', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '7b95574bc12ca15eb80f5a710f75e8bcff2ea0cd', id: this.boxid }, h("slot", { key: 'fcd4a9ae4a4efdae1e6a7aa89c77104344122a1a', name: "content" }), this.isclosable && (h("z-icon", { key: '9a757d25f508088be59f2c51ea5ac5c6067f579a', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/index.js

@@ -47,7 +47,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '45471ff481d7ce13ff05da131b5de64fadaf68d9', open: this.open }, h("button", { key: '8677715bec503a1bd07f6df15932a98417599495', 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 && h("z-icon", { key: '48e14ecbee56d2dc6b9b297f8daa171c34c2a98d', name: this.icon }), this.label && h("span", { key: '89e72867433abd07cb334120558ccdc02a5bbb81', class: "z-info-reveal-label" }, this.label)), h("div", { key: '06268f048b3d6244f940900ca114dfcad5417849', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '3698cbc239ab16b04226e7e9f1619014500b30f6' }), h("button", { key: '7e03364aeb76b404d4ed78d640de500b95f68769', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '524131a6b9b100729c10657c778bc6bb1daf6946', name: "multiply" })))));
+        return (h(Host, { key: 'f6264a965cec2cac4e38ce1ffb8e6738f3b1fcd4', open: this.open }, 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 && h("z-icon", { key: 'ea75d8979c67562f88768aa02e237883f0ea89f8', name: this.icon }), this.label && h("span", { key: '4e37cd8bdb878f083682f65ac592b15af04d48e4', class: "z-info-reveal-label" }, this.label)), h("div", { key: '1808554bf404059a691058c5069c7e3bddf8e50f', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'b1aca025f4e3fe0e27ebe28b0faaf37971cb2c32' }), h("button", { key: '9037710ed3fc0f2972dbe263b0d5df120373b34a', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'f0cc7e4778dfa59623c32b02c69b0aed00892aeb', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -261,7 +261,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '72a37f109e4ea99c470c43a29a86c267466f719e' }, input);
+        return h(Host, { key: '46e4b397df906f88b5994f919aec108deb73f7a8' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }