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

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

@@ -1,24 +1,24 @@
 :host {
   display: flex;
-  min-height: calc(var(--space-unit) * 2);
   align-items: start;
+  min-height: calc(var(--space-unit) * 2.5);
   margin-top: var(--space-unit);
   color: var(--color-text05);
-  fill: currentcolor;
+  fill: currentColor;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
   letter-spacing: 0.16px;
 }
 
-:host([status="success"]) {
+:host([status='success']) {
   color: var(--color-text-success);
 }
 
-:host([status="error"]) {
+:host([status='error']) {
   color: var(--color-text-error);
 }
 
-:host([status="warning"]) {
+:host([status='warning']) {
   color: var(--color-warning02);
 }
 
@@ -29,6 +29,5 @@
 :host > z-icon {
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
-
-  margin: calc(var(--space-unit) / 3) var(--space-unit) 0 0;
+  --z-icon-right-margin: var(--space-unit);
 }

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

@@ -1,6 +1,6 @@
-import { h } from "@stencil/core";
-import { ListDividerType, KeyboardCodeEnum } from "../../../beans";
-import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean } from "../../../utils/utils";
+import { h, } from "@stencil/core";
+import { ListDividerType, KeyboardCodeEnum, } from "../../../beans";
+import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean, } from "../../../utils/utils";
 export class ZSelect {
   constructor() {
     /** the id of the input element */
@@ -83,7 +83,9 @@ export class ZSelect {
         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>` +
@@ -98,38 +100,32 @@ export class ZSelect {
   }
   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;
@@ -141,14 +137,12 @@ export class ZSelect {
   }
   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);
@@ -164,7 +158,7 @@ export class ZSelect {
   }
   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;
@@ -176,12 +170,15 @@ export class ZSelect {
       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);
@@ -189,17 +186,17 @@ export class ZSelect {
   }
   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);
@@ -214,32 +211,31 @@ export class ZSelect {
   }
   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()));
   }
   static get is() { return "z-select"; }
   static get encapsulation() { return "scoped"; }
@@ -420,10 +416,10 @@ export class ZSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusEnum",
-          "resolved": "InputStatusEnum.ERROR | InputStatusEnum.SUCCESS | InputStatusEnum.WARNING",
+          "original": "InputStatusBean",
+          "resolved": "\"error\" | \"success\" | \"warning\"",
           "references": {
-            "InputStatusEnum": {
+            "InputStatusBean": {
               "location": "import",
               "path": "../../../beans"
             }

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

@@ -1,84 +1,89 @@
 :host {
   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);
+  font-size: var(--font-size-3);
+  color: var(--color-text02);
 }
 
-.select-wrapper > z-input {
+.selectWrapper > z-input {
   width: 100%;
 }
 
-.select-wrapper > div {
+.selectWrapper > div {
   position: relative;
 }
 
-.select-wrapper > div.closed {
-  overflow: hidden;
+.selectWrapper > div.closed {
   height: 0;
+  overflow: hidden;
 }
 
-.select-wrapper .ul-scroll-wrapper {
+.selectWrapper .ulScrollWrapper {
+  background: var(--color-surface01);
   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);
+  width: 100%;
+  box-sizing: border-box;
   outline: none;
 }
 
-.select-wrapper .closed .ul-scroll-wrapper {
+.selectWrapper .closed .ulScrollWrapper {
   z-index: 10;
 }
 
-.select-wrapper .open .ul-scroll-wrapper {
+.selectWrapper .open .ulScrollWrapper {
   z-index: 20;
 }
 
-.select-wrapper .ul-scroll-wrapper > z-list {
+.selectWrapper .ulScrollWrapper > z-list {
   position: relative;
-  overflow: auto;
-  max-height: 240px;
   padding: calc(var(--space-unit) * 0.5);
+  max-height: 240px;
+  overflow: auto;
   outline: none;
 
   /* Firefox scrollbar */
   scrollbar-color: var(--color-primary01) transparent;
 }
 
-.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar {
+  background: linear-gradient(
+    to right,
+    transparent 0 3px,
+    var(--gray200) 3px 7px,
+    transparent 7px 10px
+  );
   width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
-.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb {
   width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
 }
 
-.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {
+.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
-.select-wrapper .ul-scroll-wrapper z-list z-list-element span {
+.selectWrapper .ulScrollWrapper z-list z-list-element span {
   display: block;
   padding: 0 calc(var(--space-unit) * 1.5);
 }
 
-.select-wrapper .ul-scroll-wrapper z-list z-list-element span.selected {
+.selectWrapper .ulScrollWrapper z-list z-list-element span.selected {
   font-weight: bold;
 }
 
-.select-wrapper .ul-scroll-wrapper .no-results z-icon {
+.selectWrapper .ulScrollWrapper .noResults z-icon {
   margin-right: var(--space-unit);
 }

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

@@ -5,7 +5,7 @@ export class ZList {
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.MEDIUM;
+    this.size = ListSize.medium;
   }
   setChildrenSizeType() {
     const children = this.host.children;
@@ -38,7 +38,7 @@ export class ZList {
         "mutable": false,
         "complexType": {
           "original": "ListSize",
-          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
+          "resolved": "(typeof ListSize)[\"x-large\"] | ListSize.large | ListSize.medium | ListSize.small",
           "references": {
             "ListSize": {
               "location": "import",
@@ -54,7 +54,7 @@ export class ZList {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ListSize.MEDIUM"
+        "defaultValue": "ListSize.medium"
       }
     };
   }

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

@@ -1,6 +1,7 @@
 :host {
-  display: flex;
-  flex-direction: column;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+
+  display: flex;
+  flex-direction: column;
 }

package/dist/collection/components/list/z-list-element/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, KeyboardKeys, ListDividerType, ListSize, } from "../../../beans";
 export class ZListElement {
   /**
@@ -8,7 +8,7 @@ export class ZListElement {
     /**
      * [optional] Align expandable button left or right.
      */
-    this.alignButton = ExpandableListButtonAlign.LEFT;
+    this.alignButton = ExpandableListButtonAlign.left;
     /**
      * [optional] Sets element clickable.
      */
@@ -20,11 +20,11 @@ export class ZListElement {
     /**
      * [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.
      */
@@ -32,11 +32,11 @@ export class ZListElement {
     /**
      * [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.
      */
@@ -131,11 +131,11 @@ export class ZListElement {
     }
     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 }))));
   }
   static get is() { return "z-list-element"; }
   static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ExpandableListButtonAlign",
-          "resolved": "ExpandableListButtonAlign.LEFT | ExpandableListButtonAlign.RIGHT",
+          "resolved": "ExpandableListButtonAlign.left | ExpandableListButtonAlign.right",
           "references": {
             "ExpandableListButtonAlign": {
               "location": "import",
@@ -172,7 +172,7 @@ export class ZListElement {
         },
         "attribute": "align-button",
         "reflect": true,
-        "defaultValue": "ExpandableListButtonAlign.LEFT"
+        "defaultValue": "ExpandableListButtonAlign.left"
       },
       "clickable": {
         "type": "boolean",
@@ -215,7 +215,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ListDividerType",
-          "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
+          "resolved": "ListDividerType.element | ListDividerType.header | ListDividerType.none",
           "references": {
             "ListDividerType": {
               "location": "import",
@@ -231,14 +231,14 @@ export class ZListElement {
         },
         "attribute": "divider-type",
         "reflect": false,
-        "defaultValue": "ListDividerType.NONE"
+        "defaultValue": "ListDividerType.none"
       },
       "dividerSize": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "DividerSize",
-          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
+          "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
           "references": {
             "DividerSize": {
               "location": "import",
@@ -254,7 +254,7 @@ export class ZListElement {
         },
         "attribute": "divider-size",
         "reflect": false,
-        "defaultValue": "DividerSize.SMALL"
+        "defaultValue": "DividerSize.small"
       },
       "expandable": {
         "type": "boolean",
@@ -279,7 +279,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ExpandableListStyle",
-          "resolved": "ExpandableListStyle.ACCORDION | ExpandableListStyle.MENU",
+          "resolved": "ExpandableListStyle.accordion | ExpandableListStyle.menu",
           "references": {
             "ExpandableListStyle": {
               "location": "import",
@@ -295,7 +295,7 @@ export class ZListElement {
         },
         "attribute": "expandable-style",
         "reflect": false,
-        "defaultValue": "ExpandableListStyle.ACCORDION"
+        "defaultValue": "ExpandableListStyle.accordion"
       },
       "listElementId": {
         "type": "number",
@@ -309,7 +309,7 @@ export class ZListElement {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "[optional] List element id."
+          "text": ""
         },
         "attribute": "list-element-id",
         "reflect": true
@@ -319,7 +319,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ListSize",
-          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
+          "resolved": "(typeof ListSize)[\"x-large\"] | ListSize.large | ListSize.medium | ListSize.small",
           "references": {
             "ListSize": {
               "location": "import",
@@ -335,7 +335,7 @@ export class ZListElement {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ListSize.MEDIUM"
+        "defaultValue": "ListSize.medium"
       },
       "color": {
         "type": "string",

package/dist/collection/components/list/z-list-element/styles.css

@@ -8,38 +8,40 @@
   --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;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  box-sizing: border-box;
 }
 
-/* z-list-element size */
+/*z-list-element size*/
 
 :host([size="small"]) > .container {
-  min-height: calc(var(--space-unit) * 4);
   padding: calc(var(--space-unit) / 2) 0;
+  min-height: calc(var(--space-unit) * 4);
 }
 
 :host([size="medium"]) > .container {
-  min-height: calc(var(--space-unit) * 5);
   padding: var(--space-unit) 0;
+  min-height: calc(var(--space-unit) * 5);
 }
 
 :host([size="large"]) > .container {
-  min-height: calc(var(--space-unit) * 7);
   padding: calc(var(--space-unit) * 2) 0;
+  min-height: calc(var(--space-unit) * 7);
 }
 
 :host([size="x-large"]) > .container {
-  min-height: calc(var(--space-unit) * 9);
   padding: calc(var(--space-unit) * 3) 0;
+  min-height: calc(var(--space-unit) * 9);
 }
 
-/* ----------------- */
+/*-----------------*/
 
 :host([expandable]) > .container,
 :host([expandable]) > .container-contextual-menu,
@@ -69,25 +71,45 @@
   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 {
+: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 {
+: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 {
+: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 {
+: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);
 }