@zanichelli/albe-web-components 19.1.3 → 19.2.0

package/dist/components/z-toolbar.js

@@ -0,0 +1,165 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as KeyboardCode } from './index2.js';
+
+const stylesCss = ":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}";
+const ZToolbarStyle0 = stylesCss;
+
+const ZToolbar$1 = /*@__PURE__*/ proxyCustomElement(class ZToolbar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** List of focusable tool elements. */
+        this.toolItems = [];
+        this.htmlAriaLabel = undefined;
+        this.currentFocusIndex = 0;
+    }
+    componentDidLoad() {
+        this.collectToolItems();
+        this.updateTabIndexes();
+        // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows
+        let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns") || "6");
+        mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;
+        this.hostElement.style.setProperty("--z-toolbar-columns", mobileColumnCount.toString());
+    }
+    /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */
+    collectToolItems() {
+        this.toolItems = Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"));
+    }
+    /**
+     * Update the `tabindex` of all children tools based on the current focus index,
+     * so that only the currently focusable tool is in the tab order (tabindex="0") and all others are not focusable via keyboard (tabindex="-1").
+     */
+    updateTabIndexes() {
+        this.toolItems.forEach((tool, index) => {
+            tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);
+        });
+    }
+    focusToolAt(index, fallback = "next") {
+        const tool = this.toolItems[index];
+        if (!tool) {
+            return;
+        }
+        this.currentFocusIndex = index;
+        if (!tool.disabled) {
+            tool.setFocus();
+            this.updateTabIndexes();
+            return;
+        }
+        if (fallback === "next") {
+            this.focusNextTool();
+        }
+        else {
+            this.focusPreviousTool();
+        }
+    }
+    focusNextTool() {
+        const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;
+        this.focusToolAt(nextIndex);
+    }
+    focusPreviousTool() {
+        const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;
+        this.focusToolAt(prevIndex, "previous");
+    }
+    /**
+     * Listen for custom "toggleSubmenu" events from child tools and close sibling submenus when one is opened,
+     * to prevent multiple submenus from being open at the same time.
+     */
+    closeSiblingSubmenusOnOpen(event) {
+        if (event.detail !== true) {
+            return;
+        }
+        const targetTool = event.target.closest("z-tool");
+        if (!targetTool || !this.toolItems.includes(targetTool)) {
+            return;
+        }
+        this.toolItems.forEach((tool) => {
+            if (tool !== targetTool && tool.open) {
+                tool.open = false;
+            }
+        });
+    }
+    /**
+     * Listen for custom "toggleTooltip" events from child tools and close sibling tooltips when one is opened,
+     * to prevent multiple tooltips from being open at the same time.
+     */
+    closeSiblingTooltipsOnOpen(event) {
+        if (event.detail !== true) {
+            return;
+        }
+        const targetTool = event.target;
+        if (!this.toolItems.includes(targetTool)) {
+            return;
+        }
+        this.toolItems.forEach((tool) => {
+            if (tool !== targetTool) {
+                tool.closeTooltip();
+            }
+        });
+    }
+    handleKeyDown(event) {
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        if (!toolElement || !this.toolItems.includes(toolElement)) {
+            return;
+        }
+        const focusedIndex = this.toolItems.indexOf(toolElement);
+        if (focusedIndex !== -1) {
+            this.currentFocusIndex = focusedIndex;
+        }
+        switch (event.key) {
+            case KeyboardCode.ARROW_RIGHT:
+                event.preventDefault();
+                this.focusNextTool();
+                break;
+            case KeyboardCode.ARROW_LEFT:
+                event.preventDefault();
+                this.focusPreviousTool();
+                break;
+        }
+    }
+    /**
+     * When focus enters the toolbar, update the current focus index to match the focused tool,
+     * so that roving tabindex is in sync with actual focus.
+     */
+    handleFocusIn(event) {
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        const index = this.toolItems.indexOf(toolElement);
+        if (index !== -1 && index !== this.currentFocusIndex) {
+            this.currentFocusIndex = index;
+            this.updateTabIndexes();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'eb195bd6bb7d19e7958492c96761572838e2a881', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '6283d32e6e5568a890ff9c404d152800269cda99', onSlotchange: () => {
+                this.collectToolItems();
+                this.updateTabIndexes();
+            } })));
+    }
+    get hostElement() { return this; }
+    static get style() { return ZToolbarStyle0; }
+}, [1, "z-toolbar", {
+        "htmlAriaLabel": [1, "html-aria-label"],
+        "currentFocusIndex": [32]
+    }, [[0, "toggleSubmenu", "closeSiblingSubmenusOnOpen"], [0, "toggleTooltip", "closeSiblingTooltipsOnOpen"], [0, "keydown", "handleKeyDown"], [0, "focusin", "handleFocusIn"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-toolbar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-toolbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZToolbar$1);
+            }
+            break;
+    } });
+}
+
+const ZToolbar = ZToolbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZToolbar, defineCustomElement };
+
+//# sourceMappingURL=z-toolbar.js.map

package/dist/components/z-toolbar.js.map

@@ -0,0 +1 @@
+{"file":"z-toolbar.js","mappings":"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","names":["ZToolbar"],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  padding: 0;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */\n  box-shadow: var(--shadow-4);\n  gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n  height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n  :host {\n    --z-toolbar-columns: 6;\n\n    position: relative;\n    display: grid;\n    max-width: 100%;\n\n    /* Draws a horizontal separator line between rows */\n    background: repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n    gap: var(--border-size-small) calc(var(--space-unit) / 2);\n    grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));\n  }\n\n  ::slotted(z-divider) {\n    display: none !important;\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n    mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n  }\n\n  /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  /**\n   * Update the `tabindex` of all children tools based on the current focus index,\n   * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n   */\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (!tool) {\n      return;\n    }\n\n    this.currentFocusIndex = index;\n    if (!tool.disabled) {\n      tool.setFocus();\n      this.updateTabIndexes();\n\n      return;\n    }\n\n    if (fallback === \"next\") {\n      this.focusNextTool();\n    } else {\n      this.focusPreviousTool();\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  /**\n   * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n   * to prevent multiple submenus from being open at the same time.\n   */\n  @Listen(\"toggleSubmenu\")\n  closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n    if (!targetTool || !this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool && tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  /**\n   * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n   * to prevent multiple tooltips from being open at the same time.\n   */\n  @Listen(\"toggleTooltip\")\n  closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = event.target;\n    if (!this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool) {\n        tool.closeTooltip();\n      }\n    });\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n    }\n  }\n\n  /**\n   * When focus enters the toolbar, update the current focus index to match the focused tool,\n   * so that roving tabindex is in sync with actual focus.\n   */\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n    const index = this.toolItems.indexOf(toolElement);\n    if (index !== -1 && index !== this.currentFocusIndex) {\n      this.currentFocusIndex = index;\n      this.updateTabIndexes();\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-tooltip.js

@@ -1,53 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { P as PopoverPosition } from './index2.js';
-import { d as defineCustomElement$2 } from './index24.js';
-
-const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}";
-const ZTooltipStyle0 = stylesCss;
-
-const ZTooltip$1 = /*@__PURE__*/ proxyCustomElement(class ZTooltip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.position = PopoverPosition.AUTO;
-        this.dark = false;
-        this.open = false;
-        this.bindTo = undefined;
-        this.closable = true;
-    }
-    onPopoverOpenChange() {
-        this.open = this.popoverEl.open;
-    }
-    render() {
-        return (h("z-popover", { key: 'ab2c260f466a47e9f25154ece6a78197ff23d0fa', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '239e63a0bfececc52c9538df70d0eb7fe63a0060' })));
-    }
-    static get style() { return ZTooltipStyle0; }
-}, [1, "z-tooltip", {
-        "position": [513],
-        "dark": [516],
-        "open": [1540],
-        "bindTo": [1, "bind-to"],
-        "closable": [4]
-    }, [[0, "openChange", "onPopoverOpenChange"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tooltip", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTooltip$1);
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { Z as ZTooltip$1, d as defineCustomElement$1 } from './index27.js';
 
 const ZTooltip = ZTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/z-tooltip.js.map

@@ -1 +1 @@
-{"file":"z-tooltip.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wjBAAwjB,CAAC;AAC3kB,uBAAe,SAAS;;MCeXA,UAAQ;;;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,UAET,8DAAa,CACH,EACZ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTooltip"],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\n  --z-tooltip-theme--surface: var(--color-surface01);\n  --z-tooltip-theme--text: var(--color-default-text);\n  --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n  --z-tooltip-padding: var(--space-unit);\n}\n\nz-popover {\n  --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n  --z-popover-theme--text: var(--z-tooltip-theme--text);\n  --z-popover-padding: var(--z-tooltip-padding);\n  --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n\n:host([dark]) z-popover {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n}\n","import {Component, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-tr.js

@@ -60,7 +60,7 @@ const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {
         this.updateColumns();
     }
     render() {
-        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) })));
+        return (h(Host, { key: '63e39c2bf685ec65bdb22e99ebfb28a027c2bdae', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: 'f3a06e7fcf443fc3662ae5bf64792f35bd51037b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '09cd0fb724d7d626f078dd81f4bb074aa58bb9ce', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '9673e07a9f8319d8565e417bbfd1d03cdd693c62', 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: '6afeb54548a4ab5ea750d2c23f094c473e386efe', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'ed3ba8bdbe9ac4c0aaff3202238146cfb8362be6', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -106,7 +106,7 @@ const ZTreeList$1 = /*@__PURE__*/ proxyCustomElement(class ZTreeList extends HTM
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: '860eebd2ba1f46fb493bc07eb245596a9dc8be99', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6a5876f627d499e9c04464383463f97d5caa1272', 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: 'f6165d141d1ae1f40876c63f72ea0d196960f519', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '77ebd44ff71d71dc52b6a32fbc13232d0b6f93be', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/z-visually-hidden.js

@@ -10,7 +10,7 @@ const ZVisuallyHidden$1 = /*@__PURE__*/ proxyCustomElement(class ZVisuallyHidden
         this.__attachShadow();
     }
     render() {
-        return h("slot", { key: '85eaf1a304d4100796ce8fcccdeeb768387db00b' });
+        return h("slot", { key: 'e165e47bd9a2da0bb438ea4dccfbb08e6f02cc4b' });
     }
     static get style() { return ZVisuallyHiddenStyle0; }
 }, [1, "z-visually-hidden"]);