@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

package/dist/collection/components/list/z-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;IALlB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QAEpC;;WAEG;QAEH,SAAI,GAAG,MAAM,CAAC;KAsBf;IApBS,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList implements ComponentInterface {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAClG,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;IALlB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QAGpC,aAAQ,GAAG,MAAM,CAAC;KA2BnB;IAzBC,qDAAqD;IAErD,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAID,gBAAgB;QACd,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC3B,MAAM,CAAC,CAAC,KAAK,EAAoC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;aACrG,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACvB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,KAAK,CAAC,mBAAmB,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ;YACvB,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList implements ComponentInterface {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Size of the list elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Type of the list marker for each element.\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  @State()\n  htmlRole = \"list\";\n\n  /** Watch for changes in the role native attribute */\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = `${i + 1}`;\n      });\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host role={this.htmlRole}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-list-element/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, KeyboardCode, ListDividerType, ListSize, ListType, } from "../../../beans";
 export class ZListElement {
     accessibleFocusHandler(e) {
@@ -59,13 +59,10 @@ export class ZListElement {
          * [optional] type of the list marker for each element
          */
         this.listType = ListType.NONE;
-        /**
-         * Sets element role.
-         */
-        this.role = "listitem";
         /** set tabindex to Host tag (optional). Defaults to 0. */
         this.htmlTabindex = 0;
         this.showInnerContent = false;
+        this.htmlRole = "listitem";
         this.openElementConfig = {
             accordion: {
                 open: "minus-circled",
@@ -81,7 +78,6 @@ export class ZListElement {
     }
     /**
      * Handler for click on element. If element is expandable, change state.
-     * @returns void
      */
     handleClick() {
         if (this.disabled) {
@@ -116,9 +112,11 @@ export class ZListElement {
         }
         this.showInnerContent = !this.showInnerContent;
     }
+    onRoleChange(newValue) {
+        this.htmlRole = newValue;
+    }
     /**
      * Renders button to expand element.
-     * @returns expadable button
      */
     renderExpandableButton() {
         if (!this.expandable) {
@@ -130,7 +128,6 @@ export class ZListElement {
     }
     /**
      * Renders expanded content if element is expandable.
-     * @returns expanded content
      */
     renderExpandedContent() {
         if (!this.expandable) {
@@ -143,7 +140,6 @@ export class ZListElement {
     }
     /**
      * Renders content of the z-list-element
-     * @returns list content
      */
     renderContent() {
         if (this.listType === ListType.NONE) {
@@ -157,7 +153,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '211b41c7cce6dd3c94d770da67d42203fc776d7e', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'a79eb753f19c45eb6c87cbf592e9e6196f7188f3', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c0ec5ddcbdb6b5cea2fe6fa5ec548ca0979fb8bd', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '50a40995617a49ae25c8351bdcef0ed8cbe791cf', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '42e6fa098aebb80fd08b32c8180bba0c76b1138d', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.htmlRole }, h("div", { key: '22e92a49de4b42710f68ca8e39ca1e90ae207427', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'adca72d657b257755ecda2cbd5b50757cf271cdf', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '479602f15efb7232a952b1b50db0db5a28f3ba7c', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -493,26 +489,6 @@ export class ZListElement {
                 "reflect": false,
                 "attribute": "has-tree-items"
             },
-            "role": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets element role."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "role",
-                "defaultValue": "\"listitem\""
-            },
             "htmlTabindex": {
                 "type": "number",
                 "mutable": false,
@@ -537,7 +513,8 @@ export class ZListElement {
     }
     static get states() {
         return {
-            "showInnerContent": {}
+            "showInnerContent": {},
+            "htmlRole": {}
         };
     }
     static get events() {
@@ -589,6 +566,15 @@ export class ZListElement {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "role",
+                "methodName": "onRoleChange",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "accessibleFocus",

package/dist/collection/components/list/z-list-element/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement implements ComponentInterface {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element as tree item.\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n        role={this.hasTreeItems ? \"none\" : this.role}\n      >\n        <div\n          class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n          style={!this.disabled && {color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            class={{\"z-tree-list-divider\": this.hasTreeItems}}\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement implements ComponentInterface {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element as tree item.\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  @State()\n  htmlRole = \"listitem\";\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   */\n  private handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  /**\n   * Renders button to expand element.\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n        role={this.hasTreeItems ? \"none\" : this.htmlRole}\n      >\n        <div\n          class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n          style={!this.disabled && {color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            class={{\"z-tree-list-divider\": this.hasTreeItems}}\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-list-group/index.js

@@ -22,33 +22,34 @@ export class ZListGroup {
          * [optional] type of the list marker for each element
          */
         this.listType = ListType.NONE;
-        /**
-         * Sets element role.
-         */
-        this.role = "group";
+        this.htmlRole = "group";
+    }
+    onRoleChange(newValue) {
+        this.htmlRole = newValue;
     }
-    componentDidLoad() {
-        const children = this.host.children;
-        for (let i = 0; i < children.length; i++) {
-            if (children.length - 1 > i) {
-                children[i].setAttribute("divider-type", this.dividerType);
-                children[i].setAttribute("divider-size", this.dividerSize);
-                children[i].setAttribute("divider-color", this.dividerColor);
+    setChildrenProps() {
+        Array.from(this.host.children)
+            .filter((child) => child.tagName.toLowerCase() === "z-list-element")
+            .forEach((child, i, children) => {
+            child.size = this.size;
+            child.listType = this.listType;
+            child.listElementPosition = i.toString();
+            if (i < children.length - 1) {
+                child.dividerType = this.dividerType;
+                child.dividerSize = this.dividerSize;
+                child.dividerColor = this.dividerColor;
             }
-            children[i].setAttribute("size", this.size);
-            children[i].setAttribute("list-type", this.listType);
-            children[i].setAttribute("list-element-position", i.toString());
-        }
+        });
     }
     componentWillLoad() {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: '08d721c30d9c6f11e4628990bcdb3c6a0f948ef7' }, h("div", { key: '9148e5ba5b02120034499ee9e3ba304a2c7a59bc', class: {
+        return (h(Host, { key: 'c9ad6b3a4638a506c8f8feec372af5f28792e02e', role: this.htmlRole }, h("div", { key: 'f86aa7a374f4a20e76cc528b5a4707cd6e136977', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'c7e244b995fd510f0de3fe5b56fab29645e498e3', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'b7b215bb4fb5d788f51d939277dd63304fecaf50', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '4b84ad375fca78efccb67e39fdb84ea2786951ab' })));
+            } }, h("slot", { key: 'd3c539979304203cadfdeae8f2cdca1c6c427bdd', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '2bc1c3ab6f13b45c164d75833a45ebb7f4f7d241', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'e8586a35a1eb7e346ea4336574bba98b5a8b1bc3' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }
@@ -210,29 +211,53 @@ export class ZListGroup {
                 "setter": false,
                 "reflect": false,
                 "attribute": "has-tree-items"
-            },
-            "role": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets element role."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "role",
-                "defaultValue": "\"group\""
             }
         };
     }
+    static get states() {
+        return {
+            "htmlRole": {}
+        };
+    }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "role",
+                "methodName": "onRoleChange",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "propName": "size",
+                "methodName": "setChildrenProps",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "propName": "listType",
+                "methodName": "setChildrenProps",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "propName": "dividerType",
+                "methodName": "setChildrenProps",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "propName": "dividerSize",
+                "methodName": "setChildrenProps",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "propName": "dividerColor",
+                "methodName": "setChildrenProps",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }];
+    }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,gBAAW,GAAqB,eAAe,CAAC,IAAI,CAAC;QAErD;;WAEG;QAEH,gBAAW,GAAiB,WAAW,CAAC,KAAK,CAAC;QAE9C;;WAEG;QAEH,iBAAY,GAAY,SAAS,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QAQpC;;WAEG;QAEH,SAAI,GAAG,OAAO,CAAC;KA4ChB;IAxCC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"group\";\n\n  private hasHeader: boolean;\n\n  componentDidLoad(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      if (children.length - 1 > i) {\n        children[i].setAttribute(\"divider-type\", this.dividerType);\n        children[i].setAttribute(\"divider-size\", this.dividerSize);\n        children[i].setAttribute(\"divider-color\", this.dividerColor);\n      }\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", i.toString());\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAClG,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,gBAAW,GAAqB,eAAe,CAAC,IAAI,CAAC;QAErD;;WAEG;QAEH,gBAAW,GAAiB,WAAW,CAAC,KAAK,CAAC;QAE9C;;WAEG;QAEH,iBAAY,GAAY,SAAS,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QASpC,aAAQ,GAAG,OAAO,CAAC;KAuDpB;IAlDC,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAOD,gBAAgB;QACd,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC3B,MAAM,CAAC,CAAC,KAAK,EAAoC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CAAC;aACrG,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAC9B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACvB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,KAAK,CAAC,mBAAmB,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5B,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;gBACrC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;gBACrC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;IACP,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,QAAQ;YACvB,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  @State()\n  htmlRole = \"group\";\n\n  private hasHeader: boolean;\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  @Watch(\"dividerType\", {immediate: true})\n  @Watch(\"dividerSize\", {immediate: true})\n  @Watch(\"dividerColor\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i, children) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = i.toString();\n        if (i < children.length - 1) {\n          child.dividerType = this.dividerType;\n          child.dividerSize = this.dividerSize;\n          child.dividerColor = this.dividerColor;\n        }\n      });\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host role={this.htmlRole}>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-tree-list/index.js

@@ -93,7 +93,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'f8d5b24a7d7dab5b6dba9c06b363c4015448f982', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'e793e18b4d75c537cb5faeb5f839ad5bda28e60b', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '266f20dbd53ba5e756e0fec544179e6bb319bd18', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '349d5a894c529036329f17c79b319e64e2c86731', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     static get is() { return "z-tree-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-td/index.js

@@ -42,7 +42,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'd48c0f41f353bf19a650973a10cd9f8bfb72aedf', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '823e804797fc316c820332a7bc7a6af1fdf80c3e', class: "cell--content" }, h("slot", { key: 'bfb42239a9e8af8330f6e561e1c0d40d04d373f4' }), this.showMenu && (h("div", { key: 'b6cf943ad3891ae50989d28f73dd0870dd9de49d', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'b8cfdfdaa770c92309dc53c8cb3fc9e5cd1f7606', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'c3f967afca1266c59228d66e209b8a51ed438944', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '3081db49642adc7df0abb8b018023803a1fe4892', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'da91e90c7f553840c642aabd1a4ebf17623791eb', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '89541c4a1c5edccc0c3b940591ffe32e72de44ab', class: "cell--content" }, h("slot", { key: 'bf3c8b8458d6737f08d731c0e7c15d57a28e54c4' }), this.showMenu && (h("div", { key: '8d4dc82cf51219ef93c8bca773bd24d45ea51a2b', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'fc08af544b4403f12a2856b679acb5024dfb1a3b', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '9fe54dd192458e543fff45539b59c1c60e1ac67d', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '5ca045abb9e47bf27b391024c940dec3f37b3cff', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/index.js

@@ -70,7 +70,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '25ff71c64f855e0245527ad385b724d28ddfa08c', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'adaf75e819e1692cd89903665e8e04d81500fbd6', class: "cell--content" }, h("slot", { key: '6d7b2ed1bc4c4aeedc75af807fddd1478fe460eb' }), this.showSorting && (h("button", { key: 'a6d100b0cebfb956df0b8b052867ab05e0f0f268', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'e2d0cb1d16ca0160266cbff0eb3d1f0e7e8da99e', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '7b2c8be782cd2e06bec91068b5f4e0c0d15fcf06', class: "cell--menu-container" }, h("z-button", { key: '76881e9c6280fa0eeca09ea062850afc10ce87af', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'e9eb5e63d106dc3d0785fe2986caf9fa70105134', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '3a8aa0c828cabbdc7ffac2cc33f8fba5508652ae', name: "contextual-menu" })))))));
+        return (h(Host, { key: '8e83039c2100fa4df3e205d6a4819cdc32b4789e', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '18c67051c7eed356980c97b08bd4981b5d8c9b18', class: "cell--content" }, h("slot", { key: '05c6564192e37a01c6f79c81db4b7732dcc30451' }), this.showSorting && (h("button", { key: '45f0e2087f6050567bf7978f8421a146912e2cfd', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'e53ad878d055d82b518212c99385b4d394503bf9', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '660f2abf11cc879c3a5855149fbbfc7b57578b6a', class: "cell--menu-container" }, h("z-button", { key: '37905939b31eeb5051ce5824787309629a935f14', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '369c0918f021e0699c2178b2b023126fce518073', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b3364b3d95e4cd92fefce41bfcbb995b2b5eef70', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '049f897c8de91812feb63d2c21a37f0bd3cee57f', expandable: this.expandable }, h("div", { key: '50dbde44d7ce839bdfbab7cf449dd4167c13c7e2', class: "table", role: "table" }, h("slot", { key: 'f624fab82612a01e4703d9096c6903208a4501b7' }))));
+        return (h(Host, { key: '57c350effd561866272d6267acd7db3d64973c85', expandable: this.expandable }, h("div", { key: '6f7b80127ebb7e0ef5e3723a5f493875df2d17bc', class: "table", role: "table" }, h("slot", { key: '422ad73587d948d56d87cce18fd7d795900e9881' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '52f0046b724886e17a26bcde69958a67d61341ad', role: "rowgroup" }, h("slot", { key: '811484333a52617d5ae272967e8927c6c310ff95' })));
+        return (h(Host, { key: '494ae067968bb22102d480f32b06f672eb88dcaa', role: "rowgroup" }, h("slot", { key: '91b431bc8748313e79673094e668b1fafb2598e5' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'd16ef7f2814892fcef9c2a76266965965611ec42', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '35422d2506d32edf1668487bdd1974b9a92ad4fe' })));
+        return (h(Host, { key: '0fcde5bee7935573e01260c97561df41a7867e3e', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '42d7a054d3ec73269cc57a44775a41a2d7584170' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class ZThead {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'da659da3d9e19e184e1aa6549daedabb101ce389', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '8f2f180a4a539234d6c29f1f8266eae3b5f3d21a' })));
+        return (h(Host, { key: 'd7fa2e798c78f08c9ead7330d1b0d0893e197d56', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '57ced6d7b8cf3859959f80d1af3eb72b17d69eb0' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '554aceba8b99d8655ecc8a94af9db10d031b10af', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '43b0dea34f2a462e2f0f0eb3412cbde4cb68685c', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'b9dbe2ceeae6650956992c47e605928108597541', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '49adad5b59d11110633b82d3880f5c91392034f1', 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: '47d28d342352b04c53c3e9f4e770c2a919571150', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '3cb8eca4fb990d843d1f811b8274196123aa5937', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '75b2709b15c266ccbdef64b1b610775271d8578e', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '5952a68ab36814d24e490cb183ed36ef476f3174', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '80c7b7130eb34822abbb6804d1d613f87bf0dc35', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '037ae6901e951599464a876b8c6f5c779f5f070e', 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: 'bc0e8dc8b429911c1e958005c4447bad6d25a504', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '2f9a60636fa6f29279a82eb99ba3ed8034708db4', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@ export class ZAccordion {
         this.checkSlottedTags();
     }
     render() {
-        return (h("details", { key: 'e957004c881c5d6d78ef08e2e0e2e5d6a24c89b7', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '2aee81012aa94c58ef08c9a6095523efb00b8c9c', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '6a09efbc17df94ff2141ae999904e281ff9d6136', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '6b925bf04adee74c040cbcf09488a4e58d2b5c02', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '95a6cd60ebf18ffc2d7a94c9b0204225b932a810', class: "z-accordion-tags" }, h("slot", { key: '179c326ffd592f16947999151b08ebc968e46cf5', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '88a53ab505c15735e911d27fd89676de76b488cc', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '327a2c6da908bb660b0e2301a1e345ab1eafbe15', class: "z-accordion-content", part: "content" }, h("slot", { key: '950f8a2c6c44d1e3e4411a940e4bee191cc6b3a6' })))));
+        return (h("details", { key: '0400f292718d11e914939c7276fff21a8d07b5a3', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '215728fe582184bb8f39815e96fdc4a34f983ea6', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '05e95bad3e66ab3730711a9f5cd1077015ef48d7', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'babacc83020de2cdf14588e184d8834d0eb87029', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '01ba1004d19c5e9b394f286f2efb0112f4c70e1f', class: "z-accordion-tags" }, h("slot", { key: 'e6a74b5c588056f46dd07b28e24f4cd9b10cea8a', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: 'c71ca8f7f20de925508801cffe7cdb690a21dc4b', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '96abd1bf924f77162cee791269701180f22f096e', class: "z-accordion-content", part: "content" }, h("slot", { key: '8a1618b8228c985ad7d229ca78f056af6c2dd469' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: 'b059600c9eaada10a4ed37e0a5c39c2ba373a9f3', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '4bcc1d04ad8f6666eba33c20200dd9fdd57e4fd4', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'eb0da78055d1e8af036032ea6dcc70e7d6f52702', ref: (el) => (this.nav = el) }, h("slot", { key: '8d938246f34f89d9aa36196c1be2df7c8ab0b1d2' }))));
+        return (h(Host, { key: 'f2cbf308e24c100b40858ad4370d7fb1b83c91b4', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '964c11320f7dff05208327e7f591ea90bad3763c', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '21a8634ee51e4a1a824685e95ef58ed6a87e10e2', ref: (el) => (this.nav = el) }, h("slot", { key: 'bf93f6bd1d2948839da0e7e103f05ebd55135a33' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

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

@@ -274,7 +274,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '6ea43dd25c57ed4292a243326d7c8af37e88175a', "menu-length": this.menuLength }, h("div", { key: '2909e033b13f3c3703ba3402dddd58ab93de9d83', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'f4db1b9e05adb9ec6abfc5be7d7eb03d23cdadeb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'd654db6c1f20676c702ffd55896f74dc83b008ae', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '9baf1c16220364d06665b2e77f3f40c22abf9312', name: "top-subtitle" }))), h("div", { key: 'cd2665cc5b5e3528080ae049ff5c1b1b259387f8', class: "heading-title" }, h("slot", { key: 'b52786726e900d20c4f7251650fe828075e656ca', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'fbb0a8b9d580ffef099072782f9efded6ae448ba', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'e4d4bc464bcb11330a096582abf0ad7b4f95aed0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'eb712a6bd2324625dbb4647aa3e91e3c1bf21340', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '90d4f9eb7b361eb8e394a504d3779ea80241bc32', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '3c87b576bc0b22b6466d371cc1e5a6c92632cb3f', "menu-length": this.menuLength }, h("div", { key: '5fea095adcdc48b7ef7f1a2c0a9fbebb2f774f7c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '4c2af7cd90d3aed866fc0bb1e12c3a7040b8eab7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '123f4dbda4424a699098f8cd56e6e0af285555d9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7e46ed5fcf49e61c69cd808f323e642bd1dc8f44', name: "top-subtitle" }))), h("div", { key: '459505e2ebe168001292351e85002584b6efed1f', class: "heading-title" }, h("slot", { key: '579d2eb490d5c876b0a7ffd111c923d2240a5e18', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'f6fc213fd474fd75222e2dafc044624f4c468297', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '792cf8b185cf12ae234a5e75f8dc4db33fd97e98', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6f8e3558678da2a099aa86f63d2dcbc4be9762a3', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'aa700689a8b05503079e69a5808442db280e8e4e', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '14114aba44f89912d75d4dbc41a92e2401528579', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '1246d14d076ae5642666e7edb8416125bbe97eb4' })));
+        return (h(Host, { key: '55fc317227e17c4c018d382367f0e243a769df3b', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '749d024688dc33287157e9405cbac013fc59a197' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -25,10 +25,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '4416af5640de2f1c6dbcdf5b5370ef35359ff25c', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '3420b1414f9869a0715dd0510dacdf7f5189d60a', 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: 'ee5a7db56e171e0ba4b9f124d4a3794628b7eff9' }, this.text.substring(0, 2)), this.image && (h("img", { key: '899ef0de0537c7bd4d68f5656114ba0fd2cf9881', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '0af7952baeb4cce47b083d508ab0ca0cb961e724' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'd74633bfd9fa75ee84cc2070ee6a549e755821d2', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class ZBookCover {
     render() {
         var _a;
         const hasAlt = !!this.coverAlt;
-        return (h(Host, { key: '4959777b26c741f28dda69863f49c0397caff9fb' }, this.multiple && (h(Fragment, { key: '8c233e819266fb48ace0ea12609edc99aaa1ae09' }, h("div", { key: '1bdffd9c1c61c2622bc805a2dafa0889c9363cea', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '4f5deda96190fd73cb0682bc696c9248bbe80642', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'ee5aefb424d44af9bb74a02325c19e337a144d29', class: "cover-container" }, h("img", { key: 'c5e44fb85106ba31f0b00ce4a878c36c19da37a3', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": hasAlt ? undefined : "true", alt: hasAlt ? this.coverAlt : "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '9db828601df2de1c0dec697d5796bfb47abdf2f6', name: "coverOverlay" }))));
+        return (h(Host, { key: '5f1cf73c34673b19270dfbefa968ce8cfc887782' }, this.multiple && (h(Fragment, { key: '02eea3c4d3769a36aaf2eb250ef1220bf23cc69d' }, h("div", { key: 'f3de7ab44c13bb5c276b88e254a7ebb0b1a20ba1', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'ce383b583c9004171014cdf59dd49e61930308ba', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '4bfc40b8be81356755cfed89ed13a4f84ba9228b', class: "cover-container" }, h("img", { key: '036d55f6f830685a33f12f125d317b935da28454', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": hasAlt ? undefined : "true", alt: hasAlt ? this.coverAlt : "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: 'f7c0eb82d8d230bf53d0e4e5d89ab35623c5bca1', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -205,10 +205,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: 'ea18e6bec466825e194807d80ecf0c132915b8a4', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '080ce8ea0bc8dd13d94e1ded21878f61a8e1f09e', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'bb7e05dd63d6f37cb7f4016c2ba10dbed4473e5e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'f877a18b593ce5e14a0f70fa9ed39ae64652eba5', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'ebced04e4063e2db12f1ab2a5fa39fdb447973fa' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'b6cc66aafa4a823e7d315c31a00d9c28005e4c60' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }