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

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

@@ -5,21 +5,24 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTfoot {
     constructor() {
+        /**
+         * If true, the footer will be stuck to the bottom of the table.
+         */
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '0c62e2be78670a3ca9b2b82ab61c79f9cbd8937d', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '1f5e6f45de8205da130383070df5082b36be9d87' })));
+        return (h(Host, { key: 'cdd4d2841caada167b8818ff534744445e0d8979', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '5cf911121ea09dcc13744e9d1d730be92f20cbf4' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {
@@ -38,11 +41,12 @@ export class ZTfoot {
                     "tags": [],
                     "text": "If true, the footer will be stuck to the bottom of the table."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,7 @@
 :host {
   display: block;
   box-sizing: border-box;
-  border-top: 1px solid var(--color-surface03);
-  border-bottom: 1px solid var(--color-surface03);
+  margin-top: -1px;
 }
 
 :host([sticky]) {

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

@@ -5,22 +5,28 @@ import { Host, h } from "@stencil/core";
  */
 export class ZThead {
     constructor() {
+        /**
+         * If true, the header will be stuck to the top of the table.
+         */
         this.sticky = false;
+        /**
+         * The element is focusable
+         */
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'd1b3529f75bb0ab8fcd19a309052fc2f19f5bbb2', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '5e767d3b959c2d295e4987843451dbeb5e5fca85' })));
+        return (h(Host, { key: '0e43e10373817b9ee5e4f1574fb0d46b232c510d', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'aefd2ed2698efb7deabd11284f3d6cae95800e50' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {
@@ -39,8 +45,10 @@ export class ZThead {
                     "tags": [],
                     "text": "If true, the header will be stuck to the top of the table."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             },
             "isFocusable": {
@@ -57,12 +65,13 @@ export class ZThead {
                     "tags": [],
                     "text": "The element is focusable"
                 },
-                "attribute": "is-focusable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "is-focusable",
                 "defaultValue": "false"
             }
         };
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,4 @@
 :host {
-  --z-table--cells-bottom-border-size: var(
-    --border-size-medium
-  ); /* Needed to handle the border of the expand button cell */
-
   --z-table--cells-background: var(
     --color-background
   ); /* Needed to handle the background-color of the expand button cell */

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { randomId } from "../../../utils/utils";
 import "../cells/z-td/index";
 import "../cells/z-th/index";
@@ -10,9 +10,20 @@ import "../cells/z-th/index";
  */
 export class ZTr {
     constructor() {
+        /**
+         * Whether the row is expandable.
+         * Use a `z-td` as the last cell of the row for the additional content.
+         * It will show a button to expand/collapse the row.
+         * The last cell will be hidden until the button or row is clicked.
+         *
+         * If some element inside the expandable row contains the `prevent-expand` css class,
+         * the row will not expand by clicking that element.
+         */
         this.expandable = false;
+        /**
+         * Whether the row is currently expanded.
+         */
         this.expanded = false;
-        this.expandableContentId = undefined;
     }
     updateColumns() {
         const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
@@ -57,18 +68,18 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        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) })));
+        return (h(Host, { key: '6675f95eeb22b498594fba6534c4c827febecc73', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '587ff79c6259984e7cbff6fae284a454152d1cf7', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'fa283ba74f8b62c16b37853031f01d278bb6e707', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'e009923873641b3cecf5f6736e56c7136134f226', 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: '403d4e5d99c796af9887c8d8f2b4ec8a9de7f9bd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'afc75a162e1782b9aeb746961f0f51686e8c9213', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {
@@ -87,8 +98,10 @@ export class ZTr {
                     "tags": [],
                     "text": "Whether the row is expandable.\nUse a `z-td` as the last cell of the row for the additional content.\nIt will show a button to expand/collapse the row.\nThe last cell will be hidden until the button or row is clicked.\n\nIf some element inside the expandable row contains the `prevent-expand` css class,\nthe row will not expand by clicking that element."
                 },
-                "attribute": "expandable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expandable",
                 "defaultValue": "false"
             }
         };
@@ -134,4 +147,3 @@ export class ZTr {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -13,15 +13,6 @@
   box-sizing: border-box;
 }
 
-.z-tr--expand-button-container,
-::slotted(*) {
-  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
-}
-
-::slotted(*:not(:last-child)) {
-  border-right: var(--z-table--cell-left-border, none);
-}
-
 :host([expandable]) {
   --show-expandable-button: visible;
 
@@ -37,6 +28,7 @@
 }
 
 :host([expandable]) ::slotted(*:last-child) {
+  border-top: var(--border-size-small) solid var(--color-surface03);
   border-left: 0;
   grid-column: 1 / span calc(var(--columns) + 1);
   grid-row: 2;
@@ -53,11 +45,12 @@
 
 :host([expanded]) .z-tr--expand-button-container,
 :host([expanded]) ::slotted(*) {
+  border-left: 0 !important;
   background-color: var(--color-background);
 }
 
-:host(:hover) ::slotted(z-td),
-:host(:hover) ::slotted(z-th) {
+:host(:hover):has([tabIndex]) ::slotted(z-td),
+:host(:hover):has([tabIndex]) ::slotted(z-th) {
   border-top: var(--border-size-small) solid var(--color-surface04);
   border-bottom: var(--border-size-small) solid var(--color-surface04);
   background-color: var(--color-surface02);
@@ -66,6 +59,7 @@
 :host(:focus) {
   position: relative;
   z-index: 20;
+  border: none !important;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }

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

@@ -5,33 +5,46 @@ import { AccordionVariant, ControlSize } from "../../beans";
  *
  * @slot - Slot for the main content.
  * @slot tag - Slot for tags.
- * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
- * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
- * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
- * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
- * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
- * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
- * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
- * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
+ * @part summary - The summary element that is always visible and acts as the accordion's toggle.
+ * @part content - The content element that is shown or hidden when the accordion is toggled.
  */
 export class ZAccordion {
     constructor() {
-        this.label = undefined;
-        this.icon = undefined;
+        /**
+         * Size of the component.
+         */
         this.size = ControlSize.BIG;
+        /**
+         * Disabled state of the accordion.
+         */
         this.isDisabled = false;
+        /**
+         * The open state of the accordion.
+         */
         this.open = false;
+        /**
+         * Enable highlight band on the `summary`'s left edge.
+         */
         this.highlight = false;
+        /**
+         * Accordion variant.
+         */
         this.variant = AccordionVariant.DEFAULT;
+        /**
+         * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.
+         */
         this.shadow = true;
+        this.hasSlottedTags = false;
     }
     onDisabledChange() {
         if (this.isDisabled) {
             this.open = false;
         }
     }
+    /** Check if there is any content in the "tag" slot. */
+    checkSlottedTags() {
+        this.hasSlottedTags = !!this.host.querySelector('[slot="tag"]');
+    }
     /**
      * Handle `details` element toggle.
      * If currently disabled, prevent toggling by forcing the `open` state to `false`.
@@ -46,8 +59,11 @@ export class ZAccordion {
         this.open = this.detailsElm.open;
         this.toggled.emit(this.open);
     }
+    componentWillLoad() {
+        this.checkSlottedTags();
+    }
     render() {
-        return (h("details", { key: 'f200b59fb522e1f4210c76166302bcf6ac45595f', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'a79f3922eaba8a7bdebe1bf32d628e8dd107d628', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '0679fd5cac2fdf4ea28a004a5981cc1140f33ed0', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '09e815bb1327ccc96a0e5fda7eae128ecff8754e', class: "z-accordion-label" }, this.label), h("span", { key: '27ed45123f223f3704d2fe6b28516c2091eed597', class: "z-accordion-tags" }, h("slot", { key: '45ff9568cd256dce70ea503e65f98681547e388e', name: "tag" })), h("z-icon", { key: 'c3c24df225af9c7b8f4462f1711342ebc659758a', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '454c954054e741d7aaac1c0fa43fd0f6e807947b', class: "z-accordion-content", part: "content" }, h("slot", { key: '935f1db0be6b8e35feab63df7235c1a70ee9a5fd' })))));
+        return (h("details", { key: '677f29eb9a981a8444c6de2966101caa04063bdc', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '498a94e2aec123598bcf6b4cd7d755b72726d9e9', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '09eec9beaa82d2a2f81de5c0ea2d5ebee856b190', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'dbf0026bd5a832300e17ec30da2cfaf7946d1c5e', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '21b3f6c772537d97100d593d5415f7d73bdaeab6', class: "z-accordion-tags" }, h("slot", { key: '676b85cf03540aad8a2797073e0376d23816635a', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '45341fe9e93b6ceafb938b4345d065d684c40246', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: 'dea671e91b2ddd6e2666304452cc2b60b7b8fda4', class: "z-accordion-content", part: "content" }, h("slot", { key: '382274fc573c359786db1a5cc986b1cc400e2960' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -77,8 +93,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Text label."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "icon": {
                 "type": "string",
@@ -94,8 +112,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Name of the z-icon to display before the label's text."
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "size": {
                 "type": "string",
@@ -107,7 +127,8 @@ export class ZAccordion {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -117,8 +138,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Size of the component."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             },
             "isDisabled": {
@@ -135,8 +158,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Disabled state of the accordion."
                 },
-                "attribute": "is-disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "is-disabled",
                 "defaultValue": "false"
             },
             "open": {
@@ -153,8 +178,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "The open state of the accordion."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "highlight": {
@@ -171,8 +198,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Enable highlight band on the `summary`'s left edge."
                 },
-                "attribute": "highlight",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "highlight",
                 "defaultValue": "false"
             },
             "variant": {
@@ -185,7 +214,8 @@ export class ZAccordion {
                         "AccordionVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::AccordionVariant"
+                            "id": "src/beans/index.tsx::AccordionVariant",
+                            "referenceLocation": "AccordionVariant"
                         }
                     }
                 },
@@ -195,8 +225,10 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Accordion variant."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "AccordionVariant.DEFAULT"
             },
             "shadow": {
@@ -213,12 +245,19 @@ export class ZAccordion {
                     "tags": [],
                     "text": "Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`."
                 },
-                "attribute": "shadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "shadow",
                 "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "hasSlottedTags": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "toggled",
@@ -237,6 +276,7 @@ export class ZAccordion {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "isDisabled",
@@ -244,4 +284,3 @@ export class ZAccordion {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -5,6 +5,18 @@
 }
 
 :host {
+  /**
+   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
+   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.
+   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.
+   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.
+   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.
+   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.
+   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.
+   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.
+   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.
+   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.
+   */
   --z-accordion-highlight-color: transparent;
   --z-accordion-bg: var(--color-surface01);
   --z-accordion-label-color: var(--color-default-text);
@@ -177,6 +189,8 @@ summary z-icon.z-accordion-chevron {
 
 :host([variant="background"]) .z-accordion-content {
   padding-right: calc(var(--space-unit) * 2);
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
 }
 
 :host([is-disabled]) .z-accordion-label {
@@ -224,37 +238,3 @@ summary z-icon.z-accordion-chevron {
     --z-icon-height: 18px;
   }
 }
-
-/* Style for sibling accordions in a stack context */
-
-z-accordion + z-accordion {
-  border-top: none;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"] {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
-  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
-  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
-}

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

@@ -17,10 +17,30 @@ import { ButtonVariant, ControlSize } from "../../beans";
  */
 export class ZAnchorNavigation {
     constructor() {
+        /**
+         * If enabled, the text of each anchor will be hidden unless
+         * for the current one or the one the user is hovering.
+         */
         this.hideUnselected = false;
+        /**
+         * Enables automatic inference of the current item, listening for hash change
+         * and checking the `href` of the slotted anchors.
+         * When disabled, the highlight of current item must be handled manually by setting the `data-current`
+         * attribute to the correct slotted items and the `aria-current` attribute to the anchors.
+         */
         this.autoCurrent = true;
+        /**
+         * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed
+         */
         this.collapsedLabel = "salta a";
+        /**
+         * Explicitly collapse anchor navigation.
+         * If false, it will collapse automatically only on mobile.
+         */
         this.isCollapsed = false;
+        /**
+         * Whether the mobile list is collapsed.
+         */
         this.collapsed = false;
     }
     /**
@@ -51,7 +71,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '3d9a8c823dae6090990a8f0a1b7498589824e629', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'bf5858d8dcba5601c94b36ae087c44ace5a047a9', 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: '78812ef819a063dd7e8f0bcd55ceab6bbb419219', ref: (el) => (this.nav = el) }, h("slot", { key: '1c2aa06b4837962e032379844fc2fb642bbf8d10' }))));
+        return (h(Host, { key: 'c7b47d775e9e264fa5b7b6f4496fcf1dccd5f28c', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '3651fe999b1f8ed710a43e01034e57759001e614', 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: 'beb6bb3d1f77451e63213dbc638b209ab6d34c17', ref: (el) => (this.nav = el) }, h("slot", { key: '1b35a2604b89a924ebb029affec3bb33d8193f81' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {
@@ -80,8 +100,10 @@ export class ZAnchorNavigation {
                     "tags": [],
                     "text": "If enabled, the text of each anchor will be hidden unless\nfor the current one or the one the user is hovering."
                 },
-                "attribute": "hide-unselected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "hide-unselected",
                 "defaultValue": "false"
             },
             "autoCurrent": {
@@ -98,8 +120,10 @@ export class ZAnchorNavigation {
                     "tags": [],
                     "text": "Enables automatic inference of the current item, listening for hash change\nand checking the `href` of the slotted anchors.\nWhen disabled, the highlight of current item must be handled manually by setting the `data-current`\nattribute to the correct slotted items and the `aria-current` attribute to the anchors."
                 },
-                "attribute": "auto-current",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "auto-current",
                 "defaultValue": "true"
             },
             "collapsedLabel": {
@@ -116,8 +140,10 @@ export class ZAnchorNavigation {
                     "tags": [],
                     "text": "Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed"
                 },
-                "attribute": "collapsed-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "collapsed-label",
                 "defaultValue": "\"salta a\""
             },
             "isCollapsed": {
@@ -132,10 +158,12 @@ export class ZAnchorNavigation {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Explicitly collapse anchor navigation.\nIf false will collapse automatically only on mobile."
+                    "text": "Explicitly collapse anchor navigation.\nIf false, it will collapse automatically only on mobile."
                 },
-                "attribute": "is-collapsed",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "is-collapsed",
                 "defaultValue": "false"
             }
         };
@@ -147,4 +175,3 @@ export class ZAnchorNavigation {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map