@zanichelli/albe-web-components 6.6.10-test → 6.7.0

package/dist/{web-components-library/z-typography.entry.js → cjs/z-body_2.cjs.entry.js}

@@ -1,10 +1,25 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-291c96fb.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+
+const ZBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Font weight variant */
+    this.variant = "regular";
+  }
+  render() {
+    return (index.h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
+  }
+};
 
 const stylesCss = ":host>*{margin:0;font-family:var(--dashboard-font)}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}:host(:focus-visible){outline:none}";
 
 const ZTypography = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /** Font weight variant */
     this.variant = "regular";
   }
@@ -12,15 +27,16 @@ const ZTypography = class {
     const el = document.createElement(this.component || "span");
     el.innerHTML = `<slot />`;
     this.hostElement.shadowRoot.appendChild(el);
-    return (h(Host, { class: {
+    return (index.h(index.Host, { class: {
         [this.level]: Boolean(this.level),
         regular: this.variant === "regular",
         semibold: this.variant === "semibold",
         light: this.variant === "light",
       } }));
   }
-  get hostElement() { return getElement(this); }
+  get hostElement() { return index.getElement(this); }
 };
 ZTypography.style = stylesCss;
 
-export { ZTypography as z_typography };
+exports.z_body = ZBody;
+exports.z_typography = ZTypography;

package/dist/{web-components-library/z-button-sort.entry.js → cjs/z-button-sort.cjs.entry.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, f as createEvent, h } from './index-291c96fb.js';
-import { t as tabletBreakpoint } from './breakpoints-c386984e.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host,button{max-width:100%}button{height:36px;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--myz-blue);background-color:var(--bg-white);border-radius:var(--border-radius);color:var(--myz-blue);cursor:pointer;fill:var(--myz-blue);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);box-shadow:0 0 2px 2px var(--accent-dark);color:var(--myz-blue);fill:var(--myz-blue)}button:active{border-color:var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{display:flex;align-items:center;cursor:pointer;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb)}button>label>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>label>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>label>span.sort{margin-right:var(--half-x1);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) * 0.5);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-rg)}button>z-icon{padding-top:calc(var(--space-unit) * 0.5)}@media only screen and (min-width: 768px){:host,button{max-width:325px}}@media only screen and (min-width: 1025px){:host,button{max-width:490px}}";
 
 const ZButtonSort = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
+    index.registerInstance(this, hostRef);
+    this.buttonSortClick = index.createEvent(this, "buttonSortClick", 7);
     /** sort label content (ascending) (optional) */
     this.sortlabelasc = "A-Z";
     /** sort label content (descending) (optional) */
@@ -30,7 +34,7 @@ const ZButtonSort = class {
     });
   }
   componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
+    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint) {
       this.allowTooltip = true;
     }
   }
@@ -41,9 +45,9 @@ const ZButtonSort = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
+    return (index.h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, index.h("label", null, index.h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
   }
 };
 ZButtonSort.style = stylesCss;
 
-export { ZButtonSort as z_button_sort };
+exports.z_button_sort = ZButtonSort;

package/{www/build/z-button.entry.js → dist/cjs/z-button.cjs.entry.js}

@@ -1,21 +1,25 @@
-import { r as registerInstance, h, g as getElement } from './index-291c96fb.js';
-import { b as ButtonType, B as ButtonVariant, c as ButtonSize } from './index-968a240f.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
 
 const ZButton = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /** defines a string value that labels an interactive element, used for accessibility. */
     this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
-    this.type = ButtonType.BUTTON;
+    this.type = index$1.ButtonType.BUTTON;
     /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
+    this.variant = index$1.ButtonVariant.PRIMARY;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ButtonSize.BIG;
+    this.size = index$1.ButtonSize.BIG;
   }
   getAttributes() {
     return {
@@ -28,12 +32,12 @@ const ZButton = class {
   }
   render() {
     if (this.href) {
-      return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
+      return (index.h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
     }
-    return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
+    return (index.h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
   }
-  get hostElement() { return getElement(this); }
+  get hostElement() { return index.getElement(this); }
 };
 ZButton.style = stylesCss;
 
-export { ZButton as z_button };
+exports.z_button = ZButton;

package/dist/{web-components-library/z-card.entry.js → cjs/z-card.cjs.entry.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-291c96fb.js';
-import { C as CardVariant } from './index-968a240f.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"text\"]),::slotted([slot=\"actions\"]){margin:0}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;font-weight:var(--font-sb);-webkit-line-clamp:2}::slotted([slot=\"text\"]){-webkit-line-clamp:3}.actions{display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 1.5)}:host([clickable]){cursor:pointer}:host([clickable]:focus:focus-visible){outline:none}:host(:not([variant])[clickable]:focus:focus-visible){padding:calc(var(--space-unit) * 0.5);box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([showshadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:calc(var(--space-unit) * 2) var(--space-unit)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([showshadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][showshadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][showshadow]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][showshadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 
 const ZCard = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cardClicked = createEvent(this, "cardClicked", 7);
+    index.registerInstance(this, hostRef);
+    this.cardClicked = index.createEvent(this, "cardClicked", 7);
     /** Enable click interactions on the card. Default: false */
     this.clickable = false;
     /** Enable shadow. Default: false. */
@@ -33,30 +37,30 @@ const ZCard = class {
    */
   renderColorCoverCard() {
     return [
-      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
+      index.h("div", { class: "cover-container" }, index.h("div", { class: "color-cover" }, index.h("div", { class: "cover-content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" })))),
+      index.h("div", { class: "content" }, index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))),
     ];
   }
   /**
    * Template for the content div.
    */
   renderContentDiv() {
-    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
+    return (index.h("div", { class: "content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))));
   }
   render() {
-    if (this.variant === CardVariant.TEXT) {
-      return h(Host, null, this.renderContentDiv());
+    if (this.variant === index$1.CardVariant.TEXT) {
+      return index.h(index.Host, null, this.renderContentDiv());
     }
-    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
-      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
-        h("slot", { name: "cover" }),
-        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+    if (this.variant === index$1.CardVariant.OVERLAY || this.hasCoverImage) {
+      return (index.h(index.Host, null, index.h("div", { class: "cover-container" }, this.hasCoverImage && [
+        index.h("slot", { name: "cover" }),
+        this.variant !== index$1.CardVariant.OVERLAY && this.coverIcon && index.h("z-icon", { name: this.coverIcon }),
+      ], !this.hasCoverImage && index.h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
-    return h(Host, null, this.renderColorCoverCard());
+    return index.h(index.Host, null, this.renderColorCoverCard());
   }
-  get host() { return getElement(this); }
+  get host() { return index.getElement(this); }
 };
 ZCard.style = stylesCss;
 
-export { ZCard as z_card };
+exports.z_card = ZCard;

package/dist/{web-components-library/z-carousel.entry.js → cjs/z-carousel.cjs.entry.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-291c96fb.js';
-import { Q as CarouselArrowsPosition, R as CarouselProgressMode, c as ButtonSize, B as ButtonVariant } from './index-968a240f.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.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 ZCarousel = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.indexChange = createEvent(this, "indexChange", 7);
+    index.registerInstance(this, hostRef);
+    this.indexChange = index.createEvent(this, "indexChange", 7);
     /** Shows only one content at a time */
     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. */
@@ -94,9 +98,9 @@ const ZCarousel = class {
    * Check if footer can be rendered.
    */
   canShowFooter() {
-    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-      this.progressMode === CarouselProgressMode.DOTS ||
-      this.progressMode === CarouselProgressMode.NUMBERS);
+    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.
@@ -127,11 +131,11 @@ const ZCarousel = class {
   }
   render() {
     if (this.isLoading) {
-      return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
+      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 (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "z-carousel-container" }, 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.ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), index.h("ul", { class: "z-carousel-items-container" }, index.h("slot", null)), this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ButtonSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), 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 }, 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.ButtonSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
   }
-  get hostElement() { return getElement(this); }
+  get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "current": ["onIndexChange"],
     "single": ["onSingleModeChange"]
@@ -139,4 +143,4 @@ const ZCarousel = class {
 };
 ZCarousel.style = stylesCss;
 
-export { ZCarousel as z_carousel };
+exports.z_carousel = ZCarousel;

package/{www/build/z-chip.entry.js → dist/cjs/z-chip.cjs.entry.js}

@@ -1,16 +1,20 @@
-import { r as registerInstance, f as createEvent, h, g as getElement } from './index-291c96fb.js';
-import { w as ZChipType, o as Device } from './index-968a240f.js';
-import { g as getDevice, h as handleKeyboardSubmit } from './utils-b96780be.js';
-import './breakpoints-c386984e.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
+const utils = require('./utils-600bad93.js');
+require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-chip-h>button.sc-z-chip{display:inline-flex;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb)}.sc-z-chip-h>button.sc-z-chip:not(:disabled)>z-icon.sc-z-chip:last-child:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled)>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>button.sc-z-chip>z-icon.icon-sx.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.sc-z-chip>z-icon.sc-z-chip:last-child{margin-left:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}.sc-z-chip-h>button.sc-z-chip:disabled,.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{color:var(--color-disabled03);fill:var(--color-disabled03)}.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{cursor:auto}.sc-z-chip-h>button.sc-z-chip:disabled{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>button.sc-z-chip:focus:focus-visible,.sc-z-chip-h>div.sc-z-chip:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled):active:hover>z-icon.sc-z-chip:last-child{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>div.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(--bg-grey-200);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;line-height:28px}.sc-z-chip-h>div.sc-z-chip>z-icon.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media only screen and (min-width: 1152px){.sc-z-chip-h>button.sc-z-chip{font-size:12px}.sc-z-chip-h>div.sc-z-chip{font-size:12px}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}}";
 
 const ZChip = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
+    index.registerInstance(this, hostRef);
+    this.interactiveIconClick = index.createEvent(this, "interactiveIconClick", 7);
     /** z-chip size type, can be default, medium or small */
-    this.type = ZChipType.DEFAULT;
+    this.type = index$1.ZChipType.DEFAULT;
     /** set z-chip as disabled  */
     this.disabled = false;
   }
@@ -18,16 +22,16 @@ const ZChip = class {
     this.interactiveIconClick.emit();
   }
   getIconSize() {
-    return getDevice() !== Device.DESKTOP ? 22 : 14;
+    return utils.getDevice() !== index$1.Device.DESKTOP ? 22 : 14;
   }
   render() {
     if (this.interactiveIcon) {
-      return (h("button", { class: this.type, disabled: this.disabled, tabindex: "0", type: "button" }, this.icon && (h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null), h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.emitinteractiveIconClick.bind(this)), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
+      return (index.h("button", { class: this.type, disabled: this.disabled, tabindex: "0", type: "button" }, this.icon && (index.h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), index.h("slot", null), index.h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.emitinteractiveIconClick.bind(this)), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
     }
-    return (h("div", { class: `${this.type}`, tabindex: "0" }, this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null)));
+    return (index.h("div", { class: `${this.type}`, tabindex: "0" }, this.icon && (index.h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), index.h("slot", null)));
   }
-  get el() { return getElement(this); }
+  get el() { return index.getElement(this); }
 };
 ZChip.style = stylesCss;
 
-export { ZChip as z_chip };
+exports.z_chip = ZChip;

package/dist/{web-components-library/z-combobox.entry.js → cjs/z-combobox.cjs.entry.js}

@@ -1,14 +1,18 @@
-import { r as registerInstance, f as createEvent, h } from './index-291c96fb.js';
-import { I as InputType, K as KeyboardKeyCode, k as ListDividerType } from './index-968a240f.js';
-import { h as handleKeyboardSubmit } from './utils-b96780be.js';
-import './breakpoints-c386984e.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
+const utils = require('./utils-600bad93.js');
+require('./breakpoints-88c4fd6c.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) * 2);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host>div>.header:focus:focus-visible{border:var(--border-size-small) solid var(--blue500);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>z-body{padding:var(--space-unit) 0;margin:0;color:var(--text-grey-800)}:host>div>.header>z-body>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--text-grey-800);transform:rotate(360deg);transition:all 200ms linear}:host>div.open>.header{border:var(--border-size-small) solid var(--blue500);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>z-body{color:var(--text-grey-700)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--text-grey-800);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(--bg-white);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--myz-blue) var(--gray200);scrollbar-width:thin}: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(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--myz-blue);border-radius:var(--border-radius)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--myz-blue)}: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(--myz-blue) var(--bg-grey-200);scrollbar-width:thin}: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(--myz-blue);cursor:pointer;font-family:var(--dashboard-font);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);text-align:left}";
 
 const ZCombobox = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.comboboxChange = createEvent(this, "comboboxChange", 7);
+    index.registerInstance(this, hostRef);
+    this.comboboxChange = index.createEvent(this, "comboboxChange", 7);
     /** the combobox is disabled */
     this.disabled = false;
     /** show search input flag (optional) */
@@ -31,7 +35,7 @@ const ZCombobox = class {
     this.maxcheckableitems = 0;
     this.renderItemsList = []; // used for render only
     this.itemsList = [];
-    this.inputType = InputType.TEXT;
+    this.inputType = index$1.InputType.TEXT;
     this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }
@@ -109,26 +113,26 @@ const ZCombobox = class {
     this.isopen = !this.isopen;
   }
   renderHeader() {
-    return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === KeyboardKeyCode.SPACE) {
+    return (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === index$1.KeyboardKeyCode.SPACE) {
           ev.preventDefault();
         }
-      }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("z-body", { level: 3, component: "p" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", width: 18, height: 18 })));
+      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("z-body", { level: 3, component: "p" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", width: 18, height: 18 })));
   }
   renderContent() {
     if (!this.isopen) {
       return;
     }
-    return (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.hascheckall && this.renderCheckAll(), this.renderItems()));
   }
   renderItems() {
     if (!this.isopen) {
       return;
     }
-    return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+    return (index.h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
   }
-  renderItem(item, index, length) {
-    return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+  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 }, 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 })));
   }
   renderList(items) {
     if (!items) {
@@ -140,7 +144,7 @@ const ZCombobox = class {
     if (this.hasgroupitems) {
       return this.renderGroups(this.itemsList);
     }
-    return (h("ul", null, items.map((item, i) => {
+    return (index.h("ul", null, items.map((item, i) => {
       return this.renderItem(item, i, items.length);
     })));
   }
@@ -154,21 +158,21 @@ const ZCombobox = class {
       return group;
     }, {});
     const listGroups = Object.entries(newData).map(([key, value]) => {
-      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
+      return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
     });
-    return h("ul", null, listGroups);
+    return index.h("ul", null, listGroups);
   }
   renderNoSearchResults() {
-    return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
+    return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
   }
   renderCloseButton() {
-    return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+    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 (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, onInputChange: (e) => {
+    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, onInputChange: (e) => {
         if (e.detail.keycode === 27) {
           return this.closeFilterItems();
         }
@@ -180,10 +184,10 @@ const ZCombobox = class {
       return;
     }
     const allChecked = this.selectedCounter === this.itemsList.length;
-    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: 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 })));
+    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 })));
   }
   render() {
-    return (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", { "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 watchers() { return {
     "items": ["watchItems"],
@@ -192,4 +196,4 @@ const ZCombobox = class {
 };
 ZCombobox.style = stylesCss;
 
-export { ZCombobox as z_combobox };
+exports.z_combobox = ZCombobox;

package/{www/build/z-contextual-menu.entry.js → dist/cjs/z-contextual-menu.cjs.entry.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, f as createEvent, h, e as Host } from './index-291c96fb.js';
-import { P as PopoverPosition } from './index-968a240f.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}button{width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}z-popover{overflow:hidden}.popover-content-container{position:relative;min-width:112px;max-width:280px;background-color:var(--color-surface02);box-shadow:var(--shadow-2);white-space:nowrap}.element-container:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.element-text{overflow:hidden;font-size:14px;text-overflow:ellipsis}.element-container,.disabled-element-container{display:flex;min-height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);fill:var(--color-disabled03);gap:var(--space-unit)}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
 
 const ZContextualMenu = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clickContextualMenu = createEvent(this, "clickContextualMenu", 7);
+    index.registerInstance(this, hostRef);
+    this.clickContextualMenu = index.createEvent(this, "clickContextualMenu", 7);
     /**
      * [optional] Sets text color of ZContextualMenu's content
      */
@@ -14,7 +18,7 @@ const ZContextualMenu = class {
     /**
      * [optional] Sets the position of the popover
      */
-    this.popoverPosition = PopoverPosition.BOTTOM_RIGHT;
+    this.popoverPosition = index$1.PopoverPosition.BOTTOM_RIGHT;
   }
   componentWillRender() {
     if (this.elements) {
@@ -34,9 +38,9 @@ const ZContextualMenu = class {
   }
   render() {
     var _a, _b;
-    return (h(Host, null, h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })), h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
+    return (index.h(index.Host, null, index.h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, index.h("z-icon", { name: "contextual-menu", fill: this.color })), index.h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, index.h("div", { class: "popover-content-container" }, index.h("z-list", null, index.h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index$1) => (index.h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index$1, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, index.h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (index.h("div", { class: "element-icon" }, index.h("z-icon", { name: element.icon, width: 16, height: 16 }))), index.h("div", { class: "element-text" }, index.h("span", null, element.text))))))))))));
   }
 };
 ZContextualMenu.style = stylesCss;
 
-export { ZContextualMenu as z_contextual_menu };
+exports.z_contextual_menu = ZContextualMenu;

package/dist/{web-components-library/z-cover-hero.entry.js → cjs/z-cover-hero.cjs.entry.js}

@@ -1,36 +1,40 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-291c96fb.js';
-import { J as CoverHeroVariant, M as CoverHeroContentPosition } from './index-968a240f.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{--cover-hero-height:auto;--cover-hero-min-height:calc(var(--space-unit) * 30);--cover-hero-overlay:none;--cover-hero-text-color:var(--color-text-inverse);display:block}:host,*{box-sizing:border-box}:host .content-hero{position:relative;width:100%;height:var(--cover-hero-height);min-height:var(--cover-hero-min-height);align-items:baseline;background-color:var(--gray600)}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .content-hero .cover{position:absolute;z-index:0;width:100%;height:100%}::slotted([slot=\"cover\"]){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]) .content-hero .cover::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]) .content-hero .content-container{position:relative;height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-text01)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
 
 const ZCoverHero = class {
   constructor(hostRef) {
-    registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     /**
      * Cover hero variant.
      * Can be one of "OVERLAY", "STACKED".
      */
-    this.variant = CoverHeroVariant.OVERLAY;
+    this.variant = index$1.CoverHeroVariant.OVERLAY;
     /**
      * Cover hero content position (only for STACKED variant).
      */
-    this.contentPosition = CoverHeroContentPosition.TOP;
+    this.contentPosition = index$1.CoverHeroContentPosition.TOP;
   }
   /**
    * Template for the content.
    */
   renderContent() {
-    return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
+    return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
   }
   render() {
-    return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
-      this.contentPosition === CoverHeroContentPosition.TOP &&
-      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
-      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
+    return (index.h(index.Host, null, this.variant === index$1.CoverHeroVariant.STACKED &&
+      this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
+      this.renderContent(), index.h("div", { class: "content-hero" }, index.h("div", { class: "cover" }, index.h("slot", { name: "cover" })), index.h("slot", { name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
+      this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
       this.renderContent()));
   }
-  get el() { return getElement(this); }
+  get el() { return index.getElement(this); }
 };
 ZCoverHero.style = stylesCss;
 
-export { ZCoverHero as z_cover_hero };
+exports.z_cover_hero = ZCoverHero;