@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.0

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

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
-const index$1 = require('./index-15126331.js');
+const index = require('./index-e3299e0a.js');
 
-const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;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-icon01)}z-pagination *:disabled z-icon{fill:var(--color-disabled02)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-text02)}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(--color-surface03);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,\n    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-hover-surface);box-shadow:inset var(--shadow-focus-primary);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{background-color:var(--color-disabled01);color:var(--color-disabled02);cursor:default;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:focus-visible{border-bottom-color:var(--color-hover-light)}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;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-text02);text-transform:uppercase}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-surface03)}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(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@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 stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;flex-direction:column;gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);max-width:100%;flex-wrap:wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-icon01)}z-pagination *:disabled z-icon{fill:var(--color-disabled02)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-text02)}z-pagination .pagination-bar{display:flex;align-items:center;height:48px;max-width:100%}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;margin:0;background-color:var(--color-surface03);transition:background-color .150s ease-out,\n    color .150s ease-out,\n    border-bottom-color .150s ease-out,\n    font-size .150s ease-in-out,\n    font-weight .150s ease-in-out;color:var(--color-primary01);border:none;font-family:inherit;font-weight:inherit;cursor:pointer}z-pagination .pagination-bar button:focus-visible{outline:none;box-shadow:inset var(--shadow-focus-primary);background-color:var(--color-hover-surface)}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);text-transform:uppercase;white-space:nowrap;font-weight:var(--font-sb)}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{background-color:var(--color-disabled01);color:var(--color-disabled02);cursor:default;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:focus-visible{border-bottom-color:var(--color-hover-light)}z-pagination .pagination-bar .page-button[data-current]{font-size:var(--font-size-7);border-bottom-color:var(--color-primary01)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-text02);text-transform:uppercase}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;-moz-appearance:none}z-pagination .mobile-go-to-page{display:flex;justify-content:center;align-items:center;flex:1 auto;height:100%;background-color:var(--color-surface03)}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;-webkit-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(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@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) {
@@ -88,7 +87,7 @@ const ZPagination = class {
   getPagesChunks() {
     // array of numbers from 1 to `totalPages`
     const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
-    const chunks = [];
+    let chunks = [];
     const chunksCount = Math.ceil(pages.length / this._visiblePages);
     for (let index = 0; index < chunksCount; index++) {
       chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));
@@ -135,14 +134,14 @@ const ZPagination = class {
   }
   /**
    * Render chunked page buttons.
-   * @returns {HTMLDivElement[]}
+   * @returns {HTMLDivElement}
    */
   renderPages() {
     const pagesChunks = this.getPagesChunks();
     if (pagesChunks.length <= 0) {
       return;
     }
-    return pagesChunks.map((chunk) => index.h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page))));
+    return pagesChunks.map((chunk) => (index.h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))));
   }
   /**
    * Render page buttons when split feature is enabled.
@@ -162,7 +161,8 @@ const ZPagination = class {
         this.renderPage(this.totalPages),
       ];
     }
-    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {
+    if (this.currentPage > this.split * 2 + 2 &&
+      this.currentPage < this.totalPages - this.split * 2 - 1) {
       // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.
       return [
         this.renderPage(1),
@@ -190,10 +190,10 @@ const ZPagination = class {
     return [
       this.label && index.h("span", { class: "page-label body-1-sb" }, this.label),
       index.h("div", { class: "pagination-bar" }, this.renderBackButton(), !this.goToPage && (index.h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, pagesChunks.length > 0 &&
-        pagesChunks.map((chunk) => index.h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))))), this.goToPage && (index.h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
+        pagesChunks.map((chunk) => (index.h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page))))))), this.goToPage && (index.h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
           ev.preventDefault();
           this.selectPage(this.goToPageValue);
-        } }, index.h("z-input", { class: "go-to-page-input", type: index$1.InputTypeEnum.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+        } }, index.h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, onInput: (ev) => {
           this.goToPageValue = ev.target.value;
         }, placeholder: this.currentPage.toString(), hasclearicon: false }), index.h("span", null, `/${this.totalPages}`))), this.renderForwardButton()),
     ];
@@ -202,7 +202,7 @@ const ZPagination = class {
     this.setVisiblePages();
   }
   componentDidRender() {
-    if (this.split !== 0) {
+    if (this.split) {
       this.edges = false;
     }
     this.setPagesContainerWidth();
@@ -210,11 +210,14 @@ const ZPagination = class {
   }
   render() {
     if (this.isMobile) {
-      return index.h(index.Host, null, this.renderMobile());
+      return this.renderMobile();
     }
-    return (index.h(index.Host, null, index.h("div", { class: "pagination-bar" }, this.label && index.h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), index.h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (index.h("div", { class: "go-to-page" }, index.h("span", { class: "label body-5-sb" }, "Vai a pagina:"), index.h("div", { class: "inputs" }, index.h("z-input", { class: "go-to-page-input", type: index$1.InputTypeEnum.NUMBER, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
-        this.goToPageValue = ev.target.value;
-      }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), index.h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai"))))));
+    return [
+      index.h("div", { class: "pagination-bar" }, this.label && index.h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), index.h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (index.h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))),
+      this.goToPage && (index.h("div", { class: "go-to-page" }, index.h("span", { class: "label body-5-sb" }, "Vai a pagina:"), index.h("div", { class: "inputs" }, index.h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+          this.goToPageValue = ev.target.value;
+        }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), index.h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai")))),
+    ];
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
+const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{width:inherit;font-family:var(--dashboard-font);font-weight:var(--font-rg)}.panel-elem-container{width:100%}.panel-elem-icon{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon img{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link{margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px;text-align:center}.panel-elem-link>z-link{font-weight:var(--font-sb)}.panel-elem-desc{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}";
+const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg);width:inherit}.panel-elem-container{width:100%}.panel-elem-icon{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon img{display:block;object-fit:contain;max-width:96px;height:32px;margin:auto}.panel-elem-link{border-radius:var(--border-no-radius);margin:var(--space-unit) auto 0;text-align:center;font-size:12px}.panel-elem-link>z-link{font-weight:var(--font-sb)}.panel-elem-desc{letter-spacing:0.16px;text-align:center;margin:0;padding-top:var(--space-unit)}";
 
 const ZPanelElem = class {
   constructor(hostRef) {
@@ -16,13 +16,13 @@ const ZPanelElem = class {
   }
   renderIcon() {
     if (this.isdisabled) {
-      return (index.h("img", { src: this.imgurl, alt: this.imgalt }));
+      return index.h("img", { src: this.imgurl, alt: this.imgalt });
     }
     return (index.h("a", { class: "elem-icon", href: this.url, target: this.target }, index.h("img", { src: this.imgurl, alt: this.imgalt })));
   }
   render() {
     const elemId = this.elemid ? this.elemid : "";
-    return (index.h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && index.h("div", { class: "panel-elem-icon" }, this.renderIcon()), index.h("div", { class: "panel-elem-link" }, index.h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)), this.descrSlotName && (index.h("div", { class: "panel-elem-desc body-long-01" }, index.h("slot", { name: this.descrSlotName })))));
+    return (index.h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { class: "panel-elem-icon" }, this.renderIcon())), index.h("div", { class: "panel-elem-link" }, index.h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)), this.descr_slot_name && (index.h("div", { class: "panel-elem-desc body-long-01" }, index.h("slot", { name: this.descr_slot_name })))));
   }
 };
 ZPanelElem.style = stylesCss;

package/dist/cjs/z-pocket-message.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
+const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:grid;padding-top:calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--color-surface03);color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;grid-template-columns:36px auto;grid-template-rows:auto auto}:host>div>z-icon{grid-column:1 / 2;grid-row:1 / 2}:host>div>div.content{margin-bottom:var(--space-unit);grid-column:2 / 3;grid-row:1 / 2}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;margin-bottom:var(--space-unit);grid-column:1 / 3;grid-row:2 / 3}@media only screen and (min-width: 768px){:host>div>div.cta-wrapper{flex-direction:row;grid-column:2 / 3}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;border-bottom:var(--border-size-small) solid var(--color-surface03);padding-top:calc(var(--space-unit) * 1.5);display:grid;grid-template-rows:auto auto;grid-template-columns:36px auto}:host>div>z-icon{grid-row:1 / 2;grid-column:1 / 2}:host>div>div.content{grid-row:1 / 2;grid-column:2 / 3;margin-bottom:var(--space-unit)}:host>div>div.ctaWrapper{grid-row:2 / 3;grid-column:1 / 3;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;margin-bottom:var(--space-unit)}@media only screen and (min-width: 768px){:host>div>div.ctaWrapper{flex-direction:row;grid-column:2 / 3}}";
 
 const ZPocketMessage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("div", null, index.h("z-icon", { name: "exclamation-circle" }), index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "cta-wrapper" }, index.h("slot", { name: "cta" }))));
+    return (index.h("div", null, index.h("z-icon", { name: "exclamation-circle" }), index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "ctaWrapper" }, index.h("slot", { name: "cta" }))));
   }
 };
 ZPocketMessage.style = stylesCss;

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
-const index$1 = require('./index-15126331.js');
-const utils = require('./utils-b1ef8660.js');
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-745c0423.js');
+const utils = require('./utils-dfe717c7.js');
 const hammer = require('./hammer-4f20813e.js');
 require('./breakpoints-88c4fd6c.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const stylesCss$2 = ":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";
+const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:inherit;height:100%;margin:inherit}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;left:0;right:0;top:0;bottom:0;z-index:998;width:0;height:0}:host>div>div.background.open{height:100%;width:100%}:host>div>div.contentWrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.contentWrapper>div{border-radius:var(--space-unit) var(--space-unit) 0px 0px;box-shadow:0px -2px calc(var(--space-unit) * 0.5) 0px rgba(66, 69, 72, 0.4);margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5)}";
 
 const ZPocket = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
     /** pocket status */
-    this.status = index$1.PocketStatusEnum.PREVIEW;
+    this.status = index$1.PocketStatusEnum.preview;
   }
   /** open z-pocket */
   async open() {
-    this.status = index$1.PocketStatusEnum.OPEN;
+    this.status = index$1.PocketStatusEnum.open;
   }
   /** close z-pocket */
   async close() {
-    this.status = index$1.PocketStatusEnum.CLOSED;
+    this.status = index$1.PocketStatusEnum.closed;
   }
   emitPocketToggle(id, status) {
     this.pocketToggle.emit({ id, status });
@@ -32,12 +32,12 @@ const ZPocket = class {
   handlePocketHeaderClick(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       switch (this.status) {
-        case index$1.PocketStatusEnum.PREVIEW:
-        case index$1.PocketStatusEnum.CLOSED:
-          this.status = index$1.PocketStatusEnum.OPEN;
+        case index$1.PocketStatusEnum.preview:
+        case index$1.PocketStatusEnum.closed:
+          this.status = index$1.PocketStatusEnum.open;
           break;
-        case index$1.PocketStatusEnum.OPEN:
-          this.status = index$1.PocketStatusEnum.CLOSED;
+        case index$1.PocketStatusEnum.open:
+          this.status = index$1.PocketStatusEnum.closed;
           break;
       }
     }
@@ -45,10 +45,10 @@ const ZPocket = class {
   handlePocketHeaderPan(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       if (e.detail.direction === "up") {
-        this.status = index$1.PocketStatusEnum.OPEN;
+        this.status = index$1.PocketStatusEnum.open;
       }
       else if (e.detail.direction === "down") {
-        this.status = index$1.PocketStatusEnum.CLOSED;
+        this.status = index$1.PocketStatusEnum.closed;
       }
     }
   }
@@ -64,7 +64,7 @@ const ZPocket = class {
     }
   }
   render() {
-    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "content-wrapper" }, index.h("div", null, index.h("slot", null)))));
+    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "contentWrapper" }, index.h("div", null, index.h("slot", null)))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
@@ -73,13 +73,13 @@ const ZPocket = class {
 };
 ZPocket.style = stylesCss$2;
 
-const stylesCss$1 = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>main{background:var(--color-surface01);border-left:var(--border-size-small) solid var(--color-surface03);border-right:var(--border-size-small) solid var(--color-surface03);overflow:auto;scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
 
 const ZPocketBody = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /** pocket status */
-    this.status = index$1.PocketStatusEnum.PREVIEW;
+    this.status = index$1.PocketStatusEnum.preview;
   }
   handlePocketToggle(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
@@ -92,7 +92,7 @@ const ZPocketBody = class {
 };
 ZPocketBody.style = stylesCss$1;
 
-const stylesCss = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:flex;height:36px;flex-flow:row nowrap;align-items:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>header{background:var(--color-surface01);border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--space-unit) var(--space-unit) 0px 0px;height:36px;cursor:pointer;display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:center}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
 
 const ZPocketHeader = class {
   constructor(hostRef) {
@@ -115,7 +115,7 @@ const ZPocketHeader = class {
     mc.on("pandown", () => this.emitPocketHeaderPan("down"));
   }
   render() {
-    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", null)));
+    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) }, index.h("slot", null)));
   }
 };
 ZPocketHeader.style = stylesCss;

package/dist/cjs/z-popover-deprecated.cjs.entry.js

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
-const index$1 = require('./index-15126331.js');
-const utils = require('./utils-b1ef8660.js');
+const index = require('./index-e3299e0a.js');
+const index$2 = require('./index-1fda0714.js');
+const index$1 = require('./index-745c0423.js');
+const utils = require('./utils-dfe717c7.js');
+require('./_commonjsHelpers-537d719a.js');
 require('./breakpoints-88c4fd6c.js');
 
-const stylesCss = ".sc-z-popover-deprecated-h{position:relative;display:inline-block;font-family:var(--dashboard-font);font-weight:var(--font-rg);--shadow-arrow-color:rgb(66 69 72 / 20%);--shadow-arrow-below-color:rgb(66 69 72 / 10%)}.popover-content-container.sc-z-popover-deprecated{position:absolute;z-index:999;min-width:64px;min-height:32px;box-sizing:border-box;visibility:hidden}.popover-content-container.visible.sc-z-popover-deprecated{visibility:visible}.popover-content-container.border-radius-none.sc-z-popover-deprecated{border-radius:0}.popover-content-container.border-radius-small.sc-z-popover-deprecated{border-radius:var(--border-radius-small)}.popover-content-container.border-radius-medium.sc-z-popover-deprecated{border-radius:var(--border-radius)}.popover-content-container.shadow-1.sc-z-popover-deprecated{box-shadow:var(--shadow-1)}.popover-content-container.shadow-2.sc-z-popover-deprecated{box-shadow:var(--shadow-2)}.popover-content-container.shadow-3.sc-z-popover-deprecated{box-shadow:var(--shadow-3)}.popover-content-container.shadow-4.sc-z-popover-deprecated{box-shadow:var(--shadow-4)}.popover-content-container.shadow-6.sc-z-popover-deprecated{box-shadow:var(--shadow-6)}.popover-content-container.shadow-8.sc-z-popover-deprecated{box-shadow:var(--shadow-8)}.popover-content-container.shadow-12.sc-z-popover-deprecated{box-shadow:var(--shadow-12)}.popover-content-container.shadow-16.sc-z-popover-deprecated{box-shadow:var(--shadow-16)}.popover-content-container.shadow-24.sc-z-popover-deprecated{box-shadow:var(--shadow-24)}.popover-content-container.after-down.sc-z-popover-deprecated{top:0;left:calc(100% + var(--space-unit))}.popover-content-container.after-center.sc-z-popover-deprecated{top:50%;left:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.after-up.sc-z-popover-deprecated{bottom:0;left:calc(100% + var(--space-unit))}.popover-content-container.below-right.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:0}.popover-content-container.below-center.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.below-left.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));right:0}.popover-content-container.before-down.sc-z-popover-deprecated{top:0;right:calc(100% + var(--space-unit))}.popover-content-container.before-center.sc-z-popover-deprecated{top:50%;right:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.before-up.sc-z-popover-deprecated{right:calc(100% + var(--space-unit));bottom:0}.popover-content-container.above-right.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:0}.popover-content-container.above-center.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.above-left.sc-z-popover-deprecated{right:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.sc-z-popover-deprecated::before{position:absolute;z-index:-1;display:none;width:8px;height:8px;background-color:inherit;content:\"\";transform:rotate(45deg)}.popover-content-container.after-down.sc-z-popover-deprecated::before{top:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-up.sc-z-popover-deprecated::before{bottom:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.below-right.sc-z-popover-deprecated::before{top:-4px;left:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-center.sc-z-popover-deprecated::before{top:-4px;left:calc(50% - 4px);box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-left.sc-z-popover-deprecated::before{top:-4px;right:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.before-down.sc-z-popover-deprecated::before{top:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-up.sc-z-popover-deprecated::before{right:-4px;bottom:12px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-right.sc-z-popover-deprecated::before{bottom:-4px;left:12px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-center.sc-z-popover-deprecated::before{bottom:-4px;left:calc(50% - 4px);box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-left.sc-z-popover-deprecated::before{right:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.show-arrow.sc-z-popover-deprecated::before{display:block}";
+const stylesCss = ".sc-z-popover-deprecated-h{font-family:var(--dashboard-font);font-weight:var(--font-rg);position:relative;display:inline-block;--shadow-arrow-color:rgba(66, 69, 72, 0.2);--shadow-arrow-below-color:rgba(66, 69, 72, 0.1)}.popover-content-container.sc-z-popover-deprecated{box-sizing:border-box;visibility:hidden;position:absolute;min-width:64px;min-height:32px;z-index:999}.popover-content-container.visible.sc-z-popover-deprecated{visibility:visible}.popover-content-container.border-radius-none.sc-z-popover-deprecated{border-radius:0}.popover-content-container.border-radius-small.sc-z-popover-deprecated{border-radius:var(--border-radius-small)}.popover-content-container.border-radius-medium.sc-z-popover-deprecated{border-radius:var(--border-radius)}.popover-content-container.shadow-1.sc-z-popover-deprecated{box-shadow:var(--shadow-1)}.popover-content-container.shadow-2.sc-z-popover-deprecated{box-shadow:var(--shadow-2)}.popover-content-container.shadow-3.sc-z-popover-deprecated{box-shadow:var(--shadow-3)}.popover-content-container.shadow-4.sc-z-popover-deprecated{box-shadow:var(--shadow-4)}.popover-content-container.shadow-6.sc-z-popover-deprecated{box-shadow:var(--shadow-6)}.popover-content-container.shadow-8.sc-z-popover-deprecated{box-shadow:var(--shadow-8)}.popover-content-container.shadow-12.sc-z-popover-deprecated{box-shadow:var(--shadow-12)}.popover-content-container.shadow-16.sc-z-popover-deprecated{box-shadow:var(--shadow-16)}.popover-content-container.shadow-24.sc-z-popover-deprecated{box-shadow:var(--shadow-24)}.popover-content-container.after-down.sc-z-popover-deprecated{top:0;left:calc(100% + var(--space-unit))}.popover-content-container.after-center.sc-z-popover-deprecated{top:50%;left:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.after-up.sc-z-popover-deprecated{bottom:0;left:calc(100% + var(--space-unit))}.popover-content-container.below-right.sc-z-popover-deprecated{left:0;top:calc(100% + var(--space-unit))}.popover-content-container.below-center.sc-z-popover-deprecated{left:50%;top:calc(100% + var(--space-unit));transform:translateX(-50%)}.popover-content-container.below-left.sc-z-popover-deprecated{right:0;top:calc(100% + var(--space-unit))}.popover-content-container.before-down.sc-z-popover-deprecated{top:0;right:calc(100% + var(--space-unit))}.popover-content-container.before-center.sc-z-popover-deprecated{top:50%;right:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.before-up.sc-z-popover-deprecated{bottom:0;right:calc(100% + var(--space-unit))}.popover-content-container.above-right.sc-z-popover-deprecated{left:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.above-center.sc-z-popover-deprecated{left:50%;bottom:calc(100% + var(--space-unit));transform:translateX(-50%)}.popover-content-container.above-left.sc-z-popover-deprecated{right:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.sc-z-popover-deprecated:before{display:none;position:absolute;content:\"\";width:8px;height:8px;z-index:-1;background-color:inherit;transform:rotate(45deg)}.popover-content-container.after-down.sc-z-popover-deprecated:before{top:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-center.sc-z-popover-deprecated:before{top:calc(50% - 4px);left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-up.sc-z-popover-deprecated:before{bottom:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.below-right.sc-z-popover-deprecated:before{left:12px;top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-center.sc-z-popover-deprecated:before{left:calc(50% - 4px);top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-left.sc-z-popover-deprecated:before{right:12px;top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.before-down.sc-z-popover-deprecated:before{top:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-center.sc-z-popover-deprecated:before{top:calc(50% - 4px);right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-up.sc-z-popover-deprecated:before{bottom:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-right.sc-z-popover-deprecated:before{left:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-center.sc-z-popover-deprecated:before{left:calc(50% - 4px);bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-left.sc-z-popover-deprecated:before{right:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.show-arrow.sc-z-popover-deprecated:before{display:block}";
 
 const ZPopoverDeprecated = class {
   /**
@@ -17,13 +19,13 @@ const ZPopoverDeprecated = class {
     index.registerInstance(this, hostRef);
     this.triggerClick = index.createEvent(this, "triggerClick", 7);
     /** [optional] Popover position */
-    this.position = index$1.PopoverPosition.AFTER_UP;
+    this.position = index$1.PopoverPosition["after-up"];
     /** [optional] Background color token for popover */
     this.backgroundColor = "color-white";
     /** [optional] Border radius token for popover */
-    this.borderRadius = index$1.PopoverBorderRadius.SMALL;
+    this.borderRadius = index$1.PopoverBorderRadius.small;
     /** [optional] Box shadow token for popover */
-    this.boxShadow = index$1.PopoverShadow.SHADOW_1;
+    this.boxShadow = index$1.PopoverShadow["shadow-1"];
     /** [optional] Show or hide arrow */
     this.showArrow = false;
     /** [optional] Sets padding for Popover container */
@@ -67,7 +69,8 @@ const ZPopoverDeprecated = class {
     }
     // If right is outside viewport
     if (r > width) {
-      if (this.position.startsWith("above") || this.position.startsWith("below")) {
+      if (this.position.startsWith("above") ||
+        this.position.startsWith("below")) {
         secondSide = "left";
       }
       else {
@@ -76,7 +79,8 @@ const ZPopoverDeprecated = class {
     }
     // If left is outside viewport
     if (l < 0) {
-      if (this.position.startsWith("above") || this.position.startsWith("below")) {
+      if (this.position.startsWith("above") ||
+        this.position.startsWith("below")) {
         secondSide = "right";
       }
       else {
@@ -117,14 +121,7 @@ const ZPopoverDeprecated = class {
         if (event.key === index$1.KeyboardKeys.ENTER) {
           this.handleClick(event);
         }
-      } }, index.h("slot", { name: "trigger" })), index.h("div", { ref: (e) => (this.popoverElem = e), class: {
-        "popover-content-container": true,
-        [this.popoverPosition]: true,
-        [`border-radius-${this.borderRadius}`]: true,
-        [this.boxShadow]: true,
-        "show-arrow": this.showArrow,
-        "visible": this.isVisible,
-      }, style: {
+      } }, index.h("slot", { name: "trigger" })), index.h("div", { ref: (e) => (this.popoverElem = e), class: index$2.classnames("popover-content-container", this.popoverPosition, `border-radius-${this.borderRadius}`, this.boxShadow, { "show-arrow": this.showArrow }, { visible: this.isVisible }), style: {
         backgroundColor: `var(--${this.backgroundColor})`,
         padding: this.padding,
       } }, index.h("slot", { name: "popover" }))));

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0b49c192.js');
-const index$1 = require('./index-15126331.js');
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-745c0423.js');
 
-const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-text01);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}: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);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}::slotted(*){overflow:auto;flex:1 auto}";
+const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-text01);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;align-items:center;justify-content:center;padding:var(--z-popover-padding);min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);color:var(--z-popover-theme--text);fill:currentColor;font-family:var(--font-family-sans);text-align:center;border-radius:var(--border-radius-small);background:var(--z-popover-theme--surface);filter:var(--z-popover-shadow-filter)}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}: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));display:block;content:\"\";position:absolute;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);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}::slotted(*){flex:1 auto;overflow:auto}";
 
-const DOCUMENT_ELEMENT = document.documentElement;
+const documentElement = document.documentElement;
 function getParentElement(element) {
   if (element.parentNode.host) {
     return element.parentNode.host;
@@ -21,18 +21,24 @@ function getParentElement(element) {
  */
 function findScrollableParent(element) {
   let parent = getParentElement(element);
-  while (parent && parent !== DOCUMENT_ELEMENT) {
+  while (parent && parent !== documentElement) {
     const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-    if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
+    if (overflow === "hidden" ||
+      overflowY === "hidden" ||
+      overflowX === "hidden") {
       return parent;
     }
-    if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
-      (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
+    if ((parent.scrollHeight > parent.clientHeight &&
+      overflow !== "visible" &&
+      overflowY !== "visible") ||
+      (parent.scrollWidth > parent.clientWidth &&
+        overflow !== "visible" &&
+        overflowX !== "visible")) {
       return parent;
     }
     parent = getParentElement(parent);
   }
-  return DOCUMENT_ELEMENT;
+  return documentElement;
 }
 /**
  * Calculate computed offset.
@@ -94,7 +100,7 @@ const ZPopover = class {
     this.positionChange = index.createEvent(this, "positionChange", 7);
     this.openChange = index.createEvent(this, "openChange", 7);
     /** Popover position. */
-    this.position = index$1.PopoverPositions.AUTO;
+    this.position = index$1.PopoverPositions.auto;
     /**
      * The open state of the popover.
      */
@@ -121,7 +127,6 @@ const ZPopover = class {
     if (!this.closable) {
       return;
     }
-    // @ts-ignore
     const parent = e.path.find((elem) => elem === this.host);
     if (!parent) {
       this.open = false;
@@ -129,8 +134,9 @@ const ZPopover = class {
     }
   }
   validatePosition(newValue) {
-    if (newValue && !Object.values(index$1.PopoverPositions).includes(newValue)) {
-      this.position = index$1.PopoverPositions.AUTO;
+    if (newValue &&
+      !Object.values(index$1.PopoverPositions).includes(newValue)) {
+      this.position = index$1.PopoverPositions.auto;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -149,8 +155,8 @@ const ZPopover = class {
       };
       setPosition();
     }
-    else if (this.host.hasAttribute("current-position")) {
-      this.host.removeAttribute("current-position");
+    else if (this.host.hasAttribute('current-position')) {
+      this.host.removeAttribute('current-position');
       this.currentPosition = undefined;
     }
     this.openChange.emit({ open: this.open });
@@ -183,11 +189,19 @@ const ZPopover = class {
       : { top: 0, right: 0, bottom: 0, left: 0 };
     const boundingRect = computeOffset(element, scrollContainer);
     const top = boundingRect.top - scrollContainer.scrollTop;
-    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
+    const bottom = scrollingBoundingRect.height -
+      (boundingRect.top + boundingRect.height) +
+      scrollContainer.scrollTop;
     const left = boundingRect.left - scrollContainer.scrollLeft;
-    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
-    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
-    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
+    const right = scrollingBoundingRect.width -
+      (boundingRect.left + boundingRect.width) +
+      scrollContainer.scrollLeft;
+    const overflowBottom = Math.max(0, scrollingBoundingRect.top +
+      scrollingBoundingRect.height -
+      window.innerHeight);
+    const overflowRight = Math.max(0, scrollingBoundingRect.left +
+      scrollingBoundingRect.width -
+      window.innerWidth);
     const availableTop = Math.min(top, top + scrollingBoundingRect.top);
     const availableBottom = Math.min(bottom, bottom - overflowBottom);
     const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
@@ -196,28 +210,28 @@ const ZPopover = class {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === index$1.PopoverPositions.AUTO) {
+    if (this.position === index$1.PopoverPositions.auto) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(index$1.PopoverPositions.LEFT);
+        positions.push(index$1.PopoverPositions.left);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(index$1.PopoverPositions.RIGHT);
+        positions.push(index$1.PopoverPositions.right);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(index$1.PopoverPositions.TOP);
+        positions.unshift(index$1.PopoverPositions.top);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(index$1.PopoverPositions.TOP);
+        positions.push(index$1.PopoverPositions.top);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(index$1.PopoverPositions.BOTTOM);
+        positions.unshift(index$1.PopoverPositions.bottom);
       }
       else {
-        positions.push(index$1.PopoverPositions.BOTTOM);
+        positions.push(index$1.PopoverPositions.bottom);
       }
       position = positions.join("_");
     }
@@ -229,17 +243,18 @@ const ZPopover = class {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === index$1.PopoverPositions.TOP || position === index$1.PopoverPositions.TOP_RIGHT) {
+    if (position === index$1.PopoverPositions.top ||
+      position === index$1.PopoverPositions.top_right) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === index$1.PopoverPositions.TOP_RIGHT) {
+      if (position === index$1.PopoverPositions.top_right) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === index$1.PopoverPositions.TOP_LEFT) {
+    else if (position === index$1.PopoverPositions.top_left) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -247,17 +262,18 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === index$1.PopoverPositions.BOTTOM || position === index$1.PopoverPositions.BOTTOM_RIGHT) {
+    else if (position === index$1.PopoverPositions.bottom ||
+      position === index$1.PopoverPositions.bottom_right) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === index$1.PopoverPositions.BOTTOM_RIGHT) {
+      if (position === index$1.PopoverPositions.bottom_right) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === index$1.PopoverPositions.BOTTOM_LEFT) {
+    else if (position === index$1.PopoverPositions.bottom_left) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -265,7 +281,8 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === index$1.PopoverPositions.RIGHT || position === index$1.PopoverPositions.RIGHT_BOTTOM) {
+    else if (position === index$1.PopoverPositions.right ||
+      position === index$1.PopoverPositions.right_bottom) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -273,7 +290,7 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === index$1.PopoverPositions.RIGHT_TOP) {
+    else if (position === index$1.PopoverPositions.right_top) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -281,7 +298,8 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === index$1.PopoverPositions.LEFT || position === index$1.PopoverPositions.LEFT_BOTTOM) {
+    else if (position === index$1.PopoverPositions.left ||
+      position === index$1.PopoverPositions.left_bottom) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -289,7 +307,7 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === index$1.PopoverPositions.LEFT_TOP) {
+    else if (position === index$1.PopoverPositions.left_top) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -298,7 +316,7 @@ const ZPopover = class {
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
     this.currentPosition = position || this.position;
-    this.host.setAttribute("current-position", this.currentPosition);
+    this.host.setAttribute('current-position', this.currentPosition);
   }
   componentWillLoad() {
     this.validatePosition(this.position);