@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.2

package/dist/esm/z-input-deprecated.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3517583d.js';
-import { I as InputTypeEnum } from './index-b7165fb7.js';
-import { r as randomId } from './utils-c9ef6b5f.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
+import { I as InputTypeEnum } from './index-8390ddaf.js';
+import { r as randomId } from './utils-2c5dfb88.js';
 import './breakpoints-c386984e.js';
 
-const stylesCss = ".sc-z-input-deprecated-h{display:inline-block;width:inherit}input.sc-z-input-deprecated::-ms-clear,input.sc-z-input-deprecated::-ms-reveal{display:none}.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-clear,.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-reveal{display:none}input.sc-z-input-deprecated,textarea.sc-z-input-deprecated,.textarea-wrapper.sc-z-input-deprecated,ul[role=\"listbox\"].sc-z-input-deprecated{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input-deprecated:focus:focus-visible,li[role=\"option\"].sc-z-input-deprecated:focus:focus-visible,.focus.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary)}.filled.sc-z-input-deprecated{border-color:var(--color-surface05)}.input-success.sc-z-input-deprecated,.input-success.sc-z-input-deprecated:hover,.input-success.hover.sc-z-input-deprecated{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input-deprecated,.input-error.sc-z-input-deprecated:hover,.input-error.hover.sc-z-input-deprecated{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input-deprecated,.input-warning.sc-z-input-deprecated:hover,.input-warning.hover.sc-z-input-deprecated{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input[readonly].sc-z-input-deprecated,.readonly.sc-z-input-deprecated{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated:disabled,.disabled.sc-z-input-deprecated,.filled.sc-z-input-deprecated:disabled{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated::placeholder,textarea.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-icon.sc-z-input-deprecated,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-clear-icon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-icon.has-clear-icon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 7)}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated{position:absolute;z-index:2;right:calc(var(--space-unit) * 1.5);bottom:calc(var(--space-unit) * 1.5);display:flex}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{--z-icon-width:18px;--z-icon-height:18px;display:block;margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.reset-icon.sc-z-input-deprecated,.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.toggle-password-icon.sc-z-input-deprecated{cursor:pointer}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:hover,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:focus,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input-deprecated{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input-deprecated{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input-deprecated:hover,.checkbox-wrapper.sc-z-input-deprecated:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input-deprecated .radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.sc-z-input-deprecated{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.checkbox-label.sc-z-input-deprecated{cursor:pointer}.radio-wrapper.sc-z-input-deprecated .radio-label.sc-z-input-deprecated z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.sc-z-input-deprecated z-icon.sc-z-input-deprecated{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input-deprecated .radio-label.after.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.after.sc-z-input-deprecated{flex-direction:row}.radio-wrapper.sc-z-input-deprecated .radio-label.before.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.before.sc-z-input-deprecated{flex-direction:row-reverse}.radio-wrapper.sc-z-input-deprecated .radio-label.after.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.after.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input-deprecated .radio-label.before.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.before.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.radio-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.checkbox-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkbox-label.sc-z-input-deprecated{color:var(--color-disabled02)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radio-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkbox-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{cursor:default;fill:var(--color-disabled01)}";
+const stylesCss = ".sc-z-input-deprecated-h{display:inline-block;width:inherit}input.sc-z-input-deprecated::-ms-clear,input.sc-z-input-deprecated::-ms-reveal{display:none}.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-clear,.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-reveal{display:none}input.sc-z-input-deprecated,textarea.sc-z-input-deprecated,.textareaWrapper.sc-z-input-deprecated,ul[role=\"listbox\"].sc-z-input-deprecated{background:var(--color-input-field01);border-radius:var(--border-radius-small);border:var(--border-size-small) solid var(--color-surface04);box-sizing:border-box;color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:var(--font-size-3);outline:none}input.sc-z-input-deprecated:focus:focus-visible,li[role=\"option\"].sc-z-input-deprecated:focus:focus-visible,.focus.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary)}.filled.sc-z-input-deprecated{border-color:var(--color-surface05)}.input_success.sc-z-input-deprecated,.input_success.sc-z-input-deprecated:hover,.input_success.hover.sc-z-input-deprecated{background:var(--color-success-inverse);border-color:var(--color-success01);fill:var(--color-success01)}.input_error.sc-z-input-deprecated,.input_error.sc-z-input-deprecated:hover,.input_error.hover.sc-z-input-deprecated{background:var(--color-error-inverse);border-color:var(--color-error01);fill:var(--color-error01)}.input_warning.sc-z-input-deprecated,.input_warning.sc-z-input-deprecated:hover,.input_warning.hover.sc-z-input-deprecated{background:var(--color-warning-inverse);border-color:var(--color-warning01);fill:var(--color-warning01)}input[readonly].sc-z-input-deprecated,.readonly.sc-z-input-deprecated{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated:disabled,.disabled.sc-z-input-deprecated,.filled.sc-z-input-deprecated:disabled{border-color:var(--color-disabled01);color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none;box-shadow:none}input.sc-z-input-deprecated::placeholder,textarea.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-webkit-input-placeholder,.sc-z-input-deprecated::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-ms-input-placeholder,.sc-z-input-deprecated:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-moz-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-moz-placeholder{color:var(--color-text05)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{fill:var(--color-icon02)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated{width:100%;height:calc(var(--space-unit) * 5.5);margin:0;padding:0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);box-sizing:border-box}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasIcon.sc-z-input-deprecated,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasClearIcon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 4)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasIcon.hasClearIcon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 7)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{position:relative;z-index:1}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated{position:absolute;bottom:calc(var(--space-unit) * 1.5);right:calc(var(--space-unit) * 1.5);display:flex;z-index:2}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{--z-icon-width:18px;--z-icon-height:18px;display:block;margin-left:calc(var(--space-unit) * 0.5)}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.resetIcon.sc-z-input-deprecated,.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.showHidePasswordIcon.sc-z-input-deprecated{cursor:pointer}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:hover,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:focus,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:active{-webkit-background-clip:text !important}.textareaWrapper.sc-z-input-deprecated{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input-deprecated{min-height:132px;width:100%;margin:0;padding:0;border:none;resize:none}.radioWrapper.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated{display:inline-flex;flex-direction:row;align-items:center;font-family:var(--font-family-sans);position:relative;color:var(--color-text01);fill:var(--color-primary01)}.radioWrapper.sc-z-input-deprecated:hover,.checkboxWrapper.sc-z-input-deprecated:hover{color:var(--color-hover-primary);fill:currentColor}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated{position:absolute;opacity:0;z-index:-1;pointer-events:none}.radioWrapper.sc-z-input-deprecated .radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.sc-z-input-deprecated{display:inline-flex;align-items:center;margin:0;line-height:1;color:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;text-transform:inherit}.radioWrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.checkboxLabel.sc-z-input-deprecated{cursor:pointer}.radioWrapper.sc-z-input-deprecated .radioLabel.sc-z-input-deprecated z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.sc-z-input-deprecated z-icon.sc-z-input-deprecated{fill:inherit;cursor:pointer}.radioWrapper.sc-z-input-deprecated .radioLabel.after.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.after.sc-z-input-deprecated{flex-direction:row}.radioWrapper.sc-z-input-deprecated .radioLabel.before.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.before.sc-z-input-deprecated{flex-direction:row-reverse}.radioWrapper.sc-z-input-deprecated .radioLabel.after.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.after.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-left:var(--space-unit)}.radioWrapper.sc-z-input-deprecated .radioLabel.before.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.before.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-right:var(--space-unit)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.radioLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.checkboxLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary);border-radius:var(--border-radius-small)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkboxLabel.sc-z-input-deprecated{color:var(--color-disabled02)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radioLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkboxLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{fill:var(--color-disabled01);cursor:default}";
 
 const ZInputDeprecated = class {
   constructor(hostRef) {
@@ -41,11 +41,14 @@ const ZInputDeprecated = class {
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case InputTypeEnum.RADIO:
-        if (data.type === InputTypeEnum.RADIO && data.name === this.name && data.id !== this.htmlid) {
+      case InputTypeEnum.radio:
+        if (data.type === InputTypeEnum.radio &&
+          data.name === this.name &&
+          data.id !== this.htmlid) {
           this.checked = false;
         }
-        break;
+      default:
+        return;
     }
   }
   /** get the input value */
@@ -66,17 +69,16 @@ const ZInputDeprecated = class {
         this.selectElem.setValue(value);
         break;
       default:
-        if (typeof value === "string") {
+        if (typeof value === "string")
           this.value = value;
-        }
         break;
     }
   }
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case InputTypeEnum.CHECKBOX:
-      case InputTypeEnum.RADIO:
+      case InputTypeEnum.checkbox:
+      case InputTypeEnum.radio:
         return this.checked;
       default:
         return false;
@@ -86,8 +88,8 @@ const ZInputDeprecated = class {
     if (!this.isTyping) {
       this.emitStartTyping();
     }
-    let validity;
-    if (this.type === InputTypeEnum.TEXTAREA) {
+    let validity = {};
+    if (this.type === InputTypeEnum.textarea) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -136,69 +138,79 @@ const ZInputDeprecated = class {
       readonly: this.readonly,
       required: this.required,
       title: this.htmltitle,
-      class: {
-        [`input-${this.status}`]: !!this.status,
-        istyping: this.isTyping,
-        filled: !this.isTyping && !!this.value,
-      },
-      onInput: (e) => this.emitInputChange(e.target.value, e instanceof KeyboardEvent ? e.keyCode : null),
+      class: [
+        `input_${this.status || "default"}`,
+        this.isTyping && "istyping",
+        !this.isTyping && this.value && "filled",
+      ]
+        .filter(Boolean)
+        .join(" "),
+      onInput: (e) => this.emitInputChange(e.target.value, e.keyCode),
     };
     if (this.autocomplete) {
       attr["autocomplete"] = this.autocomplete;
     }
     return attr;
   }
-  renderInputText(type = InputTypeEnum.TEXT) {
+  renderInputText(type = InputTypeEnum.text) {
     const attr = this.getTextAttributes();
-    if (this.icon || type === InputTypeEnum.PASSWORD) {
-      Object.assign(attr.class, { "has-icon": true });
+    if (this.icon || type === InputTypeEnum.password) {
+      attr.class += " hasIcon";
     }
     if (this.hasclearicon) {
-      Object.assign(attr.class, { "has-clear-icon": true });
+      attr.class += " hasClearIcon";
     }
-    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputTypeEnum.PASSWORD && !this.passwordHidden ? InputTypeEnum.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+    return (h("div", { class: "textWrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputTypeEnum.password && !this.passwordHidden
+        ? InputTypeEnum.text
+        : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
-    if (!this.label) {
+    if (!this.label)
       return;
-    }
     return (h("z-input-label", { htmlfor: this.htmlid, value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
   }
   renderIcons() {
     return (h("span", { class: {
-        "icons-wrapper": true,
-        "disabled": this.disabled,
+        iconsWrapper: true,
+        disabled: this.disabled,
       } }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === InputTypeEnum.PASSWORD) {
+    if (this.type === InputTypeEnum.password) {
       return this.renderShowHidePassword();
     }
-    if (!this.icon) {
+    if (!this.icon)
       return;
-    }
-    return (h("z-icon", { class: "input-icon", name: this.icon }));
+    return h("z-icon", { class: "inputIcon", name: this.icon });
   }
   renderResetIcon() {
-    if (!this.hasclearicon || !this.value || this.disabled || this.readonly) {
+    if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
       return;
-    }
-    return (h("z-icon", { class: "reset-icon", name: "multiply", onClick: (e) => this.emitInputChange("", e instanceof KeyboardEvent ? e.keyCode : null) }));
+    return (h("z-icon", { class: "resetIcon", name: "multiply", onClick: (e) => this.emitInputChange("", e.keyCode) }));
   }
   renderShowHidePassword() {
-    return (h("z-icon", { class: "toggle-password-icon", name: this.passwordHidden ? "view-filled" : "view-off-filled", onClick: () => (this.passwordHidden = !this.passwordHidden) }));
+    return (h("z-icon", { class: "showHidePasswordIcon", name: this.passwordHidden ? "view-filled" : "view-off-filled", onClick: () => (this.passwordHidden = !this.passwordHidden) }));
   }
   renderMessage() {
-    if (!this.hasmessage) {
+    if (!this.hasmessage)
       return;
-    }
-    return (h("z-input-message", { message: this.message, status: this.status }));
+    return h("z-input-message", { message: this.message, status: this.status });
   }
   /* END text/password/email/number */
   /* START textarea */
   renderTextarea() {
     const attributes = this.getTextAttributes();
-    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({ "textarea-wrapper": true }, attributes.class), { "disabled": attributes.disabled, "readonly": !!attributes.readonly, "istyping": this.isTyping, [this.textareaWrapperFocus]: true, [this.textareaWrapperHover]: true }) }, h("textarea", Object.assign({}, attributes, { onFocus: () => (this.textareaWrapperFocus = "focus"), onBlur: () => (this.textareaWrapperFocus = ""), onMouseOver: () => (this.textareaWrapperHover = "hover"), onMouseOut: () => (this.textareaWrapperHover = ""), "aria-label": this.ariaLabel || this.label }))), this.renderMessage()));
+    return (h("div", { class: "textWrapper" }, this.renderLabel(), h("div", { class: [
+        "textareaWrapper",
+        attributes.class,
+        attributes.disabled && "disabled",
+        attributes.readonly && "readonly",
+        this.isTyping && "istyping",
+        this.textareaWrapperFocus,
+        this.textareaWrapperHover,
+      ]
+        .filter(Boolean)
+        .join(" ") }, h("textarea", Object.assign({}, attributes, { onFocus: () => (this.textareaWrapperFocus = "focus"), onBlur: () => (this.textareaWrapperFocus = ""), onMouseOver: () => (this.textareaWrapperHover = "hover"), onMouseOut: () => (this.textareaWrapperHover = ""), "aria-label": this.ariaLabel || this.label }))), this.renderMessage()));
   }
   /* END textarea */
   handleCheck(ev) {
@@ -207,19 +219,19 @@ const ZInputDeprecated = class {
   }
   /* START checkbox */
   renderCheckbox() {
-    return (h("div", { class: "checkbox-wrapper" }, h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
-        "checkbox-label": true,
-        "after": this.labelafter,
-        "before": !this.labelafter,
+    return (h("div", { class: "checkboxWrapper" }, h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
+        checkboxLabel: true,
+        after: this.labelafter,
+        before: !this.labelafter,
       } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
   /* START radio */
   renderRadio() {
-    return (h("div", { class: "radio-wrapper" }, h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
-        "radio-label": true,
-        "after": this.labelafter,
-        "before": !this.labelafter,
+    return (h("div", { class: "radioWrapper" }, h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }), h("label", { htmlFor: this.htmlid, class: {
+        radioLabel: true,
+        after: this.labelafter,
+        before: !this.labelafter,
       } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END radio */
@@ -230,16 +242,16 @@ const ZInputDeprecated = class {
   /* END select */
   render() {
     switch (this.type) {
-      case InputTypeEnum.TEXT:
-      case InputTypeEnum.PASSWORD:
-      case InputTypeEnum.NUMBER:
-      case InputTypeEnum.EMAIL:
+      case InputTypeEnum.text:
+      case InputTypeEnum.password:
+      case InputTypeEnum.number:
+      case InputTypeEnum.email:
         return this.renderInputText(this.type);
-      case InputTypeEnum.TEXTAREA:
+      case InputTypeEnum.textarea:
         return this.renderTextarea();
-      case InputTypeEnum.CHECKBOX:
+      case InputTypeEnum.checkbox:
         return this.renderCheckbox();
-      case InputTypeEnum.RADIO:
+      case InputTypeEnum.radio:
         return this.renderRadio();
       // @ts-ignore
       case "select":

package/dist/esm/z-input-label_2.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, c as createEvent, g as getElement } from './index-3517583d.js';
-import { h as KeyboardCodeEnum, o as ListDividerType } from './index-b7165fb7.js';
-import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-c9ef6b5f.js';
+import { r as registerInstance, h, c as createEvent, g as getElement } from './index-a2ca4b97.js';
+import { h as KeyboardCodeEnum, o as ListDividerType } from './index-8390ddaf.js';
+import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-2c5dfb88.js';
 import './breakpoints-c386984e.js';
 
-const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.33;text-align:left;text-transform:uppercase}label.disabled{color:var(--color-disabled02)}";
+const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);line-height:1.33;letter-spacing:0.32px;text-transform:uppercase;text-align:left}label.disabled{color:var(--color-disabled02)}";
 
 const ZInputLabel = class {
   constructor(hostRef) {
@@ -12,12 +12,12 @@ const ZInputLabel = class {
     this.disabled = false;
   }
   render() {
-    return (h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value));
+    return h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value);
   }
 };
 ZInputLabel.style = stylesCss$1;
 
-const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}";
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:var(--font-size-3);color:var(--color-text02)}.selectWrapper.sc-z-select>z-input.sc-z-select{width:100%}.selectWrapper.sc-z-select>div.sc-z-select{position:relative}.selectWrapper.sc-z-select>div.closed.sc-z-select{height:0;overflow:hidden}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select{background:var(--color-surface01);position:absolute;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;width:100%;box-sizing:border-box;outline:none}.selectWrapper.sc-z-select .closed.sc-z-select .ulScrollWrapper.sc-z-select{z-index:10}.selectWrapper.sc-z-select .open.sc-z-select .ulScrollWrapper.sc-z-select{z-index:20}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select{position:relative;padding:calc(var(--space-unit) * 0.5);max-height:240px;overflow:auto;outline:none;scrollbar-color:var(--color-primary01) transparent}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select .noResults.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}";
 
 const ZSelect = class {
   constructor(hostRef) {
@@ -103,7 +103,9 @@ const ZSelect = class {
         return item.name.toUpperCase().includes(searchString.toUpperCase());
       })
         .map((item) => {
-        const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());
+        const start = item.name
+          .toUpperCase()
+          .indexOf(searchString.toUpperCase());
         const end = start + searchString.length;
         const newName = item.name.substring(0, start) +
           `<strong>${item.name.substring(start, end)}</strong>` +
@@ -118,38 +120,32 @@ const ZSelect = class {
   }
   handleInputChange(e) {
     this.searchString = e.detail.value;
-    if (!this.isOpen) {
+    if (!this.isOpen)
       this.toggleSelectUl();
-    }
   }
   selectItem(item, selected) {
-    if (item && item.disabled) {
+    if (item && item.disabled)
       return;
-    }
     this.itemsList = this.mapSelectedItemToItemsArray();
     this.itemsList = this.itemsList.map((i) => {
       i.selected = false;
-      if (i.id === (item === null || item === void 0 ? void 0 : item.id)) {
+      if (i.id === (item ? item.id : null))
         i.selected = selected;
-      }
       return i;
     });
     this.selectedItem = this.itemsList.find((item) => item.selected);
     this.emitOptionSelect();
-    if (this.searchString) {
+    if (this.searchString)
       this.searchString = null;
-    }
   }
   arrowsSelectNav(e, key) {
     const arrows = [KeyboardCodeEnum.ARROW_DOWN, KeyboardCodeEnum.ARROW_UP];
-    if (!arrows.includes(e.key)) {
+    if (!arrows.includes(e.key))
       return;
-    }
     e.preventDefault();
     e.stopPropagation();
-    if (!this.isOpen) {
+    if (!this.isOpen)
       this.toggleSelectUl();
-    }
     let index;
     if (e.key === KeyboardCodeEnum.ARROW_DOWN) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
@@ -161,14 +157,12 @@ const ZSelect = class {
   }
   focusSelectItem(index) {
     const focusElem = this.element.querySelector(`#${this.htmlid}_${index}`);
-    if (focusElem) {
+    if (focusElem)
       focusElem.focus();
-    }
   }
   toggleSelectUl(selfFocusOnClose = false) {
-    if (this.disabled || this.readonly) {
+    if (this.disabled || this.readonly)
       return;
-    }
     if (!this.isOpen) {
       document.addEventListener("click", this.handleSelectFocus);
       document.addEventListener("keyup", this.handleSelectFocus);
@@ -184,7 +178,7 @@ const ZSelect = class {
   }
   handleInputClick(e) {
     const cp = e.composedPath();
-    const clearIcon = cp.find((item) => item.classList && item.classList.contains("reset-icon"));
+    const clearIcon = cp.find((item) => item.classList && item.classList.contains("resetIcon"));
     if (clearIcon) {
       e.stopPropagation();
       return;
@@ -196,12 +190,15 @@ const ZSelect = class {
       e.stopPropagation();
       return this.toggleSelectUl(true);
     }
-    if (e instanceof KeyboardEvent && e.key !== KeyboardCodeEnum.TAB && e.key !== KeyboardCodeEnum.ENTER) {
+    if (e instanceof KeyboardEvent &&
+      e.key !== KeyboardCodeEnum.TAB &&
+      e.key !== KeyboardCodeEnum.ENTER) {
       return;
     }
     const tree = getElementTree(getClickedElement());
     const parent = tree.find((elem) => {
-      return elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`;
+      return (elem.nodeName.toLowerCase() === "z-input" &&
+        elem.id === `${this.htmlid}_input`);
     });
     if (!parent) {
       this.toggleSelectUl(e instanceof MouseEvent ? true : false);
@@ -209,17 +206,17 @@ const ZSelect = class {
   }
   scrollToLetter(letter) {
     const foundItem = this.itemsList.find((item) => item.name.charAt(0) === letter);
-    if (foundItem) {
+    if (foundItem)
       this.focusSelectItem(this.itemsList.indexOf(foundItem));
-    }
   }
   renderInput() {
-    return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
+    return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem
+        ? this.selectedItem.name.replace(/<[^>]+>/g, "")
+        : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
-        if (e.keyCode !== 13) {
+        if (e.keyCode !== 13)
           e.preventDefault();
-        }
         handleKeyboardSubmit(e, this.toggleSelectUl);
       }, onKeyDown: (e) => {
         return this.arrowsSelectNav(e, this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : -1);
@@ -234,32 +231,31 @@ const ZSelect = class {
   }
   renderSelectUl() {
     var _a;
-    return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: "ul-scroll-wrapper", tabindex: "-1" }, h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
+    return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: "ulScrollWrapper", tabindex: "-1" }, h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
         disabled: this.disabled,
         readonly: this.readonly,
         filled: !!this.selectedItem,
-        [`input-${this.status}`]: !this.isOpen && !!this.status,
+        [`input_${this.status}`]: !this.isOpen && !!this.status,
+        input_default: this.isOpen || !this.status,
       } }, this.renderSelectUlItems()))));
   }
   renderSelectUlItems() {
-    if (!this.itemsList.length) {
+    if (!this.itemsList.length)
       return this.renderNoSearchResults();
-    }
     return this.itemsList.map((item, key) => {
-      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: ListDividerType.element, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
     });
   }
   renderNoSearchResults() {
-    return (h("z-list-element", { color: "blue500", class: "no-results" }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+    return (h("z-list-element", { color: "blue500", class: "noResults" }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
   }
   renderMessage() {
-    if (boolean(this.message) === false) {
+    if (boolean(this.message) === false)
       return;
-    }
     return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
   }
   render() {
-    return (h("div", { class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    return (h("div", { class: "selectWrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/z-list-group.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3517583d.js';
-import { k as ListSize, o as ListDividerType, D as DividerSize } from './index-b7165fb7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { k as ListSize, o as ListDividerType, D as DividerSize } from './index-8390ddaf.js';
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;line-height:1.4;letter-spacing:0.16px}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
 
 const ZListGroup = class {
   constructor(hostRef) {
@@ -9,15 +9,15 @@ const ZListGroup = class {
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.MEDIUM;
+    this.size = ListSize.medium;
     /**
      * [optional] Sets the position where to insert the divider.
      */
-    this.dividerType = ListDividerType.NONE;
+    this.dividerType = ListDividerType.none;
     /**
      * [optional] Sets the divider size.
      */
-    this.dividerSize = DividerSize.SMALL;
+    this.dividerSize = DividerSize.small;
     /**
      * [optional] Sets the divider color.
      */
@@ -41,7 +41,7 @@ const ZListGroup = class {
     return (h(Host, { role: "group" }, h("div", { class: {
         "z-list-group-header-container": true,
         "has-header": this.hasHeader,
-      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
+      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.header && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/z-list_2.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3517583d.js';
-import { k as ListSize, m as ExpandableListButtonAlign, o as ListDividerType, D as DividerSize, E as ExpandableListStyle, i as KeyboardKeys } from './index-b7165fb7.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a2ca4b97.js';
+import { k as ListSize, m as ExpandableListButtonAlign, o as ListDividerType, D as DividerSize, E as ExpandableListStyle, i as KeyboardKeys } from './index-8390ddaf.js';
 
-const stylesCss$1 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
 
 const ZList = class {
   constructor(hostRef) {
@@ -9,7 +9,7 @@ const ZList = class {
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.MEDIUM;
+    this.size = ListSize.medium;
   }
   setChildrenSizeType() {
     const children = this.host.children;
@@ -27,7 +27,7 @@ const ZList = class {
 };
 ZList.style = stylesCss$1;
 
-const stylesCss = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
+const stylesCss = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
 
 const ZListElement = class {
   /**
@@ -40,7 +40,7 @@ const ZListElement = class {
     /**
      * [optional] Align expandable button left or right.
      */
-    this.alignButton = ExpandableListButtonAlign.LEFT;
+    this.alignButton = ExpandableListButtonAlign.left;
     /**
      * [optional] Sets element clickable.
      */
@@ -52,11 +52,11 @@ const ZListElement = class {
     /**
      * [optional] Sets the position where to insert the divider.
      */
-    this.dividerType = ListDividerType.NONE;
+    this.dividerType = ListDividerType.none;
     /**
      * [optional] Sets the divider size.
      */
-    this.dividerSize = DividerSize.SMALL;
+    this.dividerSize = DividerSize.small;
     /**
      * [optional] Sets element as expandable.
      */
@@ -64,11 +64,11 @@ const ZListElement = class {
     /**
      * [optional] Sets expandable style to element.
      */
-    this.expandableStyle = ExpandableListStyle.ACCORDION;
+    this.expandableStyle = ExpandableListStyle.accordion;
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.MEDIUM;
+    this.size = ListSize.medium;
     /**
      * [optional] Sets text color of the element.
      */
@@ -161,11 +161,11 @@ const ZListElement = class {
     }
     return (h("div", { class: {
         "z-list-element-inner-container": true,
-        "expanded": this.showInnerContent,
+        expanded: this.showInnerContent,
       } }, h("slot", { name: "inner-content" })));
   }
   render() {
-    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.element && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   get host() { return getElement(this); }
 };