@zanichelli/albe-web-components 19.6.1 → 20.0.0

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

@@ -1,9 +1,9 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, d as getElement } from './index-BcDWN4F1.js';
-import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant, c as ButtonType, a1 as IconPosition, D as DividerSize, h as DividerOrientation, k as LabelPosition, I as InputType, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-DdetsoIY.js';
+import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant, c as ButtonType, a1 as IconPosition, D as DividerSize, h as DividerOrientation, I as InputType, k as LabelPosition, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-DdetsoIY.js';
 import { B as Breakpoints } from './breakpoints-Q-tWjk7P.js';
-import { a as containsElement, r as randomId, d as boolean, s as getTabbableElements, v as handleEnterKeydSubmit } from './utils-CEdyahRZ.js';
-import { C as COLOR_INDICATOR_ICONS, I as ICONS } from './iconset-AwzX9V8L.js';
-import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller-C_qN1xPW.js';
+import { a as containsElement, r as randomId, d as boolean, q as getTabbableElements, u as handleEnterKeydSubmit } from './utils-CJc3A9NX.js';
+import { C as COLOR_INDICATOR_ICONS, I as ICONS } from './iconset-D1c5gR45.js';
+import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller-CHemhYDp.js';
 
 const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 
@@ -274,7 +274,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '6ea43dd25c57ed4292a243326d7c8af37e88175a', "menu-length": this.menuLength }, h("div", { key: '2909e033b13f3c3703ba3402dddd58ab93de9d83', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'f4db1b9e05adb9ec6abfc5be7d7eb03d23cdadeb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'd654db6c1f20676c702ffd55896f74dc83b008ae', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '9baf1c16220364d06665b2e77f3f40c22abf9312', name: "top-subtitle" }))), h("div", { key: 'cd2665cc5b5e3528080ae049ff5c1b1b259387f8', class: "heading-title" }, h("slot", { key: 'b52786726e900d20c4f7251650fe828075e656ca', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'fbb0a8b9d580ffef099072782f9efded6ae448ba', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'e4d4bc464bcb11330a096582abf0ad7b4f95aed0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'eb712a6bd2324625dbb4647aa3e91e3c1bf21340', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '90d4f9eb7b361eb8e394a504d3779ea80241bc32', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '3c87b576bc0b22b6466d371cc1e5a6c92632cb3f', "menu-length": this.menuLength }, h("div", { key: '5fea095adcdc48b7ef7f1a2c0a9fbebb2f774f7c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '4c2af7cd90d3aed866fc0bb1e12c3a7040b8eab7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '123f4dbda4424a699098f8cd56e6e0af285555d9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7e46ed5fcf49e61c69cd808f323e642bd1dc8f44', name: "top-subtitle" }))), h("div", { key: '459505e2ebe168001292351e85002584b6efed1f', class: "heading-title" }, h("slot", { key: '579d2eb490d5c876b0a7ffd111c923d2240a5e18', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'f6fc213fd474fd75222e2dafc044624f4c468297', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '792cf8b185cf12ae234a5e75f8dc4db33fd97e98', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6f8e3558678da2a099aa86f63d2dcbc4be9762a3', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'aa700689a8b05503079e69a5808442db280e8e4e', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -296,13 +296,6 @@ const stylesCss$b = () => `.sc-z-button-h{display:inline-block;--z-icon-width:16
 const ZButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** defines a string value that labels the internal interactive element. Used for accessibility. */
-        this.ariaLabel = undefined;
-        /**
-         * Use `htmlrole` instead.
-         * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
-         */
-        this.role = "";
         /** HTML button disabled attribute. */
         this.disabled = false;
         /** HTML button type attribute. */
@@ -320,25 +313,24 @@ const ZButton = class {
         this.hasText = !!((_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim());
     }
     get attributes() {
+        var _a;
         return {
-            id: this.htmlid,
-            class: {
+            "id": this.htmlid,
+            "class": {
                 "z-button--container": true,
                 "z-button--has-text": this.hasText,
             },
+            "aria-label": ((_a = this.htmlAriaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
         };
     }
     renderIcon() {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
-        var _a, _b;
-        const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
-        const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
         if (this.href) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.attributes, { href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.attributes, { name: this.name, type: this.type, disabled: this.disabled, role: this.htmlRole || undefined }), this.renderIcon(), h("slot", null)));
     }
     get hostElement() { return getElement(this); }
 };
@@ -357,7 +349,7 @@ const ZDivider = class {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '43a290ca09c39c630779133fa5fd9912fca785e0', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '336d858e90aea1150ee35c4cb25bb49c00e658f7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -411,7 +403,7 @@ const ZIcon = class {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: '7c57cd059787e6ec7d12b0aceb02f8b6bb5b79a2', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: 'dfb975a522bb0efeee162d107c49e683c543edfd', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -435,10 +427,8 @@ const ZInput = class {
         this.inputBlur = createEvent(this, "inputBlur", 7);
         /** the id of the input element */
         this.htmlid = `id-${randomId()}`;
-        /** the input aria-label */
-        this.ariaLabel = "";
-        /** the input aria-expaded: available for text, password, number, email */
-        this.htmlAriaExpanded = "";
+        /** Input type */
+        this.type = InputType.TEXT;
         /** the input is disabled */
         this.disabled = false;
         /** the input is readonly */
@@ -451,8 +441,6 @@ const ZInput = class {
         this.message = true;
         /** the input label position: available for checkbox, radio */
         this.labelPosition = LabelPosition.RIGHT;
-        /** the input role */
-        this.role = "";
         /** render clear icon when typing (optional): available for text */
         this.hasclearicon = true;
         /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
@@ -575,27 +563,22 @@ const ZInput = class {
         };
     }
     inputHasMessage() {
-        if (boolean(this.message) === false || boolean(this.message) === true) {
+        if (typeof boolean(this.message) === "boolean") {
             return false;
         }
         return true;
     }
     getAriaAttributes() {
-        return Object.assign(Object.assign(Object.assign({}, (this.role ? { role: this.role } : {})), (this.htmlAriaDescribedBy ? { "aria-describedby": this.htmlAriaDescribedBy } : {})), (this.htmlAriaLabelledby ? { "aria-labelledby": this.htmlAriaLabelledby } : {}));
+        return {
+            "role": this.htmlRole || undefined,
+            "aria-describedby": this.htmlAriaDescribedby || undefined,
+            "aria-labelledby": this.htmlAriaLabelledby || undefined,
+        };
     }
     getTextAriaAttributes() {
-        const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
-        const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
-        const autocomplete = this.htmlAriaAutocomplete ? { "aria-autocomplete": this.htmlAriaAutocomplete } : {};
-        const activedescendant = this.htmlAriaActivedescendant
-            ? { "aria-activedescendant": this.htmlAriaActivedescendant }
-            : {};
-        const ariaDescribedby = this.htmlAriaDescribedBy || this.inputHasMessage()
-            ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
-            : {};
-        const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        const required = this.required ? { "aria-required": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid), required);
+        return Object.assign(Object.assign({}, this.getAriaAttributes()), { "aria-expanded": this.htmlAriaExpanded || undefined, "aria-controls": this.htmlAriaControls || undefined, "aria-autocomplete": this.htmlAriaAutocomplete || undefined, "aria-activedescendant": this.htmlAriaActivedescendant || undefined, "aria-describedby": this.htmlAriaDescribedby || this.inputHasMessage()
+                ? this.htmlAriaDescribedby || `${this.htmlid}-message`
+                : undefined, "aria-invalid": this.status === InputStatus.ERROR ? "true" : undefined, "aria-required": this.required ? "true" : undefined });
     }
     getFocusBlurAttributes() {
         return {
@@ -604,15 +587,9 @@ const ZInput = class {
         };
     }
     renderInputText(type = InputType.TEXT) {
-        const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getTextAriaAttributes()), this.getFocusBlurAttributes());
-        if (this.icon || type === InputType.PASSWORD) {
-            Object.assign(attr.class, { "has-icon": true });
-        }
-        if (this.hasclearicon && type != InputType.NUMBER) {
-            Object.assign(attr.class, { "has-clear-icon": true });
-        }
-        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
+        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), this.getTextAriaAttributes()), this.getFocusBlurAttributes()), { "aria-label": this.htmlAriaLabel || undefined });
+        attr.class = Object.assign(Object.assign({}, attr.class), { "has-icon": !!this.icon || type === InputType.PASSWORD, "has-clear-icon": this.hasclearicon && type != InputType.NUMBER });
+        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({}, attr, { type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type, ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
     }
     renderLabel() {
         if (!this.label) {
@@ -657,7 +634,7 @@ const ZInput = class {
     renderTextarea() {
         const attributes = this.getTextAttributes();
         const ariaAttributes = this.getTextAriaAttributes();
-        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }))), this.renderMessage()));
+        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.htmlAriaLabel || undefined }))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -685,21 +662,17 @@ const ZInput = class {
     }
     /* END radio */
     render() {
-        let input;
         switch (this.type) {
             case InputType.TEXTAREA:
-                input = this.renderTextarea();
-                break;
+                return this.renderTextarea();
             case InputType.CHECKBOX:
-                input = this.renderCheckbox();
-                break;
+                return this.renderCheckbox();
             case InputType.RADIO:
-                input = this.renderRadio();
-                break;
+                return this.renderRadio();
+            case InputType.TEXT:
             default:
-                input = this.renderInputText(this.type);
+                return this.renderInputText(this.type);
         }
-        return h(Host, { key: '7a98a32f222c422a2f253f0cadd78cf27e0c8913' }, input);
     }
     get hostElement() { return getElement(this); }
 };
@@ -710,37 +683,19 @@ const stylesCss$8 = () => `:host{display:flex;min-height:calc(var(--space-unit)
 const ZInputMessage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** the id of the message element (optional)*/
+        /** the id of the message element (optional) */
         this.htmlId = `id-${randomId()}`;
-        /** the role to set when both the message and the status are populated (optional)*/
+        /** the role to set when both the message and the status are populated (optional) */
         this.htmlRole = "alert";
         this.statusIcons = {
             success: "checkmark-circle",
             error: "multiply-circled",
             warning: "exclamation-circle",
         };
-        this.statusRole = {};
-    }
-    onMessageChange() {
-        this.statusRole = this.htmlRole && this.message && this.status ? { role: this.htmlRole } : {};
-    }
-    componentWillLoad() {
-        this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'a35cc36ee979d11215b973a0f11e2c8f59105a50' }, this.statusRole, { id: this.htmlId }), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'be5aa19afcdddefe15f252b8ea175b0615a5e983', name: this.statusIcons[this.status] }), h("span", { key: 'b1d11a0a9694e604b6aa252c2d8a77143288ad99', innerHTML: this.message })));
+        return (h(Host, { key: '071b2ab5bc953c916bf735be221071740cf48293', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: '3fa408351b28bb7998bb743ebcf05fbebe40ff4e', name: this.statusIcons[this.status] }), h("span", { key: '48d15076d87920c4e5abee2aae5b4e65fb17cefc', innerHTML: this.message })));
     }
-    static get watchers() { return {
-        "message": [{
-                "onMessageChange": 0
-            }],
-        "status": [{
-                "onMessageChange": 0
-            }],
-        "htmlRole": [{
-                "onMessageChange": 0
-            }]
-    }; }
 };
 ZInputMessage.style = stylesCss$8();
 
@@ -750,33 +705,43 @@ const ZList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
-         * [optional] Sets size of inside elements.
+         * [optional] Size of the list elements.
          */
         this.size = ListSize.MEDIUM;
         /**
-         * [optional] type of the list marker for each element
+         * [optional] Type of the list marker for each element.
          */
         this.listType = ListType.NONE;
-        /**
-         * Sets role of the element.
-         */
-        this.role = "list";
-    }
-    setChildrenSizeType() {
-        const children = this.host.children;
-        for (let i = 0; i < children.length; i++) {
-            children[i].setAttribute("size", this.size);
-            children[i].setAttribute("list-type", this.listType);
-            children[i].setAttribute("list-element-position", (i + 1).toString());
-        }
-    }
-    componentDidLoad() {
-        this.setChildrenSizeType();
+        this.htmlRole = "list";
+    }
+    /** Watch for changes in the role native attribute */
+    onRoleChange(newValue) {
+        this.htmlRole = newValue;
+    }
+    setChildrenProps() {
+        Array.from(this.host.children)
+            .filter((child) => child.tagName.toLowerCase() === "z-list-element")
+            .forEach((child, i) => {
+            child.size = this.size;
+            child.listType = this.listType;
+            child.listElementPosition = `${i + 1}`;
+        });
     }
     render() {
-        return (h(Host, { key: 'f9a6d8006b845e618b0aff2c8b0ed3568c438e4d' }, h("slot", { key: 'd9b7fd704481fdc6870d8269833ddacb035cb1b4' })));
+        return (h(Host, { key: '4c8361413296bef0a2156a5429825c156a15c5aa', role: this.htmlRole }, h("slot", { key: 'f7052cf14285ec66d66da900a7c76ef21c11c243' })));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "role": [{
+                "onRoleChange": 1
+            }],
+        "size": [{
+                "setChildrenProps": 1
+            }],
+        "listType": [{
+                "setChildrenProps": 1
+            }]
+    }; }
 };
 ZList.style = stylesCss$7();
 
@@ -845,13 +810,10 @@ const ZListElement = class {
          * [optional] type of the list marker for each element
          */
         this.listType = ListType.NONE;
-        /**
-         * Sets element role.
-         */
-        this.role = "listitem";
         /** set tabindex to Host tag (optional). Defaults to 0. */
         this.htmlTabindex = 0;
         this.showInnerContent = false;
+        this.htmlRole = "listitem";
         this.openElementConfig = {
             accordion: {
                 open: "minus-circled",
@@ -867,7 +829,6 @@ const ZListElement = class {
     }
     /**
      * Handler for click on element. If element is expandable, change state.
-     * @returns void
      */
     handleClick() {
         if (this.disabled) {
@@ -900,9 +861,11 @@ const ZListElement = class {
         }
         this.showInnerContent = !this.showInnerContent;
     }
+    onRoleChange(newValue) {
+        this.htmlRole = newValue;
+    }
     /**
      * Renders button to expand element.
-     * @returns expadable button
      */
     renderExpandableButton() {
         if (!this.expandable) {
@@ -914,7 +877,6 @@ const ZListElement = class {
     }
     /**
      * Renders expanded content if element is expandable.
-     * @returns expanded content
      */
     renderExpandedContent() {
         if (!this.expandable) {
@@ -927,7 +889,6 @@ const ZListElement = class {
     }
     /**
      * Renders content of the z-list-element
-     * @returns list content
      */
     renderContent() {
         if (this.listType === ListType.NONE) {
@@ -941,9 +902,14 @@ const ZListElement = class {
         }
     }
     render() {
-        return (h(Host, { key: '211b41c7cce6dd3c94d770da67d42203fc776d7e', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'a79eb753f19c45eb6c87cbf592e9e6196f7188f3', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c0ec5ddcbdb6b5cea2fe6fa5ec548ca0979fb8bd', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '50a40995617a49ae25c8351bdcef0ed8cbe791cf', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '42e6fa098aebb80fd08b32c8180bba0c76b1138d', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.htmlRole }, h("div", { key: '22e92a49de4b42710f68ca8e39ca1e90ae207427', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'adca72d657b257755ecda2cbd5b50757cf271cdf', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '479602f15efb7232a952b1b50db0db5a28f3ba7c', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "role": [{
+                "onRoleChange": 1
+            }]
+    }; }
 };
 ZListElement.style = stylesCss$6();
 
@@ -972,35 +938,56 @@ const ZListGroup = class {
          * [optional] type of the list marker for each element
          */
         this.listType = ListType.NONE;
-        /**
-         * Sets element role.
-         */
-        this.role = "group";
-    }
-    componentDidLoad() {
-        const children = this.host.children;
-        for (let i = 0; i < children.length; i++) {
-            if (children.length - 1 > i) {
-                children[i].setAttribute("divider-type", this.dividerType);
-                children[i].setAttribute("divider-size", this.dividerSize);
-                children[i].setAttribute("divider-color", this.dividerColor);
+        this.htmlRole = "group";
+    }
+    onRoleChange(newValue) {
+        this.htmlRole = newValue;
+    }
+    setChildrenProps() {
+        Array.from(this.host.children)
+            .filter((child) => child.tagName.toLowerCase() === "z-list-element")
+            .forEach((child, i, children) => {
+            child.size = this.size;
+            child.listType = this.listType;
+            child.listElementPosition = i.toString();
+            if (i < children.length - 1) {
+                child.dividerType = this.dividerType;
+                child.dividerSize = this.dividerSize;
+                child.dividerColor = this.dividerColor;
             }
-            children[i].setAttribute("size", this.size);
-            children[i].setAttribute("list-type", this.listType);
-            children[i].setAttribute("list-element-position", i.toString());
-        }
+        });
     }
     componentWillLoad() {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: '08d721c30d9c6f11e4628990bcdb3c6a0f948ef7' }, h("div", { key: '9148e5ba5b02120034499ee9e3ba304a2c7a59bc', class: {
+        return (h(Host, { key: 'c9ad6b3a4638a506c8f8feec372af5f28792e02e', role: this.htmlRole }, h("div", { key: 'f86aa7a374f4a20e76cc528b5a4707cd6e136977', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'c7e244b995fd510f0de3fe5b56fab29645e498e3', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'b7b215bb4fb5d788f51d939277dd63304fecaf50', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '4b84ad375fca78efccb67e39fdb84ea2786951ab' })));
+            } }, h("slot", { key: 'd3c539979304203cadfdeae8f2cdca1c6c427bdd', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '2bc1c3ab6f13b45c164d75833a45ebb7f4f7d241', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'e8586a35a1eb7e346ea4336574bba98b5a8b1bc3' })));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "role": [{
+                "onRoleChange": 1
+            }],
+        "size": [{
+                "setChildrenProps": 1
+            }],
+        "listType": [{
+                "setChildrenProps": 1
+            }],
+        "dividerType": [{
+                "setChildrenProps": 1
+            }],
+        "dividerSize": [{
+                "setChildrenProps": 1
+            }],
+        "dividerColor": [{
+                "setChildrenProps": 1
+            }]
+    }; }
 };
 ZListGroup.style = stylesCss$5();
 
@@ -1088,8 +1075,8 @@ const ZOffcanvas = class extends ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (h(Host, { key: '51b926901186e062a9c9bb092db3429a7ac305eb', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: '353b8acace02902509f4ae502718aa7e8c6ee1e2', class: "canvas-container" }, h("div", { key: '2a18631be55b973bd8a3853284d3e1be5c6e6f23', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: '9bd16e9e5b133a17eb3b53d2e1cb89c367e40f84', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '5e31cd8fcd36857ad313f9e99691147d08858819', class: "backdrop", onClick: (ev) => {
+        return (h(Host, { key: '96384e6ed9437409a5f220d3a725707a47854dd9', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: 'b15d7e247efc10af823e1bbcf26a767e2a6a6f50', class: "canvas-container" }, h("div", { key: '7dd36d23274bb9f2ddc7b3d155b773d608072f4d', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'a43bd7fbeffb3ffb411f779383fbc1aa0a72feb5', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '02ada3fbefde8cb24bb57db9d7e566d1834f855e', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1319,17 +1306,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '612cbac3edf6d67856efc5b7eff0fc30d5646e7f', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'ddbdeb53bc40923281a6b83a71912668a7f67a3f', class: "input-container" }, h("z-input", { key: '5cdb21ccde59c92d9752c15c8891b642cd72cf21', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (h(Host, { key: '666eb25b14ff2ad53ad24a804429a5d5c7fb9921', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '3bfc445797d517674f8fd359ebe78bd6a6bb67dc', class: "input-container" }, h("z-input", { key: 'a5332cea9ad170b49d0091290db492bc0109aec9', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
             }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: '186b6d67d30f51df48ef9d5666e7d7472f07d144', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (h("div", { key: '9a36f0021f7a52bc36fc9823a747820e188074ec', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'b532793e35d1868ed23771b6ec1203c9e62180ee', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'c1633f9f99c0503301562f8f3828f965b075cb51', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1356,10 +1343,10 @@ const ZTag = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '273eb9a78f7f39ed81015bbe235b46d8582536dc', class: {
+        return (h(Host, { key: '0f2c63d3955fdb97015df9854ccac4030bc18f1e', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: '5e40ec0815396062058b551eaaa473d4334c82d9', name: this.icon }), h("div", { key: 'af9ed36756ea11b9b50f7c155e546b0e369e73a3' }, h("slot", { key: 'eeb87108d276c593c17dfa0aec905a75cf0f826d' }))));
+            } }, this.icon && h("z-icon", { key: '46d5bfd904a8f2421d06b94f2e7c8e6ce81692d5', name: this.icon }), h("div", { key: '9c4fdeb859730e336eb18db8128c1fc7dc527410' }, h("slot", { key: 'aa6adbac4bcec80f1e3fb94d7276dee1386d9483' }))));
     }
     get host() { return getElement(this); }
 };