@zanichelli/albe-web-components 20.0.4 → 20.1.0

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

@@ -29,6 +29,7 @@ export class ZInput {
         this.isTyping = false;
         this.passwordHidden = true;
         this.typingtimeout = 300;
+        this.focused = false;
     }
     inputCheckListener(e) {
         const data = e.detail;
@@ -43,6 +44,9 @@ export class ZInput {
     watchIndeterminate() {
         this.syncCheckboxIndeterminate();
     }
+    watchLabelState() {
+        this.setLabelState();
+    }
     syncCheckboxIndeterminate() {
         if (this.type !== InputType.CHECKBOX || !this.inputRef) {
             return;
@@ -100,11 +104,16 @@ export class ZInput {
         });
     }
     emitInputFocus() {
+        this.focused = true;
         this.inputFocus.emit({ id: this.htmlid });
     }
     emitInputBlur() {
+        this.focused = false;
         this.inputBlur.emit({ id: this.htmlid });
     }
+    componentWillLoad() {
+        this.setLabelState();
+    }
     getValidity(type) {
         const input = this.hostElement.querySelector(type);
         return input.validity;
@@ -172,20 +181,48 @@ export class ZInput {
     }
     getFocusBlurAttributes() {
         return {
-            onFocus: () => this.emitInputFocus(),
-            onBlur: () => this.emitInputBlur(),
+            onFocus: () => {
+                this.emitInputFocus();
+                this.setLabelState();
+            },
+            onBlur: () => {
+                this.emitInputBlur();
+                setTimeout(() => this.setLabelState(), 150);
+            },
         };
     }
+    setLabelState() {
+        if (this.size === ControlSize.BIG) {
+            this.labelState = "default";
+            return;
+        }
+        if (!this.value && !this.focused) {
+            this.labelState = "inside";
+            return;
+        }
+        this.labelState = "cutout";
+    }
+    hasIcon() {
+        return !!this.icon || this.type === InputType.PASSWORD;
+    }
+    showPlaceholder() {
+        return !this.label || this.labelState !== "inside";
+    }
     renderInputText(type = InputType.TEXT) {
         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 });
+        attr.class = Object.assign(Object.assign({}, attr.class), { "has-icon": this.hasIcon(), "has-clear-icon": this.hasclearicon && type != InputType.NUMBER, "hide-placeholder": !this.showPlaceholder() });
         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) {
             return;
         }
-        return (h("label", { class: "z-label body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid }, this.label));
+        return (h("label", { class: {
+                "z-label": true,
+                [`label-${this.labelState}`]: true,
+                [`label-${this.status}`]: !!this.status,
+                "has-icon": this.hasIcon(),
+            }, id: `${this.htmlid}_label`, htmlFor: this.htmlid }, this.label));
     }
     renderIcons() {
         return (h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
@@ -223,8 +260,7 @@ export class ZInput {
     /* START textarea */
     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.htmlAriaLabel || 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, this.getTextAriaAttributes(), this.getFocusBlurAttributes(), { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true, "hide-placeholder": !this.showPlaceholder() }), "aria-label": this.htmlAriaLabel || undefined }))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -961,7 +997,8 @@ export class ZInput {
     static get states() {
         return {
             "isTyping": {},
-            "passwordHidden": {}
+            "passwordHidden": {},
+            "labelState": {}
         };
     }
     static get events() {
@@ -1083,6 +1120,12 @@ export class ZInput {
         return [{
                 "propName": "indeterminate",
                 "methodName": "watchIndeterminate"
+            }, {
+                "propName": "size",
+                "methodName": "watchLabelState"
+            }, {
+                "propName": "value",
+                "methodName": "watchLabelState"
             }];
     }
     static get listeners() {
@@ -1095,4 +1138,3 @@ export class ZInput {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,7 @@
 :host {
   display: inline-block;
   width: inherit;
+  line-height: 0;
 }
 
 :host * {
@@ -33,17 +34,10 @@ textarea {
 input,
 .textarea-wrapper {
   border: var(--border-size-small) solid var(--color-form-surface04);
-  border-radius: var(--border-radius-small);
+  border-radius: var(--border-radius);
   color: var(--color-form-default-text);
 }
 
-:host([size="small"]) input,
-:host([size="small"]) textarea,
-:host([size="x-small"]) input,
-:host([size="x-small"]) textarea {
-  font-size: var(--font-size-2);
-}
-
 :host.cursor-select input {
   cursor: pointer;
 }
@@ -61,7 +55,6 @@ input:not([readonly]):hover,
 :host:not([readonly="true"]) .textarea-wrapper:focus-within {
   border-color: var(--color-form-active-primary);
   box-shadow: var(--shadow-focus-primary);
-  color: var(--color-form-active-primary);
 }
 
 :host input:focus:focus-visible:hover,
@@ -69,10 +62,6 @@ input:not([readonly]):hover,
   outline-color: var(--color-form-active-primary);
 }
 
-:host input:focus:focus-visible + .icons-wrapper {
-  fill: var(--color-form-active-primary);
-}
-
 :host.active-select input {
   border: var(--border-size-small) solid var(--color-form-active-primary);
 }
@@ -88,7 +77,8 @@ input:not([readonly]):hover,
 }
 
 /* STATUSES (success, warning, error) */
-.input-success {
+.input-success,
+.z-label.label-cutout.label-success {
   border-color: var(--color-form-success01);
   background: var(--color-form-inverse-success);
 }
@@ -98,7 +88,8 @@ input:not([readonly]):hover,
   fill: var(--color-form-success01);
 }
 
-.input-error {
+.input-error,
+.z-label.label-cutout.label-error {
   border-color: var(--color-form-hover-error);
   background: var(--color-form-inverse-error);
 }
@@ -108,7 +99,8 @@ input:not([readonly]):hover,
   fill: var(--color-form-hover-error);
 }
 
-.input-warning {
+.input-warning,
+.z-label.label-cutout.label-warning {
   border-color: var(--color-form-hover-warning);
   background: var(--color-form-inverse-warning);
 }
@@ -145,13 +137,15 @@ input:not([readonly]):hover,
   border-width: var(--border-size-small);
 }
 
-/* PLACEHOLDER */
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-form-placeholder-text);
+:host([disabled]:not([disabled="false"])) label {
+  pointer-events: none;
 }
 
-::-webkit-textarea-placeholder {
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder,
+input::-webkit-textarea-placeholder,
+textarea::-webkit-textarea-placeholder {
   color: var(--color-form-placeholder-text);
 }
 
@@ -159,10 +153,67 @@ textarea::placeholder {
   color: var(--color-form-placeholder-text);
 }
 
-::placeholder {
-  color: var(--color-form-placeholder-text);
+input.hide-placeholder::placeholder,
+textarea.hide-placeholder::placeholder,
+input.hide-placeholder::-webkit-textarea-placeholder,
+textarea.hide-placeholder::-webkit-textarea-placeholder {
+  color: transparent;
 }
 
 :host([disabled]:not([disabled="false"])) label.z-label {
   color: var(--color-disabled03);
 }
+
+/* Z-LABEL */
+
+.z-label {
+  --z-label-transition-args: 150ms cubic-bezier(0.42, 0, 0.58, 1);
+  --z-label-transition:
+    top var(--z-label-transition-args), font-size var(--z-label-transition-args),
+    background-color var(--z-label-transition-args), border-radius var(--z-label-transition-args),
+    width var(--z-label-transition-args);
+
+  position: relative;
+  z-index: 2;
+}
+
+:host([size="small"]) .z-label {
+  --z-label-inside-top: 1.25rem;
+
+  margin-bottom: -0.5rem;
+}
+
+:host([size="x-small"]) .z-label {
+  --z-label-inside-top: 1.125rem;
+
+  margin-bottom: -0.5rem;
+}
+
+.z-label.label-cutout {
+  top: 0;
+  padding: 0 2px;
+  margin: 0 6px;
+  background-color: var(--color-form-background);
+  border-radius: var(--border-radius);
+  color: var(--color-form-default-text);
+  font-size: var(--font-size-2);
+  transition: var(--z-label-transition);
+}
+
+.z-label.label-inside {
+  top: var(--z-label-inside-top, 1.25rem);
+  left: var(--space-unit);
+  overflow: hidden;
+  max-width: calc(100% - var(--space-unit-2));
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-form-default-text);
+  font-size: var(--font-size-3);
+  text-overflow: ellipsis;
+  transition: var(--z-label-transition);
+  white-space: nowrap;
+}
+
+.z-label.label-inside.has-icon {
+  max-width: calc(100% - var(--space-unit-6));
+}

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

@@ -1,3 +1,7 @@
+.text-wrapper {
+  position: relative;
+}
+
 .text-wrapper > div {
   position: relative;
   z-index: 1;
@@ -6,23 +10,23 @@
 
 .text-wrapper > div > input {
   width: 100%;
-  height: calc(var(--space-unit) * 5.5);
+  height: 2.75rem;
   box-sizing: border-box;
-  padding: 0 calc(var(--space-unit) * 1.5);
+  padding: 0 var(--space-unit);
   margin: 0;
 }
 
 :host([size="small"]) .text-wrapper > div > input {
-  height: calc(var(--space-unit) * 4.5);
+  height: 2.25rem;
 }
 
 :host([size="x-small"]) .text-wrapper > div > input {
-  height: calc(var(--space-unit) * 4);
+  height: 2rem;
 }
 
 .text-wrapper > div > input.has-icon,
 .text-wrapper > div > input.has-clear-icon {
-  padding-right: calc(var(--space-unit) * 5.25);
+  padding-right: calc(var(--space-unit) * 4);
 }
 
 .text-wrapper > div > input.has-icon.has-clear-icon {
@@ -33,8 +37,10 @@
   position: absolute;
   z-index: 2;
   top: 50%;
-  right: calc(var(--space-unit) * 1.5);
+  right: var(--space-unit);
   display: flex;
+  margin-left: var(--space-unit);
+  gap: var(--space-unit);
   pointer-events: none;
   transform: translateY(-50%);
 }
@@ -49,10 +55,6 @@
   pointer-events: initial;
 }
 
-.text-wrapper .icons-wrapper > .input-icon + .input-icon {
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
 .text-wrapper .icons-wrapper > button.input-icon.hidden {
   display: none;
 }
@@ -74,13 +76,8 @@
   display: block;
 }
 
-.text-wrapper .icons-wrapper > .input-icon.small,
-.text-wrapper .icons-wrapper > .input-icon.x-small {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
 .text-wrapper .icons-wrapper > button.input-icon:focus {
+  border-radius: var(--border-radius-small);
   box-shadow: var(--shadow-focus-primary);
   outline: none !important;
 }

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

@@ -1,7 +1,8 @@
 .textarea-wrapper {
+  position: relative;
   width: 100%;
   height: 100%;
-  padding: calc(var(--space-unit) * 1.5);
+  padding: var(--space-unit);
 }
 
 .textarea-wrapper:not(.input-error, .input-success, .input-warning) {

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

@@ -13,7 +13,7 @@ export class ZInputMessage {
         };
     }
     render() {
-        return (h(Host, { key: '9172ac365fc1852474edf21707ed4cb4ba42aa89', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: '92e17ba97e7648ee9974f8e3da732169be30a6f6', name: this.statusIcons[this.status] }), h("span", { key: '11753702f3a21f1f422f85c1bc4c55719152a2d8', innerHTML: this.message })));
+        return (h(Host, { key: 'd4ff8a00f5ea0f95f55c71d8c20318d5ebccce22', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: 'e8b1e95badf35decb8f556ea6b8f22309b8545ba', name: this.statusIcons[this.status] }), h("span", { key: 'e6cd35dd3e4cc24d5e9802c42fc6d09eaf8801dd', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }
@@ -136,4 +136,3 @@ export class ZInputMessage {
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,19 +1,22 @@
 :host {
   display: flex;
-  min-height: calc(var(--space-unit) * 2.5);
+  min-height: 1.25rem;
   align-items: start;
-  margin-top: var(--space-unit);
+  margin-top: calc(var(--space-unit) / 2);
   color: var(--color-default-text);
   fill: currentcolor;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
   letter-spacing: 0.16px;
+  line-height: 1.25rem;
 }
 
 :host(.small),
 :host(.x-small) {
-  margin-top: calc(var(--space-unit) * 0.5);
+  min-height: 1rem;
+  margin-left: var(--space-unit);
   font-size: var(--font-size-1);
+  line-height: 1rem;
 }
 
 :host([status="success"]) {
@@ -35,7 +38,7 @@
 :host > z-icon {
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
-  --z-icon-right-margin: var(--space-unit);
+  --z-icon-right-margin: calc(var(--space-unit) * 0.5);
 
   margin-top: calc(var(--space-unit) * 0.25);
 }
@@ -44,7 +47,8 @@
 :host(.x-small) > z-icon {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
-  --z-icon-right-margin: calc(var(--space-unit) * 0.5);
+
+  margin-top: calc(var(--space-unit) * 0.125);
 }
 
 :host([disabled]) {

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

@@ -103,7 +103,7 @@ export class ZInputRange {
         this.needsNativeValueSync = false;
     }
     render() {
-        return (h(Host, { key: '3b37077c4ba5f2a04a1d131fe9eac923436c5a91' }, this.label && (h("label", { key: '7240d003d1fbed16cd0a1b1557314dfd2bcd9a3f', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: 'd1920f42f1dc8a03bda038a2d177e57035f4f092', class: "input-container body-3" }, h("input", { key: 'd6e2c44d55b1a9455b56b375d64e110af9d30057', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '7bfa033f84290c2cafe4f39a87edd45191a84680', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: '430d53ed9782f4cf0995e3f9233e541843723491', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '0af7033124469b52197a57ce16fdccd7fd97dbf6', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: 'd3c1598713da8f390bfceac94429549e974ea9e8', class: "edges body-3" }, h("span", { key: '975d41878caf4b3ede7ccf78411657ad8339ad9c', class: "min" }, this.min), h("span", { key: '1594cb900aeed07b641bfb836f8bc4fed7b2f99e', class: "max" }, this.max)))));
+        return (h(Host, { key: 'a969d3907154aa5170453fa9c0080fb005dac869' }, this.label && (h("label", { key: 'e1e496c74677cd1f53aadd4326f07dd5031bf746', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: '07efbaf8d7d4cec485e3992b7e7fea47034da4a3', class: "input-container body-3" }, h("input", { key: '99d7b9f18d8dc74936e502e8b2a8e4d18f459e2d', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '7f7b3ce52f9f789835fd2cd820ab50fd5ece5c21', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: 'e4aa5154f693f2eff2fec14b83ab1a89d3ab5c8f', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '8cdb2a0dbe119a11f444a1f84f28b67f576e5608', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: '32c75c83ac68d1ca9459a1038c7abfcfabbdbf32', class: "edges body-3" }, h("span", { key: '4c9561429cf81251bb261964c3ba5c039cec45e0', class: "min" }, this.min), h("span", { key: '5fd1febf5f2488bcdb9bd24f9dffd0fba6d51b0c', class: "max" }, this.max)))));
     }
     static get is() { return "z-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -435,4 +435,3 @@ export class ZInputRange {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -8,7 +8,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '2a5ee4cb9fb88016c1f844d74af38cf9f776c8b3', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '48424a6bb887c1cea049f13309c61fc0b6f4d845', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -141,4 +141,3 @@ export class ZLogo {
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -534,4 +534,3 @@ export class ZMenu {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-menu-section/index.js

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '64aaea4f98c08d9d570aedb2a73847247d6972cf', open: this.open }, h("button", { key: '3a3e7917674e8db446e986b24fed9a3079d7d6ab', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '3e13783b40135def11773286f16c45070ee9eade', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'be1dffed69eabe2fb40b46d7c1ff4cbef9512cf0', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '51c8c7e3560941fe67614c92c8e153233cc97691', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'c37e273f536f6d1f8d3e4585b14290fc70ddce86', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'adfcabed5689b1b9648ec3881f78bc7a1bad7094', open: this.open }, h("button", { key: 'a5f41661fca36232c158b87d32c75a6cb578bd27', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '8d7bdca8acddd555357691e320bd7a51e2a678c9', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'c9e4ee66443c5c004f1ee1f7dff51a046ee77bc5', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '3948366c3e4bd092c0e89d31642f163ab92dc68c', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '97d9b2583d493173ccb8271d02bf2b6d947f1141', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -347,4 +347,3 @@ export class ZMenuSection {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -104,16 +104,16 @@ export class ZModal extends ReactiveControllerHost {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '365136e0cb7404c43b1d7f40b94add1e2316c670', class: {
+        return (h("dialog", { key: '78a12a74b33a0501e52a204ba453755edc9ea4c7', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '8786b7f6afbe64ca141373cf65c9d7f413a18557', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '9331bc2f58c9240799389f921fc7aeca8e3525bd', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '622a13c788167d280bafffe633df45ff3beda387', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '284bd3d0a65a5698a918b196419369b4ac660ee2' }, this.modaltitle && h("h1", { key: '417c4984cb124531278ecc92ec217e13565998ca', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '5977d05ad0b81e48ab9a2040a4387a4e8caeed46', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '1e737f8f06d4423e67e1b253161b417aaa85e211', class: {
+            }, id: this.modalid }, h("header", { key: '87032c660d8d5fe71412666490630a36676107ca', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '2849fd31ed63200530149e28f0e93816a5f658f9' }, this.modaltitle && h("h1", { key: '281340cbf57f8fd066d7de9d45a30f30664b5497', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '1de795732386ed3f2ffbe1a793f0196dfcab91b3', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'c333e87e6440cd9b9ebf6abc3120469cd9e73f7c', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '4d48fcf7fac54e5243f0d4f318c822aee4b62136', name: "modalContent" }))), h("div", { key: '505a28d12fb70186954df5b04ac516487f2025fb', class: {
+            }, id: "modal-content" }, h("slot", { key: '99834151f941ad9468a55870ff18b03dcf9ad715', name: "modalContent" }))), h("div", { key: '1b768554d0154e56e878cfbc809805d0ed0ec8b2', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
@@ -391,4 +391,3 @@ export class ZModal extends ReactiveControllerHost {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -226,10 +226,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '1de8a270e88c2a12d9c1484aa585775ec8fe6428', class: {
+        return (h(Host, { key: '6d8d2f532c38433c50b3731441267a01d6c2fcf7', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '0791dfb20438fd8eaa1ba25c10256aaaaf5931ae', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: 'da9c4345eb5053a117d765a8c26cbf634f290bf5', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '67df811dbddd0298c0d6bc083d833041038f8604', role: "tablist", "aria-label": this.htmlAriaLabel || undefined, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8db36c5bfa643b2c5f806eba7e19a8dd33c719d7' })), h("button", { key: 'b5d19f59a429ede0ad317eb770d76b211bced81d', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '3ea0cb039399e91455128a84a2a75be818c751cc', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '7ab37cf5f71bc3658188489998fadfe575aa0b41', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '20e81b74b5a5c8d9e84d2ea6143ff057b4984b10', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'b17e583a267a28459fbdf119ac13d14b372b5985', role: "tablist", "aria-label": this.htmlAriaLabel || undefined, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '1e9742ad9f786bd8b951e03d9798e531e9bcf0c6' })), h("button", { key: 'f2cae5a231dd65f03d0212dfa416ede37d1f9789', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '8e6dc36feb92f96f273471305ef232b56cb595fe', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -402,4 +402,3 @@ export class ZNavigationTabs {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -29,7 +29,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4fd2f22c56fba4e7809d407dcbd16cefab495c04' }, h("div", { key: 'cfe35b1852e3e203efe9e02f1b77d61e0d41db9a', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '3ce7c0d1206305eed36ff96459842d2748293ae9', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'c80079713e7df578506dc269473562034c5d1f5b', class: "content-container" }, h("div", { key: 'f58d8522ee597abc370199362715fb3a294e7d03', class: "content-text" }, h("slot", { key: 'c3c5bfefeb9808ed5446b25df3bb79e5ed715e97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '6d41c5e0273debff7f5d2beca0b5a0e9b31e6c8a', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '7eb5261947cadf3264eb71f731ee27b86b660285', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '4113a60cd35f6ba083f1abce5cc46856871cc312', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: 'fc5e89c4c315d376837f6abcbb1325d28b05b303' }, h("div", { key: '1b647c954c4115c527efc26a03624e040f880379', class: "main-container" }, this.contenticonname && (h("z-icon", { key: 'd8e83788628bdc39dce4cf472e7b8ab79fadcdb7', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '5ef74c7096f090339ff880a16ef3893ee2bb1c5c', class: "content-container" }, h("div", { key: 'b0a7c8f8bc3e18a37508397c01ef6e80b1bf49f3', class: "content-text" }, h("slot", { key: '125bfbcb05d2fb16719a23c7c886785349d0cda5' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '41c4c81b6ab08c13ef581d411e440b77c46775da', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '053b26950a62fc86e63cb16dbbec4b6119aa5da3', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'be31594bc169b3d050db02097e60e8c320673878', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -228,4 +228,3 @@ export class ZNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -86,8 +86,8 @@ export class ZOffcanvas extends ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (h(Host, { key: '1d8d592805e988c32fdb618f0c94984d666be230', "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: '099e499d2387ab7ec83931388db2ee8ef07ab183', class: "canvas-container" }, h("div", { key: 'ff0e669b94a0bb5d204041f17a89098860ddba84', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'e9a71a394675ed08e74beb9c097069d0e3099c8d', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '364dc6513badd40238406bb47848e104a2095c87', class: "backdrop", onClick: (ev) => {
+        return (h(Host, { key: '0d718ddb59132cfe0455ec8fe295af28d22d5ed2', "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: '2be04a46c61ac1cf275f1346acf473fd5fa9a4f7', class: "canvas-container" }, h("div", { key: '8ae8c40c1f7057bfa3e0dd7fb5fe4bd0c090d27b', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'cf715af879c1adf21a1b3ce56bf6aa03a7a74d45', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'a358752b0610bc48db477ed12eca3856095606e5', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -272,4 +272,3 @@ export class ZOffcanvas extends ReactiveControllerHost {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -454,4 +454,3 @@ export class ZPagination {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -507,7 +507,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '0e6292269933c7cc266fe367408a87789af21c1a', "current-position": this.currentPosition }, h("slot", { key: 'cb86147569eb9a026116aff1f1a4cfcbc226d010' })));
+        return (h(Host, { key: 'e966103be59ff2a16c40ff2e2a1d31de604be689', "current-position": this.currentPosition }, h("slot", { key: '78a7a8745c8d13e7f337ad740fba6b77ddbe69f6' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -745,4 +745,3 @@ ZPopover.positionOrder = [
     PopoverPosition.LEFT_TOP,
     PopoverPosition.LEFT_BOTTOM,
 ];
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-result-card/index.js

@@ -259,4 +259,3 @@ export class ZResultCard {
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -204,17 +204,17 @@ export class ZSearchbar {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'beeb6767dbccbc257ee122c0fbe405337812a64b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '91ea65a3b095acc51ce1244d91fe21133f850ded', class: "input-container" }, h("z-input", { key: 'a4101a49facd4e1407d9f8e25098096426ab547c', 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: '5c3ed05870fccf1a231eda8149bebd0274bb2c69', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'b14fecdd8272c9f21ecd4e1d7ec07bf5f96b97b2', class: "input-container" }, h("z-input", { key: 'bf1ed33bb3bacb810646b41b12d5c922ce144d23', 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 &&
+            }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, htmlAriaLabel: this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: '1822c6ffbce819bfad2a6c88cc476191afbc8c93', 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: '7ec9e9e45860fdbe991ab75a1613e5bd4a69f386', 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: '61c56c0c72d1d972a7272e90b1f34003aae79a32', 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: '43e55538a8fa30b1ed210822cc30d126a4c00e94', 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"))));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }
@@ -677,4 +677,3 @@ export class ZSearchbar {
             }];
     }
 }
-//# sourceMappingURL=index.js.map