@zanichelli/albe-web-components 17.0.3 → 17.0.5-RC1

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

@@ -3,6 +3,10 @@
   width: inherit;
 }
 
+:host * {
+  box-sizing: border-box;
+}
+
 input::-ms-clear,
 input::-ms-reveal {
   display: none;
@@ -15,26 +19,26 @@ input::-ms-reveal {
 }
 
 input,
-textarea,
-.textarea-wrapper {
-  box-sizing: border-box;
-  border: var(--border-size-small) solid var(--gray700);
+textarea {
   background: var(--color-form-background);
-  border-radius: var(--border-radius-small);
-  color: var(--gray900);
-  fill: var(--gray900);
+  fill: var(--color-form-default-icon);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
   outline: none;
 }
 
+input,
+.textarea-wrapper {
+  border: var(--border-size-small) solid var(--color-form-surface04);
+  border-radius: var(--border-radius-small);
+  color: var(--color-form-default-text);
+}
+
 :host([size="small"]) input,
 :host([size="small"]) textarea,
-:host([size="small"]) .textarea-wrapper,
 :host([size="x-small"]) input,
-:host([size="x-small"]) textarea,
-:host([size="x-small"]) .textarea-wrapper {
+:host([size="x-small"]) textarea {
   font-size: var(--font-size-2);
 }
 
@@ -42,19 +46,32 @@ textarea,
   cursor: pointer;
 }
 
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:not(.readonly):hover {
+  outline: var(--border-size-medium) solid var(--color-form-surface04);
+  outline-offset: -2px;
+}
+
 /* FOCUS */
 :host:not(.active-select) input:focus:focus-visible,
-:host:not([readonly="true"]) .textarea-wrapper:focus-within {
+.textarea-wrapper:focus-within {
+  border-color: var(--color-form-active-primary);
   box-shadow: var(--shadow-focus-primary);
+  color: var(--color-form-active-primary);
 }
 
-input:focus:focus-visible,
-textarea:focus:focus-visible {
-  color: var(--color-primary01);
+:host input:focus:focus-visible:hover,
+.textarea-wrapper:not(.readonly):focus-within:hover {
+  outline-color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible + .icons-wrapper {
+  fill: var(--color-form-active-primary);
 }
 
 :host.active-select input {
-  border: var(--border-size-small) solid var(--color-primary01);
+  border: var(--border-size-small) solid var(--color-form-active-primary);
 }
 
 :host.cursor-select input:focus:focus-visible {
@@ -65,76 +82,80 @@ textarea:focus:focus-visible {
   box-shadow: none;
 }
 
-/* FILLED */
-.filled {
-  border-color: var(--color-surface05);
-}
-
 /* STATUSES (success, warning, error) */
 .input-success {
-  border-color: var(--color-success01);
-  background: var(--color-success-inverse);
-  fill: var(--color-success01);
+  border-color: var(--color-form-success01);
+  background: var(--color-form-inverse-success);
+}
+
+.input-success:focus:focus-visible + .icons-wrapper,
+.input-success + .icons-wrapper {
+  fill: var(--color-form-success01);
 }
 
 .input-error {
-  border-color: var(--color-error01);
-  background: var(--color-error-inverse);
-  fill: var(--color-error01);
+  border-color: var(--color-form-hover-error);
+  background: var(--color-form-inverse-error);
+}
+
+.input-error:focus:focus-visible + .icons-wrapper,
+.input-error + .icons-wrapper {
+  fill: var(--color-form-hover-error);
 }
 
 .input-warning {
-  border-color: var(--color-warning01);
+  border-color: var(--color-form-hover-warning);
   background: var(--color-warning-inverse);
-  fill: var(--color-warning01);
 }
 
-/* HOVER */
-input:not([readonly]):hover,
-.textarea-wrapper:hover {
-  outline: var(--border-size-medium) solid var(--gray700);
-  outline-offset: -2px;
+.input-warning:focus:focus-visible + .icons-wrapper,
+.input-warning + .icons-wrapper {
+  fill: var(--color-form-hover-warning);
+}
+
+:is(.input-success, .input-error, .input-warning):focus:focus-visible {
+  color: var(--color-form-default-text);
 }
 
 /* READONLY */
 :host:not(.active-select) input[readonly],
-.readonly {
-  border-color: var(--color-disabled01);
-  fill: var(--color-disabled01);
+.textarea-wrapper.readonly {
+  border-color: var(--color-form-surface03);
+  fill: var(--color-form-disabled01-icon);
   pointer-events: none;
 }
 
 /* DISABLED */
-:host([disabled]:not([disabled="false"])) input,
-:host([disabled]:not([disabled="false"])) .textarea-wrapper,
-:host([disabled]:not([disabled="false"])) z-icon {
-  border-color: var(--color-disabled01);
+:host([disabled]) input,
+:host([disabled]) .textarea-wrapper,
+:host([disabled]) z-icon {
+  border-color: var(--color-form-disabled03);
   box-shadow: none;
-  color: var(--color-disabled03);
-  fill: var(--color-disabled01);
+  color: var(--color-form-disabled-text);
+  fill: var(--color-form-disabled01-icon);
   pointer-events: none;
 }
 
-:host([disabled]:not([disabled="false"])) input:hover {
+:host([disabled]) input:hover {
   border-width: var(--border-size-small);
 }
 
 /* PLACEHOLDER */
 input::placeholder,
 textarea::placeholder {
-  color: var(--color-text05);
+  color: var(--color-form-placeholder-text);
 }
 
 ::-webkit-textarea-placeholder {
-  color: var(--color-text05);
+  color: var(--color-form-placeholder-text);
 }
 
 :-ms-textarea-placeholder {
-  color: var(--color-text05);
+  color: var(--color-form-placeholder-text);
 }
 
 ::placeholder {
-  color: var(--color-text05);
+  color: var(--color-form-placeholder-text);
 }
 
 /* LABEL */
@@ -149,14 +170,14 @@ label.input-label {
   text-transform: uppercase;
 }
 
-:host([disabled]:not([disabled="false"])) label.input-label {
+:host([disabled]) label.input-label {
   color: var(--color-disabled03);
 }
 
 .text-wrapper > div {
   position: relative;
   z-index: 1;
-  fill: var(--gray900);
+  fill: var(--color-form-default-icon);
 }
 
 .text-wrapper > div > input {
@@ -194,7 +215,8 @@ label.input-label {
   transform: translateY(-50%);
 }
 
-.text-wrapper .icons-wrapper > button.icon-button {
+.text-wrapper .icons-wrapper > button.input-icon {
+  display: flex;
   padding: 0;
   border: 0;
   background: none;
@@ -203,33 +225,33 @@ label.input-label {
   pointer-events: initial;
 }
 
-.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
+.text-wrapper .icons-wrapper > .input-icon + .input-icon {
   margin-left: calc(var(--space-unit) * 0.5);
 }
 
-.text-wrapper .icons-wrapper > button.icon-button.hidden {
+.text-wrapper .icons-wrapper > button.input-icon.hidden {
   display: none;
 }
 
-.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
-.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
+.text-wrapper .icons-wrapper > button.reset-icon,
+.text-wrapper .icons-wrapper > button.toggle-password-icon {
   cursor: pointer;
 }
 
-.text-wrapper .icons-wrapper > button.icon-button > z-icon {
+.text-wrapper .icons-wrapper > .input-icon {
   --z-icon-width: 18px;
   --z-icon-height: 18px;
 
   display: block;
 }
 
-.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
-.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
+.text-wrapper .icons-wrapper > .input-icon.small,
+.text-wrapper .icons-wrapper > .input-icon.x-small {
   --z-icon-width: 16px;
   --z-icon-height: 16px;
 }
 
-.text-wrapper .icons-wrapper > button.icon-button:focus {
+.text-wrapper .icons-wrapper > button.input-icon:focus {
   box-shadow: var(--shadow-focus-primary);
   outline: none !important;
 }
@@ -241,38 +263,38 @@ label.input-label {
 }
 
 .textarea-wrapper {
+  width: 100%;
+  height: 100%;
   padding: calc(var(--space-unit) * 1.5);
-
-  /* Firefox scrollbar */
-  scrollbar-color: var(--color-primary01) transparent;
 }
 
 textarea::-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::-webkit-scrollbar-track {
-  background-color: transparent;
+  width: 6px;
+  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
 }
 
 textarea::-webkit-scrollbar-thumb {
-  width: 10px;
   background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
 }
 
 textarea::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
+/* Firefox scrollbar */
+@supports not selector(textarea::-webkit-scrollbar-track) {
+  textarea {
+    scrollbar-color: var(--color-primary01) transparent;
+  }
+}
+
 textarea {
   width: 100%;
   min-height: 132px;
   padding: 0;
   border: none;
   margin: 0;
+  color: currentcolor;
   resize: none;
 }
 
@@ -282,14 +304,14 @@ textarea {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  color: var(--color-default-text);
-  fill: var(--color-primary01);
+  color: var(--color-form-default-text);
+  fill: var(--color-form-active-primary);
   font-family: var(--font-family-sans);
 }
 
 .radio-wrapper:hover,
 .checkbox-wrapper:hover {
-  color: var(--color-hover-primary);
+  color: var(--color-form-hover-primary);
   fill: currentcolor;
 }
 
@@ -398,12 +420,12 @@ textarea {
 /* disabled */
 .radio-wrapper > input:disabled + .radio-label,
 .checkbox-wrapper > input:disabled + .checkbox-label {
-  color: var(--color-disabled03);
+  color: var(--color-form-disabled-text);
 }
 
 .radio-wrapper > input:disabled + .radio-label > z-icon,
 .checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
   cursor: default;
-  fill: var(--color-disabled01);
+  fill: var(--color-form-disabled01-icon);
 }
 

package/dist/collection/components/z-input-message/index.js

@@ -8,6 +8,7 @@ export class ZInputMessage {
         };
         this.message = undefined;
         this.status = undefined;
+        this.disabled = undefined;
         this.statusRole = {};
     }
     onMessageChange() {
@@ -17,7 +18,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '66961b8e3bdd23c8963737cfc8c1c35741a744c7' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '21068030cc0a3a61a371d1714494fff2ab89fc5f', name: this.statusIcons[this.status] }), h("span", { key: '92d8bb8a483bff313e7ae1e5576847047357fcaa', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: 'f7d15c2c744fbc9f7822a57245d552980e7f36b2' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '1124a2604c6def360993c6a83ce90d5a950e9f7c', name: this.statusIcons[this.status] }), h("span", { key: 'a5186a1bf672e27ef9d85fd47b7f73b71e8f0998', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }
@@ -72,6 +73,23 @@ export class ZInputMessage {
                 },
                 "attribute": "status",
                 "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "input disabled status (optional)"
+                },
+                "attribute": "disabled",
+                "reflect": true
             }
         };
     }

package/dist/collection/components/z-input-message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAOxC,MAAM,OAAO,aAAa;;QAShB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO;YAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW;YACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  onMessageChange(): void {\n    this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        aria-label={this.message}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input-message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAOxC,MAAM,OAAO,aAAa;;QAahB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO;YAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW;YACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  onMessageChange(): void {\n    this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        aria-label={this.message}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-input-message/styles.css

@@ -3,7 +3,7 @@
   min-height: calc(var(--space-unit) * 2.5);
   align-items: start;
   margin-top: var(--space-unit);
-  color: var(--color-text05);
+  color: var(--color-default-text);
   fill: currentcolor;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
@@ -17,15 +17,15 @@
 }
 
 :host([status="success"]) {
-  color: var(--color-text-success);
+  color: var(--color-success01);
 }
 
 :host([status="error"]) {
-  color: var(--color-text-error);
+  color: var(--color-hover-error);
 }
 
 :host([status="warning"]) {
-  color: var(--color-warning02);
+  color: var(--color-hover-warning);
 }
 
 :host(:focus) {
@@ -46,3 +46,8 @@
   --z-icon-height: 14px;
   --z-icon-right-margin: calc(var(--space-unit) * 0.5);
 }
+
+:host([disabled]) {
+  color: var(--color-disabled03);
+  fill: var(--color-disabled03);
+}

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

@@ -45,7 +45,7 @@ z-pagination .pagination-bar button {
   justify-content: center;
   border: none;
   margin: 0;
-  background-color: var(--color-surface03);
+  background-color: var(--color-surface02);
   color: var(--color-primary01);
   cursor: pointer;
   font-family: inherit;
@@ -59,8 +59,7 @@ z-pagination .pagination-bar button {
 }
 
 z-pagination .pagination-bar button:focus-visible {
-  background-color: var(--color-hover-surface);
-  box-shadow: inset var(--shadow-focus-primary);
+  background-color: var(--color-surface01);
   outline: none;
 }
 
@@ -77,9 +76,9 @@ z-pagination .pagination-bar .navigation-button {
 
 z-pagination .pagination-bar .pagination-button:disabled,
 z-pagination .pagination-bar .navigation-button:disabled {
-  background-color: var(--color-disabled01);
   color: var(--color-disabled03);
   cursor: default;
+  fill: var(--color-disabled03);
   pointer-events: none;
 }
 
@@ -117,10 +116,6 @@ z-pagination .pagination-bar .page-button {
   font-weight: var(--font-sb);
 }
 
-z-pagination .pagination-bar .page-button:focus-visible {
-  border-bottom-color: var(--color-hover-light);
-}
-
 z-pagination .pagination-bar .page-button[data-current] {
   border-bottom-color: var(--color-primary01);
   font-size: var(--font-size-7);
@@ -158,7 +153,7 @@ z-pagination .mobile-go-to-page {
   flex: 1 auto;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-surface03);
+  background-color: var(--color-surface02);
 }
 
 z-pagination .mobile-go-to-page z-input {
@@ -181,11 +176,12 @@ z-pagination .mobile-go-to-page > span {
 
 @media (hover: hover) {
   z-pagination .pagination-bar button:hover {
-    background-color: var(--color-hover-surface);
+    background-color: var(--color-surface01);
   }
 
   z-pagination .pagination-bar .page-button:hover {
-    border-bottom-color: var(--color-hover-light);
+    border-bottom-color: var(--color-hover-primary);
+    color: var(--color-hover-primary);
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { boolean, getClickedElement, getElementTree, handleKeyboardSubmit, randomId } from "../../utils/utils";
+import { boolean, containsElement, getClickedElement, handleKeyboardSubmit, randomId } from "../../utils/utils";
 export class ZSelect {
     constructor() {
         this.itemsList = [];
@@ -26,7 +26,6 @@ export class ZSelect {
         this.focusedItemId = undefined;
         this.searchString = undefined;
         this.toggleSelectUl = this.toggleSelectUl.bind(this);
-        this.selectItem = this.selectItem.bind(this);
         this.handleSelectFocus = this.handleSelectFocus.bind(this);
     }
     watchItems() {
@@ -117,20 +116,18 @@ export class ZSelect {
             this.toggleSelectUl();
         }
     }
-    selectItem(item, selected) {
-        if (item && item.disabled) {
+    selectItem(selected) {
+        if (selected === null || selected === void 0 ? void 0 : selected.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)) {
-                i.selected = selected;
-            }
+        this.itemsList.forEach((i) => {
+            i.selected = i.id === (selected === null || selected === void 0 ? void 0 : selected.id);
             return i;
         });
         this.selectedItem = this.itemsList.find((item) => item.selected);
         this.emitOptionSelect();
+        this.toggleSelectUl(true);
         if (this.searchString) {
             this.searchString = null;
         }
@@ -166,10 +163,8 @@ export class ZSelect {
         this.focusSelectItem(index);
     }
     focusSelectItem(index) {
-        const focusElem = this.element.querySelector(`#${this.htmlid}_${index}`);
-        if (focusElem) {
-            focusElem.focus();
-        }
+        var _a;
+        (_a = this.host.querySelector(`#${this.htmlid}_${index}`)) === null || _a === void 0 ? void 0 : _a.focus();
     }
     toggleSelectUl(selfFocusOnClose = false) {
         if (this.disabled || this.readonly) {
@@ -183,22 +178,24 @@ export class ZSelect {
             document.removeEventListener("click", this.handleSelectFocus);
             document.removeEventListener("keyup", this.handleSelectFocus);
             if (selfFocusOnClose) {
-                this.element.querySelector(`#${this.htmlid}_input`).focus();
+                this.host.querySelector(`#${this.htmlid}_input`).focus();
             }
         }
         this.focusedItemId = "";
         this.isOpen = !this.isOpen;
     }
     handleInputClick(e) {
-        const cp = e.composedPath();
-        const clearIcon = cp.find((item) => item.classList && item.classList.contains("reset-icon"));
-        if (clearIcon) {
+        if (e.target.closest(".reset-icon")) {
             e.stopPropagation();
             return;
         }
         this.toggleSelectUl();
     }
     handleSelectFocus(e) {
+        const clickedElement = getClickedElement();
+        if (clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.hasAttribute("disabled")) {
+            return;
+        }
         if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {
             e.stopPropagation();
             return this.toggleSelectUl(true);
@@ -206,18 +203,14 @@ export class ZSelect {
         if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
             return;
         }
-        const tree = getElementTree(getClickedElement());
-        const parent = tree.find((elem) => {
-            return elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`;
-        });
-        if (!parent) {
-            this.toggleSelectUl(e instanceof MouseEvent ? true : false);
+        if (!containsElement(this.host, clickedElement)) {
+            this.toggleSelectUl(e instanceof MouseEvent);
         }
     }
     scrollToLetter(letter) {
-        const foundItem = this.itemsList.find((item) => item.name.charAt(0) === letter);
-        if (foundItem) {
-            this.focusSelectItem(this.itemsList.indexOf(foundItem));
+        const foundItem = this.itemsList.findIndex((item) => item.name.charAt(0) === letter);
+        if (foundItem > -1) {
+            this.focusSelectItem(foundItem);
         }
     }
     renderInput() {
@@ -227,7 +220,7 @@ export class ZSelect {
             }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.ariaLabel, "aria-controls": `${this.htmlid}_list`, "aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "aria-activedescendant": this.isOpen ? this.focusedItemId : "", 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, role: "combobox", size: this.size, onClick: (e) => {
                 this.handleInputClick(e);
             }, onKeyUp: (e) => {
-                if (e.keyCode !== 13) {
+                if (e.key !== KeyboardCode.ENTER) {
                     e.preventDefault();
                 }
                 handleKeyboardSubmit(e, this.toggleSelectUl);
@@ -243,13 +236,12 @@ export class ZSelect {
             } }));
     }
     renderSelectUl() {
-        return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: {
+        return (h("div", { class: this.isOpen ? "open" : "closed" }, h("div", { class: {
                 "ul-scroll-wrapper": true,
                 "fixed": this.isfixed,
-            }, tabindex: "-1" }, h("z-list", { role: "listbox", "aria-label": this.ariaLabel || this.label, tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: `${this.htmlid}_list`, "aria-multiselectable": false, size: this.listSizeType(), class: {
+            } }, h("z-list", { role: "listbox", "aria-label": this.ariaLabel || this.label, tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: `${this.htmlid}_list`, "aria-multiselectable": false, size: this.listSizeType(), class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-                filled: !!this.selectedItem,
                 [`input-${this.status}`]: !this.isOpen && !!this.status,
             } }, this.resetItem && this.renderResetItem(), this.renderSelectUlItems()))));
     }
@@ -265,7 +257,7 @@ export class ZSelect {
             }, onKeyDown: (e) => this.arrowsSelectNav(e, 0) }, h("div", { class: "reset-item-content" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
     }
     renderItem(item, key, lastItem) {
-        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, h("span", { class: {
+        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, h("div", { class: {
                 "selected": !!item.selected,
                 "list-element-content": true,
             }, innerHTML: item.name }), item.icon && h("z-tag", { icon: item.icon }))));
@@ -305,16 +297,16 @@ export class ZSelect {
         });
     }
     renderNoSearchResults() {
-        return (h("z-list-element", { color: "blue500", class: "no-results", size: this.listSizeType() }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+        return (h("z-list-element", { color: "color-primary01", class: "no-results", size: this.listSizeType() }, h("z-icon", { name: "multiply-circle", fill: "color-primary01-icon" }), this.noresultslabel));
     }
     renderMessage() {
         if (boolean(this.message) === false) {
             return;
         }
-        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
+        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '1ad24c71d6838f434592d96047388b0fb3886127', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: 'e6bd4b8c9c016ca713f09226ebe4a81866f6caba', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }
@@ -758,7 +750,7 @@ export class ZSelect {
             }
         };
     }
-    static get elementRef() { return "element"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "items",