@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/cjs/z-aria-alert.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.js');
 
 const ZAriaAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.mode = index$1.ZAriaAlertMode.polite;
+    /** Aria live mode */
+    this.mode = index$1.ZAriaAlertMode.POLITE;
   }
   render() {
     return (index.h(index.Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", null)));

package/dist/cjs/z-avatar.cjs.entry.js

@@ -2,32 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.js');
 
-const stylesCss = ":host{font-family:var(--font-family-sans);background-color:var(--bg-grey-700);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-transform:uppercase}:host(.small),:host(.small)>img{height:calc(var(--space-unit) * 3);width:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{height:calc(var(--space-unit) * 4);width:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{height:calc(var(--space-unit) * 5);width:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
+const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--bg-grey-700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
 
 const ZAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    var _a, _b;
     /** [optional] Avatar size */
-    this.size = index$1.AvatarSize.medium;
+    this.size = index$1.AvatarSize.MEDIUM;
     /** [optional] Avatar text color */
     this.textColor = "text-white";
     /** [optional] Avatar background color */
     this.backgroundColor = "bg-grey-700";
-    if (!this.text && !this.image) {
+    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
   }
   getTextSize() {
-    if (this.size === index$1.AvatarSize.small) {
+    if (this.size === index$1.AvatarSize.SMALL) {
       return "5";
     }
-    else if (this.size === index$1.AvatarSize.medium) {
+    else if (this.size === index$1.AvatarSize.MEDIUM) {
       return "4";
     }
-    else if (this.size === index$1.AvatarSize.large) {
+    else if (this.size === index$1.AvatarSize.LARGE) {
       return "2";
     }
   }

package/dist/cjs/z-body_2.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
+const index = require('./index-0b49c192.js');
 
 const ZBody = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** Font weight variant */
     this.variant = "regular";
   }
   render() {
@@ -14,11 +15,12 @@ const ZBody = class {
   }
 };
 
-const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}: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 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) {
     index.registerInstance(this, hostRef);
+    /** Font weight variant */
     this.variant = "regular";
   }
   render() {
@@ -29,7 +31,7 @@ const ZTypography = class {
         [this.level]: Boolean(this.level),
         regular: this.variant === "regular",
         semibold: this.variant === "semibold",
-        light: this.variant === "light"
+        light: this.variant === "light",
       } }));
   }
   get hostElement() { return index.getElement(this); }

package/dist/cjs/z-button-deprecated.cjs.entry.js

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$2 = require('./index-1fda0714.js');
-const index$1 = require('./index-745c0423.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.js');
 
-const stylesCss = ":host{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:var(--space-unit);--rgb-white:240, 240, 240}button:disabled,::slotted(button:disabled){pointer-events:none}button,::slotted(button),::slotted(a){box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;outline:none;fill:currentColor}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){height:44px;min-width:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){height:36px;min-width:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){height:36px;min-width:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){height:32px;min-width:32px}button:not(.square),:host(:not([square])) ::slotted(button),:host(:not([square])) ::slotted(a){min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}button.square,:host([square]){--z-icon-right-margin:0}button.primary,:host([variant=\"primary\"]) ::slotted(button),:host([variant=\"primary\"]) ::slotted(a){background-color:var(--color-primary01);border-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){button.primary:hover,:host([variant=\"primary\"]) ::slotted(button:hover),:host([variant=\"primary\"]) ::slotted(a:hover){background-color:var(--color-hover-primary);border-color:var(--color-hover-primary);color:var(--color-text-inverse)}}button:focus:focus-visible,::slotted(button:focus:focus-visible),::slotted(a:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}button.primary:active,:host([variant=\"primary\"]) ::slotted(button:active),:host([variant=\"primary\"]) ::slotted(a:active){background-color:var(--color-pressed-primary);border-color:var(--color-pressed-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-2)}button.primary:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){background-color:var(--color-disabled01);border-color:var(--color-disabled01);color:var(--color-disabled02)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){background-color:var(--color-surface01);border-color:var(--color-primary01);color:var(--color-primary01)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){background-color:var(--color-surface01);border-color:var(--color-hover-primary);color:var(--color-hover-primary)}}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){background-color:var(--color-surface01);border-color:var(--color-pressed-primary);color:var(--color-pressed-primary);box-shadow:var(--shadow-2)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){background-color:var(--color-surface01);border-color:var(--color-disabled01);color:var(--color-disabled02)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){background-color:transparent;border-color:transparent;color:var(--color-primary01)}button.tertiary.hasContent{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){background-color:var(--color-primary03);border-color:var(--color-primary03);color:var(--color-hover-primary)}}button.tertiary:focus:focus-visible,:host([variant=\"tertiary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"tertiary\"]) ::slotted(a:focus:focus-visible){background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01);box-shadow:var(--shadow-2)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){background-color:transparent;border-color:transparent;color:var(--color-disabled02)}button.dark-bg,:host([variant=\"dark-bg\"]) ::slotted(button),:host([variant=\"dark-bg\"]) ::slotted(a){background-color:rgba(var(--rgb-white), 0.2);border-color:transparent;color:var(--color-text04)}button.dark-bg.hasContent{padding:0 var(--space-unit)}@media (hover: hover){button.dark-bg:hover,:host([variant=\"dark-bg\"]) ::slotted(button:hover),:host([variant=\"dark-bg\"]) ::slotted(a:hover){background-color:rgba(var(--rgb-white), 0.1)}}button.dark-bg:active,:host([variant=\"dark-bg\"]) ::slotted(button:active),:host([variant=\"dark-bg\"]) ::slotted(a:active){background-color:rgba(var(--rgb-white), 0.3)}button.dark-bg:disabled,:host([variant=\"dark-bg\"]) ::slotted(button:disabled){color:var(--color-disabled03);background-color:rgba(var(--rgb-white), 0.05)}";
+const stylesCss = ":host{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:var(--space-unit);--rgb-white:240, 240, 240}button:disabled,::slotted(button:disabled){pointer-events:none}button,::slotted(button),::slotted(a){display:inline-flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;justify-content:center;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;vertical-align:middle;white-space:nowrap}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){min-width:44px;height:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){min-width:36px;height:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){min-width:36px;height:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){min-width:32px;height:32px}button:not(.square),:host(:not([square])) ::slotted(button),:host(:not([square])) ::slotted(a){min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}button.square,:host([square]){--z-icon-right-margin:0}button.primary,:host([variant=\"primary\"]) ::slotted(button),:host([variant=\"primary\"]) ::slotted(a){border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){button.primary:hover,:host([variant=\"primary\"]) ::slotted(button:hover),:host([variant=\"primary\"]) ::slotted(a:hover){border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}button:focus:focus-visible,::slotted(button:focus:focus-visible),::slotted(a:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}button.primary:active,:host([variant=\"primary\"]) ::slotted(button:active),:host([variant=\"primary\"]) ::slotted(a:active){border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}button.primary:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){border-color:transparent;background-color:transparent;color:var(--color-primary01)}button.tertiary.has-content{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}button.tertiary:focus:focus-visible,:host([variant=\"tertiary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"tertiary\"]) ::slotted(a:focus:focus-visible){border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){border-color:transparent;background-color:transparent;color:var(--color-disabled02)}button.dark-bg,:host([variant=\"dark-bg\"]) ::slotted(button),:host([variant=\"dark-bg\"]) ::slotted(a){border-color:transparent;background-color:rgb(var(--rgb-white) 0.2);color:var(--color-text04)}button.dark-bg.has-content{padding:0 var(--space-unit)}@media (hover: hover){button.dark-bg:hover,:host([variant=\"dark-bg\"]) ::slotted(button:hover),:host([variant=\"dark-bg\"]) ::slotted(a:hover){background-color:rgb(var(--rgb-white) 0.1)}}button.dark-bg:active,:host([variant=\"dark-bg\"]) ::slotted(button:active),:host([variant=\"dark-bg\"]) ::slotted(a:active){background-color:rgb(var(--rgb-white) 0.3)}button.dark-bg:disabled,:host([variant=\"dark-bg\"]) ::slotted(button:disabled){background-color:rgb(var(--rgb-white) 0.05);color:var(--color-disabled03)}";
 
 const ZButtonDeprecated = class {
   constructor(hostRef) {
@@ -15,11 +13,11 @@ const ZButtonDeprecated = class {
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
-    this.type = index$1.ButtonTypeEnum.button;
+    this.type = index$1.ButtonType.BUTTON;
     /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = index$1.ButtonVariantEnum.primary;
+    this.variant = index$1.ButtonVariant.PRIMARY;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = index$1.ButtonSizeEnum.big;
+    this.size = index$1.ButtonSize.BIG;
     /** Reduce button size (deprecated).
      * @deprecated Use `size` prop.
      */
@@ -29,7 +27,12 @@ const ZButtonDeprecated = class {
   }
   render() {
     this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (index.h("slot", { name: "element" }, index.h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: index$2.classnames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.h("slot", null))));
+    return (index.h("slot", { name: "element" }, index.h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: {
+        [this.variant]: true,
+        [this.size]: true,
+        issmall: this.issmall,
+        square: this.square,
+      } }, this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/z-button-filter.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
+const index = require('./index-0b49c192.js');
 
-const stylesCss = "button.container{min-height:32px;line-height:32px;border:var(--border-size-small) solid var(--bg-grey-200);border-radius:16px;box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-webkit-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-moz-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);text-align:center;padding:0 calc(var(--space-unit) * 2);cursor:pointer;letter-spacing:0.17px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);opacity:1;transition:all 200ms linear}button.container.small{min-height:24px;line-height:24px}button.container:focus{outline:0}button.container::-moz-focus-inner{border:0}.text-container{margin-left:4px}button.container,button.container:focus,button.container:hover{background-color:var(--bg-white);color:var(--text-grey-700);fill:var(--text-grey-700)}button.container.isactive{background-color:var(--bg-white);color:var(--myz-blue);fill:var(--myz-blue)}button.container.isactive:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button.container.isactive:focus{background-color:var(--myz-blue-dark);border-color:var(--myz-blue-dark);box-shadow:0px 0px 4px 0px var(--text-grey-800);color:var(--bg-white);fill:var(--bg-white)}button z-icon{display:inline-block}";
+const stylesCss = "button.container{min-height:32px;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:16px;box-shadow:0 2px 5px 0 var(--bg-neutral-300);cursor:pointer;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.17px;line-height:32px;opacity:1;text-align:center;transition:all 200ms linear}button.container.small{min-height:24px;line-height:24px}button.container:focus{outline:0}button.container::-moz-focus-inner{border:0}.text-container{margin-left:4px}button.container,button.container:focus,button.container:hover{background-color:var(--bg-white);color:var(--text-grey-700);fill:var(--text-grey-700)}button.container.isactive{background-color:var(--bg-white);color:var(--myz-blue);fill:var(--myz-blue)}button.container.isactive:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button.container.isactive:focus{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);box-shadow:0 0 4px 0 var(--text-grey-800);color:var(--bg-white);fill:var(--bg-white)}button z-icon{display:inline-block}";
 
 const ZButtonFilter = class {
   constructor(hostRef) {
@@ -30,8 +30,9 @@ const ZButtonFilter = class {
     return (index.h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick }, this.renderIcon(), this.renderContent(filtername)));
   }
   renderIcon() {
-    if (!this.hasicon)
+    if (!this.hasicon) {
       return null;
+    }
     return (index.h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 }));
   }
   renderContent(filtername) {

package/dist/cjs/z-button-sort.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
+const index = require('./index-0b49c192.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
-const stylesCss = ":host,button{max-width:100%}button{height:36px;border:var(--border-size-medium) solid var(--myz-blue);border-radius:var(--border-radius);color:var(--myz-blue);fill:var(--myz-blue);background-color:var(--bg-white);outline:none;padding:0 var(--space-unit);cursor:pointer}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);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button:active{border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{cursor:pointer;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;display:flex;align-items:center}button>label>span.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;padding:0}button>label>span.counter{margin-left:calc(var(--space-unit) / 2);margin-right:calc(var(--space-unit) * 2)}button>label>span.sort{margin-right:var(--half-x1);white-space:nowrap}button>span{font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:14px;margin-right:calc(var(--space-unit) * 0.5)}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 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) {
@@ -34,13 +34,12 @@ const ZButtonSort = class {
     });
   }
   componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint)
+    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint) {
       this.allowTooltip = true;
+    }
   }
   setButtonTitle() {
-    return this.allowTooltip
-      ? `${this.sortasc ? this.label : this.desclabel}`
-      : "";
+    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : "";
   }
   elementHasEllipsis() {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;

package/dist/cjs/z-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.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{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;outline:none;fill:currentColor}.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{height:44px;min-width:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{height:36px;min-width:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{height:32px;min-width:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{background-color:var(--color-primary01);border-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{background-color:var(--color-hover-primary);border-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{background-color:var(--color-pressed-primary);border-color:var(--color-pressed-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-2)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{background-color:var(--color-disabled01);border-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{background-color:var(--color-surface01);border-color:var(--color-primary01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{background-color:var(--color-surface01);border-color:var(--color-hover-primary);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{background-color:var(--color-surface01);border-color:var(--color-pressed-primary);color:var(--color-pressed-primary);box-shadow:var(--shadow-2)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{background-color:var(--color-surface01);border-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{background-color:transparent;border-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{background-color:var(--color-primary03);border-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01);box-shadow:var(--shadow-2)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{background-color:transparent;border-color:transparent;color:var(--color-disabled02)}";
+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) {
@@ -13,27 +13,26 @@ const ZButton = class {
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
-    this.type = index$1.ButtonTypeEnum.button;
+    this.type = index$1.ButtonType.BUTTON;
     /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = index$1.ButtonVariantEnum.primary;
+    this.variant = index$1.ButtonVariant.PRIMARY;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = index$1.ButtonSizeEnum.big;
+    this.size = index$1.ButtonSize.BIG;
   }
   getAttributes() {
     return {
       id: this.htmlid,
-      "aria-label": this.ariaLabel,
       class: {
         "z-button--container": true,
-        "z-button--has-text": !!this.hostElement.textContent.trim()
-      }
+        "z-button--has-text": !!this.hostElement.textContent.trim(),
+      },
     };
   }
   render() {
     if (this.href) {
-      return (index.h("a", Object.assign({}, this.getAttributes(), { href: this.href, target: this.target }), this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.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 (index.h("button", Object.assign({}, this.getAttributes(), { 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)));
+    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 index.getElement(this); }
 };

package/dist/cjs/z-candybar.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
+const index = require('./index-0b49c192.js');
 
-const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-content:center}:host>div{position:fixed;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;top:30vh;max-width:297px;height:fit-content;min-height:232px;z-index:1000;margin:auto;overflow:auto;overflow:-moz-scrollbars-none;-ms-overflow-style:none;background:var(--myz-blue-lighter);border-radius:calc(var(--space-unit) * .5);box-shadow:0px -2px 4px 0px rgba(66, 69, 72, 0.4)}@media only screen and (min-width: 768px){:host>div{position:initial;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:stretch;position:fixed;top:auto;bottom:0;margin:0 auto;left:0;right:0;height:auto;min-height:138px;max-width:100%;border-radius:0px}}@media only screen and (min-width: 1152px){:host>div{min-height:122px}}";
+const stylesCss = ":host{display:flex;flex-flow:row nowrap;align-content:center;justify-content:center;font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{position:fixed;z-index:1000;top:30vh;display:flex;overflow:auto;overflow:-moz-scrollbars-none;max-width:297px;height:fit-content;min-height:232px;flex-flow:row wrap;justify-content:center;margin:auto;background:var(--myz-blue-lighter);border-radius:calc(var(--space-unit) * 0.5);box-shadow:0 -2px 4px 0 rgb(66 69 72 / 40%);-ms-overflow-style:none}@media only screen and (min-width: 768px){:host>div{position:initial;position:fixed;top:auto;right:0;bottom:0;left:0;max-width:100%;height:auto;min-height:138px;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin:0 auto;border-radius:0}}@media only screen and (min-width: 1152px){:host>div{min-height:122px}}";
 
 const ZCandybar = class {
   constructor(hostRef) {

package/dist/cjs/z-card.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.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;flex-direction:column;justify-content:flex-end;height:100%;padding:var(--space-unit)}::slotted([slot='metadata']),::slotted([slot='title']),::slotted([slot='text']){display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}::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']){background-color:var(--z-card--text-background);border:var(--z-card--text-border);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, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+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) {
@@ -18,7 +18,7 @@ const ZCard = class {
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
+    if (ev.target.getAttribute("slot") === "action") {
       return;
     }
     if (!this.clickable) {
@@ -29,7 +29,7 @@ const ZCard = class {
     this.cardClicked.emit();
   }
   componentWillLoad() {
-    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
+    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
   }
   /**
    * Template for a card without image cover.
@@ -38,29 +38,26 @@ const ZCard = class {
   renderColorCoverCard() {
     return [
       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" })))
+      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.
-  */
+   * Template for the content div.
+   */
   renderContentDiv() {
     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 === index$1.CardVariants.text) {
-      return this.renderContentDiv();
+    if (this.variant === index$1.CardVariant.TEXT) {
+      return index.h(index.Host, null, this.renderContentDiv());
     }
-    if (this.variant === index$1.CardVariants.overlay || this.hasCoverImage) {
-      return [
-        index.h("div", { class: "cover-container" }, this.hasCoverImage && [
-          index.h("slot", { name: "cover" }),
-          (this.variant !== index$1.CardVariants.overlay) && this.coverIcon && index.h("z-icon", { name: this.coverIcon })
-        ], !this.hasCoverImage && index.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 this.renderColorCoverCard();
+    return index.h(index.Host, null, this.renderColorCoverCard());
   }
   get host() { return index.getElement(this); }
 };

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.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;justify-content:center;align-items: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-container{display:flex;flex-direction:column}.z-carousel-wrapper{position:relative}.z-carousel-title{color:var(--gray800);margin-bottom:var(--space-unit)}.z-carousel-items-container{display:flex;flex-direction:row;overflow-x:scroll;max-width:100%;padding-inline-start:0;margin:0;list-style:none;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.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-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:calc(50% - calc(var(--space-unit) * 3));cursor:pointer}z-button[data-direction=\"next\"]{right:0}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}.z-carousel-footer .number-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress button{display:flex;align-items:center;margin:0;padding:0;border:none;background-color:transparent}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress>*{margin-right:calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}.z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}.z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
+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-container{display:flex;flex-direction:column}.z-carousel-wrapper{position:relative}.z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}.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-items-container::-webkit-scrollbar{display:none}.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-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-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}.z-carousel-footer .number-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress>*{margin-right:calc(var(--space-unit) / 2)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}.z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}.z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
 
 const ZCarousel = class {
   constructor(hostRef) {
@@ -22,7 +22,8 @@ const ZCarousel = class {
   }
   onIndexChange() {
     this.scrollingTo = this.current;
-    this.items[this.current].scrollIntoView({
+    this.itemsContainer.scroll({
+      left: this.items[this.current].offsetLeft,
       behavior: "smooth",
     });
     this.indexChange.emit({ currentItem: this.current });
@@ -53,7 +54,7 @@ const ZCarousel = class {
       }
       const entryIndex = this.items.findIndex((item) => item === entry.target);
       /* skip setting the current item if intersection has been triggered by a programmatic scroll
-      (the scrollIntoView in `onIndexChange`) */
+      (the scroll in `onIndexChange`) */
       if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
         return;
       }
@@ -115,15 +116,9 @@ const ZCarousel = class {
   }
   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(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(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.ButtonSizeEnum.small, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), 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.ButtonSizeEnum.small, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ButtonSizeEnum.small, variant: index$1.ButtonVariantEnum.tertiary, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), 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.current === key }, onClick: () => this.goTo(key) }, index.h("z-icon", { name: this.current === key
-        ? "white-circle-filled"
-        : "black-circle-filled" })))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS &&
-      this.single &&
-      this.items && (index.h("div", { class: "numbers-progress" }, index.h("span", { class: "interactive-3 current" }, this.current + 1), index.h("span", { class: "interactive-3" }, "di"), index.h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ButtonSizeEnum.small, variant: index$1.ButtonVariantEnum.tertiary, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
+    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) })), 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) })))), 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-left-filled", onClick: this.onPrev.bind(this) })), 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.current === key }, onClick: () => this.goTo(key) }, index.h("z-icon", { name: this.current === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS && this.single && this.items && (index.h("div", { class: "numbers-progress" }, index.h("span", { class: "interactive-3 current" }, this.current + 1), index.h("span", { class: "interactive-3" }, "di"), index.h("span", { class: "interactive-3" }, 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-right-filled", onClick: this.onNext.bind(this) }))))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,21 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
+const index = require('./index-0b49c192.js');
 
-const stylesCss = ":host>div{display:inline-block;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:12px}.boldtext{font-weight:bold}";
+const stylesCss = ":host>div{display:inline-block;min-height:28px;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:12px;line-height:28px}.boldtext{font-weight:bold}";
 
 const ZChipDeprecated = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   renderLegacyChip() {
-    return index.h("div", null, index.h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
+    return (index.h("div", null, index.h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext));
   }
   render() {
-    return this.boldtext != null || this.regulartext != null ?
-      this.renderLegacyChip() :
-      index.h("div", null, index.h("slot", null));
+    return this.boldtext != null || this.regulartext != null ? (this.renderLegacyChip()) : (index.h("div", null, index.h("slot", null)));
   }
 };
 ZChipDeprecated.style = stylesCss;

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

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-745c0423.js');
-const utils = require('./utils-dfe717c7.js');
+const index = require('./index-0b49c192.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.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);background-color:var(--bg-white);border:var(--border-size-small) solid var(--gray400);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.sc-z-chip:last-child{cursor:pointer}.sc-z-chip-h>button.sc-z-chip>z-icon.iconSx.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);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;align-items:center;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px}.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;line-height:44px;border-radius:22px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:40px;line-height:40px;border-radius:22px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:36px;line-height:36px;border-radius:22px}@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;line-height:32px;border-radius:16px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:28px;line-height:28px;border-radius:16px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:24px;line-height:24px;border-radius:16px}}";
+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) {
     index.registerInstance(this, hostRef);
     this.interactiveIconClick = index.createEvent(this, "interactiveIconClick", 7);
     /** z-chip size type, can be default, medium or small */
-    this.type = index$1.ZChipType.default;
+    this.type = index$1.ZChipType.DEFAULT;
     /** set z-chip as disabled  */
     this.disabled = false;
   }
@@ -22,11 +22,11 @@ const ZChip = class {
     this.interactiveIconClick.emit();
   }
   getIconSize() {
-    return utils.getDevice() !== index$1.DeviceEnum.desktop ? 22 : 14;
+    return utils.getDevice() !== index$1.Device.DESKTOP ? 22 : 14;
   }
   render() {
     if (this.interactiveIcon) {
-      return (index.h("button", { class: this.type, disabled: this.disabled, tabindex: "0", type: "button" }, this.icon && (index.h("z-icon", { class: "iconSx", 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 (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 (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)));
   }