@zanichelli/albe-web-components 18.7.7-RC1 → 18.8.0

package/dist/collection/components/book-card/z-book-card/index.js

@@ -1,20 +1,19 @@
 import { Host, h } from "@stencil/core";
-import defaultFallbackCover from "../../../assets/images/png/placeholder-cover.png";
 import { BookCardVariant, ControlSize } from "../../../beans";
 /**
- * @slot cta - top right cta (e.g. bookmark icon)
- * @slot ebook - as default, it shows laZ ebook link
- * @slot tags - tags section, default empty
- * @slot data - external link and pill, default empty
- * @slot apps - list of card-related apps, default empty
- * @slot coverOverlay - purple layer on top of book cover
- * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px
- * @cssprop --z-book-card-title-lines - set title avilable lines - default 2
- * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial
- * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1
- * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all
- * @cssprop --z-book-card-authors-lines - set authors available lines - default 1
- * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all
+ * @slot cta - Top right cta (e.g. bookmark icon)
+ * @slot ebook - As default, it shows laZ ebook link
+ * @slot tags - Tags section, default empty
+ * @slot data - External link and pill, default empty
+ * @slot apps - List of card-related apps, default empty
+ * @slot coverOverlay - Content to be displayed in the `z-book-cover` component slot
+ * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
+ * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
+ * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
+ * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
+ * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
+ * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
+ * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
  */
 export class ZBookCard {
     constructor() {
@@ -27,7 +26,9 @@ export class ZBookCard {
         this.isbnLabel = "";
         this.year = undefined;
         this.ebookUrl = undefined;
+        this.linkTarget = "_blank";
         this.fallbackCover = undefined;
+        this.hasMultipleCovers = false;
         this.titleHtmlTag = undefined;
     }
     emitEbookClick() {
@@ -40,15 +41,15 @@ export class ZBookCard {
         this.titleClick.emit();
     }
     renderCover() {
-        const coverImg = (h("img", { src: this.cover, onError: () => {
-                if (this.fallbackCover) {
-                    this.cover = this.fallbackCover;
-                }
-                else {
-                    this.cover = defaultFallbackCover;
-                }
-            }, "aria-hidden": "true" }));
-        return (h("div", { class: "cover" }, this.ebookUrl ? (h("a", { tabIndex: 0, class: "cover-link", href: this.ebookUrl, onClick: () => this.emitCoverClick(), target: "_blank" }, coverImg)) : (coverImg), h("slot", { name: "coverOverlay" })));
+        const CoverTag = this.ebookUrl ? "a" : "div";
+        const coverAttrs = this.ebookUrl
+            ? {
+                href: this.ebookUrl,
+                onClick: () => this.emitCoverClick(),
+                target: this.linkTarget,
+            }
+            : {};
+        return (h(CoverTag, Object.assign({ class: "cover" }, coverAttrs), h("z-book-cover", { cover: this.cover, fallbackCover: this.fallbackCover, multiple: this.hasMultipleCovers && this.variant === BookCardVariant.PORTRAIT }, h("slot", { name: "coverOverlay", slot: "coverOverlay" }))));
     }
     renderYear() {
         if (!this.year) {
@@ -67,7 +68,7 @@ export class ZBookCard {
             ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`
             : this.operaTitle;
         const operaTitle = (h("div", { class: "opera-title ellipsis body-2-sb", innerHTML: title }));
-        return (h("div", { class: "cta-wrapper" }, this.ebookUrl ? (h("a", { class: "z-link", href: this.ebookUrl, onClick: () => this.emitTitleClick(), target: "_blank" }, operaTitle)) : (operaTitle), this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
+        return (h("div", { class: "cta-wrapper" }, this.ebookUrl ? (h("a", { class: "z-link", href: this.ebookUrl, onClick: () => this.emitTitleClick(), target: this.linkTarget }, operaTitle)) : (operaTitle), this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
     }
     renderVolumeTitle() {
         if (!this.volumeTitle) {
@@ -82,13 +83,13 @@ export class ZBookCard {
         return (h("div", { class: "isbn ellipsis body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.isbnLabel ? h("span", { class: "body-4" }, this.isbnLabel) : null));
     }
     renderEbook() {
-        return (h("div", { class: "ebook" }, h("div", null, h("div", { class: "app-name" }, h("img", { class: "ebook-logo", "aria-hidden": "true" }), h("div", { class: "body-4-sb" }, "laZ Ebook"))), h("z-button", { size: ControlSize.X_SMALL, href: this.ebookUrl, target: "_blank", onClick: () => this.emitEbookClick(), htmlrole: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook")));
+        return (h("div", { class: "ebook" }, h("div", { class: "app-name" }, h("img", { class: "ebook-logo", "aria-hidden": "true" }), h("div", { class: "body-4-sb" }, "laZ Ebook")), h("z-button", { size: 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 h("slot", { name: "cta" });
     }
     render() {
-        return (h(Host, { key: 'b8b37f10e4c09f1bd9314cf8fb1b8f752ae9c47e' }, h("div", { key: '70f04ae7125d557d2911a6ef4e44d1903128bde5', class: "main-content" }, this.renderCover(), h("div", { key: '96a357c922d91e09c31f0fdf4cd7283e8a1ed9a7', class: "card-info" }, h("div", { key: 'dd12a24cdc1fadaa877406b9662b91ba0de8aa27', class: "top" }, h("div", { key: '42a1245295cf5659f51b39516963e0104cba4cef' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'b69e77dc77c971019ecf3bb30d0bf211ccc794f9', name: "tags" }), h("slot", { key: '53202f9466707bdafcc6882c563978b339e61335', name: "data" })), h("slot", { key: '646df6b2a349a30c2ab9cf0a3c30919157cced93', name: "ebook" }, !!this.ebookUrl && h("div", { key: 'a3707624b5e428a472ff91a32e03bd72be7e3f57', class: "bottom" }, this.renderEbook())))), h("slot", { key: 'a5d2a636f6848f46e1f48117efbdce91673c532b', name: "apps" })));
+        return (h(Host, { key: '5fae727734d46a2bff95228aba24343fe8b44d71' }, h("div", { key: '68bae5839bfd59cfbf64c525085db9945fccfa22', class: "main-content" }, this.renderCover(), h("div", { key: '0f79c65a3b4778db175867ea3ef71a331c567dbf', class: "card-info" }, h("div", { key: '14f31c2adeb8ba009385cad9f3e5b91b1571402f', class: "top" }, h("div", { key: '6f53c622d7c46bc9c7086129d6e61efc3b8e87ac' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'e320abfb8ccb71748b7f786e44f8acb7579c9008', name: "tags" }), h("slot", { key: '718e46c2db387806e6835db0a1f14880e1990a5f', name: "data" })), h("slot", { key: '625086bafb8ebb76bb4d419bfaa1f0e6a6bda8c4', name: "ebook" }, !!this.ebookUrl && h("div", { key: '534cddf3d9e4b7b184eda121d74999645bc60b4f', class: "bottom" }, this.renderEbook())))), h("slot", { key: '64cf4f52982302d9aa44a0a0b63b5d54cac3c3dc', name: "apps" })));
     }
     static get is() { return "z-book-card"; }
     static get encapsulation() { return "shadow"; }
@@ -260,11 +261,29 @@ export class ZBookCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource"
+                    "text": "[optional] Link to the ebook resource. Creates a link also around the cover and title."
                 },
                 "attribute": "ebook-url",
                 "reflect": false
             },
+            "linkTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Value for the `target` attribute of the links created by `ebookUrl` prop."
+                },
+                "attribute": "link-target",
+                "reflect": false,
+                "defaultValue": "\"_blank\""
+            },
             "fallbackCover": {
                 "type": "string",
                 "mutable": false,
@@ -277,11 +296,29 @@ export class ZBookCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Fallback cover URL"
+                    "text": "[optional] Fallback cover URL."
                 },
                 "attribute": "fallback-cover",
                 "reflect": false
             },
+            "hasMultipleCovers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a stack of covers to represent multiple books (only for `portrait` variant)."
+                },
+                "attribute": "has-multiple-covers",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "titleHtmlTag": {
                 "type": "string",
                 "mutable": false,
@@ -294,7 +331,7 @@ export class ZBookCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Set a specific h level as html tag for opera title"
+                    "text": "[optional] Set a specific heading level as html tag for the title."
                 },
                 "attribute": "title-html-tag",
                 "reflect": false

package/dist/collection/components/book-card/z-book-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\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 - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\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 {\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] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource */\n  @Prop()\n  ebookUrl?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Set a specific h level as html tag for opera 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 coverImg: HTMLImageElement = (\n      <img\n        src={this.cover}\n        onError={() => {\n          if (this.fallbackCover) {\n            this.cover = this.fallbackCover;\n          } else {\n            this.cover = defaultFallbackCover;\n          }\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n\n    return (\n      <div class=\"cover\">\n        {this.ebookUrl ? (\n          <a\n            tabIndex={0}\n            class={\"cover-link\"}\n            href={this.ebookUrl}\n            onClick={() => this.emitCoverClick()}\n            target=\"_blank\"\n          >\n            {coverImg}\n          </a>\n        ) : (\n          coverImg\n        )}\n        <slot name=\"coverOverlay\"></slot>\n      </div>\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=\"_blank\"\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>\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        </div>\n        <z-button\n          size={ControlSize.X_SMALL}\n          href={this.ebookUrl}\n          target=\"_blank\"\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,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, 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 * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`\n * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`\n * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`\n * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`\n * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`\n * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`\n * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`\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 {\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"]}

package/dist/collection/components/book-card/z-book-card/index.stories.js

@@ -10,23 +10,16 @@ const StoryMeta = {
     title: "ZBookCard/ZBookCard",
     component: "z-book-card",
     argTypes: {
-        "variant": {
+        variant: {
             control: {
                 type: "inline-radio",
             },
             options: Object.values(BookCardVariant),
         },
-        "--z-book-card-portrait-cover-height": { control: { type: "text" } },
-        "--z-book-card-title-lines": { control: { type: "text" } },
-        "--z-book-card-title-word-break": { control: { type: "text" } },
-        "--z-book-card-subtitle-lines": { control: { type: "text" } },
-        "--z-book-card-subtitle-word-break": { control: { type: "text" } },
-        "--z-book-card-authors-lines": { control: { type: "text" } },
-        "--z-book-card-authors-word-break": { control: { type: "text" } },
     },
     args: {
         "variant": BookCardVariant.LANDSCAPE,
-        "cover": "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg",
+        "cover": "https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg",
         "operaTitle": "Matematica.azzurro",
         "volumeTitle": "Volume 3 con Tutor",
         "authors": "Massimo Bergamini, Anna Trifone, Graziella Barozzi",
@@ -35,7 +28,9 @@ const StoryMeta = {
         "year": "2025",
         "ebookUrl": "https://www.zanichelli.it/ricerca",
         "fallbackCover": "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-        "titleHtmlTag": null,
+        "titleHtmlTag": undefined,
+        "hasMultipleCovers": false,
+        "linkTarget": "_blank",
         "--z-book-card-portrait-cover-height": "378px",
         "--z-book-card-title-lines": "2",
         "--z-book-card-title-word-break": "initial",
@@ -48,7 +43,7 @@ const StoryMeta = {
 export default StoryMeta;
 export const Card = {
     render: (args) => html `<z-book-card
-      variant=${args.variant}
+      .variant=${args.variant}
       cover=${args.cover}
       authors=${args.authors}
       opera-title=${args.operaTitle}
@@ -59,6 +54,8 @@ export const Card = {
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
       title-html-tag=${args.titleHtmlTag}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      link-target=${args.linkTarget}
       style=${styleMap({
         "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
         "--z-book-card-title-lines": args["--z-book-card-title-lines"],
@@ -73,7 +70,7 @@ export const Card = {
 export const WithSlottedContent = {
     render: (args) => html `<z-book-card
       variant=${args.variant}
-      cover=${args.cover}
+      .cover=${args.cover}
       authors=${args.authors}
       opera-title=${args.operaTitle}
       volume-title=${args.volumeTitle}
@@ -83,6 +80,8 @@ export const WithSlottedContent = {
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
       title-html-tag=${args.titleHtmlTag}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      link-target=${args.linkTarget}
       style=${styleMap({
         "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
         "--z-book-card-title-lines": args["--z-book-card-title-lines"],
@@ -155,7 +154,6 @@ export const WithSlottedContent = {
       <div
         slot="coverOverlay"
         class="body-4-sb"
-        style="text-align: center; padding: 16px 0;"
       >
         ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI
       </div>

package/dist/collection/components/book-card/z-book-card/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard &\n  CSSVarsArguments<\n    | \"--z-book-card-portrait-cover-height\"\n    | \"--z-book-card-title-lines\"\n    | \"--z-book-card-title-word-break\"\n    | \"--z-book-card-subtitle-lines\"\n    | \"--z-book-card-subtitle-word-break\"\n    | \"--z-book-card-authors-lines\"\n    | \"--z-book-card-authors-word-break\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n    \"--z-book-card-portrait-cover-height\": {control: {type: \"text\"}},\n    \"--z-book-card-title-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-title-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-word-break\": {control: {type: \"text\"}},\n  },\n  args: {\n    \"variant\": BookCardVariant.LANDSCAPE,\n    \"cover\": \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n    \"operaTitle\": \"Matematica.azzurro\",\n    \"volumeTitle\": \"Volume 3 con Tutor\",\n    \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    \"isbn\": \"9788808930552\",\n    \"isbnLabel\": \"(ed. cartacea)\",\n    \"year\": \"2025\",\n    \"ebookUrl\": \"https://www.zanichelli.it/ricerca\",\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"titleHtmlTag\": null,\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} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"cursor: pointer; fill: var(--blue500);\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"primary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n\n      <div slot=\"tags\">\n        <z-tag style=\"--z-tag-bg: var(--gray500);\">EDIZIONE DIGITALE INSEGNANTE</z-tag>\n        <z-tag style=\"--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);\">BES</z-tag>\n      </div>\n\n      <div slot=\"data\">\n        <a\n          href=\"https://www.zanichelli.it\"\n          class=\"catalog-link z-link z-link-blue z-link-icon body-4-sb\"\n          >Scheda catalogo\n          <z-icon\n            name=\"arrow-quad-north-east\"\n            width=\"14\"\n            height=\"14\"\n          ></z-icon>\n        </a>\n        <div\n          class=\"body-5-sb\"\n          style=\"padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;\"\n        >\n          ADOTTATO\n        </div>\n      </div>\n\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n      </div>\n\n      <div\n        slot=\"coverOverlay\"\n        class=\"body-4-sb\"\n        style=\"text-align: center; padding: 16px 0;\"\n      >\n        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI\n      </div>\n\n      <style>\n        z-book-card-app {\n          --z-book-card-app-padding-x: 8px;\n          width: 100%;\n          max-width: 100%;\n          height: 47px;\n\n          @media (min-width: 768px) {\n            --z-book-card-app-padding-x: 16px;\n            width: 315px;\n          }\n        }\n      </style>\n    </z-book-card>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard &\n  CSSVarsArguments<\n    | \"--z-book-card-portrait-cover-height\"\n    | \"--z-book-card-title-lines\"\n    | \"--z-book-card-title-word-break\"\n    | \"--z-book-card-subtitle-lines\"\n    | \"--z-book-card-subtitle-word-break\"\n    | \"--z-book-card-authors-lines\"\n    | \"--z-book-card-authors-word-break\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n  },\n  args: {\n    \"variant\": BookCardVariant.LANDSCAPE,\n    \"cover\": \"https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg\",\n    \"operaTitle\": \"Matematica.azzurro\",\n    \"volumeTitle\": \"Volume 3 con Tutor\",\n    \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    \"isbn\": \"9788808930552\",\n    \"isbnLabel\": \"(ed. cartacea)\",\n    \"year\": \"2025\",\n    \"ebookUrl\": \"https://www.zanichelli.it/ricerca\",\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"titleHtmlTag\": undefined,\n    \"hasMultipleCovers\": false,\n    \"linkTarget\": \"_blank\",\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} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      .variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      link-target=${args.linkTarget}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      .cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      link-target=${args.linkTarget}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"cursor: pointer; fill: var(--blue500);\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"primary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n\n      <div slot=\"tags\">\n        <z-tag style=\"--z-tag-bg: var(--gray500);\">EDIZIONE DIGITALE INSEGNANTE</z-tag>\n        <z-tag style=\"--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);\">BES</z-tag>\n      </div>\n\n      <div slot=\"data\">\n        <a\n          href=\"https://www.zanichelli.it\"\n          class=\"catalog-link z-link z-link-blue z-link-icon body-4-sb\"\n          >Scheda catalogo\n          <z-icon\n            name=\"arrow-quad-north-east\"\n            width=\"14\"\n            height=\"14\"\n          ></z-icon>\n        </a>\n        <div\n          class=\"body-5-sb\"\n          style=\"padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;\"\n        >\n          ADOTTATO\n        </div>\n      </div>\n\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n      </div>\n\n      <div\n        slot=\"coverOverlay\"\n        class=\"body-4-sb\"\n      >\n        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI\n      </div>\n\n      <style>\n        z-book-card-app {\n          --z-book-card-app-padding-x: 8px;\n          width: 100%;\n          max-width: 100%;\n          height: 47px;\n\n          @media (min-width: 768px) {\n            --z-book-card-app-padding-x: 16px;\n            width: 315px;\n          }\n        }\n      </style>\n    </z-book-card>`,\n} satisfies Story;\n"]}

package/dist/collection/components/book-card/z-book-card/styles.css

@@ -18,59 +18,37 @@
   font-family: var(--font-family-sans);
 }
 
-:host .main-content {
+:host,
+* {
+  box-sizing: border-box;
+}
+
+.main-content {
   display: flex;
   height: 100%;
-  box-sizing: border-box;
   flex-direction: column;
   padding: var(--space-unit);
   gap: var(--space-unit);
 }
 
-:host .main-content .cover {
+.main-content .cover {
   position: relative;
   display: flex;
   overflow: hidden;
-  height: var(--z-book-card-portrait-cover-height);
   align-items: flex-end;
-  background: var(--color-white);
   border-radius: var(--border-radius);
 }
 
-:host .main-content .cover:focus-within {
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+.main-content .cover z-book-cover {
+  --z-book-cover-height: var(--z-book-card-portrait-cover-height);
 }
 
-:host .main-content .cover a {
-  display: inline-flex;
-  outline: none;
-}
-
-:host .main-content .cover img {
-  max-width: 100%;
-  max-height: 100%;
+.main-content a.cover:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
-::slotted([slot="coverOverlay"]) {
-  position: absolute;
-  bottom: 0;
-  overflow: hidden;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--space-unit);
-  background-color: var(--avatar-C19);
-  color: var(--color-white);
-}
-
-:host .main-content .cover ::slotted([slot="coverOverlay"]) {
-  min-height: 80px;
-  max-height: 336px;
-}
-
-:host .main-content .card-info {
+.main-content .card-info {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -78,24 +56,24 @@
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .top {
+.main-content .card-info .top {
   display: flex;
   flex-direction: column;
   gap: calc(var(--space-unit) * 2);
 }
 
-:host .main-content .card-info .top ::slotted([slot="tags"]) {
+.main-content .card-info .top ::slotted([slot="tags"]) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .top ::slotted([slot="data"]) {
+.main-content .card-info .top ::slotted([slot="data"]) {
   display: flex;
   justify-content: space-between;
 }
 
-:host .main-content .card-info .top .ellipsis {
+.main-content .card-info .top .ellipsis {
   display: -webkit-box;
   overflow: hidden;
   height: 1.4rem;
@@ -107,46 +85,49 @@
   word-break: break-all;
 }
 
-:host .main-content .card-info .top .ellipsis.opera-title {
-  height: calc(1.5 * var(--z-book-card-title-lines)) rem;
+.main-content .card-info .top .ellipsis.opera-title {
+  height: auto;
+  max-height: calc(1.5rem * var(--z-book-card-title-lines));
   -webkit-line-clamp: var(--z-book-card-title-lines);
   line-clamp: var(--z-book-card-title-lines);
   line-height: 1.5rem;
   word-break: var(--z-book-card-title-word-break);
 }
 
-:host .main-content .card-info .top .ellipsis.volume-title {
-  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;
+.main-content .card-info .top .ellipsis.volume-title {
+  height: auto;
+  max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));
   -webkit-line-clamp: var(--z-book-card-subtitle-lines);
   line-clamp: var(--z-book-card-subtitle-lines);
   line-height: 1.4rem;
   word-break: var(--z-book-card-subtitle-word-break);
 }
 
-:host .main-content .card-info .top .ellipsis.authors {
-  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;
+.main-content .card-info .top .ellipsis.authors {
+  height: auto;
+  max-height: calc(1.4rem * var(--z-book-card-authors-lines));
   -webkit-line-clamp: var(--z-book-card-authors-lines);
   line-clamp: var(--z-book-card-authors-lines);
   line-height: 1.4rem;
   word-break: var(--z-book-card-authors-word-break);
 }
 
-:host .main-content .card-info .top .opera-title * {
+.main-content .card-info .top .opera-title * {
   all: unset;
 }
 
-:host .main-content .cta-wrapper {
+.main-content .cta-wrapper {
   display: flex;
   justify-content: space-between;
   gap: calc(var(--space-unit) / 2);
 }
 
-:host .main-content .card-info .top .link-chip-wrapper {
+.main-content .card-info .top .link-chip-wrapper {
   display: flex;
   justify-content: space-between;
 }
 
-:host .main-content .card-info .bottom .ebook {
+.main-content .card-info .bottom .ebook {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -157,7 +138,7 @@
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .bottom .ebook .app-name {
+.main-content .card-info .bottom .ebook .app-name {
   display: flex;
   align-items: center;
   padding: calc(var(--space-unit) / 2) 0;
@@ -165,43 +146,30 @@
   gap: calc(var(--space-unit) / 2);
 }
 
-:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {
+.main-content .card-info .bottom .ebook .app-name .ebook-logo {
   width: 1.5rem;
   height: 1.5rem;
   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");
 }
 
 :host([variant="landscape"]) {
-  width: 635px;
+  width: 637px;
   min-height: max(332px, 20.75rem);
   padding: 0;
 }
 
 :host([variant="landscape"]) .main-content {
   min-height: max(332px, 20.75rem);
-  box-sizing: border-box;
   flex-direction: row;
   padding: calc(var(--space-unit) * 2);
   gap: calc(var(--space-unit) * 2);
 }
 
-:host([variant="landscape"]) .main-content .cover {
-  display: flex;
-  overflow: hidden;
-  width: 221px;
-  height: 300px;
-  margin: 0;
-}
-
-:host([variant="landscape"]) .main-content .cover ::slotted([slot="coverOverlay"]) {
-  min-height: 80px;
-  max-height: 256px;
-}
-
-:host([variant="landscape"]) .main-content .card-info {
-  gap: calc(var(--space-unit) / 2);
+:host([variant="landscape"]) .main-content .cover z-book-cover {
+  --z-book-cover-height: 300px;
 }
 
+:host([variant="landscape"]) .main-content .card-info,
 :host([variant="landscape"]) .main-content .card-info .top {
   gap: calc(var(--space-unit) / 2);
 }

package/dist/collection/components/z-app-header/index.js

@@ -4,6 +4,7 @@ import { Breakpoints } from "../../constants/breakpoints";
 import { containsElement } from "../../utils/utils";
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
+ * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.
  * @slot title - Slot for the main title
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
@@ -256,7 +257,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '01bcf2e73c2b4da9ed2c9bcf19ceeece56bd738e', "menu-length": this.menuLength }, h("div", { key: 'adf412ee992b488c6e87b7e2f82265c7e6a13b8c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '015996363351b8b81ee50bffd409d8a41edc4008', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '98e3fd2bc1a55fb77dfb00fb55708f6520461bb5', class: "top-subtitle" }, h("slot", { key: '068c16c8cb9496933955c6d68ac8aa1326640688', name: "top-subtitle" }))), h("div", { key: 'c7a806a4af8d099f0c6bc70cefd03f01467b235f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '45a99fbbb889355061ee3230d5825110d681e26e', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b9ab704c754800865087d45791257a6191b847e9', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '0dd28fca9d831513a3f29041a33da0b9935caa3e', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '35e03382a70e5601c8d02c26731ba434d795de0a', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a0bd0524157668d1ed6132f581596e91feef9c37', "menu-length": this.menuLength }, h("div", { key: 'a91c0c19ea534e7707dff0700fc3da571c3ff440', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'b19a7bbbc84d0fe7a516b0bdfb191572162ec79c', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '5769e4b6a5aaef8d99133268e8dba7769cdad8ed', class: "top-subtitle" }, h("slot", { key: '9f5979f6a544049f53dd07a59c7524192aaef936', name: "top-subtitle" }))), h("div", { key: '4a3a22a01bbe11e460ef6f72b4eed08e17743013', class: "heading-title" }, h("slot", { key: '6cd7e4dbfdaddb8a2716e8168fc1bba4121c4291', name: "menu-button" }, this.renderMenuButton()), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '7401663bd3b0cd3fe228789ca856e002a04d3581', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '685e52ce6b58cd839c34d7e5ab69c775604853e0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9b5d50462dcc1c2fde87c9ee7a7ba62d96b6c252', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9965ec165c2e2f20e96a70f121856bf7382e1ecb', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }