@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-RC6

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

@@ -145,16 +145,16 @@ export class ZInput {
             pattern: this.pattern,
         };
     }
-    getRoleAttribute() {
-        return this.role ? { role: this.role } : {};
-    }
     inputHasMessage() {
         if (boolean(this.message) === false || boolean(this.message) === true) {
             return false;
         }
         return true;
     }
-    getAriaAttrubutes() {
+    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 } : {}));
+    }
+    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 } : {};
@@ -165,7 +165,7 @@ export class ZInput {
             ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
             : {};
         const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
     }
     getFocusBlurAttributes() {
         return {
@@ -175,7 +175,7 @@ export class ZInput {
     }
     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(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getFocusBlurAttributes());
+        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 });
         }
@@ -210,6 +210,7 @@ export class ZInput {
         return (h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
                 this.inputRef.value = "";
                 this.emitInputChange("");
+                this.inputRef.focus();
             } }, h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
@@ -225,8 +226,8 @@ export class ZInput {
     /* START textarea */
     renderTextarea() {
         const attributes = this.getTextAttributes();
-        const ariaAttributes = this.getAriaAttrubutes();
-        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.getRoleAttribute()))), this.renderMessage()));
+        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()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -235,7 +236,7 @@ export class ZInput {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -244,7 +245,7 @@ export class ZInput {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -266,18 +267,18 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: 'e3f830979b2d6306b19c5a0357ca48b42d142a74' }, input);
+        return h(Host, { key: '2536f6387f2325190522fc8cc4f788147bead800' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get properties() {
@@ -463,6 +464,44 @@ export class ZInput {
                 "reflect": false,
                 "attribute": "html-aria-activedescendant"
             },
+            "htmlAriaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-describedby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-described-by"
+            },
+            "htmlAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-labelledby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-labelledby"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -646,25 +685,6 @@ export class ZInput {
                 "attribute": "message",
                 "defaultValue": "true"
             },
-            "htmlAriaDescribedBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-described-by"
-            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/z-input/styles-checkbox-radio.css

@@ -0,0 +1,132 @@
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-default-text);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+}
+
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
+}
+
+.radio-wrapper > input,
+.checkbox-wrapper > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
+  display: inline-flex;
+  min-height: 24px;
+  align-items: center;
+  padding: 3px 0;
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
+  text-transform: inherit;
+}
+
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
+  cursor: pointer;
+}
+
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
+  cursor: pointer;
+  fill: inherit;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
+  flex-direction: row;
+}
+
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
+  flex-direction: row-reverse;
+}
+
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
+  margin-left: var(--space-unit);
+}
+
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
+  margin-right: var(--space-unit);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
+/* focus */
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
+  border-radius: 50%;
+}
+
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  border-radius: var(--border-radius-small);
+}
+
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* disabled */
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
+  color: var(--color-disabled03);
+}
+
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
+  cursor: default;
+  fill: var(--color-disabled01);
+}

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

@@ -0,0 +1,166 @@
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+/* GENERAL */
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input,
+textarea {
+  background: var(--color-form-background);
+  fill: var(--color-form-default-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+input,
+.textarea-wrapper {
+  border: var(--border-size-small) solid var(--color-form-surface04);
+  border-radius: var(--border-radius-small);
+  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;
+}
+
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:not(.readonly):hover {
+  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline-offset: -2px;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+: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,
+.textarea-wrapper:not(.readonly):focus-within: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);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  border-color: var(--color-form-surface03);
+  box-shadow: none;
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-form-success01);
+  background: var(--color-form-inverse-success);
+}
+
+.input-success:focus:focus-visible + .icons-wrapper,
+.input-success + .icons-wrapper {
+  fill: var(--color-form-success01);
+}
+
+.input-error {
+  border-color: var(--color-form-hover-error);
+  background: var(--color-form-inverse-error);
+}
+
+.input-error:focus:focus-visible + .icons-wrapper,
+.input-error + .icons-wrapper {
+  fill: var(--color-form-hover-error);
+}
+
+.input-warning {
+  border-color: var(--color-form-hover-warning);
+  background: var(--color-form-inverse-warning);
+}
+
+.input-warning:focus:focus-visible + .icons-wrapper,
+.input-warning + .icons-wrapper {
+  fill: var(--color-form-hover-warning);
+}
+
+:is(.input-success, .input-error, .input-warning):focus:focus-visible {
+  color: var(--color-form-default-text);
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.textarea-wrapper.readonly {
+  border-color: var(--color-form-surface03);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+/* DISABLED */
+:host([disabled]:not([disabled="false"])) input,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
+:host([disabled]:not([disabled="false"])) z-icon {
+  border-color: var(--color-form-disabled03);
+  box-shadow: none;
+  color: var(--color-form-disabled-text);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:host([disabled]:not([disabled="false"])) label.z-label {
+  color: var(--color-disabled03);
+}

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

@@ -0,0 +1,92 @@
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--color-form-default-icon);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  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;
+}
+
+.text-wrapper .icons-wrapper > button.reset-icon,
+.text-wrapper .icons-wrapper > button.toggle-password-icon {
+  display: flex;
+  min-width: 24px;
+  min-height: 24px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > .input-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  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 {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}

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

@@ -0,0 +1,19 @@
+.textarea-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--space-unit) * 1.5);
+}
+
+.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
+  background-color: var(--color-form-background);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  color: currentcolor;
+  resize: none;
+}

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

@@ -20,7 +20,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '2a344b237779b36f3c6fcbd41d1b96c71c08d286' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'dbd6314657659bc49619393ae30a1fbfd8051635', name: this.statusIcons[this.status] }), h("span", { key: 'fe39967aedc46a55bff2719881f793d0c0e9283b', id: this.htmlId, innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: '575ca29cba9f2d617b8b2c65bb054204e7aa411c' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: '6b9a19626fac468cdf5773aebd66cba90489eaa3', name: this.statusIcons[this.status] }), h("span", { key: 'c951a0146f5fe8def8428aee39ce923b24aa23bb', id: this.htmlId, innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

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: '649a64cb6a489dd102212f138c42446b3b1dbd79', 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: '9401038e196d731be0ca5b2727f58b68fb47442c', 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"; }

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

@@ -19,6 +19,11 @@ a {
   height: 100%;
 }
 
+a:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
 :host(.mobile) {
   width: 31px;
   height: 40px;

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

@@ -6,7 +6,6 @@ const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagNa
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenu {
     get focusableItem() {

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

@@ -6,6 +6,9 @@
 }
 
 :host {
+  /**
+   * @prop --z-menu-label-color: Color of the label's text.
+   */
   --z-menu-label-color: ;
 
   position: relative;

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

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '4e6388d5919ca9010c78ef35df6b1c0b807d2dd6', open: this.open }, h("button", { key: '4093e9a7ce5cb5cf63ca7012bb44c7b49b638e90', 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: '0c88383d5be4c81aee5a78f89e4706a6b167dccb', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'd32c9dc28048a6d7441075da41cb2f255e5bdc73', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '0c24a7122314391262e640b440f87dce632eb2f3', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'fe79aa30aaa7d3a92621c6725e4d0ddca604726e', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'e2584623ee4db0d3b11804dff89a93afa9b2761b', open: this.open }, h("button", { key: '21c6cf5558e6a719e56d2af7bbfef31044030394', 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: '59d3f4a1306bc8639a2cdddc2be44bd6c49bdd1b', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '3448e73ef71fd89e861add9bbb6f020d8e873117', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '93304aead086952a3bf4235216877289b882971d', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'c0258eaedb4fd8b9296570da1eda75108d9c0af0', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,6 @@ const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [conte
 /**
  * @slot modalCloseButton - slot for custom close button
  * @slot modalContent - slot for the content of the modal
- * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
 export class ZModal {
     constructor() {
@@ -125,16 +124,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'd958597dcd030d9d837aa27e3d951e58c76d1872', class: {
+        return (h("dialog", { key: 'c8938b5d9ecc14fb3ae700a3bef42a04b59895ea', 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: 'f2d88dcae992749e9b26053f58b133ea11f42345', 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: 'c03a7d75c3c59acae41e773c4fac21e2260c96bf', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'aee9e10e48814e98b334234742b8d9fddc8bd5b4', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '8f8cb63de53e06aba8c24aa775e7462d5c982cab' }, this.modaltitle && h("h1", { key: '7665e53dbf1c7ba2eb9bedc0df36e3b959407f36', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'd069b4cd21e388262db4734e5f19b27b14381d98', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'b7e149a290a5261aaecd47ddc1d53498c182c5dd', class: {
+            }, id: this.modalid }, h("header", { key: '88b3d6d4e6c42c1a130d1f261708a4d8c406f864', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '5ada26490c0add2ab35ec21c3735b09f936fa8f3' }, this.modaltitle && h("h1", { key: 'dbcd5e67d7e607331cf3c894ee39716557e1dc49', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'a4f5a11637ad4a69d330e76756e8ffb23977fc06', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '6745960e3305396d9fbf56388fa667f313d28e2e', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '3b5126b69ec95efe151a424edc24111978a22a5d', name: "modalContent" }))), h("div", { key: 'cd760b0fdb273c8b2166c05834127955c12c6556', class: {
+            }, id: "modal-content" }, h("slot", { key: '1ac1b1a9bbe9f4d20b7fd56a4c91e64985d5cdce', name: "modalContent" }))), h("div", { key: '2b39f911393227c6e92c49e70ebd9710fb39084d', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {