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

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-searchbar/index.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { ButtonVariant, ListDividerType } from "../../../beans";
-import { handleKeyboardSubmit, randomId } from "../../../utils/utils";
+import { handleEnterKeydSubmit, randomId } from "../../../utils/utils";
 /**
  * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
  */
@@ -8,7 +8,7 @@ export class ZSearchbar {
   constructor() {
     /** the id of the searchbar element */
     this.htmlid = `searchbar-${randomId()}`;
-    /** Show simple input without submit button */
+    /** Prevent submit action */
     this.preventSubmit = false;
     /** Show autocomplete results */
     this.autocomplete = false;
@@ -20,13 +20,15 @@ export class ZSearchbar {
     this.searchHelperLabel = "Cerca {searchString}";
     /** Sort autocomplete results items */
     this.sortResultsItems = false;
+    /** Show submit button */
+    this.showSearchButton = false;
     this.searchString = "";
     this.currResultsCount = 0;
     this.showResults = false;
     this.resultsItemsList = null;
   }
   emitSearchSubmit() {
-    this.searchSubmit.emit(this.searchString);
+    this.searchSubmit.emit(this.inputRef.value);
   }
   emitSearchTyping(search) {
     this.searchTyping.emit(search);
@@ -130,13 +132,15 @@ export class ZSearchbar {
     this.showResults = false;
   }
   renderInput() {
-    return (h("z-input", { message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.handleSubmit()), value: this.value }));
+    return (h("z-input", { ref: (val) => {
+        this.inputRef = val;
+      }, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => handleEnterKeydSubmit(e, () => this.handleSubmit()), value: this.value }));
   }
   renderButton() {
-    if (this.preventSubmit) {
+    if (!this.showSearchButton) {
       return null;
     }
-    return (h("z-button", { variant: ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
+    return (h("z-button", { disabled: this.preventSubmit, variant: ButtonVariant.PRIMARY, onClick: () => this.handleSubmit() }, "CERCA"));
   }
   renderResults() {
     if (!this.showResults ||
@@ -212,7 +216,7 @@ export class ZSearchbar {
     return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0) }, h("span", { class: "item-show-all" }, h("z-link", null, "Vedi tutti i risultati"))));
   }
   render() {
-    return (h(Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e) }, h("div", { class: { "has-submit": !this.preventSubmit, "has-results": this.autocomplete } }, this.renderInput(), this.renderResults(), this.renderButton())));
+    return (h(Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e) }, h("div", { class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, this.renderInput(), this.renderResults(), this.renderButton())));
   }
   static get is() { return "z-searchbar"; }
   static get encapsulation() { return "shadow"; }
@@ -258,7 +262,7 @@ export class ZSearchbar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Show simple input without submit button"
+          "text": "Prevent submit action"
         },
         "attribute": "prevent-submit",
         "reflect": false,
@@ -426,6 +430,24 @@ export class ZSearchbar {
         "attribute": "sort-results-items",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "showSearchButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show submit button"
+        },
+        "attribute": "show-search-button",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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);
 }
 

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

@@ -1,8 +1,9 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { KeyboardCode } from "../../../beans";
+const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
 /**
- * @slot modalContent - set the content of the modal
  * @slot modalCloseButton - accept custom close button
+ * @slot modalContent - set the content of the modal
  */
 export class ZModal {
   constructor() {
@@ -10,7 +11,6 @@ export class ZModal {
     this.closeButtonLabel = "chiudi modale";
     /** add role "alertdialog" to dialog (optional, default is false) */
     this.alertdialog = false;
-    this.shift = false;
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -21,53 +21,57 @@ export class ZModal {
   emitBackgroundClick() {
     this.modalBackgroundClick.emit({ modalid: this.modalid });
   }
-  /** open modal */
-  async openModal() {
-    this.open();
-  }
-  /** close modal */
-  async closeModal() {
-    this.close();
-  }
   componentDidLoad() {
     this.open();
   }
-  open() {
+  /** open modal */
+  async open() {
     var _a;
     (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
   }
-  close() {
+  /** close modal */
+  async close() {
     var _a;
     (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
   }
-  handleForwardNav(e) {
-    var _a;
-    if (e.code !== KeyboardCode.TAB || this.shift) {
-      return;
-    }
-    if (e.target === this.modalEnd) {
-      (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+  /**
+   * Get a list of focusable elements in the dialog.
+   * Remove elements with `display: none` from the list, because they're not focusable.
+   *
+   * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
+   * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
+   */
+  get focusableElements() {
+    return [
+      ...Array.from(this.host.shadowRoot.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
+      ...Array.from(this.host.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
+    ].filter((element) => getComputedStyle(element).display !== "none");
   }
-  handleBackwardsNav(e) {
-    if (e.code !== KeyboardCode.TAB || !this.shift) {
+  handleKeyDown(e) {
+    if (e.code !== KeyboardCode.TAB) {
       return;
     }
-    if (e.target === this.closeButton) {
-      this.modalEnd.focus();
+    const focusableElements = this.focusableElements;
+    const shadowActiveElement = this.host.shadowRoot.activeElement;
+    const activeElement = this.host.ownerDocument.activeElement;
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {
+      // shift + tab was pressed and current active element is the first focusable element
+      e.preventDefault();
+      lastFocusableElement.focus();
+    }
+    else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {
+      // shift + tab was pressed and current active element is the first focusable element
+      e.preventDefault();
+      firstFocusableElement.focus();
     }
   }
   render() {
-    console.log("render modal - albe pack");
-    return (h(Host, null, h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onKeyDown: (e) => {
-        this.shift = !!e.shiftKey;
-        this.handleBackwardsNav(e);
-      }, onKeyUp: (e) => {
-        this.handleForwardNav(e);
-      } }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close(), ref: (el) => (this.closeButton = el) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }), h("span", { tabindex: 0, class: "modal-end", ref: (el) => (this.modalEnd = el) }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
+    return (h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose() }, h("div", { class: "modal-container", id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content", id: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
         this.emitBackgroundClick();
         this.close();
-      } }))));
+      } })));
   }
   static get is() { return "z-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -143,7 +147,7 @@ export class ZModal {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "aria-label for close button (optional)"
@@ -222,7 +226,7 @@ export class ZModal {
   }
   static get methods() {
     return {
-      "openModal": {
+      "open": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -238,7 +242,7 @@ export class ZModal {
           "tags": []
         }
       },
-      "closeModal": {
+      "close": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -256,4 +260,14 @@ export class ZModal {
       }
     };
   }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -5,7 +5,11 @@
 
 :host > dialog {
   padding: 0;
-  border: none !important;
+  border: none;
+}
+
+:host > dialog::backdrop {
+  display: none;
 }
 
 .modal-background {

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

@@ -44,7 +44,7 @@ export class ZTable {
   }
   renderError(tableClass) {
     const minHeight = this.lines ? `calc(40px * ${this.lines})` : "auto";
-    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("z-body", { class: "error-message", level: 3, variant: "semibold" }, this.errorMessage), h("slot", { name: "error-action" }))))));
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("span", { class: "body-3-sb error-message" }, this.errorMessage), h("slot", { name: "error-action" }))))));
   }
   renderEmpty(tableClass) {
     const buttonSize = this.isMobile ? ButtonSize.SMALL : ButtonSize.BIG;

package/dist/collection/components/z-table/z-table-empty-box/index.js

@@ -11,7 +11,7 @@ export class ZTableEmptyBox {
     this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
   }
   render() {
-    return (h(Host, null, h("z-body", { level: 3, variant: "semibold" }, this.message), h("br", null), !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
+    return (h(Host, null, h("span", { class: "body-3-sb" }, this.message), h("br", null), !!this.subtitle && h("span", { class: "body-4" }, this.subtitle), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
         "cta": true,
         "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
       } }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));

package/dist/collection/snowflakes/myz/list/z-myz-list-item/styles.css

@@ -18,6 +18,25 @@
   line-height: 14px;
 }
 
+:host(.small) li > span {
+  padding: calc(var(--space-unit) * 1.5) 0;
+  font-size: var(--font-size-2);
+}
+
+:host(.x-small) li > span {
+  padding: var(--space-unit) 0;
+  font-size: var(--font-size-2);
+}
+
+:host(.small) li > span > z-icon,
+:host(.x-small) li > span > z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+  --z-icon-right-margin: calc(var(--space-unit) * 0.5);
+
+  padding: 0;
+}
+
 :host li > span.border {
   border-bottom: 2px solid var(--bg-grey-200);
 }

package/dist/collection/utils/utils.js

@@ -40,6 +40,13 @@ export function handleKeyboardSubmit(ev, callback, ...args) {
     callback(...args);
   }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function handleEnterKeydSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
 export function getClickedElement(elem = null) {
   if (!elem) {
     elem = document.activeElement;

package/dist/esm/index-a2ca4b97.js

@@ -1892,10 +1892,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
-        case 'z-app-header_3':
+        case 'z-app-header_2':
           return import(
             /* webpackMode: "lazy" */
-            './z-app-header_3.entry.js').then(processMod, consoleError);
+            './z-app-header_2.entry.js').then(processMod, consoleError);
         case 'z-anchor-navigation':
           return import(
             /* webpackMode: "lazy" */
@@ -1912,6 +1912,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-avatar.entry.js').then(processMod, consoleError);
+        case 'z-body':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-body.entry.js').then(processMod, consoleError);
         case 'z-button-sort':
           return import(
             /* webpackMode: "lazy" */
@@ -1948,6 +1952,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-file-upload.entry.js').then(processMod, consoleError);
+        case 'z-heading':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-heading.entry.js').then(processMod, consoleError);
         case 'z-info-box':
           return import(
             /* webpackMode: "lazy" */
@@ -2172,6 +2180,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-myz-list-item.entry.js').then(processMod, consoleError);
+        case 'z-typography':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-typography.entry.js').then(processMod, consoleError);
         case 'z-link':
           return import(
             /* webpackMode: "lazy" */
@@ -2180,10 +2192,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-list_3.entry.js').then(processMod, consoleError);
-        case 'z-body_2':
-          return import(
-            /* webpackMode: "lazy" */
-            './z-body_2.entry.js').then(processMod, consoleError);
         case 'z-input_2':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-6cf7efe2.js';
-export { n as AlertType, A as AvatarSize, c as ButtonSize, b as ButtonType, B as ButtonVariant, C as CardVariant, Q as CarouselArrowsPosition, R as CarouselProgressMode, M as CoverHeroContentPosition, J as CoverHeroVariant, o as Device, f as DividerOrientation, D as DividerSize, i as ExpandableListButtonAlign, E as ExpandableListStyle, H as InfoRevealPosition, d as InputStatus, I as InputType, e as KeyboardCode, K as KeyboardKeyCode, j as LabelPosition, L as LicenseType, k as ListDividerType, g as ListSize, l as ListType, N as NavigationTabsOrientation, a as NavigationTabsSize, m as NotificationType, O as OffCanvasVariant, p as PocketStatus, P as PopoverPosition, h as Size, S as SortDirection, T as ThemeVariant, q as ToastNotification, s as ToastNotificationPosition, r as ToastNotificationTransition, u as TransitionDirection, t as ZAriaAlertMode, w as ZChipType, y as ZDatePickerMode, z as ZDatePickerModeValue, F as ZDatePickerPosition, v as ZFileUploadType, G as ZRangePickerMode, x as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-968a240f.js';
+import { c as colorFromId } from './utils-f2a0dac2.js';
+export { n as AlertType, A as AvatarSize, c as ButtonSize, b as ButtonType, B as ButtonVariant, C as CardVariant, Q as CarouselArrowsPosition, R as CarouselProgressMode, c as ControlSize, M as CoverHeroContentPosition, J as CoverHeroVariant, o as Device, f as DividerOrientation, D as DividerSize, i as ExpandableListButtonAlign, E as ExpandableListStyle, H as InfoRevealPosition, d as InputStatus, I as InputType, e as KeyboardCode, K as KeyboardKeyCode, j as LabelPosition, L as LicenseType, k as ListDividerType, g as ListSize, l as ListType, N as NavigationTabsOrientation, a as NavigationTabsSize, m as NotificationType, O as OffCanvasVariant, p as PocketStatus, P as PopoverPosition, h as Size, S as SortDirection, T as ThemeVariant, q as ToastNotification, s as ToastNotificationPosition, r as ToastNotificationTransition, u as TransitionDirection, t as ZAriaAlertMode, w as ZChipType, y as ZDatePickerMode, z as ZDatePickerModeValue, F as ZDatePickerPosition, v as ZFileUploadType, G as ZRangePickerMode, x as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-968a240f.js';
 import './breakpoints-c386984e.js';
 
 const UTILS = {