@zanichelli/albe-web-components 6.10.0-RC1 → 6.10.0

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -92,10 +92,10 @@ export class ZFileUpload {
     return errors;
   }
   renderTitle() {
-    return (h("z-heading", { id: "title", variant: "semibold", level: 2 }, this.mainTitle));
+    return (h("h2", { class: "heading-2-sb", id: "title" }, this.mainTitle));
   }
-  renderDescription(variant, level) {
-    return (h("z-body", { variant: variant, level: level }, this.description));
+  renderDescription(cssClass) {
+    return h("span", { class: cssClass }, this.description);
   }
   renderAllowedFileExtensions() {
     let fileFormatString = "";
@@ -111,10 +111,10 @@ export class ZFileUpload {
       fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
     }
     const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
-    return h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
+    return h("span", { class: "body-3" }, fileFormatString || fileWeightString ? finalString : null);
   }
   renderFileSection() {
-    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
+    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("h4", { class: "heading-4-sb" }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
   }
   renderInput() {
     return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -133,17 +133,17 @@ export class ZFileUpload {
   renderUploadLink() {
     return [
       this.renderInput(),
-      h("z-body", { class: "upload-link-text", variant: "regular", level: 1 }, "Trascinalo qui o", " ", h("z-body", { tabIndex: 0, class: "upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
+      h("span", { class: "body-1 upload-link-text" }, "Trascinalo qui o", " ", h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
           if (e.code == "Space" || e.code == "Enter") {
             e.preventDefault();
             this.input.click();
           }
-        }, variant: "semibold", level: 1, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
+        }, ref: (val) => (this.uploadLink = val) }, "caricalo"), " ", "dal tuo computer"),
     ];
   }
   renderDefaultMode() {
     return [
-      this.renderDescription("semibold", 3),
+      this.renderDescription("body-3-sb"),
       this.renderAllowedFileExtensions(),
       this.renderFileSection(),
       this.renderUploadButton(),
@@ -152,7 +152,7 @@ export class ZFileUpload {
   renderDragDropMode() {
     return [
       this.renderFileSection(),
-      h("z-dragdrop-area", null, h("div", { class: "text-container" }, this.renderDescription("regular", 1), this.renderUploadLink(), this.renderAllowedFileExtensions())),
+      h("z-dragdrop-area", null, h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFileExtensions())),
     ];
   }
   formatErrorString(key, value) {
@@ -162,7 +162,7 @@ export class ZFileUpload {
   }
   handleErrorModalContent() {
     return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
-      return (h("z-body", { variant: "regular", level: 3 }, this.formatErrorString(key, value)));
+      return h("span", { class: "body-3" }, this.formatErrorString(key, value));
     })))));
   }
   render() {

package/dist/collection/components/file-upload/z-file-upload/styles.css

@@ -28,7 +28,7 @@
   margin: auto;
 }
 
-:host .text-container z-body {
+:host .text-container .body-1 {
   text-align: center;
 }
 
@@ -59,7 +59,7 @@ input#file-elem {
   display: none;
 }
 
-:host > .container > .files-container > z-heading {
+:host > .container > .files-container > .heading-4-sb {
   display: inline-block;
   margin: calc(var(--space-unit) * 3) 0;
 }

package/dist/collection/components/inputs/z-combobox/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { InputType, KeyboardKeyCode, ListDividerType } from "../../../beans";
+import { InputType, KeyboardKeyCode, ListDividerType, ControlSize } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
   constructor() {
@@ -23,6 +23,8 @@ export class ZCombobox {
     this.uncheckalltext = "Deseleziona tutti";
     /** max number of checkable items (0 = unlimited) */
     this.maxcheckableitems = 0;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ControlSize.BIG;
     this.renderItemsList = []; // used for render only
     this.itemsList = [];
     this.inputType = InputType.TEXT;
@@ -107,7 +109,7 @@ export class ZCombobox {
         if (ev.keyCode === KeyboardKeyCode.SPACE) {
           ev.preventDefault();
         }
-      }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("z-body", { level: 3, component: "p" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", width: 18, height: 18 })));
+      }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
   }
   renderContent() {
     if (!this.isopen) {
@@ -122,7 +124,7 @@ export class ZCombobox {
     return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
   }
   renderItem(item, index, length) {
-    return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+    return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1, class: this.size }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
   }
   renderList(items) {
     if (!items) {
@@ -148,12 +150,12 @@ export class ZCombobox {
       return group;
     }, {});
     const listGroups = Object.entries(newData).map(([key, value]) => {
-      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
+      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
     });
     return h("ul", null, listGroups);
   }
   renderNoSearchResults() {
-    return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
+    return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
   }
   renderCloseButton() {
     return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
@@ -162,7 +164,7 @@ export class ZCombobox {
     if (!this.isopen) {
       return;
     }
-    return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, onInputChange: (e) => {
+    return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
         if (e.detail.keycode === 27) {
           return this.closeFilterItems();
         }
@@ -174,7 +176,7 @@ export class ZCombobox {
       return;
     }
     const allChecked = this.selectedCounter === this.itemsList.length;
-    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length })));
+    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
   }
   render() {
     return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
@@ -496,6 +498,29 @@ export class ZCombobox {
         },
         "attribute": "hasgroupitems",
         "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ControlSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
+          "references": {
+            "ControlSize": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "ControlSize.BIG"
       }
     };
   }

package/dist/collection/components/inputs/z-combobox/styles.css

@@ -21,6 +21,20 @@
   cursor: pointer;
 }
 
+:host([size="small"]) > div > .header {
+  min-height: 34px;
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) > div > .header {
+  min-height: 30px;
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) > div > .header p.body-3 {
+  padding: calc(var(--space-unit) * 0.5) 0;
+}
+
 :host > div > .header:hover {
   outline: var(--border-size-medium) solid var(--gray700);
   outline-offset: -2px;
@@ -35,13 +49,13 @@
   outline: none;
 }
 
-:host > div > .header > z-body {
+:host > div > .header > p.body-3 {
   padding: var(--space-unit) 0;
   margin: 0;
   color: var(--text-grey-800);
 }
 
-:host > div > .header > z-body > span {
+:host > div > .header > p.body-3 > span {
   font-weight: var(--font-sb);
 }
 
@@ -51,6 +65,12 @@
   transition: all 200ms linear;
 }
 
+:host > div > .header > z-icon.small,
+:host > div > .header > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
 :host > div.open > .header {
   border: var(--border-size-small) solid var(--blue500);
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
@@ -65,7 +85,7 @@
   fill: var(--color-disabled01);
 }
 
-:host > div.disabled .header > z-body {
+:host > div.disabled .header > p.body-3 {
   color: var(--text-grey-700);
 }
 
@@ -167,3 +187,11 @@
   margin-bottom: var(--space-unit);
   text-align: left;
 }
+
+:host([size="small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
+}
+
+:host([size="x-small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+  padding: var(--space-unit) calc(var(--space-unit) * 0.5);
+}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { InputType, LabelPosition } from "../../../beans";
+import { Host } from "@stencil/core/internal";
+import { InputType, LabelPosition, ControlSize } from "../../../beans";
 import { boolean, randomId } from "../../../utils/utils";
 export class ZInput {
   constructor() {
@@ -21,6 +22,8 @@ export class ZInput {
     this.labelPosition = LabelPosition.RIGHT;
     /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ControlSize.BIG;
     this.isTyping = false;
     this.passwordHidden = true;
     this.typingtimeout = 300;
@@ -158,22 +161,22 @@ export class ZInput {
     if (!this.icon) {
       return;
     }
-    return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
+    return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon, class: this.size })));
   }
   renderResetIcon() {
     if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
       return;
     }
-    return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
+    return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply", class: this.size })));
   }
   renderShowHidePassword() {
-    return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled" })));
+    return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
   }
   renderMessage() {
     if (boolean(this.message) === false) {
       return;
     }
-    return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
+    return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
   }
   /* END text/password/email/number */
   /* START textarea */
@@ -193,7 +196,7 @@ export class ZInput {
         "checkbox-label": true,
         "after": this.labelPosition === LabelPosition.RIGHT,
         "before": this.labelPosition === LabelPosition.LEFT,
-      } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
+      } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
   /* START radio */
@@ -202,20 +205,25 @@ export class ZInput {
         "radio-label": true,
         "after": this.labelPosition === LabelPosition.RIGHT,
         "before": this.labelPosition === LabelPosition.LEFT,
-      } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
+      } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END radio */
   render() {
+    let input;
     switch (this.type) {
       case InputType.TEXTAREA:
-        return this.renderTextarea();
+        input = this.renderTextarea();
+        break;
       case InputType.CHECKBOX:
-        return this.renderCheckbox();
+        input = this.renderCheckbox();
+        break;
       case InputType.RADIO:
-        return this.renderRadio();
+        input = this.renderRadio();
+        break;
       default:
-        return this.renderInputText(this.type);
+        input = this.renderInputText(this.type);
     }
+    return h(Host, null, input);
   }
   static get is() { return "z-input"; }
   static get encapsulation() { return "scoped"; }
@@ -628,6 +636,29 @@ export class ZInput {
         },
         "attribute": "pattern",
         "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ControlSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
+          "references": {
+            "ControlSize": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "ControlSize.BIG"
       }
     };
   }

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

@@ -29,6 +29,15 @@ textarea,
   outline: none;
 }
 
+: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 {
+  font-size: var(--font-size-2);
+}
+
 :host.cursor-select input {
   cursor: pointer;
 }
@@ -159,6 +168,14 @@ label.input-label {
   margin: 0;
 }
 
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
 .text-wrapper > div > input.has-icon,
 .text-wrapper > div > input.has-clear-icon {
   padding-right: calc(var(--space-unit) * 5.25);
@@ -203,6 +220,12 @@ label.input-label {
   display: block;
 }
 
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
 /* Disable background color webkit */
 /* stylelint-disable property-no-vendor-prefix */
 .text-wrapper > div > input:-webkit-autofill,
@@ -299,6 +322,28 @@ textarea {
   fill: inherit;
 }
 
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
 .radio-wrapper .radio-label.after,
 .checkbox-wrapper .checkbox-label.after {
   flex-direction: row;
@@ -319,6 +364,20 @@ textarea {
   margin-right: var(--space-unit);
 }
 
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
 /* focus */
 .radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
 .checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {

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

@@ -10,6 +10,12 @@
   letter-spacing: 0.16px;
 }
 
+:host(.small),
+:host(.x-small) {
+  margin-top: calc(var(--space-unit) * 0.5);
+  font-size: var(--font-size-1);
+}
+
 :host([status="success"]) {
   color: var(--color-text-success);
 }
@@ -30,4 +36,13 @@
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
   --z-icon-right-margin: var(--space-unit);
+
+  margin-top: calc(var(--space-unit) * 0.25);
+}
+
+:host(.small) > z-icon,
+:host(.x-small) > z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+  --z-icon-right-margin: calc(var(--space-unit) * 0.5);
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ListDividerType, KeyboardCode } from "../../../beans";
+import { ListDividerType, KeyboardCode, ControlSize, ListSize } from "../../../beans";
 import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean } from "../../../utils/utils";
 export class ZSelect {
   constructor() {
@@ -19,6 +19,8 @@ export class ZSelect {
     this.noresultslabel = "Nessun risultato";
     /** When fixed, it occupies space and pushes down next elements. */
     this.isfixed = false;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ControlSize.BIG;
     this.isOpen = false;
     this.selectedItem = null;
     this.itemsList = [];
@@ -217,7 +219,7 @@ export class ZSelect {
     return (h("z-input", { class: {
         "active-select": this.isOpen,
         "cursor-select": !this.autocomplete,
-      }, 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, autocomplete: "off", onClick: (e) => {
+      }, 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, autocomplete: "off", size: this.size, onClick: (e) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
         if (e.keyCode !== 13) {
@@ -240,7 +242,7 @@ export class ZSelect {
     return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: {
         "ul-scroll-wrapper": true,
         "fixed": this.isfixed,
-      }, 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: {
+      }, 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, size: this.listSizeType(), class: {
         disabled: this.disabled,
         readonly: this.readonly,
         filled: !!this.selectedItem,
@@ -252,18 +254,24 @@ export class ZSelect {
         "hide": !this.selectedItem || !this.resetItem,
         "reset-item": true,
         "reset-item-margin": !this.hasGroupItems,
-      }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: "option", tabindex: "0", "aria-selected": "false", id: `${this.htmlid}_${this.resetItem ? "0" : "none"}`, onClickItem: () => {
+      }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: "option", tabindex: "0", "aria-selected": "false", id: `${this.htmlid}_${this.resetItem ? "0" : "none"}`, size: this.listSizeType(), onClickItem: () => {
         this.selectedItem = null;
         this.searchString = null;
         this.emitResetSelect();
       }, 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, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, 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, id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: {
         "selected": !!item.selected,
         "list-element-content": true,
       }, innerHTML: item.name })));
   }
+  listSizeType() {
+    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {
+      return ListSize.SMALL;
+    }
+    return ListSize.MEDIUM;
+  }
   renderSelectUlItems() {
     if (!this.itemsList.length) {
       return this.renderNoSearchResults();
@@ -289,17 +297,17 @@ export class ZSelect {
       return group;
     }, {});
     return Object.entries(newData).map(([key, value]) => {
-      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
+      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
     });
   }
   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: "no-results", size: this.listSizeType() }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), 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 }));
+    return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
   }
   render() {
     return (h("div", { class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
@@ -607,6 +615,29 @@ export class ZSelect {
         },
         "attribute": "reset-item",
         "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ControlSize",
+          "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL",
+          "references": {
+            "ControlSize": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "ControlSize.BIG"
       }
     };
   }

package/dist/collection/components/inputs/z-select/styles.css

@@ -7,6 +7,11 @@
   font-weight: var(--font-rg);
 }
 
+:host([size="small"]),
+:host([size="x-small"]) {
+  font-size: var(--font-size-2);
+}
+
 .select-wrapper > z-input {
   width: 100%;
 }
@@ -76,6 +81,10 @@
 
 .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-content {
   display: block;
+  padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
+}
+
+:host([size="x-small"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-content {
   padding: 0 calc(var(--space-unit) * 1.5);
 }