@zanichelli/albe-web-components 19.2.5 → 19.2.6-RC2

package/dist/esm/z-myz-list.entry.js

@@ -1,13 +1,10 @@
-import { r as registerInstance, h } from './index-c8ceadeb.js';
+import { r as registerInstance, h } from './index-DPdXlnVe.js';
 
-const stylesCss = "ul{padding:0;margin:0}";
-const ZMyzListStyle0 = stylesCss;
+const stylesCss = () => `ul{padding:0;margin:0}`;
 
 const ZMyzList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inputrawdata = undefined;
-        this.list = undefined;
     }
     componentWillLoad() {
         if (this.inputrawdata) {
@@ -22,15 +19,15 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '94453803cc1c6b3d3b81e19f107c09abc395bbff' }, this.list &&
+        return (h("ul", { key: 'c3da0fd98f9d50082d025b168e001cd640de0c89' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {
-        "inputrawdata": ["oninputrawdataChange"]
+        "inputrawdata": [{
+                "oninputrawdataChange": 0
+            }]
     }; }
 };
-ZMyzList.style = ZMyzListStyle0;
+ZMyzList.style = stylesCss();
 
 export { ZMyzList as z_myz_list };
-
-//# sourceMappingURL=z-myz-list.entry.js.map

package/dist/esm/z-navigation-tabs.entry.js

@@ -1,24 +1,34 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-106473a8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-BKCj6NR2.js';
 
-const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-primary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
-const ZNavigationTabsStyle0 = stylesCss;
+const stylesCss = () => `z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}`;
 
 const ZNavigationTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selected = createEvent(this, "selected", 7);
         /**
-         * 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.
@@ -220,19 +230,21 @@ const ZNavigationTabs = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
+        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', 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: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', 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: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', 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: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', 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: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', 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: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', 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: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "canNavigate": ["checkScrollEnabled"],
-        "selectedTab": ["onTabSelected"]
+        "canNavigate": [{
+                "checkScrollEnabled": 0
+            }],
+        "selectedTab": [{
+                "onTabSelected": 0
+            }]
     }; }
 };
-ZNavigationTabs.style = ZNavigationTabsStyle0;
+ZNavigationTabs.style = stylesCss();
 
 export { ZNavigationTabs as z_navigation_tabs };
-
-//# sourceMappingURL=z-navigation-tabs.entry.js.map

package/dist/esm/z-notification.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DPdXlnVe.js';
 
-const stylesCss = ":host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
-const ZNotificationStyle0 = stylesCss;
+const stylesCss = () => `:host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}`;
 
 const ZNotification = class {
     handleActionButtonClick(e) {
@@ -16,23 +15,25 @@ const ZNotification = class {
         registerInstance(this, hostRef);
         this.notificationAction = createEvent(this, "notificationAction", 7);
         this.notificationClose = createEvent(this, "notificationClose", 7);
-        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: '3704b1815b8b714608787f7d86e8402fe7dc4eff' }, h("div", { key: '79598a77b4cca9ad53babe6be8d8ea103d979f6a', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '2a4de5808da5ec4af5bddf68376cc7510aad9cf8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'feb0b073eacb2fdb82501f3b33bdff68fef71769', class: "content-container" }, h("div", { key: '2a81ef0da3a0fba818025651aa64e270e833c9ed', class: "content-text" }, h("slot", { key: '88f8670d0a0433012aa6f6a27a40cef7c84498c5' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '6282f5526b57131deb130c57dfe165595612d01e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '514841e3b1a2a816c9283d05ca3d2de953269e8b', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'a43a9ca62b654719cd4a2bb634152b96c801cdc9', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: '204757ce872d00bd8dcf801273b36cee6c390989' }, h("div", { key: 'adb00f9caa9e7a87e7320dfadbe642b3535f66c4', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '4deffc225f500b8dc00d0d55ca28733a389d6e5c', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '41cf207e05035652e789b35e73109657210162dd', class: "content-container" }, h("div", { key: 'f5e54591302a860fb45b07b8e0cbde78d1b9deec', class: "content-text" }, h("slot", { key: '48e5555977f88affbb06af454b51a94bee2c0c58' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '977fb094093c645f26f1cd014914f7ea824f80f9', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'f505fca722c4c720173faee9c37ce110ba2382e4', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '27305ec012eb8c30396fcf5fee87ece5a57c4a10', name: "multiply-circle", width: 16, height: 16 }))))));
     }
 };
-ZNotification.style = ZNotificationStyle0;
+ZNotification.style = stylesCss();
 
 export { ZNotification as z_notification };
-
-//# sourceMappingURL=z-notification.entry.js.map

package/dist/esm/z-otp.entry.js

@@ -1,16 +1,14 @@
-import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
-import { f as InputStatus } from './index-106473a8.js';
+import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
+import { f as InputStatus } from './index-BKCj6NR2.js';
 
-const stylesCss = "input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
-const ZOtpStyle0 = stylesCss;
+const stylesCss = () => `input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}`;
 
 const ZOtp = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.otpChange = createEvent(this, "otpChange", 7);
+        /** Input number */
         this.inputNum = 6;
-        this.status = undefined;
-        this.message = undefined;
     }
     emitInputChange(value) {
         this.otpChange.emit({ value });
@@ -20,22 +18,22 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: '78c6a2c425f8b8d222be16db33bb9d12307015d1', class: "otp-container" }, h("div", { key: '18e0d6a908aabdfe49ce4613c094fb12166b0914', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '7657d7d869942c3d132010db3926eded138e551c', class: "otp-container" }, h("div", { key: 'ebf909e834636481b6b19058ee5ccb76a1b26783', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
             }, onKeyUp: (e) => {
                 if (e.keyCode > 47) {
-                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();
+                    if (i < this.inputNum - 1) {
+                        this.otpRef[i + 1].focus();
+                    }
                 }
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '1d3207b1411926edb77efbc8a57e179972b77a2e', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '102bca7cae4f618feef7bb26461a9a0ddb9ee8b3', message: this.message, status: this.status })));
     }
 };
-ZOtp.style = ZOtpStyle0;
+ZOtp.style = stylesCss();
 
 export { ZOtp as z_otp };
-
-//# sourceMappingURL=z-otp.entry.js.map

package/dist/esm/z-pagination.entry.js

@@ -1,24 +1,30 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { I as InputType } from './index-106473a8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
+import { I as InputType } from './index-BKCj6NR2.js';
 
-const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";
-const ZPaginationStyle0 = stylesCss;
+const stylesCss = () => `z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,     color 0.15s ease-out,     border-bottom-color 0.15s ease-out,     font-size 0.15s ease-in-out,     font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}`;
 
 const ZPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.pageChanged = createEvent(this, "pageChanged", 7);
-        this.label = undefined;
+        /** Enable navigation arrows. */
         this.navArrows = true;
-        this.totalPages = undefined;
+        /** Number of pages to skip. */
         this.skip = 0;
+        /** Enable buttons to go to the first and last pages. */
         this.edges = false;
-        this.split = undefined;
-        this.visiblePages = undefined;
+        /** Current page. */
         this.currentPage = 1;
-        this.goToPage = undefined;
+        /**
+         * Internal visible pages variable.
+         * Needed to better handle conflicting props like `visiblePages` and `split`.
+         * This state will change based on props values and validation,
+         * keeping original `visiblePages` value intact.
+         */
         this._visiblePages = this.visiblePages;
+        /** Used to hides/change some functionalities on smaller screen sizes */
         this.isMobile = false;
+        /** Value of the go to page input */
         this.goToPageValue = null;
     }
     /**
@@ -211,14 +217,20 @@ const ZPagination = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "_visiblePages": ["setPagesContainerWidth"],
-        "visiblePages": ["setVisiblePages"],
-        "currentPage": ["onPageChanged"],
-        "split": ["onSplitChanged"]
+        "_visiblePages": [{
+                "setPagesContainerWidth": 0
+            }],
+        "visiblePages": [{
+                "setVisiblePages": 0
+            }],
+        "currentPage": [{
+                "onPageChanged": 0
+            }],
+        "split": [{
+                "onSplitChanged": 0
+            }]
     }; }
 };
-ZPagination.style = ZPaginationStyle0;
+ZPagination.style = stylesCss();
 
 export { ZPagination as z_pagination };
-
-//# sourceMappingURL=z-pagination.entry.js.map

package/dist/esm/z-panel-elem.entry.js

@@ -1,33 +1,25 @@
-import { r as registerInstance, h } from './index-c8ceadeb.js';
+import { r as registerInstance, h } from './index-DPdXlnVe.js';
 
-const stylesCss = ".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";
-const ZPanelElemStyle0 = stylesCss;
+const stylesCss = () => `.sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}`;
 
 const ZPanelElem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.elemid = undefined;
-        this.imgurl = undefined;
-        this.imgalt = undefined;
-        this.linkicon = undefined;
-        this.linklabel = undefined;
-        this.url = undefined;
+        /** link target (optional) */
         this.target = "_blank";
+        /** disabled status flag (optional) */
         this.isdisabled = false;
-        this.descrSlotName = undefined;
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '5d734919b0fd927095c2e65ff1200ed550e48bd2', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '3d315fef58dfe7ecf601ade8f1652e447fdbe636', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '47f8a1c400949b67c984d25c5bdf9f20ee3d846b', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '9757e879ebe255ccdbdd815c7404a6cfe9f9cb1e', class: "panel-elem-link" }, h("a", { key: '4ee9897a9875081e871e4a72d7cdd9c6df23f6e1', class: {
+        return (h("div", { key: '6a782a3e364918d674cd75e87ee3d4c45051c01a', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '5f1b5804796364f571c07595199f206bf07fc348', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b3180aff50d92de37b4c0e2b42a08aa690f70eab', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '9e461e124c92188bfb882b038d7bf72e2dc833a6', class: "panel-elem-link" }, h("a", { key: 'c9585b59f9fda70d371ac569ca3a69e6959a850a', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'b651e1ab06b937189e46634c0a91470afcde9168', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '5ab6f6ba7f8f3f50a3018b56b7ff3ea75f7e5aa5', class: "panel-elem-desc" }, h("slot", { key: 'c4d1f5928e8be8f25e36f1a3bf9a33f603b37148', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '78acdd240f6f8bba67e30fb0027ca0e9c7bd96c2', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '4fc3ffb45cc05b62e1350b82be87ea4558b42c03', class: "panel-elem-desc" }, h("slot", { key: '11e64776988c032c870ac9389d559a679dbd9588', name: this.descrSlotName })))));
     }
 };
-ZPanelElem.style = ZPanelElemStyle0;
+ZPanelElem.style = stylesCss();
 
 export { ZPanelElem as z_panel_elem };
-
-//# sourceMappingURL=z-panel-elem.entry.js.map

package/dist/esm/z-popover.entry.js

@@ -1,25 +1,39 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { P as PopoverPosition, g as KeyboardCode, p as Device } from './index-106473a8.js';
-import { a as containsElement, k as getParentElement, l as findContainingBlockAncestor, g as getDevice, m as isElementVisibleInContainer } from './utils-8d6ca808.js';
-import './breakpoints-d148bfde.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
+import { P as PopoverPosition, g as KeyboardCode, p as Device } from './index-BKCj6NR2.js';
+import { a as containsElement, j as getParentElement, k as findContainingBlockAncestor, g as getDevice, l as isElementVisibleInContainer } from './utils-0PByxJyN.js';
+import './breakpoints-Q-tWjk7P.js';
 
-const stylesCss = ":host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open=\"false\"])[current-position]){display:block}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}";
-const ZPopoverStyle0 = stylesCss;
+const stylesCss = () => `:host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open="false"])[current-position]){display:block}:host([center][current-position="top"]),:host([center][current-position="bottom"]){transform:translateX(-50%)}:host([center][current-position="right"]),:host([center][current-position="left"]){transform:translateY(-50%)}:host([current-position^="top"]){margin:0 0 var(--space-unit)}:host([current-position^="bottom"]){margin:var(--space-unit) 0 0}:host([current-position^="left"]){margin:0 var(--space-unit) 0 0}:host([current-position^="right"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:"";transform:rotate(45deg)}:host([show-arrow="false"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^="top"])::before{top:var(--arrow-center-y-offset)}:host([current-position^="bottom"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position="top"])::before,:host([current-position="bottom"])::before{right:var(--arrow-edge-offset)}:host([current-position="right"])::before,:host([current-position="left"])::before{bottom:var(--arrow-edge-offset)}:host([current-position="right"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left"])::before{left:var(--arrow-center-y-offset)}:host([current-position="top_right"])::before,:host([current-position="bottom_right"])::before{right:var(--arrow-edge-offset)}:host([current-position="top_left"])::before,:host([current-position="bottom_left"])::before{left:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="left_top"])::before{top:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="right_bottom"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left_top"])::before,:host([current-position="left_bottom"])::before{left:var(--arrow-center-y-offset)}:host([current-position="right_bottom"])::before,:host([current-position="left_bottom"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position="top"])::before,:host([center][current-position="bottom"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position="right"])::before,:host([center][current-position="left"])::before{top:var(--arrow-center-x-offset);bottom:auto}`;
 
 const ZPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.positionChange = createEvent(this, "positionChange", 7);
         this.openChange = createEvent(this, "openChange", 7);
-        /** space tolerance for space calculations */
-        this.spaceTolerance = 3;
+        /**
+         * The preferred position to render the popover.
+         * The popover will automatically search another position if not enough space is available for the preferred position.
+         * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
+         */
         this.position = PopoverPosition.TOP;
+        /**
+         * The initial open state of the popover.
+         * Internal changes of this prop are emitted through the `openChange` event.
+         * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.
+         */
         this.open = false;
-        this.bindTo = undefined;
+        /** Whether to show popover's arrow. */
         this.showArrow = false;
+        /** Whether to center the popup on the main side (according to "position"). */
         this.center = false;
+        /**
+         * Whether the popover can be closed by clicking outside of it or pressing the escape key.
+         * Otherwise, it will be closed only programmatically (by setting `open` to `false`).
+         * Default: `true`.
+         */
         this.closable = true;
-        this.currentPosition = undefined;
+        /** space tolerance for space calculations */
+        this.spaceTolerance = 3;
     }
     closePopoverWithKeyboard(e) {
         if (this.closable && e.key === KeyboardCode.ESC) {
@@ -492,13 +506,19 @@ const ZPopover = class {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '0a8cd5736765d61bf31b6f19f6fd6b3b61ffb414', "current-position": this.currentPosition }, h("slot", { key: '269e9c027b0636583b199d91e724ca2093aac615' })));
+        return (h(Host, { key: '11ab6b060fdc4a10752881c38d3a369f2ae267a6', "current-position": this.currentPosition }, h("slot", { key: '40ae4b9e51638e5d92d916937ccfac5f85c0d36f' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "position": ["validatePosition"],
-        "open": ["onOpen"],
-        "bindTo": ["onBindingChange"]
+        "position": [{
+                "validatePosition": 0
+            }],
+        "open": [{
+                "onOpen": 0
+            }],
+        "bindTo": [{
+                "onBindingChange": 0
+            }]
     }; }
 };
 // Clockwise order of positions.
@@ -516,8 +536,6 @@ ZPopover.positionOrder = [
     PopoverPosition.LEFT_TOP,
     PopoverPosition.LEFT_BOTTOM,
 ];
-ZPopover.style = ZPopoverStyle0;
+ZPopover.style = stylesCss();
 
 export { ZPopover as z_popover };
-
-//# sourceMappingURL=z-popover.entry.js.map