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

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

@@ -0,0 +1,21 @@
+import { type ZBookCover } from ".";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
+import "./index";
+type ZBookCoverStoriesArgs = ZBookCover & CSSVarsArguments<"--z-book-cover-height" | "--z-book-cover-border-radius" | "--z-book-cover-stack-shift-x" | "--z-book-cover-stack-shift-y">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        cover: string;
+        bordered: false;
+        multiple: false;
+        "--z-book-cover-height": string;
+        "--z-book-cover-border-radius": string;
+        "--z-book-cover-stack-shift-x": string;
+        "--z-book-cover-stack-shift-y": string;
+    };
+};
+export default StoryMeta;
+export declare const Default: {
+    render: (args: ZBookCoverStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/z-combobox/index.d.ts

@@ -77,6 +77,7 @@ export declare class ZCombobox {
     private renderList;
     private renderGroups;
     private renderNoSearchResults;
+    private renderCloseButton;
     private renderSearchInput;
     private renderCheckAll;
     render(): HTMLDivElement;

package/dist/types/components/z-input/index.d.ts

@@ -13,13 +13,13 @@ export declare class ZInput {
     /** the input aria-label */
     ariaLabel: string;
     /** the input aria-expaded: available for text, password, number, email */
-    htmlAriaExpanded: string;
+    ariaExpanded: string;
     /** the input aria-controls (optional): available for text, password, number, email */
-    htmlAriaControls?: string;
+    ariaControls?: string;
     /** the input aria-autocomplete (optional): available for text, password, number, email */
-    htmlAriaAutocomplete?: string;
+    ariaAutocomplete?: string;
     /** the input aria-activedescendant (optional): available for text, password, number, email */
-    htmlAriaActivedescendant?: string;
+    ariaActivedescendant?: string;
     /** the input value */
     value?: string;
     /** the input is disabled */

package/dist/types/components/z-offcanvas/index.d.ts

@@ -28,6 +28,8 @@ export declare class ZOffcanvas {
      *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
      */
     skipLoadAnimation: boolean;
+    /** Whether to show the backdrop when the offcanvas is open. Default: true */
+    showBackdrop: boolean;
     /** emitted when `open` prop changes */
     canvasOpenStatusChanged: EventEmitter;
     /** Used to skip the opening transition when the offcanvas is already open at the first render. */

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

@@ -29,9 +29,18 @@ declare const StoryMeta: {
             };
             options: TransitionDirection[];
         };
+        showBackdrop: {
+            control: {
+                if: {
+                    arg: string;
+                    eq: OffCanvasVariant;
+                };
+            };
+        };
     };
     args: {
         open: true;
+        showBackdrop: true;
         "--z-offcanvas--top-space": string;
         "--z-offcanvas--container-width": string;
     };

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

@@ -4,39 +4,21 @@
  */
 export declare class ZResultCard {
     hostElement: HTMLZResultCardElement;
-    /**
-     * The title of the card.
-     */
+    /** The title of the card. */
     cardTitle: string;
-    /**
-     * The subtitle of the card.
-     */
+    /** The subtitle of the card. */
     cardSubtitle: string;
-    /**
-     * The authors of the opera.
-     */
+    /** The authors of the opera. */
     authors?: string;
-    /**
-     * The URL of the cover image.
-     * This is used to display the cover image of the opera.
-     */
+    /** The URL of the cover image of the opera. */
     cover?: string;
-    /** [optional] Fallback cover URL */
+    /** [optional] Fallback cover URL. */
     fallbackCover?: string;
-    /**
-     * Indicates whether the card has multiple covers.
-     * This is used to apply specific styles when there are multiple covers.
-     */
+    /** Whether to show a stack of covers to represent multiple books. */
     hasMultipleCovers: boolean;
-    /**
-     * Indicates whether the card is an info page.
-     * This can be used to apply specific styles or behaviors for info pages.
-     */
+    /** Enables the "info" variant of the card. */
     isInfoCard: boolean;
-    /**
-     * [optional]
-     * Use for insert heading when needed.
-     */
+    /** [optional] Set a specific heading level as html tag for the title. */
     titleHtmlTag?: string;
     private authorsRef;
     private titleRef;

package/dist/types/components.d.ts

@@ -262,13 +262,13 @@ export namespace Components {
         "textColor"?: string;
     }
     /**
-     * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px
-     * @cssprop --z-book-card-title-lines - set title avilable lines - default 2
-     * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial
-     * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1
-     * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all
-     * @cssprop --z-book-card-authors-lines - set authors available lines - default 1
-     * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all
+     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
+     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
+     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
+     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
+     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
+     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
+     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
      */
     interface ZBookCard {
         /**
@@ -280,13 +280,17 @@ export namespace Components {
          */
         "cover": string;
         /**
-          * [optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource
+          * [optional] Link to the ebook resource. Creates a link also around the cover and title.
          */
         "ebookUrl"?: string;
         /**
-          * [optional] Fallback cover URL
+          * [optional] Fallback cover URL.
          */
         "fallbackCover"?: string;
+        /**
+          * Whether to show a stack of covers to represent multiple books (only for `portrait` variant).
+         */
+        "hasMultipleCovers": boolean;
         /**
           * [optional] Main ISBN
          */
@@ -295,12 +299,16 @@ export namespace Components {
           * [optional] ISBN label
          */
         "isbnLabel": string;
+        /**
+          * [optional] Value for the `target` attribute of the links created by `ebookUrl` prop.
+         */
+        "linkTarget": string;
         /**
           * Opera title (card title)
          */
         "operaTitle": string;
         /**
-          * [optional] Set a specific h level as html tag for opera title
+          * [optional] Set a specific heading level as html tag for the title.
          */
         "titleHtmlTag"?: string;
         /**
@@ -403,6 +411,34 @@ export namespace Components {
          */
         "volumeTitle"?: string;
     }
+    /**
+     * This component displays a book cover image,
+     * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
+     * The aspect ratio of the cover image is preserved.
+     * Alignment of the image inside the container can be customized via CSS properties.
+     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
+     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+     */
+    interface ZBookCover {
+        /**
+          * Whether to apply a border around the cover image (always applied when `multiple` is enabled).
+         */
+        "bordered": boolean;
+        /**
+          * URL of the cover image.
+         */
+        "cover": string;
+        /**
+          * URL of the fallback cover image.
+         */
+        "fallbackCover": string;
+        /**
+          * Whether to show a stack of covers to represent multiple books.
+         */
+        "multiple": boolean;
+    }
     interface ZBreadcrumb {
         /**
           * [optional] Variant of first node
@@ -901,6 +937,22 @@ export namespace Components {
         "size"?: ControlSize;
     }
     interface ZInput {
+        /**
+          * the input aria-activedescendant (optional): available for text, password, number, email
+         */
+        "ariaActivedescendant"?: string;
+        /**
+          * the input aria-autocomplete (optional): available for text, password, number, email
+         */
+        "ariaAutocomplete"?: string;
+        /**
+          * the input aria-controls (optional): available for text, password, number, email
+         */
+        "ariaControls"?: string;
+        /**
+          * the input aria-expaded: available for text, password, number, email
+         */
+        "ariaExpanded": string;
         /**
           * the input aria-label
          */
@@ -921,22 +973,6 @@ export namespace Components {
           * render clear icon when typing (optional): available for text
          */
         "hasclearicon"?: boolean;
-        /**
-          * the input aria-activedescendant (optional): available for text, password, number, email
-         */
-        "htmlAriaActivedescendant"?: string;
-        /**
-          * the input aria-autocomplete (optional): available for text, password, number, email
-         */
-        "htmlAriaAutocomplete"?: string;
-        /**
-          * the input aria-controls (optional): available for text, password, number, email
-         */
-        "htmlAriaControls"?: string;
-        /**
-          * the input aria-expaded: available for text, password, number, email
-         */
-        "htmlAriaExpanded": string;
         /**
           * the id of the input element
          */
@@ -1568,6 +1604,10 @@ export namespace Components {
           * Whether the offcanvas is open. Default: false
          */
         "open": boolean;
+        /**
+          * Whether to show the backdrop when the offcanvas is open. Default: true
+         */
+        "showBackdrop": boolean;
         /**
           * Skip the opening transition when the offcanvas is already open at the first render.
           * @deprecated This prop is not needed anymore, the component will automatically skip the transition when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
@@ -1770,23 +1810,23 @@ export namespace Components {
          */
         "cardTitle": string;
         /**
-          * The URL of the cover image. This is used to display the cover image of the opera.
+          * The URL of the cover image of the opera.
          */
         "cover"?: string;
         /**
-          * [optional] Fallback cover URL
+          * [optional] Fallback cover URL.
          */
         "fallbackCover"?: string;
         /**
-          * Indicates whether the card has multiple covers. This is used to apply specific styles when there are multiple covers.
+          * Whether to show a stack of covers to represent multiple books.
          */
         "hasMultipleCovers": boolean;
         /**
-          * Indicates whether the card is an info page. This can be used to apply specific styles or behaviors for info pages.
+          * Enables the "info" variant of the card.
          */
         "isInfoCard": boolean;
         /**
-          * [optional] Use for insert heading when needed.
+          * [optional] Set a specific heading level as html tag for the title.
          */
         "titleHtmlTag"?: string;
     }
@@ -2590,13 +2630,13 @@ declare global {
         "titleClick": any;
     }
     /**
-     * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px
-     * @cssprop --z-book-card-title-lines - set title avilable lines - default 2
-     * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial
-     * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1
-     * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all
-     * @cssprop --z-book-card-authors-lines - set authors available lines - default 1
-     * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all
+     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
+     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
+     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
+     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
+     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
+     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
+     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
      */
     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;
@@ -2657,6 +2697,22 @@ declare global {
         prototype: HTMLZBookCardDeprecatedElement;
         new (): HTMLZBookCardDeprecatedElement;
     };
+    /**
+     * This component displays a book cover image,
+     * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
+     * The aspect ratio of the cover image is preserved.
+     * Alignment of the image inside the container can be customized via CSS properties.
+     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
+     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+     */
+    interface HTMLZBookCoverElement extends Components.ZBookCover, HTMLStencilElement {
+    }
+    var HTMLZBookCoverElement: {
+        prototype: HTMLZBookCoverElement;
+        new (): HTMLZBookCoverElement;
+    };
     interface HTMLZBreadcrumbElementEventMap {
         "clickOnNode": BreadcrumbPath["path"];
     }
@@ -3652,6 +3708,7 @@ declare global {
         "z-book-card": HTMLZBookCardElement;
         "z-book-card-app": HTMLZBookCardAppElement;
         "z-book-card-deprecated": HTMLZBookCardDeprecatedElement;
+        "z-book-cover": HTMLZBookCoverElement;
         "z-breadcrumb": HTMLZBreadcrumbElement;
         "z-button": HTMLZButtonElement;
         "z-button-sort": HTMLZButtonSortElement;
@@ -3987,13 +4044,13 @@ declare namespace LocalJSX {
         "textColor"?: string;
     }
     /**
-     * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px
-     * @cssprop --z-book-card-title-lines - set title avilable lines - default 2
-     * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial
-     * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1
-     * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all
-     * @cssprop --z-book-card-authors-lines - set authors available lines - default 1
-     * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all
+     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
+     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
+     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
+     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
+     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
+     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
+     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
      */
     interface ZBookCard {
         /**
@@ -4005,13 +4062,17 @@ declare namespace LocalJSX {
          */
         "cover"?: string;
         /**
-          * [optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource
+          * [optional] Link to the ebook resource. Creates a link also around the cover and title.
          */
         "ebookUrl"?: string;
         /**
-          * [optional] Fallback cover URL
+          * [optional] Fallback cover URL.
          */
         "fallbackCover"?: string;
+        /**
+          * Whether to show a stack of covers to represent multiple books (only for `portrait` variant).
+         */
+        "hasMultipleCovers"?: boolean;
         /**
           * [optional] Main ISBN
          */
@@ -4020,6 +4081,10 @@ declare namespace LocalJSX {
           * [optional] ISBN label
          */
         "isbnLabel"?: string;
+        /**
+          * [optional] Value for the `target` attribute of the links created by `ebookUrl` prop.
+         */
+        "linkTarget"?: string;
         /**
           * click on cover link
          */
@@ -4037,7 +4102,7 @@ declare namespace LocalJSX {
          */
         "operaTitle"?: string;
         /**
-          * [optional] Set a specific h level as html tag for opera title
+          * [optional] Set a specific heading level as html tag for the title.
          */
         "titleHtmlTag"?: string;
         /**
@@ -4148,6 +4213,34 @@ declare namespace LocalJSX {
          */
         "volumeTitle"?: string;
     }
+    /**
+     * This component displays a book cover image,
+     * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
+     * The aspect ratio of the cover image is preserved.
+     * Alignment of the image inside the container can be customized via CSS properties.
+     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
+     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+     */
+    interface ZBookCover {
+        /**
+          * Whether to apply a border around the cover image (always applied when `multiple` is enabled).
+         */
+        "bordered"?: boolean;
+        /**
+          * URL of the cover image.
+         */
+        "cover"?: string;
+        /**
+          * URL of the fallback cover image.
+         */
+        "fallbackCover"?: string;
+        /**
+          * Whether to show a stack of covers to represent multiple books.
+         */
+        "multiple"?: boolean;
+    }
     interface ZBreadcrumb {
         /**
           * [optional] Variant of first node
@@ -4682,6 +4775,22 @@ declare namespace LocalJSX {
         "size"?: ControlSize;
     }
     interface ZInput {
+        /**
+          * the input aria-activedescendant (optional): available for text, password, number, email
+         */
+        "ariaActivedescendant"?: string;
+        /**
+          * the input aria-autocomplete (optional): available for text, password, number, email
+         */
+        "ariaAutocomplete"?: string;
+        /**
+          * the input aria-controls (optional): available for text, password, number, email
+         */
+        "ariaControls"?: string;
+        /**
+          * the input aria-expaded: available for text, password, number, email
+         */
+        "ariaExpanded"?: string;
         /**
           * the input aria-label
          */
@@ -4702,22 +4811,6 @@ declare namespace LocalJSX {
           * render clear icon when typing (optional): available for text
          */
         "hasclearicon"?: boolean;
-        /**
-          * the input aria-activedescendant (optional): available for text, password, number, email
-         */
-        "htmlAriaActivedescendant"?: string;
-        /**
-          * the input aria-autocomplete (optional): available for text, password, number, email
-         */
-        "htmlAriaAutocomplete"?: string;
-        /**
-          * the input aria-controls (optional): available for text, password, number, email
-         */
-        "htmlAriaControls"?: string;
-        /**
-          * the input aria-expaded: available for text, password, number, email
-         */
-        "htmlAriaExpanded"?: string;
         /**
           * the id of the input element
          */
@@ -5437,6 +5530,10 @@ declare namespace LocalJSX {
           * Whether the offcanvas is open. Default: false
          */
         "open"?: boolean;
+        /**
+          * Whether to show the backdrop when the offcanvas is open. Default: true
+         */
+        "showBackdrop"?: boolean;
         /**
           * Skip the opening transition when the offcanvas is already open at the first render.
           * @deprecated This prop is not needed anymore, the component will automatically skip the transition when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
@@ -5659,23 +5756,23 @@ declare namespace LocalJSX {
          */
         "cardTitle"?: string;
         /**
-          * The URL of the cover image. This is used to display the cover image of the opera.
+          * The URL of the cover image of the opera.
          */
         "cover"?: string;
         /**
-          * [optional] Fallback cover URL
+          * [optional] Fallback cover URL.
          */
         "fallbackCover"?: string;
         /**
-          * Indicates whether the card has multiple covers. This is used to apply specific styles when there are multiple covers.
+          * Whether to show a stack of covers to represent multiple books.
          */
         "hasMultipleCovers"?: boolean;
         /**
-          * Indicates whether the card is an info page. This can be used to apply specific styles or behaviors for info pages.
+          * Enables the "info" variant of the card.
          */
         "isInfoCard"?: boolean;
         /**
-          * [optional] Use for insert heading when needed.
+          * [optional] Set a specific heading level as html tag for the title.
          */
         "titleHtmlTag"?: string;
     }
@@ -6182,6 +6279,7 @@ declare namespace LocalJSX {
         "z-book-card": ZBookCard;
         "z-book-card-app": ZBookCardApp;
         "z-book-card-deprecated": ZBookCardDeprecated;
+        "z-book-cover": ZBookCover;
         "z-breadcrumb": ZBreadcrumb;
         "z-button": ZButton;
         "z-button-sort": ZButtonSort;
@@ -6357,13 +6455,13 @@ declare module "@stencil/core" {
             "z-aria-alert": LocalJSX.ZAriaAlert & JSXBase.HTMLAttributes<HTMLZAriaAlertElement>;
             "z-avatar": LocalJSX.ZAvatar & JSXBase.HTMLAttributes<HTMLZAvatarElement>;
             /**
-             * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px
-             * @cssprop --z-book-card-title-lines - set title avilable lines - default 2
-             * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial
-             * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1
-             * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all
-             * @cssprop --z-book-card-authors-lines - set authors available lines - default 1
-             * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all
+             * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
+             * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
+             * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
+             * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
+             * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
+             * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
+             * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
              */
             "z-book-card": LocalJSX.ZBookCard & JSXBase.HTMLAttributes<HTMLZBookCardElement>;
             /**
@@ -6379,6 +6477,17 @@ declare module "@stencil/core" {
              * @cssprop --z-book-card-compact-height - compact card custom height
              */
             "z-book-card-deprecated": LocalJSX.ZBookCardDeprecated & JSXBase.HTMLAttributes<HTMLZBookCardDeprecatedElement>;
+            /**
+             * This component displays a book cover image,
+             * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
+             * The aspect ratio of the cover image is preserved.
+             * Alignment of the image inside the container can be customized via CSS properties.
+             * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+             * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
+             * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+             * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+             */
+            "z-book-cover": LocalJSX.ZBookCover & JSXBase.HTMLAttributes<HTMLZBookCoverElement>;
             "z-breadcrumb": LocalJSX.ZBreadcrumb & JSXBase.HTMLAttributes<HTMLZBreadcrumbElement>;
             "z-button": LocalJSX.ZButton & JSXBase.HTMLAttributes<HTMLZButtonElement>;
             "z-button-sort": LocalJSX.ZButtonSort & JSXBase.HTMLAttributes<HTMLZButtonSortElement>;

package/{www/build/p-8117a929.entry.js → dist/web-components-library/p-01f941c2.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,a as n,g as e}from"./p-75c4a726.js";import{N as o,a as s,b as r}from"./p-17af7fb2.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const c=l;const h=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=t.parentElement;if(!i){return}setTimeout((()=>{const a=this.orientation===o.HORIZONTAL;const n=i.getBoundingClientRect();const e=t.getBoundingClientRect();const s=a?e.left-n.left:e.top-n.top;const r=a?i.clientWidth:i.clientHeight;const l=a?t.clientWidth:t.clientHeight;const c=s-r/2+l/2;i.scrollTo({[a?"left":"top"]:i[a?"scrollLeft":"scrollTop"]+c,behavior:"smooth"})}),100)}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"5216c71c53d3263870b4d64749554c36dadfdb8c",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"b59fcef70ff51453d679678caabae7f69a3a91d9",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"2f2a9f0630c6f7c340132bfde3c90c2392ea3f07",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"f8e06aaadd56dfd9e1ab068a4a0d5633083b2ca9",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"8f1062acbb5616c395cac371d8737660f69c5326"})),a("button",{key:"28342d0ad1c43119862b148b550c57c352d6a07c",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"e975d966cdc0f0f52345bca3cb842cd0672783b8",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};h.style=c;export{h as z_navigation_tabs};
-//# sourceMappingURL=p-8117a929.entry.js.map
+import{r as t,c as i,h as a,a as n,g as e}from"./p-75c4a726.js";import{N as o,a as s,b as r}from"./p-17af7fb2.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const h=l;const c=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=t.parentElement;if(!i){return}setTimeout((()=>{const a=this.orientation===o.HORIZONTAL;const n=i.getBoundingClientRect();const e=t.getBoundingClientRect();const s=a?e.left-n.left:e.top-n.top;const r=a?i.clientWidth:i.clientHeight;const l=a?t.clientWidth:t.clientHeight;const h=s-r/2+l/2;i.scrollTo({[a?"left":"top"]:i[a?"scrollLeft":"scrollTop"]+h,behavior:"smooth"})}),100)}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"69bc5562051734e576c1dbb2af850ef01a70a693",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"c851af9053873ea70d1dee5216bb680deea111f0",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"6a69b89400fea7a87fd18d8d59e183b85aa0c87f",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"997e215eecc0454b96e0034fece50be22cb1eef0",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"8a214ee36e66badda0a8825fbe7c2268ff0fc6df"})),a("button",{key:"627501af784136a1eff68c0e002812144062128e",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"68728de5a048363fd186c4a26cc8872fd4b0253e",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};c.style=h;export{c as z_navigation_tabs};
+//# sourceMappingURL=p-01f941c2.entry.js.map