@zanichelli/albe-web-components 18.5.4 → 18.6.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## 18.6.0 (2025-09-16)
+
 ## 18.5.4 (2025-09-09)
 
 

package/dist/cjs/{index-c798013f.js → index-c48948bf.js}

@@ -5,7 +5,7 @@ const utils = require('./utils-93961cb6.js');
 require('./index-09238e31.js');
 require('./index-66928615.js');
 
-const stylesCss = ":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover){position:relative;z-index:10;box-shadow:0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%))}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n    var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";
+const stylesCss = ":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover){position:relative;z-index:10;box-shadow:0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%))}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n    var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";
 const ZTrStyle0 = stylesCss;
 
 const ZTr = class {
@@ -70,4 +70,4 @@ ZTr.style = ZTrStyle0;
 
 exports.ZTr = ZTr;
 
-//# sourceMappingURL=index-c798013f.js.map
+//# sourceMappingURL=index-c48948bf.js.map

package/dist/cjs/index-c48948bf.js.map

@@ -0,0 +1 @@
+{"file":"index-c48948bf.js","mappings":"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","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n  --columns: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-background);\n}\n\n:host(:hover) {\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base, rgb(0 0 0 / 20%));\n}\n\n:host(:focus) {\n  position: relative;\n  z-index: 20;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n  position: absolute;\n  z-index: 30;\n  right: 0;\n  left: 0;\n  width: 100%;\n  border-radius: 4px;\n  box-shadow: none;\n  inset: 0;\n  outline: none;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n  box-shadow:\n    0 0 0 2px var(--shadow-focus-primary),\n    var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:focus) ::slotted(*) {\n  border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n  border-bottom: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const active = document.activeElement;\n    if (active !== this.host) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this.expanded = !this.expanded;\n      this.expand.emit({expanded: this.expanded});\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={0}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n        onKeyDown={this.onKeyDown.bind(this)}\n      >\n        <div\n          class=\"z-tr--focus-overlay\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              tabIndex={-1}\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -5,16 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-96af6326.js');
 const index$1 = require('./index-97a4c18d.js');
 
-const stylesCss = ":host{--z-book-card-portrait-cover-height:378px;--z-book-card-title-lines:2;--z-book-card-title-word-break:initial;--z-book-card-subtitle-lines:1;--z-book-card-subtitle-word-break:break-all;--z-book-card-authors-lines:1;--z-book-card-authors-word-break:break-all;display:flex;width:304px;box-sizing:border-box;flex-direction:column;border:solid var(--border-size-medium) var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-default-text);font-family:var(--font-family-sans)}:host .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{position:relative;display:flex;overflow:hidden;height:var(--z-book-card-portrait-cover-height);background:var(--color-white);border-radius:var(--border-radius)}:host .main-content .cover img{max-width:100%;max-height:100%;align-self:end}::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{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:var(--space-unit)}:host .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\"]){display:flex;flex-wrap:wrap;gap:var(--space-unit)}:host .main-content .card-info .top ::slotted([slot=\"data\"]){display:flex;justify-content:space-between}:host .main-content .card-info .top .ellipsis{display:-webkit-box;overflow:hidden;height:1.4rem;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;line-height:1.4rem;text-overflow:ellipsis;word-break:break-all}:host .main-content .card-info .top .ellipsis.opera-title{height:calc(1.5 * var(--z-book-card-title-lines)) rem;-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;-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;-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 *{all:unset}:host .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{display:flex;justify-content:space-between}:host .main-content .card-info .bottom .ebook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--space-unit);background-color:var(--color-primary02);border-radius:var(--border-radius);gap:var(--space-unit)}:host .main-content .card-info .bottom .ebook .app-name{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;font-family:var(--font-family-serif);gap:calc(var(--space-unit) / 2)}:host .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;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 .card-info .top{gap:calc(var(--space-unit) / 2)}@media (max-width: 767px){:host([variant=\"portrait\"]){width:100%;max-width:400px}}";
-const ZBookCardStyle0 = stylesCss;
+const stylesCss$1 = ":host{--z-book-card-portrait-cover-height:378px;--z-book-card-title-lines:2;--z-book-card-title-word-break:initial;--z-book-card-subtitle-lines:1;--z-book-card-subtitle-word-break:break-all;--z-book-card-authors-lines:1;--z-book-card-authors-word-break:break-all;display:flex;width:304px;box-sizing:border-box;flex-direction:column;border:solid var(--border-size-medium) var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-default-text);font-family:var(--font-family-sans)}:host .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{position:relative;display:flex;overflow:hidden;height:var(--z-book-card-portrait-cover-height);background:var(--color-white);border-radius:var(--border-radius)}:host .main-content a.cover-link:focus-visible{border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary);outline:none}:host .main-content .cover img{max-width:100%;max-height:100%;align-self:end}::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{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:var(--space-unit)}:host .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\"]){display:flex;flex-wrap:wrap;gap:var(--space-unit)}:host .main-content .card-info .top ::slotted([slot=\"data\"]){display:flex;justify-content:space-between}:host .main-content .card-info .top .ellipsis{display:-webkit-box;overflow:hidden;height:1.4rem;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;line-height:1.4rem;text-overflow:ellipsis;word-break:break-all}:host .main-content .card-info .top .ellipsis.opera-title{height:calc(1.5 * var(--z-book-card-title-lines)) rem;-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;-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;-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 *{all:unset}:host .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{display:flex;justify-content:space-between}:host .main-content .card-info .bottom .ebook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--space-unit);background-color:var(--color-primary02);border-radius:var(--border-radius);gap:var(--space-unit)}:host .main-content .card-info .bottom .ebook .app-name{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;font-family:var(--font-family-serif);gap:calc(var(--space-unit) / 2)}:host .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;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 .card-info .top{gap:calc(var(--space-unit) / 2)}@media (max-width: 767px){:host([variant=\"portrait\"]){width:100%;max-width:400px}}";
+const ZBookCardStyle0 = stylesCss$1;
 
 const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
 const ZBookCardStyle1 = typographyCss;
 
+const stylesCss = "button.z-link{padding:0;border:0;margin:0;background-color:transparent}a.z-link,button.z-link{display:inline-flex;cursor:pointer;font-family:var(--font-family-sans);line-height:inherit;text-decoration:none}a.z-link.z-link-icon,button.z-link.z-link-icon{--z-icon-width:1.125em;--z-icon-height:1.125em;align-items:center;column-gap:0.5em}a.z-link.z-link-sb,button.z-link.z-link-sb{font-weight:var(--font-sb)}a.z-link.z-link-underline,button.z-link.z-link-underline{text-decoration:underline}a.z-link:hover,button.z-link:hover,a.z-link:focus,button.z-link:focus,a.z-link:active,button.z-link:active{text-decoration:underline}a.z-link:focus,button.z-link:focus{box-shadow:var(--shadow-focus-primary);outline:none}a.z-link.z-link-disabled,button.z-link.z-link-disabled{box-shadow:none;color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);outline:none;pointer-events:none;text-decoration:none}a.z-link,button.z-link,a.z-link.z-link-active,button.z-link.z-link-active,a.z-link:hover,button.z-link:hover,a.z-link.z-link-active:hover,button.z-link.z-link-active:hover,a.z-link:focus,button.z-link:focus,a.z-link.z-link-active:focus,button.z-link.z-link-active:focus,a.z-link:active,button.z-link:active,a.z-link.z-link-active:active,button.z-link.z-link-active:active,a.z-link:visited,button.z-link:visited,a.z-link.z-link-active:visited,button.z-link.z-link-active:visited{color:var(--color-text-link-default);fill:var(--color-text-link-default)}a.z-link.z-link-blue,button.z-link.z-link-blue,a.z-link.z-link-blue.z-link-active,button.z-link.z-link-blue.z-link-active{color:var(--color-text-link-blue);fill:var(--color-text-link-blue)}a.z-link.z-link-red,button.z-link.z-link-red,a.z-link.z-link-red.z-link-active,button.z-link.z-link-red.z-link-active{color:var(--color-text-link-red);fill:var(--color-text-link-red)}a.z-link.z-link-inverse,button.z-link.z-link-inverse,a.z-link.z-link-inverse.z-link-active,button.z-link.z-link-inverse.z-link-active{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:hover,button.z-link.z-link-blue:hover{color:var(--color-text-link-blue-hover);fill:var(--color-text-link-blue-hover)}a.z-link.z-link-red:hover,button.z-link.z-link-red:hover{color:var(--color-text-link-red-hover);fill:var(--color-text-link-red-hover)}a.z-link.z-link-inverse:hover,button.z-link.z-link-inverse:hover{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:active,button.z-link.z-link-blue:active,a.z-link.z-link-blue:focus,button.z-link.z-link-blue:focus{color:var(--color-text-link-blue-active);fill:var(--color-text-link-blue-active)}a.z-link.z-link-red:active,button.z-link.z-link-red:active,a.z-link.z-link-red:focus,button.z-link.z-link-red:focus{color:var(--color-text-link-red-active);fill:var(--color-text-link-red-active)}a.z-link.z-link-inverse:active,button.z-link.z-link-inverse:active,a.z-link.z-link-inverse:focus,button.z-link.z-link-inverse:focus{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}a.z-link.z-link-blue:visited,button.z-link.z-link-blue:visited{color:var(--color-text-link-blue-visited);fill:var(--color-text-link-blue-visited)}a.z-link.z-link-red:visited,button.z-link.z-link-red:visited{color:var(--color-text-link-red-visited);fill:var(--color-text-link-red-visited)}a.z-link.z-link-inverse:visited,button.z-link.z-link-inverse:visited{color:var(--color-text-link-inverse);fill:var(--color-text-link-inverse)}";
+const ZBookCardStyle2 = stylesCss;
+
 const ZBookCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ebookClick = index.createEvent(this, "ebookClick", 7);
+        this.coverClick = index.createEvent(this, "coverClick", 7);
+        this.titleClick = index.createEvent(this, "titleClick", 7);
         this.variant = index$1.BookCardVariant.PORTRAIT;
         this.cover = undefined;
         this.operaTitle = undefined;
@@ -30,12 +35,19 @@ const ZBookCard = class {
     emitEbookClick() {
         this.ebookClick.emit();
     }
+    emitCoverClick() {
+        this.coverClick.emit();
+    }
+    emitTitleClick() {
+        this.titleClick.emit();
+    }
     renderCover() {
-        return (index.h("div", { class: "cover" }, index.h("img", { src: this.cover, onError: () => {
+        const cover = (index.h("div", { class: "cover" }, index.h("img", { src: this.cover, onError: () => {
                 if (this.fallbackCover) {
                     this.cover = this.fallbackCover;
                 }
             }, "aria-hidden": "true" }), index.h("slot", { name: "coverOverlay" })));
+        return this.ebookUrl ? (index.h("a", { class: "cover-link", href: this.ebookUrl, onClick: () => this.emitCoverClick(), target: "_blank" }, cover)) : (cover);
     }
     renderYear() {
         if (!this.year) {
@@ -53,7 +65,8 @@ const ZBookCard = class {
         const title = this.titleHtmlTag
             ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`
             : this.operaTitle;
-        return (index.h("div", { class: "cta-wrapper" }, index.h("div", { class: "opera-title ellipsis body-2-sb", innerHTML: title }), this.variant === index$1.BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
+        const operaTitle = (index.h("div", { class: "opera-title ellipsis body-2-sb", innerHTML: title }));
+        return (index.h("div", { class: "cta-wrapper" }, this.ebookUrl ? (index.h("a", { class: "z-link", href: this.ebookUrl, onClick: () => this.emitTitleClick(), target: "_blank" }, operaTitle)) : (operaTitle), this.variant === index$1.BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
     }
     renderVolumeTitle() {
         if (!this.volumeTitle) {
@@ -74,11 +87,11 @@ const ZBookCard = class {
         return index.h("slot", { name: "cta" });
     }
     render() {
-        return (index.h(index.Host, { key: '239ba8bd3f52288ec3f748311dce284d71106ba0' }, index.h("div", { key: 'd25b33181914ddd8ff5f699cf02112237e2bf6e3', class: "main-content" }, this.renderCover(), index.h("div", { key: 'fa79e463b770b63f1f8a0bbde3f05105dc229344', class: "card-info" }, index.h("div", { key: '7e595f41169cca9455dc53b99ddc15342eb1b963', class: "top" }, index.h("div", { key: 'f9fe00fb63360154f451de3486385cf88202d107' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), index.h("slot", { key: '2585df52a10a90cc2c10466a02fe4601ce015749', name: "tags" }), index.h("slot", { key: 'b383f55e1c64ce5c7578aa16eb68893f73c7c778', name: "data" })), index.h("slot", { key: '5cbbbc32f7142a6f2a8637ec220c3add460f3313', name: "ebook" }, !!this.ebookUrl && index.h("div", { key: '4aeb1dd60f20e6b50cd1459a933bd3e5a36112e4', class: "bottom" }, this.renderEbook())))), index.h("slot", { key: '78149851420a6e915b4fbebd95df89e45c56bc57', name: "apps" })));
+        return (index.h(index.Host, { key: '035f2f151024cdb55216e9d74f969eeac321f6f8' }, index.h("div", { key: 'a246d9121299591487f99ff9f515b667d87856fb', class: "main-content" }, this.renderCover(), index.h("div", { key: 'a5059b09bf377e873debd311968c24a09aa2d8ec', class: "card-info" }, index.h("div", { key: '5cafc0fc20eb300d0409f4326fc82f00f39df500', class: "top" }, index.h("div", { key: 'd4c2a605c2846f0c0b62da99ece8a95cdc895893' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), index.h("slot", { key: 'c19933023642c86a7fe451f0bc5ec6ec3a6de814', name: "tags" }), index.h("slot", { key: '7bece491928c0204d7f33e32b3905762bc9cc79a', name: "data" })), index.h("slot", { key: '8a65ede93bfbdb59eeb06d8a4577d2dffd2bd773', name: "ebook" }, !!this.ebookUrl && index.h("div", { key: '0028618a3bf5cd93096a207a22754dd35b676882', class: "bottom" }, this.renderEbook())))), index.h("slot", { key: '373a54a7748585ea149f530efc9e8b820853f378', name: "apps" })));
     }
     get hostElement() { return index.getElement(this); }
 };
-ZBookCard.style = ZBookCardStyle0 + ZBookCardStyle1;
+ZBookCard.style = ZBookCardStyle0 + (ZBookCardStyle1 + ZBookCardStyle2);
 
 exports.z_book_card = ZBookCard;
 

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

@@ -1 +1 @@
-{"file":"z-book-card.entry.cjs.js","mappings":"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","names":["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/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\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 .main-content {\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: var(--space-unit);\n  gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  height: var(--z-book-card-portrait-cover-height);\n  background: var(--color-white);\n  border-radius: var(--border-radius);\n}\n\n:host .main-content .cover img {\n  max-width: 100%;\n  max-height: 100%;\n  align-self: end;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n  position: absolute;\n  bottom: 0;\n  overflow: hidden;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--avatar-C19);\n  color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 336px;\n}\n\n:host .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:host .main-content .card-info .top {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .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:host .main-content .card-info .top .ellipsis.opera-title {\n  height: calc(1.5 * var(--z-book-card-title-lines)) rem;\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:host .main-content .card-info .top .ellipsis.volume-title {\n  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\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:host .main-content .card-info .top .ellipsis.authors {\n  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\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:host .main-content .card-info .top .opera-title * {\n  all: unset;\n}\n\n:host .main-content .cta-wrapper {\n  display: flex;\n  justify-content: space-between;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .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:host .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:host .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  box-sizing: border-box;\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 {\n  display: flex;\n  overflow: hidden;\n  width: 221px;\n  height: 300px;\n  margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n  gap: calc(var(--space-unit) / 2);\n}\n\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) / 0.9166 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 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","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 - 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\"],\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 */\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  private emitEbookClick(): void {\n    this.ebookClick.emit();\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        <img\n          src={this.cover}\n          onError={() => {\n            if (this.fallbackCover) {\n              this.cover = this.fallbackCover;\n            }\n          }}\n          aria-hidden=\"true\"\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    return (\n      <div class=\"cta-wrapper\">\n        <div\n          class=\"opera-title ellipsis body-2-sb\"\n          innerHTML={title}\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":"z-book-card.entry.cjs.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  --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 .main-content {\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: var(--space-unit);\n  gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  height: var(--z-book-card-portrait-cover-height);\n  background: var(--color-white);\n  border-radius: var(--border-radius);\n}\n\n:host .main-content a.cover-link:focus-visible {\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host .main-content .cover img {\n  max-width: 100%;\n  max-height: 100%;\n  align-self: end;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n  position: absolute;\n  bottom: 0;\n  overflow: hidden;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--avatar-C19);\n  color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 336px;\n}\n\n:host .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:host .main-content .card-info .top {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .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:host .main-content .card-info .top .ellipsis.opera-title {\n  height: calc(1.5 * var(--z-book-card-title-lines)) rem;\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:host .main-content .card-info .top .ellipsis.volume-title {\n  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\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:host .main-content .card-info .top .ellipsis.authors {\n  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\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:host .main-content .card-info .top .opera-title * {\n  all: unset;\n}\n\n:host .main-content .cta-wrapper {\n  display: flex;\n  justify-content: space-between;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .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:host .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:host .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  box-sizing: border-box;\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 {\n  display: flex;\n  overflow: hidden;\n  width: 221px;\n  height: 300px;\n  margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n  gap: calc(var(--space-unit) / 2);\n}\n\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) / 0.9166 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 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,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\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,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\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,\nbutton.z-link.z-link-blue:focus {\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,\nbutton.z-link.z-link-red:focus {\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,\nbutton.z-link.z-link-inverse:focus {\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, 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 - 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 cover = (\n      <div class=\"cover\">\n        <img\n          src={this.cover}\n          onError={() => {\n            if (this.fallbackCover) {\n              this.cover = this.fallbackCover;\n            }\n          }}\n          aria-hidden=\"true\"\n        />\n        <slot name=\"coverOverlay\"></slot>\n      </div>\n    );\n\n    return this.ebookUrl ? (\n      <a\n        class=\"cover-link\"\n        href={this.ebookUrl}\n        onClick={() => this.emitCoverClick()}\n        target=\"_blank\"\n      >\n        {cover}\n      </a>\n    ) : (\n      cover\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}

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

@@ -6,7 +6,7 @@ const index = require('./index-96af6326.js');
 require('./index-62712250.js');
 require('./index-1c7cd5df.js');
 require('./index-f011b2e3.js');
-require('./index-c798013f.js');
+require('./index-c48948bf.js');
 require('./utils-93961cb6.js');
 require('./index-97a4c18d.js');
 require('./breakpoints-8a1e87e0.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c798013f.js');
+const index = require('./index-c48948bf.js');
 require('./index-96af6326.js');
 require('./utils-93961cb6.js');
 require('./index-97a4c18d.js');

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

@@ -32,12 +32,19 @@ export class ZBookCard {
     emitEbookClick() {
         this.ebookClick.emit();
     }
+    emitCoverClick() {
+        this.coverClick.emit();
+    }
+    emitTitleClick() {
+        this.titleClick.emit();
+    }
     renderCover() {
-        return (h("div", { class: "cover" }, h("img", { src: this.cover, onError: () => {
+        const cover = (h("div", { class: "cover" }, h("img", { src: this.cover, onError: () => {
                 if (this.fallbackCover) {
                     this.cover = this.fallbackCover;
                 }
             }, "aria-hidden": "true" }), h("slot", { name: "coverOverlay" })));
+        return this.ebookUrl ? (h("a", { class: "cover-link", href: this.ebookUrl, onClick: () => this.emitCoverClick(), target: "_blank" }, cover)) : (cover);
     }
     renderYear() {
         if (!this.year) {
@@ -55,7 +62,8 @@ export class ZBookCard {
         const title = this.titleHtmlTag
             ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`
             : this.operaTitle;
-        return (h("div", { class: "cta-wrapper" }, h("div", { class: "opera-title ellipsis body-2-sb", innerHTML: title }), this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null));
+        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));
     }
     renderVolumeTitle() {
         if (!this.volumeTitle) {
@@ -76,18 +84,18 @@ export class ZBookCard {
         return h("slot", { name: "cta" });
     }
     render() {
-        return (h(Host, { key: '239ba8bd3f52288ec3f748311dce284d71106ba0' }, h("div", { key: 'd25b33181914ddd8ff5f699cf02112237e2bf6e3', class: "main-content" }, this.renderCover(), h("div", { key: 'fa79e463b770b63f1f8a0bbde3f05105dc229344', class: "card-info" }, h("div", { key: '7e595f41169cca9455dc53b99ddc15342eb1b963', class: "top" }, h("div", { key: 'f9fe00fb63360154f451de3486385cf88202d107' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: '2585df52a10a90cc2c10466a02fe4601ce015749', name: "tags" }), h("slot", { key: 'b383f55e1c64ce5c7578aa16eb68893f73c7c778', name: "data" })), h("slot", { key: '5cbbbc32f7142a6f2a8637ec220c3add460f3313', name: "ebook" }, !!this.ebookUrl && h("div", { key: '4aeb1dd60f20e6b50cd1459a933bd3e5a36112e4', class: "bottom" }, this.renderEbook())))), h("slot", { key: '78149851420a6e915b4fbebd95df89e45c56bc57', name: "apps" })));
+        return (h(Host, { key: '035f2f151024cdb55216e9d74f969eeac321f6f8' }, h("div", { key: 'a246d9121299591487f99ff9f515b667d87856fb', class: "main-content" }, this.renderCover(), h("div", { key: 'a5059b09bf377e873debd311968c24a09aa2d8ec', class: "card-info" }, h("div", { key: '5cafc0fc20eb300d0409f4326fc82f00f39df500', class: "top" }, h("div", { key: 'd4c2a605c2846f0c0b62da99ece8a95cdc895893' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'c19933023642c86a7fe451f0bc5ec6ec3a6de814', name: "tags" }), h("slot", { key: '7bece491928c0204d7f33e32b3905762bc9cc79a', name: "data" })), h("slot", { key: '8a65ede93bfbdb59eeb06d8a4577d2dffd2bd773', name: "ebook" }, !!this.ebookUrl && h("div", { key: '0028618a3bf5cd93096a207a22754dd35b676882', class: "bottom" }, this.renderEbook())))), h("slot", { key: '373a54a7748585ea149f530efc9e8b820853f378', name: "apps" })));
     }
     static get is() { return "z-book-card"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css", "../../../tokens/typography.css"]
+            "$": ["styles.css", "../../../tokens/typography.css", "../../css-components/z-link/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css", "../../../tokens/typography.css"]
+            "$": ["styles.css", "../../../tokens/typography.css", "../../css-components/z-link/styles.css"]
         };
     }
     static get properties() {
@@ -248,7 +256,7 @@ export class ZBookCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Show link to the ebook resource"
+                    "text": "[optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource"
                 },
                 "attribute": "ebook-url",
                 "reflect": false
@@ -305,6 +313,36 @@ export class ZBookCard {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "coverClick",
+                "name": "coverClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on cover link"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "titleClick",
+                "name": "titleClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on title link"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "hostElement"; }

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 {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\"],\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 */\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  private emitEbookClick(): void {\n    this.ebookClick.emit();\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        <img\n          src={this.cover}\n          onError={() => {\n            if (this.fallbackCover) {\n              this.cover = this.fallbackCover;\n            }\n          }}\n          aria-hidden=\"true\"\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    return (\n      <div class=\"cta-wrapper\">\n        <div\n          class=\"opera-title ellipsis body-2-sb\"\n          innerHTML={title}\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 - 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 cover = (\n      <div class=\"cover\">\n        <img\n          src={this.cover}\n          onError={() => {\n            if (this.fallbackCover) {\n              this.cover = this.fallbackCover;\n            }\n          }}\n          aria-hidden=\"true\"\n        />\n        <slot name=\"coverOverlay\"></slot>\n      </div>\n    );\n\n    return this.ebookUrl ? (\n      <a\n        class=\"cover-link\"\n        href={this.ebookUrl}\n        onClick={() => this.emitCoverClick()}\n        target=\"_blank\"\n      >\n        {cover}\n      </a>\n    ) : (\n      cover\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"]}

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

@@ -36,6 +36,12 @@
   border-radius: var(--border-radius);
 }
 
+:host .main-content a.cover-link:focus-visible {
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
 :host .main-content .cover img {
   max-width: 100%;
   max-height: 100%;

package/dist/collection/components/table/z-tr/styles.css

@@ -89,11 +89,6 @@
   visibility: var(--show-expandable-button, hidden);
 }
 
-.z-tr--expand-button-container button:focus {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
 .z-tr--expand-button-container button z-icon {
   --z-icon-width: 16px;
   --z-icon-height: 16px;