@zanichelli/albe-web-components 16.4.0 → 17.0.0-RC1

package/dist/esm/z-tbody.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tbody } from './index-8e5c830a.js';
+export { Z as z_tbody } from './index-608103c2.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm/z-td.entry.js

@@ -1,5 +1,5 @@
-export { Z as z_td } from './index-19b24f63.js';
+export { Z as z_td } from './index-cdaab374.js';
 import './index-c8ceadeb.js';
-import './index-a63060e9.js';
+import './index-ee40e66b.js';
 
 //# sourceMappingURL=z-td.entry.js.map

package/dist/esm/z-tfoot.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tfoot } from './index-09ff70db.js';
+export { Z as z_tfoot } from './index-3f261ba1.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm/z-th.entry.js

@@ -1,5 +1,5 @@
-export { Z as z_th } from './index-681cc2b7.js';
+export { Z as z_th } from './index-a93175b6.js';
 import './index-c8ceadeb.js';
-import './index-a63060e9.js';
+import './index-ee40e66b.js';
 
 //# sourceMappingURL=z-th.entry.js.map

package/dist/esm/z-thead.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_thead } from './index-fe4fc8da.js';
+export { Z as z_thead } from './index-53b72ad2.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-thead.entry.js.map

package/dist/esm/z-toast-notification-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-c8ceadeb.js';
-import { s as ToastNotificationPosition } from './index-a63060e9.js';
+import { s as ToastNotificationPosition } from './index-ee40e66b.js';
 
 const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 const ZToastNotificationListStyle0 = stylesCss;
@@ -41,7 +41,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: '92d1e3eb3d27b178014dec77a61efcf6de185933', name: "toasts" });
+        return h("slot", { key: '4f16e2a3e7925804c82c22adf27df7467b2991e5', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toast-notification.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { r as ToastNotificationTransition } from './index-a63060e9.js';
+import { r as ToastNotificationTransition } from './index-ee40e66b.js';
 import { B as Breakpoints } from './breakpoints-d148bfde.js';
 
 var hammer = {exports: {}};
@@ -2826,7 +2826,7 @@ const ZToastNotification = class {
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: '64e3bc3f5fea2d418f58e010fb4660fc2369dacb', style: {
+        return (h(Host, { key: '7c37f56b51dc4e57f1ef68dcb33d92a7b312797e', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/esm/z-toggle-button.entry.js

@@ -21,10 +21,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: 'ff8e644553c0ebb8e943a7be38308fcebcbb9f74', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: 'fbb9e28ae28c5ad3c95fd09e5e0a4d09256a5d70', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '75be11bb4f5f880aa057a1f519956e683ce4601f', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '47136b75e764c2564b2d35dd7ae3daa13a0137ef', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/esm/z-toggle-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
-import { k as LabelPosition } from './index-a63060e9.js';
-import { r as randomId } from './utils-305762b5.js';
+import { k as LabelPosition } from './index-ee40e66b.js';
+import { r as randomId } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
 
 const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
@@ -29,14 +29,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '362b31e90ab912df5167446dfd415dfe8f16beaa' }, h("input", { key: '0fe79cb376f214a1ef2f7bfeb70e8538db0bf4be', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'e98eb52726eae27cdf4df9c46c96259f77b708ea', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'c08d8ed8562d9fe56f137599a19305d491d673ed' }, h("input", { key: '9ef0eba253cb14dde3a3798d1b4727a2f03801d9', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'e4f77750c57a182ce4d7bb5407cb35abdbe7e2c9', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'a0b1627779aa98080777b817a3930d750904afc9' }, h("slot", { key: 'cd44ff95db14fc84f360f64aa08180972cb8d532' })), h("span", { key: '070a6d688fd1899554c4a6913ea3df1e5a395403', class: {
+            } }, h("span", { key: '7130400b63fce3c81e16e2114dd82e9c67fbb5e4' }, h("slot", { key: 'be26bb7ffd2310486b8b2653b34aea606312c8c2' })), h("span", { key: 'f43c1a36f76a2280eaf4a56a74241bfd8e887f64', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '0ff0eced728bbc43d0a754374dc233c88abe4603', class: "circle" }, this.checked && (h("z-icon", { key: 'bce3b5b876c813e2f9b8c9715a973133ecd3863b', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '576fe26f4267e279107a283009e636aae4a52dbf', class: "circle" }, this.checked && (h("z-icon", { key: 'f348efee67f1744f3da348ee0d13772f9c493e5b', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/esm/z-tooltip.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-c8ceadeb.js';
-import { P as PopoverPosition } from './index-a63060e9.js';
+import { P as PopoverPosition } from './index-ee40e66b.js';
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 const ZTooltipStyle0 = stylesCss;
@@ -17,7 +17,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '055811eac8115dde60dadaf79951780df2ff64ae', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'bf96152d1131f62d93afbfe155ed0e80ad001385' })));
+        return (h("z-popover", { key: 'ffcc7daa7d426c43e911d4167cca61db36f0659b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '417af53d27eb674afc100cd9fd492e975daac9a5' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

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

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-7b64c875.js';
+export { Z as z_tr } from './index-350c25c9.js';
 import './index-c8ceadeb.js';
-import './utils-305762b5.js';
-import './index-a63060e9.js';
+import './utils-ed82ce58.js';
+import './index-ee40e66b.js';
 import './breakpoints-d148bfde.js';
-import './index-19b24f63.js';
-import './index-681cc2b7.js';
+import './index-cdaab374.js';
+import './index-a93175b6.js';
 
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-visually-hidden.entry.js

@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: '3f4358dfc989f8813ff2aa14180b8ec23ce55494' });
+        return h("slot", { key: 'bf3c819d35834cfa8ffc9aadb8d2e267a799241f' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/beans/index.d.ts

@@ -392,10 +392,26 @@ export declare enum VisibilityCondition {
     ALWAYS = "always"
 }
 export declare enum BookCardVariant {
+    LANDSCAPE = "landscape",
+    PORTRAIT = "portrait"
+}
+export declare enum BookCardDeprecatedVariant {
     EXPANDED = "expanded",
     COMPACT = "compact",
     SEARCH = "search"
 }
+export type BookCardTag = {
+    status: BookCardTagStatus;
+    interactive: boolean;
+};
+export declare enum BookCardTagStatus {
+    ACTIVE = "active",
+    DISABLED = "disabled"
+}
+export type BookCardTagEvent = {
+    tag: string;
+    state: string;
+};
 export declare enum AccordionVariant {
     DEFAULT = "default",
     BACKGROUND = "background"

package/dist/types/components/book-card/z-book-card/index.d.ts

@@ -0,0 +1,68 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { BookCardTag, BookCardVariant } from "../../../beans";
+/**
+ * @slot cta - to the right of authors and title (e.g. bookmark icon)
+ * @slot apps - list of card-related apps
+ */
+export declare class ZBookCard {
+    hostElement: HTMLZBookCardElement;
+    /** Card variant: landscape, portrait */
+    variant: BookCardVariant;
+    /** Cover URL */
+    cover: string;
+    /** [optional] Authors */
+    authors?: string;
+    /** [optional] Opera title */
+    operaTitle?: string;
+    /** [optional] Volume title */
+    volumeTitle?: string;
+    /** [optional] Main ISBN */
+    isbn?: string;
+    /** [optional] ISBN label */
+    isbnLabel: string;
+    /** [optional] EDI tag */
+    edi?: BookCardTag | string;
+    /** [optional] Annotated tag */
+    annotated?: BookCardTag | string;
+    /** [optional] Teacher version tag */
+    teacherVersion?: BookCardTag | string;
+    /** [optional] Show adoption badge */
+    adoption?: boolean;
+    /** [optional] Show catalog link to correspondent resource */
+    catalogUrl?: string;
+    /** [optional] Show link to the ebook resource */
+    ebookUrl?: string;
+    /** [optional] Fallback cover URL */
+    fallbackCover?: string;
+    /** [optional] Set a specific h level as html tag for opera title */
+    operaTitleHtmlTag?: string;
+    ediTag: any;
+    annotatedTag: any;
+    teacherVersionTag: any;
+    /** click on tag */
+    tagClick: EventEmitter;
+    /** click on catalog link */
+    catalogClick: EventEmitter;
+    /** click on ebook link */
+    ebookClick: EventEmitter;
+    /** click on immersive reader */
+    immersiveReaderClick: EventEmitter;
+    watchEdi(): void;
+    watchAnnotated(): void;
+    watchTeacherVersion(): void;
+    componentWillLoad(): void;
+    private emitTagClick;
+    private emitCatalogClick;
+    private emitEbookClick;
+    private emitImmersiveReaderClick;
+    private renderCard;
+    private renderOperaTitle;
+    private renderIsbnLabel;
+    private renderTag;
+    private renderTags;
+    private renderCover;
+    private renderLaZEbookLogo;
+    private renderLandscape;
+    private renderPortrait;
+    render(): HTMLZBookCardElement;
+}

package/dist/types/components/book-card/z-book-card/index.stories.d.ts

@@ -0,0 +1,77 @@
+import { ZBookCard } from ".";
+import { BookCardTagStatus, BookCardVariant } from "../../../beans";
+import "../../z-button/index";
+import "../../z-icon/index";
+import "../../z-tag/index";
+import "../z-book-card-app/index";
+import "./index";
+type ZBookCardStoriesArgs = ZBookCard & {
+    theme: "theme-default" | "theme-dark" | "theme-black-yellow";
+};
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio";
+            };
+            options: BookCardVariant[];
+        };
+        edi: {
+            control: {
+                type: "object";
+            };
+        };
+        annotated: {
+            control: {
+                type: "object";
+            };
+        };
+        teacherVersion: {
+            control: {
+                type: "object";
+            };
+        };
+        theme: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        variant: BookCardVariant.LANDSCAPE;
+        cover: string;
+        operaTitle: string;
+        volumeTitle: string;
+        authors: string;
+        isbn: string;
+        isbnLabel: string;
+        adoption: true;
+        edi: {
+            status: BookCardTagStatus.ACTIVE;
+            interactive: true;
+        };
+        annotated: {
+            status: BookCardTagStatus.DISABLED;
+            interactive: true;
+        };
+        teacherVersion: {
+            status: BookCardTagStatus.ACTIVE;
+            interactive: false;
+        };
+        catalogUrl: string;
+        ebookUrl: string;
+        fallbackCover: string;
+        operaTitleHtmlTag: any;
+        theme: "theme-default";
+    };
+};
+export default StoryMeta;
+export declare const Card: {
+    render: (args: ZBookCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithSlottedContent: {
+    render: (args: ZBookCardStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/book-card/z-book-card-app/index.d.ts

@@ -0,0 +1,25 @@
+export declare class ZBookCardApp {
+    hostElement: HTMLZBookCardAppElement;
+    /**
+     * App logo url
+     */
+    logo: string;
+    /**
+     * App name
+     */
+    name: string;
+    /**
+     * link to the app website
+     */
+    link: string;
+    /**
+     * Show or hide laZ prefix before app name
+     */
+    laz?: boolean;
+    /**
+     * Info text to show as inforeveal
+     */
+    info?: string;
+    private renderLaz;
+    render(): HTMLZBookCardAppElement;
+}

package/dist/types/components/book-card/z-book-card-app/index.stories.d.ts

@@ -0,0 +1,22 @@
+import { ZBookCardApp } from ".";
+import "../../z-button/index";
+import "../../z-icon/index";
+import "../../z-tag/index";
+import "../z-book-card-app/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {};
+    args: {
+        logo: string;
+        name: string;
+        laz: true;
+        info: string;
+        link: string;
+    };
+};
+export default StoryMeta;
+export declare const CardApp: {
+    render: (args: ZBookCardApp) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/{z-book-card → deprecated/z-book-card-deprecated}/index.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-import { BookCardVariant } from "../../beans";
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { BookCardDeprecatedVariant } from "../../../beans";
 /**
  * @slot resources - books resources (extended variant only)
  * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
@@ -10,12 +10,12 @@ import { BookCardVariant } from "../../beans";
  * @cssprop --z-book-card-compact-width - compact card custom width
  * @cssprop --z-book-card-compact-height - compact card custom height
  */
-export declare class ZBookCard {
-    hostElement: HTMLZBookCardElement;
+export declare class ZBookCardDeprecated {
+    hostElement: HTMLZBookCardDeprecatedElement;
     /**
      * Card variant: expanded, compact, search
      */
-    variant: BookCardVariant;
+    variant: BookCardDeprecatedVariant;
     /**
      * Cover URL
      */
@@ -91,5 +91,5 @@ export declare class ZBookCard {
     private renderHeaderCtaSlot;
     private renderResourcesSlot;
     private renderFooterCtaSlot;
-    render(): HTMLZBookCardElement;
+    render(): HTMLZBookCardDeprecatedElement;
 }

package/dist/types/components/{z-book-card → deprecated/z-book-card-deprecated}/index.stories.d.ts

@@ -1,11 +1,11 @@
-import { ZBookCard } from ".";
-import { BookCardVariant } from "../../beans";
-import { CSSVarsArguments } from "../../utils/storybook-utils";
-import "../z-button/index";
-import "../z-icon/index";
-import "../z-tag/index";
+import { ZBookCardDeprecated } from ".";
+import { BookCardDeprecatedVariant } from "../../../beans";
+import { CSSVarsArguments } from "../../../utils/storybook-utils";
+import "../../z-button/index";
+import "../../z-icon/index";
+import "../../z-tag/index";
 import "./index";
-type ZBookCardStoriesArgs = ZBookCard & {
+type ZBookCardStoriesArgs = ZBookCardDeprecated & {
     theme: "theme-default" | "theme-dark" | "theme-black-yellow";
 } & CSSVarsArguments<"z-book-card-ribbon-background-color" | "z-book-card-ribbon-shadow-color" | "z-book-card-compact-width" | "z-book-card-compact-height">;
 declare const StoryMeta: {
@@ -16,7 +16,7 @@ declare const StoryMeta: {
             control: {
                 type: "inline-radio";
             };
-            options: BookCardVariant[];
+            options: BookCardDeprecatedVariant[];
         };
         theme: {
             control: {
@@ -28,7 +28,7 @@ declare const StoryMeta: {
         "--z-book-card-ribbon-shadow-color": import("@storybook/csf").Args;
     };
     args: {
-        variant: BookCardVariant.EXPANDED;
+        variant: BookCardDeprecatedVariant.EXPANDED;
         cover: string;
         operaTitle: string;
         volumeTitle: string;