@zanichelli/delta_share 3.2.5 → 4.0.0

package/dist/wc/cjs/z-avatar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
 
 const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
 
@@ -11,12 +11,11 @@ const ZAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a, _b;
-    /** [optional] Avatar size */
     this.size = index$1.AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
+    this.text = undefined;
     this.textColor = "color-white";
-    /** [optional] Avatar background color */
     this.backgroundColor = "gray700";
+    this.image = undefined;
     if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
@@ -33,10 +32,10 @@ const ZAvatar = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+    return (index.h(index.Host, { key: '8e7d78169cfb0f1705bc91c8db649a7d500290a6', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
         color: `var(--${this.textColor})`,
         backgroundColor: `var(--${this.backgroundColor})`,
-      } }, this.text && !this.image && index.h("span", null, this.text.substring(0, 2)), this.image && (index.h("img", { src: this.image, onError: () => (this.image = "") }))));
+      } }, this.text && !this.image && index.h("span", { key: '096abc1df006eea6430564aaf999c22a18b60682' }, this.text.substring(0, 2)), this.image && (index.h("img", { key: '68d28c12bc007a0575e6797987501a1851ae8b3a', src: this.image, onError: () => (this.image = "") }))));
   }
 };
 ZAvatar.style = stylesCss;

package/dist/wc/cjs/z-book-card.cjs.entry.js

@@ -2,21 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
-const breakpoints = require('./breakpoints-e7c8838e.js');
-const utils = require('./utils-43a3deb6.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
+const breakpoints = require('./breakpoints-7770f79c.js');
+const utils = require('./utils-ff107ab4.js');
 
-const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;box-shadow:var(--shadow-2);color:var(--color-text04);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:\"\"}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:flex;height:100%;align-self:center;color:var(--color-text02);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-text02);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-text02);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-text02);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-icon01)}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:flex;height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.compact div.content{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
+const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon.interactive:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:\"\"}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:flex;height:100%;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article ::slotted([slot=\"header-cta\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:flex;height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.compact div.content{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
 
 const ZBookCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ribbonClick = index.createEvent(this, "ribbonClick", 7);
-    /**
-     * [optional] ISBN label
-     */
+    this.variant = undefined;
+    this.cover = undefined;
+    this.operaTitle = undefined;
+    this.volumeTitle = undefined;
+    this.authors = undefined;
+    this.isbn = undefined;
     this.isbnLabel = "";
+    this.ribbon = undefined;
+    this.ribbonIcon = undefined;
+    this.ribbonInteractive = undefined;
+    this.borderless = undefined;
+    this.fallbackCover = undefined;
+    this.operaTitleTag = undefined;
     this.isMobile = false;
     this.hasResources = false;
     this.showResources = false;
@@ -26,7 +35,7 @@ const ZBookCard = class {
   }
   componentWillLoad() {
     this.id = `id-${utils.randomId()}`;
-    const mobileMediaQuery = window.matchMedia(`(max-width: ${breakpoints.mobileBreakpoint}px)`);
+    const mobileMediaQuery = window.matchMedia(`(max-width: ${breakpoints.Breakpoints.MOBILE}px)`);
     this.isMobile = mobileMediaQuery.matches;
     mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);
   }
@@ -78,7 +87,7 @@ const ZBookCard = class {
   }
   renderRibbon() {
     const content = [
-      this.ribbonIcon && (index.h("z-icon", { name: this.ribbonIcon, width: 16, height: 16, fill: "color-icon03" })),
+      this.ribbonIcon && (index.h("z-icon", { name: this.ribbonIcon, width: 16, height: 16, fill: "color-inverse-icon" })),
       index.h("span", null, this.ribbon),
     ];
     return this.ribbonInteractive ? (index.h("button", { class: "ribbon interactive", onClick: () => this.emitRibbonClick() }, content)) : (index.h("div", { class: "ribbon" }, content));
@@ -114,7 +123,7 @@ const ZBookCard = class {
     return (index.h("div", { class: "action-container" }, index.h("slot", { name: "footer-cta" })));
   }
   render() {
-    return (index.h("article", { class: {
+    return (index.h("article", { key: '4d781e135d7b5838443817e70df1cfdc3d597adc', class: {
         [this.variant]: true,
         borderless: !!this.borderless,
       } }, this.renderCard()));

package/dist/wc/cjs/z-breadcrumb.cjs.entry.js

@@ -2,35 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
-const utils = require('./utils-43a3deb6.js');
-require('./breakpoints-e7c8838e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
+const utils = require('./utils-ff107ab4.js');
+require('./breakpoints-7770f79c.js');
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;height:30px;align-items:center;padding-left:calc(var(--space-unit) / 2);overflow-x:hidden}li{display:flex;align-items:baseline}:host a:focus,:host button:focus{box-shadow:var(--shadow-focus-primary);outline:0}:host a{color:var(--color-link-primary);font-size:var(--font-size-2);text-decoration:none;white-space:nowrap}:host a.homepage-icon{display:list-item}:host a.homepage-text{display:initial;margin-top:calc(var(--space-unit) / 4);margin-right:var(--space-unit)}:host a.missing-path{color:var(--color-text01)}:host a.text-ellipsis{display:-webkit-box !important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:normal}:host ol{display:flex;padding:0;margin:0;list-style-type:none}:host ol>li:not(:first-child,:last-child){margin-right:var(--space-unit)}nav.underlined>ol>li a:not(.missing-path),nav.underlined>ol>li button{text-decoration:underline}nav.semibold>ol>li a:not(.missing-path),nav.semibold>ol>li button{font-weight:var(--font-sb)}:host z-icon{margin-right:var(--space-unit);--z-icon-width:12px;--z-icon-height:12px}:host button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}:host .hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}:host .hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}:host .hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}:host .full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}:host .tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;margin-right:2px;color:var(--color-disabled03);content:\"\\203A\"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-link-primary);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-link-primary)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";
 
 const ZBreadcrumb = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.clickOnNode = index.createEvent(this, "clickOnNode", 7);
-    /** [optional] Sets the path style */
+    this.collapsedElements = [];
+    this.currentIndex = 0;
+    this.truncatePosition = null;
     this.pathStyle = index$1.BreadcrumbPathStyle.UNDERLINED;
-    /** [optional] Variant of first node */
     this.homepageVariant = index$1.BreadcrumbHomepageVariant.ICON;
-    /** [optional] Sets max number of element to show */
     this.maxNodesToShow = 5;
-    /** [optional] Controls the behaviour on <a> tag click/enter */
     this.preventFollowUrl = false;
-    /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
     this.overflowMenuItemRows = 0;
-    /** [optional] Sets the maximun number of chars per single node */
     this.truncateChar = 30;
-    /** Detect whether the length of the nodes shown exceeds the container length */
+    this.viewPortWidth = undefined;
     this.hasOverflow = false;
     this.popoverEllipsisOpen = false;
-    this.collapsedElements = [];
-    this.currentIndex = 0;
-    this.truncatePosition = null;
   }
   handleResize() {
     this.viewPortWidth = utils.getDevice();
@@ -42,7 +36,7 @@ const ZBreadcrumb = class {
   }
   // eslint-disable-next-line lines-between-class-members
   handlePropChange() {
-    this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+    this.initializeBreadcrumb();
   }
   handleResizeUp(newValue, oldValue) {
     if (newValue === index$1.Device.MOBILE ||
@@ -52,12 +46,12 @@ const ZBreadcrumb = class {
       (oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP) ||
       (oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP_WIDE) ||
       (oldValue === index$1.Device.DESKTOP && newValue === index$1.Device.DESKTOP_WIDE)) {
-      this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+      this.initializeBreadcrumb();
     }
   }
   componentWillLoad() {
     this.viewPortWidth = utils.getDevice();
-    this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
+    this.initializeBreadcrumb();
   }
   componentWillRender() {
     if (this.viewPortWidth !== index$1.Device.MOBILE && this.hasOverflow) {
@@ -73,61 +67,52 @@ const ZBreadcrumb = class {
       this.hasOverflow = true;
     }
   }
-  initializeBreadcrumb(isMobile) {
-    if (isMobile) {
+  initializeBreadcrumb() {
+    if (this.viewPortWidth === index$1.Device.MOBILE) {
       this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
     }
     else {
       this.pathsList = this.getPathsItemsList();
     }
-    this.totalLenght = this.pathsList.length;
     this.homepageNode = this.pathsList.shift();
-    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
+    this.pathListCopy = [...this.pathsList];
     this.collapsedElements = [];
-    if (this.totalLenght > this.maxNodesToShow) {
+    if (this.pathsList.length > this.maxNodesToShow) {
       this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
     }
   }
   checkEllipsisOrOverflowMenu() {
-    if (this.pathListCopy.length > 0) {
-      for (let i = 0; i < this.pathsList.length; i++) {
-        if (this.pathsList[i].text.length > this.truncateChar) {
-          if (this.truncatePosition !== null) {
-            if (this.truncatePosition > 0) {
-              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
-              arrayToPush.forEach((item) => {
-                this.collapsedElements.push(item);
-              });
-              this.pathsList.splice(0, this.truncatePosition);
-              this.truncatePosition = 0;
-              return;
-            }
-            if (this.truncatePosition === 0) {
-              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
-              this.collapsedElements.push(...arrayToPush);
-              this.pathsList.splice(0, this.truncatePosition + 1);
-              this.truncatePosition = null;
-              return;
-            }
-          }
-          if (i !== this.pathsList.length - 1) {
-            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
-            this.currentEllipsisText = this.pathsList[i].text;
-            this.pathsList[i].text = truncatedString;
-            this.pathsList[i].hasTooltip = true;
-            this.truncatePosition = i;
-            return;
-          }
-        }
+    for (let i = 0; i < this.pathsList.length; i++) {
+      if (this.pathsList[i].text.length <= this.truncateChar) {
+        continue;
+      }
+      if (this.truncatePosition > 0) {
+        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));
+        this.pathsList.splice(0, this.truncatePosition);
+        this.truncatePosition = 0;
+        return;
+      }
+      else if (this.truncatePosition === 0) {
+        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));
+        this.pathsList.splice(0, this.truncatePosition + 1);
+        this.truncatePosition = null;
+        return;
+      }
+      if (i !== this.pathsList.length - 1) {
+        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
+        this.currentEllipsisText = this.pathsList[i].text;
+        this.pathsList[i].text = truncatedString;
+        this.pathsList[i].hasTooltip = true;
+        this.truncatePosition = i;
+        return;
       }
     }
   }
-  truncateWithEllipsis(str, length) {
-    const ending = "&mldr;";
-    if (str.length > length) {
-      return str.substring(0, length - 1) + ending;
+  truncateWithEllipsis(str, maxLength) {
+    if (str.length <= maxLength) {
+      return str;
     }
-    return str;
+    return str.substring(0, maxLength - 1) + "&mldr;";
   }
   getPathsItemsList() {
     return Array.from(this.hostElement.children).map((item) => {
@@ -138,38 +123,12 @@ const ZBreadcrumb = class {
       };
     });
   }
-  renderMobileBreadcrumb() {
-    const lastPath = this.pathsList[this.pathsList.length - 1];
-    return (index.h("nav", { "aria-label": "Breadcrumb", class: {
-        underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
-        semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
-      } }, index.h("ol", null, this.renderNode(lastPath, true))));
-  }
-  renderHomepageNode(item) {
+  renderHomepageNode() {
     return (index.h("li", null, index.h("a", { class: {
-        "homepage-icon": this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON,
         "homepage-text": this.homepageVariant === index$1.BreadcrumbHomepageVariant.TEXT,
-      }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON ? (index.h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
-  }
-  renderNode(item, mobile) {
-    return (index.h("li", null, item.hasTooltip && (index.h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, index.h("span", { class: "tooltip-content" }, this.currentEllipsisText))), index.h("a", { class: {
-        "missing-path": !item.path,
-        "text-ellipsis": mobile,
-      }, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
-        if (item.hasTooltip) {
-          this.popoverEllipsisOpen = true;
-        }
-      }, onMouseLeave: () => {
-        if (item.hasTooltip) {
-          this.popoverEllipsisOpen = false;
-        }
-      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${item.text}` : item.text })));
-  }
-  renderBreadcrumb() {
-    return (index.h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
-        underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
-        semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
-      } }, index.h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
+      }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON
+        ? `<z-icon name="home" />`
+        : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))));
   }
   togglePopover() {
     if (!this.collapsedElementsRef.open) {
@@ -205,21 +164,49 @@ const ZBreadcrumb = class {
     }
   }
   renderOverflowMenu() {
-    if (this.collapsedElements.length) {
-      return (index.h("li", null, index.h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, index.h("div", { class: "popover-content" }, index.h("z-list", null, index.h("z-list-group", { size: index$1.ListSize.SMALL }, this.collapsedElements.map((item, index$1, array) => {
-        return (index.h("div", null, index.h("z-list-element", { clickable: true }, index.h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)), index$1 < array.length - 1 && index.h("z-divider", { color: "color-surface03" })));
-      }))))), index.h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
-          this.togglePopover();
-        }, onKeyDown: (e) => {
-          utils.handleKeyboardSubmit(e, this.togglePopover.bind(this));
-          setTimeout(() => {
-            this.anchorElements[0].focus();
-          }, 100);
-        } }, "...")));
+    return (index.h("li", null, index.h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), bindTo: this.triggerButton, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, index.h("div", { class: "popover-content" }, index.h("z-list", null, index.h("z-list-group", { size: index$1.ListSize.SMALL }, this.collapsedElements.map((item, index$1, array) => {
+      return (index.h("div", null, index.h("z-list-element", { clickable: true }, index.h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e), innerHTML: item.text })), index$1 < array.length - 1 && index.h("z-divider", { color: "color-surface03" })));
+    }))))), index.h("button", { class: "dots", ref: (el) => (this.triggerButton = el), "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", onClick: () => {
+        this.togglePopover();
+      }, onKeyDown: (e) => {
+        utils.handleKeyboardSubmit(e, this.togglePopover.bind(this));
+        setTimeout(() => {
+          this.anchorElements[0].focus();
+        }, 100);
+      }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))));
+  }
+  renderMobileItems() {
+    // show only the second to last element
+    const secondToLastPath = this.pathsList[this.pathsList.length - 1];
+    if (!secondToLastPath) {
+      return;
     }
+    return (index.h("li", null, index.h("a", { "aria-current": secondToLastPath.path ? undefined : "page", href: secondToLastPath.path, onClick: (e) => this.handlePreventFollowUrl(e, secondToLastPath) }, index.h("z-icon", { name: "chevron-left" }), index.h("span", { class: {
+        "missing-path": !secondToLastPath.path,
+        "text-ellipsis": true,
+      } }, secondToLastPath.text))));
+  }
+  renderItems() {
+    let trigger;
+    return [
+      this.renderHomepageNode(),
+      this.collapsedElements.length > 0 && this.renderOverflowMenu(),
+      ...this.pathsList.map((item, index$2) => (index.h("li", null, item.hasTooltip && (index.h("z-popover", { class: "full-path-tooltip", bindTo: trigger, open: this.popoverEllipsisOpen, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, index.h("span", { class: "tooltip-content" }, this.currentEllipsisText))), index.h("a", { class: { "missing-path": !item.path }, ref: (val) => (trigger = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
+          if (item.hasTooltip) {
+            this.popoverEllipsisOpen = true;
+          }
+        }, onMouseLeave: () => {
+          if (item.hasTooltip) {
+            this.popoverEllipsisOpen = false;
+          }
+        }, innerHTML: item.text }), index$2 !== this.pathsList.length - 1 && (index.h("z-icon", { class: "separator", name: "chevron-right" }))))),
+    ];
   }
   render() {
-    return (index.h(index.Host, { style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+    return (index.h(index.Host, { key: 'ec59a3c1afe2d946df4b5ef8dae569b40e20e083', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, index.h("nav", { key: '9b1668c981c22cd2d52f31f58e2ac38a18f574fb', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
+        underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
+      } }, index.h("ol", { key: 'fedac8ea463ba9b20784d20cf50f9f8526055d3b' }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

package/dist/wc/cjs/z-button-sort.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const breakpoints = require('./breakpoints-e7c8838e.js');
+const index = require('./index-48ad79ef.js');
+const breakpoints = require('./breakpoints-7770f79c.js');
 
 const stylesCss = "button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";
 
@@ -11,13 +11,13 @@ const ZButtonSort = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonSortClick = index.createEvent(this, "buttonSortClick", 7);
-    /** sort label content (ascending) (optional) */
+    this.buttonid = undefined;
+    this.label = undefined;
+    this.desclabel = undefined;
+    this.counter = undefined;
     this.sortlabelasc = "A-Z";
-    /** sort label content (descending) (optional) */
     this.sortlabeldesc = "Z-A";
-    /** selected flag (optional) */
     this.isselected = false;
-    /** sortable flag (optional) */
     this.sortasc = true;
     this.allowTooltip = false;
   }
@@ -34,7 +34,7 @@ const ZButtonSort = class {
     });
   }
   componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint) {
+    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.Breakpoints.TABLET) {
       this.allowTooltip = true;
     }
   }
@@ -45,7 +45,7 @@ const ZButtonSort = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (index.h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, index.h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { name: "caret-up-down", width: 16, height: 16 })));
+    return (index.h("button", { key: '0cb1fb4cd3661deb66e79e85bcc87657691af1a9', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, index.h("span", { key: '24c3b8e7b8c6acc83f55cbf7bc0233382a3a2738', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { key: 'a9ae20d5e3926dc6b6cd3d54757a9c829c15c823', class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { key: 'd3d3aa5e07074dfd72da40f8059f70e25d1a1f58', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { key: 'e0003ebe4688bf0af648aa9b7eb01c446460f069', name: "caret-up-down", width: 16, height: 16 })));
   }
 };
 ZButtonSort.style = stylesCss;

package/dist/wc/cjs/z-card.cjs.entry.js

@@ -2,18 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
 
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 
 const ZCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Enable shadow. Default: false. */
+    this.variant = undefined;
+    this.coverIcon = undefined;
     this.showShadow = false;
-    /** Enable 'clickable' style like hover and focus style. */
     this.clickable = false;
+    this.hasCoverImage = undefined;
   }
   componentWillLoad() {
     this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
@@ -29,20 +30,20 @@ const ZCard = class {
     ];
   }
   /**
-   * Template for the content div.
+   * Template for the content.
    */
-  renderContentDiv() {
+  renderContent() {
     return (index.h("div", { class: "content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))));
   }
   render() {
     if (this.variant === index$1.CardVariant.TEXT) {
-      return index.h(index.Host, null, this.renderContentDiv());
+      return index.h(index.Host, null, this.renderContent());
     }
     if (this.variant === index$1.CardVariant.OVERLAY || this.hasCoverImage) {
       return (index.h(index.Host, null, index.h("div", { class: "cover-container" }, this.hasCoverImage && [
         index.h("slot", { name: "cover" }),
         this.variant !== index$1.CardVariant.OVERLAY && this.coverIcon && index.h("z-icon", { name: this.coverIcon }),
-      ], !this.hasCoverImage && index.h("div", { class: "color-cover" })), this.renderContentDiv()));
+      ], !this.hasCoverImage && index.h("div", { class: "color-cover" })), this.renderContent()));
     }
     return index.h(index.Host, null, this.renderColorCoverCard());
   }