@zanichelli/albe-web-components 18.5.4-RC1 → 18.6.0

package/dist/collection/components/table/z-thead/index.js

@@ -6,9 +6,10 @@ import { Host, h } from "@stencil/core";
 export class ZThead {
     constructor() {
         this.sticky = false;
+        this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: '8f4e7bb738d8d4cf6aaf83faf5b2ecd4ed58feac', role: "rowgroup" }, h("slot", { key: '2a7dfe21b40cb26c57c98b6cae40dc801b22e7e3' })));
+        return (h(Host, { key: '17fe1d87112460ce7b7dd16e72cb3be1b92c7eb3', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'ef0c0e95a383057b7ed5964f7c24cb8a59b31808' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +42,27 @@ export class ZThead {
                 "attribute": "sticky",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "isFocusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The element is focusable"
+                },
+                "attribute": "is-focusable",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/table/z-thead/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhE;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAOR,KAAK;2BAMA,KAAK;;IAEnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-thead/styles.css

@@ -17,3 +17,8 @@
   top: 0;
   box-shadow: 0 2px 4px -2px var(--shadow-color-base);
 }
+
+:host(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}

package/dist/collection/components/table/z-tr/index.js

@@ -39,11 +39,25 @@ export class ZTr {
         this.expanded = !this.expanded;
         this.expand.emit({ expanded: this.expanded });
     }
+    onKeyDown(event) {
+        if (!this.expandable) {
+            return;
+        }
+        const active = document.activeElement;
+        if (active !== this.host) {
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.expanded = !this.expanded;
+            this.expand.emit({ expanded: this.expanded });
+        }
+    }
     componentWillLoad() {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '6b028d12da65adf37eb6637ddf9bfd06d9f0db24', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this) }, h("div", { key: '598c2865ff6df8c8b6335e08a559407c6074bc6a', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'b6b1ec7c8817f0a2494b509f536d640d54012620', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'ed1dee7ce70dfee25497d7ba33ce3655217f6d0f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '13d5eea11840b0a28dff58fe144791d8e9cfaca5', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '5a8cbf39900a7569b0fb31d225be6fade59c82ea', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '75f7a74a6eda8f50d40beedbe387da74d58c276b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'd34b5aa1778f3d830fd80354c79cd93a9b703737', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fef99c968e191fe7970665b9a45721fada207db0', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'f1cf676da370f0c2500914decdc5f09e1e647b7f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cd09d8ed8cf0a33137d4d1d91ec9720227f359ba', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;YAEnC,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={0}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const active = document.activeElement;\n    if (active !== this.host) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this.expanded = !this.expanded;\n      this.expand.emit({expanded: this.expanded});\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={0}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n        onKeyDown={this.onKeyDown.bind(this)}\n      >\n        <div\n          class=\"z-tr--focus-overlay\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              tabIndex={-1}\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-tr/styles.css

@@ -1,11 +1,12 @@
 :host {
-  /* number of columns of the row. will be set in component's ts code */
-  --columns: 1;
-
+  position: relative;
   display: grid;
+  width: 100%;
   box-sizing: border-box;
   grid-auto-flow: column;
   grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));
+
+  --columns: 1;
 }
 
 * {
@@ -55,6 +56,12 @@
   background-color: var(--color-background);
 }
 
+:host(:hover) {
+  position: relative;
+  z-index: 10;
+  box-shadow: 0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%));
+}
+
 :host(:focus) {
   position: relative;
   z-index: 20;
@@ -62,12 +69,6 @@
   outline: none;
 }
 
-:host(:hover) {
-  position: relative;
-  z-index: 10;
-  box-shadow: 0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%));
-}
-
 .z-tr--expand-button-container {
   display: flex;
   align-items: center;
@@ -88,12 +89,36 @@
   visibility: var(--show-expandable-button, hidden);
 }
 
-.z-tr--expand-button-container button:focus {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
 .z-tr--expand-button-container button z-icon {
   --z-icon-width: 16px;
   --z-icon-height: 16px;
 }
+
+.z-tr--focus-overlay {
+  position: absolute;
+  z-index: 30;
+  right: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: none;
+  inset: 0;
+  outline: none;
+  pointer-events: none;
+  transition: box-shadow 0.2s;
+}
+
+:host(:focus) .z-tr--focus-overlay {
+  box-shadow:
+    0 0 0 2px var(--shadow-focus-primary),
+    var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host(:focus) ::slotted(*) {
+  border-bottom: none;
+}
+
+:host(:focus) .z-tr--expand-button-container {
+  border-bottom: none;
+}

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

@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: 'f7be56452b2cde8f5d4334c5d7ca5ebc0e119a44', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '84fe90e0b7309290d1d1649032d0d5689ea26ece', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'cbb8d8e385b9966d688eeaa65774d8612c8f51a4', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '609df343692d9ab5d7834a008cbe9f369dd25b2d', class: "z-accordion-label" }, this.label), h("span", { key: '2fb0b9a8d27bb9eceac332b90fcd4ed249fac7da', class: "z-accordion-tags" }, h("slot", { key: 'f7bd4d94db31698da39024ef0c0750388e63b821', name: "tag" })), h("z-icon", { key: '76503d776cacb956702720eed3bd21eff48ef2ce', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '28949aca06f11637b2fffd7e6a3c037809a781e3', class: "z-accordion-content", part: "content" }, h("slot", { key: '24b9441a8563a113f33ba5f5b9a7f170feb458a9' })))));
+        return (h("details", { key: '75f8a546aa49db6a078ee035a359ea512da290a1', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '83cf68bd5d118bb43dce8aed36776bdb6f31df24', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'b718c6923a9176504f1c4f05e706938fc44aabe9', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '5db96b4f3f565e6e746fa1d339edb72839900a7e', class: "z-accordion-label" }, this.label), h("span", { key: 'f6b7bc7ce502d25be290af4ac3f257b8f2d88142', class: "z-accordion-tags" }, h("slot", { key: '304b3ac5f1cd58e9e3532e4e47109fb569d7a14a', name: "tag" })), h("z-icon", { key: 'ad373df60eafcabe0f707a74cff5bacdaeccb531', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '3997863313ebf787bdc1ef101fb46ab4ed9fac00', class: "z-accordion-content", part: "content" }, h("slot", { key: '1870a604a2949390f50ef03e5d9f3a407a494023' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '3a2bc3f92ecf223c95987e33c48e14bb03909fac', collapsed: this.collapsed }, h("z-button", { key: '5d88809c9fcc1a1ea1d163c3111367038da64f19', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '9f9eabbc84d1fe9ef578cc44b2a73d871c658ab5', ref: (el) => (this.nav = el) }, h("slot", { key: '44a486e2caa4b56f8556494f6fd8c4da8e076e7e' }))));
+        return (h(Host, { key: '7416cbf3c13605bab5b696af6ed5a63ae5a0ff4b', collapsed: this.collapsed }, h("z-button", { key: 'f4601704ffc2de21501aa18f3c9f79d50ef873ed', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '03029584b0971a53446e2db85b7bab98c9726495', ref: (el) => (this.nav = el) }, h("slot", { key: '22d203408c1172cf46fc6f3da0d128fcafb3d06b' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

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

@@ -256,7 +256,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '607b7e24e9f285a68b2b060594d7f05e1858d5cb', "menu-length": this.menuLength }, h("div", { key: 'de8f54eeebf6566e213aa26f938de37837a4eaee', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'f11b563767f199727353f296321d0668f8444465', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '19345fabd859f0d6bad18ee1cdb1c03d959f888a', class: "top-subtitle" }, h("slot", { key: '47a905ab7dc9c88c99d296bc57021bb15ce5ca12', name: "top-subtitle" }))), h("div", { key: 'c2143a9324af347082cdd40584622818f631cea3', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '90ebc7860504f24edf3b4380d716eedf4674ccab', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '43fb23d049539010c329b0b4c03df3651ad0962b', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'e08c4cd11e0fb472ae66ed70c7129977175eaa1c', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '5daa80b2f4cd1274f2cf564d29677a2c426a4359', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '01bcf2e73c2b4da9ed2c9bcf19ceeece56bd738e', "menu-length": this.menuLength }, h("div", { key: 'adf412ee992b488c6e87b7e2f82265c7e6a13b8c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '015996363351b8b81ee50bffd409d8a41edc4008', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '98e3fd2bc1a55fb77dfb00fb55708f6520461bb5', class: "top-subtitle" }, h("slot", { key: '068c16c8cb9496933955c6d68ac8aa1326640688', name: "top-subtitle" }))), h("div", { key: 'c7a806a4af8d099f0c6bc70cefd03f01467b235f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '45a99fbbb889355061ee3230d5825110d681e26e', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b9ab704c754800865087d45791257a6191b847e9', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '0dd28fca9d831513a3f29041a33da0b9935caa3e', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '35e03382a70e5601c8d02c26731ba434d795de0a', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '583949db78c250fbedcf782e8985635f23a109d8', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '12d852a544ac602c33237d7f24124bd2fd47847c' })));
+        return (h(Host, { key: '507fd85bea3bc6cdfa0915afaf57866e29cc36e3', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b28a7129f907a00beb9e5aa186f2960d7d6c4d1d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'bf7dc11b7c8aea57303ce02812fd487a78248d46', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '8ce8c6ffe56b55036f9f47146041fcb91051ad36', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'f5ff0b0ef02d7d69ada96f344f32dc8daccd5437' }, this.text.substring(0, 2)), this.image && (h("img", { key: '7df4cda5d4028d7397b70e1181c846bc9f84e19d', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'b989378860518c05074dcf3cf445df062679f3c1' }, this.text.substring(0, 2)), this.image && (h("img", { key: '56a3a248fe3f88b2ed285f6a7c133b542ca21940', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,10 +199,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: 'a92078ad9a4aa1ac4689c66c765afa5f113d16d7', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '99259d02797aff8396f3a87af0ff40d1c97e40fd', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'bd4614a169bb3bd236c84b4b75de459189c6ebce', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '9148dec5bf9bdc9ea5b7a1bd67b60d85cbff688c', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'c232f64c88e3bff47af1250385589ecda393b4f3' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '7c2d74ec32b18e22f444a9ab9ed3c6fb04983558' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: 'ad7184ad09e3c07eb2e2b548775155006a67cb6c', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '84451899a4c8ccecb759144f7c2f991628e2e998', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '6b18ed6bdf9466de296625afd14fda3ac5180d7b', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f44bbe9cc7bb39a850acacfe9066e6458ef3d3e0', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '931fd0149c14840cfe0721a5af9eabb0dcfb7d24', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '48135e022855d78da6ea11bf643bb6f3165a5ffc', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '211cf02c4ecf6558030ca0ad16bc12a657a5ad99', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '93e81849c1aa11be20b258b7c6156fa006d411c9', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f3a1e05c2fb37fc36f724d1760a691c45c8397e9', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '34fb2d58e925c18101f17e337332faf1cf55eecb', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0c1d69ed8078ff340f797d27d2b74798471c001b', class: {
+        return (h("div", { key: '4b4a07ba069a0392343f826702b9d221fe76f0be', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'baa00891b0130541f3a820a08678d2f1eef894b7', name: this.icon }), h("slot", { key: 'd49c8dc5643a7f42f62ab086f9ae97da18aa2561' }), this.interactiveIcon && (h("button", { key: '970f2ccfd3cf3718627e8aec7bfe06d957694030', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '68c899a4e14a204eaac9fc7d2be37dfd5af1b087', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '1adeb5f9343cfd12208342e2028ba802f5aa6dd6', name: this.icon }), h("slot", { key: 'ea3d86af473a049622e6de91dc6dafee0499da05' }), this.interactiveIcon && (h("button", { key: 'd4d2eb2c77d2a1224e0582500fc329a381e07a20', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '7d4d4743ac1c87882732f9b5145afc70889dcac2', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '5f5a261815a1e041fe8958fdd5444b7b0a49845b', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: 'c746599f1d5cef116c2319d365792288d6f0f34b', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-cover-hero/index.js

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '9d19bccd90d41d823dedfd22d4735806513e02b4' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'a95198a28808bea34edd9dc283fa9770196e1bdc' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'c700a2f18c53e2ee3f0893bb5e06c591847cbf3d', class: "main-container" }, h("div", { key: '32d74cad8e5c8ca8e6bf14a98dda4f490eca8983', class: "cover-container" }, h("slot", { key: '3b54102807692fa0bd3c13ec02ca577dd817f12c', name: "cover" })), h("slot", { key: '330c4c5cb791cb34d6ae5c797f5af17b55e6173b', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '2a80380b0daab0661249370372204adeb2d477a0', class: "main-container" }, h("div", { key: '69a62950d3722871c6a82d3a771b0bc0a971358e', class: "cover-container" }, h("slot", { key: '0dcecf6ab18b8a42fb21b8573729094cfdbaa83a', name: "cover" })), h("slot", { key: '6c841fc5167924badc3ceb44e51757c6056a2dd6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '04573f93294d9e35e7901c677476414b9d1eb74f', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '8a1e8b974fcbb5e77c9ee30d3fb08886f4c0e733', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '06569bdb14202a00a873fc4d8336448b20115378' });
+        return h(Host, { key: '92040be77ff2741acd6f13352ff13c550524c78b' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-box/index.js

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '97f595bcb0456f5a5178d713253f44798e97aa64', id: this.boxid }, h("slot", { key: 'dad87fab0f68993bfd0c255b10d7949e8df64ce4', name: "content" }), this.isclosable && (h("z-icon", { key: '405f33531ac9fb80f1677837c4e873fc609b289f', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'ddfc024530dd4382eb2f01d06e2832b9cfb32a4d', id: this.boxid }, h("slot", { key: 'e8bd8f2beaa72a8b03b20f1788afcd7fc1bd9dc0', name: "content" }), this.isclosable && (h("z-icon", { key: '403b33b87cced253f883b20640616d1b34d91f6b', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/index.js

@@ -50,7 +50,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: 'a19485beada104ab116a2eb280d976aa608260aa', open: this.open }, h("button", { key: '504213f62284cc74ed74b651a3a54dcd9715a1f1', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '4fd422856292ae26d66a04188abfb74c5e809141', name: this.icon }), this.label && h("span", { key: '4753636fcf7c98c077a93ac783b22b1057492bb5', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bdff08efa35c74951b48d909e83d7ccf32079460', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '441569ddd80537294c1d66a1555423c460f7f8c9' }), h("button", { key: '690e9a97f7e77a6de567030062d159184106b725', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '1e110ca5a85731ec582d4696f72e4b010593d9eb', name: "multiply" })))));
+        return (h(Host, { key: 'b139ec62ca6dd929c5f26621bd2ef1fa64b4a653', open: this.open }, h("button", { key: '1ed8f8db4144375b4f56d95981993affc17639a3', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '166d7bef728bb7bf91ea593bcc9e0b6786f15b41', name: this.icon }), this.label && h("span", { key: '3e5f4b7ca4bedfcd533e2cd4270eda603905f18a', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bd09825f3606ff127d069d23ec68834985d1373e', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '85051148d2c53c1ae0592ed158c84362ad006098' }), h("button", { key: '9dc246c07b8ed8022c9e56605e94cb1fe1afc1ec', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '4bbcd8dc12f435dba963ed49f2529db8cbf03339', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -259,7 +259,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '892974fb87a1a32879701db724f7e400931ef4dc' }, input);
+        return h(Host, { key: 'bc21d1112cecb0bfbcc8e27b5e1f33141a8542e4' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,7 +18,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'ef26c50e4e8f21bed23b6b530f34866bb9d746af' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '1c701e5f10e96e549fc3e799cbc16099f2032956', name: this.statusIcons[this.status] }), h("span", { key: '9a12b124d65a4b4ebcb9856ce6e9fa275d96ac64', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: '4be98ac32b40898013cfa95bab53c6db382ab517' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '8b2e151decf152944c2d02007c96069222032a33', name: this.statusIcons[this.status] }), h("span", { key: 'c03efc0a6313ed89e46527fe20ec3007e81c392d', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: 'df9ab886a8af4c38414cb06e6ecc044154338e67', 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: '107d3f66fc6233193ff9d1fd728787c3e059fbf3', 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-menu-section/index.js

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'b308fce3890a3094dca7d5de4f5837b47d6f2796', open: this.open }, h("button", { key: 'dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6', 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: '74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '8338d8b57893c110475fe980320310236abb3446', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '4df11f5eaa5226c24930527caba7f0bfa048946a', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '8393b22b945ec02e32e78248090505a012529253', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '4dce34f277ab3c8c41171a15a02fd174c45742cd', open: this.open }, h("button", { key: 'b6c535e87dbb5af8808d7a19556ad116cbcca72b', 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: 'fbbba483ca5fe6d45440c01a89f061565ce641aa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'b4c67b7cada94580b4f5853aaa8cbb9818bece74', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '711c085b5d74affb2c23ebd1acdd774b5903e7e5', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d', 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

@@ -123,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '8b921668da4604e386536b7aad9f29aa79f8c070', class: {
+        return (h("dialog", { key: 'eebc09ed6ac159c725b0614bd7ca030699b05b9f', 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: 'ff7c0a54c27501f0de55fa051f4181dbb67b45f8', 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: 'a422d0d13979d51cd4b48f30077962b7b1cf91d3', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'bc3fb5a42fc5b9b7a4a0772edc128b3b2cdb4145', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '0dbf87678b992d60df083e61f301ac43df103dbb' }, this.modaltitle && h("h1", { key: '7e61c3c9efc52d5b8d9a457907af76f9e10365a7', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '594aedcd430c5f132973c59dfdba288b657243ba', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'ac5d89b074eb7ab21acd3a5ae0846f96f2a9df66', class: {
+            }, id: this.modalid }, h("header", { key: 'f605cdc8fd3af1f94fca27de5d4eb088769d592c', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '77d079642e8797ecd131f42dde419964b315858e' }, this.modaltitle && h("h1", { key: '1cf2c6917e03b6a9198ed86e03414191f01ae760', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'dd6b44a5c67c1cb3a76252aa172d12a639d63153', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '8d91575e38810d7b93cb75807d985ffc5689ea67', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: 'f6810e73b2dc2fc698bebed654698d267b113f11', name: "modalContent" }))), h("div", { key: '65bd11b7941467700592d45edd0ec078cde6f145', class: {
+            }, id: "modal-content" }, h("slot", { key: '3ff48549ece0ec01d7ff6714dbae41998cd64bc2', name: "modalContent" }))), h("div", { key: '08004938884c7984cbf535653e82ce775c559d48', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

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

@@ -221,10 +221,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b7bdbf2b202dead64ed98f5865e9d46e71898bf9', class: {
+        return (h(Host, { key: '5216c71c53d3263870b4d64749554c36dadfdb8c', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'aa1df34b54cf4b8848aed44cd3927ee17777a34b', 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: '2bad56e221bc2691d8ca6cea0a013c6d92d7f8c1', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '8dd45e59019ac799f1fffdf7245d0c902455c0a6', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '3d243470caae97c068a2ae23b05078695c2ae367' })), h("button", { key: '080cf9e973e320a795c95acfb3bd41b4ee9eacd9', 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: '293fc3b81bee46d928c8461be0225be73efcc9bb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'b59fcef70ff51453d679678caabae7f69a3a91d9', 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: '2f2a9f0630c6f7c340132bfde3c90c2392ea3f07', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'f8e06aaadd56dfd9e1ab068a4a0d5633083b2ca9', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8f1062acbb5616c395cac371d8737660f69c5326' })), h("button", { key: '28342d0ad1c43119862b148b550c57c352d6a07c', 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: 'e975d966cdc0f0f52345bca3cb842cd0672783b8', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-navigation-tabs/styles.css

@@ -134,7 +134,7 @@ z-navigation-tabs > nav > a {
 
 z-navigation-tabs > nav > *:focus:focus-visible {
   z-index: 1;
-  box-shadow: inset 0 0 2px 2px var(--blue800);
+  box-shadow: inset 0 0 2px 2px var(--shadow-color-base);
 }
 
 z-navigation-tabs > nav > :not([disabled]):hover {

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

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3681c9216f7ab0ce532c8b1ed013d7af611151de' }, this.contenticonname && (h("z-icon", { key: 'e7c538a5583873ed4ad95885f1199050b89f6732', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '93855c8906e6a65fa2d762fc447d14ee7a456b53', class: "content-container" }, h("div", { key: '526f760b7739c28154195e7a01ce66b185ccb068', class: "content-text" }, h("slot", { key: '56313ec91ad750e57af3035455aa89db3880ae4e' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'fc2de2fa3ff7cdf5e522f009efa41af06f8a6cca', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '3ba0d198a3617d1a05fb33eb8f3ceb9b0d685503', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '0bba4473674bee1c8c4abbc5792c9cab84c06088', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '1476969ad9cd71af738c1032fa1b426a31faef9f' }, this.contenticonname && (h("z-icon", { key: '449b25859ae4f501b42d4c4cd0c26cd9dcb1935e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '5b8feced4f05c6e14e6ac7e9a06096db6fd93997', class: "content-container" }, h("div", { key: 'ec6a27aebcc0d60efdb5fd3cb29cc7fddc441331', class: "content-text" }, h("slot", { key: 'd66a3fbf761e5460f0d52c5111b07166c59fa7f4' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '73f5c71a14294c230342ef7382f9ae3fa2b330ce', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'a0be489166ad16faa182adac379ce08ca06317ed', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '254d0f36a6ee1a356506db703658053959020070', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '299c69d8788f7cf2e12b6f6eb151c3b7c5e4e271', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '2620f2f0ef0741cbe6e5d63f7ed38299fb253852', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '1df851d5c4d1fddb24a62c5e3d92a7181bd36d05', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '89303666352d55c9a92a0b4cecc9bea8d42125f7', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '197e3eb34f5981c52a553875157a3a02993f7684', class: "canvas-background", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '0c9caef91e7fc366aeb0bceb20902f220b153dca', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'f3fd979c181a32a8c647f3f6eac1603658696629', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '80493b2714dcfc795c8820c4a6d5e865f0bbb715', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '2512d43345e106c728c782f91e93973a5f55bfe7', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '939b5ea940e96fbcec87ff7e48b6ba578ff0848e', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-panel-elem/index.js

@@ -16,12 +16,12 @@ export class ZPanelElem {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '0812aa28734e176eaa553ba98011e4e9c7e9522c', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'ad62ef2a70a88716ef12b177117e820267e62762', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '8891d636ff439e25801a60a14e65e4dcad6d6038', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'aa1275fe9fa4f33cf9c7151bb192e9acce2d3070', class: "panel-elem-link" }, h("a", { key: '6500ac1c11088d22b12de3c63fd8e065c0cf100d', class: {
+        return (h("div", { key: '90afba46bcde1bd3bd27b35c6e5db38ce9071aee', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'd9493560e96ad743ae3ee52be6c9205b6014b8da', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5bd7c14c0083b9fed6e320a4ef4652018abf2762', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '4cbebd354b6b3b56304970aedb0e94e084d49a9f', class: "panel-elem-link" }, h("a", { key: '195ec2e77eac163c65cf746faa114f39618d2abc', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '143e204c1d1bd20178a46a9d77110b9219464c99', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '9215d44929526bc6e9b8034debbec3f23b00d5ef', class: "panel-elem-desc" }, h("slot", { key: '036bc705038c03e6c021807f5d2217208ec46c9c', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'c11c35e5bff66d382b309fece4bec295abb1a0d4', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '319374f4955314400344ce558486c6afa36ca4f2', class: "panel-elem-desc" }, h("slot", { key: '7e7dcf38991bc7f67ab164e4bac9d20026fa29d9', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }