@zanichelli/albe-web-components 6.9.0 → 6.9.1

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

@@ -4,7 +4,7 @@ export class ZDragdropArea {
     this.fileDropped.emit(files);
   }
   renderOnDragOverMessage() {
-    return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("z-body", { variant: "semibold", level: 2 }, "Rilascia i file in questa area per allegarli."))));
+    return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("span", { class: "body-2-sb" }, "Rilascia i file in questa area per allegarli."))));
   }
   render() {
     return (h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {

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

@@ -107,7 +107,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", width: 18, height: 18 })));
   }
   renderContent() {
     if (!this.isopen) {
@@ -148,7 +148,7 @@ 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);
   }

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

@@ -13,7 +13,7 @@
   min-height: 42px;
   align-items: center;
   justify-content: space-between;
-  padding: 0 calc(var(--space-unit) * 2);
+  padding: 0 calc(var(--space-unit) * 1.5);
   border: var(--border-size-small) solid var(--bg-grey-700);
   margin: 0;
   background-color: var(--bg-white);
@@ -21,19 +21,27 @@
   cursor: pointer;
 }
 
-:host > div > .header:focus:focus-visible {
-  border: var(--border-size-small) solid var(--blue500);
+:host > div > .header:hover {
+  outline: var(--border-size-medium) solid var(--gray700);
+  outline-offset: -2px;
+}
+
+:host > div.open > div.header:focus:focus-visible {
+  box-shadow: none;
+}
+
+:host > div > div.header:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
   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);
 }
 
@@ -45,7 +53,7 @@
 
 :host > div.open > .header {
   border: var(--border-size-small) solid var(--blue500);
-  border-radius: var(border-radius-small) var(border-radius-small) 0 0;
+  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
 
 :host > div.disabled {
@@ -57,7 +65,7 @@
   fill: var(--color-disabled01);
 }
 
-:host > div.disabled .header > z-body {
+:host > div.disabled .header > p.body-3 {
   color: var(--text-grey-700);
 }
 
@@ -155,5 +163,7 @@
 
 :host > div.open > div.open-combo-data > div.check-all-wrapper {
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  border-bottom: var(--border-size-small) solid var(--gray800);
+  margin-bottom: var(--space-unit);
   text-align: left;
 }

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

@@ -29,8 +29,12 @@ textarea,
   outline: none;
 }
 
+:host.cursor-select input {
+  cursor: pointer;
+}
+
 /* FOCUS */
-input:focus:focus-visible,
+:host:not(.active-select) input:focus:focus-visible,
 .textarea-wrapper:focus-within {
   box-shadow: var(--shadow-focus-primary);
 }
@@ -40,6 +44,19 @@ textarea:focus:focus-visible {
   color: var(--color-primary02);
 }
 
+:host.active-select input {
+  border: var(--border-size-small) solid var(--blue500);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  box-shadow: none;
+  pointer-events: none;
+}
+
 /* FILLED */
 .filled {
   border-color: var(--color-surface05);
@@ -72,7 +89,7 @@ input:hover,
 }
 
 /* READONLY */
-input[readonly],
+:host:not(.active-select) input[readonly],
 .readonly {
   border-color: var(--color-disabled01);
   fill: var(--color-disabled01);
@@ -112,10 +129,6 @@ textarea::placeholder {
   color: var(--color-text05);
 }
 
-:placeholder {
-  color: var(--color-text05);
-}
-
 /* LABEL */
 label.input-label {
   display: block;

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

@@ -17,6 +17,8 @@ export class ZSelect {
     this.autocomplete = false;
     /** no result text message */
     this.noresultslabel = "Nessun risultato";
+    /** When fixed, it occupies space and pushes down next elements. */
+    this.isfixed = false;
     this.isOpen = false;
     this.selectedItem = null;
     this.itemsList = [];
@@ -212,7 +214,10 @@ export class ZSelect {
     }
   }
   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, autocomplete: "off", onClick: (e) => {
+    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) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
         if (e.keyCode !== 13) {
@@ -232,7 +237,10 @@ 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: {
+        "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: {
         disabled: this.disabled,
         readonly: this.readonly,
         filled: !!this.selectedItem,
@@ -281,7 +289,7 @@ 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() {
@@ -565,6 +573,24 @@ export class ZSelect {
         "attribute": "has-group-items",
         "reflect": false
       },
+      "isfixed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When fixed, it occupies space and pushes down next elements."
+        },
+        "attribute": "isfixed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "resetItem": {
         "type": "string",
         "mutable": false,

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

@@ -39,6 +39,10 @@
   z-index: 20;
 }
 
+.select-wrapper .ul-scroll-wrapper.fixed {
+  position: static;
+}
+
 .select-wrapper .ul-scroll-wrapper > z-list {
   position: relative;
   overflow: auto;

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

@@ -1,12 +1,16 @@
-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() {
     /** aria-label for close button (optional) */
-    this.closeButtonLabel = "close modal";
+    this.closeButtonLabel = "chiudi modale";
+    /** add role "alertdialog" to dialog (optional, default is false) */
+    this.alertdialog = false;
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -17,8 +21,57 @@ export class ZModal {
   emitBackgroundClick() {
     this.modalBackgroundClick.emit({ modalid: this.modalid });
   }
+  componentDidLoad() {
+    this.open();
+  }
+  /** open modal */
+  async open() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
+  }
+  /** close modal */
+  async close() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+  }
+  /**
+   * 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");
+  }
+  handleKeyDown(e) {
+    if (e.code !== KeyboardCode.TAB) {
+      return;
+    }
+    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() {
-    return (h(Host, null, h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", null, this.modaltitle), this.modalsubtitle && h("h2", null, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })));
+    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"; }
@@ -94,14 +147,32 @@ export class ZModal {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "aria-label for close button (optional)"
         },
         "attribute": "close-button-label",
         "reflect": false,
-        "defaultValue": "\"close modal\""
+        "defaultValue": "\"chiudi modale\""
+      },
+      "alertdialog": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "add role \"alertdialog\" to dialog (optional, default is false)"
+        },
+        "attribute": "alertdialog",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -153,4 +224,50 @@ export class ZModal {
         }
       }];
   }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "open modal",
+          "tags": []
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "close modal",
+          "tags": []
+        }
+      }
+    };
+  }
+  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

@@ -1,19 +1,17 @@
 :host {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  justify-content: center;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
+:host > dialog {
+  padding: 0;
+  border: none;
+}
+
+:host > dialog::backdrop {
+  display: none;
+}
+
 .modal-background {
   position: fixed;
   top: 0;

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

@@ -1892,10 +1892,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
-        case 'z-app-header_11':
+        case 'z-app-header_2':
           return import(
             /* webpackMode: "lazy" */
-            './z-app-header_11.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" */
@@ -2052,6 +2060,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-section-title.entry.js').then(processMod, consoleError);
+        case 'z-select':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-select.entry.js').then(processMod, consoleError);
         case 'z-skip-to-content':
           return import(
             /* webpackMode: "lazy" */
@@ -2136,10 +2148,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-chip.entry.js').then(processMod, consoleError);
-        case 'z-dragdrop-area_3':
+        case 'z-dragdrop-area_2':
           return import(
             /* webpackMode: "lazy" */
-            './z-dragdrop-area_3.entry.js').then(processMod, consoleError);
+            './z-dragdrop-area_2.entry.js').then(processMod, consoleError);
         case 'z-ghost-loading':
           return import(
             /* webpackMode: "lazy" */
@@ -2168,14 +2180,30 @@ 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" */
             './z-link.entry.js').then(processMod, consoleError);
+        case 'z-list_3':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-list_3.entry.js').then(processMod, consoleError);
+        case 'z-input_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-input_2.entry.js').then(processMod, consoleError);
         case 'z-popover':
           return import(
             /* webpackMode: "lazy" */
             './z-popover.entry.js').then(processMod, consoleError);
+        case 'z-divider':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-divider.entry.js').then(processMod, consoleError);
         case 'z-button':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { c as colorFromId } from './utils-5445d989.js';
+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 './breakpoints-c386984e.js';