@zanichelli/albe-web-components 6.0.1 → 6.0.3

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [6.0.3](https://github.com/ZanichelliEditore/design-system/compare/v6.0.2...v6.0.3) (2022-11-02)
+
+
+### Bug Fixes
+
+* type prop handing and console error ([d01d9c3](https://github.com/ZanichelliEditore/design-system/commit/d01d9c3ec97560a174b3f1dfb3f1111bf9be1277))
+
+### [6.0.2](https://github.com/ZanichelliEditore/design-system/compare/v6.0.1...v6.0.2) (2022-10-28)
+
+
+### Bug Fixes
+
+* @Element console error ([2b79dcc](https://github.com/ZanichelliEditore/design-system/commit/2b79dcc19aa3725794bcdc0f129e8513609d75fa))
+* added file to prevent stencil import errors ([d21e1ff](https://github.com/ZanichelliEditore/design-system/commit/d21e1ff3c8c71e4f5c41ef5830e00aea1fbfef19))
+* remove last HostElement ([7f136e0](https://github.com/ZanichelliEditore/design-system/commit/7f136e0459b3093bc5ac7478006d3b9304c750a4))
+* restore current version ([5c364ae](https://github.com/ZanichelliEditore/design-system/commit/5c364ae0be1afe9e257a9e046c16fc9cb26a8261))
+* tests ([c96570d](https://github.com/ZanichelliEditore/design-system/commit/c96570dc027fad19ab72b9003ad21d74c2001329))
+* z-carousel return type ([117b7b8](https://github.com/ZanichelliEditore/design-system/commit/117b7b82b14287056e10173c6ef6006e71fe487f))
+* z-popover Storybook docs ([4e4e12f](https://github.com/ZanichelliEditore/design-system/commit/4e4e12ff04206ee72fb5f4d330c0ee5c8a00e54a))
+
+### [6.0.1-rc4](https://github.com/ZanichelliEditore/design-system/compare/v6.0.0...v6.0.1-rc4) (2022-10-27)
+
+
+### Bug Fixes
+
+* remove hostElement, set ariaLabel prop as not optional ([0dfaa44](https://github.com/ZanichelliEditore/design-system/commit/0dfaa44c498a10b07ee95e833c8b46558b4d8716))
+
 ### [6.0.1](https://github.com/ZanichelliEditore/design-system/compare/v6.0.0...v6.0.1) (2022-10-28)
 
 

package/dist/cjs/z-app-header.cjs.entry.js

@@ -113,7 +113,7 @@ const ZAppHeader = class {
     }
   }
   render() {
-    return (index.h(index.Host, { "menu-length": this.menuLength }, index.h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { class: "hero-container" }, index.h("slot", { name: "hero" }, this.hero && (index.h("img", { alt: "", src: this.hero })))), index.h("div", { class: "heading-container" }, index.h("div", { class: "heading-title" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("slot", { name: "title" })), index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "subtitle" }))), index.h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (index.h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), index.h("div", { class: "drawer-container" }, index.h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), index.h("div", { class: "drawer-panel" }, index.h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, index.h("z-icon", { name: "close" })), index.h("div", { class: "drawer-content" }, this.drawerOpen && (index.h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this.stucked && (index.h("div", { class: "heading-stucked" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("div", { class: "heading-title" }, index.h("slot", { name: "stucked-title" }, this.title))))));
+    return (index.h(index.Host, { "menu-length": this.menuLength }, index.h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { class: "hero-container" }, index.h("slot", { name: "hero" }, this.hero && (index.h("img", { alt: "", src: this.hero })))), index.h("div", { class: "heading-container" }, index.h("div", { class: "heading-title" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("slot", { name: "title" })), index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "subtitle" }))), index.h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), index.h("div", { class: "drawer-container" }, index.h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), index.h("div", { class: "drawer-panel" }, index.h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, index.h("z-icon", { name: "close" })), index.h("div", { class: "drawer-content" }, this.drawerOpen && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (index.h("div", { class: "heading-stucked" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("div", { class: "heading-title" }, index.h("slot", { name: "stucked-title" }, this.title))))));
   }
   openDrawer() {
     this.drawerOpen = true;

package/dist/cjs/z-app-switcher_9.cjs.entry.js

@@ -110,6 +110,8 @@ const ZInput = class {
     this.inputCheck = index.createEvent(this, "inputCheck", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-button.cjs.entry.js

@@ -10,6 +10,8 @@ const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-i
 const ZButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */

package/dist/cjs/z-date-picker.cjs.entry.js

@@ -314,6 +314,8 @@ const ZDatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dateSelect = index.createEvent(this, "dateSelect", 7);
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = index$1.ZDatePickerMode.DATE;
     this.flatpickrPosition = index$1.ZDatePickerPosition.BOTTOM;

package/dist/cjs/z-file-upload.cjs.entry.js

@@ -46,6 +46,8 @@ const ZFileUpload = class {
   }
   componentWillLoad() {
     this.invalidFiles = new Map();
+  }
+  componentWillRender() {
     if (this.type === index$1.ZFileUploadType.DRAGDROP && utils.getDevice() !== index$1.Device.DESKTOP) {
       this.type = index$1.ZFileUploadType.DEFAULT;
     }
@@ -65,9 +67,7 @@ const ZFileUpload = class {
       lastFile.focus();
     }
     else {
-      this.type === index$1.ZFileUploadType.DEFAULT
-        ? this.button.shadowRoot.querySelector("button").focus()
-        : this.uploadLink.focus();
+      this.type === index$1.ZFileUploadType.DEFAULT ? this.button.querySelector("button").focus() : this.uploadLink.focus();
     }
   }
   checkFiles(files) {

package/dist/cjs/z-input-deprecated.cjs.entry.js

@@ -19,6 +19,8 @@ const ZInputDeprecated = class {
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-input-label_2.cjs.entry.js

@@ -29,6 +29,8 @@ const ZSelect = class {
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-myz-card-icon.cjs.entry.js

@@ -11,6 +11,8 @@ const ZMyzCardIcon = class {
     index.registerInstance(this, hostRef);
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (index.h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", null, index.h("z-icon", { name: this.icon, width: 16, height: 16 }))));

package/dist/cjs/z-pagination-page.cjs.entry.js

@@ -15,6 +15,8 @@ const ZPaginationPage = class {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (index.h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));

package/dist/collection/components/buttons/z-button/index.js

@@ -5,6 +5,8 @@ import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
  */
 export class ZButton {
   constructor() {
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
@@ -52,13 +54,14 @@ export class ZButton {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "defines a string value that labels an interactive element, used for accessibility."
         },
         "attribute": "aria-label",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"\""
       },
       "href": {
         "type": "string",

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -6,6 +6,8 @@ import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans"
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
   constructor() {
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = ZDatePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
@@ -199,13 +201,14 @@ export class ZDatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "z-input aria label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "label": {
         "type": "string",

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

@@ -36,6 +36,8 @@ export class ZFileUpload {
   }
   componentWillLoad() {
     this.invalidFiles = new Map();
+  }
+  componentWillRender() {
     if (this.type === ZFileUploadType.DRAGDROP && getDevice() !== Device.DESKTOP) {
       this.type = ZFileUploadType.DEFAULT;
     }
@@ -55,9 +57,7 @@ export class ZFileUpload {
       lastFile.focus();
     }
     else {
-      this.type === ZFileUploadType.DEFAULT
-        ? this.button.shadowRoot.querySelector("button").focus()
-        : this.uploadLink.focus();
+      this.type === ZFileUploadType.DEFAULT ? this.button.querySelector("button").focus() : this.uploadLink.focus();
     }
   }
   checkFiles(files) {

package/dist/collection/components/index.js

@@ -0,0 +1,8 @@
+//
+// Temp workaround:
+//
+// Empty file to prevent errors when importing beans in stencil apps
+// Stencil apps with React bindings will not work
+//
+// Must be fixed
+//

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

@@ -5,6 +5,8 @@ export class ZInput {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -310,13 +312,14 @@ export class ZInput {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",
@@ -487,7 +490,12 @@ export class ZInput {
         "complexType": {
           "original": "LabelPosition",
           "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
-          "references": {}
+          "references": {
+            "LabelPosition": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": true,

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

@@ -5,6 +5,8 @@ export class ZSelect {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -338,13 +340,14 @@ export class ZSelect {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "disabled": {
         "type": "boolean",

package/dist/collection/components/navigation/tabs/z-navigation-tab/index.js

@@ -113,7 +113,12 @@ export class ZNavigationTab {
         "complexType": {
           "original": "NavigationTabsOrientation",
           "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
-          "references": {}
+          "references": {
+            "NavigationTabsOrientation": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -131,7 +136,12 @@ export class ZNavigationTab {
         "complexType": {
           "original": "NavigationTabsSize",
           "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
-          "references": {}
+          "references": {
+            "NavigationTabsSize": {
+              "location": "import",
+              "path": "../../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/navigation/z-app-header/index.js

@@ -109,7 +109,7 @@ export class ZAppHeader {
     }
   }
   render() {
-    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
+    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
   }
   openDrawer() {
     this.drawerOpen = true;

package/dist/collection/deprecated/pagination/z-pagination-page/index.js

@@ -7,6 +7,8 @@ export class ZPaginationPage {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
@@ -122,13 +124,14 @@ export class ZPaginationPage {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "aria-label string"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/deprecated/z-input-deprecated/index.js

@@ -5,6 +5,8 @@ export class ZInputDeprecated {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -335,13 +337,14 @@ export class ZInputDeprecated {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js

@@ -3,6 +3,8 @@ export class ZMyzCardIcon {
   constructor() {
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", null, h("z-icon", { name: this.icon, width: 16, height: 16 }))));
@@ -65,13 +67,14 @@ export class ZMyzCardIcon {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "description of the icon"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/esm/z-app-header.entry.js

@@ -109,7 +109,7 @@ const ZAppHeader = class {
     }
   }
   render() {
-    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
+    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
   }
   openDrawer() {
     this.drawerOpen = true;

package/dist/esm/z-app-switcher_9.entry.js

@@ -106,6 +106,8 @@ const ZInput = class {
     this.inputCheck = createEvent(this, "inputCheck", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-button.entry.js

@@ -6,6 +6,8 @@ const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-i
 const ZButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */

package/dist/esm/z-date-picker.entry.js

@@ -310,6 +310,8 @@ const ZDatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dateSelect = createEvent(this, "dateSelect", 7);
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = ZDatePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;

package/dist/esm/z-file-upload.entry.js

@@ -42,6 +42,8 @@ const ZFileUpload = class {
   }
   componentWillLoad() {
     this.invalidFiles = new Map();
+  }
+  componentWillRender() {
     if (this.type === ZFileUploadType.DRAGDROP && getDevice() !== Device.DESKTOP) {
       this.type = ZFileUploadType.DEFAULT;
     }
@@ -61,9 +63,7 @@ const ZFileUpload = class {
       lastFile.focus();
     }
     else {
-      this.type === ZFileUploadType.DEFAULT
-        ? this.button.shadowRoot.querySelector("button").focus()
-        : this.uploadLink.focus();
+      this.type === ZFileUploadType.DEFAULT ? this.button.querySelector("button").focus() : this.uploadLink.focus();
     }
   }
   checkFiles(files) {

package/dist/esm/z-input-deprecated.entry.js

@@ -15,6 +15,8 @@ const ZInputDeprecated = class {
     this.optionSelect = createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-input-label_2.entry.js

@@ -25,6 +25,8 @@ const ZSelect = class {
     this.optionSelect = createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-myz-card-icon.entry.js

@@ -7,6 +7,8 @@ const ZMyzCardIcon = class {
     registerInstance(this, hostRef);
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", null, h("z-icon", { name: this.icon, width: 16, height: 16 }))));

package/dist/esm/z-pagination-page.entry.js

@@ -11,6 +11,8 @@ const ZPaginationPage = class {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));

package/dist/types/components/buttons/z-button/index.d.ts

@@ -5,7 +5,7 @@ import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
 export declare class ZButton {
   hostElement: HTMLZButtonElement;
   /** defines a string value that labels an interactive element, used for accessibility. */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */
   href?: string;
   /** HTML a target attribute. */

package/dist/types/components/buttons/z-toggle-switch/index.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
 import { LabelPosition } from "../../../beans";
-import { HostElement } from "../../../stencil-public-runtime";
 export declare class ZToggleSwitch {
   /** Disabled flag */
   disabled?: boolean;
@@ -14,5 +13,5 @@ export declare class ZToggleSwitch {
   toggleClick: EventEmitter;
   private emitToggleClick;
   private handleClick;
-  render(): HostElement;
+  render(): HTMLZToggleSwitchElement;
 }

package/dist/types/components/date-picker/z-date-picker/index.d.ts

@@ -5,7 +5,7 @@ export declare class ZDatePicker {
   /** unique id */
   datePickerId: string;
   /** z-input aria label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** z-input label */
   label?: string;
   /** [Optional] datepicker mode: date, datetime, only months */

package/dist/types/components/file-upload/z-file/index.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { HostElement } from "../../../stencil-public-runtime";
 export declare class ZFile {
   private icon;
   private ellipsis?;
@@ -19,5 +18,5 @@ export declare class ZFile {
   onInteractiveIconClick(): void;
   componentDidLoad(): void;
   private elementHasEllipsis;
-  render(): HostElement;
+  render(): HTMLZFileElement;
 }

package/dist/types/components/file-upload/z-file-upload/index.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import { HostElement } from "../../../stencil-public-runtime";
 import { ButtonVariant, ZFileUploadType } from "../../../beans";
 export declare class ZFileUpload {
   /** Prop indicating the file upload type - can be default or dragdrop */
@@ -30,6 +29,7 @@ export declare class ZFileUpload {
   fileDroppedListener(e: CustomEvent): void;
   componentDidUpdate(): void;
   componentWillLoad(): void;
+  componentWillRender(): void;
   /** Emitted when user select one or more files */
   fileInput: EventEmitter;
   private fileInputHandler;
@@ -48,5 +48,5 @@ export declare class ZFileUpload {
   private renderDragDropMode;
   private formatErrorString;
   private handleErrorModalContent;
-  render(): HostElement;
+  render(): HTMLZFileUploadElement;
 }

package/dist/types/components/inputs/z-input/index.d.ts

@@ -11,7 +11,7 @@ export declare class ZInput {
   /** the input label */
   label?: string;
   /** the input aria-label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** the input value */
   value?: string;
   /** the input is disabled */

package/dist/types/components/inputs/z-input-message/index.d.ts

@@ -1,4 +1,3 @@
-import { HostElement } from "../../../stencil-public-runtime";
 import { InputStatus } from "../../../beans";
 export declare class ZInputMessage {
   /** input helper message */
@@ -6,5 +5,5 @@ export declare class ZInputMessage {
   /** input status (optional) */
   status?: InputStatus;
   private statusIcons;
-  render(): HostElement;
+  render(): HTMLZInputMessageElement;
 }

package/dist/types/components/inputs/z-select/index.d.ts

@@ -11,7 +11,7 @@ export declare class ZSelect {
   /** the input label */
   label?: string;
   /** the input aria-label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** the input is disabled */
   disabled?: boolean;
   /** the input is readonly */