@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,4 +1,4 @@
-import { Fragment, Host, h } from "@stencil/core";
+import { Fragment, Host, h, } from "@stencil/core";
 import { ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
 import { Breakpoints } from "../../constants/breakpoints";
 import { containsElement } from "../../utils/utils";
@@ -9,12 +9,6 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeader {
     onStuck() {
@@ -198,7 +192,7 @@ export class ZAppHeader {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
         return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
@@ -214,24 +208,47 @@ export class ZAppHeader {
         return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
     }
     constructor() {
-        this.menuElements = [];
-        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
-            ? new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, { threshold: 0.5 })
-            : undefined;
+        /**
+         * Stuck mode for the header.
+         * You can programmatically set it using an IntersectionObserver.
+         */
         this.stuck = false;
+        /**
+         * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.
+         */
         this.enableOffcanvas = false;
+        /**
+         * Enable the search bar.
+         */
         this.enableSearch = false;
+        /**
+         * Placeholder text for the search bar.
+         */
         this.searchPlaceholder = "Cerca";
+        /**
+         * Search string for the search bar.
+         */
         this.searchString = "";
-        this.searchPageUrl = undefined;
+        /**
+         * Enable laZ logo.
+         */
         this.enableZLogo = true;
+        /**
+         * The opening state of the drawer.
+         */
         this.drawerOpen = false;
+        /**
+         * The stuck state of the bar.
+         */
         this._stuck = false;
-        this.menuLength = undefined;
         this.isMobile = true;
         this.isTablet = false;
+        this.menuElements = [];
+        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
+            ? new IntersectionObserver(([entry]) => {
+                this._stuck = !entry.isIntersecting;
+            }, { threshold: 0.5 })
+            : undefined;
         this.openDrawer = this.openDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
         this.collectMenuElements = this.collectMenuElements.bind(this);
@@ -257,7 +274,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'cabccb026186feb602cd31cc410ac12bb374326d', "menu-length": this.menuLength }, h("div", { key: 'c684735c076498f245c528f48cf306bf21cbb8ba', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '30beac4e17122b912943f83cd9f57498200cc5d5', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'cd5ceee248c0ef5283df7d846be121256933e75e', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '96d7891d2fef52dd8b601d31a4a36e3635428775', name: "top-subtitle" }))), h("div", { key: '552c146d1edc5ecad7ed354859787c9ae811bbe1', class: "heading-title" }, h("slot", { key: 'a03a2cb293b596de013ccf6279a75d11b719f054', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '47899e75dea4f44b50ef4f981037e7a8d7652403', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '46d0be7f5ac779ed93ff061332dbf8289d041b6d', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'a552a43cbf8b3bab46285bc2b5846c4925341eaa', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '7f93c00e6183af3a08b87513f2a41a0ec16c0b1d', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -287,8 +304,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Stuck mode for the header.\nYou can programmatically set it using an IntersectionObserver."
                 },
-                "attribute": "stuck",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "stuck",
                 "defaultValue": "false"
             },
             "enableOffcanvas": {
@@ -305,8 +324,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container."
                 },
-                "attribute": "enable-offcanvas",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "enable-offcanvas",
                 "defaultValue": "false"
             },
             "enableSearch": {
@@ -323,10 +344,31 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Enable the search bar."
                 },
-                "attribute": "enable-search",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "enable-search",
                 "defaultValue": "false"
             },
+            "searchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label for the search bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-label"
+            },
             "searchPlaceholder": {
                 "type": "string",
                 "mutable": false,
@@ -341,10 +383,31 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Placeholder text for the search bar."
                 },
-                "attribute": "search-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-placeholder",
                 "defaultValue": "\"Cerca\""
             },
+            "searchButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the search button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-button-label"
+            },
             "searchString": {
                 "type": "string",
                 "mutable": true,
@@ -359,8 +422,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Search string for the search bar."
                 },
-                "attribute": "search-string",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-string",
                 "defaultValue": "\"\""
             },
             "searchPageUrl": {
@@ -377,8 +442,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Url to the search page.\nSet this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\nThe link will also appear on the sticky header."
                 },
-                "attribute": "search-page-url",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-page-url"
             },
             "enableZLogo": {
                 "type": "boolean",
@@ -394,8 +461,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Enable laZ logo."
                 },
-                "attribute": "enable-z-logo",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "enable-z-logo",
                 "defaultValue": "true"
             },
             "drawerOpen": {
@@ -412,8 +481,10 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "The opening state of the drawer."
                 },
-                "attribute": "drawer-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "drawer-open",
                 "defaultValue": "false"
             }
         };
@@ -479,4 +550,3 @@ export class ZAppHeader {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-app-header/styles.css

@@ -1,20 +1,17 @@
 :host {
+  /**
+   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-content-max-width: ;
-
-  /* Variable to set stuck header and drawer's top offset.
-  Useful when something is absolutely positioned above the header. */
   --app-header-top-offset: ;
-
-  /* Variable to customize header background color. */
   --app-header-bg: ;
-
-  /* Variable to customize text and icon color. */
   --app-header-text-color: ;
-
-  /* Variable to customize stuck header background color. */
   --app-header-stucked-bg: ;
-
-  /* Variable to customize stuck header's text and icon color. */
   --app-header-stucked-text-color: ;
 
   position: relative;
@@ -28,7 +25,6 @@
 }
 
 .heading-panel {
-  /* Title's line height. */
   --title-line-height: 1.333;
   --title-font-size: var(--font-size-6);
 
@@ -206,6 +202,10 @@ z-searchbar {
   align-items: center;
 }
 
+z-searchbar.has-label {
+  align-items: flex-end;
+}
+
 .heading-stuck {
   position: fixed;
   z-index: 20;

package/dist/collection/components/z-aria-alert/index.js

@@ -2,10 +2,11 @@ import { Host, h } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
     constructor() {
+        /** Aria live mode */
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '14f0e24e89aba53c3ef6147cc371f3123f5ff688', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '1e1f8ef102be9d3f3302059f74e170c43158855b' })));
+        return (h(Host, { key: '93bfcc69e5d7d76af5deec0c12cee5db73788a5c', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '7dcfd72ecc06605e78ae738f837cec969997ef7d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {
@@ -20,7 +21,8 @@ export class ZAriaAlert {
                         "ZAriaAlertMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZAriaAlertMode"
+                            "id": "src/beans/index.tsx::ZAriaAlertMode",
+                            "referenceLocation": "ZAriaAlertMode"
                         }
                     }
                 },
@@ -30,11 +32,12 @@ export class ZAriaAlert {
                     "tags": [],
                     "text": "Aria live mode"
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "ZAriaAlertMode.POLITE"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-avatar/index.js

@@ -3,11 +3,12 @@ import { AvatarSize } from "../../beans";
 export class ZAvatar {
     constructor() {
         var _a, _b;
+        /** [optional] Avatar size */
         this.size = AvatarSize.MEDIUM;
-        this.text = undefined;
+        /** [optional] Avatar text color */
         this.textColor = "color-white";
+        /** [optional] Avatar background color */
         this.backgroundColor = "gray700";
-        this.image = undefined;
         if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             console.warn("z-avatar must contain at least one prop between text and image");
         }
@@ -24,10 +25,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'dc2adbb87d2c5f77e364434c7567612e0ad2328d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '3543824c05f276cddcc91263350962015dc2beb8', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '3fe07d541e5afe7116066e8e18bdaa844d06b170' }, this.text.substring(0, 2)), this.image && (h("img", { key: '8e4154861822c5811f8dbe561f9ae01b88d5329e', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '4a143ab81b55fae15ab40e3847c6c911c861f13b' }, this.text.substring(0, 2)), this.image && (h("img", { key: '2e37f8abd25c574371fe1a0f7d08af028fc1b342', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -53,7 +54,8 @@ export class ZAvatar {
                         "AvatarSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::AvatarSize"
+                            "id": "src/beans/index.tsx::AvatarSize",
+                            "referenceLocation": "AvatarSize"
                         }
                     }
                 },
@@ -63,8 +65,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar size"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "AvatarSize.MEDIUM"
             },
             "text": {
@@ -81,8 +85,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "textColor": {
                 "type": "string",
@@ -98,8 +104,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text color"
                 },
-                "attribute": "text-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "text-color",
                 "defaultValue": "\"color-white\""
             },
             "backgroundColor": {
@@ -116,8 +124,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar background color"
                 },
-                "attribute": "background-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "background-color",
                 "defaultValue": "\"gray700\""
             },
             "image": {
@@ -134,10 +144,11 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar image"
                 },
-                "attribute": "image",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -7,21 +7,17 @@ import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png"
  * Alignment of the image inside the container can be customized via CSS properties.
  *
  * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.
- * @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`)
  */
 export class ZBookCover {
     constructor() {
-        this.cover = undefined;
-        this.fallbackCover = undefined;
+        /** Whether to show a stack of covers to represent multiple books. */
         this.multiple = false;
+        /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */
         this.bordered = false;
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cb9ca394ffb718b1ee17b30de51d1ef4d18bb284' }, this.multiple && (h(Fragment, { key: 'd4dc53f421ea3ca6b10c2a5e2462eb650788d0a1' }, h("div", { key: 'fd2f7bb51d5f9d1e7d56b09826b699cbc31a6e9f', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '9a6330bc9f4475779b202dcb243b39e94a0b3d93', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '98e5002bfdc0bd0de7d8099e6e492cd6c6ad1d50', class: "cover-container" }, h("img", { key: 'a2ade090738ddfc7997bfd3b398714cd030b94bd', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '903b917bb54fe41da063606f2848390b168e3ccd', name: "coverOverlay" }))));
+        return (h(Host, { key: '407e954f3f8cb933aff3b404b7f3e1643798cf67' }, this.multiple && (h(Fragment, { key: 'c0c1e4caa27986a9c6e28733f4f8fe62e4dbea77' }, h("div", { key: 'dcaeeb60be98ce88fad97775307a5a339c0b47f9', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'b56848110f5c895b9d3301daba51d6d01659a63c', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '019936f586e758c4f5c0f6694d5c2291c222869b', class: "cover-container" }, h("img", { key: 'f0e6af812e6b1575396c16470090969cf19571aa', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '6556420f0cba2f2cac412b1386124c0b8e72db52', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }
@@ -51,8 +47,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the cover image."
                 },
-                "attribute": "cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover"
             },
             "fallbackCover": {
                 "type": "string",
@@ -68,8 +66,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "URL of the fallback cover image."
                 },
-                "attribute": "fallback-cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-cover"
             },
             "multiple": {
                 "type": "boolean",
@@ -85,8 +85,10 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to show a stack of covers to represent multiple books."
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "bordered": {
@@ -103,11 +105,12 @@ export class ZBookCover {
                     "tags": [],
                     "text": "Whether to apply a border around the cover image (always applied when `multiple` is enabled)."
                 },
-                "attribute": "bordered",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "bordered",
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -5,6 +5,12 @@
 }
 
 :host {
+  /**
+   * @prop --z-book-cover-height: height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
+   * @prop --z-book-cover-border-radius: border radius of the book cover (default: `var(--border-radius)`)
+   * @prop --z-book-cover-stack-shift-x: the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
+   * @prop --z-book-cover-stack-shift-y: the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
+   */
   --z-book-cover-height: 378px;
   --z-book-cover-border-radius: var(--border-radius);
   --z-book-cover-stack-shift-x: 8px;