@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-RC6

package/dist/collection/collection-manifest.json

@@ -2,16 +2,13 @@
   "entries": [
     "components/file-upload/z-file-upload/index.js",
     "components/book-card/z-book-card/index.js",
-    "components/z-button/index.js",
-    "components/z-icon/index.js",
-    "components/z-tag/index.js",
     "components/book-card/z-book-card-app/index.js",
     "components/date-picker/z-date-picker/index.js",
     "components/date-picker/z-range-picker/index.js",
     "components/deprecated/z-app-header-deprecated/index.js",
-    "components/deprecated/z-menu-deprecated/index.js",
-    "components/deprecated/z-menu-section-deprecated/index.js",
     "components/deprecated/z-book-card-deprecated/index.js",
+    "components/deprecated/z-menu-section-deprecated/index.js",
+    "components/deprecated/z-menu-deprecated/index.js",
     "components/deprecated/z-section-title/index.js",
     "components/file-upload/z-dragdrop-area/index.js",
     "components/file-upload/z-file/index.js",
@@ -29,29 +26,29 @@
     "components/z-accordion/index.js",
     "components/z-anchor-navigation/index.js",
     "components/z-app-header/index.js",
-    "components/z-menu-section/index.js",
-    "components/z-menu/index.js",
     "components/z-aria-alert/index.js",
-    "components/z-visually-hidden/index.js",
     "components/z-avatar/index.js",
     "components/z-book-cover/index.js",
     "components/z-breadcrumb/index.js",
+    "components/z-button/index.js",
     "components/z-button-sort/index.js",
     "components/z-card/index.js",
     "components/z-carousel/index.js",
-    "components/z-ghost-loading/index.js",
     "components/z-chip/index.js",
     "components/z-color-picker/index.js",
     "components/z-input/index.js",
     "components/z-combobox/index.js",
     "components/z-cover-hero/index.js",
-    "components/z-info-reveal/index.js",
     "components/z-divider/index.js",
+    "components/z-ghost-loading/index.js",
+    "components/z-icon/index.js",
     "components/z-info-box/index.js",
+    "components/z-info-reveal/index.js",
     "components/z-input-message/index.js",
     "components/z-logo/index.js",
+    "components/z-menu-section/index.js",
+    "components/z-menu/index.js",
     "components/z-modal/index.js",
-    "components/z-select/index.js",
     "components/z-navigation-tabs/index.js",
     "components/z-notification/index.js",
     "components/z-offcanvas/index.js",
@@ -60,9 +57,11 @@
     "components/z-popover/index.js",
     "components/z-result-card/index.js",
     "components/z-searchbar/index.js",
+    "components/z-select/index.js",
     "components/z-skip-to-content/index.js",
     "components/z-stepper/index.js",
     "components/z-stepper-item/index.js",
+    "components/z-tag/index.js",
     "components/z-toast-notification/index.js",
     "components/z-toast-notification-list/index.js",
     "components/z-toggle-button/index.js",
@@ -70,6 +69,7 @@
     "components/z-tool/index.js",
     "components/z-toolbar/index.js",
     "components/z-tooltip/index.js",
+    "components/z-visually-hidden/index.js",
     "snowflakes/myz/card/z-myz-card/index.js",
     "snowflakes/myz/card/z-myz-card-alert/index.js",
     "snowflakes/myz/card/z-myz-card-body/index.js",

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

@@ -7,13 +7,6 @@ import { BookCardVariant, ControlSize } from "../../../beans";
  * @slot data - External link and pill, default empty
  * @slot apps - List of card-related apps, default empty
  * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot
- * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
- * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
- * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
- * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
- * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
- * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
- * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
  */
 export class ZBookCard {
     constructor() {
@@ -84,7 +77,7 @@ export class ZBookCard {
         return h("slot", { name: "cta" });
     }
     render() {
-        return (h(Host, { key: '4cec7a37319ce6095d5cd821c1b80540391561d0' }, h("div", { key: '6cffb586b64cf5a351e40db908607d330632fa6c', class: "main-content" }, this.renderCover(), h("div", { key: '8b4dfc398b300497c350086e24568d1c3f6b6673', class: "card-info" }, h("div", { key: '8f32a9319a32ff88f5eae65a1d25ee4c13e2c381', class: "top" }, h("div", { key: 'baa1822a705473d8774ef09168ba7da8dee00251' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'a15010db2dd9cc4be96c735b6dbbc8f84ff27c9a', name: "tags" }), h("slot", { key: 'd77fbb0726d5f93eb1846f9e8e6357f1dec8c9b3', name: "data" })), h("slot", { key: 'dd917eebc23c1510bf41b08c43e854e7bc47d615', name: "ebook" }, !!this.ebookUrl && h("div", { key: 'f16001572ab34b0ba5436ac569e63a4f52ddffab', class: "bottom" }, this.renderEbook())))), h("slot", { key: '9a79175ec30f51192a89c94c99b029d740a94025', name: "apps" })));
+        return (h(Host, { key: '51452a17d92d9cf92a12134fff963165748519e3' }, h("div", { key: 'f5ac7d525b4b25fda20b1772d5508d8e2e528cfd', class: "main-content" }, this.renderCover(), h("div", { key: 'ea9ef02b1f7acc53a442d5aa03e320a92fe4b57d', class: "card-info" }, h("div", { key: '194da8efc4f1f3e9e3a1549a86be1474f68873da', class: "top" }, h("div", { key: '522ae3f38eba5d95f1e8fc1239ec59fe7df32935' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: '62869a3e3965c0f7611cc93e16c8c660b369ca17', name: "tags" }), h("slot", { key: '15c733e6644af2de263b0184f4c395ce967d773b', name: "data" })), h("slot", { key: 'eab8052dc791068b689e5d3cb95c0031fac19a9e', name: "ebook" }, !!this.ebookUrl && h("div", { key: '688bf22e1da5a8cd330aaccdb8d4fb7974f368bb', class: "bottom" }, this.renderEbook())))), h("slot", { key: '50d18fb8b88035ecb1d896eb199e7907c08872f1', name: "apps" })));
     }
     static get is() { return "z-book-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/book-card/z-book-card/styles.css

@@ -1,4 +1,13 @@
 :host {
+  /**
+   * @prop --z-book-card-portrait-cover-height: Set custom cover height for portrait variant - Default: `378px`
+   * @prop --z-book-card-title-lines: Set title avilable lines - Default: `2`
+   * @prop --z-book-card-title-word-break: Set title word-break rule - Default: `initial`
+   * @prop --z-book-card-subtitle-lines: Set subtitle available lines - Default: `1`
+   * @prop --z-book-card-subtitle-word-break: Set subtitle word-break rule - Default: `break-all`
+   * @prop --z-book-card-authors-lines: Set authors available lines - Default: `1`
+   * @prop --z-book-card-authors-word-break: Set authors word-break rule - Default: `break-all`
+   */
   --z-book-card-portrait-cover-height: 378px;
   --z-book-card-title-lines: 2;
   --z-book-card-title-word-break: initial;

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

@@ -2,8 +2,6 @@ import { h } from "@stencil/core";
 import { ControlSize, InfoRevealPosition } from "../../../beans";
 /**
  * ZBookCardApp component
- * @cssprop --z-book-card-app-padding-x - set left and right padding
- * @cssprop --z-book-card-app-padding-y - set top and bottom padding
  */
 export class ZBookCardApp {
     constructor() {
@@ -22,7 +20,7 @@ export class ZBookCardApp {
         return null;
     }
     render() {
-        return (h("div", { key: '9c6abc487430655fe73fe11e15962c0e621eee17' }, h("a", { key: '352e4cfa7d40141fe95049de52a1c1828406b88b', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: 'e89e99543a0831ac0262a664eaab5777c9a24ba7', src: this.logo, alt: "" })), h("div", { key: '042dbe9eb0f8ec774eb75e825027f64deb833f1b', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '775bc626e17c45a4540f953bb541347216a6e94f', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '59de145e1fc152411218a7eb12c9193f96e9e7f5' }, this.info))), h("a", { key: '537cb5d86c400a4026b0a07cd17975903b2e8711', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '2bb8cbc909ee0edcf0ccf2abd61fa2cb62521380', name: "chevron-right", fill: "color-primary01-icon" }))));
+        return (h("div", { key: '1d1b2f0e55e862d339781bcc5569643b4600c1ac' }, h("a", { key: 'ce545fd451b0508cd5242ac5fe78a53f05bcd470', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: 'e6f70c907d4536ff79efb82d52520b250abe41ed', src: this.logo, alt: "" })), h("div", { key: '7159aca193bad1acab23f66074b07a8d37e82f4f', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '354d150ea3ca2c1f5b21466da28f267548e0ee9c', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '361e85815010eba5863e1a49cb190150413f48f1' }, this.info))), h("a", { key: '52713f456a71c32de4d300c0411a8874364d7cf1', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '746e103053881320ed6840fecca10baf23b0a80a', name: "chevron-right", fill: "color-primary01-icon" }))));
     }
     static get is() { return "z-book-card-app"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/book-card/z-book-card-app/styles.css

@@ -1,4 +1,8 @@
 :host {
+  /**
+   * @prop --z-book-card-app-padding-x: set left and right padding
+   * @prop --z-book-card-app-padding-y: set top and bottom padding
+   */
   display: block;
   width: inherit;
   min-width: 300px;

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

@@ -0,0 +1,40 @@
+/* Webkit Scrollbar */
+.z-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
+}
+
+.z-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary01);
+}
+
+.z-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+:host([theme="dark"]) .z-scrollbar,
+.z-scrollbar--dark {
+  --z-scrollbar-track-gradient: linear-gradient(
+    to right,
+    transparent 0 1px,
+    var(--gray600) 1px 5px,
+    transparent 5px 6px
+  );
+  --z-scrollbar-track-color: var(--gray600);
+  --z-scrollbar-thumb-color: var(--color-primary03);
+  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);
+  --z-scrollbar-corner-color: transparent;
+}
+
+/* Firefox scrollbar */
+@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {
+  .z-scrollbar {
+    scrollbar-color: var(--color-primary01) transparent;
+  }
+
+  :host([theme="dark"]) .z-scrollbar,
+  .z-scrollbar--dark {
+    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))
+      var(--z-scrollbar-track-color, var(--gray600));
+  }
+}

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

@@ -0,0 +1,61 @@
+z-table,
+table.z-table {
+  background-color: var(--color-surface01);
+
+  --z-table--cells-padding: calc(var(--space-unit) * 2);
+}
+
+table.z-table {
+  border-collapse: collapse;
+}
+
+z-thead,
+table.z-table thead {
+  background-color: var(--color-background);
+
+  --z-table--cells-bottom-border-size: var(--border-size-medium);
+}
+
+z-tfoot,
+table.z-table tfoot {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+z-tfoot z-tr,
+table.z-table tfoot tr {
+  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;
+}
+
+z-tr,
+table.z-table tr {
+  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
+}
+
+z-td,
+z-th,
+table.z-table td,
+table.z-table th {
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  text-align: left;
+}
+
+z-th:not(:first-child),
+z-td:not(:first-child),
+table.z-table th:not(:first-child),
+table.z-table td:not(:first-child) {
+  border-left: var(--z-table--cell-left-border, none);
+}
+
+z-table[bordered],
+table.z-table.z-table-bordered {
+  --z-table--cell-left-border: 1px solid var(--color-surface03);
+}
+
+table.z-table-hover tr:hover > td,
+table.z-table-hover tr:hover > th {
+  background-color: var(--color-surface02);
+  box-shadow:
+    inset 0 var(--border-size-small) 0 var(--color-surface04),
+    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);
+}

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -172,7 +172,7 @@ export class ZDatePicker {
             } })));
     }
     render() {
-        return (h("div", { key: 'a17c625e0c3ba0c69b7805670f178a1c2a12a4d2', class: {
+        return (h("div", { key: '93fda1008d65ebd8a0c09639fe1dbdde501f8d32', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,

package/dist/collection/components/date-picker/z-range-picker/index.js

@@ -337,14 +337,14 @@ export class ZRangePicker {
             onStopTyping: this.onStopTyping.bind(this),
             value: "",
         };
-        return (h("div", { key: 'd887ebec692313b066955f1048e3b354d3ec453c', class: {
+        return (h("div", { key: 'd2d94a3237b1659fd6ba789ed36717cb74eb7656', class: {
                 ["range-pickers-container"]: true,
                 [this.mode]: true,
                 [this.activeInput]: true,
                 [this.flatpickrPosition]: true,
-            } }, h("div", { key: '702d5feaa4ac821b54607721d1d8546f9ed39fc3', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: '3966e1979b4814441f81eb303dbd5e5170d03adc', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: 'f6b357db6631b4d2e09e7ead83abbf80c5623ada' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
+            } }, h("div", { key: 'd6a31c6bf63475ae192d207b84910801d1dc9812', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: '4755c5035411d352b52c00f762148be686a3849a', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: 'fb5a934e6e7265a716e876fcd317d6682ff498fb' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
                 this.firstInputError = false;
-            } })))), h("div", { key: '98362ce128d64f10559686428299e57a8b4f0168', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: '618f57b6e8f9e4adcf4f0a339e04eee32d27adaf', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: '0302fc0f0489dea3f184be7634c49f7604397b45' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
+            } })))), h("div", { key: '4e9889983e2422851e6d6ca2ea4f87ad1e23af21', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: 'ce5d885db43f3795863cafe600098eaf77d8836c', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: 'babf71bfafe8788c4b849692ad49fd0f6d015822' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
                 this.lastInputError = false;
             } }))))));
     }

package/dist/collection/components/deprecated/z-app-header-deprecated/index.js

@@ -6,59 +6,6 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
- * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
- * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
- * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
- * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
- * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
- * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
- * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
- * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
- * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
- * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
- * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
- * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
- * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
- * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
- * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
- * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
- * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
- * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
- * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
- * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
- * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
- * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
- * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
- * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
- * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-height - Defaults to `auto`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
- * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
- * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
- * Defaults to `--app-header-typography-3-size`.
- * @cssprop --app-header-title-lineheight - 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.
- * Defaults to `--app-header-typography-3-lineheight`.
- * @cssprop --app-header-title-letter-spacing - 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.
- * Defaults to `--app-header-typography-3-tracking`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeaderDeprecated {
     constructor() {
@@ -221,7 +168,7 @@ export class ZAppHeaderDeprecated {
         this.evaluateViewport();
     }
     render() {
-        return (h(Host, { key: '4d98fcae5ac33ba947f6ff5a040dd532b743faab', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: 'f2105ccf7087e83d54c47ca0722b1099f81a8179', class: "hero-container" }, h("slot", { key: '451530f8e43a4f3ca714b4c59b995bd761ee9dc1', name: "hero" }, this.hero && (h("img", { key: '7eceb9dab857740287d51b5fecb4c817ead691dc', alt: "", src: this.hero }))))), h("div", { key: 'b271e53c52c519a09eee6cec9465b9d7aa97a197', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '8637be0cbfa33887f1cac0599fa9a2752856c9b8', class: "heading-container" }, h("div", { key: '556ad49f4dbe98e0a59c712fa7bb8a30d9b7cf7c', class: "heading-subtitle" }, h("slot", { key: '1cc116d852ae01c0fd35003c92eac5a5b5ff91e7', name: "top-subtitle" })), h("div", { key: '3ced62279a854043978ad6829db41e830525880f', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '27ee765d26aaf4450cdc9048f88f8f3868776fc0', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '77b4538acce08037e2d7ff2807e3da877cea06b4', name: "burger-menu" }))), h("slot", { key: 'ff3cc40db1155d7417842f1b573688117fa38f1a', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '60b46172cdbdf15dfd163368b6dc0c9ff442f725', class: "heading-subtitle" }, h("slot", { key: 'b8f08a0ac6e2446736a27a3e211454db739792b8', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: '21ea0742122e3c2eb2fd49ebf872cb287dd61ed9', class: "menu-container" }, this.canShowMenu && (h("slot", { key: 'f65701606bf787a0eefdb1305ccb897d7a21f026', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: 'a6c999a01c8a956567c992bc4dbe9912c7b98f3b', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '9f03560a04d34dc7b888f8fef1e392f3c0052720', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'e1f467a7ea2810158883c6e58d03628a120d7eee', name: "close" })), h("div", { key: '581886a5fabd793dafc6b5bbb243a3e9241756e0', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: '6d581a70fdc08610851c45ec3b01da89461d09c5', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '459d01a5337718248440da883f4d1cd5065d8671', class: "heading-stuck" }, h("div", { key: '2c66f4a2b70a564d04ae70aa6f57bf5d8166b088', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: 'd778fb87bc2fbff3ef63a59eb0bd246832cd56cb', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: 'd57c58aefe3511290576dc9edfbfbd45f694795d', name: "burger-menu" }))), h("div", { key: '22feee81b662e325b8de3fbdb90e19c959bd1bd8', class: "heading-title" }, h("slot", { key: '2a856a72f2bbdd5653b9fb4f718ab518cca37462', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        return (h(Host, { key: 'aded309a3cb1033c51f95d94de1cd796f643fea0', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '78458badadf63a3366eaba9481ed709f7cb455c5', class: "hero-container" }, h("slot", { key: '1296c2091f4dd8b2f5215f07ea096772fc700abb', name: "hero" }, this.hero && (h("img", { key: 'ed06c899fb3e2b7316161555b307033a6821f64a', alt: "", src: this.hero }))))), h("div", { key: 'd8e275bde97fe5d694a50c33b5b32db7aee7699e', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: 'ce6fe29fd508558b3d75dba200006dfa31ba5ad9', class: "heading-container" }, h("div", { key: '5464ae272a15fcd6a975b62f5d2d6206d6f3f060', class: "heading-subtitle" }, h("slot", { key: '53c143c49c40cd3cef1475af920122ca5abd5329', name: "top-subtitle" })), h("div", { key: '0c4c147537d3ece12fd35e4a5ca553aeff2a8f1c', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '68e24b4435b6ee099f288cb4cb28794834ab1f72', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '220a3096e3275ec8e6bee6b715926f891ed09045', name: "burger-menu" }))), h("slot", { key: '52e89fe9902914e6daafe61f47de9ea4f02bf93e', name: "title" }), this.renderSearchLinkButton()), h("div", { key: 'c1f90edc6ecb0063d53f3ed68ee718fc86397751', class: "heading-subtitle" }, h("slot", { key: '84398e5cd8bf522e13b9f29118ba20d46510fbb1', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'e6d6d1fa5040a7c6d54869fac4c92a19407145fb', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '3c442f00807b6a4ff33349709a24b6096bce3b3c', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '268fa9a09f449e5e277ed56134cd1a5be9e9713e', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: 'be0350100f473da07ac89c22b950c0ff5f2dc14a', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'ebe1a2dd92cb3d010741e8745c5359a852e46253', name: "close" })), h("div", { key: 'cb6b380cfddc334c84fae9a045d4b886ff8d3f26', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'e120aa846065db5a7c0d9827e7b74a98f7b41f25', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '7d0460155469d822b7f608804dc1465f08e28b02', class: "heading-stuck" }, h("div", { key: 'b570cf1d407aad9a9c2a10af56835f3a3d5f1379', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '06929d598cab5b080e0f3b23606ca6e4ee50a113', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '807ee08ed6a4db7ca124114007e1a2d52dca75e0', name: "burger-menu" }))), h("div", { key: 'dfbb47685f209528aa6a70f29b5cb5ca83a4a2e6', class: "heading-title" }, h("slot", { key: 'aff80bd515be456bc15b5fa91dbc85ce33fe6562', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
     }
     static get is() { return "z-app-header-deprecated"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,53 @@
 :host {
+  /**
+   * @prop --app-header-typography-1-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
+   * @prop --app-header-typography-2-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
+   * @prop --app-header-typography-3-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
+   * @prop --app-header-typography-4-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
+   * @prop --app-header-typography-5-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
+   * @prop --app-header-typography-6-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
+   * @prop --app-header-typography-7-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
+   * @prop --app-header-typography-8-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
+   * @prop --app-header-typography-9-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
+   * @prop --app-header-typography-10-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
+   * @prop --app-header-typography-11-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
+   * @prop --app-header-typography-12-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
+   * @prop --app-header-typography-1-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
+   * @prop --app-header-typography-2-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
+   * @prop --app-header-typography-3-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-4-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-5-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-6-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-7-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-8-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-9-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-10-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-11-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-12-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-1-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
+   * @prop --app-header-typography-2-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
+   * @prop --app-header-typography-3-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
+   * @prop --app-header-typography-4-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
+   * @prop --app-header-typography-5-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
+   * @prop --app-header-typography-6-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
+   * @prop --app-header-typography-7-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
+   * @prop --app-header-typography-8-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
+   * @prop --app-header-typography-9-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
+   * @prop --app-header-typography-10-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
+   * @prop --app-header-typography-11-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
+   * @prop --app-header-typography-12-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+   * @prop --app-header-height: Defaults to `auto`.
+   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+   * @prop --app-header-drawer-trigger-size: The size of the drawer icon. Defaults to `--space-unit * 4`.
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
+   * @prop --app-header-title-font-size: Variable to customize the title's font size. NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. Defaults to `--app-header-typography-3-size`.
+   * @prop --app-header-title-lineheight: 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. Defaults to `--app-header-typography-3-lineheight`.
+   * @prop --app-header-title-letter-spacing: 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. Defaults to `--app-header-typography-3-tracking`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;

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

@@ -7,10 +7,6 @@ import { randomId } from "../../../utils/utils";
  * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
  * @slot tags - card tags (extended and search variant only)
  * @slot footer-cta - footer cta button (search and compact variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- * @cssprop --z-book-card-compact-width - compact card custom width
- * @cssprop --z-book-card-compact-height - compact card custom height
  */
 export class ZBookCardDeprecated {
     constructor() {
@@ -115,7 +111,7 @@ export class ZBookCardDeprecated {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '09310ad4eac077f69d476ad5bcc941d96df9975d', class: {
+        return (h("article", { key: 'd603afa99fc5bdc0b6cb9ad1b22a309c4962c486', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

package/dist/collection/components/deprecated/z-book-card-deprecated/styles.css

@@ -1,6 +1,12 @@
 /* COMMON STYLES */
 
 :host {
+  /**
+   * @prop --z-book-card-ribbon-background-color: ribbon backgrund color
+   * @prop --z-book-card-ribbon-shadow-color: ribbon shadow color
+   * @prop --z-book-card-compact-width: compact card custom width
+   * @prop --z-book-card-compact-height: compact card custom height
+   */
   --z-book-card-ribbon-background-color: var(--avatar-C08);
   --z-book-card-ribbon-shadow-color: var(--green950);
   --z-book-card-compact-width: 262px;

package/dist/collection/components/deprecated/z-menu-deprecated/index.js

@@ -3,7 +3,6 @@ import { Host, h, } from "@stencil/core";
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenuDeprecated {
     toggle() {
@@ -108,7 +107,7 @@ export class ZMenuDeprecated {
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: 'c0cc18338db770e7b369bce7e469445219326566' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: 'c895c377c1cc572c18bbc56e9cb8c513346d1ae4', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '17df894168c27a4ec0599d10bb885761b5eded54', class: "header" }, h("slot", { key: 'd50f55ef51bdf388a75bc8739c29a58f32c6b316', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '948157a99d60c696fa97b8b904366dc0992e87da', class: "items", role: "menu" }, h("slot", { key: 'e93150d2a5e7c1e33d7cfe8f297e9990e0d5c01e', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: 'dde3e828c6617646ed848e91c53dc624fc23bc2d' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '9888a27020733770e87e87f2ac6193dc0430e36b', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '09a21728b3cfc859dbdf59b2441326a610c2869f', class: "header" }, h("slot", { key: '72bbb4073b1e76569770dc7089526e9f9b055089', name: "header", onSlotchange: this.checkContent }))), h("div", { key: 'f53e86dea26861a62f3e924e67f14c97e42f7861', class: "items", role: "menu" }, h("slot", { key: '2b6e230e79f472828b85ba40281c9781a14dcef6', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     static get is() { return "z-menu-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-menu-deprecated/styles.css

@@ -5,11 +5,14 @@
 }
 
 :host {
+  /**
+   * @prop --z-menu-label-color: Color of the label's text.
+   */
+  --z-menu-label-color: var(--color-default-text);
+
   position: relative;
   display: inline-flex;
   flex-direction: column;
-
-  --z-menu-label-color: var(--color-default-text);
 }
 
 ::slotted(a) {

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js

@@ -43,7 +43,7 @@ export class ZMenuSectionDeprecated {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '9c0afdf0decad8a1eb51ba90c1fa1cb3bcbfa321', role: "menu", open: this.open }, h("button", { key: '79ddfb8c44ef6a47fad56cf2f2a1c5ea6ee4bd5a', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '3027b6975681544c8e2fef1c6f59be689664e26e', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '9de3a8659409445f8bf781498ecc1dd2d2691d6c', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'd5aa04822af0e9e9c07b6ee72bde0b875d2bafbb', class: "items" }, h("slot", { key: 'ca7eaac55e80903beb3d49373bbb28ca24f4e034', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: 'a65fd5af1f2b3b6c9d21c30336b806395624af59', role: "menu", open: this.open }, h("button", { key: '88460e785ca428d4a40f4dc9bdd56194a2b64d3e', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'b0198e42f9819b2e9c622d4672510d7a9584a1b1', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '6b6f41288e53ef83b6817eda49e1a77135552345', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '7721c370a48044d60749f366a718ca266d9afc73', class: "items" }, h("slot", { key: '1738da8320d0931abaf8a7dd854456e28bba9781', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     static get is() { return "z-menu-section-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-section-title/index.js

@@ -7,7 +7,6 @@ import { DividerSize, ZSectionTitleDividerPosition } from "../../../beans";
  * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
  * following its width and removing the one for the primary title.
  * @slot primary-title - Slot for the primary title.
- * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
  */
 export class ZSectionTitle {
     constructor() {
@@ -25,7 +24,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'b2a5c1767c66f1b993f95c4907e5b6ac4555a7a5' }, h("slot", { key: 'dd96a1b84d003243f6a48a074c3ebe92c5b3c3e3', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '8de1932f1eee5210277e73ba1a25359570a2ab06', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'd0f29c94936e5ab2a7491b3b6273ce51a1c8a626', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '13f04775afe18fc3f76bb09f48c415486896b421', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '020c1a41ff7fa0881464463322b54754e7664957' }, h("slot", { key: 'c6d7baf944465d1092749cf288636fcd502e659c', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'ea70a8579ed61ba8b1d6488566473b90c47540d1', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '4cf602491394aaf97cead51bbc7f9b2da299bef3', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '47275d6411b00769db2e244bad13032d43cc9144', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-section-title/styles.css

@@ -1,4 +1,7 @@
 :host {
+  /**
+   * @prop --z-section-title--divider-color: Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
+   */
   --z-section-title--divider-color: var(--red500);
 
   display: flex;

package/dist/collection/components/file-upload/z-dragdrop-area/index.js

@@ -12,12 +12,12 @@ export class ZDragdropArea {
         }
     }
     render() {
-        return (h(Host, { key: '042a22ebd47c1bee49ca08121fa3ef23c99daa97', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: 'ec92afc8d6998ac3595b4c84121cc80204367bbb', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '9f4cb47d47b9976a86f5eedba956aa3cf0939f81', class: "dragover-container" }, h("z-button", { key: 'fc12e55894affd3273bffa56f1508b0d1d23e92d' }, this.dragAndDropLabel)), h("slot", { key: '0f99ee53ef49d5792772b9993bade7d5b46e6c58' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '6008c32e681b7c8f9f1063bba50c6106e12599de', class: "dragover-container" }, h("z-button", { key: 'ea4bfd5b7ee6d05241f5efb18844cd8beb10dde2' }, this.dragAndDropLabel)), h("slot", { key: '95aa7512bbbd0efcea3c3dbafecc4b33a1d24f87' })));
     }
     static get is() { return "z-dragdrop-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-upload/z-file/index.js

@@ -30,7 +30,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b14de221b558a20b6a73755f4a299743fa5a7d23' }, this.allowPopover && (h("z-popover", { key: 'fc3a7c327d89a7a9ea6b9660d17d78de1922729c', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '7f33d40074ba639bd8da65132dad5b2fa1cf349e', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ae8746950f0ee745c77a1b5602c4f6ecb0278afd', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '6ef36d2bebe82fbcb9919cce4c2a4c8d657ba255', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '12ffcf9cd4e06418f8ef0c0fe6f901519ea81578' }, this.allowPopover && (h("z-popover", { key: 'b77adda2c9f80584b3e74ab82d5c8b5198b50d88', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '9d0bb9bbdb210ce143a129ca4f46a6409b85b393', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '9d9c8f64f63c4723c2f6540be7d6c534650a847d', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '959647e217388cad43c3bb3536a44ce22b548067', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -133,7 +133,7 @@ export class ZFileUpload {
         return (h("section", { class: { "files-container": true, "hidden": !this.files.length } }, h("div", { class: "uploaded-files-label heading-3-sb" }, this.uploadedFilesLabel), h("div", { class: "files-wrapper" }, h("slot", { name: "files" }))));
     }
     renderInput() {
-        return (h("input", { type: "file", name: this.inputName, multiple: true, onChange: (e) => this.onFilesChange(e), accept: this.acceptedFormat, ref: (val) => (this.input = val) }));
+        return (h("input", { type: "file", name: this.inputName, multiple: true, onChange: (e) => this.onFilesChange(e), accept: this.acceptedFormat, "aria-labelledby": this.description ? "description" : undefined, ref: (val) => (this.input = val) }));
     }
     renderUploadButton() {
         return [
@@ -178,7 +178,7 @@ export class ZFileUpload {
         });
     }
     render() {
-        return (h(Host, { key: '9f2aeeeb12f48f34a732137c809c48c23d6a190e' }, this.mainTitle && (h("div", { key: '63924f49200a966ed3e7244c685ae9df6eeefbc1', id: "title", class: "heading-3-sb" }, this.mainTitle)), this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode(), !!this.invalidFiles.size && this.showErrors && (h("z-modal", { key: 'e3c015962d22df4c1d769d6177417bbf8d6bcc93', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: '0cc1b6a3a952e1e683a70b952af131b74e7021e0', slot: "modalContent" }, h("div", { key: '833875c9ffe28ad248a4cacd7249153c7230df0a', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
+        return (h(Host, { key: '26a1a04ff6d1a9c9cf0e16311bb747b349c7ca67' }, this.mainTitle && (h("div", { key: 'cbce95e36bb7a1fe81c8c41e0723169e6b47442d', id: "title", class: "heading-3-sb" }, this.mainTitle)), this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode(), !!this.invalidFiles.size && this.showErrors && (h("z-modal", { key: '6a000d85f1f9b46a2872b4fa40b978a97427018c', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: 'caa8f6424a54d279ed2eca6c7514390324b40c59', slot: "modalContent" }, h("div", { key: 'b069c1fff610bcf4adbff57b0c5a9fa3e70e32ea', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
     }
     static get is() { return "z-file-upload"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'f34729eb14ef690bf0aeb7da4b406e955a66fbf7' }, h("slot", { key: '82b4a9c72937797bb8f7e4141f7a4c609908c702' })));
+        return (h(Host, { key: '2aac86dccac20cc21ec7c1341a99298f8523af49' }, h("slot", { key: '207231c63243efcd61917a9b4aa3394e22379bbd' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }