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

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection } from "../../../beans";
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
@@ -6,80 +6,57 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
  * @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.
- * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
- * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
- * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
- * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
- * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
- * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
- * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
- * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
- * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
- * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
- * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
- * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
- * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
- * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
- * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
- * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
- * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
- * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
- * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
- * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
- * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
- * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
- * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
- * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
- * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
- * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
- * @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-height - Defaults to `auto`.
- * @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-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
- * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
- * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
- * Defaults to `--app-header-typography-3-size`.
- * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
- * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-lineheight`.
- * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
- * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-tracking`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeaderDeprecated {
     constructor() {
-        this.observer = SUPPORT_INTERSECTION_OBSERVER &&
-            new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, {
-                threshold: 0.5,
-            });
+        /**
+         * Stuck mode for the header.
+         * You can programmatically set it using an IntersectionObserver.
+         */
         this.stuck = false;
-        this.hero = undefined;
+        /**
+         * Should place an overlay over the hero image.
+         * Useful for legibility purpose.
+         */
         this.overlay = false;
+        /**
+         * Control menu bar position in the header.
+         * - auto: the menu bar is positioned near the title
+         * - stack: the menu bar is positioned below the title
+         * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+         */
         this.flow = "auto";
+        /**
+         * The opening state of the drawer.
+         */
         this.drawerOpen = 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;
+        /**
+         * The stuck state of the bar.
+         */
         this._stuck = false;
+        /**
+         * Current viewport.
+         * Used to change the aspect of the search button (icon only) on mobile and tablet.
+         */
         this.currentViewport = "mobile";
-        this.menuLength = undefined;
+        this.observer = SUPPORT_INTERSECTION_OBSERVER &&
+            new IntersectionObserver(([entry]) => {
+                this._stuck = !entry.isIntersecting;
+            }, {
+                threshold: 0.5,
+            });
         this.openDrawer = this.openDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
         this.collectMenuElements = this.collectMenuElements.bind(this);
@@ -191,7 +168,7 @@ export class ZAppHeaderDeprecated {
         this.evaluateViewport();
     }
     render() {
-        return (h(Host, { key: '70daa2ed1195bf9d557f0e24816810b00fb913a9', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '30ffe4d824d560709b54bf300881d03476ba3a13', class: "hero-container" }, h("slot", { key: '1bececd2955d1f45299f4bc891a35f374f1d0ef6', name: "hero" }, this.hero && (h("img", { key: '2ac6dac7069d6b58d44cef0cafb471ae445110b5', alt: "", src: this.hero }))))), h("div", { key: 'c652e565853a9e33aad7f9d0f748193c32deec53', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '70c9c5a1bbde50b36e63115bee8b3269ce022039', class: "heading-container" }, h("div", { key: 'a76d1c2752372f73d7dd7a3b78288c69d259cf86', class: "heading-subtitle" }, h("slot", { key: 'b0232cddcc686f08ab8da5a8018036df3187edf1', name: "top-subtitle" })), h("div", { key: 'db595cb70e93c52c54abd6e466bedad72b356e0f', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '7f2654a8e143498ac059fbad52824917c3484895', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '00269a4e47a2711a069dab8085ba5e96544ecc19', name: "burger-menu" }))), h("slot", { key: 'b8c54b4e1a2edf4257cc0d6622c99e5a49c229f4', name: "title" }), this.renderSearchLinkButton()), h("div", { key: 'be7cd607852e675ab18a1a802c9d35db56f79293', class: "heading-subtitle" }, h("slot", { key: '8431c484ab6db9cf0a9b43aff2f28d0212af0f62', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'e8ac060dd2ba98437dc500e392537d3d1fb1b541', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '84372e3a4b6bdfb656492543ac00594c78912c3d', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '09449043bca4b74ce62e3015dbc3a94874081d99', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: 'e61077afa2db151b091e097d243c400d05ed8b6e', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: '0ee13486c2f812d7e9ea33506252876e9091e846', name: "close" })), h("div", { key: '551693f4df9d53b595a017978e54d09eeced00e0', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'b1dc2791de9770c44ebd85b8108eb31abdc121cf', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '8a8992d2cc59da34510fc2c30ae2a5b96bcb5049', class: "heading-stuck" }, h("div", { key: '7a419cb48ad5f073d6ddcc50e8fbf179446e87ac', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '43923eb984c6b16e7766b31288e1ac62cf1e7d0a', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '99431d770890c990fa6c67ad89a59f7fc11c3101', name: "burger-menu" }))), h("div", { key: '47ed8b0f5654dfd76909681d2566fd8acd2234f5', class: "heading-title" }, h("slot", { key: '5861c0fa1e8e2bba8ee48e6453788b27eda537e5', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        return (h(Host, { key: 'aded309a3cb1033c51f95d94de1cd796f643fea0', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '78458badadf63a3366eaba9481ed709f7cb455c5', class: "hero-container" }, h("slot", { key: '1296c2091f4dd8b2f5215f07ea096772fc700abb', name: "hero" }, this.hero && (h("img", { key: 'ed06c899fb3e2b7316161555b307033a6821f64a', alt: "", src: this.hero }))))), h("div", { key: 'd8e275bde97fe5d694a50c33b5b32db7aee7699e', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: 'ce6fe29fd508558b3d75dba200006dfa31ba5ad9', class: "heading-container" }, h("div", { key: '5464ae272a15fcd6a975b62f5d2d6206d6f3f060', class: "heading-subtitle" }, h("slot", { key: '53c143c49c40cd3cef1475af920122ca5abd5329', name: "top-subtitle" })), h("div", { key: '0c4c147537d3ece12fd35e4a5ca553aeff2a8f1c', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '68e24b4435b6ee099f288cb4cb28794834ab1f72', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '220a3096e3275ec8e6bee6b715926f891ed09045', name: "burger-menu" }))), h("slot", { key: '52e89fe9902914e6daafe61f47de9ea4f02bf93e', name: "title" }), this.renderSearchLinkButton()), h("div", { key: 'c1f90edc6ecb0063d53f3ed68ee718fc86397751', class: "heading-subtitle" }, h("slot", { key: '84398e5cd8bf522e13b9f29118ba20d46510fbb1', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'e6d6d1fa5040a7c6d54869fac4c92a19407145fb', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '3c442f00807b6a4ff33349709a24b6096bce3b3c', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '268fa9a09f449e5e277ed56134cd1a5be9e9713e', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: 'be0350100f473da07ac89c22b950c0ff5f2dc14a', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'ebe1a2dd92cb3d010741e8745c5359a852e46253', name: "close" })), h("div", { key: 'cb6b380cfddc334c84fae9a045d4b886ff8d3f26', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'e120aa846065db5a7c0d9827e7b74a98f7b41f25', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '7d0460155469d822b7f608804dc1465f08e28b02', class: "heading-stuck" }, h("div", { key: 'b570cf1d407aad9a9c2a10af56835f3a3d5f1379', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '06929d598cab5b080e0f3b23606ca6e4ee50a113', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '807ee08ed6a4db7ca124114007e1a2d52dca75e0', name: "burger-menu" }))), h("div", { key: 'dfbb47685f209528aa6a70f29b5cb5ca83a4a2e6', class: "heading-title" }, h("slot", { key: 'aff80bd515be456bc15b5fa91dbc85ce33fe6562', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
     }
     static get is() { return "z-app-header-deprecated"; }
     static get encapsulation() { return "shadow"; }
@@ -221,8 +198,10 @@ export class ZAppHeaderDeprecated {
                     "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"
             },
             "hero": {
@@ -239,8 +218,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Set the hero image source for the header.\nYou can also use a [slot=\"hero\"] node for advanced customization."
                 },
-                "attribute": "hero",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hero"
             },
             "overlay": {
                 "type": "boolean",
@@ -256,8 +237,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Should place an overlay over the hero image.\nUseful for legibility purpose."
                 },
-                "attribute": "overlay",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "overlay",
                 "defaultValue": "false"
             },
             "flow": {
@@ -274,8 +257,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Control menu bar position in the header.\n- auto: the menu bar is positioned near the title\n- stack: the menu bar is positioned below the title\n- offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu"
                 },
-                "attribute": "flow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "flow",
                 "defaultValue": "\"auto\""
             },
             "drawerOpen": {
@@ -292,8 +277,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "The opening state of the drawer."
                 },
-                "attribute": "drawer-open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "drawer-open",
                 "defaultValue": "false"
             },
             "enableSearch": {
@@ -310,8 +297,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Enable the search bar."
                 },
-                "attribute": "enable-search",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "enable-search",
                 "defaultValue": "false"
             },
             "searchPlaceholder": {
@@ -328,8 +317,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Placeholder text for the search bar."
                 },
-                "attribute": "search-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-placeholder",
                 "defaultValue": "\"Cerca\""
             },
             "searchString": {
@@ -346,8 +337,10 @@ export class ZAppHeaderDeprecated {
                     "tags": [],
                     "text": "Search string for the search bar."
                 },
-                "attribute": "search-string",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-string",
                 "defaultValue": "\"\""
             },
             "searchPageUrl": {
@@ -364,8 +357,10 @@ export class ZAppHeaderDeprecated {
                     "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"
             }
         };
     }
@@ -417,4 +412,3 @@ export class ZAppHeaderDeprecated {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,53 @@
 :host {
+  /**
+   * @prop --app-header-typography-1-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
+   * @prop --app-header-typography-2-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
+   * @prop --app-header-typography-3-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
+   * @prop --app-header-typography-4-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
+   * @prop --app-header-typography-5-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
+   * @prop --app-header-typography-6-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
+   * @prop --app-header-typography-7-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
+   * @prop --app-header-typography-8-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
+   * @prop --app-header-typography-9-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
+   * @prop --app-header-typography-10-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
+   * @prop --app-header-typography-11-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
+   * @prop --app-header-typography-12-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
+   * @prop --app-header-typography-1-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
+   * @prop --app-header-typography-2-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
+   * @prop --app-header-typography-3-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-4-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-5-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-6-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-7-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-8-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-9-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-10-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-11-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-12-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-1-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
+   * @prop --app-header-typography-2-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
+   * @prop --app-header-typography-3-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
+   * @prop --app-header-typography-4-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
+   * @prop --app-header-typography-5-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
+   * @prop --app-header-typography-6-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
+   * @prop --app-header-typography-7-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
+   * @prop --app-header-typography-8-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
+   * @prop --app-header-typography-9-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
+   * @prop --app-header-typography-10-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
+   * @prop --app-header-typography-11-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
+   * @prop --app-header-typography-12-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+   * @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-height: Defaults to `auto`.
+   * @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-drawer-trigger-size: The size of the drawer icon. Defaults to `--space-unit * 4`.
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
+   * @prop --app-header-title-font-size: Variable to customize the title's font size. NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. Defaults to `--app-header-typography-3-size`.
+   * @prop --app-header-title-lineheight: Variable to customize the title's line-height. NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-lineheight`.
+   * @prop --app-header-title-letter-spacing: Variable to customize the title's letter-spacing. NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-tracking`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;

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

@@ -7,26 +7,13 @@ import { randomId } from "../../../utils/utils";
  * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
  * @slot tags - card tags (extended and search variant only)
  * @slot footer-cta - footer cta button (search and compact variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- * @cssprop --z-book-card-compact-width - compact card custom width
- * @cssprop --z-book-card-compact-height - compact card custom height
  */
 export class ZBookCardDeprecated {
     constructor() {
-        this.variant = undefined;
-        this.cover = undefined;
-        this.operaTitle = undefined;
-        this.volumeTitle = undefined;
-        this.authors = undefined;
-        this.isbn = undefined;
+        /**
+         * [optional] ISBN label
+         */
         this.isbnLabel = "";
-        this.ribbon = undefined;
-        this.ribbonIcon = undefined;
-        this.ribbonInteractive = undefined;
-        this.borderless = undefined;
-        this.fallbackCover = undefined;
-        this.operaTitleTag = undefined;
         this.isMobile = false;
         this.hasResources = false;
         this.showResources = false;
@@ -124,7 +111,7 @@ export class ZBookCardDeprecated {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '6ece3ffbd418d55397039753ec7c6a8f4cc2b262', class: {
+        return (h("article", { key: 'd603afa99fc5bdc0b6cb9ad1b22a309c4962c486', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));
@@ -153,7 +140,8 @@ export class ZBookCardDeprecated {
                         "BookCardDeprecatedVariant": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::BookCardDeprecatedVariant"
+                            "id": "src/beans/index.tsx::BookCardDeprecatedVariant",
+                            "referenceLocation": "BookCardDeprecatedVariant"
                         }
                     }
                 },
@@ -163,8 +151,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "Card variant: expanded, compact, search"
                 },
-                "attribute": "variant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "cover": {
                 "type": "string",
@@ -180,8 +170,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "Cover URL"
                 },
-                "attribute": "cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover"
             },
             "operaTitle": {
                 "type": "string",
@@ -197,8 +189,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "Card main title"
                 },
-                "attribute": "opera-title",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "opera-title"
             },
             "volumeTitle": {
                 "type": "string",
@@ -214,8 +208,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Card subtitle"
                 },
-                "attribute": "volume-title",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "volume-title"
             },
             "authors": {
                 "type": "string",
@@ -231,8 +227,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Authors"
                 },
-                "attribute": "authors",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "authors"
             },
             "isbn": {
                 "type": "string",
@@ -248,8 +246,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Main ISBN"
                 },
-                "attribute": "isbn",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "isbn"
             },
             "isbnLabel": {
                 "type": "string",
@@ -265,8 +265,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] ISBN label"
                 },
-                "attribute": "isbn-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isbn-label",
                 "defaultValue": "\"\""
             },
             "ribbon": {
@@ -283,8 +285,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Ribbon label - expanded and search variant only"
                 },
-                "attribute": "ribbon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon"
             },
             "ribbonIcon": {
                 "type": "string",
@@ -300,8 +304,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Ribbon icon - expanded and search variant only"
                 },
-                "attribute": "ribbon-icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon-icon"
             },
             "ribbonInteractive": {
                 "type": "boolean",
@@ -317,8 +323,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Ribbon interactive - expanded and search variant only"
                 },
-                "attribute": "ribbon-interactive",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ribbon-interactive"
             },
             "borderless": {
                 "type": "boolean",
@@ -334,8 +342,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Borderless card - compact variant only"
                 },
-                "attribute": "borderless",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "borderless"
             },
             "fallbackCover": {
                 "type": "string",
@@ -351,8 +361,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] Fallback cover URL"
                 },
-                "attribute": "fallback-cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-cover"
             },
             "operaTitleTag": {
                 "type": "string",
@@ -368,8 +380,10 @@ export class ZBookCardDeprecated {
                     "tags": [],
                     "text": "[optional] [accessibility] Card title HTML tag"
                 },
-                "attribute": "opera-title-tag",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "opera-title-tag"
             }
         };
     }
@@ -400,4 +414,3 @@ export class ZBookCardDeprecated {
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,12 @@
 /* COMMON STYLES */
 
 :host {
+  /**
+   * @prop --z-book-card-ribbon-background-color: ribbon backgrund color
+   * @prop --z-book-card-ribbon-shadow-color: ribbon shadow color
+   * @prop --z-book-card-compact-width: compact card custom width
+   * @prop --z-book-card-compact-height: compact card custom height
+   */
   --z-book-card-ribbon-background-color: var(--avatar-C08);
   --z-book-card-ribbon-shadow-color: var(--green950);
   --z-book-card-compact-width: 262px;