npm - @zanichelli/albe-web-components - Versions diffs - 19.6.0 → 20.0.0-RC1 - Mend

@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (903) hide show

package/dist/cjs/z-aria-alert.cjs.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZAriaAlert = class {
         this.mode = index$1.ZAriaAlertMode.POLITE;
     }
     render() {
-        return (index.h(index.Host, { key: '14114aba44f89912d75d4dbc41a92e2401528579', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", { key: '1246d14d076ae5642666e7edb8416125bbe97eb4' })));
+        return (index.h(index.Host, { key: '55fc317227e17c4c018d382367f0e243a769df3b', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", { key: '749d024688dc33287157e9405cbac013fc59a197' })));
     }
 };

package/dist/cjs/z-avatar.cjs.entry.js CHANGED Viewed

@@ -31,10 +31,10 @@ const ZAvatar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4416af5640de2f1c6dbcdf5b5370ef35359ff25c', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (index.h(index.Host, { key: '3420b1414f9869a0715dd0510dacdf7f5189d60a', 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", { key: 'ee5a7db56e171e0ba4b9f124d4a3794628b7eff9' }, this.text.substring(0, 2)), this.image && (index.h("img", { key: '899ef0de0537c7bd4d68f5656114ba0fd2cf9881', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && index.h("span", { key: '0af7952baeb4cce47b083d508ab0ca0cb961e724' }, this.text.substring(0, 2)), this.image && (index.h("img", { key: 'd74633bfd9fa75ee84cc2070ee6a549e755821d2', src: this.image, onError: () => (this.image = "") }))));
     }
 };
 ZAvatar.style = stylesCss();

package/dist/cjs/z-book-card.cjs.entry.js CHANGED Viewed

@@ -76,7 +76,7 @@ const ZBookCard = class {
         return (index.h("div", { class: "isbn ellipsis body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.isbnLabel ? index.h("span", { class: "body-4" }, this.isbnLabel) : null));
     }
     renderEbook() {
-        return (index.h("div", { class: "ebook" }, index.h("div", { class: "app-name" }, index.h("img", { class: "ebook-logo", "aria-hidden": "true" }), index.h("div", { class: "body-4-sb" }, "laZ Ebook")), index.h("z-button", { size: index$1.ControlSize.X_SMALL, href: this.ebookUrl, target: this.linkTarget, onClick: () => this.emitEbookClick(), htmlrole: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook")));
+        return (index.h("div", { class: "ebook" }, index.h("div", { class: "app-name" }, index.h("img", { class: "ebook-logo", "aria-hidden": "true" }), index.h("div", { class: "body-4-sb" }, "laZ Ebook")), index.h("z-button", { size: index$1.ControlSize.X_SMALL, href: this.ebookUrl, target: this.linkTarget, onClick: () => this.emitEbookClick(), htmlRole: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook")));
     }
     renderCtaSlot() {
         return index.h("slot", { name: "cta" });

package/dist/cjs/z-book-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-book-card.cjs.entry.js","mappings":"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","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-book-card-portrait-cover-height: Set custom cover height for portrait variant - Default: `378px`\n * @prop --z-book-card-title-lines: Set title avilable lines - Default: `2`\n * @prop --z-book-card-title-word-break: Set title word-break rule - Default: `initial`\n * @prop --z-book-card-subtitle-lines: Set subtitle available lines - Default: `1`\n * @prop --z-book-card-subtitle-word-break: Set subtitle word-break rule - Default: `break-all`\n * @prop --z-book-card-authors-lines: Set authors available lines - Default: `1`\n * @prop --z-book-card-authors-word-break: Set authors word-break rule - Default: `break-all`\n /\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n justify-content: center;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n.main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family /\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n / font-weight /\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n / font-size type scale /\n --font-size-1: 0.75rem; / 12px /\n --font-size-2: 0.875rem; / 14px /\n --font-size-3: 1rem; / assuming 16px /\n --font-size-4: 1.125rem; / 18px /\n --font-size-5: 1.25rem; / 20px /\n --font-size-6: 1.5rem; / 24px /\n --font-size-7: 1.75rem; / 28px /\n --font-size-8: 2rem; / 32px /\n --font-size-9: 2.25rem; / 36px /\n --font-size-10: 2.625rem; / 42px /\n --font-size-11: 3rem; / 48px /\n --font-size-12: 3.375rem; / 54px /\n --font-size-13: 3.75rem; / 60px /\n --font-size-14: 4.25rem; / 68px /\n --font-size-15: 4.75rem; / 76px /\n --font-size-16: 5.25rem; / 84px /\n --font-size-17: 5.75rem; / 92px /\n\n / cssprops to use with `font` shorthand property /\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/ Typography classes /\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/ section title /\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/ heading-1/2 for desktop and wide viewports /\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/ viewport classes /\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/ font-weight variants /\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n shadow: true,\n})\nexport class ZBookCard implements ComponentInterface {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop({reflect: true})\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* Opera title (card title) /\n @Prop()\n operaTitle: string;\n\n /* [optional] Volume title (card subvolume) /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] year /\n @Prop()\n year?: string;\n\n /* [optional] Link to the ebook resource. Creates a link also around the cover and title. /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. /\n @Prop()\n linkTarget = \"_blank\";\n\n /* [optional] Fallback cover URL. /\n @Prop()\n fallbackCover?: string;\n\n /* Whether to show a stack of covers to represent multiple books (only for `portrait` variant). /\n @Prop()\n hasMultipleCovers = false;\n\n /* [optional] Set a specific heading level as html tag for the title. /\n @Prop()\n titleHtmlTag?: string;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on cover link /\n @Event()\n coverClick: EventEmitter;\n\n /* click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null \| HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlrole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-book-card.cjs.entry.js","mappings":"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","names":["stylesCss","BookCardVariant","h","ControlSize","Host"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-book-card-portrait-cover-height: Set custom cover height for portrait variant - Default: `378px`\n * @prop --z-book-card-title-lines: Set title avilable lines - Default: `2`\n * @prop --z-book-card-title-word-break: Set title word-break rule - Default: `initial`\n * @prop --z-book-card-subtitle-lines: Set subtitle available lines - Default: `1`\n * @prop --z-book-card-subtitle-word-break: Set subtitle word-break rule - Default: `break-all`\n * @prop --z-book-card-authors-lines: Set authors available lines - Default: `1`\n * @prop --z-book-card-authors-word-break: Set authors word-break rule - Default: `break-all`\n /\n --z-book-card-portrait-cover-height: 378px;\n --z-book-card-title-lines: 2;\n --z-book-card-title-word-break: initial;\n --z-book-card-subtitle-lines: 1;\n --z-book-card-subtitle-word-break: break-all;\n --z-book-card-authors-lines: 1;\n --z-book-card-authors-word-break: break-all;\n\n display: flex;\n width: 304px;\n box-sizing: border-box;\n flex-direction: column;\n border: solid var(--border-size-medium) var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.main-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n padding: var(--space-unit);\n gap: var(--space-unit);\n}\n\n.main-content .cover {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: flex-end;\n justify-content: center;\n border-radius: var(--border-radius);\n}\n\n.main-content .cover z-book-cover {\n --z-book-cover-height: var(--z-book-card-portrait-cover-height);\n}\n\n.main-content a.cover:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.main-content .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top {\n display: flex;\n flex-direction: column;\n gap: calc(var(--space-unit) * 2);\n}\n\n.main-content .card-info .top ::slotted([slot=\"tags\"]) {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-unit);\n}\n\n.main-content .card-info .top ::slotted([slot=\"data\"]) {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .top .ellipsis {\n display: -webkit-box;\n overflow: hidden;\n height: 1.4rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n line-height: 1.4rem;\n text-overflow: ellipsis;\n word-break: break-all;\n}\n\n.main-content .card-info .top .ellipsis.opera-title {\n height: auto;\n max-height: calc(1.5rem * var(--z-book-card-title-lines));\n -webkit-line-clamp: var(--z-book-card-title-lines);\n line-clamp: var(--z-book-card-title-lines);\n line-height: 1.5rem;\n word-break: var(--z-book-card-title-word-break);\n}\n\n.main-content .card-info .top .ellipsis.volume-title {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));\n -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n line-clamp: var(--z-book-card-subtitle-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-subtitle-word-break);\n}\n\n.main-content .card-info .top .ellipsis.authors {\n height: auto;\n max-height: calc(1.4rem * var(--z-book-card-authors-lines));\n -webkit-line-clamp: var(--z-book-card-authors-lines);\n line-clamp: var(--z-book-card-authors-lines);\n line-height: 1.4rem;\n word-break: var(--z-book-card-authors-word-break);\n}\n\n.main-content .card-info .top .opera-title * {\n all: unset;\n}\n\n.main-content .cta-wrapper {\n display: flex;\n justify-content: space-between;\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .top .link-chip-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.main-content .card-info .bottom .ebook {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n}\n\n.main-content .card-info .bottom .ebook .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n}\n\n.main-content .card-info .bottom .ebook .app-name .ebook-logo {\n width: 1.5rem;\n height: 1.5rem;\n content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n width: 635px;\n min-height: max(332px, 20.75rem);\n padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n min-height: max(332px, 20.75rem);\n flex-direction: row;\n padding: calc(var(--space-unit) * 2);\n gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover z-book-cover {\n --z-book-cover-height: 300px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info,\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n :host([variant=\"portrait\"]) {\n width: 100%;\n max-width: 400px;\n }\n}\n",":root {\n /* font-family /\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n / font-weight /\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n / font-size type scale /\n --font-size-1: 0.75rem; / 12px /\n --font-size-2: 0.875rem; / 14px /\n --font-size-3: 1rem; / assuming 16px /\n --font-size-4: 1.125rem; / 18px /\n --font-size-5: 1.25rem; / 20px /\n --font-size-6: 1.5rem; / 24px /\n --font-size-7: 1.75rem; / 28px /\n --font-size-8: 2rem; / 32px /\n --font-size-9: 2.25rem; / 36px /\n --font-size-10: 2.625rem; / 42px /\n --font-size-11: 3rem; / 48px /\n --font-size-12: 3.375rem; / 54px /\n --font-size-13: 3.75rem; / 60px /\n --font-size-14: 4.25rem; / 68px /\n --font-size-15: 4.75rem; / 76px /\n --font-size-16: 5.25rem; / 84px /\n --font-size-17: 5.75rem; / 92px /\n\n / cssprops to use with `font` shorthand property /\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/ Typography classes /\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/ section title /\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/ heading-1/2 for desktop and wide viewports /\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/ viewport classes /\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/ font-weight variants /\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n cursor: pointer;\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n color: var(--color-text-link-default);\n fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n color: var(--color-text-link-blue);\n fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n color: var(--color-text-link-red);\n fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n color: var(--color-text-link-blue-hover);\n fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n color: var(--color-text-link-red-hover);\n fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n color: var(--color-text-link-blue-active);\n fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n color: var(--color-text-link-red-active);\n fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n color: var(--color-text-link-blue-visited);\n fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n color: var(--color-text-link-red-visited);\n fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-text-link-inverse);\n fill: var(--color-text-link-inverse);\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - Top right cta (e.g. bookmark icon)\n * @slot ebook - As default, it shows laZ ebook link\n * @slot tags - Tags section, default empty\n * @slot data - External link and pill, default empty\n * @slot apps - List of card-related apps, default empty\n * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n shadow: true,\n})\nexport class ZBookCard implements ComponentInterface {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop({reflect: true})\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* Opera title (card title) /\n @Prop()\n operaTitle: string;\n\n /* [optional] Volume title (card subvolume) /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] year /\n @Prop()\n year?: string;\n\n /* [optional] Link to the ebook resource. Creates a link also around the cover and title. /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Value for the `target` attribute of the links created by `ebookUrl` prop. /\n @Prop()\n linkTarget = \"_blank\";\n\n /* [optional] Fallback cover URL. /\n @Prop()\n fallbackCover?: string;\n\n /* Whether to show a stack of covers to represent multiple books (only for `portrait` variant). /\n @Prop()\n hasMultipleCovers = false;\n\n /* [optional] Set a specific heading level as html tag for the title. /\n @Prop()\n titleHtmlTag?: string;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on cover link /\n @Event()\n coverClick: EventEmitter;\n\n /* click on title link */\n @Event()\n titleClick: EventEmitter;\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitCoverClick(): void {\n this.coverClick.emit();\n }\n\n private emitTitleClick(): void {\n this.titleClick.emit();\n }\n\n private renderCover(): HTMLDivElement {\n const CoverTag = this.ebookUrl ? \"a\" : \"div\";\n const coverAttrs = this.ebookUrl\n ? {\n href: this.ebookUrl,\n onClick: () => this.emitCoverClick(),\n target: this.linkTarget,\n }\n : {};\n\n return (\n <CoverTag\n class=\"cover\"\n {...coverAttrs}\n >\n <z-book-cover\n cover={this.cover}\n fallbackCover={this.fallbackCover}\n multiple={this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT}\n >\n <slot\n name=\"coverOverlay\"\n slot=\"coverOverlay\"\n ></slot>\n </z-book-cover>\n </CoverTag>\n );\n }\n\n private renderYear(): null \| HTMLDivElement {\n if (!this.year) {\n return null;\n }\n\n return (\n <div\n class=\"year ellipsis body-4\"\n aria-description=\"anno\"\n >\n {this.year}\n </div>\n );\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n if (!this.authors) {\n return null;\n }\n\n return (\n <div class=\"cta-wrapper\">\n <div\n class=\"authors ellipsis body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.titleHtmlTag\n ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n : this.operaTitle;\n\n const operaTitle = (\n <div\n class=\"opera-title ellipsis body-2-sb\"\n innerHTML={title}\n />\n );\n\n return (\n <div class=\"cta-wrapper\">\n {this.ebookUrl ? (\n <a\n class=\"z-link\"\n href={this.ebookUrl}\n onClick={() => this.emitTitleClick()}\n target={this.linkTarget}\n >\n {operaTitle}\n </a>\n ) : (\n operaTitle\n )}\n {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n </div>\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n if (!this.volumeTitle) {\n return null;\n }\n\n return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n if (!this.isbn) {\n return null;\n }\n\n return (\n <div\n class=\"isbn ellipsis body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n </div>\n );\n }\n\n private renderEbook(): HTMLDivElement {\n return (\n <div class=\"ebook\">\n <div class=\"app-name\">\n <img\n class=\"ebook-logo\"\n aria-hidden=\"true\"\n />\n <div class=\"body-4-sb\">laZ Ebook</div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n target={this.linkTarget}\n onClick={() => this.emitEbookClick()}\n htmlRole=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n );\n }\n\n private renderCtaSlot(): HTMLSlotElement {\n return <slot name=\"cta\"></slot>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <Host>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"top\">\n <div>\n {this.renderYear()}\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <slot name=\"tags\"></slot>\n <slot name=\"data\"></slot>\n </div>\n <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-book-cover.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZBookCover = class {
     render() {
         var _a;
         const hasAlt = !!this.coverAlt;
-        return (index.h(index.Host, { key: '4959777b26c741f28dda69863f49c0397caff9fb' }, this.multiple && (index.h(index.Fragment, { key: '8c233e819266fb48ace0ea12609edc99aaa1ae09' }, index.h("div", { key: '1bdffd9c1c61c2622bc805a2dafa0889c9363cea', class: "shifted-stack-cover stack-cover-2" }), index.h("div", { key: '4f5deda96190fd73cb0682bc696c9248bbe80642', class: "shifted-stack-cover stack-cover-1" }))), index.h("div", { key: 'ee5aefb424d44af9bb74a02325c19e337a144d29', class: "cover-container" }, index.h("img", { key: 'c5e44fb85106ba31f0b00ce4a878c36c19da37a3', src: (_a = this.cover) !== null && _a !== void 0 ? _a : img, "aria-hidden": hasAlt ? undefined : "true", alt: hasAlt ? this.coverAlt : "", onError: () => (this.cover = this.fallbackCover || img) }), index.h("slot", { key: '9db828601df2de1c0dec697d5796bfb47abdf2f6', name: "coverOverlay" }))));
+        return (index.h(index.Host, { key: '5f1cf73c34673b19270dfbefa968ce8cfc887782' }, this.multiple && (index.h(index.Fragment, { key: '02eea3c4d3769a36aaf2eb250ef1220bf23cc69d' }, index.h("div", { key: 'f3de7ab44c13bb5c276b88e254a7ebb0b1a20ba1', class: "shifted-stack-cover stack-cover-2" }), index.h("div", { key: 'ce383b583c9004171014cdf59dd49e61930308ba', class: "shifted-stack-cover stack-cover-1" }))), index.h("div", { key: '4bfc40b8be81356755cfed89ed13a4f84ba9228b', class: "cover-container" }, index.h("img", { key: '036d55f6f830685a33f12f125d317b935da28454', src: (_a = this.cover) !== null && _a !== void 0 ? _a : img, "aria-hidden": hasAlt ? undefined : "true", alt: hasAlt ? this.coverAlt : "", onError: () => (this.cover = this.fallbackCover || img) }), index.h("slot", { key: 'f7c0eb82d8d230bf53d0e4e5d89ab35623c5bca1', name: "coverOverlay" }))));
     }
 };
 ZBookCover.style = stylesCss();

package/dist/cjs/z-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-CZz7uP-M.js');
 var index$1 = require('./index-DppFfqsn.js');
-var utils = require('./utils-C0QY75C2.js');
+var utils = require('./utils-BnCPu0Si.js');
 require('./breakpoints-B7vFm-3T.js');
 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-text-link-blue);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);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-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);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-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.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);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;
@@ -213,10 +213,10 @@ const ZBreadcrumb = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'ea18e6bec466825e194807d80ecf0c132915b8a4', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, index.h("nav", { key: '080ce8ea0bc8dd13d94e1ded21878f61a8e1f09e', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (index.h(index.Host, { key: 'bb7e05dd63d6f37cb7f4016c2ba10dbed4473e5e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, index.h("nav", { key: 'f877a18b593ce5e14a0f70fa9ed39ae64652eba5', 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: 'ebced04e4063e2db12f1ab2a5fa39fdb447973fa' }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, index.h("ol", { key: 'b6cc66aafa4a823e7d315c31a00d9c28005e4c60' }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-button-sort.cjs.entry.js CHANGED Viewed

@@ -43,7 +43,7 @@ const ZButtonSort = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (index.h("button", { key: '269e2d1a959dde597965561177dde2374d92a27b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, index.h("span", { key: 'e33cb753f6c120cdd12f5ea4251ca626cfc28711', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { key: 'c852c01e557ca5245352ddcc7e35a9fe2d9710fb', class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { key: 'abc484df3ccc4a976831c3664e1e451620741419', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { key: 'f6325a573dd1f8f2208fb3edd70d176a2b7ad141', name: "caret-up-down", width: 16, height: 16 })));
+        return (index.h("button", { key: '9f6cc523db408ecd628ebeca367fcd5238b53242', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, index.h("span", { key: '15464a3717dc9c43f7355afc6c937c705ad76bc0', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), index.h("span", { key: '6b16b77136dc5792df55388293496c27c8421c3c', class: "counter" }, this.counter && ` (${this.counter})`), index.h("span", { key: 'f5b3555d64385543220424bc0e5e65b3d9208cb4', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), index.h("z-icon", { key: 'b58a48b94aad9b5867ccc71c885e2f2d48da56d5', name: "caret-up-down", width: 16, height: 16 })));
     }
 };
 ZButtonSort.style = stylesCss();

package/dist/cjs/z-chip.cjs.entry.js CHANGED Viewed

@@ -15,16 +15,14 @@ const ZChip = class {
         this.variant = index$1.ZChipVariant.OUTLINE;
         /** set z-chip as disabled */
         this.disabled = false;
-        /** z-chip aria-label string */
-        this.ariaLabel = "";
     }
     render() {
-        return (index.h("div", { key: '9a098f7915cfbb84e2290a853fe59b7e30c6f555', class: {
+        return (index.h("div", { key: '1d7f780bb25a957983564f132f34014c443db4fb', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
                 [this.variant]: true,
-            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && index.h("z-icon", { key: 'e563c31c093f46beeda6e658c5c05e7c16a56204', name: this.icon }), index.h("slot", { key: '9b186a85b090df0ab12c030ee3a517ef253e62d6' }), this.interactiveIcon && (index.h("button", { key: '4a5dd47a8ec40062d0b564f165adb81b11a3b4a5', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, index.h("z-icon", { key: '092864aef71920ba68f9d778797489e476c51971', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && index.h("z-icon", { key: '713b643f92f56eb2ba3860620af7d825e4670aa7', name: this.icon }), index.h("slot", { key: 'f1b591dea14c29a3e5357a5fd063de560bae1497' }), this.interactiveIcon && (index.h("button", { key: '3ba72530a98214d2c82b8cd98ea44d91cb4a849d', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.htmlAriaLabel || undefined, disabled: this.disabled }, index.h("z-icon", { key: 'e2c247e4b372b800facc047fd20d13331b72c7d9', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/z-chip.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-chip.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,szHAAszH,CAAC;;MCSn0H,KAAK,GAAA,MAAA;AANlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAeE,QAAA,IAAA,CAAA,IAAI,GAAeA,iBAAS,CAAC,OAAO;;AAIpC,QAAA,IAAA,CAAA,OAAO,GAAkBC,oBAAY,CAAC,OAAO;;AAQ7C,QAAA,IAAA,CAAA,QAAQ,GAAa,KAAK~~;;AAI1B,QAAA,IAAA,CAAA,SAAS,GAAG,EAAE~~;~~AAmCf~~;IA7BC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;AAC5C,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,gBAAA,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;aACrB,EAAA,eAAA,EACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAEhD,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,eAAe,KACnBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAAA,YAAA,EACnC,IAAI,CAAC,SAAS,~~EAC1B~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAA,CAC1B,CACK,CACV,CACG;;;;;;;;","names":["ZChipType","ZChipVariant","h"],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host,\n:host * {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host > .z-chip-container {\n display: inline-flex;\n min-height: 28px;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: 14px;\n color: var(--color-primary01);\n fill: var(--color-default-icon);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n gap: var(--space-unit);\n line-height: 1;\n}\n\n:host > .z-chip-container > button {\n position: relative;\n display: flex;\n width: 28px;\n height: 28px;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background-color: transparent;\n border-radius: 50%;\n cursor: pointer;\n}\n\n:host > .z-chip-container .interactive-icon {\n fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) button:hover .interactive-icon {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\n/* Variants /\n:host > .z-chip-container.filled {\n border-color: transparent;\n background-color: var(--color-primary01);\n color: var(--color-text-inverse);\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled .interactive-icon {\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--color-inverse-icon);\n border-radius: 50%;\n content: \"\";\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover::before {\n opacity: 0.16;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover .interactive-icon {\n color: var(--color-inverse-icon);\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.soft {\n border-color: transparent;\n background-color: var(--color-primary02);\n color: var(--color-default-text);\n}\n\n:host > .z-chip-container.soft .interactive-icon {\n fill: var(--color-primary01);\n}\n\n/ Disabled state /\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] .interactive-icon {\n color: var(--color-disabled03);\n cursor: auto;\n fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n border: var(--border-size-small) solid var(--color-disabled01);\n background-color: transparent;\n}\n\n:host > .z-chip-container.filled[aria-disabled],\n:host > .z-chip-container.soft[aria-disabled] {\n border-color: transparent;\n background-color: var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n border-radius: 100%;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n --z-icon-width: 22px;\n --z-icon-height: 22px;\n}\n\n/ :host type /\n:host > .z-chip-container.default {\n min-height: 44px;\n border-radius: 22px;\n}\n\n:host > .z-chip-container.medium {\n min-height: 40px;\n border-radius: 22px;\n}\n\n:host > .z-chip-container.small {\n min-height: 36px;\n border-radius: 22px;\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .z-chip-container {\n padding: 0 calc(var(--space-unit) 1.5);\n font-size: 12px;\n gap: calc(var(--space-unit) / 2);\n }\n\n /* :host type /\n :host > .z-chip-container.default {\n min-height: 32px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container.medium {\n min-height: 28px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container.small {\n min-height: 24px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container > z-icon,\n :host > .z-chip-container .interactive-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n }\n\n :host > .z-chip-container > button {\n width: 20px;\n height: 20px;\n }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n @Element() el: HTMLZChipElement;\n\n /* Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip variant type, can be outline, filled or soft /\n @Prop({reflect: true})\n variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* ~~z-chip~~ aria-label ~~string~~ /\n @Prop()\n ~~ariaLabel~~ ~~= \"\"~~;\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n [this.variant]: true,\n }}\n aria-disabled={this.disabled ? \"true\" : undefined}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.~~ariaLabel~~}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-chip.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,szHAAszH,CAAC;;MCSn0H,KAAK,GAAA,MAAA;AANlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAeE,QAAA,IAAA,CAAA,IAAI,GAAeA,iBAAS,CAAC,OAAO;;AAIpC,QAAA,IAAA,CAAA,OAAO,GAAkBC,oBAAY,CAAC,OAAO;;AAQ7C,QAAA,IAAA,CAAA,QAAQ,GAAa,KAAK;AAuC3B;IA7BC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;AAC5C,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,gBAAA,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;aACrB,EAAA,eAAA,EACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAEhD,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,eAAe,KACnBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAAA,YAAA,EACnC,IAAI,CAAC,aAAa,IAAI,SAAS,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAA,CAC1B,CACK,CACV,CACG;;;;;;;;","names":["ZChipType","ZChipVariant","h"],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host,\n:host * {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host > .z-chip-container {\n display: inline-flex;\n min-height: 28px;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: 14px;\n color: var(--color-primary01);\n fill: var(--color-default-icon);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n gap: var(--space-unit);\n line-height: 1;\n}\n\n:host > .z-chip-container > button {\n position: relative;\n display: flex;\n width: 28px;\n height: 28px;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background-color: transparent;\n border-radius: 50%;\n cursor: pointer;\n}\n\n:host > .z-chip-container .interactive-icon {\n fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) button:hover .interactive-icon {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\n/* Variants /\n:host > .z-chip-container.filled {\n border-color: transparent;\n background-color: var(--color-primary01);\n color: var(--color-text-inverse);\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled .interactive-icon {\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--color-inverse-icon);\n border-radius: 50%;\n content: \"\";\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover::before {\n opacity: 0.16;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover .interactive-icon {\n color: var(--color-inverse-icon);\n fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.soft {\n border-color: transparent;\n background-color: var(--color-primary02);\n color: var(--color-default-text);\n}\n\n:host > .z-chip-container.soft .interactive-icon {\n fill: var(--color-primary01);\n}\n\n/ Disabled state /\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] .interactive-icon {\n color: var(--color-disabled03);\n cursor: auto;\n fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n border: var(--border-size-small) solid var(--color-disabled01);\n background-color: transparent;\n}\n\n:host > .z-chip-container.filled[aria-disabled],\n:host > .z-chip-container.soft[aria-disabled] {\n border-color: transparent;\n background-color: var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n border-radius: 100%;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n --z-icon-width: 22px;\n --z-icon-height: 22px;\n}\n\n/ :host type /\n:host > .z-chip-container.default {\n min-height: 44px;\n border-radius: 22px;\n}\n\n:host > .z-chip-container.medium {\n min-height: 40px;\n border-radius: 22px;\n}\n\n:host > .z-chip-container.small {\n min-height: 36px;\n border-radius: 22px;\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .z-chip-container {\n padding: 0 calc(var(--space-unit) 1.5);\n font-size: 12px;\n gap: calc(var(--space-unit) / 2);\n }\n\n /* :host type /\n :host > .z-chip-container.default {\n min-height: 32px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container.medium {\n min-height: 28px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container.small {\n min-height: 24px;\n border-radius: 16px;\n }\n\n :host > .z-chip-container > z-icon,\n :host > .z-chip-container .interactive-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n }\n\n :host > .z-chip-container > button {\n width: 20px;\n height: 20px;\n }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n @Element() el: HTMLZChipElement;\n\n /* Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip variant type, can be outline, filled or soft /\n @Prop({reflect: true})\n variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* `aria-label` for the icon button /\n @Prop()\n htmlAriaLabel?: string;\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n [this.variant]: true,\n }}\n aria-disabled={this.disabled ? \"true\" : undefined}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.htmlAriaLabel \|\| undefined}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-color-picker.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-CZz7uP-M.js');
 var index$1 = require('./index-DppFfqsn.js');
-var utils = require('./utils-C0QY75C2.js');
+var utils = require('./utils-BnCPu0Si.js');
 require('./breakpoints-B7vFm-3T.js');
 const stylesCss = () => `:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;
@@ -196,7 +196,7 @@ const ZColorPicker = class {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (index.h(index.Host, { key: 'ea14b99e379cb85851c041edc4c4136afd693ba1', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (index.h(index.Host, { key: 'a20a725ec68d917c9611ee844e33014a63baca19', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (index.h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, index.h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": index$1.ColorPickerPalette[colorKey][this.lng], title: index$1.ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));

package/dist/cjs/z-combobox.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-CZz7uP-M.js');
 var index$1 = require('./index-DppFfqsn.js');
-var utils = require('./utils-C0QY75C2.js');
+var utils = require('./utils-BnCPu0Si.js');
 require('./breakpoints-B7vFm-3T.js');
 const stylesCss$1 = () => `.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;
@@ -307,7 +307,7 @@ const ZCombobox = class {
         return (index.h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: index$1.ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, index.h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (index.h("div", { key: 'a2df3543d11b1e568d1aa397a0cc4acd78496a1b', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (index.h("div", { key: 'd8c312f0c68c902a7c063f5ef8bfc1429e9c0183', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-cover-hero.cjs.entry.js CHANGED Viewed

@@ -42,9 +42,9 @@ const ZCoverHero = class {
         return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
     }
     render() {
-        return (index.h(index.Host, { key: '94a8612be36a5b2b14c93e68b8b6ecbf2cfb47c9' }, this.variant === index$1.CoverHeroVariant.STACKED &&
+        return (index.h(index.Host, { key: 'd4ce22a56ef897f184ae2e36d4ebc1c0735cf91b' }, this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
-            this.renderContent(), index.h("div", { key: '7b57691247bc581f9c43f36c475892cf7927abbf', class: "main-container" }, index.h("div", { key: '46ff0b8886b5450e2a2d3a5df5cc4fd3adf5962b', class: "cover-container" }, index.h("slot", { key: 'c84a53350c2077d1201cd938745cb2e5c797b76b', name: "cover" })), index.h("slot", { key: '6debb9704761c43ed9c485b66e1e97e41f7780da', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
+            this.renderContent(), index.h("div", { key: '2d790a351a963c4ba71af3a6542f2b942ff27d4d', class: "main-container" }, index.h("div", { key: '4b2e472817f19b8180c661030932e5371937a4ed', class: "cover-container" }, index.h("slot", { key: '6a4224585e584d2f04a4e722e64c65a6e02857fa', name: "cover" })), index.h("slot", { key: '03ca9f7b7add04644db979a62ed328bf0d866338', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/cjs/z-date-picker.cjs.entry.js CHANGED Viewed

@@ -326,8 +326,6 @@ const ZDatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dateSelect = index.createEvent(this, "dateSelect", 7);
-        /** z-input aria label */
-        this.ariaLabel = "";
         /** [Optional] datepicker mode: date, datetime, only months */
         this.mode = index$1.ZDatePickerMode.DATE;
         /** [Optional] the datepicker input name */
@@ -482,14 +480,14 @@ const ZDatePicker = class {
         return (index.h("div", { class: `${this.datePickerId}-hidden` }, index.h("input", { class: "hidden-input", "data-input": true, name: this.name, value: this.value }), index.h("slot", { name: "toggle" })));
     }
     renderZInput() {
-        return (index.h("div", { class: `${this.datePickerId}-container` }, index.h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: index$1.InputType.TEXT, icon: "event", message: false, name: this.name, tabindex: "0", value: this.value, onStopTyping: (value) => {
+        return (index.h("div", { class: `${this.datePickerId}-container` }, index.h("z-input", { "data-input": "data-input", htmlAriaLabel: this.htmlAriaLabel, label: this.label, class: this.datePickerId, type: index$1.InputType.TEXT, icon: "event", message: false, name: this.name, tabindex: "0", value: this.value, onStopTyping: (value) => {
                 this.onStopTyping(value);
             }, onStartTyping: () => {
                 this.inputError = false;
             } })));
     }
     render() {
-        return (index.h("div", { key: '93fda1008d65ebd8a0c09639fe1dbdde501f8d32', class: {
+        return (index.h("div", { key: '278c660a423c35c76dbc8144ccf20a724fde93b2', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,