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

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

@@ -6,7 +6,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '13857c631b48af312fa399d224dd299d24ad7026', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b5f4501e8230e2d669eb24d431a39e58232eab20' })));
+        return (h(Host, { key: '93bfcc69e5d7d76af5deec0c12cee5db73788a5c', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '7dcfd72ecc06605e78ae738f837cec969997ef7d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -25,10 +25,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '0193c1b81b0b8770c8bd1f807d128a110e6bdce9', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '3543824c05f276cddcc91263350962015dc2beb8', 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: 'c14637da56b4861d00a40d3b976293b3d9580dab' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'bfda459b40de8ece37f6fb3457d9b90d2986b7f0', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '4a143ab81b55fae15ab40e3847c6c911c861f13b' }, this.text.substring(0, 2)), this.image && (h("img", { key: '2e37f8abd25c574371fe1a0f7d08af028fc1b342', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,6 @@ import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png"
  * Alignment of the image inside the container can be customized via CSS properties.
  *
  * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.
- * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
- * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
- * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
- * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
  */
 export class ZBookCover {
     constructor() {
@@ -21,7 +17,7 @@ export class ZBookCover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2d26511d2f6c57adf2b20c0a98b86b5c18ca3b55' }, this.multiple && (h(Fragment, { key: '79279147bd5526ec381ee54681e70f2601f7d606' }, h("div", { key: 'a58d293a70ae353b24deda1917ba06b46cd6cb69', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '34496473686299a655126cd1222d1ae88eadada8', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'd3ffeff92bfcb9a4cfc8a1d250e03bcbb8de8aa1', class: "cover-container" }, h("img", { key: '9e05370d50d32cdcf7c0ffed6f0c9db11219b393', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: 'dc7b2f10a9762234f43cd0857bbd6471f1d061e8', name: "coverOverlay" }))));
+        return (h(Host, { key: '407e954f3f8cb933aff3b404b7f3e1643798cf67' }, this.multiple && (h(Fragment, { key: 'c0c1e4caa27986a9c6e28733f4f8fe62e4dbea77' }, h("div", { key: 'dcaeeb60be98ce88fad97775307a5a339c0b47f9', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'b56848110f5c895b9d3301daba51d6d01659a63c', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '019936f586e758c4f5c0f6694d5c2291c222869b', class: "cover-container" }, h("img", { key: 'f0e6af812e6b1575396c16470090969cf19571aa', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '6556420f0cba2f2cac412b1386124c0b8e72db52', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,12 @@
 }
 
 :host {
+  /**
+   * @prop --z-book-cover-height: height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+   * @prop --z-book-cover-border-radius: border radius of the book cover (default: `var(--border-radius)`)
+   * @prop --z-book-cover-stack-shift-x: the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+   * @prop --z-book-cover-stack-shift-y: the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+   */
   --z-book-cover-height: 378px;
   --z-book-cover-border-radius: var(--border-radius);
   --z-book-cover-stack-shift-x: 8px;

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

@@ -130,7 +130,7 @@ export class ZBreadcrumb {
                 "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
             }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
                 ? `<z-icon name="home" />`
-                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -175,7 +175,7 @@ export class ZBreadcrumb {
                 setTimeout(() => {
                     this.anchorElements[0].focus();
                 }, 100);
-            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     renderMobileItems() {
         // show only the second to last element
@@ -201,14 +201,14 @@ export class ZBreadcrumb {
                     if (item.hasTooltip) {
                         this.popoverEllipsisOpen = false;
                     }
-                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))))),
         ];
     }
     render() {
-        return (h(Host, { key: 'b0e69674c7e600f237dd64db7aee54aa1a29529e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ab4672d78b961bf88e3cbe29a7a880c872b7370c', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '84c8968de32dd42b1c186c3e21ef455ed3419b1b', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'a33b0ec178cf876482c3c598be9b08f3af192e74', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'bf1d0a0686b68240bcfd866012d3f4236b450bf1' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'b73a28050ec43c5441b675b497236ae0210b6657' }, 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/index.js

@@ -8,7 +8,7 @@ export class ZButton {
         /** defines a string value that labels the internal interactive element. Used for accessibility. */
         this.ariaLabel = undefined;
         /**
-         * **Deprecated:** Use `htmlrole` instead.
+         * Use `htmlrole` instead.
          * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
          */
         this.role = "";
@@ -41,10 +41,13 @@ export class ZButton {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
+        var _a, _b;
+        const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
+        const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
         if (this.href) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }
@@ -95,7 +98,7 @@ export class ZButton {
                             "name": "deprecated",
                             "text": "This prop has been deprecated in favor of `htmlrole` for better accessibility."
                         }],
-                    "text": "**Deprecated:** Use `htmlrole` instead."
+                    "text": "Use `htmlrole` instead."
                 },
                 "getter": false,
                 "setter": false,

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: '30d0203657443c589241b25ae37155cfbd203f89', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '3934b6a866c2c791aa80e0de90197f5ae372aa88', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '1bb900d3b3d364b912e67ae44e3f60cf245c0672', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '066c842f00e3d26301e63fa91849dd4f414f05e8', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '00b771b5c276eff3ca761acb28ba9df42b8d0a6c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '8bb124d8ffcce4ac1d7c01bc31f9256da769a90b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '6ab1b449e4d9c539683353cdcf8a4c8b3bdfa578', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'd67c255b32c814e0b6afec14c79ba422b8b2a57d', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '77ea4b67643b28db4737dc301bc416595581b93f', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '098881514d797b081e36f7ad66c9f60ea2423b27', 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-card/index.js

@@ -4,13 +4,6 @@ import { CardVariant } from "../../beans";
  * ZCard component.
  * The width of the card must be set by its container, following the grid indications of the design.
  *
- * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
- * @cssprop --z-card--border-color - Default: `var(--gray200)`
- * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-border-radius - Default: `none`
- * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
- * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
  * @slot cover - Image cover
  * @slot metadata - Metadata
  * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.
@@ -88,7 +81,7 @@ export class ZCard {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."

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

@@ -1,4 +1,13 @@
 :host {
+  /**
+   * @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`
+   * @prop --z-card--border-color: Default: `var(--gray200)`
+   * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`
+   * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`
+   * @prop --z-card--text-border-radius: Default: `none`
+   * @prop --z-card--text-border: Configure CSS `border`. Default: `none`
+   * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`
+   */
   --aspect-ratio: 1.62;
   --z-card--border-color: var(--gray200);
   --z-card--color-cover-background: var(--color-surface01);

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

@@ -2,8 +2,6 @@ import { Host, h } from "@stencil/core";
 import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @cssprop --z-carousel-items-shadow - The shadow around the items.
  * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
 export class ZCarousel {

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

@@ -1,9 +1,13 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-
+  /**
+   * @prop --z-carousel-gutter: The gutter between items.
+   * @prop --z-carousel-items-shadow: The shadow around the items.
+   */
   --z-carousel-gutter: 0;
   --z-carousel-items-shadow: ;
+
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 
 :host([single]) {

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

@@ -10,11 +10,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0f8834160a0c8e3ffd107233e2c5de6db6ab6df2', class: {
+        return (h("div", { key: '7ff5bc2ca7ac9e73c3bb6e31a4795d8f275b0217', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '51451c287eb3c450f4cc8a59f40e0d2e71fe95e2', name: this.icon }), h("slot", { key: 'd1c6dce40bf102ab19ca5bfc06fdbc342c97e68e' }), this.interactiveIcon && (h("button", { key: '3274d75df1f052aab16bfb8b663292160757acc8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '23605e0639429a9ac5d66eb3394a1a3c9740d601', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'b96b42e01a624a43a0419e163b79512374540255', name: this.icon }), h("slot", { key: 'e613a251dccdedf4f2633361b5a22d6baf69173f' }), this.interactiveIcon && (h("button", { key: '4c8557d1a21c33a1e329f8f01dcd7aa1a2881096', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a66b4a32af2c1a3283cdb80843b526ff375d34f7', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -192,7 +192,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: '8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, InputType, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { getPlainText, randomId } from "../../utils/utils";
+import { encodeString, getPlainText, randomId } from "../../utils/utils";
 export class ZCombobox {
     watchItems() {
         this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -59,8 +59,8 @@ export class ZCombobox {
                 return ListSize.LARGE;
         }
     }
-    getOptionId(itemId) {
-        return `${this.inputid}-option-${itemId}`;
+    getOptionId(item) {
+        return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;
     }
     getCheckAllOptionId() {
         return `${this.inputid}-check-all`;
@@ -130,7 +130,7 @@ export class ZCombobox {
         }
         else {
             this.itemsList = this.itemsList.map((i) => {
-                if (optionId === this.getOptionId(i.id)) {
+                if (optionId === this.getOptionId(i)) {
                     i.checked = !i.checked;
                 }
                 return i;
@@ -204,16 +204,22 @@ export class ZCombobox {
     toggleComboBox() {
         this.isopen = !this.isopen;
     }
+    getHeaderAriaLabel() {
+        if (!this.label || this.selectedCounter <= 0) {
+            return undefined;
+        }
+        const suffix = this.selectedCounter === 1 ? "elemento selezionato" : "elementi selezionati";
+        return `${this.label}: ${this.selectedCounter} ${suffix}`;
+    }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
-        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
-                "aria-label": ariaLabel,
+                "aria-label": this.htmlAriaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -221,7 +227,6 @@ export class ZCombobox {
         }
         return {
             "role": role,
-            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
@@ -229,18 +234,16 @@ export class ZCombobox {
     }
     renderHeader() {
         const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
-        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), h("span", { class: "body-3", "aria-label": this.label
-                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
-                : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false", "aria-label": this.getHeaderAriaLabel() }, comboboxA11yAttributes), h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(" ")}` }, this.renderItems())));
+        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(" ")}` }, this.renderItems())));
     }
     renderItems() {
         return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index, length) {
-        const optionId = this.getOptionId(item.id);
+        const optionId = this.getOptionId(item);
         const isDisabled = !item.checked && this.hasReachedMaxSelections();
         return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => {
                 this.focusedItemId = "";
@@ -294,18 +297,18 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "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: '6ada0f3dc9aebeb5c97843c18935199f6c981e28', "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"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get properties() {

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

@@ -1,15 +1,3 @@
-.z-label {
-  display: block;
-  padding-bottom: var(--space-unit);
-  color: var(--color-default-text);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  text-align: left;
-  text-transform: uppercase;
-}
-
-
 :host {
   display: block;
   min-width: 290px;

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

@@ -7,9 +7,6 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @slot cover - slot for the cover image.
  * @slot content - slot for the content.
  * @slot info-reveal - slot for the info reveal.
- * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
- * @cssprop --cover-hero-text-color - color of the text.
- * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
  */
 export class ZCoverHero {
     constructor() {
@@ -47,9 +44,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'bb147f3b614268218fba165360012031572ec76b' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '94c697c41b4d98ea9f5be00634a3de1fd214ea72', class: "main-container" }, h("div", { key: 'e1a181735381dbc2472085c7e1d7082e1564185a', class: "cover-container" }, h("slot", { key: '1692cfa7f6a9ee926a262e04e8912a72f5a95cca', name: "cover" })), h("slot", { key: 'c13a059c162d85e46d3f116a8b1fd9e3a6e363f7', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/collection/components/z-cover-hero/styles.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --cover-hero-overlay: overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
+   * @prop --cover-hero-text-color: color of the text.
+   * @prop --cover-hero-aspect-ratio: aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
+   */
   --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);
   --cover-hero-text-color: var(--color-text-inverse);
   --cover-hero-aspect-ratio: ;

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

@@ -10,7 +10,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', 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: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
+        return h(Host, { key: '36459896003d9c65cc0e969a184987ddcac8c962' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
+// https://regex101.com/r/ZnoZQ5/3
+const ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
@@ -15,11 +17,38 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    get hasColorIndicator() {
+        return COLOR_INDICATOR_ICONS.includes(this.name);
+    }
+    get needsTransparentIndicator() {
+        var _a;
+        return ["transparent", "#ffffff00"].includes((_a = this.indicatorColor) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }
+    /**
+     * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.
+     * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.
+     * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.
+     */
+    getTransparentIndicatorIconIfNeeded() {
+        var _a;
+        const transparentIconName = (_a = this.name) === null || _a === void 0 ? void 0 : _a.replace(ICON_NAME_SUFFIX_REGEX, "$1-transparent$3");
+        if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {
+            return this.name;
+        }
+        return transparentIconName;
+    }
+    /**
+     * Render the icon with the color indicator.
+     * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
+     */
+    renderColorIndicator() {
+        return (h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS["picker-color"])));
+    }
     renderBaseIcon() {
-        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
+        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     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: 'fd98793fba98d03112f68de408227ecc8576ff1d', id: this.boxid }, h("slot", { key: '2bee1952cbc660bb9ff8bdbd0945e01f9204e019', name: "content" }), this.isclosable && (h("z-icon", { key: 'ec6380fd48bb52fb1aabca5d22af5641be539cf4', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'c3062d082fff5558ebcc44b6c15feaa9d4fdf9f9', id: this.boxid }, h("slot", { key: 'd4d4b0bdb644a777c22489afa52c990748bf1da7', name: "content" }), this.isclosable && (h("z-icon", { key: '4b02226c9a11e800ad1ac956471683f4546d39c3', 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

@@ -4,10 +4,6 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * Info reveal component.
  *
  * @slot - content of the info panel.
- * @cssprop --z-info-reveal-panel-width - Width of the info panel.
- * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
- * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
- * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
  */
 export class ZInfoReveal {
     constructor() {
@@ -58,7 +54,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '50e7cc3742371ca616f404374f63ccb337c3dc39', open: this.open }, h("button", { key: '906bdf2f949f4ae715ecc746e6e1feab8bf4d797', 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: 'a4e890d446384c742df05db58a906b89e536f4e4', name: this.icon }), this.label && h("span", { key: 'b9955cb8ed95ecef6904d1cd4c8c9d08205b33c3', class: "z-info-reveal-label" }, this.label)), h("div", { key: '8c1d601f8e15f7f6dcd9cf235ff00ad251aaec54', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'c0f217e35810e1463d1f0761337353ea3940cc2b' }), h("button", { key: '6e507a1e6424c88dc90bf3fb9a841565d5bc6c6c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'd743f3aae62e253580122d556b933936b316c391', name: "multiply" })))));
+        return (h(Host, { key: 'f9bc69d9bdbc9b2e30687f54877b241b51df3e45', open: this.open }, h("button", { key: 'f0dc5ceaf6f24d5597699b3158074403bac8f641', 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: '5cddcacfd8d9e5f3dc8a1c171aa50621d6e2b044', name: this.icon }), this.label && h("span", { key: '5417e101306098a399a9f8e6a39d1637be4f8901', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bd57a9686560c17c5d670a6fa87396a509ffb50a', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'bd5fd2a1cf9c2a95fbb9ea966a0f09ec1940c9f9' }), h("button", { key: '73a9178e3ea240abad5d91f2fd82879313d2df24', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'de404809d5ea1fd51b36abc74518448c7502927e', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/styles.css

@@ -1,5 +1,11 @@
 :host {
-  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */
+  /**
+   * @prop --z-info-reveal-panel-width: Width of the info panel.
+   * @prop --trigger-icon-size: Size of the trigger icon for big size.
+   * @prop --trigger-icon-size-small: Size of the trigger icon for small size.
+   * @prop --trigger-icon-size-x-small: Size of the trigger icon for x-small size.
+   */
+  --z-info-reveal-panel-width: 384px; /* defaults to half the maximum size of the mobile breakpoint */
   --trigger-size: 44px;
 
   position: relative;