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

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { KeyboardCode } from "../../beans";
 import { containsElement } from "../../utils/utils";
 const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
@@ -6,7 +6,6 @@ const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagNa
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenu {
     get focusableItem() {
@@ -277,14 +276,25 @@ export class ZMenu {
         }
     }
     constructor() {
-        this.items = [];
-        this.active = undefined;
+        /**
+         * Flag to set the display mode of the list.
+         * If true, the list will be absolutely positioned under the menu label,
+         * stacked beneath it otherwise.
+         */
         this.floating = true;
+        /** The opening state of the menu. */
         this.open = false;
+        /**
+         * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).
+         * A small border is placed under it as a separator from other elements.
+         */
         this.verticalContext = false;
+        /**
+         * Tabindex value to set on the menu label.
+         * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).
+         */
         this.htmlTabindex = -1;
-        this.hasHeader = undefined;
-        this.hasContent = undefined;
+        this.items = [];
         this.toggle = this.toggle.bind(this);
         this.checkContent = this.checkContent.bind(this);
         this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
@@ -330,8 +340,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Flag to set the active status of the menu."
                 },
-                "attribute": "active",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
             },
             "floating": {
                 "type": "boolean",
@@ -347,8 +359,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
                 },
-                "attribute": "floating",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "floating",
                 "defaultValue": "true"
             },
             "open": {
@@ -365,8 +379,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "The opening state of the menu."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "verticalContext": {
@@ -383,8 +399,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
                 },
-                "attribute": "vertical-context",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "vertical-context",
                 "defaultValue": "false"
             },
             "htmlTabindex": {
@@ -401,8 +419,10 @@ export class ZMenu {
                     "tags": [],
                     "text": "Tabindex value to set on the menu label.\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader)."
                 },
-                "attribute": "html-tabindex",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-tabindex",
                 "defaultValue": "-1"
             }
         };
@@ -514,4 +534,3 @@ export class ZMenu {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { KeyboardCode } from "../../beans";
 /**
  * A component to create submenus inside the ZMenu.
@@ -158,11 +158,11 @@ export class ZMenuSection {
         }
     }
     constructor() {
-        this.active = undefined;
+        /**
+         * Tabindex value to set on the label button.
+         * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).
+         */
         this.htmlTabindex = -1;
-        this.open = undefined;
-        this.hasItems = undefined;
-        this.items = undefined;
         this.toggle = this.toggle.bind(this);
         this.onItemsChange = this.onItemsChange.bind(this);
         this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'a859947e3015a104f32db157c715982a1ed29cf5', open: this.open }, h("button", { key: '5c130955c62fcce5d88b92312076da69f307eaee', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '28557c741c733149ea51ca68f499374dcf2eb134', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'bfa97fe61fde93902531e09dcdeb729066d2e66f', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'd9a7df39c426fecbc3beeefc2f5a08aed3f2ccbf', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e2f14a7cf055715bbbb8b712a3d112af3b712031', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'e2584623ee4db0d3b11804dff89a93afa9b2761b', open: this.open }, h("button", { key: '21c6cf5558e6a719e56d2af7bbfef31044030394', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '59d3f4a1306bc8639a2cdddc2be44bd6c49bdd1b', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '3448e73ef71fd89e861add9bbb6f020d8e873117', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '93304aead086952a3bf4235216877289b882971d', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'c0258eaedb4fd8b9296570da1eda75108d9c0af0', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }
@@ -204,8 +204,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "Active state"
                 },
-                "attribute": "active",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
             },
             "htmlTabindex": {
                 "type": "number",
@@ -221,8 +223,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "Tabindex value to set on the label button.\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu)."
                 },
-                "attribute": "html-tabindex",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-tabindex",
                 "defaultValue": "-1"
             },
             "open": {
@@ -239,8 +243,10 @@ export class ZMenuSection {
                     "tags": [],
                     "text": "The opening state of the section."
                 },
-                "attribute": "open",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
             }
         };
     }
@@ -341,4 +347,3 @@ export class ZMenuSection {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -5,17 +5,18 @@ const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [conte
 /**
  * @slot modalCloseButton - slot for custom close button
  * @slot modalContent - slot for the content of the modal
- * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
 export class ZModal {
     constructor() {
-        this.modalid = undefined;
-        this.modaltitle = undefined;
-        this.modalsubtitle = undefined;
+        /** aria-label for close button (optional) */
         this.closeButtonLabel = "chiudi modale";
+        /** add role "alertdialog" to dialog (optional, default is false) */
         this.alertdialog = false;
+        /** if true, the modal is closable (optional, default is true) */
         this.closable = true;
+        /** if true, the modal can scroll inside, if false the viewport can scroll */
         this.scrollInside = true;
+        /** if true, the page scroll is locked when the modal is open (optional, default is true) */
         this.lockPageScroll = true;
     }
     emitModalClose() {
@@ -123,16 +124,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '67f0fc8f114e0a5d91b389fdb245106582cc642d', class: {
+        return (h("dialog", { key: 'c8938b5d9ecc14fb3ae700a3bef42a04b59895ea', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'e8f4faf3d8a8e43294d6d1bfc97e20e1706a1991', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'c03a7d75c3c59acae41e773c4fac21e2260c96bf', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'f039718406c6e3459ad5fa83fa596eb4f266f986', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'bf8c4f222aa0c89e8ffe98a7e266b043245c6901' }, this.modaltitle && h("h1", { key: '3dc7922ebe77d3ccf404101e138913a8f236e888', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'f8e5d4384f44f87b4b3925041caa4ad6037a9c8e', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '8834d8d97223d0653c853ca5ff4f93c5ebdaf3a7', class: {
+            }, id: this.modalid }, h("header", { key: '88b3d6d4e6c42c1a130d1f261708a4d8c406f864', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '5ada26490c0add2ab35ec21c3735b09f936fa8f3' }, this.modaltitle && h("h1", { key: 'dbcd5e67d7e607331cf3c894ee39716557e1dc49', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'a4f5a11637ad4a69d330e76756e8ffb23977fc06', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '6745960e3305396d9fbf56388fa667f313d28e2e', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '37dd8afe8e3926853e22da79e853ba802cb379a9', name: "modalContent" }))), h("div", { key: '0637fefbec2fa0a620be36be10ce0704f39c72ed', class: {
+            }, id: "modal-content" }, h("slot", { key: '1ac1b1a9bbe9f4d20b7fd56a4c91e64985d5cdce', name: "modalContent" }))), h("div", { key: '2b39f911393227c6e92c49e70ebd9710fb39084d', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
@@ -168,8 +169,10 @@ export class ZModal {
                     "tags": [],
                     "text": "unique id"
                 },
-                "attribute": "modalid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modalid"
             },
             "modaltitle": {
                 "type": "string",
@@ -185,8 +188,10 @@ export class ZModal {
                     "tags": [],
                     "text": "title text (optional)"
                 },
-                "attribute": "modaltitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modaltitle"
             },
             "modalsubtitle": {
                 "type": "string",
@@ -202,8 +207,10 @@ export class ZModal {
                     "tags": [],
                     "text": "subtitle (optional)"
                 },
-                "attribute": "modalsubtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modalsubtitle"
             },
             "closeButtonLabel": {
                 "type": "string",
@@ -219,8 +226,10 @@ export class ZModal {
                     "tags": [],
                     "text": "aria-label for close button (optional)"
                 },
-                "attribute": "close-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "close-button-label",
                 "defaultValue": "\"chiudi modale\""
             },
             "alertdialog": {
@@ -237,8 +246,10 @@ export class ZModal {
                     "tags": [],
                     "text": "add role \"alertdialog\" to dialog (optional, default is false)"
                 },
-                "attribute": "alertdialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "alertdialog",
                 "defaultValue": "false"
             },
             "closable": {
@@ -255,8 +266,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal is closable (optional, default is true)"
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             },
             "scrollInside": {
@@ -273,8 +286,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the modal can scroll inside, if false the viewport can scroll"
                 },
-                "attribute": "scroll-inside",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "scroll-inside",
                 "defaultValue": "true"
             },
             "lockPageScroll": {
@@ -291,8 +306,10 @@ export class ZModal {
                     "tags": [],
                     "text": "if true, the page scroll is locked when the modal is open (optional, default is true)"
                 },
-                "attribute": "lock-page-scroll",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "lock-page-scroll",
                 "defaultValue": "true"
             }
         };
@@ -394,4 +411,3 @@ export class ZModal {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,11 @@
 :host {
+  /**
+   * @prop --z-modal-content-padding: padding of the modal's content. The default is `16px` (`--space-unit * 2`).
+   */
+  --z-modal-content-padding: ;
+
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-
-  --z-modal-content-padding: ;
 }
 
 :host > dialog {

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

@@ -1,25 +1,34 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
  * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
  * @slot - Main slot. Use `<button>` or `<a>` tags as children.
- * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
- * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export class ZNavigationTabs {
     constructor() {
         /**
-         * Index of the last tab that held focus.
+         * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
          */
-        this.focusedTab = undefined;
         this.ariaLabel = "";
+        /**
+         * Navigation tabs orientation.
+         */
         this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        /**
+         * Navigation tabs size.
+         */
         this.size = NavigationTabsSize.BIG;
+        /**
+         * Index of the selected tab.
+         * Useful to programmatically select a tab.
+         * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
+         */
         this.selectedTab = undefined;
-        this.canNavigate = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
+        /**
+         * Index of the last tab that held focus.
+         */
+        this.focusedTab = undefined;
     }
     /**
      * Getter for the direction to check based on current orientation.
@@ -221,10 +230,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'c676fe99b0eb18fceb58ffa7412e4e1659acc89e', class: {
+        return (h(Host, { key: 'fc24983c8706f875f0ca3284ebf57d428cfb5350', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'e353cd0e1e22d6e4422f547a318819b3f2736479', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '9d7e5126d77fbebf48423f0b34103bd1eb59dc3a', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '854e67c8c662c21926c71fab0725113632f6f14e', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'a4fdefd6a4419c97b4bfab349c88285abe37f14f' })), h("button", { key: 'bf0247eaef092c9b0dd068fe0d4876e3aaecad4e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '02018a4474db67cf853941a2d6daa002303419c7', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'e75513c2024b5db9fa5b5c336cf634084b1509ce', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '4f14ef83b63b07d488420731a79538c697c44ae1', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'c851ed409a995bec7867ac028459f9b26de00634', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'c2c3494116a2a32520bc426382785b978b1a59d3' })), h("button", { key: 'bd5a087166b94c8bc69a9018cce6b382690861ca', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '6ee22a66878dc029ff70915a2905580c7f14e211', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -253,8 +262,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "orientation": {
@@ -267,7 +278,8 @@ export class ZNavigationTabs {
                         "NavigationTabsOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
+                            "id": "src/beans/index.tsx::NavigationTabsOrientation",
+                            "referenceLocation": "NavigationTabsOrientation"
                         }
                     }
                 },
@@ -277,8 +289,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs orientation."
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "orientation",
                 "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
             },
             "size": {
@@ -291,7 +305,8 @@ export class ZNavigationTabs {
                         "NavigationTabsSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsSize"
+                            "id": "src/beans/index.tsx::NavigationTabsSize",
+                            "referenceLocation": "NavigationTabsSize"
                         }
                     }
                 },
@@ -301,8 +316,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "NavigationTabsSize.BIG"
             },
             "selectedTab": {
@@ -319,8 +336,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Index of the selected tab.\nUseful to programmatically select a tab.\nThe tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab."
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected-tab",
                 "defaultValue": "undefined"
             }
         };
@@ -388,4 +407,3 @@ export class ZNavigationTabs {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,8 @@
 z-navigation-tabs {
+  /**
+   * @prop --z-navigation-tabs-nav-buttons-bg: Background color of the navigation buttons. The default is `--color-surface01`.
+   * @prop --z-navigation-tabs-nav-buttons-fg: Foreground color of the navigation buttons. The default is `--color-primary01`.
+   */
   --z-navigation-tabs-nav-buttons-bg: ;
   --z-navigation-tabs-nav-buttons-fg: ;
 

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

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 /**
  * Notification bar component.
  * @slot - The text of the notification.
- * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -14,18 +13,23 @@ export class ZNotification {
         this.notificationClose.emit();
     }
     constructor() {
-        this.contenticonname = undefined;
-        this.actiontext = undefined;
-        this.type = undefined;
+        /** Enable close icon */
         this.showclose = false;
+        /**
+         * Enable shadow.
+         * @deprecated shadow is available only for the `sticky` version of the notification.
+         */
         this.showshadow = false;
+        /** Enable sticky notification bar. */
         this.sticky = false;
+        /** Border position */
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: '5bc1e8046c14e46f02f9667939709a267cb1265a' }, this.contenticonname && (h("z-icon", { key: '7a944afae100f5fea48ca8499b6a0a035a6d289e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '038391eb846f043bc83c236e6e18998797bcb7a3', class: "content-container" }, h("div", { key: '330233ee7524fb271ffa5231a86b6cd906b2994d', class: "content-text" }, h("slot", { key: '290343fa633f1969d4f1059047797b16c3da9860' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '096b5cfdb55bac40adc9b2f56b9a4dc739ad4cc1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '80d985cbcd6501f9640dc2e16ac978de731a0d24', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'd7fe5573c93ac7ab36ccbecc01972b8d3cccc8bd', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '05288cf38255e2b7ee8567ea735cc073d2cae4a1' }, h("div", { key: '8b737c2201659e6b50911c4a83a5d6eae4facf46', class: "main-container" }, this.contenticonname && (h("z-icon", { key: 'd91f0f38d124dd0f61ce14e3607e3eb0fa4b6650', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'bf7b392e4001b37272092270bc31b168f600dbc4', class: "content-container" }, h("div", { key: '187e9cbcc37ff55c77a7adc946ac83ffd813ea81', class: "content-text" }, h("slot", { key: '4bfcb8305ed25eb85ab95aa3a475f2e61b064f63' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'f0a75df6238269b73e6853353c8bb8feee11e90e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '575860241a746ddcddd16646496bbfdf458e91db', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'a096f412fec8ab8eec3081853d5baada531bcf54', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +59,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Name of the icon on the left of the content"
                 },
-                "attribute": "contenticonname",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "contenticonname"
             },
             "actiontext": {
                 "type": "string",
@@ -72,8 +78,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Action button text"
                 },
-                "attribute": "actiontext",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actiontext"
             },
             "type": {
                 "type": "string",
@@ -85,7 +93,8 @@ export class ZNotification {
                         "NotificationType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NotificationType"
+                            "id": "src/beans/index.tsx::NotificationType",
+                            "referenceLocation": "NotificationType"
                         }
                     }
                 },
@@ -95,8 +104,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Alert variant type"
                 },
-                "attribute": "type",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
             },
             "showclose": {
                 "type": "boolean",
@@ -112,8 +123,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable close icon"
                 },
-                "attribute": "showclose",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "showclose",
                 "defaultValue": "false"
             },
             "showshadow": {
@@ -133,8 +146,10 @@ export class ZNotification {
                         }],
                     "text": "Enable shadow."
                 },
-                "attribute": "showshadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "showshadow",
                 "defaultValue": "false"
             },
             "sticky": {
@@ -151,9 +166,31 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable sticky notification bar."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
+            },
+            "borderposition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "borderposition",
+                "defaultValue": "\"bottom\""
             }
         };
     }
@@ -191,4 +228,3 @@ export class ZNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map