@zanichelli/delta_share 3.2.5 → 4.0.0

package/dist/wc/cjs/z-carousel.cjs.entry.js

@@ -2,23 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
 
-const stylesCss = "z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single=\"true\"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single=\"true\"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}z-carousel .z-carousel-container{display:flex;flex-direction:column}z-carousel .z-carousel-wrapper{position:relative}z-carousel .z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}z-carousel .z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}z-carousel .z-carousel-items-container::-webkit-scrollbar{display:none}z-carousel .z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single=\"true\"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}z-carousel .z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction=\"next\"]{right:0}z-carousel .z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}z-carousel .z-carousel-footer .numbers-progress,z-carousel .z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}z-carousel .z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}z-carousel .z-carousel-footer .dots-progress button:not(.current){cursor:pointer}z-carousel .z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2);column-gap:calc(var(--space-unit) / 2)}z-carousel .z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}z-carousel .z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
 
 const ZCarousel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.indexChange = index.createEvent(this, "indexChange", 7);
-    /** Shows only one content at a time */
+    /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+    this.scrollingTo = null;
+    this.isLoading = undefined;
+    this.label = undefined;
     this.single = false;
-    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
+    this.arrowsPosition = undefined;
+    this.progressMode = undefined;
+    this.fixedArrows = true;
     this.ghostLoadingHeight = 100;
-    /** Current item index for single mode. */
+    this.infinite = false;
     this.current = 0;
-    /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-    this.scrollingTo = null;
+    this.items = undefined;
+    this.highlightedIndicator = undefined;
+    this.canNavigatePrev = undefined;
+    this.canNavigateNext = undefined;
   }
   onIndexChange() {
     this.indexChange.emit({ currentItem: this.current });
@@ -28,14 +35,17 @@ const ZCarousel = class {
       this.setIntersectionObserver();
     }
   }
+  onInfiniteModeChange() {
+    this.checkNavigationValidity();
+  }
   /**
    * Set an intersection observer to:
    * - highlight the indicator of the intersecting item during scroll
    * - set the current item to the last intersecting item
    */
   setIntersectionObserver() {
-    this.intersectionObserver = new window.IntersectionObserver((entries) => {
-      const entry = entries.find((entry) => entry.isIntersecting);
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      const entry = entries.find(({ isIntersecting }) => isIntersecting);
       if (!entry) {
         return;
       }
@@ -54,95 +64,116 @@ const ZCarousel = class {
     });
     this.items.forEach((element) => this.intersectionObserver.observe(element));
   }
+  /** Update items' list and check conditions to allow navigation */
+  onSlotChange() {
+    this.items = Array.from(this.host.children);
+    this.checkNavigationValidity();
+    this.setIntersectionObserver();
+    this.goTo(this.current);
+  }
   onPrev() {
     if (this.single) {
-      this.goTo(Math.max(0, this.current - 1));
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
+      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));
       return;
     }
-    scroller.scrollBy({
-      left: -scroller.clientWidth / 2,
+    this.itemsContainer.scrollBy({
+      left: this.infinite && this.itemsContainer.scrollLeft == 0
+        ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+        : -this.itemsContainer.clientWidth / 2,
       behavior: "smooth",
     });
   }
   onNext() {
     if (this.single) {
-      this.goTo(Math.min(this.current + 1, this.items.length - 1));
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
+      const next = this.infinite && this.current + 1 > this.items.length - 1
+        ? 0
+        : Math.min(this.current + 1, this.items.length - 1);
+      return this.goTo(next);
     }
-    scroller.scrollBy({
-      left: scroller.clientWidth / 2,
+    this.itemsContainer.scrollBy({
+      left: this.infinite &&
+        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
+        ? -this.itemsContainer.scrollWidth
+        : this.itemsContainer.clientWidth / 2,
       behavior: "smooth",
     });
   }
   /**
-   * Check if navigation buttons can be enabled or not and set local states.
+   * Check if navigation buttons can be enabled and set the related local states.
    */
   checkNavigationValidity() {
     if (this.single) {
-      this.canNavigatePrev = this.current > 1;
+      this.canNavigatePrev = this.current > 0;
       this.canNavigateNext = this.current < this.items.length - 1;
+      return;
     }
     this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
     this.canNavigateNext =
       this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
   }
   /**
-   * Check if footer can be rendered.
+   * Check if footer has to be rendered.
    */
   canShowFooter() {
+    if (!this.canNavigatePrev && !this.canNavigateNext) {
+      return false;
+    }
     return (this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM ||
       this.progressMode === index$1.CarouselProgressMode.DOTS ||
       this.progressMode === index$1.CarouselProgressMode.NUMBERS);
   }
   /**
    * Set current item to passed index.
-   * @param {number} index Index to set
+   * @param index Index to set
    */
   goTo(index) {
     if (this.current === index) {
       return;
     }
     this.scrollingTo = index;
+    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);
     // the scroll will trigger the IntersectionObserver and set the current item
     this.itemsContainer.scroll({
-      left: this.items[index].offsetLeft,
+      left,
       behavior: "smooth",
     });
   }
+  /** Check if navigation of at least one direction is enabled */
+  get canNavigate() {
+    return this.canNavigatePrev || this.canNavigateNext;
+  }
+  setupItems() {
+    this.items = Array.from(this.host.children);
+    this.items.forEach((item) => {
+      item.setAttribute("aria-roledescription", "slide");
+    });
+  }
   componentDidLoad() {
-    this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-    if (!this.itemsContainer) {
-      return;
-    }
-    this.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
+    var _a;
+    (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+    this.resizeObserver.observe(this.itemsContainer);
+    this.setupItems();
     if (this.single) {
       this.setIntersectionObserver();
     }
-    this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
     this.checkNavigationValidity();
-    this.items.forEach((item) => {
-      item.setAttribute("role", "group");
-      item.setAttribute("aria-roledescription", "slide");
-    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     if (this.isLoading) {
-      return (index.h(index.Host, null, this.label && index.h("div", { class: "heading-4 z-carousel-title" }, this.label), index.h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, index.h("z-ghost-loading", null), index.h("div", { class: "loading-items-container" }, index.h("slot", null)))));
+      return (index.h("div", { class: "z-carousel-container" }, this.label && index.h("div", { class: "heading-3-sb z-carousel-title" }, this.label), index.h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, index.h("z-ghost-loading", null))));
     }
-    return (index.h(index.Host, null, index.h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && index.h("div", { class: "heading-4 z-carousel-title" }, this.label), index.h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), index.h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, index.h("slot", null)), this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === index$1.CarouselProgressMode.DOTS && this.single && this.items && (index.h("div", { class: "dots-progress" }, this.items.map((_item, key) => (index.h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, index.h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS && this.single && this.items && (index.h("div", { class: "numbers-progress interactive-3" }, index.h("span", { class: "current" }, this.current + 1), index.h("span", null, "di"), index.h("span", null, this.items.length))), this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "z-carousel-container", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && index.h("div", { class: "z-carousel-title heading-3-sb" }, this.label), index.h("div", { class: "z-carousel-wrapper" }, index.h("z-button", { class: "z-carousel-navigation-arrow", variant: index$1.ButtonVariant.SECONDARY, "data-direction": "prev", icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, hidden: this.arrowsPosition !== index$1.CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" }), index.h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite", ref: (el) => (this.itemsContainer = el) }, index.h("slot", { onSlotchange: this.onSlotChange.bind(this) })), index.h("z-button", { class: "z-carousel-navigation-arrow", variant: index$1.ButtonVariant.SECONDARY, "data-direction": "next", icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, hidden: this.arrowsPosition !== index$1.CarouselArrowsPosition.OVER || !this.canNavigate, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { class: "z-carousel-navigation-arrow", variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-left", onClick: this.onPrev.bind(this), disabled: !this.infinite && !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === index$1.CarouselProgressMode.DOTS && this.single && this.items && (index.h("div", { class: "dots-progress" }, this.items.map((_, index$1) => (index.h("button", { type: "button", class: { current: this.highlightedIndicator === index$1 }, "aria-label": this.highlightedIndicator === index$1 ? "Elemento corrente" : `Spostati all'elemento ${index$1 + 1}`, onClick: () => this.goTo(index$1) }))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS && this.single && this.items && (index.h("div", { class: "numbers-progress interactive-1" }, index.h("span", { class: "current" }, this.current + 1), index.h("span", null, "di"), index.h("span", null, this.items.length))), this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { class: "z-carousel-navigation-arrow", variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-right", onClick: this.onNext.bind(this), disabled: !this.infinite && !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
   }
-  get hostElement() { return index.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "current": ["onIndexChange"],
-    "single": ["onSingleModeChange"]
+    "single": ["onSingleModeChange"],
+    "infinite": ["onInfiniteModeChange"]
   }; }
 };
 ZCarousel.style = stylesCss;

package/dist/wc/cjs/z-chip.cjs.entry.js

@@ -2,28 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
 
-const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-text01);fill:var(--color-text01);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
+const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-text);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-default-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
 
 const ZChip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.interactiveIconClick = index.createEvent(this, "interactiveIconClick", 7);
-    /** z-chip size type, can be default, medium or small */
+    this.icon = undefined;
     this.type = index$1.ZChipType.DEFAULT;
-    /** set z-chip as disabled */
+    this.interactiveIcon = undefined;
     this.disabled = false;
-    /** z-chip aria-label string */
     this.ariaLabel = "";
   }
   render() {
-    return (index.h("div", { class: {
+    return (index.h("div", { key: 'fe1e1ba8b794a0e67a04236808573c3ae9bcc4ce', class: {
         "z-chip-container": true,
         "z-chip-interactive": !!this.interactiveIcon,
         [this.type]: true,
-      }, "aria-disabled": this.disabled }, this.icon && index.h("z-icon", { name: this.icon }), index.h("slot", null), this.interactiveIcon && (index.h("button", { type: "button", onClick: () => this.interactiveIconClick.emit(), onKeyUp: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, index.h("z-icon", { class: "interactive-icon", name: this.interactiveIcon })))));
+      }, "aria-disabled": this.disabled }, this.icon && index.h("z-icon", { key: 'a1ee44f219dd0b451851aadd081d29d8a03fbeaf', name: this.icon }), index.h("slot", { key: '126b3211e329d893d6b5b3f567cc20630dd02534' }), this.interactiveIcon && (index.h("button", { key: '059813ec42ff86dff2ce9fb96650ad35b38e5622', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, index.h("z-icon", { key: '3fb748bef5acea52a4d4cd565b1da11ae777e784', class: "interactive-icon", name: this.interactiveIcon })))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/wc/cjs/z-combobox.cjs.entry.js

@@ -2,75 +2,133 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
-const utils = require('./utils-43a3deb6.js');
-require('./breakpoints-e7c8838e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
+const utils = require('./utils-ff107ab4.js');
+require('./breakpoints-7770f79c.js');
 
-const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
+const stylesCss = ":host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-default-text)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search>div>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
 
 const ZCombobox = class {
+  watchItems() {
+    this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+    this.updateRenderItemsList();
+  }
+  watchSearchValue() {
+    this.filterItems(this.searchValue);
+  }
+  watchCheckboxes() {
+    this.checkboxes.forEach((item, index) => item.setAttribute("tabindex", index === 0 ? "0" : "-1"));
+  }
+  emitComboboxChange() {
+    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
+  }
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.comboboxChange = index.createEvent(this, "comboboxChange", 7);
-    /** the combobox is disabled */
+    this.itemsList = [];
+    this.inputType = index$1.InputType.TEXT;
+    this.inputid = `combo-${utils.randomId()}`;
+    this.items = undefined;
+    this.label = undefined;
     this.disabled = false;
-    /** show search input flag (optional) */
     this.hassearch = false;
-    /** no result text message */
+    this.searchlabel = undefined;
+    this.searchplaceholder = undefined;
+    this.searchtitle = undefined;
     this.noresultslabel = "Nessun risultato";
-    /** toggle combo list opening flag */
     this.isopen = false;
-    /** fixed style flag */
     this.isfixed = false;
-    /** close combobox list text */
     this.closesearchtext = "Chiudi";
-    /** show "check all" checkbox (optional) */
     this.hascheckall = false;
-    /** check all label (optional) */
     this.checkalltext = "Seleziona tutti";
-    /** uncheck all label (optional) */
     this.uncheckalltext = "Deseleziona tutti";
-    /** max number of checkable items (0 = unlimited) */
     this.maxcheckableitems = 0;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.hasgroupitems = undefined;
     this.size = index$1.ControlSize.BIG;
-    this.renderItemsList = []; // used for render only
-    this.itemsList = [];
-    this.inputType = index$1.InputType.TEXT;
+    this.searchValue = undefined;
+    this.selectedCounter = undefined;
+    this.renderItemsList = [];
+    this.focusedItemId = undefined;
+    this.checkboxes = [];
     this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }
-  watchItems() {
-    this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+  componentWillLoad() {
+    this.watchItems();
+  }
+  componentWillRender() {
     this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-    this.updateRenderItemsList();
   }
-  watchSearchValue() {
-    this.filterItems(this.searchValue);
+  componentDidRender() {
+    const checkboxes = this.getAllCheckboxes();
+    if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {
+      this.checkboxes = checkboxes;
+    }
+  }
+  getItemId(item) {
+    return `combo-checkbox-${this.inputid}-${item.id}`;
+  }
+  getCheckboxClass() {
+    return `combo-item-checkbox-input-${this.inputid}`;
+  }
+  getAllCheckboxes() {
+    return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`));
   }
-  inputCheckListener(e) {
-    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
-    if (id === "check-all" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {
-      return this.checkAll(e.detail.checked);
+  getControlToListSize() {
+    switch (this.size) {
+      case index$1.ControlSize.X_SMALL:
+        return index$1.ListSize.SMALL;
+      case index$1.ControlSize.SMALL:
+        return index$1.ListSize.MEDIUM;
+      default:
+        return index$1.ListSize.LARGE;
     }
-    this.itemsList = this.itemsList.map((item) => {
-      if (item.id === id) {
-        item.checked = e.detail.checked;
-      }
-      return item;
-    });
-    this.updateRenderItemsList();
-    this.emitComboboxChange();
   }
-  emitComboboxChange() {
-    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
+  handleSelectArrowsNavigation(e, currId) {
+    if (![index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP].includes(e.key) || !this.isopen) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const currElem = this.element.shadowRoot.querySelector(`#${currId}`);
+    if (!currElem) {
+      return;
+    }
+    const checkboxes = this.checkboxes;
+    if (!checkboxes.length) {
+      return;
+    }
+    const currElemIndex = checkboxes.indexOf(currElem);
+    const firstElemIndex = 0;
+    const lastElemIndex = checkboxes.length - 1;
+    let nextElem = null;
+    if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
+      nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];
+    }
+    else if (e.key === index$1.KeyboardCode.ARROW_UP) {
+      nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];
+    }
+    this.focusComboboxItem(nextElem);
   }
-  componentWillLoad() {
-    this.watchItems();
+  handleHeaderKeyboardEvent(ev) {
+    if (ev.key === index$1.KeyboardCode.SPACE) {
+      ev.preventDefault();
+    }
+    if ((ev.key === index$1.KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === index$1.KeyboardCode.ARROW_UP && this.isopen)) {
+      this.toggleComboBox();
+    }
   }
-  componentWillRender() {
-    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+  handleCheckboxFocus(id) {
+    this.focusedItemId = id;
+  }
+  focusComboboxItem(elem) {
+    this.checkboxes.forEach(function (item) {
+      item.setAttribute("tabindex", "-1");
+    });
+    elem.setAttribute("tabindex", "0");
+    elem.focus();
   }
   updateRenderItemsList() {
     if (this.searchValue) {
@@ -96,7 +154,9 @@ const ZCombobox = class {
       const start = item.name.toUpperCase().indexOf(value.toUpperCase());
       const end = start + value.length;
       const newName = item.name.substring(0, start) +
-        item.name.substring(start, end).bold() +
+        "<strong>" +
+        item.name.substring(start, end) +
+        "</strong>" +
         item.name.substring(end, item.name.length);
       item.name = newName;
       return start >= 0;
@@ -114,27 +174,40 @@ const ZCombobox = class {
   toggleComboBox() {
     this.isopen = !this.isopen;
   }
+  getComboboxA11yAttributes() {
+    return {
+      "role": "combobox",
+      "aria-label": this.label,
+      "aria-expanded": this.isopen ? "true" : "false",
+      "aria-activedescendant": this.isopen ? this.focusedItemId : "",
+      "aria-controls": `${this.inputid}_list`,
+    };
+  }
   renderHeader() {
     return (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === index$1.KeyboardKeyCode.SPACE) {
-          ev.preventDefault();
-        }
-      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
+        this.handleHeaderKeyboardEvent(ev);
+      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-expanded": this.isopen ? "true" : "false" }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
   }
   renderContent() {
     if (!this.isopen) {
       return;
     }
-    return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+    return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? index.h("span", Object.assign({}, this.getComboboxA11yAttributes())) : null, index.h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": true, id: `${this.inputid}_list`, "aria-owns": `${this.checkboxes.map((item) => item.id).join(" ")}` }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
   }
   renderItems() {
-    if (!this.isopen) {
-      return;
-    }
-    return (index.h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+    return (index.h("div", { class: this.searchValue && "search" }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
   }
   renderItem(item, index$2, length) {
-    return (index.h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index$2 !== length - 1, class: this.size }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
+    return (index.h("z-list-element", { id: item.id, htmlTabindex: null, dividerType: index$2 !== length - 1 ? index$1.ListDividerType.ELEMENT : index$1.ListDividerType.NONE, size: this.getControlToListSize() }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size, role: "option", "aria-selected": item.checked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, this.getItemId(item)), onInputCheck: (e) => {
+        this.itemsList = this.itemsList.map((i) => {
+          if (item.id === i.id) {
+            i.checked = e.detail.checked;
+          }
+          return i;
+        });
+        this.updateRenderItemsList();
+        this.emitComboboxChange();
+      }, onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
   }
   renderList(items) {
     if (!items) {
@@ -144,9 +217,9 @@ const ZCombobox = class {
       return this.renderNoSearchResults();
     }
     if (this.hasgroupitems) {
-      return this.renderGroups(this.itemsList);
+      return this.renderGroups(items);
     }
-    return (index.h("ul", null, items.map((item, i) => {
+    return (index.h("ul", { role: "none" }, items.map((item, i) => {
       return this.renderItem(item, i, items.length);
     })));
   }
@@ -162,38 +235,39 @@ const ZCombobox = class {
     const listGroups = Object.entries(newData).map(([key, value]) => {
       return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
     });
-    return index.h("ul", null, listGroups);
+    return index.h("ul", { role: "none" }, listGroups);
   }
   renderNoSearchResults() {
-    return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+    return (index.h("ul", { role: "none" }, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
   }
   renderCloseButton() {
     return (index.h("div", null, index.h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
   }
   renderSearchInput() {
-    if (!this.isopen) {
-      return;
-    }
-    return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
-        if (e.detail.keycode === 27) {
-          return this.closeFilterItems();
+    return (index.h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "aria-autocomplete": "list" }, this.getComboboxA11yAttributes(), { onKeyUp: (e) => {
+        if (e.key === index$1.KeyboardCode.ESC) {
+          this.closeFilterItems();
         }
+      }, onInputChange: (e) => {
         this.searchValue = e.detail.value;
-      } }));
+      } })));
   }
   renderCheckAll() {
     if (this.searchValue) {
       return;
     }
+    const checkAllId = `combo-checkbox-${this.inputid}-check-all`;
     const allChecked = this.selectedCounter === this.itemsList.length;
-    return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
+    return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
   }
   render() {
-    return (index.h("div", { "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 (index.h("div", { key: '303335d1978e653877985ff2435f836bca278400', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "items": ["watchItems"],
-    "searchValue": ["watchSearchValue"]
+    "searchValue": ["watchSearchValue"],
+    "checkboxes": ["watchCheckboxes"]
   }; }
 };
 ZCombobox.style = stylesCss;