From d370166bc02ed4c67ea790dbe7a5ad3b2f3f5cd0 Mon Sep 17 00:00:00 2001
From: Valentina Pasquino <vpasquino@zanichelli.it>
Date: Mon, 25 Nov 2024 17:14:52 +0100
Subject: [PATCH 01/26] feat!: wip tags

---
 src/beans/index.tsx                           |   9 +-
 src/components.d.ts                           |  25 ++--
 .../book-card/z-book-card/index.stories.ts    |  17 ++-
 .../book-card/z-book-card/index.tsx           | 123 ++++++++++++------
 .../book-card/z-book-card/readme.md           |  45 +++----
 .../book-card/z-book-card/styles.css          |   6 +-
 .../book-card/z-book-card/test.e2e.ts         |  90 ++++++++++++-
 src/pages/book-cards.html                     |   7 +-
 8 files changed, 236 insertions(+), 86 deletions(-)

diff --git a/src/beans/index.tsx b/src/beans/index.tsx
index 51cde80e3..118f3ae86 100644
--- a/src/beans/index.tsx
+++ b/src/beans/index.tsx
@@ -466,12 +466,17 @@ export enum BookCardDeprecatedVariant {
   SEARCH = "search",
 }
 
-export enum CardTagStatus {
+export type BookCardTag = {
+  status: BookCardTagStatus;
+  interactive: boolean;
+};
+
+export enum BookCardTagStatus {
   ACTIVE = "active",
   DISABLED = "disabled",
 }
 
-export type CardTagEvent = {
+export type BookCardTagEvent = {
   tag: string;
   state: string;
 };
diff --git a/src/components.d.ts b/src/components.d.ts
index cacc0b6a3..39129bd71 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardTagStatus, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardTag, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 import { AlertType, LicenseType } from "./beans/index";
 import { ListItem } from "./beans/index.js";
-export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardTagStatus, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardTag, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 export { AlertType, LicenseType } from "./beans/index";
 export { ListItem } from "./beans/index.js";
 export namespace Components {
@@ -259,7 +259,7 @@ export namespace Components {
         /**
           * [optional] Annotated tag
          */
-        "annotated"?: CardTagStatus;
+        "annotated"?: BookCardTag | string;
         /**
           * [optional] Authors
          */
@@ -279,7 +279,7 @@ export namespace Components {
         /**
           * [optional] EDI tag
          */
-        "edi"?: CardTagStatus;
+        "edi"?: BookCardTag | string;
         /**
           * [optional] Fallback cover URL
          */
@@ -301,9 +301,9 @@ export namespace Components {
          */
         "operaTitleHtmlTag"?: string;
         /**
-          * [optional] Annotated tag
+          * [optional] Teacher version tag
          */
-        "teacherVersion"?: CardTagStatus;
+        "teacherVersion"?: BookCardTag | string;
         /**
           * Card variant: landscape, portrait
          */
@@ -2464,6 +2464,7 @@ declare global {
         "tagClick": any;
         "catalogClick": any;
         "ebookClick": any;
+        "immersiveReaderClick": any;
     }
     interface HTMLZBookCardElement extends Components.ZBookCard, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardElementEventMap>(type: K, listener: (this: HTMLZBookCardElement, ev: ZBookCardCustomEvent<HTMLZBookCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3801,7 +3802,7 @@ declare namespace LocalJSX {
         /**
           * [optional] Annotated tag
          */
-        "annotated"?: CardTagStatus;
+        "annotated"?: BookCardTag | string;
         /**
           * [optional] Authors
          */
@@ -3821,7 +3822,7 @@ declare namespace LocalJSX {
         /**
           * [optional] EDI tag
          */
-        "edi"?: CardTagStatus;
+        "edi"?: BookCardTag | string;
         /**
           * [optional] Fallback cover URL
          */
@@ -3842,6 +3843,10 @@ declare namespace LocalJSX {
           * click on ebook link
          */
         "onEbookClick"?: (event: ZBookCardCustomEvent<any>) => void;
+        /**
+          * click on immersive reader
+         */
+        "onImmersiveReaderClick"?: (event: ZBookCardCustomEvent<any>) => void;
         /**
           * click on tag
          */
@@ -3855,9 +3860,9 @@ declare namespace LocalJSX {
          */
         "operaTitleHtmlTag"?: string;
         /**
-          * [optional] Annotated tag
+          * [optional] Teacher version tag
          */
-        "teacherVersion"?: CardTagStatus;
+        "teacherVersion"?: BookCardTag | string;
         /**
           * Card variant: landscape, portrait
          */
diff --git a/src/components/book-card/z-book-card/index.stories.ts b/src/components/book-card/z-book-card/index.stories.ts
index 42dfea790..f5636399e 100644
--- a/src/components/book-card/z-book-card/index.stories.ts
+++ b/src/components/book-card/z-book-card/index.stories.ts
@@ -1,7 +1,7 @@
 import {Meta, StoryObj} from "@storybook/web-components";
 import {html} from "lit";
 import {ZBookCard} from ".";
-import {BookCardVariant, CardTagStatus} from "../../../beans";
+import {BookCardTagStatus, BookCardVariant} from "../../../beans";
 import "../../z-button/index";
 import "../../z-icon/index";
 import "../../z-tag/index";
@@ -26,19 +26,22 @@ const StoryMeta = {
       control: {
         type: "inline-radio",
       },
-      options: [...Object.values(CardTagStatus), null],
+      // TODO: FIX!!
+      options: [...Object.values(BookCardTagStatus), null],
     },
     annotated: {
       control: {
         type: "inline-radio",
       },
-      options: [...Object.values(CardTagStatus), null],
+      // TODO: FIX!!
+      options: [...Object.values(BookCardTagStatus), null],
     },
     teacherVersion: {
       control: {
         type: "inline-radio",
       },
-      options: [...Object.values(CardTagStatus), null],
+      // TODO: FIX!!
+      options: [...Object.values(BookCardTagStatus), null],
     },
     theme: {
       control: {
@@ -56,9 +59,9 @@ const StoryMeta = {
     isbn: "9788808930552",
     isbnLabel: "(ed. cartacea)",
     adoption: true,
-    edi: CardTagStatus.ACTIVE,
-    annotated: CardTagStatus.ACTIVE,
-    teacherVersion: CardTagStatus.DISABLED,
+    // edi: BookCardTagStatus.ACTIVE,
+    // annotated: BookCardTagStatus.ACTIVE,
+    // teacherVersion: BookCardTagStatus.DISABLED,
     catalogUrl: "https://www.zanichelli.it/ricerca/prodotti/matematica-multimediale-blu3ed?qid=9788808710932",
     ebookUrl: "https://www.zanichelli.it/ricerca",
     fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 2faba159a..ef11d8fc5 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -1,5 +1,5 @@
-import {Component, Element, Event, EventEmitter, Fragment, Prop, h} from "@stencil/core";
-import {BookCardVariant, CardTagEvent, CardTagStatus, ControlSize} from "../../../beans";
+import {Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h} from "@stencil/core";
+import {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from "../../../beans";
 
 /**
  * @slot cta - to the right of authors and title (e.g. bookmark icon)
@@ -43,15 +43,15 @@ export class ZBookCard {
 
   /** [optional] EDI tag */
   @Prop()
-  edi?: CardTagStatus;
+  edi?: BookCardTag | string;
 
   /** [optional] Annotated tag */
   @Prop()
-  annotated?: CardTagStatus;
+  annotated?: BookCardTag | string;
 
-  /** [optional] Annotated tag */
+  /** [optional] Teacher version tag */
   @Prop()
-  teacherVersion?: CardTagStatus;
+  teacherVersion?: BookCardTag | string;
 
   /** [optional] Show adoption badge */
   @Prop()
@@ -73,6 +73,10 @@ export class ZBookCard {
   @Prop()
   operaTitleHtmlTag?: string;
 
+  @State() ediTag;
+  @State() annotatedTag;
+  @State() teacherVersionTag;
+
   /** click on tag */
   @Event()
   tagClick: EventEmitter;
@@ -85,7 +89,33 @@ export class ZBookCard {
   @Event()
   ebookClick: EventEmitter;
 
-  private emitTagClick(e: CardTagEvent): void {
+  /** click on immersive reader */
+  @Event()
+  immersiveReaderClick: EventEmitter;
+
+  @Watch("edi")
+  watchEdi(): void {
+    this.ediTag = typeof this.edi === "string" ? JSON.parse(this.edi) : this.edi;
+  }
+
+  @Watch("annotated")
+  watchAnnotated(): void {
+    this.annotatedTag = typeof this.annotated === "string" ? JSON.parse(this.annotated) : this.annotated;
+  }
+
+  @Watch("teacherVersion")
+  watchTeacherVersion(): void {
+    this.teacherVersionTag =
+      typeof this.teacherVersion === "string" ? JSON.parse(this.teacherVersion) : this.teacherVersion;
+  }
+
+  componentWillLoad(): void {
+    this.watchEdi();
+    this.watchAnnotated();
+    this.watchTeacherVersion();
+  }
+
+  private emitTagClick(e: BookCardTagEvent): void {
     this.tagClick.emit(e);
   }
 
@@ -97,6 +127,10 @@ export class ZBookCard {
     this.ebookClick.emit();
   }
 
+  private emitImmersiveReaderClick(): void {
+    this.immersiveReaderClick.emit();
+  }
+
   private renderCard(): HTMLDivElement {
     switch (this.variant) {
       case BookCardVariant.LANDSCAPE:
@@ -123,14 +157,18 @@ export class ZBookCard {
     return this.isbnLabel ? <span class="body-4">{this.isbnLabel}</span> : null;
   }
 
-  private renderTag(label: string, state: string, id: string): HTMLDivElement {
+  private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {
+    console.log(label, tag, id);
     return (
       <z-tag
-        class={state}
+        class={{[tag.status]: true, interactive: tag.interactive}}
+        role={tag.interactive ? "button" : undefined}
+        tabIndex={tag.interactive ? 0 : undefined}
         onClick={() =>
+          tag.interactive &&
           this.emitTagClick({
             tag: id,
-            state,
+            state: tag.status,
           })
         }
       >
@@ -142,16 +180,16 @@ export class ZBookCard {
   private renderTags(): HTMLDivElement[] | null {
     const tags = [];
 
-    if (this.edi && Object.values(CardTagStatus).includes(this.edi)) {
-      tags.push(this.renderTag("edi", this.edi, "edi"));
+    if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {
+      tags.push(this.renderTag("edi", this.ediTag, "edi"));
     }
 
-    if (this.annotated && Object.values(CardTagStatus).includes(this.annotated)) {
-      tags.push(this.renderTag("annotata", this.annotated, "annotated"));
+    if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {
+      tags.push(this.renderTag("annotata", this.annotatedTag, "annotated"));
     }
 
-    if (this.teacherVersion && Object.values(CardTagStatus).includes(this.teacherVersion)) {
-      tags.push(this.renderTag("versione insegnante", this.teacherVersion, "teacherVersion"));
+    if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {
+      tags.push(this.renderTag("versione insegnante", this.teacherVersionTag, "teacherVersion"));
     }
 
     if (tags.length > 0) {
@@ -266,7 +304,7 @@ export class ZBookCard {
                     {this.catalogUrl && (
                       <a
                         href={this.catalogUrl}
-                        class="z-link z-link-icon body-4-sb"
+                        class="z-link z-link-icon body-4-sb immersive-reader"
                         onClick={() => this.emitCatalogClick()}
                       >
                         Scheda catalogo
@@ -284,31 +322,38 @@ export class ZBookCard {
               </div>
             </div>
             <div class="ebook-container">
-              {this.ebookUrl && (
-                <div class="ebook">
-                  <div>
-                    <div class="app-name">
-                      {this.renderLaZEbookLogo()}
-                      <div class="body-4-sb">
-                        <span class="laz">laZ</span> Ebook
+              <slot name="ebook">
+                {this.ebookUrl && (
+                  <div class="ebook">
+                    <div>
+                      <div class="app-name">
+                        {this.renderLaZEbookLogo()}
+                        <div class="body-4-sb">
+                          <span class="laz">laZ</span> Ebook
+                        </div>
+                      </div>
+                      <div class="body-5">
+                        Anche nella versione libro liquido con{" "}
+                        <span
+                          class="body-5-sb immersive-reader"
+                          onClick={() => this.emitImmersiveReaderClick()}
+                        >
+                          strumento di lettura immersiva
+                        </span>
                       </div>
                     </div>
-                    <div class="body-5">
-                      Anche nella versione libro liquido con{" "}
-                      <span class="body-5-sb">strumento di lettura immersiva</span>
-                    </div>
+                    <z-button
+                      size={ControlSize.X_SMALL}
+                      href={this.ebookUrl}
+                      onClick={() => this.emitEbookClick()}
+                      role="link"
+                      aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}
+                    >
+                      leggi ebook
+                    </z-button>
                   </div>
-                  <z-button
-                    size={ControlSize.X_SMALL}
-                    href={this.ebookUrl}
-                    onClick={() => this.emitEbookClick()}
-                    role="link"
-                    aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}
-                  >
-                    leggi ebook
-                  </z-button>
-                </div>
-              )}
+                )}
+              </slot>
             </div>
           </div>
         </div>
diff --git a/src/components/book-card/z-book-card/readme.md b/src/components/book-card/z-book-card/readme.md
index 913cd2b2e..b35c3761d 100644
--- a/src/components/book-card/z-book-card/readme.md
+++ b/src/components/book-card/z-book-card/readme.md
@@ -7,32 +7,33 @@
 
 ## Properties
 
-| Property            | Attribute              | Description                                                   | Type                                                    | Default                    |
-| ------------------- | ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
-| `adoption`          | `adoption`             | [optional] Show adoption badge                                | `boolean`                                               | `false`                    |
-| `annotated`         | `annotated`            | [optional] Annotated tag                                      | `CardTagStatus.ACTIVE \| CardTagStatus.DISABLED`        | `undefined`                |
-| `authors`           | `authors`              | [optional] Authors                                            | `string`                                                | `undefined`                |
-| `catalogUrl`        | `catalog-url`          | [optional] Show catalog link to correspondent resource        | `string`                                                | `undefined`                |
-| `cover`             | `cover`                | Cover URL                                                     | `string`                                                | `undefined`                |
-| `ebookUrl`          | `ebook-url`            | [optional] Show link to the ebook resource                    | `string`                                                | `undefined`                |
-| `edi`               | `edi`                  | [optional] EDI tag                                            | `CardTagStatus.ACTIVE \| CardTagStatus.DISABLED`        | `undefined`                |
-| `fallbackCover`     | `fallback-cover`       | [optional] Fallback cover URL                                 | `string`                                                | `undefined`                |
-| `isbn`              | `isbn`                 | [optional] Main ISBN                                          | `string`                                                | `undefined`                |
-| `isbnLabel`         | `isbn-label`           | [optional] ISBN label                                         | `string`                                                | `""`                       |
-| `operaTitle`        | `opera-title`          | [optional] Opera title                                        | `string`                                                | `undefined`                |
-| `operaTitleHtmlTag` | `opera-title-html-tag` | [optional] Set a specific h level as html tag for opera title | `string`                                                | `undefined`                |
-| `teacherVersion`    | `teacher-version`      | [optional] Annotated tag                                      | `CardTagStatus.ACTIVE \| CardTagStatus.DISABLED`        | `undefined`                |
-| `variant`           | `variant`              | Card variant: landscape, portrait                             | `BookCardVariant.LANDSCAPE \| BookCardVariant.PORTRAIT` | `BookCardVariant.PORTRAIT` |
-| `volumeTitle`       | `volume-title`         | [optional] Volume title                                       | `string`                                                | `undefined`                |
+| Property            | Attribute              | Description                                                   | Type                                                             | Default                    |
+| ------------------- | ---------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------- |
+| `adoption`          | `adoption`             | [optional] Show adoption badge                                | `boolean`                                                        | `false`                    |
+| `annotated`         | `annotated`            | [optional] Annotated tag                                      | `string \| { status: BookCardTagStatus; interactive: boolean; }` | `undefined`                |
+| `authors`           | `authors`              | [optional] Authors                                            | `string`                                                         | `undefined`                |
+| `catalogUrl`        | `catalog-url`          | [optional] Show catalog link to correspondent resource        | `string`                                                         | `undefined`                |
+| `cover`             | `cover`                | Cover URL                                                     | `string`                                                         | `undefined`                |
+| `ebookUrl`          | `ebook-url`            | [optional] Show link to the ebook resource                    | `string`                                                         | `undefined`                |
+| `edi`               | `edi`                  | [optional] EDI tag                                            | `string \| { status: BookCardTagStatus; interactive: boolean; }` | `undefined`                |
+| `fallbackCover`     | `fallback-cover`       | [optional] Fallback cover URL                                 | `string`                                                         | `undefined`                |
+| `isbn`              | `isbn`                 | [optional] Main ISBN                                          | `string`                                                         | `undefined`                |
+| `isbnLabel`         | `isbn-label`           | [optional] ISBN label                                         | `string`                                                         | `""`                       |
+| `operaTitle`        | `opera-title`          | [optional] Opera title                                        | `string`                                                         | `undefined`                |
+| `operaTitleHtmlTag` | `opera-title-html-tag` | [optional] Set a specific h level as html tag for opera title | `string`                                                         | `undefined`                |
+| `teacherVersion`    | `teacher-version`      | [optional] Teacher version tag                                | `string \| { status: BookCardTagStatus; interactive: boolean; }` | `undefined`                |
+| `variant`           | `variant`              | Card variant: landscape, portrait                             | `BookCardVariant.LANDSCAPE \| BookCardVariant.PORTRAIT`          | `BookCardVariant.PORTRAIT` |
+| `volumeTitle`       | `volume-title`         | [optional] Volume title                                       | `string`                                                         | `undefined`                |
 
 
 ## Events
 
-| Event          | Description           | Type               |
-| -------------- | --------------------- | ------------------ |
-| `catalogClick` | click on catalog link | `CustomEvent<any>` |
-| `ebookClick`   | click on ebook link   | `CustomEvent<any>` |
-| `tagClick`     | click on tag          | `CustomEvent<any>` |
+| Event                  | Description               | Type               |
+| ---------------------- | ------------------------- | ------------------ |
+| `catalogClick`         | click on catalog link     | `CustomEvent<any>` |
+| `ebookClick`           | click on ebook link       | `CustomEvent<any>` |
+| `immersiveReaderClick` | click on immersive reader | `CustomEvent<any>` |
+| `tagClick`             | click on tag              | `CustomEvent<any>` |
 
 
 ## Slots
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 04b31e366..c11af1496 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -126,6 +126,10 @@
                   --z-tag-bg: var(--color-surface03);
                   --z-tag-text-color: var(--color-default-text);
                 }
+
+                z-tag.interactive {
+                  cursor: pointer;
+                }
               }
             }
 
@@ -182,7 +186,7 @@
 
 /* Desktop breakpoint */
 
-/* 
+/*
 @media (min-width: 1152px) {
 } */
 
diff --git a/src/components/book-card/z-book-card/test.e2e.ts b/src/components/book-card/z-book-card/test.e2e.ts
index 98c72a0df..d6ffc7d56 100644
--- a/src/components/book-card/z-book-card/test.e2e.ts
+++ b/src/components/book-card/z-book-card/test.e2e.ts
@@ -1,8 +1,8 @@
 import {newE2EPage} from "@stencil/core/testing";
 
-it("Emits an event when clicking on edi tag", async () => {
+it("Emits an event when clicking on interactive edi tag", async () => {
   const page = await newE2EPage({
-    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" edi="active" adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" edi=\'{"status":"active","interactive":true}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
   });
   const cardTag = await page.find("z-book-card >>> .tags z-tag");
   const clickEvent = await page.spyOnEvent("tagClick");
@@ -17,6 +17,79 @@ it("Emits an event when clicking on edi tag", async () => {
   });
 });
 
+it("Does not emit an event when clicking on non interactive edi tag", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" edi=\'{"status":"active","interactive":false}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const cardTag = await page.find("z-book-card >>> .tags z-tag");
+  const clickEvent = await page.spyOnEvent("tagClick");
+
+  await cardTag.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).not.toHaveReceivedEvent();
+});
+
+it("Emits an event when clicking on interactive annotated tag", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" annotated=\'{"status":"active","interactive":true}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const cardTag = await page.find("z-book-card >>> .tags z-tag");
+  const clickEvent = await page.spyOnEvent("tagClick");
+
+  await cardTag.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).toHaveReceivedEvent();
+  expect(clickEvent).toHaveReceivedEventDetail({
+    tag: "annotated",
+    state: "active",
+  });
+});
+
+it("Does not emit an event when clicking on non interactive annotated tag", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" annotated=\'{"status":"active","interactive":false}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const cardTag = await page.find("z-book-card >>> .tags z-tag");
+  const clickEvent = await page.spyOnEvent("tagClick");
+
+  await cardTag.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).not.toHaveReceivedEvent();
+});
+
+it("Emits an event when clicking on interactive teacherVersion tag", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" teacher-version=\'{"status":"active","interactive":true}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const cardTag = await page.find("z-book-card >>> .tags z-tag");
+  const clickEvent = await page.spyOnEvent("tagClick");
+
+  await cardTag.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).toHaveReceivedEvent();
+  expect(clickEvent).toHaveReceivedEventDetail({
+    tag: "teacherVersion",
+    state: "active",
+  });
+});
+
+it("Does not emit an event when clicking on non interactive teacherVersion tag", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" teacher-version=\'{"status":"active","interactive":false}\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const cardTag = await page.find("z-book-card >>> .tags z-tag");
+  const clickEvent = await page.spyOnEvent("tagClick");
+
+  await cardTag.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).not.toHaveReceivedEvent();
+});
+
 it("Emits an event when clicking on the catalog link", async () => {
   const page = await newE2EPage({
     html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" tags=\'[{"label":"tag1","active":true}]\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
@@ -42,3 +115,16 @@ it("Emits an event when clicking on the ebook resource link", async () => {
   await page.waitForChanges();
   expect(clickEvent).toHaveReceivedEvent();
 });
+
+it("Emits an event when clicking on immersive reader description", async () => {
+  const page = await newE2EPage({
+    html: '<z-book-card variant="landscape" cover="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808899866.jpg" authors="Alessandro Barbero Chiara Frugoni Carla Sclarandis" opera-title="La storia racconta" volume-title="Volume 1. Il medioevo" isbn="9788808563002" tags=\'[{"label":"tag1","active":true}]\' adoption="true" catalog-url="prova" ebook-url="prova"></z-book-card>',
+  });
+  const immersiveReaderLink = await page.find("z-book-card >>> .ebook .immersive-reader");
+  const clickEvent = await page.spyOnEvent("immersiveReaderClick");
+
+  await immersiveReaderLink.click();
+
+  await page.waitForChanges();
+  expect(clickEvent).toHaveReceivedEvent();
+});
diff --git a/src/pages/book-cards.html b/src/pages/book-cards.html
index 38c826f55..f11ab64fe 100644
--- a/src/pages/book-cards.html
+++ b/src/pages/book-cards.html
@@ -78,9 +78,9 @@ <h2>Landscape Variant</h2>
         opera-title="Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro"
         volume-title="Volume 3 con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor"
         isbn="9788808930552 9788808930552 9788808930552 9788808930552 9788808930552 9788808930552 9788808930552"
-        edi="active"
-        annotated="disabled"
-        teacher-version="active"
+        edi='{"status":"active","interactive":true}'
+        annotated='{"status":"disabled","interactive":true}'
+        teacher-version='{"status":"active","interactive":false}'
         adoption="true"
         catalog-url="https://www.zanichelli.it"
         ebook-url="https://my.zanichelli.it"
@@ -96,6 +96,7 @@ <h2>Landscape Variant</h2>
         isbn="9788808930552"
         ebook-url="https://my.zanichelli.it"
       >
+        <div slot="ebook">EBOOK SLOT</div>
       </z-book-card>
     </div>
   </body>

From 56e40e95dd00de6d8826ca309625b194c8cb4bba Mon Sep 17 00:00:00 2001
From: Valentina Pasquino <vpasquino@zanichelli.it>
Date: Tue, 26 Nov 2024 16:23:56 +0100
Subject: [PATCH 02/26] feat!: tags, storybook, flexible app

---
 .../z-book-card-app/index.stories.ts          |  2 +-
 .../book-card/z-book-card-app/index.tsx       |  1 +
 .../book-card/z-book-card-app/styles.css      | 13 +++++-
 .../book-card/z-book-card/index.stories.ts    | 46 ++++++++++---------
 .../book-card/z-book-card/index.tsx           | 12 +++--
 .../book-card/z-book-card/styles.css          |  9 +++-
 src/pages/book-cards.html                     | 36 +++++++++++++--
 7 files changed, 85 insertions(+), 34 deletions(-)

diff --git a/src/components/book-card/z-book-card-app/index.stories.ts b/src/components/book-card/z-book-card-app/index.stories.ts
index 192bc01bf..cc980941b 100644
--- a/src/components/book-card/z-book-card-app/index.stories.ts
+++ b/src/components/book-card/z-book-card-app/index.stories.ts
@@ -10,7 +10,7 @@ import "./index";
 type ZBookCardAppStoriesArgs = ZBookCardApp;
 
 const StoryMeta = {
-  title: "ZBookCardApp",
+  title: "ZBookCard/ZBookCardApp",
   component: "z-book-card-app",
   argTypes: {},
   args: {
diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 6f7a5b60c..276207ff6 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -73,6 +73,7 @@ export class ZBookCardApp {
         <a
           class="z-link z-link-icon"
           href={this.link}
+          aria-label={this.name}
         >
           <z-icon
             name="chevron-right"
diff --git a/src/components/book-card/z-book-card-app/styles.css b/src/components/book-card/z-book-card-app/styles.css
index 100c48d08..ea5f2143b 100755
--- a/src/components/book-card/z-book-card-app/styles.css
+++ b/src/components/book-card/z-book-card-app/styles.css
@@ -1,7 +1,16 @@
+:host {
+  display: block;
+  width: inherit;
+  min-width: 300px;
+  height: inherit;
+  min-height: 32px;
+  background-color: var(--color-surface01);
+}
+
 :host > div {
   display: flex;
-  width: 315px;
-  height: 47px;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
diff --git a/src/components/book-card/z-book-card/index.stories.ts b/src/components/book-card/z-book-card/index.stories.ts
index f5636399e..73aa9d703 100644
--- a/src/components/book-card/z-book-card/index.stories.ts
+++ b/src/components/book-card/z-book-card/index.stories.ts
@@ -13,7 +13,7 @@ type ZBookCardStoriesArgs = ZBookCard & {
 };
 
 const StoryMeta = {
-  title: "ZBookCard",
+  title: "ZBookCard/ZBookCard",
   component: "z-book-card",
   argTypes: {
     variant: {
@@ -24,24 +24,18 @@ const StoryMeta = {
     },
     edi: {
       control: {
-        type: "inline-radio",
+        type: "object",
       },
-      // TODO: FIX!!
-      options: [...Object.values(BookCardTagStatus), null],
     },
     annotated: {
       control: {
-        type: "inline-radio",
+        type: "object",
       },
-      // TODO: FIX!!
-      options: [...Object.values(BookCardTagStatus), null],
     },
     teacherVersion: {
       control: {
-        type: "inline-radio",
+        type: "object",
       },
-      // TODO: FIX!!
-      options: [...Object.values(BookCardTagStatus), null],
     },
     theme: {
       control: {
@@ -59,9 +53,9 @@ const StoryMeta = {
     isbn: "9788808930552",
     isbnLabel: "(ed. cartacea)",
     adoption: true,
-    // edi: BookCardTagStatus.ACTIVE,
-    // annotated: BookCardTagStatus.ACTIVE,
-    // teacherVersion: BookCardTagStatus.DISABLED,
+    edi: {status: BookCardTagStatus.ACTIVE, interactive: true},
+    annotated: {status: BookCardTagStatus.DISABLED, interactive: true},
+    teacherVersion: {status: BookCardTagStatus.ACTIVE, interactive: false},
     catalogUrl: "https://www.zanichelli.it/ricerca/prodotti/matematica-multimediale-blu3ed?qid=9788808710932",
     ebookUrl: "https://www.zanichelli.it/ricerca",
     fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
@@ -84,9 +78,9 @@ export const Card = {
       volume-title=${args.volumeTitle}
       isbn=${args.isbn}
       isbn-label=${args.isbnLabel}
-      edi=${args.edi}
-      annotated=${args.annotated}
-      teacher-version=${args.teacherVersion}
+      edi=${JSON.stringify(args.edi)}
+      annotated=${JSON.stringify(args.annotated)}
+      teacher-version=${JSON.stringify(args.teacherVersion)}
       adoption=${args.adoption}
       catalog-url=${args.catalogUrl}
       ebook-url=${args.ebookUrl}
@@ -106,9 +100,9 @@ export const WithSlottedContent = {
       volume-title=${args.volumeTitle}
       isbn=${args.isbn}
       isbn-label=${args.isbnLabel}
-      edi=${args.edi}
-      annotated=${args.annotated}
-      teacher-version=${args.teacherVersion}
+      edi=${JSON.stringify(args.edi)}
+      annotated=${JSON.stringify(args.annotated)}
+      teacher-version=${JSON.stringify(args.teacherVersion)}
       adoption=${args.adoption}
       catalog-url=${args.catalogUrl}
       ebook-url=${args.ebookUrl}
@@ -124,6 +118,13 @@ export const WithSlottedContent = {
           height="20"
         ></z-icon>
       </div>
+      <div slot="ebook">
+        <z-button
+          variant="secondary"
+          size="x-small"
+          >custom ebook button</z-button
+        >
+      </div>
       <div
         slot="apps"
         style="display: flex; flex-wrap: wrap"
@@ -133,27 +134,28 @@ export const WithSlottedContent = {
           name="Tutor di matematica"
           info="test test"
           link="http://localhost"
-          style="border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
           name="Esercizi"
           info="test test"
           link="http://localhost"
-          style="border-bottom: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-bottom: 1px solid #d6d6d6"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
           name="Mappe"
           info="test test"
           link="http://localhost"
-          style="border-right: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
           name="Scrittura"
           info="test test"
           link="http://localhost"
+          style="width:315px; height:47px;"
         ></z-book-card-app>
       </div>
     </z-book-card>`,
diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index ef11d8fc5..106849b2b 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -73,9 +73,14 @@ export class ZBookCard {
   @Prop()
   operaTitleHtmlTag?: string;
 
-  @State() ediTag;
-  @State() annotatedTag;
-  @State() teacherVersionTag;
+  @State()
+  ediTag;
+
+  @State()
+  annotatedTag;
+
+  @State()
+  teacherVersionTag;
 
   /** click on tag */
   @Event()
@@ -158,7 +163,6 @@ export class ZBookCard {
   }
 
   private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {
-    console.log(label, tag, id);
     return (
       <z-tag
         class={{[tag.status]: true, interactive: tag.interactive}}
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index c11af1496..8f06f3ded 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -87,7 +87,7 @@
 
           .isbn-tags-link-section {
             .isbn-tags-section {
-              margin-bottom: calc(var(--space-unit) * 2);
+              margin-bottom: var(--space-unit);
 
               .volume-title {
                 display: -webkit-box;
@@ -114,7 +114,7 @@
                 overflow: hidden;
                 height: 22px;
                 flex-flow: wrap;
-                margin-top: calc(var(--space-unit) / 2);
+                padding: calc(var(--space-unit) / 2) 0;
                 gap: var(--space-unit);
 
                 z-tag.active {
@@ -130,6 +130,11 @@
                 z-tag.interactive {
                   cursor: pointer;
                 }
+
+                z-tag:focus {
+                  box-shadow: var(--shadow-focus-primary);
+                  outline: none;
+                }
               }
             }
 
diff --git a/src/pages/book-cards.html b/src/pages/book-cards.html
index f11ab64fe..b5afe9916 100644
--- a/src/pages/book-cards.html
+++ b/src/pages/book-cards.html
@@ -48,25 +48,26 @@ <h2>Landscape Variant</h2>
             info="test test"
             link="http://localhost"
             laz="false"
-            style="border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Tutor di matematica"
             info="test test"
             link="http://localhost"
-            style="border-bottom: 1px solid #d6d6d6"
+            style="width: 315px; height: 47px; border-bottom: 1px solid #d6d6d6"
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Mappe"
             link="http://localhost"
-            style="border-right: 1px solid #d6d6d6"
+            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6"
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Scrittura"
             link="http://localhost"
+            style="width: 315px; height: 47px"
           ></z-book-card-app>
         </div>
       </z-book-card>
@@ -99,5 +100,34 @@ <h2>Landscape Variant</h2>
         <div slot="ebook">EBOOK SLOT</div>
       </z-book-card>
     </div>
+
+    <div>
+      <h2>App</h2>
+      <z-book-card-app
+        icon="https://placehold.co/24"
+        name="Risorse per l'insegnante"
+        info="test test"
+        link="http://localhost"
+        laz="false"
+      ></z-book-card-app>
+      <br />
+      <z-book-card-app
+        icon="https://placehold.co/24"
+        name="Risorse per l'insegnante"
+        info="test test"
+        link="http://localhost"
+        laz="false"
+        style="height: 64px; width: 500px"
+      ></z-book-card-app>
+      <br />
+      <z-book-card-app
+        icon="https://placehold.co/24"
+        name="Risorse per l'insegnante"
+        info="test test"
+        link="http://localhost"
+        laz="false"
+        style="height: 32px; width: 300px"
+      ></z-book-card-app>
+    </div>
   </body>
 </html>

From 87adc2f46b050127b9f92498978a0aa6b5080ee6 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Thu, 28 Nov 2024 14:29:12 +0100
Subject: [PATCH 03/26] feat!: add portrait card

---
 .../book-card/z-book-card/index.tsx           |  69 ++--
 .../book-card/z-book-card/styles.css          | 348 ++++++++++--------
 2 files changed, 221 insertions(+), 196 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 106849b2b..b40480513 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h} from "@stencil/core";
+import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from "@stencil/core";
 import {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from "../../../beans";
 
 /**
@@ -136,15 +136,6 @@ export class ZBookCard {
     this.immersiveReaderClick.emit();
   }
 
-  private renderCard(): HTMLDivElement {
-    switch (this.variant) {
-      case BookCardVariant.LANDSCAPE:
-        return this.renderLandscape();
-      case BookCardVariant.PORTRAIT:
-        return this.renderPortrait();
-    }
-  }
-
   private renderOperaTitle(): HTMLDivElement {
     const title = this.operaTitleHtmlTag
       ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`
@@ -273,23 +264,25 @@ export class ZBookCard {
     );
   }
 
-  private renderLandscape(): HTMLDivElement {
+  render(): HTMLZBookCardElement {
     return (
-      <Fragment>
+      <article
+        class={{
+          [this.variant]: true,
+        }}
+      >
         <div class="main-content">
           {this.renderCover()}
           <div class="card-info">
             <div class="book-data">
               <div class="authors-title-cta-section">
-                <div class="authors-title">
-                  <div
-                    class="authors body-4"
-                    aria-description="autori"
-                  >
-                    {this.authors}
-                  </div>
-                  {this.renderOperaTitle()}
+                <div
+                  class="authors body-4"
+                  aria-description="autori"
+                >
+                  {this.authors}
                 </div>
+                {this.renderOperaTitle()}
                 <slot name="cta"></slot>
               </div>
               <div class="isbn-tags-link-section">
@@ -336,15 +329,17 @@ export class ZBookCard {
                           <span class="laz">laZ</span> Ebook
                         </div>
                       </div>
-                      <div class="body-5">
-                        Anche nella versione libro liquido con{" "}
-                        <span
-                          class="body-5-sb immersive-reader"
-                          onClick={() => this.emitImmersiveReaderClick()}
-                        >
-                          strumento di lettura immersiva
-                        </span>
-                      </div>
+                      {this.variant === BookCardVariant.LANDSCAPE && (
+                        <div class="body-5">
+                          Anche nella versione libro liquido con{" "}
+                          <span
+                            class="body-5-sb immersive-reader"
+                            onClick={() => this.emitImmersiveReaderClick()}
+                          >
+                            strumento di lettura immersiva
+                          </span>
+                        </div>
+                      )}
                     </div>
                     <z-button
                       size={ControlSize.X_SMALL}
@@ -362,22 +357,6 @@ export class ZBookCard {
           </div>
         </div>
         <slot name="apps"></slot>
-      </Fragment>
-    );
-  }
-
-  private renderPortrait(): HTMLDivElement {
-    return <div class="wrapper"></div>;
-  }
-
-  render(): HTMLZBookCardElement {
-    return (
-      <article
-        class={{
-          [this.variant]: true,
-        }}
-      >
-        {this.renderCard()}
       </article>
     );
   }
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 8f06f3ded..89adfcf86 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -4,198 +4,244 @@
 }
 
 :host > article {
+  width: 304px;
+  min-height: 686px;
+  box-sizing: border-box;
+  padding: var(--space-unit) 0;
+  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);
-}
 
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host > article.landscape {
-    width: 635px;
-    min-height: 332px;
-    max-height: 428px;
-    box-sizing: border-box;
-    border: solid var(--border-size-medium) var(--color-surface03);
-    border-radius: var(--border-radius);
-
-    .main-content {
-      display: flex;
-      height: 296px;
-      padding: calc(var(--space-unit) * 2);
-      gap: calc(var(--space-unit) * 2);
+  .main-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--space-unit) * 2);
 
-      .cover {
-        display: flex;
-        overflow: hidden;
-        width: 221px;
-        border-radius: var(--border-radius);
-
-        img {
-          max-width: 100%;
-          max-height: 100%;
-          align-self: end;
-        }
+    .cover {
+      display: flex;
+      overflow: hidden;
+      height: 378px;
+      margin: 0 var(--space-unit);
+      border-radius: var(--border-radius);
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        align-self: end;
       }
+    }
 
-      .card-info {
+    .card-info {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-between;
+      margin: 0 var(--space-unit);
+      gap: calc(var(--space-unit) * 2);
+
+      .book-data {
         display: flex;
         flex: 1;
         flex-direction: column;
         justify-content: space-between;
-        gap: calc(var(--space-unit) * 2);
+        gap: var(--space-unit);
+
+        .authors-title-cta-section {
+          display: grid;
+          column-gap: calc(var(--space-unit) * 2);
+          grid-template-areas:
+            "authors authors"
+            "title cta";
+          grid-template-columns: auto 24px;
+
+          .authors {
+            display: -webkit-box;
+            overflow: hidden;
+            height: 20px;
+            margin-bottom: calc(var(--space-unit) / 2);
+            -webkit-box-orient: vertical;
+            grid-area: authors;
+            -webkit-line-clamp: 1;
+            line-clamp: 1;
+            text-overflow: ellipsis;
+          }
 
-        .book-data {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          justify-content: space-between;
+          .opera-title {
+            display: -webkit-box;
+            overflow: hidden;
+            height: 54px;
+            -webkit-box-orient: vertical;
+            grid-area: title;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            text-overflow: ellipsis;
+
+            * {
+              all: unset;
+            }
+          }
+        }
 
-          .authors-title-cta-section {
-            display: flex;
-            gap: calc(var(--space-unit) * 2);
-
-            .authors-title {
-              flex: 1;
-
-              .authors {
-                display: -webkit-box;
-                overflow: hidden;
-                height: 20px;
-                margin-bottom: calc(var(--space-unit) / 2);
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
-                line-clamp: 1;
-                text-overflow: ellipsis;
-              }
+        .isbn-tags-link-section {
+          .isbn-tags-section {
+            margin-bottom: var(--space-unit);
+
+            .volume-title {
+              display: -webkit-box;
+              overflow: hidden;
+              height: 20px;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+              line-clamp: 1;
+              text-overflow: ellipsis;
+            }
 
-              .opera-title {
-                display: -webkit-box;
-                overflow: hidden;
-                height: 54px;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                line-clamp: 2;
-                text-overflow: ellipsis;
-
-                * {
-                  all: unset;
-                }
-              }
+            .isbn {
+              display: -webkit-box;
+              overflow: hidden;
+              height: 20px;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+              line-clamp: 1;
+              text-overflow: ellipsis;
             }
-          }
 
-          .isbn-tags-link-section {
-            .isbn-tags-section {
-              margin-bottom: var(--space-unit);
-
-              .volume-title {
-                display: -webkit-box;
-                overflow: hidden;
-                height: 20px;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
-                line-clamp: 1;
-                text-overflow: ellipsis;
-              }
+            .tags {
+              display: flex;
+              overflow: hidden;
+              height: 22px;
+              flex-flow: wrap;
+              padding: calc(var(--space-unit) / 2) 0 var(--space-unit);
+              gap: var(--space-unit);
 
-              .isbn {
-                display: -webkit-box;
-                overflow: hidden;
-                height: 20px;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
-                line-clamp: 1;
-                text-overflow: ellipsis;
+              z-tag.active {
+                --z-tag-bg: var(--color-primary03);
+                --z-tag-text-color: var(--color-default-text);
               }
 
-              .tags {
-                display: flex;
-                overflow: hidden;
-                height: 22px;
-                flex-flow: wrap;
-                padding: calc(var(--space-unit) / 2) 0;
-                gap: var(--space-unit);
-
-                z-tag.active {
-                  --z-tag-bg: var(--color-primary03);
-                  --z-tag-text-color: var(--color-default-text);
-                }
-
-                z-tag.disabled {
-                  --z-tag-bg: var(--color-surface03);
-                  --z-tag-text-color: var(--color-default-text);
-                }
-
-                z-tag.interactive {
-                  cursor: pointer;
-                }
-
-                z-tag:focus {
-                  box-shadow: var(--shadow-focus-primary);
-                  outline: none;
-                }
+              z-tag.disabled {
+                --z-tag-bg: var(--color-surface03);
+                --z-tag-text-color: var(--color-default-text);
               }
-            }
 
-            .link-section {
-              display: flex;
-              height: 24px;
-              align-items: center;
-              justify-content: space-between;
-              gap: var(--space-unit);
+              z-tag.interactive {
+                cursor: pointer;
+              }
 
-              .adoption-tag {
-                padding: calc(var(--space-unit) / 2) var(--space-unit);
-                background-color: var(--green100);
-                border-radius: 100px;
-                text-transform: uppercase;
+              z-tag:focus {
+                box-shadow: var(--shadow-focus-primary);
+                outline: none;
               }
             }
           }
-        }
-
-        .ebook-container {
-          height: 76px;
 
-          .ebook {
+          .link-section {
             display: flex;
+            height: 24px;
             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);
 
-            .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);
+            .adoption-tag {
+              padding: calc(var(--space-unit) / 2) var(--space-unit);
+              background-color: var(--green100);
+              border-radius: 100px;
+              text-transform: uppercase;
+            }
+          }
+        }
+      }
 
-              .laz {
-                color: var(--red500);
-              }
+      .ebook-container {
+        height: 64px;
+
+        .ebook {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: calc(var(--space-unit) * 2) var(--space-unit);
+          background-color: var(--color-primary02);
+          border-radius: var(--border-radius);
+          gap: var(--space-unit);
+
+          .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);
+
+            .laz {
+              color: var(--red500);
             }
           }
         }
       }
     }
+  }
 
-    ::slotted([slot="apps"]) {
-      border-top: solid var(--border-size-small) var(--color-surface03);
-    }
+  ::slotted([slot="cta"]) {
+    grid-area: cta;
+  }
+
+  ::slotted([slot="apps"]) {
+    border-top: solid var(--border-size-small) var(--color-surface03);
   }
 }
 
-/* Desktop breakpoint */
+:host > article.landscape {
+  width: 635px;
+  min-height: 332px;
+  max-height: 428px;
+  padding: 0;
+
+  .main-content {
+    height: 296px;
+    flex-direction: row;
+    padding: calc(var(--space-unit) * 2);
+
+    .cover {
+      display: flex;
+      overflow: hidden;
+      width: 221px;
+      height: auto;
+      margin: 0;
+    }
+
+    .card-info {
+      margin: 0;
+
+      .book-data {
+        gap: unset;
 
-/*
-@media (min-width: 1152px) {
-} */
+        .authors-title-cta-section {
+          grid-template-areas:
+            "authors cta"
+            "title title";
 
-/* Wide breakpoint */
+          .authors {
+            margin-bottom: var(--space-unit);
+          }
+        }
 
-/* @media (min-width: 1366px) {
-} */
+        .isbn-tags-link-section {
+          .isbn-tags-section {
+            .tags {
+              padding: calc(var(--space-unit) / 2) 0;
+            }
+          }
+        }
+      }
+
+      .ebook-container {
+        height: 76px;
+
+        .ebook {
+          padding: var(--space-unit);
+        }
+      }
+    }
+  }
+}

From f1fefe9db7aba2dc74ad0f53a6ee98d0f6ab1c4d Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Thu, 28 Nov 2024 15:07:18 +0100
Subject: [PATCH 04/26] feat!: avoid css nesting to increase browsers
 compatibility

---
 .../book-card/z-book-card/styles.css          | 438 +++++++++---------
 1 file changed, 216 insertions(+), 222 deletions(-)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 89adfcf86..080156dd0 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -13,182 +13,180 @@
   border-radius: var(--border-radius);
   color: var(--color-default-text);
   font-family: var(--font-family-sans);
+}
+
+:host > article .main-content {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--space-unit) * 2);
+}
+
+:host > article .main-content .cover {
+  display: flex;
+  overflow: hidden;
+  height: 378px;
+  margin: 0 var(--space-unit);
+  border-radius: var(--border-radius);
+}
+
+:host > article .main-content .cover img {
+  max-width: 100%;
+  max-height: 100%;
+  align-self: end;
+}
+
+:host > article .main-content .card-info {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 var(--space-unit);
+  gap: calc(var(--space-unit) * 2);
+}
+
+:host > article .main-content .card-info .book-data {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section {
+  display: grid;
+  column-gap: calc(var(--space-unit) * 2);
+  grid-template-areas:
+    "authors authors"
+    "title cta";
+  grid-template-columns: auto 24px;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .authors {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: calc(var(--space-unit) / 2);
+  -webkit-box-orient: vertical;
+  grid-area: authors;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 54px;
+  -webkit-box-orient: vertical;
+  grid-area: title;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title * {
+  all: unset;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section {
+  margin-bottom: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .volume-title {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .isbn {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
+  display: flex;
+  overflow: hidden;
+  height: 22px;
+  flex-flow: wrap;
+  padding: calc(var(--space-unit) / 2) 0 var(--space-unit);
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.active {
+  --z-tag-bg: var(--color-primary03);
+  --z-tag-text-color: var(--color-default-text);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.disabled {
+  --z-tag-bg: var(--color-surface03);
+  --z-tag-text-color: var(--color-default-text);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.interactive {
+  cursor: pointer;
+}
 
-  .main-content {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--space-unit) * 2);
-
-    .cover {
-      display: flex;
-      overflow: hidden;
-      height: 378px;
-      margin: 0 var(--space-unit);
-      border-radius: var(--border-radius);
-
-      img {
-        max-width: 100%;
-        max-height: 100%;
-        align-self: end;
-      }
-    }
-
-    .card-info {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      justify-content: space-between;
-      margin: 0 var(--space-unit);
-      gap: calc(var(--space-unit) * 2);
-
-      .book-data {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: var(--space-unit);
-
-        .authors-title-cta-section {
-          display: grid;
-          column-gap: calc(var(--space-unit) * 2);
-          grid-template-areas:
-            "authors authors"
-            "title cta";
-          grid-template-columns: auto 24px;
-
-          .authors {
-            display: -webkit-box;
-            overflow: hidden;
-            height: 20px;
-            margin-bottom: calc(var(--space-unit) / 2);
-            -webkit-box-orient: vertical;
-            grid-area: authors;
-            -webkit-line-clamp: 1;
-            line-clamp: 1;
-            text-overflow: ellipsis;
-          }
-
-          .opera-title {
-            display: -webkit-box;
-            overflow: hidden;
-            height: 54px;
-            -webkit-box-orient: vertical;
-            grid-area: title;
-            -webkit-line-clamp: 2;
-            line-clamp: 2;
-            text-overflow: ellipsis;
-
-            * {
-              all: unset;
-            }
-          }
-        }
-
-        .isbn-tags-link-section {
-          .isbn-tags-section {
-            margin-bottom: var(--space-unit);
-
-            .volume-title {
-              display: -webkit-box;
-              overflow: hidden;
-              height: 20px;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
-              line-clamp: 1;
-              text-overflow: ellipsis;
-            }
-
-            .isbn {
-              display: -webkit-box;
-              overflow: hidden;
-              height: 20px;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
-              line-clamp: 1;
-              text-overflow: ellipsis;
-            }
-
-            .tags {
-              display: flex;
-              overflow: hidden;
-              height: 22px;
-              flex-flow: wrap;
-              padding: calc(var(--space-unit) / 2) 0 var(--space-unit);
-              gap: var(--space-unit);
-
-              z-tag.active {
-                --z-tag-bg: var(--color-primary03);
-                --z-tag-text-color: var(--color-default-text);
-              }
-
-              z-tag.disabled {
-                --z-tag-bg: var(--color-surface03);
-                --z-tag-text-color: var(--color-default-text);
-              }
-
-              z-tag.interactive {
-                cursor: pointer;
-              }
-
-              z-tag:focus {
-                box-shadow: var(--shadow-focus-primary);
-                outline: none;
-              }
-            }
-          }
-
-          .link-section {
-            display: flex;
-            height: 24px;
-            align-items: center;
-            justify-content: space-between;
-            gap: var(--space-unit);
-
-            .adoption-tag {
-              padding: calc(var(--space-unit) / 2) var(--space-unit);
-              background-color: var(--green100);
-              border-radius: 100px;
-              text-transform: uppercase;
-            }
-          }
-        }
-      }
-
-      .ebook-container {
-        height: 64px;
-
-        .ebook {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: calc(var(--space-unit) * 2) var(--space-unit);
-          background-color: var(--color-primary02);
-          border-radius: var(--border-radius);
-          gap: var(--space-unit);
-
-          .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);
-
-            .laz {
-              color: var(--red500);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  ::slotted([slot="cta"]) {
-    grid-area: cta;
-  }
-
-  ::slotted([slot="apps"]) {
-    border-top: solid var(--border-size-small) var(--color-surface03);
-  }
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section .adoption-tag {
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  background-color: var(--green100);
+  border-radius: 100px;
+  text-transform: uppercase;
+}
+
+:host > article .main-content .card-info .ebook-container {
+  height: 64px;
+}
+
+:host > article .main-content .card-info .ebook-container .ebook {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2) var(--space-unit);
+  background-color: var(--color-primary02);
+  border-radius: var(--border-radius);
+  gap: var(--space-unit);
+}
+
+:host > article .main-content .card-info .ebook-container .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 > article .main-content .card-info .ebook-container .ebook .app-name .laz {
+  color: var(--red500);
+}
+
+::slotted([slot="cta"]) {
+  grid-area: cta;
+}
+
+::slotted([slot="apps"]) {
+  border-top: solid var(--border-size-small) var(--color-surface03);
 }
 
 :host > article.landscape {
@@ -196,52 +194,48 @@
   min-height: 332px;
   max-height: 428px;
   padding: 0;
+}
+
+:host > article.landscape .main-content {
+  height: 296px;
+  flex-direction: row;
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host > article.landscape .main-content .cover {
+  display: flex;
+  overflow: hidden;
+  width: 221px;
+  height: auto;
+  margin: 0;
+}
+
+:host > article.landscape .main-content .card-info {
+  margin: 0;
+}
+
+:host > article.landscape .main-content .card-info .book-data {
+  gap: unset;
+}
+
+:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {
+  grid-template-areas:
+    "authors cta"
+    "title title";
+}
+
+:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section .authors {
+  margin-bottom: var(--space-unit);
+}
+
+:host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
+  padding: calc(var(--space-unit) / 2) 0;
+}
+
+:host > article.landscape .main-content .card-info .ebook-container {
+  height: 76px;
+}
 
-  .main-content {
-    height: 296px;
-    flex-direction: row;
-    padding: calc(var(--space-unit) * 2);
-
-    .cover {
-      display: flex;
-      overflow: hidden;
-      width: 221px;
-      height: auto;
-      margin: 0;
-    }
-
-    .card-info {
-      margin: 0;
-
-      .book-data {
-        gap: unset;
-
-        .authors-title-cta-section {
-          grid-template-areas:
-            "authors cta"
-            "title title";
-
-          .authors {
-            margin-bottom: var(--space-unit);
-          }
-        }
-
-        .isbn-tags-link-section {
-          .isbn-tags-section {
-            .tags {
-              padding: calc(var(--space-unit) / 2) 0;
-            }
-          }
-        }
-      }
-
-      .ebook-container {
-        height: 76px;
-
-        .ebook {
-          padding: var(--space-unit);
-        }
-      }
-    }
-  }
+:host > article.landscape .main-content .card-info .ebook-container .ebook {
+  padding: var(--space-unit);
 }

From f5c44b13f2d3cee4fea1ad84ad307b01f4b4419a Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Thu, 28 Nov 2024 15:51:37 +0100
Subject: [PATCH 05/26] feat!: add svg as css

---
 .../book-card/z-book-card/index.tsx           | 51 ++-----------------
 .../book-card/z-book-card/styles.css          |  8 +--
 2 files changed, 7 insertions(+), 52 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index b40480513..98e089699 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -212,55 +212,10 @@ export class ZBookCard {
 
   private renderLaZEbookLogo(): SVGElement {
     return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
+      <img
+        class="ebook-logo"
         aria-hidden="true"
-      >
-        <g clip-path="url(#clip0_11996_224)">
-          <path
-            d="M14.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"
-            fill="#E2011A"
-          />
-          <path
-            d="M15.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"
-            fill="white"
-          />
-          <path
-            d="M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z"
-            fill="black"
-          />
-          <path
-            d="M8.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"
-            fill="black"
-          />
-          <path
-            d="M4.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"
-            fill="black"
-          />
-          <path
-            d="M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z"
-            fill="white"
-          />
-          <path
-            d="M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z"
-            fill="white"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_11996_224">
-            <rect
-              width="19.326"
-              height="19.326"
-              fill="white"
-              transform="translate(0.169922 0.469604)"
-            />
-          </clipPath>
-        </defs>
-      </svg>
+      />
     );
   }
 
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 080156dd0..2f31bbe64 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -177,6 +177,10 @@
   gap: calc(var(--space-unit) / 2);
 }
 
+:host > article .main-content .card-info .ebook-container .ebook .app-name .ebook-logo {
+  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%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 > article .main-content .card-info .ebook-container .ebook .app-name .laz {
   color: var(--red500);
 }
@@ -224,10 +228,6 @@
     "title title";
 }
 
-:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section .authors {
-  margin-bottom: var(--space-unit);
-}
-
 :host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
   padding: calc(var(--space-unit) / 2) 0;
 }

From e9b685e1f4a0e173e75f83e602746d0b6a1a3273 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Thu, 28 Nov 2024 15:56:19 +0100
Subject: [PATCH 06/26] feat!: add cursor pointer

---
 src/components/book-card/z-book-card/index.tsx  | 1 +
 src/components/book-card/z-book-card/styles.css | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 98e089699..3b904dd04 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -3,6 +3,7 @@ import {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, Contr
 
 /**
  * @slot cta - to the right of authors and title (e.g. bookmark icon)
+ * @slot ebook - main action slot on the card (as default, it shows laZ ebook link)
  * @slot apps - list of card-related apps
  */
 @Component({
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 2f31bbe64..9806eb5f6 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -185,6 +185,10 @@
   color: var(--red500);
 }
 
+:host > article .main-content .card-info .ebook-container .ebook .immersive-reader {
+  cursor: pointer;
+}
+
 ::slotted([slot="cta"]) {
   grid-area: cta;
 }

From 20ce5d26f1698bc5e1557250f424f164420a55b9 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Thu, 28 Nov 2024 16:42:45 +0100
Subject: [PATCH 07/26] feat!: add clickable app-name area

---
 .../book-card/z-book-card-app/index.tsx       |  7 +-
 .../book-card/z-book-card-app/styles.css      | 81 ++++++++++---------
 .../book-card/z-book-card/index.tsx           |  2 +-
 3 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 276207ff6..4fd3ef87c 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -50,7 +50,10 @@ export class ZBookCardApp {
   render(): HTMLZBookCardAppElement {
     return (
       <div>
-        <div class="app">
+        <a
+          class="app z-link"
+          href={this.link}
+        >
           <img
             src={this.logo}
             alt=""
@@ -59,7 +62,7 @@ export class ZBookCardApp {
             {this.renderLaz()}
             {this.name}
           </div>
-        </div>
+        </a>
         {this.info && (
           <z-info-reveal
             icon="info"
diff --git a/src/components/book-card/z-book-card-app/styles.css b/src/components/book-card/z-book-card-app/styles.css
index ea5f2143b..028c25c12 100755
--- a/src/components/book-card/z-book-card-app/styles.css
+++ b/src/components/book-card/z-book-card-app/styles.css
@@ -16,41 +16,50 @@
   justify-content: space-between;
   padding: var(--space-unit) calc(var(--space-unit) * 1.5);
   gap: calc(var(--space-unit) * 2);
+}
+
+:host > div .app {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-unit);
+}
+
+:host > div .app.z-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+:host > div .app.z-link:focus {
+  text-decoration: none;
+}
+
+:host > div .app img {
+  width: 24px;
+  height: 24px;
+}
+
+:host > div .app .name {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  font-family: var(--font-family-serif);
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > div .app .name .laz {
+  color: var(--red500);
+}
+
+:host > div z-info-reveal {
+  --z-info-reveal-panel-width: 250px;
+
+  font-family: var(--font-family-sans);
 
-  .app {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    gap: var(--space-unit);
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
-
-    .name {
-      display: -webkit-box;
-      overflow: hidden;
-      height: 20px;
-      -webkit-box-orient: vertical;
-      font-family: var(--font-family-serif);
-      -webkit-line-clamp: 1;
-      line-clamp: 1;
-      text-overflow: ellipsis;
-
-      .laz {
-        color: var(--red500);
-      }
-    }
-  }
-
-  z-info-reveal {
-    --z-info-reveal-panel-width: 250px;
-
-    font-family: var(--font-family-sans);
-
-    --color-surface05: var(--color-surface01);
-    --color-text-inverse: var(--color-default-text);
-    --color-inverse-icon: var(--color-primary01);
-  }
+  --color-surface05: var(--color-surface01);
+  --color-text-inverse: var(--color-default-text);
+  --color-inverse-icon: var(--color-primary01);
 }
diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 3b904dd04..d8049e79d 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -211,7 +211,7 @@ export class ZBookCard {
     );
   }
 
-  private renderLaZEbookLogo(): SVGElement {
+  private renderLaZEbookLogo(): HTMLImageElement {
     return (
       <img
         class="ebook-logo"

From 91fa5ff7c25d4c1da0163654f4c92b0ecde2d102 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 09:26:06 +0100
Subject: [PATCH 08/26] feat!: add `aria-label` for card-app

---
 src/components/book-card/z-book-card-app/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 4fd3ef87c..68d31a9d1 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -53,6 +53,7 @@ export class ZBookCardApp {
         <a
           class="app z-link"
           href={this.link}
+          aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
         >
           <img
             src={this.logo}
@@ -76,7 +77,7 @@ export class ZBookCardApp {
         <a
           class="z-link z-link-icon"
           href={this.link}
-          aria-label={this.name}
+          aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
         >
           <z-icon
             name="chevron-right"

From 8ec73e51ed9d78201145c40b7cbeac4fa46ff861 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 11:34:05 +0100
Subject: [PATCH 09/26] feat!: add optional card-app logo

---
 src/components.d.ts                                |  2 +-
 src/components/book-card/z-book-card-app/index.tsx | 12 +++++++-----
 src/components/book-card/z-book-card/readme.md     |  9 +++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 39129bd71..35d0a5ee1 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -329,7 +329,7 @@ export namespace Components {
         /**
           * App logo url
          */
-        "logo": string;
+        "logo"?: string;
         /**
           * App name
          */
diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 68d31a9d1..3bcf7cb17 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -13,7 +13,7 @@ export class ZBookCardApp {
    * App logo url
    */
   @Prop()
-  logo: string;
+  logo?: string;
 
   /**
    * App name
@@ -55,10 +55,12 @@ export class ZBookCardApp {
           href={this.link}
           aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
         >
-          <img
-            src={this.logo}
-            alt=""
-          />
+          {this.logo && (
+            <img
+              src={this.logo}
+              alt=""
+            />
+          )}
           <div class="name body-4-sb">
             {this.renderLaz()}
             {this.name}
diff --git a/src/components/book-card/z-book-card/readme.md b/src/components/book-card/z-book-card/readme.md
index b35c3761d..8873e58f6 100644
--- a/src/components/book-card/z-book-card/readme.md
+++ b/src/components/book-card/z-book-card/readme.md
@@ -38,10 +38,11 @@
 
 ## Slots
 
-| Slot     | Description                                            |
-| -------- | ------------------------------------------------------ |
-| `"apps"` | list of card-related apps                              |
-| `"cta"`  | to the right of authors and title (e.g. bookmark icon) |
+| Slot      | Description                                                        |
+| --------- | ------------------------------------------------------------------ |
+| `"apps"`  | list of card-related apps                                          |
+| `"cta"`   | to the right of authors and title (e.g. bookmark icon)             |
+| `"ebook"` | main action slot on the card (as default, it shows laZ ebook link) |
 
 
 ## Dependencies

From f81a8792a3de5ccf74aff72bda6b00545b6f09ec Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 11:44:02 +0100
Subject: [PATCH 10/26] feat!: emit tag event when pressing Enter key

---
 src/components/book-card/z-book-card/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index d8049e79d..607e496b1 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -167,6 +167,14 @@ export class ZBookCard {
             state: tag.status,
           })
         }
+        onKeyUp={(e: KeyboardEvent) =>
+          tag.interactive &&
+          e.key === "Enter" &&
+          this.emitTagClick({
+            tag: id,
+            state: tag.status,
+          })
+        }
       >
         {label}
       </z-tag>

From 25dd59576fdea6fb22e2a6813ae33a33f0765849 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 12:00:28 +0100
Subject: [PATCH 11/26] feat!: emit event when clicking card-app link

---
 src/components.d.ts                           | 19 +++++++++++++++++++
 .../book-card/z-book-card-app/index.tsx       | 12 +++++++++++-
 .../book-card/z-book-card-app/readme.md       |  7 +++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 35d0a5ee1..c0d81291c 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2147,6 +2147,10 @@ export interface ZBookCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZBookCardElement;
 }
+export interface ZBookCardAppCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZBookCardAppElement;
+}
 export interface ZBookCardDeprecatedCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZBookCardDeprecatedElement;
@@ -2480,7 +2484,18 @@ declare global {
         prototype: HTMLZBookCardElement;
         new (): HTMLZBookCardElement;
     };
+    interface HTMLZBookCardAppElementEventMap {
+        "appClick": any;
+    }
     interface HTMLZBookCardAppElement extends Components.ZBookCardApp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLZBookCardAppElement: {
         prototype: HTMLZBookCardAppElement;
@@ -3893,6 +3908,10 @@ declare namespace LocalJSX {
           * App name
          */
         "name"?: string;
+        /**
+          * click on app link
+         */
+        "onAppClick"?: (event: ZBookCardAppCustomEvent<any>) => void;
     }
     /**
      * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 3bcf7cb17..3c0234c5b 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, Prop, h} from "@stencil/core";
+import {Component, Element, Event, EventEmitter, Prop, h} from "@stencil/core";
 import {ControlSize, InfoRevealPosition} from "../../../beans";
 
 @Component({
@@ -39,6 +39,14 @@ export class ZBookCardApp {
   @Prop()
   info?: string;
 
+  /** click on app link */
+  @Event()
+  appClick: EventEmitter;
+
+  private emitAppClick(): void {
+    this.appClick.emit();
+  }
+
   private renderLaz(): HTMLSpanElement | null {
     if (this.laz) {
       return <span class="laz">laZ </span>;
@@ -54,6 +62,7 @@ export class ZBookCardApp {
           class="app z-link"
           href={this.link}
           aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
+          onClick={() => this.emitAppClick()}
         >
           {this.logo && (
             <img
@@ -80,6 +89,7 @@ export class ZBookCardApp {
           class="z-link z-link-icon"
           href={this.link}
           aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
+          onClick={() => this.emitAppClick()}
         >
           <z-icon
             name="chevron-right"
diff --git a/src/components/book-card/z-book-card-app/readme.md b/src/components/book-card/z-book-card-app/readme.md
index 2ecd53e1b..3a09bf4ce 100644
--- a/src/components/book-card/z-book-card-app/readme.md
+++ b/src/components/book-card/z-book-card-app/readme.md
@@ -16,6 +16,13 @@
 | `name`   | `name`    | App name                                | `string`  | `undefined` |
 
 
+## Events
+
+| Event      | Description       | Type               |
+| ---------- | ----------------- | ------------------ |
+| `appClick` | click on app link | `CustomEvent<any>` |
+
+
 ## Dependencies
 
 ### Depends on

From bb4774b7cb9adcc40ba52384f5dcb1dd493129d5 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 12:27:36 +0100
Subject: [PATCH 12/26] feat!: add `target` to app link

---
 src/components/book-card/z-book-card-app/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index 3c0234c5b..e76645d68 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -63,6 +63,7 @@ export class ZBookCardApp {
           href={this.link}
           aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
           onClick={() => this.emitAppClick()}
+          target="_blank"
         >
           {this.logo && (
             <img
@@ -90,6 +91,7 @@ export class ZBookCardApp {
           href={this.link}
           aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
           onClick={() => this.emitAppClick()}
+          target="_blank"
         >
           <z-icon
             name="chevron-right"

From 9a9feca384177315864ac94319c2741e4f6b3056 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 12:39:52 +0100
Subject: [PATCH 13/26] feat!: remove apps slot border

---
 src/components/book-card/z-book-card/styles.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 9806eb5f6..e3111277c 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -193,10 +193,6 @@
   grid-area: cta;
 }
 
-::slotted([slot="apps"]) {
-  border-top: solid var(--border-size-small) var(--color-surface03);
-}
-
 :host > article.landscape {
   width: 635px;
   min-height: 332px;

From fde0954dad03d4a83d7b8997b2b627c4b08b78dc Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Fri, 29 Nov 2024 12:58:00 +0100
Subject: [PATCH 14/26] feat!: update ebook section background

---
 src/components/book-card/z-book-card/styles.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index e3111277c..798d3c59a 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -40,7 +40,6 @@
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
-  margin: 0 var(--space-unit);
   gap: calc(var(--space-unit) * 2);
 }
 
@@ -49,6 +48,7 @@
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
+  margin: 0 var(--space-unit);
   gap: var(--space-unit);
 }
 
@@ -214,11 +214,8 @@
   margin: 0;
 }
 
-:host > article.landscape .main-content .card-info {
-  margin: 0;
-}
-
 :host > article.landscape .main-content .card-info .book-data {
+  margin: 0;
   gap: unset;
 }
 

From b159373ae381fcea5e2497b9d0a238666c7f2f3e Mon Sep 17 00:00:00 2001
From: Valentina Pasquino <vpasquino@zanichelli.it>
Date: Mon, 2 Dec 2024 10:21:52 +0100
Subject: [PATCH 15/26] feat!: book-cards.html

---
 src/pages/book-cards.html | 75 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/pages/book-cards.html b/src/pages/book-cards.html
index b5afe9916..2c3c213ce 100644
--- a/src/pages/book-cards.html
+++ b/src/pages/book-cards.html
@@ -101,6 +101,81 @@ <h2>Landscape Variant</h2>
       </z-book-card>
     </div>
 
+    <h2>Portrait Variant</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: 16px">
+      <z-book-card
+        variant="portrait"
+        cover="https://s3-eu-west-1.amazonaws.com/staticmy.zanichelli.it/copertine/dashboard/m40066.9788808930552.jpg"
+        authors="Massimo Bergamini, Anna Trifone, Graziella Barozzi"
+        opera-title="Matematica.azzurro"
+        volume-title="Volume 3 con Tutor"
+        isbn="9788808930552"
+        catalog-url="https://www.zanichelli.it"
+        ebook-url="https://my.zanichelli.it"
+      >
+        <div
+          slot="apps"
+          style="display: flex; flex-wrap: wrap"
+        >
+          <z-book-card-app
+            icon="https://placehold.co/24"
+            name="Risorse per l'insegnante"
+            info="test test"
+            link="http://localhost"
+            laz="false"
+            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+          ></z-book-card-app>
+          <z-book-card-app
+            icon="https://placehold.co/24"
+            name="Tutor di matematica"
+            info="test test"
+            link="http://localhost"
+            style="width: 315px; height: 47px; border-bottom: 1px solid #d6d6d6"
+          ></z-book-card-app>
+          <z-book-card-app
+            icon="https://placehold.co/24"
+            name="Mappe"
+            link="http://localhost"
+            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6"
+          ></z-book-card-app>
+          <z-book-card-app
+            icon="https://placehold.co/24"
+            name="Scrittura"
+            link="http://localhost"
+            style="width: 315px; height: 47px"
+          ></z-book-card-app>
+        </div>
+      </z-book-card>
+
+      <z-book-card
+        variant="portrait"
+        cover="https://s3-eu-west-1.amazonaws.com/staticmy.zanichelli.it/copertine/dashboard/m40001.9788808404619.jpg"
+        authors="Massimo Bergamini, Anna Trifone, Graziella Barozzi, Massimo Bergamini, Anna Trifone, Graziella Barozzi"
+        opera-title="Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro Matematica.azzurro"
+        volume-title="Volume 3 con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor con Tutor"
+        isbn="9788808930552 9788808930552 9788808930552 9788808930552 9788808930552 9788808930552 9788808930552"
+        edi='{"status":"active","interactive":true}'
+        annotated='{"status":"disabled","interactive":true}'
+        teacher-version='{"status":"active","interactive":false}'
+        adoption="true"
+        catalog-url="https://www.zanichelli.it"
+        ebook-url="https://my.zanichelli.it"
+      >
+      </z-book-card>
+
+      <z-book-card
+        variant="portrait"
+        cover="http://dizionari.zanichelli.it/images/opere/ZING2024/ZING2024_copertina.jpg"
+        authors="Massimo Bergamini, Anna Trifone, Graziella Barozzi"
+        opera-title="Matematica.azzurro"
+        volume-title="Volume 3 con Tutor"
+        isbn="9788808930552"
+        ebook-url="https://my.zanichelli.it"
+      >
+        <div slot="ebook">EBOOK SLOT</div>
+      </z-book-card>
+    </div>
+
     <div>
       <h2>App</h2>
       <z-book-card-app

From decff6dbd9b6fe1123e9be4faeba981fc9defe19 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Mon, 2 Dec 2024 12:42:26 +0100
Subject: [PATCH 16/26] feat!: fix z-index for info-reveal panel

---
 src/components/z-info-reveal/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/z-info-reveal/styles.css b/src/components/z-info-reveal/styles.css
index 01553835b..9e934d17f 100644
--- a/src/components/z-info-reveal/styles.css
+++ b/src/components/z-info-reveal/styles.css
@@ -75,6 +75,7 @@ button:focus:focus-visible {
 
 .z-info-reveal-panel {
   position: absolute;
+  z-index: 99;
   display: flex;
   width: var(--z-info-reveal-panel-width);
   height: fit-content;

From 5c4ba4a1dade4b2856ccc2bb18994cca2b18924b Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Mon, 2 Dec 2024 16:15:36 +0100
Subject: [PATCH 17/26] feat!: fix "immersive reading" accessibility

---
 src/components/book-card/z-book-card/index.tsx  | 7 ++++---
 src/components/book-card/z-book-card/styles.css | 4 ----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 607e496b1..3f41d6a88 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -296,12 +296,13 @@ export class ZBookCard {
                       {this.variant === BookCardVariant.LANDSCAPE && (
                         <div class="body-5">
                           Anche nella versione libro liquido con{" "}
-                          <span
-                            class="body-5-sb immersive-reader"
+                          <button
+                            class="body-5-sb immersive-reader z-link"
                             onClick={() => this.emitImmersiveReaderClick()}
+                            tabIndex={0}
                           >
                             strumento di lettura immersiva
-                          </span>
+                          </button>
                         </div>
                       )}
                     </div>
diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 798d3c59a..02474c0d1 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -185,10 +185,6 @@
   color: var(--red500);
 }
 
-:host > article .main-content .card-info .ebook-container .ebook .immersive-reader {
-  cursor: pointer;
-}
-
 ::slotted([slot="cta"]) {
   grid-area: cta;
 }

From 730720b21d1b6e302cf5014fd51af287e2f38dd8 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Mon, 2 Dec 2024 16:18:07 +0100
Subject: [PATCH 18/26] feat!: remove renderLaZEbookLogo method

---
 src/components/book-card/z-book-card/index.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 3f41d6a88..083c2c847 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -219,15 +219,6 @@ export class ZBookCard {
     );
   }
 
-  private renderLaZEbookLogo(): HTMLImageElement {
-    return (
-      <img
-        class="ebook-logo"
-        aria-hidden="true"
-      />
-    );
-  }
-
   render(): HTMLZBookCardElement {
     return (
       <article
@@ -265,7 +256,7 @@ export class ZBookCard {
                     {this.catalogUrl && (
                       <a
                         href={this.catalogUrl}
-                        class="z-link z-link-icon body-4-sb immersive-reader"
+                        class="z-link z-link-icon body-4-sb"
                         onClick={() => this.emitCatalogClick()}
                       >
                         Scheda catalogo
@@ -288,7 +279,10 @@ export class ZBookCard {
                   <div class="ebook">
                     <div>
                       <div class="app-name">
-                        {this.renderLaZEbookLogo()}
+                        <img
+                          class="ebook-logo"
+                          aria-hidden="true"
+                        />
                         <div class="body-4-sb">
                           <span class="laz">laZ</span> Ebook
                         </div>

From ddc9450d76622ad352db12d0a9227e142f0f1c3e Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 10:53:07 +0100
Subject: [PATCH 19/26] feat!: fix portrait `column-gap`

---
 src/components/book-card/z-book-card/styles.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index 02474c0d1..c9ce077f9 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -54,7 +54,7 @@
 
 :host > article .main-content .card-info .book-data .authors-title-cta-section {
   display: grid;
-  column-gap: calc(var(--space-unit) * 2);
+  column-gap: var(--space-unit);
   grid-template-areas:
     "authors authors"
     "title cta";
@@ -216,6 +216,7 @@
 }
 
 :host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {
+  column-gap: calc(var(--space-unit) * 2);
   grid-template-areas:
     "authors cta"
     "title title";

From 2d3029ab36050b44396070dee3d111e8f38a0690 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 11:10:36 +0100
Subject: [PATCH 20/26] feat!: add migration guide

---
 MIGRATION.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index 50a65c8c2..ce4609044 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -9,6 +9,10 @@ Ogni volta che viene implementato un **breaking change** su un componente, la su
 
 Indice delle breaking changes divise per numero di versione in cui sono state introdotte.
 
+- [v17.0.0](#v1700)
+
+  - [Refactor componente `z-book-card`](#refactor-componente-zbookcard)
+
 - [v16.0.0](#v1600)
 
   - [Nuova versione componente ZAppHeader](#nuova-versione-componente-zappheader)
@@ -105,6 +109,27 @@ Indice delle breaking changes divise per numero di versione in cui sono state in
   - [ZButtonFilter (deprecato)](#zbuttonfilter-deprecato)
   - [ZChip (rifattorizzato)](#zchip-rifattorizzato)
 
+## v17.0.0
+
+### Refactor componente `ZBookCard`
+
+La versione attuale del componente è stata mantenuta con il nuovo nome `z-book-card-deprecated`.
+La nuova versione è disponibile in due varianti, `landscape` e `portrait`, che sono i valori da passare alla prop `variant`.
+Le prop `ribbon`, `ribbonIcon`, `ribbonInteractive`, `borderless` sono state eliminate.
+La prop `operaTitleTag` cambia nome in `operaTitleHtmlTag`.
+Sono state aggiunte le prop `edi`, `annotated`, `teacherVersion` per gestire i tag: accettano un oggetto di questo tipo
+
+```
+{
+  status: "active"|"disabled";
+  interactive: boolean;
+}
+```
+
+Dove `status` definisce lo stile del tag, mentre `interactive` gestisce il click dell'utente.
+È stata aggiunta la prop `adoption` che gestisce il badge dei libri adottati.
+Le nuove prop `catalogUrl` e `ebookUrl` gestiscono rispettivamente i link al catalogo Zanichelli e al libro digitale.
+
 ## v16.0.0
 
 ### Nuova versione componente ZAppHeader

From 38cca870ce1bb9c877064aa4bc3c56e763966256 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 11:53:46 +0100
Subject: [PATCH 21/26] feat!: fix tags box-shadow visibility

---
 src/components/book-card/z-book-card/styles.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index c9ce077f9..eb0d51054 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -117,7 +117,9 @@
   overflow: hidden;
   height: 22px;
   flex-flow: wrap;
-  padding: calc(var(--space-unit) / 2) 0 var(--space-unit);
+  align-items: center;
+  padding: var(--space-unit);
+  margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1) 0;
   gap: var(--space-unit);
 }
 
@@ -223,7 +225,7 @@
 }
 
 :host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
-  padding: calc(var(--space-unit) / 2) 0;
+  margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1);
 }
 
 :host > article.landscape .main-content .card-info .ebook-container {

From 7ba1ef54d63d2de93628cd449143209d2fbd88e5 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 14:09:45 +0100
Subject: [PATCH 22/26] feat!: fix Storybook book-card with apps

---
 src/components/book-card/z-book-card/index.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.stories.ts b/src/components/book-card/z-book-card/index.stories.ts
index 73aa9d703..22699c81f 100644
--- a/src/components/book-card/z-book-card/index.stories.ts
+++ b/src/components/book-card/z-book-card/index.stories.ts
@@ -127,7 +127,7 @@ export const WithSlottedContent = {
       </div>
       <div
         slot="apps"
-        style="display: flex; flex-wrap: wrap"
+        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6"
       >
         <z-book-card-app
           icon="https://placehold.co/24"
@@ -148,7 +148,7 @@ export const WithSlottedContent = {
           name="Mappe"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-right: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"

From ebd512d90f0b197aaed6360ac06ee4a37625cb06 Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 15:50:50 +0100
Subject: [PATCH 23/26] feat!: fix host border-radius

---
 src/components/book-card/z-book-card/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/book-card/z-book-card/styles.css b/src/components/book-card/z-book-card/styles.css
index eb0d51054..363bcb67a 100755
--- a/src/components/book-card/z-book-card/styles.css
+++ b/src/components/book-card/z-book-card/styles.css
@@ -1,6 +1,7 @@
 :host {
   display: block;
   max-width: fit-content;
+  border-radius: var(--border-radius);
 }
 
 :host > article {

From fe12e549c77cf074be0a6131531d7f87a6cae8af Mon Sep 17 00:00:00 2001
From: FrancescoSanti <fsanti@zanichelli.it>
Date: Tue, 3 Dec 2024 17:00:48 +0100
Subject: [PATCH 24/26] feat!: add css props to change `z-book-card-app`
 padding

---
 src/components.d.ts                           | 20 +++++++++++++++++++
 .../z-book-card-app/index.stories.ts          | 18 +++++++++++++++--
 .../book-card/z-book-card-app/index.tsx       |  5 +++++
 .../book-card/z-book-card-app/readme.md       |  4 ++++
 .../book-card/z-book-card-app/styles.css      |  3 ++-
 .../book-card/z-book-card/index.stories.ts    |  2 +-
 6 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index c0d81291c..9c8593012 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -313,6 +313,11 @@ export namespace Components {
          */
         "volumeTitle"?: string;
     }
+    /**
+     * ZBookCardApp component
+     * @cssprop --z-book-card-app-padding-x - set left and right padding
+     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
+     */
     interface ZBookCardApp {
         /**
           * Info text to show as inforeveal
@@ -2487,6 +2492,11 @@ declare global {
     interface HTMLZBookCardAppElementEventMap {
         "appClick": any;
     }
+    /**
+     * ZBookCardApp component
+     * @cssprop --z-book-card-app-padding-x - set left and right padding
+     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
+     */
     interface HTMLZBookCardAppElement extends Components.ZBookCardApp, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3887,6 +3897,11 @@ declare namespace LocalJSX {
          */
         "volumeTitle"?: string;
     }
+    /**
+     * ZBookCardApp component
+     * @cssprop --z-book-card-app-padding-x - set left and right padding
+     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
+     */
     interface ZBookCardApp {
         /**
           * Info text to show as inforeveal
@@ -6068,6 +6083,11 @@ declare module "@stencil/core" {
             "z-aria-alert": LocalJSX.ZAriaAlert & JSXBase.HTMLAttributes<HTMLZAriaAlertElement>;
             "z-avatar": LocalJSX.ZAvatar & JSXBase.HTMLAttributes<HTMLZAvatarElement>;
             "z-book-card": LocalJSX.ZBookCard & JSXBase.HTMLAttributes<HTMLZBookCardElement>;
+            /**
+             * ZBookCardApp component
+             * @cssprop --z-book-card-app-padding-x - set left and right padding
+             * @cssprop --z-book-card-app-padding-y - set top and bottom padding
+             */
             "z-book-card-app": LocalJSX.ZBookCardApp & JSXBase.HTMLAttributes<HTMLZBookCardAppElement>;
             /**
              * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
diff --git a/src/components/book-card/z-book-card-app/index.stories.ts b/src/components/book-card/z-book-card-app/index.stories.ts
index cc980941b..a78227c0c 100644
--- a/src/components/book-card/z-book-card-app/index.stories.ts
+++ b/src/components/book-card/z-book-card-app/index.stories.ts
@@ -1,18 +1,24 @@
 import {Meta, StoryObj} from "@storybook/web-components";
 import {html} from "lit";
+import {styleMap} from "lit/directives/style-map.js";
 import {ZBookCardApp} from ".";
+import {CSSVarsArguments} from "../../../utils/storybook-utils";
 import "../../z-button/index";
 import "../../z-icon/index";
 import "../../z-tag/index";
 import "../z-book-card-app/index";
 import "./index";
 
-type ZBookCardAppStoriesArgs = ZBookCardApp;
+type ZBookCardAppStoriesArgs = ZBookCardApp &
+  CSSVarsArguments<"z-book-card-app-padding-x" | "z-book-card-app-padding-y">;
 
 const StoryMeta = {
   title: "ZBookCard/ZBookCardApp",
   component: "z-book-card-app",
-  argTypes: {},
+  argTypes: {
+    "--z-book-card-app-padding-x": {control: {type: "text"}},
+    "--z-book-card-app-padding-y": {control: {type: "text"}},
+  },
   args: {
     logo: "https://placehold.co/24",
     name: "Esercizi",
@@ -27,6 +33,10 @@ export default StoryMeta;
 type Story = StoryObj<ZBookCardAppStoriesArgs>;
 
 export const CardApp = {
+  args: {
+    "--z-book-card-app-padding-x": null,
+    "--z-book-card-app-padding-y": null,
+  },
   render: (args) =>
     html`<z-book-card-app
       logo=${args.logo}
@@ -34,5 +44,9 @@ export const CardApp = {
       laz=${args.laz}
       info=${args.info}
       link=${args.link}
+      style=${styleMap({
+        "--z-book-card-app-padding-x": args["--z-book-card-app-padding-x"],
+        "--z-book-card-app-padding-y": args["--z-book-card-app-padding-y"],
+      })}
     ></z-book-card-app>`,
 } satisfies Story;
diff --git a/src/components/book-card/z-book-card-app/index.tsx b/src/components/book-card/z-book-card-app/index.tsx
index e76645d68..d4b7f843e 100644
--- a/src/components/book-card/z-book-card-app/index.tsx
+++ b/src/components/book-card/z-book-card-app/index.tsx
@@ -1,6 +1,11 @@
 import {Component, Element, Event, EventEmitter, Prop, h} from "@stencil/core";
 import {ControlSize, InfoRevealPosition} from "../../../beans";
 
+/**
+ * ZBookCardApp component
+ * @cssprop --z-book-card-app-padding-x - set left and right padding
+ * @cssprop --z-book-card-app-padding-y - set top and bottom padding
+ */
 @Component({
   tag: "z-book-card-app",
   styleUrls: ["styles.css", "../../css-components/z-link/styles.css", "../../../tokens/typography.css"],
diff --git a/src/components/book-card/z-book-card-app/readme.md b/src/components/book-card/z-book-card-app/readme.md
index 3a09bf4ce..7ded5f158 100644
--- a/src/components/book-card/z-book-card-app/readme.md
+++ b/src/components/book-card/z-book-card-app/readme.md
@@ -5,6 +5,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+ZBookCardApp component
+
 ## Properties
 
 | Property | Attribute | Description                             | Type      | Default     |
diff --git a/src/components/book-card/z-book-card-app/styles.css b/src/components/book-card/z-book-card-app/styles.css
index 028c25c12..c7f3312f1 100755
--- a/src/components/book-card/z-book-card-app/styles.css
+++ b/src/components/book-card/z-book-card-app/styles.css
@@ -14,7 +14,8 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
+  padding: var(--z-book-card-app-padding-y, calc(var(--space-unit) * 1.5))
+    var(--z-book-card-app-padding-x, var(--space-unit));
   gap: calc(var(--space-unit) * 2);
 }
 
diff --git a/src/components/book-card/z-book-card/index.stories.ts b/src/components/book-card/z-book-card/index.stories.ts
index 22699c81f..5a34bf106 100644
--- a/src/components/book-card/z-book-card/index.stories.ts
+++ b/src/components/book-card/z-book-card/index.stories.ts
@@ -127,7 +127,7 @@ export const WithSlottedContent = {
       </div>
       <div
         slot="apps"
-        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6"
+        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6;"
       >
         <z-book-card-app
           icon="https://placehold.co/24"

From 016a738fb18998f3e8af873a0f84b380a7dcd05f Mon Sep 17 00:00:00 2001
From: Valentina Pasquino <vpasquino@zanichelli.it>
Date: Tue, 3 Dec 2024 17:38:33 +0100
Subject: [PATCH 25/26] feat!: book-cards.html

---
 .../book-card/z-book-card/index.stories.ts       | 12 ++++++------
 src/pages/book-cards.html                        | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/book-card/z-book-card/index.stories.ts b/src/components/book-card/z-book-card/index.stories.ts
index 5a34bf106..d9ea693e1 100644
--- a/src/components/book-card/z-book-card/index.stories.ts
+++ b/src/components/book-card/z-book-card/index.stories.ts
@@ -127,35 +127,35 @@ export const WithSlottedContent = {
       </div>
       <div
         slot="apps"
-        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6;"
+        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
       >
         <z-book-card-app
           icon="https://placehold.co/24"
           name="Tutor di matematica"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
           name="Esercizi"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-bottom: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
-          name="Mappe"
+          name="Mappe Mappe Mappe Mappe Mappe"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
         ></z-book-card-app
         ><z-book-card-app
           icon="https://placehold.co/24"
           name="Scrittura"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px;"
+          style="width:315px; height:47px;; --z-book-card-app-padding-x: 16px;"
         ></z-book-card-app>
       </div>
     </z-book-card>`,
diff --git a/src/pages/book-cards.html b/src/pages/book-cards.html
index 2c3c213ce..d75bf9714 100644
--- a/src/pages/book-cards.html
+++ b/src/pages/book-cards.html
@@ -40,7 +40,7 @@ <h2>Landscape Variant</h2>
       >
         <div
           slot="apps"
-          style="display: flex; flex-wrap: wrap"
+          style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6"
         >
           <z-book-card-app
             icon="https://placehold.co/24"
@@ -48,26 +48,32 @@ <h2>Landscape Variant</h2>
             info="test test"
             link="http://localhost"
             laz="false"
-            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6"
+            style="
+              width: 315px;
+              height: 47px;
+              border-right: 1px solid #d6d6d6;
+              border-bottom: 1px solid #d6d6d6;
+              --z-book-card-app-padding-x: 16px;
+            "
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Tutor di matematica"
             info="test test"
             link="http://localhost"
-            style="width: 315px; height: 47px; border-bottom: 1px solid #d6d6d6"
+            style="width: 315px; height: 47px; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px"
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Mappe"
             link="http://localhost"
-            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6"
+            style="width: 315px; height: 47px; border-right: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px"
           ></z-book-card-app>
           <z-book-card-app
             icon="https://placehold.co/24"
             name="Scrittura"
             link="http://localhost"
-            style="width: 315px; height: 47px"
+            style="width: 315px; height: 47px; --z-book-card-app-padding-x: 16px"
           ></z-book-card-app>
         </div>
       </z-book-card>

From 8e764d7d7a0bb82b1beb23ef8a6aeeba72991a61 Mon Sep 17 00:00:00 2001
From: Valentina Pasquino <vpasquino@zanichelli.it>
Date: Thu, 5 Dec 2024 16:33:59 +0100
Subject: [PATCH 26/26] feat!: target blank

---
 src/components/book-card/z-book-card/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/book-card/z-book-card/index.tsx b/src/components/book-card/z-book-card/index.tsx
index 083c2c847..7e7046f46 100644
--- a/src/components/book-card/z-book-card/index.tsx
+++ b/src/components/book-card/z-book-card/index.tsx
@@ -256,6 +256,7 @@ export class ZBookCard {
                     {this.catalogUrl && (
                       <a
                         href={this.catalogUrl}
+                        target="_blank"
                         class="z-link z-link-icon body-4-sb"
                         onClick={() => this.emitCatalogClick()}
                       >
@@ -303,6 +304,7 @@ export class ZBookCard {
                     <z-button
                       size={ControlSize.X_SMALL}
                       href={this.ebookUrl}
+                      target="_blank"
                       onClick={() => this.emitEbookClick()}
                       role="link"
                       aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}